Firefox's Zoom Neglect

2015 comment - OSD indicator of zoom please

OK, it's now 2015 and Firefox is now customizable so that you can move zoom (though it's still silly that it's hidden by default). At the very least Mozilla could implement my following suggestion by default:

"show an on-screen-display [OSD] of the current zoom level when zooming using the keyboard short-cuts (like when adjusting the volume on a TV with the remote control)."

2010 archived here

FF has always had inferior zoom control and zoom status indication to competitors like Internet Explorer or Opera. It has never had a zoom control on the status bar, but instead has always hid it away in the menu somewhere, making it tedious to zoom in or out for users who haven't memorized the keyboard short-cuts. It's also tedious for users who have memorized the keyboard short-cuts - this is because a good zoom control (in competitor browsers and most office/image viewing software) is also a status indicator of the current zoom level as well as just a control - this is something that, disappointingly, has never been present in Firefox.

The importance of a good zoom control and zoom status indicator today

How do the Mozilla designers zoom pages when they browse the web without a dedicated control?:

• Do you use the Ctrl keys?

• Will new users know to use the control keys?

• Do you constantly guess the current zoom level/have such a good memory that you can remember what the current zoom level is?

• Do you by extreme luck never come across badly designed web-sites with the text too small/too large?

• Have you never used a screen where the DPI is far too high? This is especially important as screen resolutions are getting higher and higher.

• Do none of you ever chill-out on a sofa/couch with a laptop slightly further away from you than if you were at a desk and hence want to change the zoom setting?

• Do you never get sore eyes after looking at a screen for a long time, and never give your eyes a bit more of a rest by increasing the text size?

• Do you all have 20/20 vision and are none of you even the slightest bit short-sighted ? Of those of you that are short-sighted do you sometimes never want to gives your eyes a rest by not using your glasses/contact lenses? Do you neverever forget your glasses/contact lenses?

