Best practices for building usable & accessible Web content
description
Transcript of 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
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 [email protected] | [email protected]
VCU LibrariesPresentation for VLA Paraprofessionals
Conference, May 20, 2008, Richmond, VA
accessibilityusability communication design