UX ARCHETYPESAPPLICATION CENTRICThe applications make the interaction experience. The archetype is a visual buffet ofthe ‘apps’ or functions that the system can run and manage. The interaction can belikened to a Swiss Army Knife. APPLE IPHONE GOOGLE ANDROID MICROSOFT SURFACE The central or home experience of While Android adds widget Microsoft surface simpliﬁes the desktop the iPhone is the rows of apps and functionality, an app-centric experience into a handful of apps. the persistent dock illustrates its archetype is at its core. emphasis on interaction based on apps.
UX ARCHETYPESACTIVITY CENTRICThe activities make the interaction experience and focus shifts from apps to theactivities that users intend to perform on the device. This archetype represents theseactivities visually and typically places them in an easily accessible sequence. WINDOWS PHONE 7 IPOD ZUNE Windows Phone 7 prioritizes the The original iPod navigation reﬂects Zune organizes around a central set activities most important to the user, its focus on a handful of music and of media activities. with a secondary emphasis on apps. video activities.
UX ARCHETYPESTIMELINE CENTRICThe timeline centric archetype focuses on time as a material. Users manipulate,tweak, drag and experience data with time as a prime focus. MICROSOFT KIN PATH APP NIKE+ STATS The scrubbable timeline of the LOOP functionality on the The Path app features a timeline of the Nike+ displays stats by day and allows users to dive into KIN allows users to move back and forth in time to see images of friends and prominently shows more detail information of individual days. social network updates. when different photos were added through the use of a clock following the scroll bar.
UX ARCHETYPESLOCATION CENTRICLocation is the centerpiece that drives discovery and activities. GPS and socialnetworking often play key roles in this archetype. LAYAR FOURSQUARE SCVNGR The augmented reality app layar Zune organizes around a central set SCVNGR encourages players of the displays information about local of media activities. game to travel to different locations venues and attractions based on the to earn points and discover the location and camera view. unfamiliar.
UX ARCHETYPESPEOPLE/IDENTITY CENTRICThe identities of social contacts are the primary focus of the archetype. This archetypeis typically centered around ‘status updates’ of some kind, leading to a stream of newsfrom and about different individuals. FACEBOOK TWITTER LINKEDIN The facebook experience revolves Twitter shows a constant stream of LinkedIn focuses news and updates around status updates, messages, the tweets of those you follow. on professional connections. and invites from friends.
MOBILE UX PATTERNS
UX PATTERNS iPhone Email App,NESTED DOLL PATTERN BravoTV App, NetﬂixMobile experiences that employ the nesting doll pattern are all about funneling users todetailed content. This pattern allows users to toggle easily between an overview screen Appdisplaying many pieces of content, to a detail-level view of a specific piece of content.Its a pattern has a strong sense of forward/ back movement. IPHONE NATIVE EMAIL APP The iPhones email application employs the nested doll pattern. The user is gradually funneled to a detailed view of an individual email
UX PATTERNS Flipboard, Pulse,HUB AND SPOKE PATTERN Facebook app,Mobile experiences with a hub and spoke pattern have a strong central anchor pointfrom which users can navigate. Users interacting may bypass the hub but they often Foursquare apptraverse through it several times while engaging with the experience. This patternworks best for experience with large quantities of content or with a several disparatefunctionalities. FLIPBOARD 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.
UX PATTERNS Music app on the iPad orFILTERED VIEW PATTERNJust like the optical refractor used in an optometrists office, the filtered view pattern iPhone, CoolIris App,allows navigation of the same data using different views. Its especially useful for most Calendar appsnavigating large sets of similar digital media such as music, photos, video, or movies. MUSIC APP ON IPAD The iPod application for the iPad employs the ﬁltered view pattern and allows users to navigate the same set of content using different views.
UX PATTERNS Kayak,BENTO BOX PATTERN TridAdvisorThis pattern segments the display into small compartments, each portion contributingto the overall experience, similar to a bento box from a Japanese restaurant. good wayto express sets of information that are strongly related to each other and is morecommonly used on tablets than smartphone experiences. KAYAK APP 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.
MULTI-DEVICE USE CASES
Experiences can now move ﬂuidly through and across multiple devicesCross-device platforms and the increasing number of data-connected devices allow people to shift from device to device within thesame app or function. Examples: Netflix app across devices, browser tabs syncing, email across desktop, mobile, tablet.
There are patterns for how ﬂuid experiences work across devicesSix patterns can help us understand technological possibilities and people’s mental models for how devices work together. 1 COHERENCE 2 SYNCHRONIZATION 3 SCREEN SHARING 4 DEVICE SHIFTING 5 COMPLEMENTARY 6 SIMULTANEITY
MULTI-DEVICE PATTERNSAn app or digital product works and looks coherently 1across devices. Features are optimized for specificdevice characteristics and context of use. COHERENCE EVERNOTE The digital notebook app Evernote is available across devices. The mobile apps are optimized for photo and and audio input.
MULTI-DEVICE PATTERNSContent on devices is always in sync. Apps intelligently 2remember information about where and which state theuser left off and seamlessly picks up from there whenthey switch to another device. SYNCHRONIZATION KINDLE The Kindle app syncs bookmarks and notes across devices so that if you begin reading on one device and switch to another, you’ll always be in the right place.
MULTI-DEVICE PATTERNSMultiple screens sharing a single source so that 3functions and attention can be segmented to theusers preference. SCREEN SHARING AIR DISPLAY APP The Air Display app allows users to extend their computer desktop onto their iPad or iPhone.
MULTI-DEVICE PATTERNSFluidly shifting content from one device to another. 4 DEVICE SHIFTING ALLSHARE Allshare enables video to be shifted from smartphone to TV.
MULTI-DEVICE PATTERNSDevices and content complement and augment each 5other. COMPLEMENTARY SCRABBLE APP The iPad serves as a Scrabble board while iPhones or iPods serve as the letter tile trays.
MULTI-DEVICE PATTERNSDevices being used simultaneously to consumer the 6same or related content. SIMULTANEITY HEINEKEN CHAMPIONS LEAGUE APP Heineken developed an interactive game that allowed fans to use their mobile phone to play along with soccer games by predicting what was going to happen.