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...
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
  ✓ Handhel...
http://nytimes.com                    http://app.getleaflets.com/nyt/




NYTimes.com                           NY Times on...
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




            ...
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Upcoming SlideShare
Loading in...5
×

Mobile UX

7,987

Published on

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.

3 Comments
51 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,987
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
359
Comments
3
Likes
51
Embeds 0
No embeds

No notes for slide

Mobile UX

  1. 1. Mobile UX Nick Finck, November 12, 2009 Refresh Portland
  2. 2. The Mobile Web Refresh Portland
  3. 3. Photo by Rion Nakaya http://www.flickr.com/photos/rion/47437262/
  4. 4. A Quick Walkthru Refresh Portland
  5. 5. Found Products
  6. 6. Oh Dear Gawd, a whole section for cheese. Yes!
  7. 7. No Product List
  8. 8. Lets Get Technical!
  9. 9. Fitts’s Law
  10. 10. “ 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
  11. 11. Not so good Way better
  12. 12. Optimized Markup
  13. 13. digital-web.com Screen based CSS & Print based CSS
  14. 14. 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
  15. 15. 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
  16. 16. Highly optimized header markup Non-optimized header markup
  17. 17. Optimized UI
  18. 18. Highly optimized UI Non-optimized UI
  19. 19. A Deep Dive into Mobile Web
  20. 20. Content
  21. 21. Readability & Page Width
  22. 22. The problem
  23. 23. Unreadable Must zoom
  24. 24. Unreadable Again
  25. 25. Text does not fit within screen
  26. 26. Possible solutions
  27. 27. Readable without zooming Fits perfectly within screen
  28. 28. Readable without zooming Text fits on screen
  29. 29. Interaction
  30. 30. Navigation
  31. 31. The problem
  32. 32. Navigation
  33. 33. Hotspots visible & clickable only after zoomed 10x
  34. 34. Content is way above navigation
  35. 35. Navigation could have larger hotspots
  36. 36. Microscopic hotspots
  37. 37. Barely navigable
  38. 38. Possible solutions
  39. 39. Navigation along side the content
  40. 40. Nice big and juicy hotspots
  41. 41. Super size hotspots
  42. 42. Visually called out navigation
  43. 43. Use larger headings & visual hints
  44. 44. Pagination
  45. 45. The problem
  46. 46. World’s smallest pagination
  47. 47. A possible solution
  48. 48. Excellent pagination solution
  49. 49. Search
  50. 50. The problem
  51. 51. A possible solution
  52. 52. A perfect case for search ahead
  53. 53. Buttons
  54. 54. The problem
  55. 55. Very typical web button
  56. 56. Possible solutions
  57. 57. Large juicy buttons for easy clicking
  58. 58. Designed with the specific 555-5555 context in mind
  59. 59. Calls to Action
  60. 60. The problem
  61. 61. Calls to action are lost in page
  62. 62. A possible solution
  63. 63. Make calls to action very obvious
  64. 64. ? What is Next? Refresh Portland
  65. 65. Augmented Reality with Location Based Services
  66. 66. Augmented Reality with Visual Recognition
  67. 67. Nintendo Wii
  68. 68. Microsoft’s Project Natal
  69. 69. Microsoft Surface
  70. 70. Oblong's g-speak Spatial Operating Environment
  71. 71. Sixth Sense Wearable Gestural Interface
  72. 72. Thank you! Refresh Portland
  73. 73. ? Questions Refresh Portland
  74. 74. Mobile UX Nick Finck nick@blueflavor.com Blue Flavor - http://blueflavor.com Personal - http://nickfinck.com Refresh Portland
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×