[UX] 3-dot toolbar menus should all be consistent across browser vs homescreen (toolbar menu redesign)

[vesta0]

User Story

• As a user, I want to see the same options in the same order (when applicable) in the toolbar so it is easy for me to get used to them and be able to quickly interact with them.

Acceptance Criteria

• I see the same toolbar options when I am on different screens (homescreen, tab, etc)
• I find it easy to find what I am looking for regardless of what screen I am on (measured through user testing)

┆Issue is synchronized with this Jira Task

[liuche]

Also see #14394 for addons menu item, or possibly "Quit" for clear on quit feature #12230

[liuche]

cc @violasong bc I think you're working on this this sprint!

[violasong]

Issues:

• Improve the ordering of Android menu items
• Consider trade-off of reachability with thumb vs. ease of reading top-to-bottom
• Consider Desktop Firefox's menu ordering
• Feedback: Some people look at the top of the menu for important actions
• Feedback: 'Bookmark' and 'Bookmarks' are easily missed or hard to find
• Which options would also be appropriate for the 3 dot menu on tabs tray? (Settings?) UX work is happening as part of Allow users to manually re-order tabs #10344.
• Concern: The bottom toolbar menu being a completely reversed version about the top could be confusing
  • Should that menu be the same as the top toolbar menu?
  • What about a hybrid approach: Each section stays in a logical order (e.g. Bookmarks should always be at the top of its section), but the sections could be reversed?

Other considerations:

• ‘Add to Home screen’ changes to ‘Install’ when visiting a PWA site.
• Right now when you visit a site for which you have the native app installed we show ‘Open in app’ in the menu.
• ‘Report Site Issue’ can be found in the Add-ons submenu, and no one seems to know how that happened, so we think it’s a bug and should be moved back to the top level. [Bug] On Add-ons submenu, "Report site issue" is not necessary #11631
• Quit More natural order of options in the 3 dot menu? #12230 and Addons Access extension browser action when no tabs are open #14394
• What about screen readers?
• New tab in main menu? Add new tab and new private tab to main menu #9871

Next steps:

• Wait for: Data on most used menu items from release (meeting next Wednesday, file intake form)
• Wait for: Data Science telemetry ticket (menu items sorted by most-accessed)
• Wait for: Gesture research (one-hand vs 2-hand)
• Investigate: Previous work on Save Panel and Share Panel, usability study
• Make wireframes
• Launch pilot user test

[TheRealOsas]

"Consider trade-off of reachability with thumb vs. ease of reading top-to-bottom" please can u guys keep this as an option, one thing I like about fenix is that everything can be reached at thumbs length (if your toolbar Is at the bottom)

[yoasif]

@violasong #9871 is worth a look here.

[axeltrinidade]

Wouldn't the different honescreen and tab toolbar look more consistent if the background color of the additional tab toolbar options be slightly lighter/darker than the basic options (which appear in the honescreen)

[klint]

Hi. I was just wondering: is the "remote debugging by USB" needed where it is now, given that's a very advanced setting that is unlikely to be used by a regular user? Maybe in the "about Firefox" section near "Support" entry? Or permanently behind the "Secret Settings"? :)

[cadeyrn]

"About Firefox" or the "Secret Settings" are totally wrong for this setting. In fact it's a very important setting for a very large target audience: millions of people develop websites, either professional or as hobby. And to be honest I doubt that really every other option in the settings has more users and if these don't get removed from the main settings screen…

But I can't see how this issue is about settings. It's about the menues, no?

[klint]

"About Firefox" or the "Secret Settings" are totally wrong for this setting. In fact it's a very important setting for a very large target audience: millions of people develop websites, either professional or as hobby. And to be honest I doubt that really every other option in the settings has more users and if these don't get removed from the main settings screen…

Ok, got it, thanks for the explanation

But I can't see how this issue is about settings. It's about the menues, no?

yes, it seems to be only about the level 1 menu actually. My bad.

So here is one thing for the level 1 menu: regarding "Install" vs "Add to homescreen" entries.
The code is ready to have both entries displayed at the same time instead of only one of them. Yet, only one is displayed currently, per design. Just asking whether having both displayed could be considered in this ticket ? (as a reminder, the use case is for instance when a news site like lemonde.fr is available as a PWA but when you would like to add a specific article to the homepage. This is not possible currently, as you can only install the site as a PWA that leads to the homepage, not to the article itself).

[violasong]

Related issue: #10344 involves changes to the tab tray menu. @topotropic is investigating a "Tab Settings" menu item which leads to a new page in Settings.

[violasong]

Update: Working on a survey based on the following mockup, and requesting meta-feedback from Firefox mobile UX, twitter, reddit.

[dglttr]

