Mobile UX
86
Refresh Portland Mobile UX Nick Finck, November 12, 2009
-
Upload
nick-finck -
Category
Education
-
view
10.427 -
download
0
description
This is a presentation I did for Refresh Portland. It is a very high level look at the User Experience Design in the Mobile Web.This will be a crash course in mobile user experience design, are you ready? We will look at how the mobile context has evolved over the years and where it is headed. We’ll explore the differences between the web and the mobile web, why these differences are important, what the key user experience principals are for the mobile web ...oh yeah, and there will be plenty of examples for you to sink your teeth into. I will give you the information you need to design an optimal user experience for the mobile web as well as what decisions you will need to make along the way.
Transcript of Mobile UX
Refresh Portland
Mobile UXNick Finck, November 12, 2009
Refresh Portland
The Mobile Web
Photo by Rion Nakayahttp://www.flickr.com/photos/rion/47437262/
Refresh Portland
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
Refresh Portland
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 is way abovenavigation
Navigationcould havelargerhotspots
Microscopichotspots
Barelynavigable
Possible solutions
Navigationalong sidethe content
Nice bigand juicy hotspots
Super sizehotspots
Visuallycalled outnavigation
Use largerheadings &visual hints
Pagination
The problem
World’ssmallestpagination
A possible solution
Excellentpaginationsolution
Search
The problem
A possible solution
A perfectcase forsearch ahead
Buttons
The problem
Very typicalweb button
Possible solutions
Large juicybuttons foreasy clicking
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
Refresh Portland
?What is Next?
Augmented Reality with Location Based Services
Augmented Reality with Visual Recognition
Nintendo Wii
Microsoft’s Project Natal
Microsoft Surface
Sixth SenseWearable Gestural Interface
Refresh Portland
Thank you!
Refresh Portland
?Questions
Refresh Portland
Mobile UXNick [email protected] Flavor - http://blueflavor.comPersonal - http://nickfinck.com
