4ourth Mobile Touch Template
Design for people, not pixels with this handy, wallet-sized inspection and design tool, only $10. Order yours now
Mobile Interaction Design Patterns Poster
Every pattern from the book and this wiki, plus easy-to-follow relationships, and key information on sizes for readability and touch. Order now
Components, as described here, are a section or subsection of a 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 must 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 small, reusable, interactive, or display widgets gives the designer an almost unlimited number of options.
The components that we will discuss in Part II are subdivided into the following chapters:
Chapter 2, Display of Information
Chapter 3, Control and Confirmation
Chapter 4, Revealing More Information
Types of Components
Components for Display of Information
When you display information you need to reflect the user’s mental model and mimic the way the user organizes and processes knowledge. Information displayed on mobile user interfaces that ignores this principle causes the user to become lost, confused, frustrated, and unwilling to keep using your product. Patterns found in Chapter 2, such as Vertical List and Infinite List, provide simple, well-understood solutions for displaying lots of information in a structured and contained manner which doesn’t overtax 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 that, this chapter will explain research-based frameworks, tactical examples, and descriptive mobile patterns to use.
Components for Control and 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 Chapter 3, such as Confirmation and Exit Guard, provide solutions that help prevent human error which can lead to the loss of important data the user has tediously typed on his tiny mobile device. You should always consider the context of the user’s goals and current tasks when incorporating confirmation controls. But if you overuse these constraints and decision points during low-risk situations, you will frustrate the user by increasing his processing time and mental load, and delaying or stopping his task.
Components that Reveal More Information
When we design to reveal more information, we need to be conscious of the limitations of the devices, networks, and our human abilities. Screen size will limit the amount of information that can be displayed simultaneously. 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, processing speed, and loading times. Our memory limits cause us to filter, store, and process only relevant information over a period of time. You can use patterns such as Windowshade and Pop-Up 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.
You now have a general sense of what components are and how they relate to information display. The component-related chapters will provide specific information on theory and 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 overuse a pattern.
Next: Display of Information
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.