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