Referencing to the real world in zooming user interfaces

An application with zooming lets a user zoom in and out.  (” zooming user interface”  means more than that, it means the whole desktop experience is flavored by zooming.)  Many applications use zooming.  Some applications need a reference to the real world, so the user knows the real world scale of what they are zooming.  This post is about design issues, especially for drawing apps.

Words related to “reference to the real world” are “dimensioning”, and “standard”.  Here the pertinent meaning of standard is “an object that under specified conditions defines, represents, or records the magnitude of a unit”  e.g. the meter stick in a national bureau of standards.  Here “reference to the real world” means:

  • “a displayed object that represents a standard”,
  • OR “displayed objects that give dimensions.”

For example, a chronology app, that shows a timeline, may reference to the real world by displaying tick objects on the timeline, with year labels on the ticks.  Then a user knows how much time a segment of the timeline represents.

Some zooming applications don’t need references to the real world.  For example, a presentation app such as Prezi may not need references to the real world, because the things that are being zoomed are just abstract ideas (or images of the real world, with inherent reference to the real world.)

Drawing applications usually need references to the real world:

  1. when the thing being drawn is a real world object
  2. when the user may control the default scale of the drawing (when displayed to others.)

A common design is to display a rectangle for the paper size.  Inkscape uses this design.  As the user zooms in or out, the rectangle for the paper size grows and shrinks, and the user knows the real world scale of the drawing (when it is printed.)

It is not enough to know the zoom level percent, which is also commonly displayed.  Without an explicitly displayed reference to the real world, the user’s only reference is to pixels.  Pixels are not the same real world size on all devices.  That is, pixels are not really units, in the sense that they have a known standard.  (But there is a limited range of pixel sizes among most common display devices, excepting roadside digital billboards, so most users conceive a pixel “unit” to be about 0.1 mm)

What should be displayed when the user’s system has no printer, for example, on mobile devices?  I contend that the displayed reference should be a rectangle related to the size of the display or windows.  As the user zooms in and out, the rectangle shrinks and grows.  Even without displaying the zoom level, the user knows that when the displayed rect just fits inside the physical display or  window, the zoom level is 100%.  The displayed rectangle for the size of the display or window references the drawing to the real world via the real world dimensions of the physical device the user is holding.

For windowed systems (where windows can be resized), should the displayed reference rectangle be:

  1. the current window size?
  2. or the maximum possible window size (the display size less certain menu bars and other widgets)?
  3. the display size?
  4. something else, for example a ruler?

(1) might be disconcerting to users: when they resize a window, the reference rect resizes.  A user might expect a reference to be constant except under zooming.  The reference rect is not very constant if it changes under both zooming and window resizing.  On the other hand, it is not such a difficult concept for the user to grasp.

(2) might be disconcerting to users: the reference rect refers to a size that is only knowable when the window is maximized.  The user must learn that said size might exclude the menu bar and other widgets.

(3) might be disconcerting to user: the reference rect at 100% zoom might not be fully visible, since the maximum window size might be smaller than the display size.  Since a user cannot see the entire reference rect at 100% zoom,  the reference rect would not be enough for the user to know when they were at 100% zoom.

Another design issue is, should the reference be a single rect or a grid?  If it is a single rect, the user may lose it by panning too far (but they can find it again by zooming out.)  If it is a grid, the user can’t lose it by panning, but the grid may be excessive noise.

Another design issue is, should the reference rect me hideable?  Does hiding the reference rect mean that the drawing is unreferenced to the real world (and for example, would only have pixel units if exported?)

This discussion is related to the SVG “viewport” and “viewBox” attributes or entities.  Using those, you may reference an SVG drawing to the real world, although it is not strictly required (since default units for SVG coordinates are pixels,  which again are not real world standard sized.)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s