Wrap Up

As we’ve just seen, components are sections of page that may take up the entire viewport, a smaller section, or even appear modally in front of other displayed elements. In this section, you have became familiar with specific component patterns and how these patterns can be appropriately used to display and organize information. When used effectively, these patterns will allow mobile users to have an interactive experience that is enriching and satisfying. When incorporating these component patterns into your design, consider:

Chapter 3: Display of Information

This chapter described the importance of displaying information based on the user’s mental model and how we organize this information cognitively. Failure to abide by these principles will most likely cause the user to become lost, confused, frustrated, and unwilling. To prevent this, this chapter explained research based frameworks, tactical examples, and descriptive mobile patterns to use.

Chapter 4: Control & Confirmation

This chapter described appropriate Control & Confirmation patterns that can be used on mobile devices to prevent costly human error resulting in loss of inputted data. When human error may occur, you can incorporate modal constraints and decision points as preventative measures. When considering confirmation controls, consider the user’s context of use. Because an overuse of these constraints and decision points during low risk situations will cause user frustration by increasing their processing time and mental load, and delaying or stopping their task.

Chapter 5: Revealing More Information

This chapter described how to appropriately design for revealing more information. As a designer, you need to become aware that our users, devices, and networks all have limits. Screen size will limit the amount of information that can be displayed at a time. A device’s OS will limit processing and loading times. Our memory limits cause us to filter, store, and process only relevant information over a limited period of time. If we disregard these important principles, then we can expect the mobile user to encounter will encounter performance errors, dissatisfaction, and frustration.

Pattern Table Chapter 3

Chapter 3: Display of Information


Design Problem


Other Patterns to Reference

Vertical List

Display a set of information, usually text or a text-representation, that uses horizontal space inefficiently.

Rather than using horizontal space inefficiently, displays a set of information vertically using an entire allocated space.

Infinite List, Thumbnail List, Select List, Location Jump, Search Within, Sort & Filter, Titles

Infinite List

A Vertical List is called for, but the information set is very large, and not locally stored, so retrieval time is inconveniently long.

Reveals small amounts of vertical information at a time because the information set is very large, and not locally stored.

Vertical List, Thumbnail List, Select List, Location Jump, Search Within, Sort & Filter, Wait Indicator

Thumbnail List

A Vertical List is called for, but additional graphical information will assist in the user's understanding of items within the data set.

Uses a Vertical List with additional graphical information to assist in the user's understanding of items within the data set.

Vertical List, Select List, Infinite List, Carousel, Grid, Titles

Fisheye List

A scroll-and-select device is targeted, and a Vertical List is called for, but small amounts of additional information can be displayed that would assist the user's task.

When a scroll-and-select device is targeted, and a Vertical List is called for, this can be used to reveal small amounts of additional information that can assist the user's task.

Vertical List,Windowshade, Pop-Up, Pagination, Location Within, Titles


Present a set of information, most or all of which are unique images, for selection.

Displays a set of selectable images, not all of which can fit in the available space, but which can be scrolled through using many methods.

Pagination, Location Jump, Grid


Present a set of information, most or all of which are unique images, for selection.

Displays a continuous array of selectable images, only some of which can be seen at once due to the limited size of the device viewport.

Simulated 3D Effects, Pop-Up, Slideshow, Location Jump, Pagination, Location Within, Carousel, Stack of Items

Film Strip

Present a set of information, which is either a series of screen-sized items or can be grouped into screens, for viewing and selection.

A series of screens are displayed as a continuous strip, with small spaces or markers between them. When a screen is centered, it fills the entire viewport. When scrolled, part of two screens and the divider can be seen at the same time.

Carousel, Fixed Menu, Revealable Menu, Pagination, Location Within


Present a set of images or similar pieces of information for viewing and selection.

Each image is presented full-screen, with a function to transition to the previous or next image in the series.

Pagination, Location Within, Film Strip, Infinite Area

Infinite Area

Complex and/or interactive visual information must be presented to the user. The information can be presented as a single image, so large it must be routinely zoomed into so only a portion is routinely visible in the viewport.

