Ryan Singer

Slide 1: Ryan Singer 37signals

Slide 2: How to craft clear user interfaces

Slide 3: Usability?

Slide 4: “Usable” is not a compliment

Slide 5: Clear Easy Fast Fun Good

Slide 6: The interface is our product

Slide 7: 1. Screens 2. Flow 3. Language

Slide 8: 1. Screens 2. Flow 3. Language

Slide 11: Edward Tufte

Slide 13: Strong Normal Weak

Slide 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

Slide 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

Slide 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

Slide 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

Slide 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

Slide 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

Slide 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

Slide 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

Slide 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

Slide 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

Slide 25: 1 2 3 5 6 7 9 10 11

Slide 26: 1 2 3 5 6 7 9 10 11

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

Slide 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

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

Slide 31: 1. Screens 2. Flow 3. Language

Slide 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

Slide 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

Slide 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

Slide 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

Slide 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

Slide 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

Slide 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

Slide 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

Slide 40: 1. Screens 2. Flow 3. Language

Slide 41: Interface design is copywriting

Slide 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

Slide 43: Speak your user’s language.

Slide 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

Slide 45: Talk like a human

Slide 48: Long labels are OK

Slide 49: How often do you really “submit” something?

Slide 50: 1. Screens 2. Flow 3. Language

Slide 51: Be opinionated and decide what matters

Slide 52: Emphasize the important elements and de-emphasize the unimportant ones

Slide 53: Walk through every process to smooth out bumps and potholes

Slide 54: Write the best words to communicate the clearest concepts

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

Slide 56: Thank you! Questions?