Mobile User ExperienceNick FinckAugust 18, 2010                         Refresh Bellingham
?Who the f#@kis this dude?
Nick Finck                   Blue Flavor                   ‣ Principal & Director of User Experience                   ‣ O...
Outline‣ Some bullshit about me‣ Re-thinking computing‣ Some technical examples‣ A deep dive into mobile‣ Really cool shit
The way we thinkabout computing
A mobile phone is now  used more for data than     actual phone callsNew York TimesJenna Worthham May 13, 2010
Photo by Rion Nakayahttp://www.flickr.com/photos/rion/47437262/
The iPad reached     more than one million       units sold in half the     time it took the iPhoneYahoo NewsBen Patterson...
We need to change the way we think  about the Web
The User Experience     of Mobile
The is no One Web
There are many  contexts
Mobile should not be first
Lets Get Technical!
Fitts’s Law
“ In ergonomics, Fittss law is a model of  human movement which predicts the time  required to rapidly move to a target ar...
Not so goodWay better
Optimized Markup
digital-web.comScreen based CSS & Print based CSS
Developing for the Mobile Context• XHTML  ✓ Well formed  ✓ Semantically correct  ✓ Highly optimized• CSS  ✓ Handheld media...
http://nytimes.com                    http://app.getleaflets.com/nyt/NYTimes.com                           NY Times on Leafl...
Highly optimized header markupNon-optimized header markup
Optimized UI
Highly optimized UINon-optimized UI
A Deep Dive into Mobile Web
Content
Readability & Page Width
The problem
UnreadableMust zoom
UnreadableAgain
Text does not fit within screen
Possible solutions
Readablewithoutzooming           Fits perfectly within screen
Readable                     without                     zoomingText fits on screen
Interaction
Navigation
The problem
Navigation
Hotspots visible & clickable     only after zoomed 10x
Content issomewhere waythe fuck up here
Navigationcould havelargerhotspots
Microscopichotspots
Barelynavigable
Possible solutions
Navigationalong sidethe content
Nice bigand juicyhotspots
Super size hotspots
Visuallycalled outnavigation
Use largerheadings &visual hints
Pagination
The problem
The world’ssmallestpagination
A possible solution
Excellentpaginationsolution
Search
The problem
A possible solution
A perfectcase forsearch ahead
Buttons
The problem
Very typicalweb button
Possible solutions
Big ass buttons!
Designedwith thespecific      555-5555context inmind
Calls to Action
The problem
Calls toaction arelost in page
A possible solution
Make callsto actionvery obvious
?What is Next?
LegoAugmented Reality Kiosk
ToyotaAugmented Reality Advertisement
ARhrrrrAugmented Reality Game
InsqribeLocation Based Augmented Reality
Nintendo WiiMotion based gaming
Microsoft SurfaceSurface-based computing
Microsoft’s Project NatalController-less Interface
Minority Report20th Century Fox
Oblongs g-speakSpatial Operating Environment
Sixth SenseWearable Gestural Interface
We have just barely begun to understandthe potential of Mobile
Thank you!
?Questions
Mobile User ExperienceNick Fincknick@blueflavor.comBlue Flavor - http://blueflavor.comPersonal - http://nickfinck.com        ...
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Upcoming SlideShare
Loading in …5
×

Mobile UX

3,538 views
3,411 views

Published on

A 45 minute presentation I did for Refresh Bellingham on Mobile User Experience.

1 Comment
13 Likes
Statistics
Notes
No Downloads
Views
Total views
3,538
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
104
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

