Download - 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! [email protected] | [email protected]

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


“Content is king.” - Jacob Nielsen


"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]


“…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.]


the 80/20 rule


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


At some point,everyone

is a first time user.


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


• Web Trends– Google Analytics, Urchin

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


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]


The 5-second Test


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

American Red Cross

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

Yale University Libraries


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


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 ]


communication

Communication:writing information

introintrointro usability communication accessibility communicationdesign

Less is More.

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


• 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]


• IMDB• Amazon

Main heading

SupportingInformation

Key Points

Remember the 5 W's

WhoWhat

WhereWhenWhy

(and How)


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/


Speak the language

of the user


“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


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.



What would you call it?


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]


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]


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]


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. ]


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


Architecting Information

Breadcrumbs

Main Content

Sub Navigation

Page Title

Branding / Global navigationLogo Search

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


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

Architecting Information

Where am I?


“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.]


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



Search


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?


ProperAlignment

Usable Color palettes

Freshlinks

Readable, non-fixed

fonts

Image Sizing

Avoid popups

Proper case

SearchablePage titles

Clickable logos

ConsistentSearch buttons


Put it into Practice

• Cascading Style Sheets (CSS)• XHTML• Templates

– Headers / Footers / Navigation

• Consistency– Ann Arbor Public Library


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?


color color palettespalettes

text-only text-only optionoption

keyboard keyboard alternativesalternatives

alt/titlealt/titletagstags

device- device- specific specific formatsformats

accessibleaccessiblecontentcontent


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


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?


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 [email protected] | [email protected]

VCU LibrariesPresentation for VLA Paraprofessionals

Conference, May 20, 2008, Richmond, VA

accessibilityusability communication design