Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Mobile Web User Experience Slide 1 Mobile Web User Experience Slide 2 Mobile Web User Experience Slide 3 Mobile Web User Experience Slide 4 Mobile Web User Experience Slide 5 Mobile Web User Experience Slide 6 Mobile Web User Experience Slide 7 Mobile Web User Experience Slide 8 Mobile Web User Experience Slide 9 Mobile Web User Experience Slide 10 Mobile Web User Experience Slide 11 Mobile Web User Experience Slide 12 Mobile Web User Experience Slide 13 Mobile Web User Experience Slide 14 Mobile Web User Experience Slide 15 Mobile Web User Experience Slide 16 Mobile Web User Experience Slide 17 Mobile Web User Experience Slide 18 Mobile Web User Experience Slide 19 Mobile Web User Experience Slide 20 Mobile Web User Experience Slide 21 Mobile Web User Experience Slide 22 Mobile Web User Experience Slide 23 Mobile Web User Experience Slide 24 Mobile Web User Experience Slide 25 Mobile Web User Experience Slide 26 Mobile Web User Experience Slide 27 Mobile Web User Experience Slide 28 Mobile Web User Experience Slide 29 Mobile Web User Experience Slide 30 Mobile Web User Experience Slide 31 Mobile Web User Experience Slide 32 Mobile Web User Experience Slide 33 Mobile Web User Experience Slide 34 Mobile Web User Experience Slide 35 Mobile Web User Experience Slide 36 Mobile Web User Experience Slide 37 Mobile Web User Experience Slide 38 Mobile Web User Experience Slide 39 Mobile Web User Experience Slide 40 Mobile Web User Experience Slide 41 Mobile Web User Experience Slide 42 Mobile Web User Experience Slide 43 Mobile Web User Experience Slide 44 Mobile Web User Experience Slide 45 Mobile Web User Experience Slide 46 Mobile Web User Experience Slide 47 Mobile Web User Experience Slide 48 Mobile Web User Experience Slide 49 Mobile Web User Experience Slide 50 Mobile Web User Experience Slide 51 Mobile Web User Experience Slide 52 Mobile Web User Experience Slide 53 Mobile Web User Experience Slide 54 Mobile Web User Experience Slide 55 Mobile Web User Experience Slide 56 Mobile Web User Experience Slide 57 Mobile Web User Experience Slide 58 Mobile Web User Experience Slide 59 Mobile Web User Experience Slide 60 Mobile Web User Experience Slide 61 Mobile Web User Experience Slide 62 Mobile Web User Experience Slide 63 Mobile Web User Experience Slide 64 Mobile Web User Experience Slide 65 Mobile Web User Experience Slide 66 Mobile Web User Experience Slide 67 Mobile Web User Experience Slide 68 Mobile Web User Experience Slide 69 Mobile Web User Experience Slide 70 Mobile Web User Experience Slide 71 Mobile Web User Experience Slide 72 Mobile Web User Experience Slide 73 Mobile Web User Experience Slide 74 Mobile Web User Experience Slide 75 Mobile Web User Experience Slide 76 Mobile Web User Experience Slide 77 Mobile Web User Experience Slide 78 Mobile Web User Experience Slide 79 Mobile Web User Experience Slide 80 Mobile Web User Experience Slide 81 Mobile Web User Experience Slide 82 Mobile Web User Experience Slide 83 Mobile Web User Experience Slide 84 Mobile Web User Experience Slide 85 Mobile Web User Experience Slide 86 Mobile Web User Experience Slide 87 Mobile Web User Experience Slide 88 Mobile Web User Experience Slide 89 Mobile Web User Experience Slide 90 Mobile Web User Experience Slide 91 Mobile Web User Experience Slide 92 Mobile Web User Experience Slide 93 Mobile Web User Experience Slide 94 Mobile Web User Experience Slide 95 Mobile Web User Experience Slide 96 Mobile Web User Experience Slide 97 Mobile Web User Experience Slide 98 Mobile Web User Experience Slide 99
Upcoming SlideShare
Sustainable UX
Next
Download to read offline and view in fullscreen.

6 Likes

Share

Download to read offline

Mobile Web User Experience

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • networkself

    Sep. 7, 2014
  • syvn7154

    Jul. 23, 2013
  • platdujour

    Dec. 11, 2010
  • sachinbhavsar

    Jun. 22, 2010
  • cornchz

    Jun. 17, 2010
  • yeongmin

    Jun. 15, 2010

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.

Views

Total views

4,254

On Slideshare

0

From embeds

0

Number of embeds

6

Actions

Downloads

112

Shares

0

Comments

0

Likes

6

×