Web Application Usability

1. Ryan Singer
37signals

2. How to craft clear
user interfaces

3. Usability?

4. “Usable” is not a
compliment

5. Clear
Easy
Fast
Fun
Good

6. The interface is our
product

7. 1. Screens
2. Flow
3. Language

8. 1. Screens
2. Flow
3. Language

11. Edward Tufte

13. Strong
Normal
Weak

14. Headline
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit
amet, consectetur
adipisicing elit, sed do eiusmod tempor
adipisicing elit, sed do
incididunt ut labore et dolore magna eiusmod tempor
aliqua. Ut enim ad minim veniam, quis incididunt ut labore et
dolore magna aliqua. Ut
nostrud exercitation ullamco laboris nisi
enim ad minim veniam,
ut aliquip ex ea commodo consequat. quis nostrud
Duis aute irure dolor in reprehenderit in exercitation ullamco
On Time On Time LATE On Time

15. Headline
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit
amet, consectetur
adipisicing elit, sed do eiusmod tempor
adipisicing elit, sed do
incididunt ut labore et dolore magna eiusmod tempor
aliqua. Ut enim ad minim veniam, quis incididunt ut labore et
dolore magna aliqua. Ut
nostrud exercitation ullamco laboris nisi
enim ad minim veniam,
ut aliquip ex ea commodo consequat. quis nostrud
Duis aute irure dolor in reprehenderit in exercitation ullamco
On Time On Time LATE On Time

16. Headline
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit
amet, consectetur
adipisicing elit, sed do eiusmod tempor
adipisicing elit, sed do
incididunt ut labore et dolore magna eiusmod tempor
aliqua. Ut enim ad minim veniam, quis incididunt ut labore et
dolore magna aliqua. Ut
nostrud exercitation ullamco laboris nisi
enim ad minim veniam,
ut aliquip ex ea commodo consequat. quis nostrud
Duis aute irure dolor in reprehenderit in exercitation ullamco
On Time On Time LATE On Time

17. Headline
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit
amet, consectetur
adipisicing elit, sed do eiusmod tempor
adipisicing elit, sed do
incididunt ut labore et dolore magna eiusmod tempor
aliqua. Ut enim ad minim veniam, quis incididunt ut labore et
dolore magna aliqua. Ut
nostrud exercitation ullamco laboris nisi
enim ad minim veniam,
ut aliquip ex ea commodo consequat. quis nostrud
Duis aute irure dolor in reprehenderit in exercitation ullamco
On Time On Time LATE On Time

18. Consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed Lorem ipsum dolor sit
amet, consectetur
do eiusmod tempor incididunt ut labore et dolore magna adipisicing elit, sed do
aliqua. Ut enim ad minim veniam, quis nostrud exercitation eiusmod tempor
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis incididunt ut labore et
dolore magna aliqua.
aute irure dolor in reprehenderit in voluptate velit esse cillum Ut enim ad minim
dolore eu fugiat nulla pariatur. Excepteur sint occaecat veniam, quis nostrud
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum
On Time On Time LATE On Time
Ullamco
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Lorem ipsum dolor sit
amet, consectetur
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut adipisicing elit, sed do
enim ad minim veniam, quis nostrud exercitation ullamco laboris eiusmod tempor
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in incididunt ut labore et
dolore magna aliqua.
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla Ut enim ad minim
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in veniam, quis nostrud
culpa qui officia deserunt mollit anim id est laborum
LATE On Time On Time On Time

19. Consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed Lorem ipsum dolor sit
amet, consectetur
do eiusmod tempor incididunt ut labore et dolore magna adipisicing elit, sed do
aliqua. Ut enim ad minim veniam, quis nostrud exercitation eiusmod tempor
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis incididunt ut labore et
dolore magna aliqua.
aute irure dolor in reprehenderit in voluptate velit esse cillum Ut enim ad minim
dolore eu fugiat nulla pariatur. Excepteur sint occaecat veniam, quis nostrud
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum
On Time On Time LATE On Time
Ullamco
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Lorem ipsum dolor sit
amet, consectetur
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut adipisicing elit, sed do
enim ad minim veniam, quis nostrud exercitation ullamco laboris eiusmod tempor
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in incididunt ut labore et
dolore magna aliqua.
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla Ut enim ad minim
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in veniam, quis nostrud
culpa qui officia deserunt mollit anim id est laborum
LATE On Time On Time On Time

20. Consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed Lorem ipsum dolor sit
amet, consectetur
do eiusmod tempor incididunt ut labore et dolore magna adipisicing elit, sed do
aliqua. Ut enim ad minim veniam, quis nostrud exercitation eiusmod tempor
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis incididunt ut labore et
dolore magna aliqua.
aute irure dolor in reprehenderit in voluptate velit esse cillum Ut enim ad minim
dolore eu fugiat nulla pariatur. Excepteur sint occaecat veniam, quis nostrud
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum
On Time On Time LATE On Time
Ullamco
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Lorem ipsum dolor sit
amet, consectetur
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut adipisicing elit, sed do
enim ad minim veniam, quis nostrud exercitation ullamco laboris eiusmod tempor
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in incididunt ut labore et
dolore magna aliqua.
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla Ut enim ad minim
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in veniam, quis nostrud
culpa qui officia deserunt mollit anim id est laborum
LATE On Time On Time On Time

21. Consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed Lorem ipsum dolor sit
amet, consectetur
do eiusmod tempor incididunt ut labore et dolore magna adipisicing elit, sed do
aliqua. Ut enim ad minim veniam, quis nostrud exercitation eiusmod tempor
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis incididunt ut labore et
dolore magna aliqua.
aute irure dolor in reprehenderit in voluptate velit esse cillum Ut enim ad minim
dolore eu fugiat nulla pariatur. Excepteur sint occaecat veniam, quis nostrud
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum
On Time On Time LATE On Time
Ullamco
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Lorem ipsum dolor sit
amet, consectetur
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut adipisicing elit, sed do
enim ad minim veniam, quis nostrud exercitation ullamco laboris eiusmod tempor
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in incididunt ut labore et
dolore magna aliqua.
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla Ut enim ad minim
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in veniam, quis nostrud
culpa qui officia deserunt mollit anim id est laborum
LATE On Time On Time On Time

22. Consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed Lorem ipsum dolor sit
amet, consectetur
do eiusmod tempor incididunt ut labore et dolore magna adipisicing elit, sed do
aliqua. Ut enim ad minim veniam, quis nostrud exercitation eiusmod tempor
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis incididunt ut labore et
dolore magna aliqua.
aute irure dolor in reprehenderit in voluptate velit esse cillum Ut enim ad minim
dolore eu fugiat nulla pariatur. Excepteur sint occaecat veniam, quis nostrud
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum
On Time On Time LATE On Time
Ullamco
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Lorem ipsum dolor sit
amet, consectetur
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut adipisicing elit, sed do
enim ad minim veniam, quis nostrud exercitation ullamco laboris eiusmod tempor
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in incididunt ut labore et
dolore magna aliqua.
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla Ut enim ad minim
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in veniam, quis nostrud
culpa qui officia deserunt mollit anim id est laborum
LATE On Time On Time On Time

23. Consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed Lorem ipsum dolor sit
amet, consectetur
do eiusmod tempor incididunt ut labore et dolore magna adipisicing elit, sed do
aliqua. Ut enim ad minim veniam, quis nostrud exercitation eiusmod tempor
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis incididunt ut labore et
dolore magna aliqua.
aute irure dolor in reprehenderit in voluptate velit esse cillum Ut enim ad minim
dolore eu fugiat nulla pariatur. Excepteur sint occaecat veniam, quis nostrud
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum
On Time On Time LATE On Time
Ullamco
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Lorem ipsum dolor sit
amet, consectetur
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut adipisicing elit, sed do
enim ad minim veniam, quis nostrud exercitation ullamco laboris eiusmod tempor
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in incididunt ut labore et
dolore magna aliqua.
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla Ut enim ad minim
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in veniam, quis nostrud
culpa qui officia deserunt mollit anim id est laborum
LATE On Time On Time On Time

25. 1 2 3
5 6 7
9 10 11

26. 1 2 3
5 6 7
9 10 11

27. Add a new person
Add a new company
Import from vCard, Basecamp, Outlook
Export to vCard, Excel

29. Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without written permission of 37signals. http://www.37signals.com

30. 1. Decide what matters
2. Make that pop out
3. Make everything else
fade back

31. 1. Screens
2. Flow
3. Language

32. Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without written permission of 37signals. http://www.37signals.com

33. Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without written permission of 37signals. http://www.37signals.com

34. Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without written permission of 37signals. http://www.37signals.com

35. Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without written permission of 37signals. http://www.37signals.com

36. Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without written permission of 37signals. http://www.37signals.com

37. Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without written permission of 37signals. http://www.37signals.com

38. Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without written permission of 37signals. http://www.37signals.com

39. Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without written permission of 37signals. http://www.37signals.com

40. 1. Screens
2. Flow
3. Language

41. Interface design is
copywriting

42. Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without written permission of 37signals. http://www.37signals.com

43. Speak your user’s
language.

44. Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without written permission of 37signals. http://www.37signals.com

45. Talk like a human

48. Long labels are OK

49. How often do you
really “submit”
something?

50. 1. Screens
2. Flow
3. Language

51. Be opinionated and
decide what matters

52. Emphasize the
important elements
and de-emphasize the
unimportant ones

53. Walk through every
process to smooth out
bumps and potholes

54. Write the best words
to communicate the
clearest concepts

55. 1. Prioritize what’s important
2. Emphasize and de-emphasize
3. Smooth out the flow
4. Clarify your language

56. Thank you!
Questions?