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 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
Nächste SlideShare
Wird geladen in …5
×

Mobile UX

8.885 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Bildung, Technologie, Unterhaltung & Humor
no profile picture user

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Mehr anzeigen

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

×