2-way scroll

From MobileDesign

Jump to: navigation, search

[edit] Best used with:

Design Patterns: Carousel, Menu, List-based Layout

Example
Opera Mini home screen: forms and a series of heirarchical links, all in list format
The RIM Blackberry scroll wheel is on the right side, and generally controls vertical movement (though the home deck is different). A modifier yields side scrolling from the same input. Pressing in serves as a select mechanism.

[edit] Device Details

Scrolling, and often selection, is accomplished by a wheel or pair of buttons. The positioning and arrangement implies one axis of movement, such as up/down or left/right.

Devices with scroll wheels or thumbwheels generally position them along the side of the device where they can be used with the fingers or thumb. Scroll wheels very often have a select function built into the wheel. A press on the wheel (in towards the device) is detected as a separate action than motion of the wheel.

Button-based two direction scroll is often manifested as a rocker switch, with a single physical cover to join two button functions at either end. Volume controls on mobile phones are very commonly two-position rockers. Those with individual up/down buttons may have a select button in the center, for a sort of "three-way scroll."

A very small number of devices use rollers, or very wide wheels on the face of the device. These roll vertically in much the same way, and position as a 4- or 5-way scroll, but of course are only in the one axis. Some of these also have a push-to-select function.

A small but increasing number of devices use face wheels, as on the iPod. These can be visually identical to the 4- or 5-way scroller, but at least part of the time (modally) rotate, or detect rotary motion. They may or may not have additional functions if the wheel is pressed, but generally have a select function in the center of the wheel.

[edit] Design Implications

Hardware user interface (hUI) decisions should carefully consider the software interfaces (sUI) that will operate on the device. Likewise, certain sUI designs will not work as well on some devices with different or limited hardware.

The implied direction of the scroll wheel or buttons should be taken into account for sUI design. Most are vertical, so menus, carousels and lists should always be able to be scrolled thru vertically. This may require a change from other versions of the software designed for devices that support 4-way scroll. Yahoo! Go, for example, turns their normally horizontally-scrolling carousel vertical for the Blackberry version.

Scrolling off of this primary axis should be avoided. Menus can, for example, be expanded sideways with a select function.


[edit] Example Devices

The most common current example is the RIM Blackberry series, all of which have a right-side thumbwheel as their only scrolling mechanism. Blackberries have an "Alt" key that modified the scroll wheel in multi-axis spaces such as maps to allow a measure of complete scroll capability.

Other notable examples:

  • Some older mobile phones (by Sony and Qualcomm) had wheels on the left side of the device. These operated much like the Blackberry scroll, but did not have a method of achieving side scroll as this was not needed for the GUI of the time.
  • Some low-end phones, and many older ones, have up/down scroll buttons and no 4- or 5-way scroll pad.
  • Most phones still have some measure of vertical-only scroll using the volume rocker; the Nokia N75 uses this to scroll the external display when closed, although it has a 5-way control when open.
  • Apple iPods (and similar) with screens have a face wheel and select function integrated with the wheel controller. Some also have effective 4- or 5-way control built in, depending on the mode in which the device is operating.
  • Professional and "prosumer" DSLR cameras generally have, usually in addition to a 4- or 5-way control for setup and viewing, a thumbwheel for changing camera operation settings.
The i450 scroll wheel
The i450 scroll wheel
  • The Samsung i450 has a conditional virtual wheel (wheel does not move, but detects movement). When the slider is opened, a portion of a wheel control appears.



Also see: subordinate or cross-referenced classes,

Personal tools