700936 - New tab / tab switcher button should be at right

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect, P2)

Description

[Alex Limi (:limi) — Firefox UX Team]

Attachment: 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]

(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]]

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)]

Attachment: 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)]

Attachment: New graphic assets for tab backgrounds, new tab icon and carat

Comment 5

[Ian Barlow (:ibarlow)]

Attachment: new graphic assets, prepared based on Sriram's feedback

Comment 6

[Sriram Ramasubramanian [:sriram]]

Attachment: 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]]

This might need clobbering due to changing of resources :(

Comment 8

[Mark Finkle (:mfinkle) (use needinfo?)]

https://hg.mozilla.org/projects/birch/rev/704f79a17282

Comment 9

[Aaron Train [:aaronmt]]

20111115055623
http://hg.mozilla.org/projects/birch/rev/6b776bed41d7
Samsung Nexus S (Android 2.3.6)