37signals
Upcoming SlideShare
Loading in...5
×
 

37signals

on

  • 1,568 views

 

Statistics

Views

Total Views
1,568
Views on SlideShare
1,567
Embed Views
1

Actions

Likes
7
Downloads
49
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

37signals Presentation Transcript

  • 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
  • 9. Edward Tufte
  • 10. Strong Normal Weak
  • 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. 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. 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. 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. 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. 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. 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. 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. 1 2 3 5 6 7 9 10 11
  • 22. 1 2 3 5 6 7 9 10 11
  • 23. Add a new person Add a new company Import from vCard, Basecamp, Outlook Export to vCard, Excel
  • 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. 1. Decide what matters 2. Make that pop out 3. Make everything else fade back
  • 26. 1. Screens 2. Flow 3. Language
  • 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. 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. 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. 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. 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. 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. 1. Screens 2. Flow 3. Language
  • 36. Interface design is copywriting
  • 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. Speak your user’s language.
  • 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. Talk like a human
  • 41. Long labels are OK
  • 42. How often do you really “submit” something?
  • 43. 1. Screens 2. Flow 3. Language
  • 44. Be opinionated and decide what matters
  • 45. Emphasize the important elements and de-emphasize the unimportant ones
  • 46. Walk through every process to smooth out bumps and potholes
  • 47. Write the best words to communicate the clearest concepts
  • 48. 1. Prioritize what’s important 2. Emphasize and de-emphasize 3. Smooth out the flow 4. Clarify your language
  • 49. Thank you! Questions?