Wrap Up
We have just seen that a page is the area that occupies the entire viewport of the mobile screen during its current state. Within the page, a wrapper contains and organizes the appropriate components and content within that viewport. Mobile displays range in sizes and on smaller devices, screen real estate is valuable where every pixel is important. Therefore, you should be aware of how little or much room is used by these components when planning the UI layout. Mobile users want information access on the spot. So information that is displayed without hierarchy and structure, will likely cause user tasks to be delayed or fail.
When incorporating the page patterns into your design, consider:
- User needs, tasks, and reading goals based on context of use.
- Principles of page layouts based on theories to ensure the users can quickly identify the structure of the content.
Chapter 2: Wrapper
This chapter described the wrapper as being a template, which contains, or houses all of the components and elements within a page. This wrapper allows the content to be consistently organized across the device's OS allowing users to have an easier time navigating, searching, and accessing it. The ability for the user to quickly recognize the content's organizational structure will increase user learnability and satisfaction while decreasing performance errors.
Pattern Reference Table
This pattern reference chart lists all of the patterns found within each chapter described in this part of the book. Each pattern has a general description of how it can apply to a design problem while offering a broad solution.
Cross-referencing patterns are common throughout this book. Design patterns often have variations in which other patterns can be used due to the common principles and guidelines they share. These cross-referenced patterns are listed along with the page number where they are fully described in this book.
Pattern Table Chapter 2: Wrapper
Pattern |
Design Problem |
Solution |
Other Patterns to Reference |
More information is in the page or element than can fit in the viewport. A method of access to this information must be provided. |
Scrollbars are displayed to indicate the scrollable axes, and the relative position within the scrollable area. Due to the scale of mobile devices, as a general rule scrollbars are not manipulatable themselves. |
Infinite Area, Vertical List, Infinite List, Accesskeys, 5–way keys, Pop-Up, Finger gestures |
|
The status of important hardware features such as battery level and network connections must be able to be discovered by the user with little or no effort. |
A bar is displayed along the top of every screen with a series of iconic representations of the status of the device. Common representations and placement of icons are used, so users can understand the key indicators on any device without familiarity with the specific device. |
||
A method must be provided to notify the user of arbitrary notifications, of varying priority, without unduly interfering with existing processes. |
A single, consistent notification method is provided across the entire OS. This method does not interfere with any current processes the user is currently involved in, and allow it to be acted upon or dismissed very easily. |
Annunciator Row,Pop-Up, Confirmation, Titles, LED, Tones, Haptic Output, Voice Reminders |
|
Every key element should be labeled to make context or process completion clear. |
Pages and elements or content sections within a page should almost always labeled. Titles must be used in a consistent manner, in size, location, content, and style. The simplest method for pages is a straightforward title bar. |
Notifications, Vertical List, Infinite List, Thumbnail List, Fisheye List, Carousel, Grid, Select List, Confirmation, Sign On, Exit Guard, Timeout, Windowshade, Pop-Up, Hierarchical List, Returned Results |
|
Not all functions for a page can or should be presented on the screen. A method must be provided to access these optional functions. |
By selecting a key, small on-screen element, or performing a gesture, an option menu is displayed with content relevant to the current state of the application. |
Fixed Menu, Vertical List, Pop-Up, Thumbnail List, Select List, Accesskeys, Icon,Button |
|
There is a need for access to options or controls across the application, but a Revealable Menu is already in use, or would be unsuitable due to lack of controls or conflicts with other key interactions. |
An always-visible menu or control set is docked to one edge of the viewport. This is often used for media players, cameras and other applications where a key set of controls or options should be visible at all times. |
Revealable Menu, Annunciator Row, Titles, Vertical List, Pop-Up, Icon, Button |
|
A default condition must be available for display once the device has started, and to return to when all other processes and applications have exited. |
All mobile devices have an Idle Screen, originally when the device is not doing anything (it is idle). This is used as a launching point or when the user is not specifically asking anything of the device. |
Lock Screen, Grid, Film Strip, Thumbnail List, Icon, Link, Pagination, Location Within |
|
Mobile devices must enter a lock/sleep state to reduce power consumption, prevent accidental input, and sometimes to prevent unauthorized input. The device must communicate this clearly, and assist with un-locking. |
The Lock Screen is displayed immediately after a deliberate (user initiated) lock. Key information such as events, alerts, time and date, and instructions on how to unlock the device is displayed. |
Sign On, Annunciator Row, Home & Idle Screens, Notifications, Pop-Up, Finger gestures |
|
A delay is encountered before a requested screen can be loaded. The information previously displayed cannot or should not be displayed. |
The interstitial is primarily a loading process screen. Use when there is a technical limit that prevents display of the previous context. This is commonly encountered when starting the device, or when applications are loaded. |
||
Advertising must be placed in an application, site or other service. |
Sometimes a necessary function of the product, advertising must be integrated correctly, clearly differentiated from the content, readable, legible and interactable. |
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 in the appendix.
Suggested Appendix Topics
Introduction to Mobile Typography - This provides additional information on appropriate use of message display characteristics, including: typography, legibility, and readability guidelines. As well as further information on today's mobile display challenges and capabilities.
Next: Part II Components
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.
Examples
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.