best practices for building usable & accessible web content

Susan Teague-Rector & Teresa Doherty VCU Libraries

Presentation for VLA ConferenceMay 20, 2008, Richmond, Virginia

Contact Us! seteague@vcu.edu | mtdohert@vcu.edu

Best practices for building usable

& accessible Web content

accessibilityusability communication design

Introduction Web Content Defined

Usability Understanding the user experience

Communication Writing Information

Design Information Architecture Navigation & Search Web Design

Accessibility Web Standards

Q&A

intro introductionintrointro usability communication accessibilitydesign

contentcontent

architecturearchitecture

designdesignaccessibilityaccessibility

usabilityusability

intro introductionintrointro usability communication accessibilitydesign

“Content is king.”         - Jacob Nielsen

intro introductionintrointro usability communication accessibilitydesign

"We define content broadly as 'the stuff in your Web site.' This may include documents, data, applications, e-services, images, audio and video files, personal Web pages, archived e-mail messages, and more. And we include future stuff as well as present stuff."

[Rosenfeld & Morville, 1998 Information Architecture for the World Wide Web]

intro introductionintrointro usability communication accessibilitydesign

“…the time internet users spend viewing online content is up 37% from four years ago”

[ Havenstein, H. (2007).

Content is king again, says Nielsen. CIO Magazine.]

intro introductionintrointro usability communication accessibilitydesign

the 80/20 rule

intro introductionintrointro usability communication accessibilitydesign

Usability:understanding the user experience

usability

introintrointro usability communication accessibility usabilitydesign

Where/how can I get information on diabetes?

•Audience 1•Audience 2•Audience 3

introintrointro usability communication accessibility usabilitydesign

At some point,everyone

is a first time user.

introintrointro usability communication accessibility usabilitydesign

Understand your audience

• Who are your primary users?– researchers, undergraduates, moms & dads,

children, teachers

• What are their main tasks on the site?– research, book reports, recipes

Example: http://usability.gov/pubs/newemployee.pdf

introintrointro usability communication accessibility usabilitydesign

• Web Trends– Google Analytics, Urchin

• Search Statistics• Personas• Interviews• Contextual Inquiry• Usability Testing

introintrointro usability communication accessibility usabilitydesign

Getting to know the user

By understanding the user and their tasks…

You’ll be able to – Focus on what’s important to the user– Write content that resonates with

them, using their language– Better understand user goals and what

they want to accomplish on the Web

[Janice Redish, Letting Go of the Words, writing web content that matters, 2007]

introintrointro usability communication accessibility usabilitydesign

The 5-second Test

introintrointro usability communication accessibility usabilitydesign

[Idea from Jarod Spool, Usability Engineering, 5 second test]

American Red Cross

[ Idea from Jarod Spool, Usability Engineering, 5 second test ]

Yale University Libraries

introintrointro usability communication accessibility usabilitydesign

[Jakob Nielsen, 2006, F-Shaped Pattern for Reading Web Content]

introintrointro usability communication accessibility usabilitydesign

Users Scan

… people spend an average of 27 seconds on a Web page

… web users spend, on average, less than 2 minutes before deciding to abandon a site.

[ Nielsen & Loranger, 2006 ]

introintrointro usability communication accessibility usabilitydesign

communication

Communication:writing information

introintrointro usability communication accessibility communicationdesign

Less is More.

http://www.library.vcu.edu/guides/spectra.html

introintrointro usability communication accessibility communicationdesign

• Break up large documents into smaller chunks• Create topics & subtopics• Organize content:

By taskhttp://library.nyu.edu/collections/

By time/sequencehttp://www.amazon.com

By what people askhttp://www.library.vcu.edu/research/ugrad/

By people/audiencehttp://www.spl.org/default.asp?pageID=audience

[Janice Redish, Letting Go of the Words, writing web content that matters, 2007]

introintrointro usability communication accessibility communicationdesign

• IMDB• Amazon

Main heading

SupportingInformation

Key Points

Remember the 5 W's

WhoWhat

WhereWhenWhy

(and How)

introintrointro usability communication accessibility communicationdesign

Progressive Disclosure

• Front-load important information• Go from general to specific

– http://www.bbc.co.uk/?ok– http://www.library.vcu.edu/blog/new

s/

introintrointro usability communication accessibility communicationdesign

Speak the language

of the user

introintrointro usability communication accessibility communicationdesign

“The average user success rate for finding journal articles or article databases is 53%53% (in 19 tests at 13 libraries reporting this information). Narrative descriptions suggest that terminology is a major factor.”

http://www.jkup.net/terms.html

introintrointro usability communication accessibility communicationdesign

In a recent VCU Libraries Web site Usability Study of 11 undergraduates, graduates, professionals, teaching faculty & staff, and VCU Libraries faculty, only 1 persononly 1 person was familiar with the terms ILLiad and Resource Guides.

introintrointro usability communication accessibility communicationdesign

introintrointro usability communication accessibility communicationdesign

What would you call it?

introintrointro usability communication accessibility communicationdesign

InterLibrary Loanhttp://library.calvin.edu/services/ill

Interlibrary Loan (ILL)http://tinyurl.com/3qdhot

Interlibrary loan services (ILL) and alternative delivery serviceshttp://www.ub.uni-erlangen.de/Fernleihe/index-en.shtml

Interlibrary Borrowing Servicehttp://libraries.mit.edu/ordering/ilb.html

[From Tame the Web]

introintrointro usability communication accessibility communicationdesign

Document Delivery Servicehttp://ndsl.lib.state.nd.us/DocumentDelivery.html

IU Document Delivery Servicehttp://www.libraries.iub.edu/index.php?pageId=54

Document Delivery Serviceshttp://www.lindahall.org/services/document_delivery/

