It’s the Little Things
                               Paul Armstrong




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

Monday, April 6, 2009
National Center for Supercomputing Applications/University of Illinois Board of Trustees. (1993)
Monday, April 6, 2009
National Center for Supercomputing Applications/University of Illinois Board of Trustees. (1993)
Monday, April 6, 2009
ww.balhar.com
Monday, April 6, 2009
www.netdreams.co.uk
Monday, April 6, 2009
wefollow.com
Monday, April 6, 2009
www.legworkstudio.com
Monday, April 6, 2009
www.agamicreative.com
Monday, April 6, 2009
www.tutorial9.net
Monday, April 6, 2009
jbradforddillon.com
Monday, April 6, 2009
twistori.com
Monday, April 6, 2009
www.scribbls.com
Monday, April 6, 2009
What makes a great
                         user experience?


Monday, April 6, 2009
little things




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




Monday, April 6, 2009
Little Bit Obvious



Monday, April 6, 2009
The Big Red Button
Monday, April 6, 2009
Real-Life Buttons




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




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




Monday, April 6, 2009
Real-Life Buttons
                 • Visually obvious
                 • Lockable/Toggle
                 • Tactile Respon...
Real-Life Buttons
                 • Visually obvious
                 • Lockable/Toggle
                 • Tactile Respon...
CSS Pseudo Classes
                 • Visually obvious
                 • Lockable/Toggle
                 • Tactile Respo...
CSS Pseudo Classes
                                      ‣
                 • Visually obvious       :link

              ...
CSS Pseudo Classes
                                      ‣
                 • Visually obvious       :link

              ...
CSS Pseudo Classes
                                      ‣
                 • Visually obvious       :link

              ...
CSS Pseudo Classes
                                      ‣
                 • Visually obvious       :link

              ...
CSS Pseudo Classes
                                      ‣
                 • Visually obvious       :link

              ...
CSS Pseudo Classes
                                      ‣
                 • Visually obvious       :link

              ...
:link
Monday, April 6, 2009
:visited
Monday, April 6, 2009
:hover
Monday, April 6, 2009
:hover
Monday, April 6, 2009
:active
Monday, April 6, 2009
:active
Monday, April 6, 2009
:focus
Monday, April 6, 2009
Guiding The Pen
Monday, April 6, 2009
Make it Stupid Simple



Monday, April 6, 2009
twitter.com/devices
Monday, April 6, 2009
twitter.com/devices
Monday, April 6, 2009
Entering Dates
Monday, April 6, 2009
Entering Dates
Monday, April 6, 2009
Human Readable: Datejs
Monday, April 6, 2009
Human Readable: Datejs
Monday, April 6, 2009
Human Readable: Datejs
Monday, April 6, 2009
Human Readable: Datejs
Monday, April 6, 2009
Human Readable: Datejs
Monday, April 6, 2009
Human Readable: Datejs
Monday, April 6, 2009
Human Readable: Datejs
Monday, April 6, 2009
Human Readable: Datejs
Monday, April 6, 2009
Human Readable: Datejs
Monday, April 6, 2009
Human Readable: Datejs
Monday, April 6, 2009
Calendar
Monday, April 6, 2009
jQuery UI Datepicker
Monday, April 6, 2009
jQuery UI Datepicker
Monday, April 6, 2009
Monday, April 6, 2009
$('input.date').datepicker();




Monday, April 6, 2009
Literal Guides



Monday, April 6, 2009
scribbls.com/home/editsettings
Monday, April 6, 2009
scribbls.com/users/Paul-3
Monday, April 6, 2009
scribbls.com/home/editsettings
Monday, April 6, 2009
Login Forms



Monday, April 6, 2009
starz.com/register
Monday, April 6, 2009
digg.com/login
Monday, April 6, 2009
scribbls.com/login
Monday, April 6, 2009
starz.com/schedule
Monday, April 6, 2009
digg.com
Monday, April 6, 2009
scribbls.com/new
Monday, April 6, 2009
Captcha is Hard



Monday, April 6, 2009
amazon.com
Monday, April 6, 2009
amazon.com
Monday, April 6, 2009
amazon.com
Monday, April 6, 2009
amazon.com
Monday, April 6, 2009
Label Position



