Differences between revisions 44 and 45
Revision 44 as of 2011-05-15 15:22:02
Size: 14461
Editor: shoobe01
Revision 45 as of 2011-07-23 23:49:07
Size: 14463
Editor: eberkman
Deletions are marked like this. Additions are marked like this.
Line 51: Line 51:
 * Fitts Law  * Fitts' Law
Line 59: Line 59:
=== Fitts Law finds that === === Fitts' Law finds that ===

The term “widget” can mean a number of things, even within related internet technologies. Even the savvy user may be confused by the lack of common terminology and the lack of any inherent meaning. The term may apply to bits of code, applets, engines, and GUI elements.

However, the scope of this book, and this part, is solely concerned with mobile GUI widgets. These widgets are display elements such as buttons, links, icons, indicators, tabs, and tooltips. Numerous additional elements -- sometimes called GUI widgets -- such as scrollbars, are discussed as components and functions in the Page section above.

The functionalities of the widgets discussed in this section are to:

  • Display a small amount of directly related information.
  • Provide an alternative view of the same information, in an organic manner.
  • Provide access to related controls or settings.
  • Display information about the current state of the device.
  • Provide quick access to indexed information.

The widgets that will be discussed here are subdivided into the following chapters:

Types of Widgets

Lateral Access

Whether your information architecture is organized hierarchically or laterally, its presentation and access is affected by the potentially small mobile display. One option to consider is to use lateral access widgets to assist the user in quickly navigating through and selecting this content. This chapter will explain research based frameworks, tactical examples, and descriptive mobile patterns to use.

This chapter will discuss the following patterns:

Tabs, Peel Away, Simulated 3D Effects, Pagination, and Location Within.


Using an information architecture that is structured hierarchically allows content to be laid out from general to specific while depending on parent-child relationships. This drilldown, top-down approach is effective in providing users additional related content and commands within multiple information tiers.

This chapter will discuss the following patterns:

Link, Button, Indicator, Icon, Stack of Items, and Annotation.

Labels & Indicators

In some situations, it may be required to use small labels, indicators and other additional pieces of information to describe content. Mobile users each have unique goals. Some require instant additional information without clicking. Others may need additional visual cues to assist them while quickly locating information. In any case, the information labels must be presented appropriately while considering valuable screen real estate, cultural norms and standards.

This chapter will discuss the following patterns:

Ordered Data, Tooltip, Avatar, Wait Indicator, and Reload, Synch, Stop.

Information Controls

Finding specific items within a long list or other large page or data array can be challenging. Without appropriate controls to locate specific information quickly, the user experience will be quite frustrating. This chapter will discuss how widgets can be used to appropriately locate and reveal information.

This chapter will discuss the following patterns:

Zoom & Scale, Location Jump, Search Within, Icon, and Sort & Filter.

Helpful Knowledge for this Section

Before you dive right into each pattern chapter, we like to provide you some extra knowledge in the section introductions. This extra knowledge is in multi-disciplinary areas of human factors, engineering, psychology, art, or whatever else we feel relevant. Due to the broad characteristics of widgets, we find it helpful for you become knowledgeable in the following relevant areas.

  • Fitts' Law
  • Wayfinding
  • Color Conspicuity

Fitts’ Law

Paul M. Fitts (1912-1965) was a psychologist at both Ohio State University and the University of Michigan. 1n 1954, he created a mathematical formula to determine the relationship how long it takes a user to either select an object on the screen, or by physically touching it, based on it's target size and distance from the selector's starting point. Fitts' Law is widely used today by UX designers, human factor specialists and engineers when designing graphical user interfaces and comparing performance of various input devices.

Fitts' Law finds that

  • The time required to move to a target is a function of the target size and distance to the target.
  • The further a target object is from the initial starting position, will require a longer time to make that successful selection.
  • That time can be increased when the target size is too small.

In mobile devices, we know that screen display size is limited and its space is valuable. In addition, mobile users require quick access to the content they are looking for. Using Fitts' Law together with these constraints, can improve the user experience

  • Buttons and selectable controls should be an appropriate size because it is relatively difficult to click on small ones. Using the screen bezel overflow can provide a trick allowing smaller, yet highly selectable. For mouse or other pointer-driven systems, the edge of a selectable area becomes "infinitely" deep, so the selectable area is functionally much larger. For touch devices with a flat bezel, the user may place part of their finger off the screen and activate a much smaller target than usual. Refer to the General Touch Interaction Guidelines in the Input & Output section intro for more information.

  • Accessing information using pop-ups and tooltips can usually be opened or activated faster than pull-down menus since the user avoids travel.
  • Reduce the number of clicks to access content by providing surface level sorting and filtering controls to access indexed information quickly.
  • Reduce distance traveled by keeping focus adjacent to the functional area, and exposing new functions near the current focus.

Wayfinding Across Content

Whether interacting on a PC, kiosk, or mobile device, your users can easily get lost when navigating content. To reduce the frustration of being lost, visual, haptic, and even auditory cues can be used to help guide the user in getting to the place he needs to be. Designing a navigation system must provide those cues to answer the following user questions:

  1. Where is my current state or position within the environment? Where am I on this page?
  2. Where is my destination? Where do I have to go to achieve my end goal?
  3. How do I get to my destination? How am I going to navigate across content to achieve my end goal?
  4. How do I know when I have arrived?
  5. How do I plan my way back? Are there alternate routes I can take?

