Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Mobile Web UX Nick Finck May 20, 2010 WebVisions 2010 - Portland, Oregon
? Who the f#@k is this dude?
Nick Finck Blue Flavor ‣ Principal & Director of User Experience ...
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 Times Jenna Worthham May 13, 2010
Photo by Rion Nakaya http://www.flickr.com/photos/rion/47437262/
The iPad reached more than one million units sold in half the time it took the iPhone Yahoo News Ben Pat...
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...
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 somewhere way the fuck up here
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
The 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
Big ass buttons!
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?
Lego Augmented Reality Kiosk
Toyota Augmented Reality Advertisement
ARhrrrr Augmented Reality Game
Insqribe Location Based Augmented Reality
Nintendo Wii Motion based gaming
Microsoft Surface Surface-based computing
Microsoft’s Project Natal Controller-less Interface
Minority Report 20th Century Fox
Oblong's g-speak Spatial Operating Environment
Sixth Sense Wearable Gestural Interface
We have just barely begun to understand the potential of the Web
Thank you!
? Questions
Mobile Web UX Nick Finck nick@blueflavor.com Blue Flavor - http://blueflavor.com Personal - http://nickfinck.com ...
Mobile Web User Experience
Mobile Web User Experience
Mobile Web User Experience
Mobile Web User Experience
Mobile Web User Experience
Mobile Web User Experience
Mobile Web User Experience
Mobile Web User Experience
Mobile Web User Experience
Mobile Web User Experience
Mobile Web User Experience
Mobile Web User Experience
Nächste SlideShare
Wird geladen in …5
×

Mobile Web User Experience

4.179 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Bildung, Technologie, Business
no profile picture user

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Mehr anzeigen

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

×