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.

1. Mobile UX
Nick Finck, November 12, 2009
Refresh Portland

5. The Mobile Web
Refresh Portland

6. Photo by Rion Nakaya
http://www.flickr.com/photos/rion/47437262/

7. A Quick Walkthru
Refresh Portland

9. Found Products

11. Oh Dear Gawd, a whole
section for cheese. Yes!

13. No Product List

16. Lets Get Technical!

17. Fitts’s Law

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

19. Not so good
Way better

20. Optimized Markup

21. digital-web.com
Screen based CSS & Print based CSS

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

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

24. Highly optimized header markup
Non-optimized header markup

25. Optimized UI

26. Highly optimized UI
Non-optimized UI

27. A Deep Dive into Mobile Web

28. Content

29. Readability & Page Width

30. 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
way above
navigation

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. World’s
smallest
pagination

56. A possible solution

57. Excellent
pagination
solution

58. Search

59. The problem

61. A possible solution

62. A perfect
case for
search ahead

63. Buttons

64. The problem

65. Very typical
web button

66. Possible solutions

67. Large juicy
buttons for
easy clicking

68. Designed
with the
specific 555-5555
context in
mind

69. Calls to Action

70. The problem

71. Calls to
action are
lost in page

72. A possible solution

73. Make calls
to action
very obvious

74. ?
What is Next?
Refresh Portland

75. Augmented Reality with Location Based Services

76. Augmented Reality with Visual Recognition

78. Nintendo Wii

79. Microsoft’s Project Natal

80. Microsoft Surface

81. Oblong's g-speak
Spatial Operating Environment

82. Sixth Sense
Wearable Gestural Interface

84. Thank you!
Refresh Portland

85. ?
Questions
Refresh Portland

86. Mobile UX
Nick Finck
nick@blueflavor.com
Blue Flavor - http://blueflavor.com
Personal - http://nickfinck.com
Refresh Portland