833471 - Tab selector has inconsistent design & discoverability issues

Status: RESOLVED INVALID

(Firefox for Android Graveyard :: Theme and Visual Design, defect)

Description

[Gian-Carlo Pascutto [:gcp]]

Attachment: Screenshot on Android 3.2

After bug 817675 there are several issues. All seen on Galaxy Tab 10.1, Android 3.2:

1) The tab selector (Tabs/Private/Sync) isn't all that apparent. If I compare with Ian's example design, on Android 3.2 the element is missing the underlining that made it more apparent that it's a selector. Right now there's only a small triangle and it actually took me a while to realize this was a drop-down list. I know this might be just the platform default styling, but I haven't encountered any other Android app that was using it in the same way, which IMHO makes us have a discoverability issue here.

2) The menu that pops ups doesn't seem to be styled at all and looks inconsistent with everything else.

3) The position of the menu is separated from the element it refers to. This looks wrong and is strange.

Comment 1

[Sriram Ramasubramanian [:sriram]]

Ian's mockups aren't the final ones. We decided to use just a triangle as that's the convention for Spinners in Action-Bar. Android 3.2 is positioning the popup at a different place, unlike ICS or JB. I can try to reposition the popup, but the styling of them is as per UX recommendation.

Comment 2

[Gian-Carlo Pascutto [:gcp]]

The popup being unstyled is per UX recommendation? Or did you mean the listbox/spinner?

Comment 3

[Sriram Ramasubramanian [:sriram]]

The popup is following the same style as our custom menu. This is as per UX recommendation.

Comment 4

[Gian-Carlo Pascutto [:gcp]]

Ok. I see now that it's indeed styled light grey, not white. The thing is that it's attached to the dark spinner, which is more strange than the menu being connected to the light grey menu button (of the same color). Or more precisely, it's not actually attached :) The tab menu (new tab, new private tab, close all tabs) on the button has a similar light grey vs dark grey styling, but it at least has a triangle-arrow that points back to the element that popped it up. Even if the first part of this is arguable, missing the latter looks like a bug?

Now, on IRC it was mentioned that Gmail and Gtalk also use these spinners. However I think their use there actually reinforces my point:

http://dl.dropbox.com/u/32496746/SC20130123-185022.jpg

The spinner is surrounded by a rectangle making it look like a button and conveying much stronger that you can press it.

http://cl.ly/image/1Q1G3E153r14

While the top spinner indeed does look like ours, notice the bottom one does have the extra underline in there.

So out of the 3 "counter" examples given, 2 actually have a different UX to make it more apparent they can be pressed. I don't think that's a coincidence.

Comment 5

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

The Gallery and Calendar apps also use a spinner in the toolbar. Styled like ours, except the "arrow" part of the widget is closer to the text, making it look more like a whole widget, not like text + a floating arrow. Bug 833891 has a patch for that.

Comment 6

[Ian Barlow (:ibarlow)]

Resolving invalid, since we're removing the spinners in favor of icon tabs. See bug 834332