The entire data set is considered to be a large, two-dimensional graphic, and smaller subsets can be viewed as though "zoomed in" to portions of the larger image.

Simulated 3D Effects, Pinch Zoom, Drag, Zoom & Scale, Wait Indicator

Select List

Selections, either individual or multiple, must be made from a large, ordered dataset.

A method of selection, of the line item, or by adding checkboxes to the elements displayed, can be added to almost any display method, such as the Vertical List, Grid, or Carousel.

Vertical List, Grid, Confirmation, Wait Indicator, Titles

Pattern Table Chapter 4

Chapter 4: Control & Confirmation


Design Problem


Other Patterns to Reference


A decision point is reached within a process where the user must confirm an action, or choose between a small number of disparate (and usually exclusive) choices.

Present choices contextually - usually as a modal dialogue - simply and clearly communicate the consequences of the choices.

Exit Guard, Pop-Up, Wait Indicator, Titles


A method must be provided to confirm only authorized individuals have access to a device, or a site, service or application on the device.

Consider whether your specific situation requires explicit authentication. Mobiles should only require authentication for first time entry, or for very high security situations. Mobile-like multi-user devices such as kiosks will also require authentication.

Pop-Up, Drag, Input Areas, Titles

Exit Guard

Exiting a screen, process or application could cause a catastrophic (unrecoverable) loss of data, or a break in the session.

Present a modal dialogue which delays the user from exiting immediately (the app or function is kept open in the background), informs them of the consequences of exiting (loss of data) and requires them to make choices, at least confirm exit or return to session.

Wait Indicator, Pop-Up, Titles

Cancel Protection

User entered data or subsidiary processes would be time consuming, difficult or frustrating to reproduce if lost due to accidental user-selected destruction.

Processes must be designed to protect user input. Methods must be provided to recover previous and historical entry.

Clear Field, Autocomplete, Hierarchical List, Input Areas


High security systems or those which are publicly accessed and are likely to be heavily shared (such as kiosks), must have a timer to exit the session and/or lock the system after a period of inactivity.

Try to avoid the use of timeout as a solution to load and security. If sessions must expire due to the method by which they have been built already, consider making this transparent.

Pop-Up, Sign-On, Exit Guard, Titles

Pattern Table Chapter 5

Chapter 5: Revealing More Information


Design Problem


Other Patterns to Reference


A displayed element must be able to easily reveal a small or medium amount of additional information, without leaving the current context or page.

Items are provided with an indicator that more information is available, generally by defining upper and lower bounds, or enclosing in a box. When selected, this area expands vertically to display additional information or interactive elements.

Fisheye List, Pop-Up, Titles


A displayed element must be able to easily reveal a small or medium amount of additional information, while remaining associated with the current context or page.

A Pop-Up is a child "page" smaller than the viewport, that appears modally on top of the parent page or display context which spawned it.

Annunciator Row, Titles, Exit Guard, Links, Advertising

Hierarchical List

A large set of information must be presented. The information is hierarchically ordered, and this structure is relevant to the user.

Can display hierarchically-ordered information in a comprehensible and quickly-accessed manner. The parent/child relationships are exposed visually, and users may fold and unfold the list to view only the relevant parts needed.

Fisheye List, Vertical List, Select List, Titles

Returned Results

When users have explicitly requested subsets of information, the resulting narrowed dataset must be displayed in a meaningful manner.

The displayed page will show Returned Results in an ordered list, or displayed over other contextually relevant information (such as a map or graph).

Vertical List, Thumbnail List, Fisheye List, Select List, Pagination, Location Within, Access Keys, Titles

Additional Reading Information

In case you would like to further explore additional reading information and resources found within this section, check out the recommended related topics below that are found in the appendix.

Human Factors & Physiology - A section providing additional information on our human sensation, visual perception, and information processing abilities.

Next: Part III Widget

Discuss & Add

Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.


If you want to add examples (and we occasionally do also) add them here.

Make a new section

Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.

Component Wrapup (last edited 2011-12-13 16:57:45 by shoobe01)