USER-FRIENDLY LIBRARY WEBSITES March 1, 2008

Your First… please How many manage a website for work? How many years? Are you planning to create a website in the next six months? Do you provide classroom/workshop instruction? How may work at Reference or Circulation?

How many manage a website for work?

How many years?

Are you planning to create a website in the next six months?

Do you provide classroom/workshop instruction?

How may work at Reference or Circulation?

What is UX?

UX = User Experience

Peter Morville, Semantic Studios UX Honeycomb

Peter Morville, Semantic Studios

Useful Does your site help your visitors’ achieve their goals? Task-oriented as opposed to information-oriented

Does your site help your visitors’ achieve their goals?

Task-oriented as opposed to information-oriented

Usable Is your site easy to use? “ Coffeepot for Masochists”

Is your site easy to use?

Usable Is your site easy to use? Learnability Efficiency Memorability Errors Satisfaction < http://www.useit.com/alertbox/20030825.html >

Is your site easy to use?

Learnability

Efficiency

Memorability

Errors

Satisfaction

< http://www.useit.com/alertbox/20030825.html >

Desirable Is your site visually appealing? Attractive tools and interfaces work better. Visceral reactions to shapes, colors, images. Branding leads us to remember and anticipate value. Norman, D. (2004). Emotional Design. Perseus.

Is your site visually appealing?

Attractive tools and interfaces work better.

Visceral reactions to shapes, colors, images.

Branding leads us to remember and anticipate value.

Norman, D. (2004). Emotional Design. Perseus.

Users form a reaction to your site within at least 50 milliseconds of viewing your site. First Impressions Count in Website Design < http://www.websiteoptimization.com/speed/tweak/blink/ > What was your impression?

Users form a reaction to your site within at least 50 milliseconds of viewing your site.

First Impressions Count in Website Design < http://www.websiteoptimization.com/speed/tweak/blink/ >

Findable “ Look around feverishly for anything that is interesting or vaguely resembles what you are looking for, and is clickable.” -Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability

“ Look around feverishly for anything that is interesting or vaguely resembles what you are looking for, and is clickable.”

-Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability

Findable Are users able to navigate your site? “ Finding Time in the Penn State Libraries ” Users tend to scan web pages. Findability is the top usability issue - Nielsen, survey results in Prioritizing Web Usability

Are users able to navigate your site?

“ Finding Time in the Penn State Libraries ”

Users tend to scan web pages.

Findability is the top usability issue - Nielsen, survey results in Prioritizing Web Usability

Image from Eyetrack III – “What You Most Need to Know” Findable

Image from Eyetrack III – “What You Most Need to Know”

Findable Consistency Way-finding Labeling

Consistency

Way-finding

Labeling

Accessible Can everyone access your site?

Can everyone access your site?

Introduction to Web Accessibility - http://webaim.org/intro/

Introduction to Web Accessibility - http://webaim.org/intro/ Introduction to Web Accessibility - http://webaim.org/intro/

Introduction to Web Accessibility - http://webaim.org/intro/

Accessible <img src= “ library_logo.gif” alt= “ Library Logo Image” /> <input type=&quot;checkbox&quot; id=&quot;good&quot; /> <label for=&quot;good&quot;>This is good</label>

<img src= “ library_logo.gif” alt= “ Library Logo Image” />

<input type=&quot;checkbox&quot; id=&quot;good&quot; /> <label for=&quot;good&quot;>This is good</label>

Credible Is your site designed to inspire confidence in the user?

Is your site designed to inspire confidence in the user?

Credible Elements that detract from credibility Awkward layout Slow loading Poorly written No name(s) Broken links More at The Web Credibility Project: Guidelines - Stanford University

Elements that detract from credibility

Awkward layout

Slow loading

Poorly written

No name(s)

Broken links More at The Web Credibility Project: Guidelines - Stanford University

Valuable Is your website providing valuable information to all stakeholders? Patrons Parent Institution(s) Colleagues

Is your website providing valuable information to all stakeholders?

Patrons

Parent Institution(s)

Colleagues

UX Honeycomb Modified

How do I create a good user experience?

You Need a Plan

UX Iceberg Trevor van Gorp http://www.slideshare.net/trevor.vangorp/ux-iceberg1

Trevor van Gorp

http://www.slideshare.net/trevor.vangorp/ux-iceberg1

This is an example of the “hidden” elements behind developing a website.

Strategy Goals and Objectives Why do your users need your website? What will you give them? What are your objectives?

Goals and Objectives

Why do your users need your website? What will you give them? What are your objectives?

Strategy Needs Brainstorm a list of all possibilities present and future. Ask your patrons what they want. Plot a timeline of when to address the need.

Needs

Brainstorm a list of all possibilities present and future.

Ask your patrons what they want.

Plot a timeline of when to address the need.

Strategy Document Painful but your successors, and collegues, will appreciate it.

Document

Painful but your successors, and collegues, will appreciate it.

Meet Your Guests

Meet Your Guests

Meet Your Guests Survey Library Website Redesign Testing Find Articles Testing Serial Solutions Usability Testing

Survey

Library Website Redesign Testing

Find Articles Testing

Serial Solutions Usability Testing

Meet Your Guests Interview.. Or work at a Reference Desk!

Interview..

Or work at a Reference Desk!

Assembling Your Site

Assembling Your Site Writing Organizing Templating Designing Enhancing

