Mobile Web User Experience

Mobile Web UX Nick Finck May 20, 2010 WebVisions 2010 - Portland, Oregon

? Who the f#@k is this dude?

Nick Finck Blue Flavor ‣ Principal & Director of User Experience ‣ Over 15 years of experience working in the web ﬁeld ‣ Has worked with Adobe, Boeing, CBS, Cisco, CitiGroup, Comcast, FDIC, HP, IBM, and Microsoft ‣ Co-organized and curated more than 10 national and international web conferences & events ‣ BlueFlavor.com ‣ Judged the Webby’s and several other web awards ‣ NickFinck.com ‣ Former publisher of Digital Web Magazine ‣ Expertise in information architecture, interaction design, and user research

Outline ‣ Some bullshit about me ‣ Re-thinking the web ‣ A quick story ‣ Some technical examples ‣ Really cool shit

The way we think about the Web

A mobile phone is now used more for data than actual phone calls New York Times Jenna Worthham May 13, 2010

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

The iPad reached more than one million units sold in half the time it took the iPhone Yahoo News Ben Patterson May 3, 2010

We need to change the way we think about the Web

Mobile

the Mobile Web

The User Experience of the Mobile Web

A Quick Walkthru

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

http://nytimes.com http://app.getleaﬂets.com/nyt/ NYTimes.com NY Times on Leaﬂet 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 ﬁt within screen

Possible solutions

Readable without zooming Fits perfectly within screen

Readable without zooming Text ﬁts on screen

Interaction

Navigation

The problem

Navigation

Hotspots visible & clickable only after zoomed 10x

Content is somewhere way the fuck up here

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

The 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

Big ass buttons!

Designed with the speciﬁc 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?

Lego Augmented Reality Kiosk

Toyota Augmented Reality Advertisement

ARhrrrr Augmented Reality Game

Insqribe Location Based Augmented Reality

Nintendo Wii Motion based gaming

Microsoft Surface Surface-based computing

Microsoft’s Project Natal Controller-less Interface

Minority Report 20th Century Fox

Oblong's g-speak Spatial Operating Environment

Sixth Sense Wearable Gestural Interface

We have just barely begun to understand the potential of the Web

Thank you!

? Questions

Mobile Web UX Nick Finck nick@blueflavor.com Blue Flavor - http://blueflavor.com Personal - http://nickfinck.com WebVisions 2010 - Portland, Oregon

Mobile Web User Experience

by Nick Finck on Jun 15, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 4

Statistics

Mobile Web User Experience — Presentation Transcript

http://us-w1.rockmelt.com	2
http://www.slideshare.net	1
http://twitter.com	1