notes on mobile ux

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