Download - Mobile Web User Experience
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 [email protected] Flavor - http://blueflavor.comPersonal - http://nickfinck.com
