Open this web page prior to the presentation

Library Website Design

Usability and Accessibility

Faith Yokoyama

LIS 670—Summer 2005

HSPL Five Year Library Services and Technology Plan

From fewer physical to more online collections, From fewer library buildings to more home and

community access points, From less emphasis on staff-mediated services to

more self-service, privacy-enhancing, and personalized options, and

From requiring customers to come to us to delivering collections and services to people

(Source: Hawaii State Public Library System LSTA Five-Year Plan, 2003-2007 http://www.librarieshawaii.org/pdf/LSTA%205-year%202003-2007%20050401%20%20SUBMISSION.pdf)

Overview

Usability

Target user group – children

Accessibility

Usability

The measure of the quality of a user's experience when interacting with a product or system.Web site Software application Mobile technology

Usability

Usability is a combination of factors that affect the user's experience with the product or system.Ease of learning Efficiency of use Memorability Error frequency and severitySubjective satisfaction

Why is usability important?

Research by User Interface Engineering, Inc. shows that people cannot find the information they seek on Web sites about 60% of the time. Wasted time Reduced productivity Increased frustration Loss of repeat visits and money

Usability

Why are you developing a site?

Who should come to your site?

When and why those people might come?

Collect Data

Data must be collected about user needs.

Feedback formsOnline surveys Usability testing of the existing site

Designing Designing Children’s Children’s WebsitesWebsites

Faith YokoyamaFaith YokoyamaLIS 670LIS 670

Information Science and Information Science and TechnologyTechnology

““Don’t Dumb Them Down”Don’t Dumb Them Down”

Jakob Nielsen & Shuli Gilutz (2002)

• “Usability of Websites for children”

• Study children 5 – 11

• How they navigate through kids’ sites

http://www.nngroup.com/reports/kids/Nielsen Norman Group Report: Usability of Websites for Children:70 design guidelines based on usability studies with kids   128 pages PDF formatDownload Report (from eSellerate) $129 for a single report

Nielsen’s findingsNielsen’s findingsDebunks myths that:

• Children are not naturally adept at computers.

• Often become more confused than adults.

• Are not as naturally skillful on computers as we thought.

Nielsen’s findingsNielsen’s findingsUnlike grownups, children will:

• actually read directions (up to one paragraph)

• when they encounter error messages…

- they just ignore it

- go someplace else

Nielsen’s findingsNielsen’s findings

Children have literal thinking.

They don’t scroll down the page.

If it’s “out of sight,”

then it’s “out of mind.”

Nielsen’s findingsNielsen’s findings

Pop-up advertisements

• Children do not distinguish between ads and content.

• To children – it’s ALL information.

• Children will click on ad banners ALL the time

Children like…Children like…

• Animation

• Sound

• ‘Easter egg-hunting’

Design by ageDesign by age

• Pre-Readers ( 3 – 5 year-old)

• Beginning Readers (5 – 8 year-old)

• Intermediate Readers (9 – 12 year-old)

• Young Adults (13 - 17 year-old)

What to put in aWhat to put in a

children’s library children’s library

website website

5 cores areas5 cores areas

Homework assistance

Outreach

Readers’ advisory

Reference help

Programming

Homework AssistanceHomework Assistance

• KidsClick! Web Searchhttp://www.kidsclick.org

• Kids’ Webrary Linkshttp://www.webrary.org/kids/jkidslinks.html(also has a site for adults)

OutreachOutreach

• Hands on Craftshttp://www.handsoncrafts.org

• Work with others

Readers’ AdvisoryReaders’ AdvisoryAnimated reviews

• Animated characters tell a book reviewhttp://www.readthebooks.com/rtb/files/rtb_danbury/aliens/general/composeGeneral.mv.(subscription-based service only)

Reference TutorialsReference TutorialsKidsClick! Worlds of Web Searching

• Searching tutorial

• Each planet = Type of Internet searching

(Source: http://www.rcls.org/wows/index.html)

ProgrammingProgramming• StoryPlace

– Assist young readers in developing literacy skills

– Children may select or name charactershttp://www.storyplace.org

• Usability – voice integration– Multiple languages– ESL / Special Ed– Visually Impaired– Elderly

Want to make your own Want to make your own Children’s Web site?Children’s Web site?

Lack time?

Lack know how?

PortalsPortals

• Portal created for use by many libraries

• Customize it

• Tailoring it to the needs of your users

Making your own web siteMaking your own web site

PortalsPortals• Start Squad Kids’ Portal

http://startsquad.org– Display own library logo– Select default sites– Limit topics

• Brarydog Portal http://www.brarydog.net– Students create their own homework help

website

• Webmonkey for Kidshttp://webmonkey.wired.com/webmonkey/kids/

Making your own web siteMaking your own web site

Displaying children’sDisplaying children’s work and photos work and photos

• Mid-Hudson Library System, New York http://midhudson.org/news/picturereleaseform.htm

• North Suburban Library System, Illinois http://www.nsls.info/marketing/photo.html

Privacy PolicyPrivacy PolicyNotify users about how they are safeguarded

ALA’s Office of Intellectual Freedom

“Guidelines for Developing a Library Privacy Policy”

(Source:http://www.ala.org/template.cfm?Section+Privacy1&Template=/ContentManagement/ContentDisplay.cfm&ContentID=40426)

Privacy PolicyPrivacy Policy

• Make a link accessible from anywhere in your site

• Place at the bottom of each page

• Specifically for children:Indianapolis Marion County Public Library

(Source: http://infozone.imcpl.org/kids_about_disclaimer.htm)

Accessibility

Web Design Standards

Usability vs. Accessibility

Usability GuidelinesWebsite is “intuitive and easy to use”Designed with its target audience in mind

Accessibility StandardsWebsite is “as barrier-free as possible”Designed to reach the widest possible

audience

“People with disabilities feel more isolated, detached from communities”

“Heavy computer and Internet use among those with disabilities.

This technology is presenting new opportunities for social outreach and work and educational opportunities.”

(Source: National Organization on Disability/Harris Poll survey, 7 July 2000http://www.nod.org/index.cfm?fuseaction=page.viewPage&pageID=1430&nodeID=1&FeatureID=238&redirected=1&CFID=3226770&CFTOKEN=9374483)

Section 508

Ensures that information technology and equipment purchased or developed by the Federal government is accessible to people with disabilities.

This includes websites and multimedia.

"These guidelines explain how to make Web content accessible to people with disabilities.... However, following them will also make Web content more available to all users.... Following these guidelines will help people find information on the Web more quickly."

W3C Web Content Accessibility Guidelines (WCAG)

Section 508

http://www.usdoj.gov/crt/508/

W3C Web Content Accessibility Guidelines

http://www.w3.org/TR/WAI-WEBCONTENT/

http://www.w3.org/TR/WCAG20/ (Working draft of Version 2.0)

…all Hawaii Department of Education (HDOE) websites including school and office sites, are required to be to fully ADA compliant by January 1, 2002.

(http://doe.k12.hi.us/technology/accessibilitymemo001208.htm)

Accessibility Tutorials

Section508.govhttp://section508.gov/index.cfm?FuseAction=Content&ID=5

Jim Thatcher.comhttp://www.jimthatcher.com/webcourse1.htm

IBM: Give Your Website an Accessibility Makeover (Downloadable PowerPoint)http://www-306.ibm.com/able/education/

Accessible Web Design Basics

Web pages should be “keyboard enabled”

Hawaii Voyager Library Hawaii Voyager Library CatalogCatalog Books, Videos, etc. in UH System Libraries

Electronic Resources Find Articles & Data in Online Indexes, Full Text Databases,

Journals, Newspapers, eBooks

Digital Reference Shelf Quick online access to fact-based fact-based reference sources

Online Archive Collections Scanned Photographs, Documents, Art Prints

Learning the Library Digital Reference, Online Tutorials, Classes, Subject Guides

Accessible Web Design Basics

(Source: http://www.webaim.org/simulations/screenreader)

"A text equivalent for every non-text

element shall be provided."

Insert an “alt” attribute for every non-text element.

<A HREF="home.htm"><IMG SRC="home.gif" ALT=“A blue oval with an image of the White House."> </A>

(Source:http://www.section508.gov/training/index.cfm?FuseAction=LessonPages&LessonID=3&StartRow508=11&EndRow508=11)

Insert an “alt” attribute for every non-text element.

<A HREF="home.htm"><IMG SRC="home.gif" ALT=“Visit the White House Home Page."> </A>

Accessible Web Design Basics

Non-text elements (graphics), HTML tables, frames, image maps and other navigational elements can in many cases be made accessible through proper coding

Scanned PDF documents should have HTML or downloadable Word document equivalents

Web multimedia should be closed-captioned or accompanied by transcripts

Test Your Site for Accessibility

Watchfire WebXACT http://webxact.watchfire.com/

HiSoftware Cynthia Sayshttp://easi.cc/workshops/easiweb.htm

VisCheck (for colorblindness)http://www.vischeck.com/vischeck/

Just checking to see if you’re still awake.

PABLO

PUDGE

P

Cascading Style Sheets (CSS)

Future Uses

What are Stylesheets?

One file holds patterns for a master designLayoutFontsColorsOverall look of your site

(Source: http://www.yourhtmlsource.com/stylesheets/introduction.html

Benefits of CSS

Define things once

Pages download faster

Maintenance

Modify one CSS file All the HTML pages reading that file will change

Benefits of CSS

Site is consistent throughout all pages

Allows you to configure text for many devices Multiple web browsers (Firefox, IE, Navigator) PDAs (http://www.libs.uga.edu/pda/#) Cell phones

Ensures that web users with disabilities can use your site

Sample Style Sheets

You insert text to different backgrounds.

The backgrounds are controlled by the style sheet.

http://www.csszengarden.com/zengarden-sample.html

http://www.csszengarden.com/