Will the synced tabs entry be removed once #14117 lands?
For now, it's needed, but afterwards, a separate menu entry seems redundant to me.

[klint]

Where will the "Open in application" and "Exit" menu entries be placed ? These entries are displayed or hidden depending on the context, but where will they be displayed when activated?

[dglttr]

Where will the "Open in application" and "Exit" menu entries be placed ?

Same question for the Appearance option that appears when you open a site in reader mode.
If this menu is moved into Settings > Customize (see #11282), then this consideration is not necessary.

[Poopooracoocoo]

just wanna be able to drag to open and select a menu item

[regs01]

This is definitely not true and to be honest I don't undestand why you think so. In fact the menu of Firefox Lite is much easier to use one-hand than the current menu of Firefox. Just try it.

It's true. For hence reason it's easier to use Chrome and current Firefox menu. Dimming is also quite annoying thing.

[cadeyrn]

It's true. For hence reason it's easier to use Chrome and current Firefox menu.

Then you have to explain it. As I already said: I don't understand why you think so. You can use the full width of every row, so a full width menu can't make it more difficult to use than a non full width menu. And since the menu of Firefox Lite has a smaller height it's also easier to reach every menu item, compared to the currrent and much higher menu of Firefox.

As a consequence for me it's not possible at all to reach every menu item with only one hand in Firefox, but in Firefox Lite it's super easy. So how is it possible that you say the opposite? What am i missing?

[sheikh-azharuddin]

Also I found nice implementation in Samsung internet browser... Just 4 rows of icons(icons can be rearranged) .. Smaller height and clean UI

[violasong]

Hi all,

After going through several more rounds of UX review with my colleagues, we re-focused on the core issues of this design: improving organization with semantic groupings, improving scannability by simplifying visuals, and solving the confusion around bookmarking. We also discussed a unified experience across desktop and mobile, which will include moving away from our current reliance on icons and reducing submenus where possible.

That brought this design back to the list layout, with the addition of a clearer bookmarking interface. It may not be as fancy as some of the previous proposals, but we're erring on the side of being straightforward and text-focused. This design went through 8 more user tests and received positive reactions and a 100% bookmarking success rate. Here's the final design:

[cadeyrn]

@violasong Thanks for the update.

I think "improving scannability" and "moving away from our current reliance on icons" is really a big contradiction. Most people are "visual people" and icons help a lot to find menu items quickly. Now users have to read every menu item to find the correct one.

Also the proposed bookmarks menu item is confusing for two reasons:

1. It's a very unusual way for a menu item with two different functions. And to be honest the purple part on the right side doesn't look like it would belong there.

2. The icon and the text have opposite meanings:

a) empty star and "Add": negative state (no bookmark) + positive action (make it a bookmark)
b) filled star and "Remove": positive state (bookmark) + negative action (remove the bookmark)

While the functionality is not different from the current implementation the combination of icon and text makes this a bit confusing interface element.

[violasong]

@cadeyrn thanks for your feedback, as always. Re: the bookmark add/remove, I actually realized there's an error here, and it should say Edit instead of remove. I'll think about how I can improve the state issue beyond that.

As for the icons, I understand the concern. I'm expecting it's more that people will scan the first letter, or first few letters, rather than reading every word. I know my colleagues have done a lot of work on this decision - I'll read up on it and see if there's more that I can share.

[sheikh-azharuddin]

Increase the list a bit longer for it to go out of the screen🤣🤣... I don't understand how can the test users compare desktop with mobile... Probably they are using 4" device... The bottom address bar was added with the sole purpose of easy accessibility with a single hand for large devices.. Increasing the list simply defeat the purpose.. You operate desktop with a mouse but mobile device is different. So no comparison of mobile with desktop👎🏼

[Dunexus]

Hello @violasong ,

We also discussed a unified experience across desktop and mobile, which will include moving away from our current reliance on icons and reducing submenus where possible.

On desktop, the menu uses icons. It is not clear how removing icons improves scannability and unifies the experience. It looks like it is the exact opposite.

[klint]

@violasong
Also, on desktop, "New page" is almost the closest menu option to the hamburger icon that opens the menu. Hence, no big mouse move is needed.
Whereas on mobile, with the bottom address bar layout, "New tab" is the furthest option from the menu icon. Not very handy to be used with one hand.

[Edit] I understand that the constraint is to keep the same order of entries whatever the position of the address bar is. So maybe a stupid idea, but couldn't the menu be even more shrunk when open? Up to "Find in page" instead of "Add to Home Screen" as in the current proposal? This would bring the "New tab" option more at hand.

[cadeyrn]

@Dunexus:

On desktop, the menu uses icons

I don't know the final mockups but the current implementation of the upcoming Proton menu does not contain any icons so far.

@violasong:

