1. Susan Teague-Rector & Teresa DohertyVCU Libraries Presentation for VLA Conference May 20, 2008, Richmond, Virginia Contact Us![email_address]|[email_address] Best practices forbuilding usable& accessible Web content accessibility usability communication design

2.

• 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 introduction intro intro usability communication accessibility design 3. content architecture design accessibility usability intro introduction intro intro usability communication accessibility design 4. Content is king.- Jacob Nielsen intro introduction intro intro usability communication accessibility design 5. "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 introduction intro intro usability communication accessibility design 6.

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 introduction intro intro usability communication accessibility design 7. the 80/20 rule intro introduction intro intro usability communication accessibility design 8.

Usability: understandingthe user experience

usability intro intro intro usability communication accessibility usability design 9.

• Where/how can I get information on diabetes?

• • Audience 1

• • Audience 2

• • Audience 3

intro intro intro usability communication accessibility usability design 10.

At some point,

everyone

is a first time user.

intro intro intro usability communication accessibility usability design 11. 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

intro intro intro usability communication accessibility usability design 12.

Web Trends

• Google Analytics, Urchin

Search Statistics

Personas

Interviews

Contextual Inquiry

Usability Testing

Getting to know the user intro intro intro usability communication accessibility usability design 13. By understanding the userand their tasks

Youll be able to

• Focus on whats 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] intro intro intro usability communication accessibility usability design 14.

The 5-second Test

[Idea from Jarod Spool,Usability Engineering,5 second test ] intro intro intro usability communication accessibility usability design 15. American Red Cross [ Idea from Jarod Spool, Usability Engineering,5 second test] Yale University Libraries intro intro intro usability communication accessibility usability design 16. [Jakob Nielsen, 2006,F-Shaped Pattern for Reading Web Content ]intro intro intro usability communication accessibility usability design 17. 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 ]

intro intro intro usability communication accessibility usability design 18. Communication: writing information communication intro intro intro usability communication accessibility communication design 19.

Less is More.

http://www.library.vcu.edu/guides/spectra.html intro intro intro usability communication accessibility communication design 20.

Break up large documents into smaller chunks

Create topics & subtopics

Organize content:

• By task http://library.nyu.edu/collections/

• By time/sequence http://www.amazon.com

• By what people ask http://www.library.vcu.edu/research/ugrad/

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

[Janice Redish,Letting Go of the Words, writing web content that matters , 2007] intro intro intro usability communication accessibility communication design 21.

IMDB

Amazon

Main heading Supporting Information Key Points Remember the 5 W's Who What Where When Why (and How) intro intro intro usability communication accessibility communication design 22. Progressive Disclosure

Front-load important information

Go from general to specific

• http://www.bbc.co.uk/?ok

• http://www.library.vcu.edu/blog/news/

intro intro intro usability communication accessibility communication design 23. Speak the language of the user intro intro intro usability communication accessibility communication design 24.

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

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

intro intro intro usability communication accessibility communication design 25.

In a recent VCU Libraries Web site Usability Study of 11 undergraduates, graduates, professionals, teaching faculty & staff, and VCU Libraries faculty,only 1 personwas familiar with the termsILLiadandResource Guides .

intro intro intro usability communication accessibility communication design 26. intro intro intro usability communication accessibility communication design 27.

What would

youcall it?

intro intro intro usability communication accessibility communication design 28.

InterLibrary Loan http://library.calvin.edu/services/ill Interlibrary Loan (ILL) http://tinyurl.com/3qdhot Interlibrary loan services (ILL) and alternative delivery services http://www.ub.uni-erlangen.de/Fernleihe/index-en.shtml Interlibrary Borrowing Service http://libraries.mit.edu/ordering/ilb.html

[ FromTame the Web]

intro intro intro usability communication accessibility communication design 29.

Document Delivery Service http://ndsl.lib.state.nd.us/DocumentDelivery.html IU Document Delivery Service http://www.libraries.iub.edu/index.php?pageId=54 Document Delivery Services http://www.lindahall.org/services/document_delivery/ Integrated Document Delivery http://www.usc.edu/libraries/services/idd/interlibrary_loan/

[ FromTame the Web]

intro intro intro usability communication accessibility communication design 30.

7-FAST On-Campus Document Delivery Service http://www.lib.umich.edu/7fast/ British Library Research Pack http://tinyurl.com/45awja Loansome Doc http://tinyurl.com/54cmw5 Interlibrary Loan Forms http://library.uncg.edu/depts/ill/illforms.asp Ordering Full Text - Document Delivery http://web.uflib.ufl.edu/docorder.html Document Delivery Services (DDS) http://www.lib.ipfw.edu/dds.html Document Services http://libraries.mit.edu/docs/index.html

[ FromTame the Web]

intro intro intro usability communication accessibility communication design 31.

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

intro intro intro usability communication accessibility communication design 32. Design: architecting and designing information intro intro intro usability communication accessibility design design 33. Architecting Information Featured Content Branding / Global navigation Logo Search Features Footer Name of Organization | Address | Phone | Email contact UpcomingEvents Focus Areas intro intro intro usability communication accessibility design design 34. Architecting Information Breadcrumbs Main Content SubNavigation Page TitleBranding / Global navigation Logo Search Footer Name of Organization | Address | Phone | Email contact Example:http://www.nyu.edu/research/ intro intro intro usability communication accessibility design design 35. Where am I? intro intro intro usability communication accessibility design design 36.

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

intro intro intro usability communication accessibility design design 37. Designing Navigation

Provide consistent navigation

• www.queenslibrary.org

G ive the user a map

• www.llbean.com/siteMap/index.html?nav = ftlink

G ive the user context

• http://www.nyu.edu/research/libraries.html

intro intro intro usability communication accessibility design design 38. Searchintro intro intro usability communication accessibility design design 39. Searchintro intro intro usability communication accessibility design design 40. Consistency

Consistencyis 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 Communication Accessibility 41.

What did we say

about consistency?

intro intro intro usability communication accessibility design design 42. Put it into Practice Proper Alignment Usable Color palettes Fresh links Readable,non-fixed fonts Image Sizing Avoid popups Propercase Searchable Page titles Clickablelogos Consistent Searchbuttons intro intro intro usability communication accessibility design design 43.

Cascading Style Sheets (CSS)

XHTML

Templates

• Headers / Footers / Navigation

Consistency

• Ann Arbor Public Library

Standardization intro intro intro usability communication accessibility design design 44. Accessibility: making it availableto everyone accessibility intro intro intro usability communication accessibility accessibility design 45.

To me, it is all aboutmaking web sites accessible to people with disabilitiesandat the same time to people using different operating systems, web browsers and devices .

Robert Nyman (2006).What is Accessibility?

intro intro intro usability communication accessibility accessibility design 46. Put it into Practice colorpalettes text-onlyoption keyboardalternatives alt/title tags device-specificformats accessible content intro intro intro usability communication accessibility accessibility design 47.

• 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

• • Dont keep your users guessing

• • Consistency is king

• Standardize your sites design and content

• • it will improve usability, readability & accessibility

Best Practices Wrap Up intro intro intro usability communication accessibility accessibility design 48.

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

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

Q&A / Discussion intro intro intro usability communication accessibility accessibility design 49.

• 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, 2 ndEdition.http:// www.webstyleguide.com /

• Yahoo! Developer Network.http:// developer.yahoo.com/yui /

Selected Resources 50. Questions and/or Comments? Susan Teague-Rector & Teresa Doherty[email_address]|[email_address] VCU Libraries Presentation for VLA Paraprofessionals Conference, May 20, 2008, Richmond, VA accessibility usability communication design