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 Reference Chart

Chapter 3: Display of Information

Pattern

Design Problem

Solution

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

Carousel

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

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

Slideshow

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.

Patterns within this chapter, especially the Vertical List and Grid items, may be expanded very simply by adding a checkbox, or other explicit and visible selection component.

Vertical List, Grid, Confirmation, Wait Indicator, Titles

Chapter 4: Control & Confirmation

Pattern

Design Problem

Solution

Other Patterns to Reference

Confirmation

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