1656612 - Consider adding a scale-zoom level indicator to the UI

Status: NEW

(Core :: Panning and Zooming, enhancement)

Description

[Botond Ballo [:botond]]

When desktop zooming is enabled, there are now two types of zoom that a desktop user can change simultaneously: the reflow-zoom (a.k.a. full-zoom) level (modified via Ctrl+Plus, Ctrl+mousewheel, the hamburger menum etc.), and the scale-zoom level (modified via a pinch gesture).

We have a UI indicator for the reflow-zoom level, but not for the scale-zoom level.

There have been some suggestions (e.g. bug 789906 comment 88) that having two types of zoom levels without an indicator for both levels may be confusing.

This bug tracks possibly adding a scale-zoom level indicator. Naturally, this is something that would need to be discussed with relevant UX people.

Comment 1

[Will]

Botond I meant this would only be necessary for apz.allow_zooming_out . An indicator isn't necessary for zooming in with pinch zoom/scale zoom because the scrollbars update. The scrollbars act as an indicator to the user that there is more content out of view. If the users wants to see the page fully zoomed out, they would just do the zoom out gesture as much as possible (I'm assuming apz.allow_zooming_out is not enabled in this scenario. If apz.allow_zooming_out ships, it makes things more complicated)

Comment 3

[Will]

Maybe this is a good idea after all because a few times even I have run into some confusion on some sites. Here's an example to repro the issue: go to google.com, pinch-zoom in slightly. Observe scrollbars appear because you've pinch zoomed in. (when I see a horizontal scrollbar, I almost instinctively click Menu > Zoom out until the horizontal scrollbar goes away). When I do this reflow zoom-out in the google.com example, I'm assuming/expecting that the horizontal scrollbar will go away, but it doesn't (even if I zoom out all the way to 30%!) because the scrollbars are there because it's pinch-zoomed in, not reflowed zoom in, but there's no way of knowing which zoom is responsible for the scrollbars being there. When this first started happening to me (you can accidentally pinch zoom in or forgot that you pinch zoomed in), it took me a moment to figure out what was going on. So yes, another scale-zoom indicator is a good idea even if the dual indicators might confuse people. The fact that the scrollbars update is a not sufficient indicator, I was wrong in comment #1.

Comment 4

[Timothy Nikkel (:tnikkel)]

One interesting idea for UI for how to present this information: have a small "mini-map" of the position of the visual viewport inside the layout viewport when the user is pinch zoomed. The positives of this approach: 1) provide feedback to the user that they are zoomed in 2) gives them an idea of where they are in the page 3) solves the problem of potentially having to present two different zoom percentages to the user.

Comment 5

[Will]

Just to add to comment #3, Firefox also lacks "elastic over-zoom" effect when you hit the limits of pinch-zooming. If Firefox had that, it might help make this situation a bit clearer/less confusing, but it doesn't. And even if Firefox does eventually get elastic over-zoom effect, I still think it would be nice to have the separate scale-zoom indicator in addition to the percentage one.

(Here is a little video of what elastic over-zoom looks like (it's Chrome on an iPad) https://imgur.com/a/0SGjfZS )

Comment 6

[Will]

Attachment: reset touch zoom button.png

Another good reason to add this 2nd zoom indicator/button is because once you zoom in even a little bit, most fixed position elements hide out of view (especially when you start scrolling down the page). People like us are aware of this and we also know that scrolling up usually make them reappear, but a lot of normal people don't know this and I'm certain there's been a good amount of confusion. This button should help at least give them a clue as to what is going on and how to "fix" it (I even made a little mock. It's not great having 2 separate buttons but it is what it is)