In the US approximately 25% of people have some form of myopia; in China (world's most populated country and largest potential FF market) approximately 80% of all people have some form of myopia. The need for a functional and well-exposed zoom control is therefore far from a rare corner case -- it's an absolute necessity.

Zoom & The Future of the Web

Another argument for better zooming has nothing to do with bad eyesight or the distance of the user's eye from the monitor, and more to do with the next-generation web. Browsers are becoming the universal portal to viewing remote documents and images. Why therefore does the browser not have as good pan & zoom controls as offline image viewers and editors? With ever increasing occurrence I'm coming across SVG vector images (on Wikipedia in particular) where you can't actually see the content without using the browser's built-in zoom controls. For example, take a look at the following SVG images:

http://upload.wikimedia.org/wikipedia/commons/9/9e/Arctic.svg

http://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg

http://upload.wikimedia.org/wikipedia/commons/d/df/US_Court_of_Appeals_and_District_Court_map.svg

With the market leader (IE) about to support SVG/canvas properly in its next iteration, I can only see this type of SVG/canvas scenario becoming more and more common.

I also remember seeing a presentation a while ago by your very own Aza Raskin while speaking at Google. He was talking about the power of a simple zoom interface and how interfaces such as calendars, satellite maps etc. could be made much simpler by exploiting the power of simple zooming (about 35 minutes into video). One later comment from a member of the Google audience, however, was that such interfaces were not simple to implement using existing standard HTML/JS methods. My point here is that a very simple zoom interface for the calendar or map scenario could be trivial to implement by using a standard SVG/canvas element along with the browser's in-built zoom controls!!

Not only Zooming - Panning with the space bar?!

To navigate quickly around a document/image it is also useful to be able to pan as well as zoom. Why therefore does the browser not have as good pan & zoom controls as offline image viewers and editors?

The space bar performs a rather useless function in Firefox - it does exactly the same as the down arrow! The spacebar performs a pan function in image/document viewers/editors such as Photoshop, Adobe Reader, GIMP, Windows Photo Viewer etc. Why can't we make the spacebar pan in Firefox as it does in other image viewers? IMO the GIMP implementation is the best because it does not require a click of the mouse button.

Designing a zoom control

Criteria for a good design

A good zoom control should have the following characteristics:

1. Status indication of the current zoom level, especially explicitly as a percentage;
   
2. The ability to see this indication at the glance of an eye;
   
3. The ability to quickly incrementally adjust the zoom level;
   
4. The ability to jump to a much larger/smaller zoom level;
   
5. The ability to easily reset the zoom to its default state. 
   

Examining the Market

As things stand in Firefox 3, Firefox 3's zoom interface is the worst of any browser and fails on all points except for point 5. This failure is mainly due to the zoom control being buried in a menu.

The Opera 10.6 and Internet Explorer 8 implementations are almost identical to each other and are superior to Firefox, but both fail on point 3:

The implementation in Chrome (right), whilst being better than the FF3 implementation in actually displaying the current zoom level, is still a major fail, being inferior to both Internet Explorer or Opera implementations because it is hidden in a menu. It also has no easy way to reset or jump quickly to a much larger zoom level.

 
The Apple Safari zoom control is the same menu-buried affair as in Firefox 3 and is equally as terrible. The Apple implementations in Finder and iPhoto have a nice slider but fail on point 1, 3 and 5 (especially 1 - not displaying current zoom percentages:

The zoom control/status found in modern versions of MS Office, Open Office and Windows Live Photo Gallery is well designed:

It meets all the criteria and the mid-point of the slider in the Office version snaps to 100%.

Another good design is that of the "Glazoom" Firefox add-on:

(Glazoom has an excellent design - the only negative I could say is that it perhaps looks a little dated when compared to those in office. Unfortunately this add-on does not always get maintained quickly to work with the newest Firefox releases - this is also such a basic feature that it should be built-in by default!).

The Design

Therefore I think the best type of design is that in modern versions of Office - fully functional and with a modern style. This would map to the Firefox status bar as follows:

The zoom percentage indicator also has a drop-down allowing you to access the zoom options (text only etc.), just like Glazoom.

UPDATE! After a lot more thought about this issue I also came up with the following design:

I've created a whole new article outlining the detail of this design.

Factoring-in Mozilla's desire to remove the Status Bar

Mozilla wish to remove the Status Bar to provide an ultra-minimal interface. I also tried to come up with a compact toolbar-based zoom control in such a situation. I firstly tried to take inspiration from the Windows photo viewer zoom control:

If you drag on this control it moves the slider in one swift user interaction. The problem is that it fails on the most important point - status indication (point 1), and isn't easy to reset (windows photo viewer has a separate control to do this). This type of control also has another serious flaw - it only really works to zoom in and does not support zooming out - this is unacceptable and unsuited to many web-browsing situations.

Taking this flawed design regardlessly, I wanted to see what a compact toolbar icon like this could look like:

As you can see, it all looks very cramped and cluttered in the top-right corner, with a lot of controls dangerously near the close button. The controls are intrusive and seem in the way. The current zoom percentage also wouldn't really work with 4 digit zoom levels >999% as it is already in very small text as it is.

Another idea I had is to show an on-screen-display of the current zoom level when zooming using the keyboard short-cuts (like when adjusting the volume on a TV with the remote control). This would be an excellent feature for power-users who are comfortable with the keyboard short-cuts, however, as a general default setting it does not truly alleviate the problems of removing the Status Bar.

UPDATE! After a lot more thought about this issue and came up with the following design:

I've created a whole new article outlining the detail of this design.

Conclusion

A well-functioning zoom control can be designed, either by keeping the status bar, or by improving the toolbar capabilities. A TV-like on-screen-display could also be added to show zoom-status for those that would prefer to only use keyboard short-cuts.

Broccauley 23:04, 9 September 2010 (PDT)