WebVisions 2010 - Portland, Oregon

Mobile Web UXNick FinckMay 20, 2010

?Who the f#@k is this dude?

‣ Principal & Director of User Experience

‣ Over 15 years of experience working in the web field

‣ 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

‣ Judged the Webby’s and several other web awards

‣ Former publisher of Digital Web Magazine

‣ Expertise in information architecture, interaction design, and user research

Blue FlavorNick Finck

‣ BlueFlavor.com

‣ NickFinck.com

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 TimesJenna Worthham May 13, 2010

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

The iPad reached more than one million units sold in half the

time it took the iPhone

Yahoo NewsBen 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 LawWikipedia

“

Not so good

Way better

Optimized Markup

digital-web.comScreen 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

NYTimes.comMinimum 30 Seconds to lo load 796kbplus requests to multiple servers

NY Times on LeafletMaximum of 7 seconds to lo load 30kb

http://nytimes.com http://app.getleaflets.com/nyt/

Non-optimized header markup

Highly optimized header markup

Optimized UI

Non-optimized UI

Highly optimized UI

A Deep Dive into Mobile Web

Content

Readability & Page Width

The problem

Unreadable

Must zoom

UnreadableAgain

Text does not fit within screen

Possible solutions

Readablewithoutzooming

Fits perfectly within screen

Readablewithoutzooming

Text fits on screen

Interaction

Navigation

The problem

Navigation

Hotspots visible & clickable only after zoomed 10x

Content issomewhere way the fuck up here

Navigationcould havelargerhotspots

Microscopichotspots

Barelynavigable

Possible solutions

Navigationalong sidethe content

Nice bigand juicy hotspots

Super sizehotspots

Visuallycalled outnavigation

Use largerheadings &visual hints

Pagination

The problem

The world’ssmallestpagination

A possible solution

Excellentpaginationsolution

Search

The problem

A possible solution

A perfectcase forsearch ahead

Buttons

The problem

Very typicalweb button

Possible solutions

Big ass buttons!

555-5555

Designedwith thespecificcontext inmind

Calls to Action

The problem

Calls to action are lost in page

A possible solution

Make calls to actionvery obvious

?What is Next?

LegoAugmented Reality Kiosk

ToyotaAugmented Reality Advertisement

ARhrrrrAugmented Reality Game

InsqribeLocation Based Augmented Reality

Nintendo WiiMotion based gaming

Microsoft SurfaceSurface-based computing

Microsoft’s Project NatalController-less Interface

Minority Report20th Century Fox

Oblong's g-speakSpatial Operating Environment

Sixth SenseWearable Gestural Interface

We have just barely begun to understand

the potential of the Web

Thank you!

?Questions

WebVisions 2010 - Portland, Oregon

Mobile Web UXNick Fincknick@blueflavor.comBlue Flavor - http://blueflavor.comPersonal - http://nickfinck.com