Web Design 101
Upcoming SlideShare
Loading in...5
×
 

Web Design 101

on

  • 1,076 views

 

Statistics

Views

Total Views
1,076
Views on SlideShare
874
Embed Views
202

Actions

Likes
2
Downloads
12
Comments
0

6 Embeds 202

http://llamadavirtual.wordpress.com 163
http://mclctechtalk.wordpress.com 34
https://llamadavirtual.wordpress.com 2
http://74.125.159.132 1
http://209.85.229.132 1
https://mclctechtalk.wordpress.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

Web Design 101 Web Design 101 Presentation Transcript

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