User Interaction: it's the little things that are a website's best assets for gaining a positive and memorable user experience. This presentation will focus on trends and best practices in design and development conventions for user controls and how they affect the user experience—negatively or positively. Through the course of the session, we will discover various problems affecting smooth user interaction. Then I will identify ways to enhance controls and layouts in order to both speed up required user tasks and make them easier to use.

1. It’s the Little Things
Paul Armstrong
Monday, April 6, 2009

2. (this is where I talk about me)
Monday, April 6, 2009

3. National Center for Supercomputing Applications/University of Illinois Board of Trustees. (1993)
Monday, April 6, 2009

4. National Center for Supercomputing Applications/University of Illinois Board of Trustees. (1993)
Monday, April 6, 2009

5. ww.balhar.com
Monday, April 6, 2009

6. www.netdreams.co.uk
Monday, April 6, 2009

7. wefollow.com
Monday, April 6, 2009

8. www.legworkstudio.com
Monday, April 6, 2009

9. www.agamicreative.com
Monday, April 6, 2009

10. www.tutorial9.net
Monday, April 6, 2009

11. jbradforddillon.com
Monday, April 6, 2009

12. twistori.com
Monday, April 6, 2009

13. www.scribbls.com
Monday, April 6, 2009

14. What makes a great
user experience?
Monday, April 6, 2009

15. little things
Monday, April 6, 2009

16. But what are little things?
Monday, April 6, 2009

17. Little Bit Obvious
Monday, April 6, 2009

18. The Big Red Button
Monday, April 6, 2009

19. Real-Life Buttons
Monday, April 6, 2009

20. Real-Life Buttons
• Visually obvious
Monday, April 6, 2009

21. Real-Life Buttons
• Visually obvious
• Lockable/Toggle
Monday, April 6, 2009

22. Real-Life Buttons
• Visually obvious
• Lockable/Toggle
• Tactile Response
Monday, April 6, 2009

23. Real-Life Buttons
• Visually obvious
• Lockable/Toggle
• Tactile Response
• Backlight
Monday, April 6, 2009

24. CSS Pseudo Classes
• Visually obvious
• Lockable/Toggle
• Tactile Response
• Backlight
Monday, April 6, 2009

25. CSS Pseudo Classes
‣
• Visually obvious :link
• Lockable/Toggle
• Tactile Response
• Backlight
Monday, April 6, 2009

26. CSS Pseudo Classes
‣
• Visually obvious :link
‣
• Lockable/Toggle :visited
• Tactile Response
• Backlight
Monday, April 6, 2009

27. CSS Pseudo Classes
‣
• Visually obvious :link
‣
• Lockable/Toggle :visited
• ???
• Tactile Response
• Backlight
Monday, April 6, 2009

28. CSS Pseudo Classes
‣
• Visually obvious :link
‣
• Lockable/Toggle :visited
‣
• ??? :hover
• Tactile Response
• Backlight
Monday, April 6, 2009

29. CSS Pseudo Classes
‣
• Visually obvious :link
‣
• Lockable/Toggle :visited
‣
• ??? :hover
‣
• Tactile Response :active
• Backlight
Monday, April 6, 2009

30. CSS Pseudo Classes
‣
• Visually obvious :link
‣
• Lockable/Toggle :visited
‣
• ??? :hover
‣
• Tactile Response :active
‣
• Backlight :focus
Monday, April 6, 2009

31. :link
Monday, April 6, 2009

32. :visited
Monday, April 6, 2009

33. :hover
Monday, April 6, 2009

34. :hover
Monday, April 6, 2009

35. :active
Monday, April 6, 2009

36. :active
Monday, April 6, 2009

37. :focus
Monday, April 6, 2009

38. Guiding The Pen
Monday, April 6, 2009

39. Make it Stupid Simple
Monday, April 6, 2009

40. twitter.com/devices
Monday, April 6, 2009

41. twitter.com/devices
Monday, April 6, 2009

42. Entering Dates
Monday, April 6, 2009

43. Entering Dates
Monday, April 6, 2009

44. Human Readable: Datejs
Monday, April 6, 2009

45. Human Readable: Datejs
Monday, April 6, 2009

46. Human Readable: Datejs
Monday, April 6, 2009

47. Human Readable: Datejs
Monday, April 6, 2009

48. Human Readable: Datejs
Monday, April 6, 2009

49. Human Readable: Datejs
Monday, April 6, 2009

50. Human Readable: Datejs
Monday, April 6, 2009

51. Human Readable: Datejs
Monday, April 6, 2009

52. Human Readable: Datejs
Monday, April 6, 2009

53. Human Readable: Datejs
Monday, April 6, 2009

54. Calendar
Monday, April 6, 2009

55. jQuery UI Datepicker
Monday, April 6, 2009

56. jQuery UI Datepicker
Monday, April 6, 2009

57. Monday, April 6, 2009

58. $('input.date').datepicker();
Monday, April 6, 2009

59. Literal Guides
Monday, April 6, 2009

60. scribbls.com/home/editsettings
Monday, April 6, 2009

61. scribbls.com/users/Paul-3
Monday, April 6, 2009

62. scribbls.com/home/editsettings
Monday, April 6, 2009

63. Login Forms
Monday, April 6, 2009

64. starz.com/register
Monday, April 6, 2009

