Mobile UX
Nick Finck, November 12, 2009
Refresh Portland

The Mobile Web
Refresh Portland

Photo by Rion Nakaya
http://www.flickr.com/photos/rion/47437262/

A Quick Walkthru
Refresh Portland

Found Products

Oh Dear Gawd, a whole
section for cheese. Yes!

No Product List

Lets Get Technical!

Fitts’s Law

“ In ergonomics, Fitts's law is a model of
human movement which predicts the time
required to rapidly move to a target area,
as a function of the distance to the target
and the size of the target.”
Description of Fitts’s Law
Wikipedia

Not so good
Way better

Optimized Markup

digital-web.com
Screen based CSS & Print based CSS

Developing for the Mobile Context
• XHTML
✓ Well formed
✓ Semantically correct
✓ Highly optimized
• CSS
✓ Handheld media type (sometimes even screen media type)
✓ Highly optimized
Refresh Portland

http://nytimes.com http://app.getleaflets.com/nyt/
NYTimes.com NY Times on Leaflet
Minimum 30 Seconds to lo load 796kb Maximum of 7 seconds to lo load 30kb
plus requests to multiple servers

Highly optimized header markup
Non-optimized header markup

Optimized UI

Highly optimized UI
Non-optimized UI

A Deep Dive into Mobile Web

Content

Readability & Page Width

The problem

Unreadable
Must zoom

Unreadable
Again

Text does not fit within screen

Possible solutions

Readable
without
zooming
Fits perfectly within screen

Readable
without
zooming
Text fits on screen

Interaction

Navigation

The problem

Navigation

Hotspots visible & clickable
only after zoomed 10x

Content is
way above
navigation

Navigation
could have
larger
hotspots

Microscopic
hotspots

Barely
navigable

Possible solutions

Navigation
along side
the content

Nice big
and juicy
hotspots

Super size
hotspots

Visually
called out
navigation

Use larger
headings &
visual hints

Pagination

The problem

World’s
smallest
pagination

A possible solution

Excellent
pagination
solution

Search

The problem

A possible solution

A perfect
case for
search ahead

Buttons

The problem

Very typical
web button

Possible solutions

Large juicy
buttons for
easy clicking

Designed
with the
specific 555-5555
context in
mind

Calls to Action

The problem

Calls to
action are
lost in page

A possible solution

Make calls
to action
very obvious

?
What is Next?
Refresh Portland

Augmented Reality with Location Based Services

Augmented Reality with Visual Recognition

Nintendo Wii

Microsoft’s Project Natal

Microsoft Surface

Oblong's g-speak
Spatial Operating Environment

Sixth Sense
Wearable Gestural Interface

Thank you!
Refresh Portland

?
Questions
Refresh Portland

Mobile UX
Nick Finck
nick@blueflavor.com
Blue Flavor - http://blueflavor.com
Personal - http://nickfinck.com
Refresh Portland