As for the icons, I understand the concern. I'm expecting it's more that people will scan the first letter, or first few letters, rather than reading every word.

Yes, our brain is very smart and we don't need to read every letter. But it still makes a big difference to have icons or not to have icons. Removing the icons will definitively not improve the scannability. We know from science that for most people images are faster to scan than text because images speak directly to the visual center of our brain and do not need to be combined with other icons like multiple letters has to be combined to a word to make sense. Scanning text is much more complex for the human brain. So please reconsider this.

[klint]

Also, quite sad that the final layout will not make it easy to implement #15450 (Always allow "add to home screen", even if the site can be installed as a PWA).

[OFF-TOPIC or maybe not quite]

As a side note, after many months of Fenix usage, it appears that:

1. I NEVER used collections and prefer to leave all tabs open in tab tray (at least they will be synced that way) ;)
2. for what it is about here, I'm mad at Fenix every other day because it won't let me create a shortcut to a specific article in my newspaper website (which is available as PWA of course).

[/OFF-TOPIC]

[CharoSW]

I feel like that horizontal bookmarks/history/downloads icon and text bar is a lot easier to see and discern the function, and also easier to hit with fingers and not have to worry about scrolling the menu. I also second @cadeyrn 's point about the bookmarks item being weird with two parts. It's a confusing element that I as a user would have to think to figure out what it's doing, running counter to your goal of making the user think less, and its also a bad hit target. If I am using a phone one handed with my right hand then I have a decent chance of adding (moderately annoying) or removing (extremely annoying) the page as a bookmark vs opening the bookmarks menu like I would want.

[sheikh-azharuddin]

Yes, our brain is very smart and we don't need to read every letter. But it still makes a big difference to have icons or not to have icons. Removing the icons will definitively not improve the scannability. We know from science that for most people images are faster to scan than text becasue images speak directly to the visual center of our brain and do not need to be combined with other icons like multiple letters has to be combined to a word to make sense. Scanning text is much more complex for the human brain. So please reconsider this.

In simple term a picture speaks thousand word.. So icons are better than text at any time

[JoGarWeb]

How many test users do you rely on to make decisions? Less than 10? So many good proposals throughout these long months so that the design ends up practically as loaded and now without icons.
Is all I will say...

[violasong]

Hey all, I understand there's frustration with this outcome after seeing the intermediate mockups that many of you preferred.

To explain my understanding of the icons decision coming to both desktop and mobile: Our researchers have conducted 9 studies related to this issue in the last few years, and they found that people recognized almost none of the icons without the text. The new direction is to use only highly recognizable icons, in places where they are necessary, and avoid the others, because they add noise for most people.

[kleinph]

As others already pointed out, there are a few problems with it.

At first I agree with @cadeyrn that the removal of icons is contradictory to "improving scan-ability". Also keep in mind that this relies on the wording and thus scan-ability might be sensitive to wording changes. There may be also (very few) users who use the browser in different languages (on different devices). (But yes, this is a bit of a extreme corner case.) Icons are universal and not affected by wording or language changes.

The other thing, others already pointed out is the double role of the bookmark entry.

The last thing the concerns me are the hidden menu entries. If I understand this correctly, the menu entry "Add to Home Screen" is half visible in its default state. I assume this should make the hidden entries discoverable? But doesn't this look a bit wrong in its default state?

(As I said before, I think this design was the best one, and I don't really understand what's wrong with it.)

[sheikh-azharuddin]

Hey all, I understand there's frustration with this outcome after seeing the intermediate mockups that many of you preferred.

To explain my understanding of the icons decision coming to both desktop and mobile: Our researchers have conducted 9 studies related to this issue in the last few years, and they found that people recognized almost none of the icons without the text. The new direction is to use only highly recognizable icons, in places where they are necessary, and avoid the others, because they add noise for most people.

And what's the issue with having icons and text like in previous mockups?? Even the Firefox lite UI looks better

And there is no reason not to expand the UI to full width which could possibly reduce the height

[eliserichards]

Thanks for your input, y'all! I'm closing this ticket as done since the designs are finalized 😄 👍

[sheikh-azharuddin]

Final closing note:
After months of mocks and design Firefox decided to simply extend the menu height by adding few more items making it more harder to reach top items with a single finger for large devices!

Speaking of similarities not sure why Mozilla added the bottom address bar in fenix when desktop does not have one!

Anyway Mozilla does what they want not what practical and useful..

[violasong]

Folks... it takes time and emotional fortitude to share the full design process, which is why almost no designers do this. I, too, would have loved to ship one of the more collaborative designs which you all helped with. But I'm still working within a company that has strategies and goals which I'm beholden to, and that caused me to make changes. Please don't ruin my day over this or it will be much harder to share the design process next time.