Get ready to push!

Driving cross-country in you car can be quite exciting. Whether it’s stopping in small, quaint towns hardly noticeable on a map, flying down coastal highways with perilous views from below, or enjoying the endless horizons of the plains. However, that state of happiness is usually immediately broken when you notice out of the corner of your eye, the low fuel status icon has now appeared.

To me, this icon’s design creates more user mental load than necessary. I’m in the middle of no where, I haven’t seen a gas station or fuel information sign in miles and now on top of my uneasiness, I must calculate and predict how far I can go without running out of gas. Here’s what going on in my head:

• Did this status light just go on?
• Or has it been on for many miles?
• How many miles am I going to have to walk to find a gas station after I ran out of gas?
• Do I have the appropriate walking shoes?

These concerns stem from a problem in its design. The icon’s design does not communicate its purpose well because the user’s information process was not completely considered.

However, bad it may appear, this icon does have some good qualities.

• It is universally understood. The icon’s graphic clearly represents a meaning of fuel without ambiguity across cultures.
• It turns on before I run out of gas, giving me some time to plan my next steps.
• It only turns on when there is a fuel issue - serving as a warning.
• Its luminance is clearly different from the background and any other status icons that might be on and visible.

Maybe we won't have to push

Maybe the fear of running out of gas will come to end (I’m not referring to alternate energy sources here) due to an improved display design on our dashboard.

We are now aware that this fuel icon has both effective and ineffective qualities to communicate its intention. All of which can be improved to some degree to make the user experience much more satisfying.

Here are my suggestions:

• Make the initial warning light blink on and off, then pause in a calculated repetition. Because our short term memory can only hold about three chunks of information at a time, we usually store chunks that are important to the task at hand. If a warning status light appears on without undergoing periodic state changes, our current attention may not focus on it and we’ll assume it’s not even there.
• Provide more surface level information. Imagine if this status icon was interactive. By pushing it, it may reveal numerical information about how many miles you have left before you run out of gas.
• Provide drilldown access to additional information. Provide a button that is linked to your GPS navigation map. This could reveal your current location and the manageable route to the nearest gas station that you could make before you run out of gas, put on those comfortable walking shoes, and push.

Drilldown and the Mobile Space

Through this book, it is mentioned the importance of following a consistent information architecture to ensure a positive user experience across a device’s OS. In chapter 6 Lateral Access, you learned that designing the interface to ensure the user can effectively access this content must be carefully considered because:

• Mobile displays are smaller than a PC, reducing the amount of information shown on a viewport’s current state. Common smartphones still (in 2011) have screen resolutions at 320x480px. Many feature phones still have resolutions at 240 x 320.
• Smaller displays require larger buttons for gestural interaction. Which, in effect, will reduce the amount of content that can be placed on the screen.
• On larger mobile displays that require the use of capacitive touch, the size of interactive items cannot be as small as they would be on a similar-sized computer with a mouse or similar interface.
• The user's finger and hand placement may occlude information during interactions, which may be much of the time the device is in use.
• Mobile screen real estate is so valuable. Content and related features must be prioritized based on user goals and needs.
• A mobile user’s attention is competing with all of the stimuli in the surrounding environment. Therefore, the access to the content must be detectable, even at a glance, and afford its function appropriately.
• There is a direct correlation between the size of the target, its distance from the user, and the amount of time it takes to select it.

Drilldown access also requires these considerations. But unlike lateral access whose information architecture is based on same levels tiers, 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.

Accessing drilldown content may appear directly on the current state being displayed. Or it may cause the user to jump around, whether that may be within the current page or opening a new one. If the user is required to access content on a new page, wayfinding principles must be considered to give the user an understanding of their currently location as well as a clear path to follow back.

Use drilldown widgets across the mobile space to:

• Allow users to access more specific related content.
• Provide the user with visual cues that more related content is available.
• Allow the user to immediately notice the hierarchical relationship of content.
• Allow users to gain additional information, or change the state of the device, without removing themselves from the original context.

Benefits of Drilldown

• Presents immediate relevant information with a portal to access more specific content.
• Efficiently uses valuable mobile screen real estate.
• Can allow for quick jumping to a specific section within the current page.
• Can provide additional surface information without removing the user from the context.

Patterns for Drilldown

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

• Link A selectable, content-only item that provides an access to additional pages or content.

• Button A distinct, visual element, within any context, that enables the user to initiate an action, submit information, or carry out a state change.

• Indicator A visual representation, dual coded with an image and text, that initiates an action and submits information similar to the actions of a link and button.

• Icon A clear and understood visual representation that easily provides the user access to a target destination or direct function.

• Stack of Items A stacked set of related, selectable items can be dispersed to reveal the contents which provide further selection or access to each item.

• Annotation This additional content may also carry functionality.

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.

||Link|| * Use a link when a new page of related content is required to be loaded. Use a link to jump to additional content within the current page. Use a link to open a Pop-Up dialogue containing relevant content.||