Your SlideShare is downloading. ×
0
Ryan Singer
 37signals
How to craft clear
user interfaces
Usability?
“Usable” is not a
  compliment
Clear
Easy
Fast
Fun
Good
The interface is our
      product
1. Screens
2. Flow
3. Language
1. Screens
2. Flow
3. Language
Edward Tufte
Strong
Normal
 Weak
Headline

Lorem ipsum dolor sit amet, consectetur        Lorem ipsum dolor sit
adipisicing elit, sed do eiusmod tempor    ...
Headline
Lorem ipsum dolor sit amet, consectetur        Lorem ipsum dolor sit
adipisicing elit, sed do eiusmod tempor     ...
Headline
Lorem ipsum dolor sit amet, consectetur        Lorem ipsum dolor sit
adipisicing elit, sed do eiusmod tempor     ...
Headline
Lorem ipsum dolor sit amet, consectetur        Lorem ipsum dolor sit
adipisicing elit, sed do eiusmod tempor     ...
Consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed         Lorem ipsum dolor sit
                  ...
Consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed         Lorem ipsum dolor sit
                  ...
Consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed         Lorem ipsum dolor sit
                  ...
Consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed         Lorem ipsum dolor sit
                  ...
Consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed         Lorem ipsum dolor sit
                  ...
Consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed         Lorem ipsum dolor sit
                  ...
1   2    3
5   6    7
9   10   11
1   2    3
5   6    7
9   10   11
Add a new person
Add a new company
Import from vCard, Basecamp, Outlook
Export to vCard, Excel
Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without writ...
1. Decide what matters
 2. Make that pop out
3. Make everything else
       fade back
1. Screens
2. Flow
3. Language
Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without writ...
Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without writ...
Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without writ...
Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without writ...
Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without writ...
Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without writ...
Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without writ...
Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without writ...
1. Screens
2. Flow
3. Language
Interface design is
   copywriting
Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without writ...
Speak your user’s
   language.
Presentation Copyright© 2006 37signals, LLC. All Rights Reserved. These slides may not be used or distributed without writ...
Talk like a human
Long labels are OK
How often do you
 really “submit”
   something?
1. Screens
2. Flow
3. Language
Be opinionated and
decide what matters
Emphasize the
 important elements
and de-emphasize the
  unimportant ones
Walk through every
process to smooth out
 bumps and potholes
Write the best words
to communicate the
  clearest concepts
1. Prioritize what’s important

2. Emphasize and de-emphasize

3. Smooth out the flow

4. Clarify your language
Thank you!

Questions?
37signals
37signals
37signals
37signals
37signals
37signals
37signals
Upcoming SlideShare
Loading in...5
×

37signals

1,098

Published on

Published in: Business, Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,098
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
50
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "37signals"

  1. 1. Ryan Singer 37signals
  2. 2. How to craft clear user interfaces
  3. 3. Usability?
  4. 4. “Usable” is not a compliment
  5. 5. Clear Easy Fast Fun Good
  6. 6. The interface is our product
  7. 7. 1. Screens 2. Flow 3. Language
  8. 8. 1. Screens 2. Flow 3. Language
  9. 9. Edward Tufte
  10. 10. Strong Normal Weak
  11. 11. Headline Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit adipisicing elit, sed do eiusmod tempor amet, consectetur adipisicing elit, sed do incididunt ut labore et dolore magna eiusmod tempor aliqua. Ut enim ad minim veniam, quis incididunt ut labore et nostrud exercitation ullamco laboris nisi dolore magna aliqua. Ut 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
  12. 12. Headline Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit adipisicing elit, sed do eiusmod tempor amet, consectetur adipisicing elit, sed do incididunt ut labore et dolore magna eiusmod tempor aliqua. Ut enim ad minim veniam, quis incididunt ut labore et nostrud exercitation ullamco laboris nisi dolore magna aliqua. Ut 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
  13. 13. Headline Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit adipisicing elit, sed do eiusmod tempor amet, consectetur adipisicing elit, sed do incididunt ut labore et dolore magna eiusmod tempor aliqua. Ut enim ad minim veniam, quis incididunt ut labore et nostrud exercitation ullamco laboris nisi dolore magna aliqua. Ut 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
  14. 14. Headline Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit adipisicing elit, sed do eiusmod tempor amet, consectetur adipisicing elit, sed do incididunt ut labore et dolore magna eiusmod tempor aliqua. Ut enim ad minim veniam, quis incididunt ut labore et nostrud exercitation ullamco laboris nisi dolore magna aliqua. Ut 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. 15. 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
  16. 16. 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
  17. 17. 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
  18. 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. 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. 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. 21. 1 2 3 5 6 7 9 10 11
  22. 22. 1 2 3 5 6 7 9 10 11
  23. 23. Add a new person Add a new company Import from vCard, Basecamp, Outlook Export to vCard, Excel
  24. 24. 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
  25. 25. 1. Decide what matters 2. Make that pop out 3. Make everything else fade back
  26. 26. 1. Screens 2. Flow 3. Language
  27. 27. 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
  28. 28. 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
  29. 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. 30. 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
  31. 31. 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
  32. 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. 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. 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. 35. 1. Screens 2. Flow 3. Language
  36. 36. Interface design is copywriting
  37. 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. 38. Speak your user’s language.
  39. 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. 40. Talk like a human
  41. 41. Long labels are OK
  42. 42. How often do you really “submit” something?
  43. 43. 1. Screens 2. Flow 3. Language
  44. 44. Be opinionated and decide what matters
  45. 45. Emphasize the important elements and de-emphasize the unimportant ones
  46. 46. Walk through every process to smooth out bumps and potholes
  47. 47. Write the best words to communicate the clearest concepts
  48. 48. 1. Prioritize what’s important 2. Emphasize and de-emphasize 3. Smooth out the flow 4. Clarify your language
  49. 49. Thank you! Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×