Click here to buy from Amazon.

Get ready to push!

Driving cross-country in your car can be quite exciting—whether you’re stopping in small, quaint towns that are hardly noticeable on a map, flying down coastal highways with perilous views below, or enjoying the endless horizons of the plains. However, that state of happiness usually breaks immediately when you notice the low-fuel status icon has now appeared in your gas gauge.

This icon’s design creates more user mental load than necessary. If you’re in the middle of nowhere, and you haven’t seen a gas station or fuel information sign in miles, and now, on top of your uneasiness, you must calculate and predict how far you can go without running out of gas, you’re wondering:

What you really need is the ability to quickly access additional related information.

Figure 6-1. Iconic labeling allows you to add information and selection methods directly to graphical or visualized data elements. The user knows what the interesting stuff is on the page, can tell the difference between the various types of information, and has an accurate expectation of what will happen if he selects an item. Even if the element opens additional details, hints of the data are presented contextually and invite users to find other features without exploration.

Maybe We Won't Have to Push

Maybe the fear of running out of gas will come to an end; we’re not referring to alternate energy sources here, but rather to an improved display design on our dashboard.

Here are some suggestions:

Drilldown and the Mobile Space

Figure 6-2. Improved screens, processors, and input methods increasingly allow the use of natural- looking objects. These communicate their content and interaction organically, and so hold the promise of innate, learning-free use. They are not quite there, so design items like the Stack of Items carefully, and don’t be afraid to provide labels.

Throughout this book, we mention the importance of following a consistent information architecture to ensure a positive user experience across a device’s OS. In Chapter 5, you learned that it is important to design the interface to ensure that the user can effectively access this content because:

Drilldown access also requires these considerations. But unlike lateral access whose in- formation architecture is based on the same tier levels, drilldown is concerned with accessing related content based on hierarchical parent-child relationships, hence the name “drilldown.” You are accessing additional detailed information relating to the current content or the state of the device.

The fact that drilldown content is being accessed may appear directly on the state currently being displayed, or it may cause the user to jump around, whether within the current page or by opening a new one. If the user is required to access content on a new page, you must consider use of wayfinding principles to give the user an understanding of her current location as well as a clear path to follow back. There are several reasons to use drilldown widgets across the mobile space:

Use of drilldown widgets affords the following benefits:

Patterns for Drilldown

Using appropriate and consistent drilldown access widgets will provide an alternative way to present and manipulate content hierarchically. In this chapter we will discuss the following patterns based on how the human mind organizes and navigates information:

Link

Button

Indicator

Icon

Stack of Items

Annotation

When to use Links, Buttons, and Icons.

Knowing when to use these types of drilldown widgets can be challenging to understand. Use this chart as a reference to guide you in that process.

Pattern

When to use

Link

Use a link when a new page of related content must be loaded.

Use a link to jump to additional content within the current page.

Use a link to open a Pop-Up dialog containing relevant content.

Button

Use a button to initiate an immediate action.

Standalone

Use a standalone button to initiate an immediate action without additional user input.

In-conjunction

Use in-conjunction buttons with other user inputs or controls (radio buttons, spinners, checkboxes, etc.) to commit these user selections.

Delayed input

Use a delayed input button to interrupt the submission to request additional user data. A modal Pop-Up dialog will likely be used to retrieve this information.

Indicator

Use an indicator to initiate actions of linking, commit actions, and state changes.

Content beyond

Use a content beyond indicator to visually explain what type of content will be loaded if the link is followed. This is typically an icon in front of the text label.

Type of action

Use a type of action indicator to describe the type of activity that will occur when the link is selected. For example, a “Refresh” label can be accompanied by a revolving refresh icon.

Manner of action

Use a manner of action indicator to describe the way the action will be carried out. The icon should indicate that the action may go forward or backward in the process, opens a pop up, or performs some other type of action.

Icon

Use an icon to provide access to disparate items or functions, in a glanceable manner.

Use a fixed icon to clearly explain, within the image, its function or target destination.

Use a status icon to indicate a change with the current condition. This may be an external change such as the current weather, a system change such as inbound messages, or a user- initiated state change such as switching from scroll to select mode.

Use an interactive icon to carry out a behavior directly, such as enabling WiFi. This icon does not provide immediate access to any target application, site, or information.

Stack of Items

Use a stack of items when information can be represented as thumbnail graphics, and all items in the group appear in a virtual stack which can be shuffled or expanded.

Annotation

Use annotation when more information should be presented for an item in focus, such as a pinpoint on a map or chart. An annotation is smarter than a tooltip, and may offer links or actions.


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.