Difference between revisions of "Zoom Slider"

From Apache OpenOffice Wiki
Jump to: navigation, search
m (Snapping Areas: added category)
m (Snapping Areas)
Line 135: Line 135:
 
==== Snapping Areas ====
 
==== Snapping Areas ====
  
And here are the snapping areas: when the handle is dragged into the area of a given color, its position is forced to the (nearest) point of the same (but lighter) color. Note that it is possible to select any value on the slit, even near a predefined value:
+
And here are the snapping areas: when the handle is dragged into the area of a given hue, its position is forced to the (nearest) point of the same (but lighter) hue. Note that it is possible to select any value on the slit, even near a predefined value:
  
 
[[Image:Zoom_Slider_GearStick_dragging_areas.png]]
 
[[Image:Zoom_Slider_GearStick_dragging_areas.png]]

Revision as of 17:05, 19 January 2009

Introduction

This page is about the Zoom Slider in Writer (OOo 3.0). The general Zoom function is not discussed here, but only the implementation of the GUI element and how it could be enhanced for a better user experience.

The zoom value indicator is understood as a part of the Zoom Slider, here.

Actual design (Mac OS X): Zoom Slider 3.0.png

Issues with the Zoom Slider

Usability issues

  • It is hard to use for people with disabilities (as most sliders).
  • Clicking on the slider's slit to set a zoom value is hazardous: since there is no feedback and the (unlabeled) scale is non-linear, the user can't know the value that will be set when clicking.
  • There is a snapping of the handle near the predefined values, but the snapping area is very small, so it may be difficult to reach for some users, and according to Fitt's Law, it takes some (too much?) time.
  • It is impossible to escape the snapping, so a value close to a predefined one can't be selected with the slider.

Design and User Experience issues

  • It is located in the status bar, a place supposed to be underlooked by users, if not totally ignored.
  • Some options of the “View > Zoom…” dialog can not be set with the slider by dragging the handle: "Optimal", "Adapt to width" and "Other", the last one needing an additional value (see issue 68625 and issue 50134.)
  • These predefined values can not be added to the current design because of the proximity of the corresponding marks.
  • The zoom value indicator can be right-clicked (for a drop-down menu of predefined values) or double-clicked (to open the “View > Zoom…” dialog), but there is no hint about this, so users don't know it (see issue 5182.)

Does not follow common guidelines

  • No visual change upon mouse over or click to suggest affordances and/or show feedback.
  • No tooltip.
  • No label next to the marks for predefined values.
  • “-” and “+” Buttons are always highlighted (in blue.)
  • The zoom value indicator is visually separated from the controller changing its value (the slider.)
  • The zoom value indicator is enclosed in an area with an inset-style border suggesting that it is an editable text field while it is not.
  • The slider is not sensitive to mouse-wheel input (see issue 88565.)

Small visual details

  • The “-” and “+” buttons are vertically misaligned with the slider's slit. One pixel down would be better :)
  • The handle has an even size in pixels so it can't be correctly centered.
  • The zoom value indicator is partially covered by the window resizing handle, in Mac OS X (and probably many window managers for XWindow.) The position of the Zoom Slider creates another issue when resizing the window with a width smaller than 1024 pixels (see issue 94061.)

Proposals and Mockups

Position and Orientation

Alternative positions

It has been argued that the status bar was not the ideal place for such an important feature. Alternatives are:

  • as a toolbar element (would additionally benefit from the possibility to personalize and rearrange toolbars,)
  • integrated with the rulers,
  • integrated with the scroll bar, as a general navigation tool (but it may not be visible enough,)
  • in the gray background surrounding the pages (but it may be invisible sometimes, e.g. with "Optimal" zoom,)
  • as an overlay over the page (as in most cartography applications such as Google Maps), which is possible because the predefined zoom values "Optimal", "adapt to width" and "adapt to width and height" all reserve some space around the area of interest, where the slider could be displayed.

Alternative orientations

