Last Comment Bug 700936 - New tab / tab switcher button should be at right
: New tab / tab switcher button should be at right
Status: VERIFIED FIXED
: uiwanted
Product: Firefox for Android
Classification: Client Software
Component: General (show other bugs)
: unspecified
: All All
: P2 normal (vote)
: ---
Assigned To: Sriram Ramasubramanian [:sriram]
:
: Sebastian Kaspari (:sebastian)
Mentors:
Depends on:
Blocks: 700937 702287
  Show dependency treegraph
 
Reported: 2011-11-08 21:55 PST by Alex Limi (:limi) — Firefox UX Team
Modified: 2016-07-29 14:20 PDT (History)
6 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---
fixed
11+


Attachments
Mock-up of tab selector on right side (199.36 KB, image/jpeg)
2011-11-08 21:55 PST, Alex Limi (:limi) — Firefox UX Team
no flags Details
Mockup of tab menu on the right (56.62 KB, image/png)
2011-11-14 08:19 PST, Ian Barlow (:ibarlow)
no flags Details
New graphic assets for tab backgrounds, new tab icon and carat (15.56 KB, application/zip)
2011-11-14 10:46 PST, Ian Barlow (:ibarlow)
no flags Details
new graphic assets, prepared based on Sriram's feedback (16.38 KB, application/zip)
2011-11-14 13:29 PST, Ian Barlow (:ibarlow)
no flags Details
Patch (30.03 KB, patch)
2011-11-14 14:30 PST, Sriram Ramasubramanian [:sriram]
mark.finkle: review+
Details | Diff | Splinter Review

Description Alex Limi (:limi) — Firefox UX Team 2011-11-08 21:55:23 PST
Created attachment 573084 [details]
Mock-up of tab selector on right side

The current positioning of the new tab / tab switcher is inconsistent with how it works on the desktop versions of the product, and as a minor issue also causes the UI to be asymmetrical because of the favicon position.

I propose that we move the tab selector to the right side, see attached mock-up. This accomplishes a few things:

1. Places the new tab button on the right side of the current tab, just like on the desktop.
2. Places the tab overflow dropdown on the rightmost side of the tab(s), just like on desktop.
3. Avoids the asymmetrical look of: 
   [v][f] facebook.com 
   …and makes it 
   [f] facebook.com [v]
   …instead.
Comment 1 Alex Limi (:limi) — Firefox UX Team 2011-11-08 21:57:47 PST
(as for why this is important: we're trying to unify concepts and placement across our different platforms where possible; and this seems like an easy win, and IMO also looks better)
Comment 2 Madhava Enros [:madhava] 2011-11-09 10:46:52 PST
There are some things to consider around doing something like this:

In favour:
- more consistent with desktop Firefox
- tab button would be more easily thumbable for right-handed users


Opposed:
- would be inconsistent with the tablet UI, where this is a good reason for the tab area being at the left (not getting in the way of dominant thumb panning of content)
- on ICS, standard menu button placement would push this to the left, meaning it's no longer in a corner
Comment 3 Ian Barlow (:ibarlow) 2011-11-14 08:19:39 PST
Created attachment 574305 [details]
Mockup of tab menu on the right

So, Madhava and I just talked some more about this, and we tend to agree that moving the tab menu to the right would is a better overall solution. 

Benefits
- It gets the tab menu closer to your right thumb
- It is more consistent with the "new tab" button on desktop
- It looks more like a tab overflow button, so opening a menu list of tabs is a more expected behaviour than it might be on the left

---

Of course, it is somewhat of a departure from the tabs on the left model on tablet, but the design is similar enough that they still look like they are in the same family. We will also have an opportunity to revisit our tablet tab menu, once we start working on a java tablet ui.

---

Let's do it!
Comment 4 Ian Barlow (:ibarlow) 2011-11-14 10:46:17 PST
Created attachment 574343 [details]
New graphic assets for tab backgrounds, new tab icon and carat
Comment 5 Ian Barlow (:ibarlow) 2011-11-14 13:29:39 PST
Created attachment 574396 [details]
new graphic assets, prepared based on Sriram's feedback
Comment 6 Sriram Ramasubramanian [:sriram] 2011-11-14 14:30:50 PST
Created attachment 574427 [details] [diff] [review]
Patch

This patch moves the tabs button to the right.

I haven't added extra line breaks in address_bar_bg.xml as it felt so weird than how the current grouping looks. I am open for changes there.

I have more the png's to drawable-mdpi-v8 and drawable-mdpi-v11. This seems to work fine for me in Nexus S. If there are issues with this structure, we might want to think of having drawable-mdpi and drawable-hdpi for froyo and gingerbread (instead of replicating them in v8 and v9 folders).
Comment 7 Sriram Ramasubramanian [:sriram] 2011-11-14 14:51:00 PST
This might need clobbering due to changing of resources :(
Comment 8 Mark Finkle (:mfinkle) (use needinfo?) 2011-11-15 05:56:51 PST
https://hg.mozilla.org/projects/birch/rev/704f79a17282
Comment 9 Aaron Train [:aaronmt] 2011-11-15 07:12:12 PST
20111115055623
http://hg.mozilla.org/projects/birch/rev/6b776bed41d7
Samsung Nexus S (Android 2.3.6)

Note You need to log in before you can comment on or make changes to this bug.