Mobile Web User Experience
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Mobile Web User Experience

on

  • 4,574 views

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 ...

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.

Statistics

Views

Total Views
4,574
Views on SlideShare
4,570
Embed Views
4

Actions

Likes
7
Downloads
109
Comments
1

3 Embeds 4

http://us-w1.rockmelt.com 2
http://www.slideshare.net 1
http://twitter.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile Web User Experience Presentation Transcript

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