The word widget can mean a number of things, even within related Internet technologies. Even the savvy user may be confused by the lack of common terminology and the lack of any inherent meaning. The term may apply to bits of code, applets, engines, and GUI elements.

However, the scope of this book, and of this part of the book, is solely concerned with mobile GUI widgets. These widgets are display elements such as buttons, links, icons, indicators, tabs, and tooltips. Numerous additional elements (sometimes called GUI widgets), such as scroll bars, are discussed as components and functions in Part I.

The functionalities of the widgets discussed in this part of the book are to:

Display a small amount of directly related information
Provide an alternative view of the same information, in an organic manner
Provide access to related controls or settings
Display information about the current state of the device
Provide quick access to indexed information

The widgets that will be discussed here are subdivided into the following chapters:

Chapter 5, Lateral Access
Chapter 6, Drilldown
Chapter 7, Labels & Indicators
Chapter 8, Information Controls

Types of Widgets

Widgets for Lateral Access

Whether your information architecture is organized hierarchically or laterally, its presentation and access are affected by the potentially small mobile display. One option to consider is to use lateral access widgets such as Tabs, Peel Away, Pagination, and Location Within to assist the user in quickly navigating through and selecting this content.

Widgets for Drilldown

Using an information architecture that is structured hierarchically allows content to be laid out from general to specific while depending on parent-child relationships. This drilldown, top-down approach is effective in providing users with additional related content and commands within multiple information tiers. Patterns, such as Link, Button, and Icon can be used to access these child content types quickly.

Widgets for Labels and Indicators

In some situations, it may be necessary to use small labels, indicators, and other pieces of information, such as a Tooltip, Wait Indicator, and Avatar, to describe content. Mobile users each have unique goals. Some require instant additional information without clicking. Others may need additional visual cues to assist them while quickly locating information. In any case, you must present the information labels appropriately while considering valuable screen real estate, cultural norms, and standards.

Widgets for Information Controls

Finding specific items within a long list or other large page or data array can be challenging. With appropriate controls, such as Zoom & Scale and Location Jump, to locate specific information quickly, the user can instead quickly locate and reveal information on mobile devices.

Helpful Knowledge for This Section

Before you dive right into each pattern chapter, we would like to provide you with some extra knowledge in the chapter introductions. This extra knowledge is in multidisci- plinary areas of human factors, engineering, psychology, art, or whatever else we feel is relevant. Due to the broad characteristics of widgets, we find it helpful for you to become knowledgeable in the following relevant areas:

Wayfinding Across Content

Whether interacting on a PC, kiosk, or mobile device, your users can easily get lost when navigating content. To reduce their frustration of being lost, you can use visual, haptic, and even auditory cues to help guide users in getting to the place they need to be. When designing a navigation system you must provide those cues to answer the following user questions:

Where is my current state or position within the environment? Where am I on this page?
Where is my destination? Where do I have to go to achieve my end goal?
How do I get to my destination? How am I going to navigate across content to achieve my end goal?
How do I know when I have arrived?
How do I plan my way back? Are there alternate routes I can take?

Kevin Lynch, an environmental psychologist and author of the book The Image of the City (MIT Press), determined that we rely on certain objects to help us identify our position within an environment. Let’s examine how these objects act as cues and can be used to improve navigation:

Paths

These are the channels which a person moves along. Examples are streets, walkways, transit lines, and canals. On mobile devices, paths are the routes users take to access their desired content. These paths can follow both lateral and hierarchically organized structures. Help the user define routes by clearly labeling, color-coding, and grouping related content. Use location within widgets to define the user’s current position along the path. Provide alternate paths to access the same information.

Edges

These are linear elements that define boundaries between two phases, such as walls, buildings, and shorelines. On mobile devices, edges can include the perimeter of the viewport, or of fixed menus, scroll bars, and annunciator rows. Use edges to appropriately contain navigation.

Nodes

These are focal points, like distinct street intersections. On mobile devices, these may serve as graphics, labels, and indicators to describe small pieces of content.

Districts

These are areas within boundaries that share common features, such as neighborhoods, downtowns, and parks.

Landmarks

These are highly noticeable objects that serve as reference points.

Getting Started

You now have a general sense of what widgets are as well as a physiological visual perception framework to reference. The component chapters will provide specific information on theory and tactics, and will illustrate examples of appropriate design patterns. And always remember to read the antipatterns, to make sure you don’t misuse or overuse a pattern.

Next: Lateral Access

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.