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
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

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

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

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

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

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

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

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

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

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

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 written permission of 37signals. http://www.37signals.com

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 written permission of 37signals. http://www.37signals.com

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

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

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

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

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

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

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

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 written permission of 37signals. http://www.37signals.com

Speak your user’s
language.

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

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?