Integrated Document Deliveryhttp://www.usc.edu/libraries/services/idd/interlibrary_loan/

[From Tame the Web]

introintrointro usability communication accessibility communicationdesign

7-FAST On-Campus Document Delivery Servicehttp://www.lib.umich.edu/7fast/

British Library Research Packhttp://tinyurl.com/45awja

Loansome Dochttp://tinyurl.com/54cmw5

Interlibrary Loan Formshttp://library.uncg.edu/depts/ill/illforms.asp

Ordering Full Text - Document Deliveryhttp://web.uflib.ufl.edu/docorder.html

Document Delivery Services (DDS)http://www.lib.ipfw.edu/dds.html

Document Serviceshttp://libraries.mit.edu/docs/index.html

[From Tame the Web]

introintrointro usability communication accessibility communicationdesign

Getting Materials Borrow a Book Finding an Article Finding a Book

Library Instruction Tutorials Research by Subject Getting Started

Some terms that have worked in user studies at libraries:

[ Kupersmith, J. (2008). Library Terms that Users Understand. ]

introintrointro usability communication accessibility communicationdesign

Design:

architecting and designing information

introintrointro usability communication accessibility designdesign

Featured Content

Branding / Global navigationLogo Search

Features

Footer – Name of Organization | Address | Phone | Email contact

Upcoming Events

Focus Areas

introintrointro usability communication accessibility designdesign

Architecting Information

Breadcrumbs

Main Content

Sub Navigation

Page Title

Branding / Global navigationLogo Search

Footer – Name of Organization | Address | Phone | Email contact

introintrointro usability communication accessibility designdesign

Example: http://www.nyu.edu/research/

Architecting Information

Where am I?

introintrointro usability communication accessibility designdesign

“Faced with several navigation options, it's best if users can clearly identify the trail to the prey and see that other trails are devoid of anything edible.”

[ Jacob Neilsen (2003). Information Foraging.]

introintrointro usability communication accessibility designdesign

Designing Navigation

• Provide consistent navigation– www.queenslibrary.org

• Give the user a map– www.llbean.com/siteMap/index.html?nav=ftlink

• Give the user context– http://www.nyu.edu/research/libraries.html

introintrointro usability communication accessibility designdesign

introintrointro usability communication accessibility designdesign

Search

introintrointro usability communication accessibility designdesign

Search

Consistency

“Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen.”

[Nielsen, J. (2007). Top Ten Mistakes in Web Design.]

Intro Usability CommunicationAccessibility

What did we say about consistency?

introintrointro usability communication accessibility designdesign

ProperAlignment

Usable Color palettes

Freshlinks

Readable, non-fixed

fonts

Image Sizing

Avoid popups

Proper case

SearchablePage titles

Clickable logos

ConsistentSearch buttons

introintrointro usability communication accessibility designdesign

Put it into Practice

• Cascading Style Sheets (CSS)• XHTML• Templates

– Headers / Footers / Navigation

• Consistency– Ann Arbor Public Library

introintrointro usability communication accessibility designdesign

Standardization

accessibility

Accessibility:

making it available to everyone

introintrointro usability communication accessibility accessibilitydesign

“To me, it is all about making web sites accessible to people with disabilities and at the same time to people using different operating systems, web browsers and devices.”

Robert Nyman (2006). What is Accessibility?

introintrointro usability communication accessibility accessibilitydesign

color color palettespalettes

text-only text-only optionoption

keyboard keyboard alternativesalternatives

alt/titlealt/titletagstags

device- device- specific specific formatsformats

accessibleaccessiblecontentcontent

introintrointro usability communication accessibility accessibilitydesign

Put it into Practice

– Act like a user • Respect and understand your target audience

– Empower your users • Give them the tools that meet their tasks

– Take care of your content• Write for the Web not for print• Keep content fresh

– Design for the optimal user experience• Don’t keep your user’s guessing• Consistency is king

– Standardize your site’s design and content• it will improve usability, readability & accessibility

introintrointro usability communication accessibility accessibilitydesign

Best Practices Wrap Up

1. What are you currently doing in your library with Web content?

2. What methods does your library use to better understand online library users?

introintrointro usability communication accessibility accessibilitydesign

Q&A / Discussion

Books Morville, P. (2005). Ambient Findability: What We Find Changes Who We Become. Krug, S. (2005). Don't Make Me Think: A Common Sense Approach to Web Usability. McGovern, G. (2007). Killer Web Content. Redish, Ginny. (2007). Letting Go of Words: Writing Web Content that Works. Rosenfeld, L. & Morville, P. (1998). Information Architecture for the World Wide

Web. Tidwell, J. (2005). Designing Interfaces. http://designinginterfaces.com Zeldman, J. (2006). Designing Web Standards.

Web sites IBM Web Accessibility Center.

http://www-03.ibm.com/able/guidelines/web/accessweb.html User Centered Design @ IBM. https://www-306.ibm.com/software/ucd/index.html Usability.gov – Research-Based Web Design & Usability Guidelines.

http://www.usability.gov/pdfs/guidelines.html. W3C Web Content Accessibility Guidelines. http://www.w3.org/TR/WCAG20/ Virginia Web Accessibility Template Guide. http://www.vadsa.org/watg/ Interaction Design Patterns. http://www.welie.com/patterns/ Web Style Guide, 2nd Edition. http://www.webstyleguide.com/ Yahoo! Developer Network. http://developer.yahoo.com/yui/

Selected Resources

Questions and/or Comments?

Susan Teague-Rector & Teresa Doherty seteague@vcu.edu | mtdohert@vcu.edu

VCU LibrariesPresentation for VLA Paraprofessionals

Conference, May 20, 2008, Richmond, VA

accessibilityusability communication design