0
Web Design 101 The Library Institute June 3, 2009
2 Objectives <ul><ul><ul><li>Usability </li></ul></ul></ul><ul><ul><ul><li>Design  </li></ul></ul></ul>Image: http://www.f...
What is Usability? <ul><li>User-centered: give users the tools they need. </li></ul>Image: http://www.flickr.com/photos/li...
3 Main Aspects <ul><ul><ul><li>Learnability: easy to figure it out the first time. </li></ul></ul></ul><ul><ul><ul><li>Eff...
Libraries already do this <ul><ul><ul><li>Reference/Information </li></ul></ul></ul><ul><ul><ul><li>Reader's Advisory </li...
What is Design ? <ul><li>Should accomplish 2 things: </li></ul><ul><ul><ul><li>Help your users fulfill their needs. </li><...
Top Priority? <ul><li>It's easy to forget: </li></ul><ul><ul><ul><li>http://www.adamobydell.com </li></ul></ul></ul><ul><u...
Important Design Characteristics <ul><ul><ul><li>Simplicity: easy to use </li></ul></ul></ul><ul><ul><ul><li>Accessibility...
Keep it simple <ul><li>Don't Make Me Think -  Steve Krug </li></ul><ul><li>Make it easy & intuitive to accomplish a task. ...
Balance <ul><li>Examples of usability fail! </li></ul><ul><ul><ul><li>Online:  Arizona Republic </li></ul></ul></ul><ul><u...
Accessibility <ul><li>Available to all users  </li></ul><ul><ul><ul><li>Browser Compatibility </li></ul></ul></ul><ul><ul>...
Don't make my eyes bleed! <ul><ul><ul><li>Cowdance </li></ul></ul></ul><ul><ul><ul><li>Yvette's   </li></ul></ul></ul><ul>...
Consistency <ul><li>Easy for user to predict how to navigate the site . </li></ul><ul><ul><ul><li>Mystery Meat Navigation:...
Organization <ul><li>We're librarians - we're good at this ! </li></ul>Image: http://www.flickr.com/photos/nypl/3110117236/
User Needs <ul><li>Why are they here? </li></ul><ul><ul><ul><li>Library hours, locations, directions </li></ul></ul></ul><...
Usability win <ul><ul><ul><li>Google </li></ul></ul></ul><ul><ul><ul><li>Southwest Airlines </li></ul></ul></ul><ul><ul><u...
Librarians' Challenge: TMI <ul><li>Too Much Information. Online, less is more </li></ul><ul><ul><ul><li>People don't want ...
Anatomy <ul><li>From Anatomy of a Usable Website: User Effect blog - http://www.usereffect.com/topic/anatomy-of-a-usable-w...
Good Library Webpages <ul><ul><ul><li>Boston Public Library </li></ul></ul></ul><ul><ul><ul><li>Hennepin County Library </...
Webpages that Suck <ul><li>Learn from the mistakes of others! </li></ul><ul><ul><ul><li>http://www.webpagesthatsuck.com </...
Activity! <ul><li>How do our library websites rate? </li></ul><ul><ul><ul><li>List 3 good things </li></ul></ul></ul><ul><...
Questions? <ul><li>Image: http://www.flickr.com/photos/george_eastman_house/3333259091/ </li></ul>
Thank you! <ul><li>Anali Maughan Perry </li></ul><ul><li>Assistant Librarian </li></ul><ul><li>Arizona State University Li...
Upcoming SlideShare
Loading in...5
×

Web Design 101

