Ryan Singer
Upcoming SlideShare
Loading in...5
×
 

Ryan Singer

on

  • 14,339 views

Web Application Usability

Web Application Usability

Statistics

Views

Total Views
14,339
Views on SlideShare
14,061
Embed Views
278

Actions

Likes
53
Downloads
538
Comments
2

10 Embeds 278

http://www.adverto.nl 150
http://thefutureoflearning.wordpress.com 41
http://events.carsonified.com 23
http://www.christcoolen.nl 22
http://www.slideshare.net 20
http://www.23words.com 17
http://liveforfame.clientsection.com 2
http://efamily.projectpath.com 1
http://hellamega.clientsection.com 1
http://apice.unibo.it 1
More...

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…
  • Ryan, thanks for a vetry useful presentation on how to put together UI's that work.

    Hayden

    http://press20.blogspot.com/<br /><br/>
    Are you sure you want to
    Your message goes here
    Processing…
  • <br /><object type="application/x-shockwave-flash" data="http://www.youtube.com/v/J00ehBG0VNg&rel=1?path=http://www.youtube.com/v/J00ehBG0VNg&rel=1" width="350" height="288"><param name="movie" value="http://www.youtube.com/v/J00ehBG0VNg&rel=1?path=http://www.youtube.com/v/J00ehBG0VNg&rel=1" /></object>
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ryan Singer Ryan Singer Presentation Transcript

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