Monday, April 6, 2009
Monday, April 6, 2009
Labels: Left of Inputs




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




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


                        • More visual interaction




uxmatters.com/mt/archives/2006/07/label-pla...
Labels: Left of Inputs


                        • More visual interaction
                        • More time consuming

...
Labels: Right Aligned




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




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


                        • Less eye movement




uxmatters.com/mt/archives/2006/07/label-placement-...
Labels: Right Aligned


                        • Less eye movement
                        • Faster completion time



ux...
Labels: Above Inputs




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




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


                        • Fastest completion times




uxmatters.com/mt/archives/2006/07/label-plac...
Labels: Above Inputs


                        • Fastest completion times
                        • Single Eye Movement


...
Errors Are Inevitable



Monday, April 6, 2009
Don’t Panic
Monday, April 6, 2009
Don’t Panic
Monday, April 6, 2009
www.facebook.com/pages/create.php
Monday, April 6, 2009
www.facebook.com/pages/create.php
Monday, April 6, 2009
www.facebook.com/pages/create.php
Monday, April 6, 2009
www.facebook.com/pages/create.php
Monday, April 6, 2009
www.facebook.com/pages/create.php
Monday, April 6, 2009
www.facebook.com/pages/create.php
Monday, April 6, 2009
edit.yahoo.com/registration
Monday, April 6, 2009
Pages




Monday, April 6, 2009
Pages

                        • 401 Unauthorized




Monday, April 6, 2009
Pages

                        • 401 Unauthorized
                        • 403 Forbidden




Monday, April 6, 2009
Pages

                        • 401 Unauthorized
                        • 403 Forbidden
                        • 404 No...
Pages

                        • 401 Unauthorized
                        • 403 Forbidden
                        • 404 No...
Pages

                        • 401 Unauthorized
                        • 403 Forbidden
                        • 404 No...
twitter.com/503
Monday, April 6, 2009
Defaults Suck



Monday, April 6, 2009
IIS Default 404
Monday, April 6, 2009
Apache Default 404
Monday, April 6, 2009
A Better 404



Monday, April 6, 2009
jpmullan.com/error/
Monday, April 6, 2009
scribbls.com/error/
Monday, April 6, 2009
technorati.com/404
Monday, April 6, 2009
Google AJAX Search API



code.google.com/apis/ajaxsearch/web.html
Monday, April 6, 2009
paularmstrongdesigns.com/error/
Monday, April 6, 2009
http://domain.com/foo/bar




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




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

                         Search for “foo OR bar”




Monday, April 6, 2009
var s = new google.search.SearchControl();

   s.execute('foo OR bar');




Monday, April 6, 2009
Big Little Basics




Monday, April 6, 2009
Big Little Basics




Monday, April 6, 2009
Big Little Basics




Monday, April 6, 2009
Big Little Basics




Monday, April 6, 2009
Little Advanced Things



Monday, April 6, 2009
File Upload
Monday, April 6, 2009
File Upload
Monday, April 6, 2009
Animation



Monday, April 6, 2009
www.panic.com/coda/
Monday, April 6, 2009
www.panic.com/coda/
Monday, April 6, 2009
tobielangel.com/examples/auto-scrolling-page-navigation
Monday, April 6, 2009
tobielangel.com/examples/auto-scrolling-page-navigation
Monday, April 6, 2009
immediaretail.com
Monday, April 6, 2009
immediaretail.com
Monday, April 6, 2009
bbc.co.uk
Monday, April 6, 2009
bbc.co.uk
Monday, April 6, 2009
verde7.com
Monday, April 6, 2009
verde7.com
Monday, April 6, 2009
Plan Everything



Monday, April 6, 2009
Questions?




Monday, April 6, 2009
Questions?
                        @paularmstrong



                        paul@paularmstrongdesigns.com



            ...
Upcoming SlideShare
Loading in …5
×

It's the Little Things

3,356 views
2,582 views

Published on

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.

Published in: Design, Technology, Education
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
3,356
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
2
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

It's the Little Things

  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

×