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.

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

9. A mobile phone is now
used more for data than
actual phone calls
New York Times
Jenna Worthham May 13, 2010

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

12. The iPad reached
more than one million
units sold in half the
time it took the iPhone
Yahoo News
Ben Patterson May 3, 2010

13. We need to change
the way we think
about the Web

14. Mobile

15. the Mobile Web

16. The User Experience
of the Mobile Web

17. A Quick Walkthru

19. Found Products

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

23. No Product List

26. Lets Get Technical!

27. Fitts’s Law

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

29. Not so good
Way better

30. Optimized Markup

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

32. Developing for the Mobile Context
• XHTML
✓ Well formed
✓ Semantically correct
✓ Highly optimized
• CSS
✓ Handheld media type (sometimes even screen media type)
✓ Highly optimized

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

34. Highly optimized header markup
Non-optimized header markup

35. Optimized UI

36. Highly optimized UI
Non-optimized UI

37. A Deep Dive into Mobile Web

38. Content

39. Readability & Page Width

40. The problem

42. Unreadable
Must zoom

43. Unreadable
Again

44. Text does not fit within screen

45. Possible solutions

46. Readable
without
zooming
Fits perfectly within screen

47. Readable
without
zooming
Text fits on screen

48. Interaction

49. Navigation

50. The problem

51. Navigation

52. Hotspots visible & clickable
only after zoomed 10x

53. Content is
somewhere way
the fuck up here

54. Navigation
could have
larger
hotspots

55. Microscopic
hotspots

56. Barely
navigable

57. Possible solutions

58. Navigation
along side
the content

59. Nice big
and juicy
hotspots

60. Super size
hotspots

61. Visually
called out
navigation

62. Use larger
headings &
visual hints

63. Pagination

64. The problem

65. The world’s
smallest
pagination

66. A possible solution

67. Excellent
pagination
solution

68. Search

69. The problem

71. A possible solution

72. A perfect
case for
search ahead

73. Buttons

74. The problem

75. Very typical
web button

76. Possible solutions

77. Big ass buttons!

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

79. Calls to Action

80. The problem

81. Calls to
action are
lost in page

82. A possible solution

83. Make calls
to action
very obvious

84. ?
What is Next?

86. Lego
Augmented Reality Kiosk

87. Toyota
Augmented Reality Advertisement

88. ARhrrrr
Augmented Reality Game

89. Insqribe
Location Based Augmented Reality

90. Nintendo Wii
Motion based gaming

91. Microsoft Surface
Surface-based computing

92. Microsoft’s Project Natal
Controller-less Interface

93. Minority Report
20th Century Fox

94. Oblong's g-speak
Spatial Operating Environment

95. Sixth Sense
Wearable Gestural Interface

96. We have just barely
begun to understand
the potential of the Web

97. Thank you!

98. ?
Questions

99. Mobile Web UX
Nick Finck
nick@blueflavor.com
Blue Flavor - http://blueflavor.com
Personal - http://nickfinck.com
WebVisions 2010 - Portland, Oregon