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.
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.
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.
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).
"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.
Design Considerations for Mobile Experiences that Unfold:
Patterns are emerging with regard to the way in which mobile experiences unfold. The following examples are some patterns I've been tracking.
1. The Nested Doll Pattern
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.
The iPhone's email application employs the
nested doll pattern. The user is gradually funneled to a detailed view of an
Nested Doll Examples: iPhone Email App, BravoTV App, Netflix App
2. Hub and Spoke Pattern
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.
3. Bento Box Pattern
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.
Bento Box Examples: Kayak, TridAdvisor
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.
Filtered View Pattern
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.
What mobile "unfolding" patterns have you been noticing?