Susan Teague-Rector & Teresa Doherty VCU Libraries Presentation for VLA Conference May 20, 2008, Richmond, Virginia

1. Susan Teague-Rector & Teresa Doherty VCU Libraries Presentation for VLA Conference May 20, 2008, Richmond, Virginia Contact Us! seteague@vcu.edu | mtdohert@vcu.edu design accessibility communication usability Best practices for building usable & accessible Web content

2. introduction Introduction Web Content Defined Usability Understanding the user experience Communication Writing Information Design Information Architecture Navigation & Search Web Design Accessibility Web Standards Q&A design intro usability communication accessibility intro intro

3. introduction design intro usability communication accessibility intro intro

4. introduction design intro usability communication accessibility intro intro “Content is king.” - Jacob Nielsen

5. introduction "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, 1998Information Architecture for the World Wide Web] design intro usability communication accessibility intro intro

6. introduction design intro usability communication accessibility intro intro “…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.]

7. introduction design intro usability communication accessibility intro intro the 80/20 rule

8. usability intro usability communication design accessibility intro intro usability • Usability:understanding the user experience

9. usability Where/how can I get information on diabetes? Audience 1 Audience 2 Audience 3 intro usability communication design accessibility intro intro

10. usability intro usability communication design accessibility intro intro • At some point, • everyone • is a first time user.

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

12. usability intro usability communication design accessibility intro intro Getting to know the user • Web Trends • Google Analytics, Urchin • Search Statistics • Personas • Interviews • Contextual Inquiry • Usability Testing

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

14. usability intro usability communication design accessibility intro intro • The 5-second Test [Idea from Jarod Spool, Usability Engineering, 5 second test]

15. usability intro usability communication design accessibility intro intro Yale University Libraries American Red Cross [ Idea from Jarod Spool, Usability Engineering, 5 second test ]

16. usability intro usability communication design accessibility intro intro [Jakob Nielsen, 2006, F-Shaped Pattern for Reading Web Content]

17. usability Users Scan intro usability communication design accessibility intro intro … 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 ]

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

19. communication intro usability communication design accessibility intro intro • Less is More. http://www.library.vcu.edu/guides/spectra.html

20. communication intro usability communication design accessibility intro intro • 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]

21. communication intro usability communication design accessibility intro intro Remember the 5 W's Who What Where When Why (and How)‏ • IMDB • Amazon Main heading Key Points Supporting Information

22. communication intro usability communication design accessibility intro intro Progressive Disclosure • Front-load important information • Go from general to specific • http://www.bbc.co.uk/?ok • http://www.library.vcu.edu/blog/news/

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

24. communication intro usability communication design accessibility intro intro • “The average user success rate for finding journal articles or article databases is 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

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

26. communication intro usability communication design accessibility intro intro

27. communication intro usability communication design accessibility intro intro • What would • you call it?

28. communication intro usability communication design accessibility intro intro • InterLibrary Loanhttp://library.calvin.edu/services/illInterlibrary Loan (ILL)http://tinyurl.com/3qdhotInterlibrary loan services (ILL) and alternative delivery serviceshttp://www.ub.uni-erlangen.de/Fernleihe/index-en.shtmlInterlibrary Borrowing Servicehttp://libraries.mit.edu/ordering/ilb.html • [From Tame the Web]

29. communication intro usability communication design accessibility intro intro • Document Delivery Servicehttp://ndsl.lib.state.nd.us/DocumentDelivery.htmlIU Document Delivery Servicehttp://www.libraries.iub.edu/index.php?pageId=54Document Delivery Serviceshttp://www.lindahall.org/services/document_delivery/Integrated Document Deliveryhttp://www.usc.edu/libraries/services/idd/interlibrary_loan/ • [From Tame the Web]

30. communication intro usability communication design accessibility intro intro • 7-FAST On-Campus Document Delivery Servicehttp://www.lib.umich.edu/7fast/British Library Research Packhttp://tinyurl.com/45awjaLoansome Dochttp://tinyurl.com/54cmw5Interlibrary Loan Formshttp://library.uncg.edu/depts/ill/illforms.aspOrdering Full Text - Document Deliveryhttp://web.uflib.ufl.edu/docorder.htmlDocument Delivery Services (DDS)http://www.lib.ipfw.edu/dds.htmlDocument Serviceshttp://libraries.mit.edu/docs/index.html • [From Tame the Web]

31. communication intro usability communication design accessibility intro intro Some terms that have worked in user studies at libraries: • Getting Materials • Borrow a Book • Finding an Article • Finding a Book • Library Instruction • Tutorials • Research by Subject • Getting Started [ Kupersmith, J. (2008). Library Terms that Users Understand. ]

32. design intro usability communication design accessibility intro intro Design: architecting and designing information

33. design intro usability communication design accessibility intro intro Architecting Information Branding / Global navigation Logo Search Featured Content Focus Areas Features Upcoming Events Footer – Name of Organization | Address | Phone | Email contact

34. design intro usability communication design accessibility intro intro Architecting Information Example: http://www.nyu.edu/research/ Branding / Global navigation Logo Search Sub Navigation Page Title Breadcrumbs Main Content Footer – Name of Organization | Address | Phone | Email contact

35. design intro usability communication design accessibility intro intro Where am I?

36. design intro usability communication design accessibility intro intro “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.]

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

38. design intro usability communication design accessibility intro intro Search

39. design intro usability communication design accessibility intro intro Search

40. Consistency Intro Usability Communication Accessibility “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.]

41. design intro usability communication design accessibility intro intro • What did we say • about consistency?

42. design intro usability communication design accessibility intro intro Put it into Practice

43. design intro usability communication design accessibility intro intro Standardization • Cascading Style Sheets (CSS)‏ • XHTML • Templates • Headers / Footers / Navigation • Consistency • Ann Arbor Public Library

44. accessibility intro usability communication design accessibility intro intro accessibility Accessibility: making it available to everyone

45. accessibility intro usability communication design accessibility intro intro “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?

46. accessibility intro usability communication design accessibility intro intro device- specific formats color palettes alt/title tags accessible content text-only option keyboard alternatives Put it into Practice

47. accessibility intro usability communication design accessibility intro intro Best Practices Wrap Up • 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

48. accessibility intro usability communication design accessibility intro intro Q&A / Discussion • What are you currently doing in your library with Web content? • What methods does your library use to better understand online library users?

49. Selected Resources • 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/

50. design accessibility communication usability Questions and/or Comments? Susan Teague-Rector & Teresa Doherty seteague@vcu.edu | mtdohert@vcu.edu VCU Libraries Presentation for VLA Paraprofessionals Conference, May 20, 2008, Richmond, VA