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:

Chapter 2: Wrapper

This chapter described the wrapper as being a template which contains, or houses all of the components and elements in page. This wrapper allows the content to be consistently organized across the device's OS. When content is placed within a wrapper consistently and hierarchically, the users will 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 Table Chapter 2: Wrapper

Pattern

Design Problem

Solution

Other Patterns to Reference

Scroll

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

Annunciator Row

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.

XXX

Notifications

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.

XXX

Titles

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.

XXX

Revealable Menu

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.

XXX

Fixed Menu

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.

XXX

Home & Idle Screens

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.

XXX

Lock Screen

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.

XX

Interstitial Screen

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.

XXX

Advertising

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.

XXX