709

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
709
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Web Design 101"

  1. 1. Web Design 101 The Library Institute June 3, 2009
  2. 2. 2 Objectives <ul><ul><ul><li>Usability </li></ul></ul></ul><ul><ul><ul><li>Design </li></ul></ul></ul>Image: http://www.flickr.com/photos/statelibraryofnsw/3210637493/
  3. 3. What is Usability? <ul><li>User-centered: give users the tools they need. </li></ul>Image: http://www.flickr.com/photos/library_of_congress/2179224580/
  4. 4. 3 Main Aspects <ul><ul><ul><li>Learnability: easy to figure it out the first time. </li></ul></ul></ul><ul><ul><ul><li>Efficiency: getting quickly from point A to point B </li></ul></ul></ul><ul><ul><ul><li>Satisfaction: user is happy with the result. </li></ul></ul></ul>
  5. 5. Libraries already do this <ul><ul><ul><li>Reference/Information </li></ul></ul></ul><ul><ul><ul><li>Reader's Advisory </li></ul></ul></ul><ul><ul><ul><li>Community spaces </li></ul></ul></ul><ul><ul><ul><li>Programming </li></ul></ul></ul><ul><li>The web is just another medium. </li></ul>
  6. 6. What is Design ? <ul><li>Should accomplish 2 things: </li></ul><ul><ul><ul><li>Help your users fulfill their needs. </li></ul></ul></ul><ul><ul><ul><li>Make your website look pretty. </li></ul></ul></ul>
  7. 7. Top Priority? <ul><li>It's easy to forget: </li></ul><ul><ul><ul><li>http://www.adamobydell.com </li></ul></ul></ul><ul><ul><ul><li>http://yugop.com/ver2/ </li></ul></ul></ul>
  8. 8. Important Design Characteristics <ul><ul><ul><li>Simplicity: easy to use </li></ul></ul></ul><ul><ul><ul><li>Accessibility: easy to read & understand </li></ul></ul></ul><ul><ul><ul><li>Consistency: easy to predict </li></ul></ul></ul><ul><ul><ul><li>Organization: overall site architecture </li></ul></ul></ul>
  9. 9. Keep it simple <ul><li>Don't Make Me Think - Steve Krug </li></ul><ul><li>Make it easy & intuitive to accomplish a task. </li></ul><ul><li>- if you need to train, it's too complex </li></ul><ul><li>Focus on what the user NEEDS, not what we think they might want. </li></ul>
  10. 10. Balance <ul><li>Examples of usability fail! </li></ul><ul><ul><ul><li>Online: Arizona Republic </li></ul></ul></ul><ul><ul><ul><li>Offline: voicemail. Seriously. </li></ul></ul></ul><ul><li>Yours? </li></ul>Image: http://www.flickr.com/photos/nationalmediamuseum/3084876560/
  11. 11. Accessibility <ul><li>Available to all users </li></ul><ul><ul><ul><li>Browser Compatibility </li></ul></ul></ul><ul><ul><ul><li>Internet speed </li></ul></ul></ul><ul><ul><ul><li>Contrast </li></ul></ul></ul><ul><ul><ul><li>Graphics </li></ul></ul></ul><ul><ul><ul><li>Colors </li></ul></ul></ul><ul><ul><ul><li>Descriptive Text </li></ul></ul></ul><ul><li>Web Accessibility Initiative: http://www.w3.org/WAI/ </li></ul>
  12. 12. Don't make my eyes bleed! <ul><ul><ul><li>Cowdance </li></ul></ul></ul><ul><ul><ul><li>Yvette's </li></ul></ul></ul><ul><ul><ul><li>DRM Guide to Disability Resources on the Web </li></ul></ul></ul>Image: http://www.flickr.com/photos/nationalmediamuseum/3084041451
  13. 13. Consistency <ul><li>Easy for user to predict how to navigate the site . </li></ul><ul><ul><ul><li>Mystery Meat Navigation: MIT Architecture </li></ul></ul></ul><ul><ul><ul><li>Unpredictability: Brill Publications </li></ul></ul></ul>
  14. 14. Organization <ul><li>We're librarians - we're good at this ! </li></ul>Image: http://www.flickr.com/photos/nypl/3110117236/
  15. 15. User Needs <ul><li>Why are they here? </li></ul><ul><ul><ul><li>Library hours, locations, directions </li></ul></ul></ul><ul><ul><ul><li>Find books </li></ul></ul></ul><ul><ul><ul><li>Find databases/articles </li></ul></ul></ul><ul><ul><ul><li>Program Information </li></ul></ul></ul>
  16. 16. Usability win <ul><ul><ul><li>Google </li></ul></ul></ul><ul><ul><ul><li>Southwest Airlines </li></ul></ul></ul><ul><ul><ul><li>Amazon </li></ul></ul></ul>
  17. 17. Librarians' Challenge: TMI <ul><li>Too Much Information. Online, less is more </li></ul><ul><ul><ul><li>People don't want to read a lot of text </li></ul></ul></ul><ul><ul><ul><li>Similar to a reference interview </li></ul></ul></ul><ul><li>Image: http://www.flickr.com/photos/library_of_congress/2178251635/ </li></ul>
  18. 18. Anatomy <ul><li>From Anatomy of a Usable Website: User Effect blog - http://www.usereffect.com/topic/anatomy-of-a-usable-website </li></ul>
  19. 19. Good Library Webpages <ul><ul><ul><li>Boston Public Library </li></ul></ul></ul><ul><ul><ul><li>Hennepin County Library </li></ul></ul></ul><ul><ul><ul><li>New York Public Library </li></ul></ul></ul><ul><ul><ul><li>Phoenix Public Library </li></ul></ul></ul><ul><ul><ul><li>Salinas Public Library </li></ul></ul></ul>
  20. 20. Webpages that Suck <ul><li>Learn from the mistakes of others! </li></ul><ul><ul><ul><li>http://www.webpagesthatsuck.com </li></ul></ul></ul><ul><ul><ul><li>Biggest Design Mistakes: 1995-2015 </li></ul></ul></ul>
  21. 21. Activity! <ul><li>How do our library websites rate? </li></ul><ul><ul><ul><li>List 3 good things </li></ul></ul></ul><ul><ul><ul><li>List 3 improvements </li></ul></ul></ul>Image: http://www.flickr.com/photos/nypl/3110578334/
  22. 22. Questions? <ul><li>Image: http://www.flickr.com/photos/george_eastman_house/3333259091/ </li></ul>
  23. 23. Thank you! <ul><li>Anali Maughan Perry </li></ul><ul><li>Assistant Librarian </li></ul><ul><li>Arizona State University Libraries </li></ul><ul><li>[email_address] </li></ul><ul><li>MCLC Tech Talk </li></ul><ul><li>http://mclctechtalk.wordpress.com </li></ul><ul><li>[email_address] </li></ul>
  1. A particular slide catching your eye?

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

×