Some of these alternatives could require a vertical slider rather than an horizontal one. Choosing between an ascending one ("+" label on top) and a descending one ("-" label on top) is maybe a question of personal preferences, but one may argue that reducing the zoom level allows the user to see larger structures in the document, and thus present it at an higher level of abstraction. So, according to the habit of presenting on top what has the highest level of abstraction, it may be better to use a descending slider ("-" on top.)

(Mockups needed!)

Visual importance

Rationale

The Zoom Slider is an important object in the interface, so it has to be easily discoverable, easily accessed and easy to use without disturbing too much the work flow. So it must have a high rank in the visual hierarchy and be salient, without excess. One mean to achieve this goal is to give it a very clean and simple look, a remarkable shape and put it in evidence in a strongly visible place.

Proposition of simplified design

Clément Pillias proposes the following alternative design (positioned in the status bar for better comparison with the current design):

Current design (Mac OS X):

Zoom Slider 3.0.png

Proposed design (Mac OS X):

Zoom Slider light.png

What has been changed:

  • removed the blue highlighting of the handle,
  • changed the style of the slit from a 3-pixel wide inset line to a simple one-pixel wide solid line,
  • shortened the length of the marks from 4 pixels to one pixel (the position of the marks is wrong in the mockup,)
  • removed the buttons -/+ to keep only the corresponding labels (and realigned them vertically)

Bringing back usability

This design is less usable, so it must be coupled with some mechanism bringing back the removed ink when an interaction is possible. We can imagine two such mechanisms: the simpler is just a mouse over, the more complex implies to change smoothly the style of the elements (e.g., using transparency) according to their distance to the mouse pointer, as in iDraw (activate JavaScript and look at the video.)

Proposition of design for interaction

Some other mockups:

With “-” button hovered:

Zoom Slider button hovered.png

With the slit hovered:

Zoom Slider slit hovered.png

With the handle hovered:

Zoom Slider handle hovered.png

  • When the slit is hovered, the zoom value indicator displays the value that will be set if the user clicks.
  • The buttons are back (but not highlighted), the slit has a 3-pixel wide inset style, and the marks are two-pixel long.
  • While dragging the handle, the marks for predefined values should be even longer, but this will be discussed in the next section.

Other interaction methods

Gear Stick Metaphor

Introduction

Clément Pillias has made a proposition to enhance the Zoom Slider, called the “Gear Stick Metaphor”. It provides the same functionality as a menu, while preserving the “instantaneous preview” behavior of the slider, and allows to change the selected value by only moving the mouse. Moreover, the position of the mouse selecting a particular option is easy to learn (similar to a pie menu,) and the whole thing has an expert mode (no need to even look at the slider.)

This is the kind of gear stick shift pattern that inspired this proposition: Manual_Layout.PNG

Mockups

Dragging the handle to select “100%:”

Zoom Slider GearStick real size.png

Dragging the handle to select “page width:”

Zoom Slider GearStick page width.png

Comments:

  • The slider container expends and pops up (casting a shadow according to Mac OS X guidelines.) But this does not have to happen at the very moment the user starts dragging the handle. A little latter would allow experts to select quickly a predefined value without having anything popping up.
  • The “pop up” flows outside the window, and potentially outside the screen because of the position of the slider in the status bar. So it would be better for this proposition to place the slider in another location. A vertical slider would also give a better readability to labels next to the slit.
  • If somebody has a good idea to replace the text “real” by an icon suggesting a 100% value, it could be better and help localization.

Visual details:

  • The “-” and “+” labels do not have a button Look and Feel anymore, because they are not clikable while the handle is dragged. There are no shadings nor shadows anymore, but there is still a circle around the labels, so that the visual change stay subtle and do not distract the eye, while still simplifying the design.
  • Label icons are not definitive, if somebody has a better design, please show it!
  • The slit has rounded endings, this is not a special design of this proposal: previous mockups should have it too :)
  • Rounded corners are not mandatory, and poorly done :)

Snapping Areas

And here are the snapping areas: when the handle is dragged into the area of a given hue, its position is forced to the (nearest) point of the same (but lighter) hue. Note that it is possible to select any value on the slit, even near a predefined value:

Zoom Slider GearStick dragging areas.png

(To be completed…)

Personal tools