Good Mobile Experiences Unfold & Progressively Reveal their Nature

Shrinky Dinks are a children’s toy/activity kit consisting of large flexible sheets which, when heated in an oven, shrink to small hard plates without altering their color or shape. Most sets are pre-printed with outline images of popular children’s characters.

Growing up, my sister and I were big fans of Shrinky Dink Kits. I fondly remember the many hours we spent meticulously adding color to outlined images of our favorite cartoon characters printed on the weird, slightly slippery Shrinky Dink plastic paper. While the activity itself was akin to coloring in coloring books, the final product was infinitely cooler. A standard kitchen oven was all that was needed to unlock the magical powers of Shrinky Dinks. Bake the colored paper characters in a hot oven like a batch of cookies and they’d magically turn in to tiny versions of themselves.

Shrinky Dinks and Mobile UX
Shrinky Dinks come to mind when I think of the often-cited screen real estate disparity between mobile devices and personal computers; mobile experiences have substantially less screen real estate to work with than their PC counterparts. A common yet unwise method for dealing with less screen real estate is to employ a Shrinky Dink strategy – to simply shrink a PC experience, load it onto a mobile device and call it a mobile experience. While my fondness for Shrinky Dinks clearly runs deep, miniaturizing a PC experience for a mobile device is a bad idea. It’s a surface solution to a structural problem. Successful PC and mobile experiences are built on fundamentally different conceptual models and leverage different psychological functions of the user. Understanding these differences will help you create better experiences for both contexts.

PC Design Patterns: Anchors, Stacking, and Recognition
All PC experiences have a conceptual anchor – the desktop – from which users can navigate. Similar to a Jenga tower or a stack of papers, PC experiences have a conceptual “bottom” and “top” that’s anchored to the desktop. Like stacks of paper placed on a table, the desktop metaphor enables multiple cascading application windows to be open at once. These open windows can be shifted and shuffled (reinforced by functions like “bring to front” or “send to back”.) This sense of a static anchor coupled with the ability to layer and cascade application windows enables users to traverse between applications with ease and multi-task.

Similar to a Jenga tower, PC experiences have a conceptual “bottom” and “top”, making it easy to stack cascading application windows in a layered fashion.

Similar to a Jenga tower, PC experiences have a conceptual “bottom” and “top”, making it easy to stack cascading application windows in a layered fashion.

GUIs focus on the psychological function of recognition. Users can see all their options and designers give minimal visual differentiation to the interface elements. GUIs rely on a user’s sense of sight – WYSIWYG (What you see is what you get).

Users of desktop experiences interact with graphical user interfaces (aka GUIs). Graphical user interfaces are built on the psychological function of recognition. Users click on a menu item, the interface provides a list of actions, the user recognizes the appropriate action and clicks on it. GUIs reliance on recognition gave rise to the term WYSIWYG (What you see is what you get). Users can see all their options and minimal visual differentiation between interface elements is commonly used.

Unfolding, “Topping In” to Information, and Intuition
In contrast, mobile experiences – especially those with touch screens and natural user interfaces – can feel anchorless by comparison. Instead of cascading windows stacked on top of each other, open mobile applications take up the entire screen. Lacking the screen real estate to present all the interface options at once, mobile UIs intelligently truncate and compartmentalize information into bite-size portions that users can navigate in a way that feels intuitive. If PC experiences are anchored, mobile experiences are about movement and unfolding.

Instead of possessing a strong conceptual anchor, mobile experiences unfold and progressively reveal their nature. While PC experiences present all the content and functionality at once, great mobile experiences allow users to “top in” to information, and reveal more content and complexity as the user engages with the application or experiences.

The natural user interfaces (aka NUIs) found on most modern mobile devices are built on the psychological function of intuition. Instead of recognizing an action from a list, users must be able to
sense from the presentation of the interface what is possible. Instead of “what you see is what you get” NUIs are about “what you do is what you get.” Users see their way through GUI experiences, and sense their way through NUI ones. Unlike GUI interfaces with minimal differentiation between interface elements, NUI interfaces typically have fewer options and there is more visual differentiation and hierarchy between the
interface elements.

Unlike GUIs, Natural user interfaces don’t have a strong conceptual anchor, which can make users feel anchorless. In order to adapt to limited screen real estate, designers must allow users to “top in” to content, progressively revealing more information as the user engages with the experience.

Patterns are emerging with regard to the way in which mobile experiences unfold. The following examples are some patterns I’ve been tracking.

Mobile experiences that employ the nesting doll pattern are all about funneling users to detailed content. This pattern allows users to toggle easily between an overview screen displaying many pieces of content, to a detail-level view of a specific piece of content. It’s a pattern has a strong sense of forward/ back movement.

Nested Doll Examples: iPhone Email App, BravoTV App, Netflix App

The iPhone’s email application employs the nested doll pattern. The user is gradually funneled to a detailed view of an individual email.

Mobile experiences with a hub and spoke pattern have a strong central anchor point from which users can navigate. Similar to the model of an airport hub, users can bypass the hub and navigate to other “spokes” of the system. However, users interacting with hub and spoke experience often traverse through the hub of the application several times while engaging with the experience. This pattern works best when applied to experiences with large quantities of content or to experiences with a several disparate types of functionality.

Hub and Spoke Examples: Flipboard App, Facebook App, FourSquare App

Flipboard employs the hub and spoke unfolding pattern. The “contents” page is the hub, with the various content sources creating the spokes of the experience.

Just like a bento box from a Japanese restaurant, this pattern carves up the surface area of a mobile device’s screen into small compartments, each portion contributing to the overall experience. This pattern is a good way to express sets of information that are strongly related to each other and is more commonly used on tablets than smartphone experiences.

The Kayak application for the iPad uses the bento box pattern. Small pieces of tightly related information are displayed on the screen at one time, allowing the user to see the interrelationships of information easily.

Similar to the optical refractor used in an optometrist’s office, the filtered view pattern allows users navigate the same data set using different views. It’s a pattern that’s especially well suited for navigating large sets of similar digital media such as music, photos, video, or movies.

Filtered View Examples: iPod on the iPad or iPhone, CoolIris App, Calendar Apps on most smartphones and tablets

Similar to the optical refractor at an optometrist’s office, which offers a patient multiple views of an eye chart, the filtered view pattern provides users multiple views of the same data. The iPod application for the iPad employs the filtered view pattern and allows users to navigate the same set of content using different views.