I think the current experience provided by this icon has a lot of room for improvement. First of all, the zoom indicator only shows when the percentage is not 100%. Why not show it when it's at 100%? Secondly, nothing happens to the icon immediately on hover to indicate that it has a click handler. I think displaying a simple highlight effect would make it more clear to the user that this icon can be clicked. (several of the other icons could use this tiny improvement as well - the Reload icon, the "Show history" icon, and the green security icon/text). Lastly, and most importantly, clicking the zoom percentage indicator makes it disappear and the page resets to the default zoom level. I think this experience could really be improved. Clicking on the zoom percentage could show a small popup with a slider that lets you control the zoom. I think this would provide a much more intuitive and functional experience than what currently exists. I really hope we can improve this experience.

This is a Firefox front-end feature, moving back to the right component.

(In reply to Matthew Wein [:K-9] from comment #0) > First of all, the zoom indicator only shows when the percentage is not 100%. > Why not show it when it's at 100%? We don't want an "always on" indicator. Most pages have their zoom level unchanged, and showing unchanged settings with high visibility in our UI won't add much value. If the indicator is always visible it will also reduce space in the location bar for all pages, whereas now it only has this effect on pages with non-default zoom levels. > Secondly, nothing happens to the icon immediately on hover to indicate that > it has a click handler. I think displaying a simple highlight effect would > make it more clear to the user that this icon can be clicked. (several of > the other icons could use this tiny improvement as well - the Reload icon, > the "Show history" icon, and the green security icon/text). The initial design was to expand the indicator and show an "X" next to the value, with the goal of letting users know that clicking would remove the zoom setting. We dropped the "X" due to questions over how the history dropdown would seemingly move away from the user. We could bring the "X" back, and always show it instead of hiding it when not hovered. We can also darken the border color of the indicator on hover. > Lastly, and most importantly, clicking the zoom percentage indicator makes > it disappear and the page resets to the default zoom level. I think this > experience could really be improved. Clicking on the zoom percentage could > show a small popup with a slider that lets you control the zoom. I think > this would provide a much more intuitive and functional experience than what > currently exists. We have this type of control in the Firefox menu. If that control has been moved to the toolbar then this zoom indicator is disabled. With the changes described in the middle paragraph, clicking on the indicator should hopefully be clearer.

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #2) > > Secondly, nothing happens to the icon immediately on hover to indicate that > > it has a click handler. I think displaying a simple highlight effect would > > make it more clear to the user that this icon can be clicked. (several of > > the other icons could use this tiny improvement as well - the Reload icon, > > the "Show history" icon, and the green security icon/text). > > The initial design was to expand the indicator and show an "X" next to the > value, with the goal of letting users know that clicking would remove the > zoom setting. We dropped the "X" due to questions over how the history > dropdown would seemingly move away from the user. > > We could bring the "X" back, and always show it instead of hiding it when > not hovered. We can also darken the border color of the indicator on hover. I agree we should look into ways to make it more obvious that this has an action attached to it and what that action is. > > Lastly, and most importantly, clicking the zoom percentage indicator makes > > it disappear and the page resets to the default zoom level. I think this > > experience could really be improved. Clicking on the zoom percentage could > > show a small popup with a slider that lets you control the zoom. I think > > this would provide a much more intuitive and functional experience than what > > currently exists. > > We have this type of control in the Firefox menu. If that control has been > moved to the toolbar then this zoom indicator is disabled. With the changes > described in the middle paragraph, clicking on the indicator should > hopefully be clearer. Yes, the goal of this indicator is to show people that the page is not in the default state and give them a quick way to revert it to the default zoom level. There are a lot of mostly invisible ways to end up with a non-default zoom level. The goal was not to replicate the zoom control functionality already present in the Application Menu.

[Tracking Requested - why for this release]: new feature introduced in 51, we should make sure the first user experience is good

Tracking 51+ to not lose track of this work.

Hi Philipp, May I have your input to review the UX based on comment #3 since this feature will be introduced in 51?

(In reply to Gerry Chang [:gchang] from comment #6) > Hi Philipp, > May I have your input to review the UX based on comment #3 since this > feature will be introduced in 51? The suggestion to have a more prominent visible hover effect makes a lot of sense in order to convey that this is an interactive element! A darker border or background would work.

(In reply to Philipp Sackl [:phlsa] (Firefox UX) please use needinfo from comment #7) > The suggestion to have a more prominent visible hover effect makes a lot of > sense in order to convey that this is an interactive element! A darker > border or background would work. Changing the background color is easier since we use native border colors on Windows and Linux. The code is here: https://dxr.mozilla.org/mozilla-central/rev/8c9c4e816e86f903c1d820f3f29715dc070a5a4a/browser/themes/windows/browser.css#1411 https://dxr.mozilla.org/mozilla-central/rev/8c9c4e816e86f903c1d820f3f29715dc070a5a4a/browser/themes/osx/browser.css#1677 https://dxr.mozilla.org/mozilla-central/rev/8c9c4e816e86f903c1d820f3f29715dc070a5a4a/browser/themes/linux/browser.css#966

The latest revision just adds an explanation for the background colors chosen to the commit message.

Thanks Dão for the quick review!

I uploaded a revision with the new commit message before seeing your r+, and it looks like I can't re-add it because I don't have commit level 3 access yet. Dão, could you re-r+ it?

Comment on attachment 8789378 [details] Bug 1298449 - Add hover effect to the zoom indicator in the location bar ReviewBoard... *sigh*

Pushed by ryanvm@gmail.com: https://hg.mozilla.org/integration/fx-team/rev/bc92a66cc0d5 Add hover effect to the zoom indicator in the location bar. r=dao

I investigated this issue on latest Aurora 51.0a2 (2016-10-07), using - Windows 10 x64 - Ubuntu 16.04 x64 - Mac OS X 10.11.6 On Default theme, the hover effect looks good. On Developer Edition theme: - On Windows, the hover effect is not visible on dark mode - On Mac, the hover effect is barely visible on dark mode - On Ubuntu, the zoom level value loses visibility on hover state on dark mode

Hi Iulia, can you please file a bug for the issues brought up in comment 18? Thanks :)

I filed bug 1310882 for the issues in comment #18.

Marking as verified based on comment 18 and bug 1310882#c12.