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
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
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
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
“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.
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
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.
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
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.
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
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?