65. digg.com/login
Monday, April 6, 2009

66. scribbls.com/login
Monday, April 6, 2009

67. starz.com/schedule
Monday, April 6, 2009

68. digg.com
Monday, April 6, 2009

69. scribbls.com/new
Monday, April 6, 2009

70. Captcha is Hard
Monday, April 6, 2009

71. amazon.com
Monday, April 6, 2009

72. amazon.com
Monday, April 6, 2009

73. amazon.com
Monday, April 6, 2009

74. amazon.com
Monday, April 6, 2009

75. Label Position
Monday, April 6, 2009

76. Monday, April 6, 2009

77. Labels: Left of Inputs
uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Monday, April 6, 2009

78. Labels: Left of Inputs
uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Monday, April 6, 2009

79. Labels: Left of Inputs
• More visual interaction
uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Monday, April 6, 2009

80. Labels: Left of Inputs
• More visual interaction
• More time consuming
uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Monday, April 6, 2009

81. Labels: Right Aligned
uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Monday, April 6, 2009

82. Labels: Right Aligned
uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Monday, April 6, 2009

83. Labels: Right Aligned
• Less eye movement
uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Monday, April 6, 2009

84. Labels: Right Aligned
• Less eye movement
• Faster completion time
uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Monday, April 6, 2009

85. Labels: Above Inputs
uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Monday, April 6, 2009

86. Labels: Above Inputs
uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Monday, April 6, 2009

87. Labels: Above Inputs
• Fastest completion times
uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Monday, April 6, 2009

88. Labels: Above Inputs
• Fastest completion times
• Single Eye Movement
uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Monday, April 6, 2009

89. Errors Are Inevitable
Monday, April 6, 2009

90. Don’t Panic
Monday, April 6, 2009

91. Don’t Panic
Monday, April 6, 2009

92. www.facebook.com/pages/create.php
Monday, April 6, 2009

93. www.facebook.com/pages/create.php
Monday, April 6, 2009

94. www.facebook.com/pages/create.php
Monday, April 6, 2009

95. www.facebook.com/pages/create.php
Monday, April 6, 2009

96. www.facebook.com/pages/create.php
Monday, April 6, 2009

97. www.facebook.com/pages/create.php
Monday, April 6, 2009

98. edit.yahoo.com/registration
Monday, April 6, 2009

99. Pages
Monday, April 6, 2009

100. Pages
• 401 Unauthorized
Monday, April 6, 2009

101. Pages
• 401 Unauthorized
• 403 Forbidden
Monday, April 6, 2009

102. Pages
• 401 Unauthorized
• 403 Forbidden
• 404 Not Found
Monday, April 6, 2009

103. Pages
• 401 Unauthorized
• 403 Forbidden
• 404 Not Found
• 500 Internal Server Error
Monday, April 6, 2009

104. Pages
• 401 Unauthorized
• 403 Forbidden
• 404 Not Found
• 500 Internal Server Error
• 503 Service Unavailable
Monday, April 6, 2009

105. twitter.com/503
Monday, April 6, 2009

106. Defaults Suck
Monday, April 6, 2009

107. IIS Default 404
Monday, April 6, 2009

108. Apache Default 404
Monday, April 6, 2009

109. A Better 404
Monday, April 6, 2009

110. jpmullan.com/error/
Monday, April 6, 2009

111. scribbls.com/error/
Monday, April 6, 2009

112. technorati.com/404
Monday, April 6, 2009

113. Google AJAX Search API
code.google.com/apis/ajaxsearch/web.html
Monday, April 6, 2009

114. paularmstrongdesigns.com/error/
Monday, April 6, 2009

115. http://domain.com/foo/bar
Monday, April 6, 2009

116. http://domain.com/foo/bar
Monday, April 6, 2009

117. http://domain.com/foo/bar
Search for “foo OR bar”
Monday, April 6, 2009

118. var s = new google.search.SearchControl();
s.execute('foo OR bar');
Monday, April 6, 2009

119. Big Little Basics
Monday, April 6, 2009

120. Big Little Basics
Monday, April 6, 2009

121. Big Little Basics
Monday, April 6, 2009

122. Big Little Basics
Monday, April 6, 2009

123. Little Advanced Things
Monday, April 6, 2009

124. File Upload
Monday, April 6, 2009

125. File Upload
Monday, April 6, 2009

126. Animation
Monday, April 6, 2009

127. www.panic.com/coda/
Monday, April 6, 2009

128. www.panic.com/coda/
Monday, April 6, 2009

129. tobielangel.com/examples/auto-scrolling-page-navigation
Monday, April 6, 2009

130. tobielangel.com/examples/auto-scrolling-page-navigation
Monday, April 6, 2009

131. immediaretail.com
Monday, April 6, 2009

132. immediaretail.com
Monday, April 6, 2009

133. bbc.co.uk
Monday, April 6, 2009

134. bbc.co.uk
Monday, April 6, 2009

135. verde7.com
Monday, April 6, 2009

136. verde7.com
Monday, April 6, 2009

137. Plan Everything
Monday, April 6, 2009

138. Questions?
Monday, April 6, 2009

139. Questions?
@paularmstrong
paul@paularmstrongdesigns.com
http://paularmstrongdesigns.com
Monday, April 6, 2009