Mobile Web User Experience

3,774 views
3,643 views

Published on

How the mobile context has evolved over the years and where it is headed? In his session on “Mobile Web UX,” former WebVisions board member Nick Finck will 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.

Nick will also provide the information you’ll need to design an optimal user experience for the mobile web, and alert you to the decisions you will need to make along the way.

Published in: Education, Technology, Business
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
3,774
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
111
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Mobile Web User Experience

  1. 1. Mobile Web UX Nick Finck May 20, 2010 WebVisions 2010 - Portland, Oregon
  2. 2. ? Who the f#@k is this dude?
  3. 3. Nick Finck Blue Flavor ‣ 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 ‣ 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
  4. 4. Outline ‣ Some bullshit about me ‣ Re-thinking the web ‣ A quick story ‣ Some technical examples ‣ Really cool shit
  5. 5. The way we think about the Web
  6. 6. A mobile phone is now used more for data than actual phone calls New York Times Jenna Worthham May 13, 2010
  7. 7. Photo by Rion Nakaya http://www.flickr.com/photos/rion/47437262/
  8. 8. The iPad reached more than one million units sold in half the time it took the iPhone Yahoo News Ben Patterson May 3, 2010
  9. 9. We need to change the way we think about the Web
  10. 10. Mobile
  11. 11. the Mobile Web
  12. 12. The User Experience of the Mobile Web
  13. 13. A Quick Walkthru
  14. 14. Found Products
  15. 15. Oh Dear Gawd, a whole section for cheese. Yes!
  16. 16. No Product List
  17. 17. Lets Get Technical!
  18. 18. Fitts’s Law
  19. 19. “ 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
  20. 20. Not so good Way better
  21. 21. Optimized Markup
  22. 22. digital-web.com Screen based CSS & Print based CSS
  23. 23. Developing for the Mobile Context • XHTML ✓ Well formed ✓ Semantically correct ✓ Highly optimized • CSS ✓ Handheld media type (sometimes even screen media type) ✓ Highly optimized
  24. 24. 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
  25. 25. Highly optimized header markup Non-optimized header markup
  26. 26. Optimized UI
  27. 27. Highly optimized UI Non-optimized UI
  28. 28. A Deep Dive into Mobile Web
  29. 29. Content
  30. 30. Readability & Page Width
  31. 31. The problem
  32. 32. Unreadable Must zoom
  33. 33. Unreadable Again
  34. 34. Text does not fit within screen
  35. 35. Possible solutions
  36. 36. Readable without zooming Fits perfectly within screen
  37. 37. Readable without zooming Text fits on screen
  38. 38. Interaction
  39. 39. Navigation
  40. 40. The problem
  41. 41. Navigation
  42. 42. Hotspots visible & clickable only after zoomed 10x
  43. 43. Content is somewhere way the fuck up here
  44. 44. Navigation could have larger hotspots
  45. 45. Microscopic hotspots
  46. 46. Barely navigable
  47. 47. Possible solutions
  48. 48. Navigation along side the content
  49. 49. Nice big and juicy hotspots
  50. 50. Super size hotspots
  51. 51. Visually called out navigation
  52. 52. Use larger headings & visual hints
  53. 53. Pagination
  54. 54. The problem
  55. 55. The world’s smallest pagination
  56. 56. A possible solution
  57. 57. Excellent pagination solution
  58. 58. Search
  59. 59. The problem
  60. 60. A possible solution
  61. 61. A perfect case for search ahead
  62. 62. Buttons
  63. 63. The problem
  64. 64. Very typical web button
  65. 65. Possible solutions
  66. 66. Big ass buttons!
  67. 67. Designed with the specific 555-5555 context in mind
  68. 68. Calls to Action
  69. 69. The problem
  70. 70. Calls to action are lost in page
  71. 71. A possible solution
  72. 72. Make calls to action very obvious
  73. 73. ? What is Next?
  74. 74. Lego Augmented Reality Kiosk
  75. 75. Toyota Augmented Reality Advertisement
  76. 76. ARhrrrr Augmented Reality Game
  77. 77. Insqribe Location Based Augmented Reality
  78. 78. Nintendo Wii Motion based gaming
  79. 79. Microsoft Surface Surface-based computing
  80. 80. Microsoft’s Project Natal Controller-less Interface
  81. 81. Minority Report 20th Century Fox
  82. 82. Oblong's g-speak Spatial Operating Environment
  83. 83. Sixth Sense Wearable Gestural Interface
  84. 84. We have just barely begun to understand the potential of the Web
  85. 85. Thank you!
  86. 86. ? Questions
  87. 87. Mobile Web UX Nick Finck nick@blueflavor.com Blue Flavor - http://blueflavor.com Personal - http://nickfinck.com WebVisions 2010 - Portland, Oregon

×