Writing

Organizing

Templating

Designing

Enhancing

Assembling Your Site Writing The text on your site is the key to success. Relaxed, engaging, and friendly People respond positively to flattery from computers – Fogg, B. J., & Nass, C. (1997). Silicon Sycophants: the Effect of Computers that Flatter. International Journal of Human-Computer Studies , 46.

Writing

The text on your site is the key to success.

Relaxed, engaging, and friendly

People respond positively to flattery from computers

– Fogg, B. J., & Nass, C. (1997). Silicon Sycophants: the Effect of Computers that Flatter. International Journal of Human-Computer Studies , 46.

More engaging and friendly when compared to your typical account sign-up process.

Humor is good Relaxed is good

Assembling Your Site Writing (continued) Less is better Write for scanning for gateway pages Write in journalistic style for posts and articles Become friends with an English major

Writing (continued)

Less is better

Write for scanning for gateway pages

Write in journalistic style for posts and articles

Become friends with an English major

Assembling Your Site Organizing Hierarchy vs. Tagging How will you represent the organization of your site using the navigational menus? Is there a cataloger nearby?

Organizing

Hierarchy vs. Tagging

How will you represent the organization of your site using the navigational menus?

Is there a cataloger nearby?

Assembling Your Site Templating Use a standard scheme for all your content

Templating

Use a standard scheme for all your content

Assembling Your Site Templating (continued) Keep it simple and focused Follow conventions Yahoo! Design Pattern Library Yahoo! CSS Page Grids Stick to the standards Consistency across all pages Performance tips – Yahoo Best Practices

Templating (continued)

Keep it simple and focused

Follow conventions

Yahoo! Design Pattern Library Yahoo! CSS Page Grids

Stick to the standards

Consistency across all pages

Performance tips – Yahoo Best Practices

Assembling Your Site Templating (continued)

Templating (continued)

Assembling Your Site Designing “ Design is not just what it looks like and feels like. Design is how it works.” – Steve Jobs More quotes from LukeW Interface Designs

Designing

“ Design is not just what it looks like and feels like. Design is how it works.” – Steve Jobs

More quotes from LukeW Interface Designs

Assembling Your Site Designing Keep it simple to start Make it flexible for growth Maintain visual hierarchy Mind the basics

Designing

Keep it simple to start

Make it flexible for growth

Maintain visual hierarchy

Mind the basics

This person writes about usable design among other things! ??? ???

This person writes about usable design among other things!

Assembling Your Site Enhancing Plugins Third-party hosted tools

Enhancing

Plugins

Third-party hosted tools

Assembling Your Site Enhancing - Examples Vimeo – video Shelfari – book lists more.. Slideshare – for.. Ma.gnolia – social bookmarking

Enhancing - Examples

Vimeo – video

Shelfari – book lists more..

Slideshare – for..

Ma.gnolia – social bookmarking

Assembling Your Site Enhancing - More Google Analytics Google CSE Social bookmarking links

Enhancing - More

Google Analytics

Google CSE

Social bookmarking links

Assembling Your Site Enhancing – Keeping Up

Enhancing – Keeping Up

Asking for Feedback aka

“ How do you ensure you become usage-centered? Learning as much as you can about who your users are and what your users need. The teams we studied made this a constant, using techniques like field studies, personas, and usability testing.” - Jared Spool, “Preventing Usability Problems from the Get-go” <http://www.uie.com/articles/preventing_usability_problems/>

“ How do you ensure you become usage-centered? Learning as much as you can about who your users are and what your users need. The teams we studied made this a constant, using techniques like field studies, personas, and usability testing.”

- Jared Spool, “Preventing Usability Problems from the Get-go” <http://www.uie.com/articles/preventing_usability_problems/>

Usability Testing Why do it? It’s a good way to hear positive comments. You can show it to your stakeholders. Few enjoy doing it - so just doing it puts you ahead. It doesn’t have to be a lot of work! There’s always something to learn.

Why do it?

It’s a good way to hear positive comments.

You can show it to your stakeholders.

Few enjoy doing it - so just doing it puts you ahead.

It doesn’t have to be a lot of work!

There’s always something to learn.

Usability Testing Methods Structured Interview Stalking

Methods

Structured

Interview

Stalking

Usability Testing Library Website Redesign Summary of Test Findings Consent Form Facilitator’s Guide Observer’s Guide Setup Checklist Project Home

Library Website Redesign

Summary of Test Findings

Consent Form

Facilitator’s Guide

Observer’s Guide

Setup Checklist

Project Home

Usability Testing Find Articles Analysis Results of User Survey & Usability Testing - Round 1 , Mike Robinson Selected Highlights: Testing conducted prior to redesign Well thought-out tasks

Find Articles Analysis

Results of User Survey & Usability Testing - Round 1 , Mike Robinson

Selected Highlights:

Testing conducted prior to redesign

Well thought-out tasks

Usability Testing Serial Solutions Analysis Usability Testing And Student Impressions of Serials Solutions 360 Search Federated Search Tool – Susan Elliott Selected Highlights: Located participants rapidly Comprehensive set of testing objectives

Serial Solutions Analysis

Usability Testing And Student Impressions of Serials Solutions 360 Search Federated Search Tool – Susan Elliott

Selected Highlights:

Located participants rapidly

Comprehensive set of testing objectives

Resources Presentation Bibliography on RefWorks