Embed Size (px)
DESCRIPTION
thoughts on Mobile and the shift it represents compared to classic web layouts, which were derived from print but had their own morphology. Concludes with a few notes on how to optimize designs for mobile platforms.
Citation preview
Giles Phillips - @gilesphillipsNotes on mobile UX
Web pages are clickable newspapers
The concepts map,but the design isn’t optimized
Newspapers havepretty large viewports
You can �t lots of content
HEADER
HEADER + LOGO
PAGE HEADLINE
IMAGE AND CAPTION
CO
LUM
N
CO
LUM
N
CO
LUM
N
CO
LUM
N
important messaging
HEADER + LOGO + GLOBAL NAV
PAGE HEADLINE
IMAGE AND CAPTION
SEC
ON
DARY
NAV
CO
LUM
N
CO
LUM
N
SIDE
BAR
NAV
important annoying message
HEADER + GLOBAL NAV
PAGE HEADLINE
SEC
ON
DARY
NAV
SIDE
BAR
NAV
annoying message!!
Newspapers are also highly mobile
But sort of hard to read this way...
Too bad this doesn’t fold up
mobile devices have created arevolutionary new medium
KVM (Keyboard, Video, Mouse)is a transitional interface
Somewhere between dials and knobs...
...andnaturalhuman
interaction
Mobile is more natural: touch & voice inputsCarried on the body, mobile extends us
We’ve become Cyborgs
mobile is disrupting the user experience:
design paradigms,constraints,metaphors
Design is creation for use
Design has intent
Expressing intent as simply as possible is good design
OPTIMIZE
OPTIMIZING MOBILE UX - FORM FACTOR
• Small viewport = limited screen real estate - Old nav paradigms not e�cient, use new lighter models - Shorten content for a�ordances and headings
• Make your affordances big (40x40px +10 px) • Hovers = fail• Popups stink• Reference the platform interface guidelines
OPTIMIZING MOBILE UX - PERFORMANCE
• Load times are just as important as ever• Minimize payload - including using the UX to break up requests• Perceived performance as an element of your user experience
OPTIMIZING MOBILE UX - CONTEXT OF USE
• Map your user scenario & touchpoint• Design for a 1-minute timebox• Divided attention, not sustained attention • Mobile usage is not about engagement - Usage tends to be destination-driven - The completion of a speci�c task - Responding to an alert or checking update
OPTIMIZING MOBILE UX - CONTENT
• Different labels work better on mobile• Always be succinct• Map or storyboard your content along a linear sequence