Mobile UX

  1. 1. Mobile User ExperienceNick FinckAugust 18, 2010 Refresh Bellingham
  2. 2. ?Who the f#@kis 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, Fandango, 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 ‣ Founder of Digital Web Magazine‣ Google “Nick” ‣ Expertise in information architecture, interaction design, and user research
  4. 4. Outline‣ Some bullshit about me‣ Re-thinking computing‣ Some technical examples‣ A deep dive into mobile‣ Really cool shit
  5. 5. The way we thinkabout computing
  6. 6. A mobile phone is now used more for data than actual phone callsNew York TimesJenna Worthham May 13, 2010
  7. 7. Photo by Rion Nakayahttp://www.flickr.com/photos/rion/47437262/
  8. 8. The iPad reached more than one million units sold in half the time it took the iPhoneYahoo NewsBen Patterson May 3, 2010
  9. 9. We need to change the way we think about the Web
  10. 10. The User Experience of Mobile
  11. 11. The is no One Web
  12. 12. There are many contexts
  13. 13. Mobile should not be first
  14. 14. Lets Get Technical!
  15. 15. Fitts’s Law
  16. 16. “ In ergonomics, Fittss 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 LawWikipedia
  17. 17. Not so goodWay better
  18. 18. Optimized Markup
  19. 19. digital-web.comScreen based CSS & Print based CSS
  20. 20. Developing for the Mobile Context• XHTML ✓ Well formed ✓ Semantically correct ✓ Highly optimized• CSS ✓ Handheld media type (sometimes even screen media type) ✓ Highly optimized
  21. 21. http://nytimes.com http://app.getleaflets.com/nyt/NYTimes.com NY Times on LeafletMinimum 30 Seconds to lo load 796kb Maximum of 7 seconds to lo load 30kbplus requests to multiple servers
  22. 22. Highly optimized header markupNon-optimized header markup
  23. 23. Optimized UI
  24. 24. Highly optimized UINon-optimized UI
  25. 25. A Deep Dive into Mobile Web
  26. 26. Content
  27. 27. Readability & Page Width
  28. 28. The problem
  29. 29. UnreadableMust zoom
  30. 30. UnreadableAgain
  31. 31. Text does not fit within screen
  32. 32. Possible solutions
  33. 33. Readablewithoutzooming Fits perfectly within screen
  34. 34. Readable without zoomingText fits on screen
  35. 35. Interaction
  36. 36. Navigation
  37. 37. The problem
  38. 38. Navigation
  39. 39. Hotspots visible & clickable only after zoomed 10x
  40. 40. Content issomewhere waythe fuck up here
  41. 41. Navigationcould havelargerhotspots
  42. 42. Microscopichotspots
  43. 43. Barelynavigable
  44. 44. Possible solutions
  45. 45. Navigationalong sidethe content
  46. 46. Nice bigand juicyhotspots
  47. 47. Super size hotspots
  48. 48. Visuallycalled outnavigation
  49. 49. Use largerheadings &visual hints
  50. 50. Pagination
  51. 51. The problem
  52. 52. The world’ssmallestpagination
  53. 53. A possible solution
  54. 54. Excellentpaginationsolution
  55. 55. Search
  56. 56. The problem
  57. 57. A possible solution
  58. 58. A perfectcase forsearch ahead
  59. 59. Buttons
  60. 60. The problem
  61. 61. Very typicalweb button
  62. 62. Possible solutions
  63. 63. Big ass buttons!
  64. 64. Designedwith thespecific 555-5555context inmind
  65. 65. Calls to Action
  66. 66. The problem
  67. 67. Calls toaction arelost in page
  68. 68. A possible solution
  69. 69. Make callsto actionvery obvious
  70. 70. ?What is Next?
  71. 71. LegoAugmented Reality Kiosk
  72. 72. ToyotaAugmented Reality Advertisement
  73. 73. ARhrrrrAugmented Reality Game
  74. 74. InsqribeLocation Based Augmented Reality
  75. 75. Nintendo WiiMotion based gaming
  76. 76. Microsoft SurfaceSurface-based computing
  77. 77. Microsoft’s Project NatalController-less Interface
  78. 78. Minority Report20th Century Fox
  79. 79. Oblongs g-speakSpatial Operating Environment
  80. 80. Sixth SenseWearable Gestural Interface
  81. 81. We have just barely begun to understandthe potential of Mobile
  82. 82. Thank you!
  83. 83. ?Questions
  84. 84. Mobile User ExperienceNick Fincknick@blueflavor.comBlue Flavor - http://blueflavor.comPersonal - http://nickfinck.com Refresh Bellingham

×