Components, as described here, are a section or subsection of any designed interactive space. They take up a significant portion of the screen, and may be as large as the viewport (or larger), or when smaller may appear to be in front of other displayed information.

Components display a range of information types -- images, ordered data, expandable lists, and notifications. They also allow the user to interact with the system in some significant, primary manner. Combining them with the small, reusable, interactive or display Widgets gives you an almost unlimited number of options.

The components that we will discuss here are subdivided into the following chapters:

Types of Components

Display of Information

How you display information needs to reflect the user’s mental model, and mimic the way they organize and process knowledge. Information displayed on mobile user interfaces that ignores these principles, causes the user to become lost, confused, frustrated, and unwilling to keep using your product. Patterns found in this chapter, such as Vertical List and Infinite List, provide simple, well-understood solutions on how to display lots of information in a structured and contained manner that doesn’t overload the user’s mental load. These patterns also provide solutions to arranging content where screen real estate is so valuable that every pixel counts. To prevent this, this chapter will explain research based frameworks, tactical examples, and descriptive mobile patterns to use.

Control & Confirmation

Humans make mistakes. As designers, we can create effective interfaces that can prevent costly human error resulting in loss of user-entered data. When costly human error is possible, we should create modal constraints and decision points to prevent errors before they happen. Patterns found in this chapter, such as Confirmation and Exit Guard, provide solutions that help prevent human error that can lead to the loss of important data the user has tediously typed on their tiny mobile device. You should always consider the context of the user’s goals and current tasks when incorporating confirmation controls. But, if you over-use these constraints and decision points during low risk situations, it will cause user frustration by increasing their processing time and mental load, and delaying or stopping their task.

Revealing More Information

When we design to reveal more information, we need to be conscious of limitations of the devices and networks, and our human abilities. Screen size will limit the amount of information that can be displayed at a time. A device’s OS, and the framework within which you have to work, will limit the types of interactions available. Hardware constrains the viewport size, input methods and the processing speed and loading times. Our memory limits cause us to filter, store, and process only relevant information over a duration of time. Patterns, such as Windowshade and Pop-Up, can be used to work around these limitations. They provide solutions you can use to reveal additional information when the user chooses, without having to saturate the screen full of content.

Getting Started

You now have a general sense of what components are how they relate to information display. The component chapters will provide specific information on theory, tactics, and illustrate examples of appropriate design patterns you can apply to specific situations. And as always, remember to read the antipatterns, to make sure you don't misuse or over-use a pattern.