Kevin Lynch, an Environmental psychologist and author of the book Image of the City (Lynch, 1960) determined that we rely on certain objects, to help us identify our position within an environment. Let’s examine how these objects act as cues and can be used to improve navigation:

  • Paths -- The channels which an person moves along. Examples, are streets, walkways, transit lines, canals. On mobile devices, paths are the routes users take to access their desired content. These paths can follow both lateral and hierarchically organization structures. Help the user define routes by clearly labeling, color coding, and grouping related content. Use location within widgets to define the user’s current position along the path. Provide alternate paths to access the same information.

  • Edges -- Linear elements that define boundaries between two phases. Such as walls, buildings, and shorelines. On mobile devices, edges can include perimeter of the viewport, or of fixed menus, scroll bars, and annunciator rows. Use edges to appropriately contain navigation.

  • Nodes -- Focal points like distinct street intersections. On mobile devices, these may serve as graphics, labels, and indicators to describe small pieces of content.

  • Districts -- Areas within boundaries that share common features. Such as neighborhoods, downtowns, parks.

  • Landmarks -- Highly noticeable objects, which may not be particularly large, that serve as reliable reference points.

Conspicuity with Color

Conspicuity describes how well an object can be detected, or how it captures a user’s attention amongst other noise or other competing information. While this involves legibility, and readability, it also implies other display characteristics.

Color can be used to classify, label, and emphasize information displayed on a screen. When using color for these things, you need to understand that there are limits on the ability of people to process information. Understanding of how these cognitive and physiological limits effect our signal detection is very helpful in making choices for interactive design.

Opponent Processing Theory

In 1892, A German psychologist Ewald Hering theorized that there are six elementary colors that are arranged perceptually as opponent pairs along three axes. These pairs are: black-white, red-green, and yellow-blue. Each color is either a positive (excitatory) or negative (inhibitor). These opponent colors are never perceived at the same time because the visual system cannot be simultaneously excited and inhibited.

Our modern color theory stems off of this. Today, we know that the input from the cones is processed intro three distinct channels:

  • The luminance channel (black-white) is based on input from all of the cones. It combines the outputs of long and middle wavelength sensitive cones.
  • The red-green channel is based on the difference of long and middle-wavelength cone signals.
  • The yellow-blue channel is based on the difference between the short-wavelength cones and the sum of the other two (Ware, 2000).

Color for Labeling

Or more technically, color for nominal information coding, is used to because color can be an effective way to make objects easy to remember, as well as to visually classify.

Perceptual factors to be considered in choosing a set of color labels:

  • Unique hues -- Based on the Opponent Theory, they are: Red, Green, Yellow, Blue, Black, and White.

  • Contrast with background -- Our eyes are edge detectors. When we have objects that must be in front of a variety of backgrounds, it may be beneficial to have a thin white or black border around the color-coded object. Consider the reasons why alert street signs, have the border, too.

  • Color blindness -- Color vision deficiency (commonly referred to as "color blindness") is a condition in which certain colors cannot be distinguished or can only be distinguished with difficulty. There are several types. Some types also reduce the brightness of the color, not just the saturation. Almost all colorblindness is in males. The most common are:

    • Deuteranomaly (partial red-green, 5% of males) - Also known as "green weak," difficulty distinguishing between colors in the green-yellow-red section of the spectrum. This is the typical "red/green" colorblindness. The 7% figure quoted in some sources mixes this with some other types which also manifest in these hue ranges, though the results are fairly different.
    • Protanomaly (partial red-green, 1% of males) - Also known as "red-weak," manifests as complete or partial inability distinguish between colors in the green-yellow-red section of the spectrum.
    • Deuteranopia (complete red-green, 1% of males) - Cannot differentiate at all between red, orange, yellow, and green colors.
    • Protanopia (complete red-green, 1% of males) - Cannot perceive the hue of red, orange, and yellow, with additional dimming. This can be so pronounced that a red traffic light, for example, may not appear to be illuminated at all.
  • Number -- We are limited in the number of color-codes we can rapidly perceive. Studies recommend use between five and ten codes.

  • Field Size -- Object size affects how you should color code. Small color-coded objects less than half a degree of visual angle and in the yellow-blue direction range should not be used to avoid the small-field colorblindness.

  • Conventions -- Color conventions are culturally defined and accepted. When using color-naming conventions, be cautious of cultural differences. Some common conventions are:

    • Red = hot and danger.
    • Blue = cold.
    • Green = life, environement, go.

Traditionally in China, red equals "life," and "good fortune," while green means "death." This is a commonly repeated example in design of the gulf of cultural differences. However, traffic signals in China are the same as everywhere else, so controls using red as stop will still work. Whatever the culprit, cultural differences of this sort are slowly eroding.

Color Conspicuity Guidelines For Mobile Devices

  • Use colors with high contrast between the text and the background. Optimal legibility requires black text on a white background (or the opposite).
  • For text contrast, the International Standards Organization (ISO 9241, part 3) recommends a minimum of 3:1 luminance ratio of text and background. A ratio of 10:1 is preferred (Ware, 2000).
  • When displaying text, purely chromatic differences between the type and the background are not suitable for displaying any kind of fine detail. A considerable luminance contrast is required, in addition to color difference.
  • When large areas of color-coding are needed, such as with map regions, use colors with low saturation.
  • Small objects that are color-coded should use high-saturation.
  • These last two may be mixed, to allow differentiation at borders, by fading from high to low saturation or reinforcing edges with wide lines in the same hue range. Well-designed print maps have used such design tools for centuries.
  • The majority of those with color deficits cannot distinguish colors that differ in the red-green direction, though numerous other types of color deficits exist.
  • Recommended colors for color-coding: 1. Red, 2. Green, 3. Yellow, 4. Blue, 5. Black, 6. White, 7. Pink, 8. Cyan, 9. Gray, 10. Orange, 11. Brown, 12. Purple (Ware, 2000).

Widget (last edited 2011-12-13 05:27:37 by shoobe01)