Web Design 101 The Library Institute June 3, 2009

2 Objectives Usability Design Image: http://www.flickr.com/photos/statelibraryofnsw/3210637493/

Usability

Design

What is Usability? User-centered: give users the tools they need. Image: http://www.flickr.com/photos/library_of_congress/2179224580/

User-centered: give users the tools they need.

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.

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.

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.

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/

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

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.

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/

Examples of usability fail!

Online: Arizona Republic

Offline: voicemail. Seriously.

Yours?

Accessibility Available to all users Browser Compatibility Internet speed Contrast Graphics Colors Descriptive Text Web Accessibility Initiative: http://www.w3.org/WAI/

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

Cowdance

Yvette's

DRM Guide to Disability Resources on the Web

Consistency Easy for user to predict how to navigate the site . Mystery Meat Navigation: MIT Architecture Unpredictability: Brill Publications

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/

We're librarians - we're good at this !

User Needs Why are they here? Library hours, locations, directions Find books Find databases/articles Program Information

Why are they here?

Library hours, locations, directions

Find books

Find databases/articles

Program Information

Usability win Google Southwest Airlines Amazon

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/

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

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

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

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/

How do our library websites rate?

List 3 good things

List 3 improvements

Questions? Image: http://www.flickr.com/photos/george_eastman_house/3333259091/

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]

Anali Maughan Perry

Assistant Librarian

Arizona State University Libraries

[email_address]

MCLC Tech Talk

http://mclctechtalk.wordpress.com

[email_address]