Best practices for building usable & accessible Web content
•Download as PPT, PDF•
5 likes•3,911 views
VLA Conference presentation
![Susan Teague-Rector & Teresa Doherty VCU Libraries Presentation for VLA Conference May 20, 2008, Richmond, Virginia Contact Us! [email_address] | [email_address] Best practices for building usable & accessible Web content accessibility usability communication design](https://image.slidesharecdn.com/webcontent05202008-100719065800-phpapp01/85/best-practices-for-building-usable-accessible-web-content-1-320.jpg)
![[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],intro introduction intro intro usability communication accessibility design](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Best practices for building usable & accessible Web content
Similar to Best practices for building usable & accessible Web content (20)
More from teaguese
More from teaguese (15)
Recently uploaded
Recently uploaded (20)
Best practices for building usable & accessible Web content
- 1. Susan Teague-Rector & Teresa Doherty VCU Libraries Presentation for VLA Conference May 20, 2008, Richmond, Virginia Contact Us! [email_address] | [email_address] Best practices for building usable & accessible Web content accessibility usability communication 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
- 7. the 80/20 rule intro introduction intro intro usability communication accessibility 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
- 18. Communication: writing information communication intro intro intro usability communication accessibility communication design
- 23. Speak the language of the user intro intro intro usability communication accessibility communication design
- 26. 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 Upcoming Events Focus Areas intro intro intro usability communication accessibility design design
- 34. Architecting Information Breadcrumbs Main Content Sub Navigation Page Title Branding / 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
- 38. Search intro intro intro usability communication accessibility design design
- 39. Search 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 Proper case Searchable Page titles Clickable logos Consistent Search buttons intro intro intro usability communication accessibility design design
- 44. Accessibility: making it available to everyone accessibility intro intro intro usability communication accessibility accessibility design
- 46. Put it into Practice color palettes text-only option keyboard alternatives alt/title tags device- specific formats accessible content intro intro intro usability communication accessibility accessibility design
- 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
Editor's Notes
- Who is currently responsible for Web content Audience Academic libraries Public School Anyone else? Usability Understanding the User Meet the user Understand your audience Understand tasks Be aware of how users read online Communication Less is More Organizing Content Inverted Pyramid Jargon / speak the user’s language (Susan) Accessibility Navigation & Search (Susan) Templates and standardization, style guides (Teresa Patron Accessibility (Teresa) Creating Web site architectures usability Edit & Maintain Hyperlinking
- Interrelationship between all the elements that hav eto do with building usability & accessible Web content. Usability – Need to understand the user and how he/she interacts with yoru content Architecture – How do you structure your information so that it’s easily searchable and easy to navigate? Design – What are best practices in design (not talking about just colors, but information design) Accessibility – How do you ensure that your content available to everyone? Content itself – How do you communicate on the Web – best practices for writing information
- Well… is it? Unique, high quality content is king – outdated content, links that are broken or pages that are too difficult read debunk the content is king mantra Content and (especially today’s user-generated content) is king if it’s usable, accessible and fresh. Icons of usability & web design Jacob Nielsen : http://www.useit.com/ Jared Spool: icon in user interface engineering: http://www.uie.com/ *** Question to everyone : So…what is content? ***
- Who are rosenfeld and morville? Both were librarians but went into business for themselves Icons in the Information Arch. / Usability arenas
- Internet users spend almost half their time online reading and watching content, dwarfing the time spent searching for information, communicating with others and buying products, according to a four-year analysis of internet activity... While users in 2003 spent 46% of their time online communicating, they now spend 47% of their time viewing content... Why? * A faster internet * The increased popularity of online video * Improvements in search tools, which are helping users find content more easily * The large increase of the amount of content on the web * The increased use of instant messaging, which has led to a reduction in the time spent on communication activities
- Top 20% gets 80% of traffic At VCU Libraries – there are approximately 3,000 HTML pages on the public web site. – Almost 75% of the most popular pages on the website are research related items. That means that those pages better be easy to navigate and short and sweet! Content that is ever-changing; news + events, hours, programs, services, staff Web Content Management is NOT Data Management "For every 100 documents of content your organization produces, chances are that 95 of them are data that needs storing, with 5 of them having the potential to be killer web content." [Gerry McGovern, 2005, User Interface Engineering] Have you ever updated content on a Web site? What tools have you used? What considerations have you thought about?
- Broad category that can encompass a number of areas including usability testing, user assessment, interaction design, user experience All relates to understanding the user audience.
- Before we can discuss creating content, you must first understand the user / audience 1. http://www.lib.utexas.edu/ academic 2. http://denverlibrary.org/ public 3. http://www.webmd.com/ consumer at some point everyone is a first time user Diabetes – for academic site, think “paper on diabetes” For public library, think book reports think “just diagnosed with diabetes; want info!”
- Consider the audience, but content should always be short, sweet and understandable, despite the language we choose for each audience Act like the User Understand the User Empower the User Every one of us has been a user of the internet – remember to put yourself in the shoes of a new user to your own site. Is it obvious where to find the search box? Is it obvious what the search box is searching? Is it the catalog, the site, some electronic databases, an archive of web news? We'll talk later about library terminology and vocabulary and whether our users understand our language.
- Gather information about your audience Who are they? What are their Likes/dislikes? What are their major characteristics Gather questions, tasks & stories What do they do on your site? Use this information to create personas Use this information to write scenarios for your site Write scenarios about what users do out there – again, DON’T MAKE ASSUMPTIONS Everything on your web site should fulfill a scenario Scenarios can help you write good web content Show example *** Question to everyone : What are some of the tasks people carry out on your website? What do you think are the most important tasks? ***
- Ways to assess users Mention our recent studies Focus groups, “guerilla usability testing”, formal usability testing
- The 5 Second Test from Usability Engineering: Jarod Spool http://www.library.yale.edu/development/ I. We’re going to open Up this Web page and display it for 5 seconds. You’ll need to remember everything you see in 5 seoncds. II. "You're ready to donate to this Library, but you're unsure of what kind of donation to make. What are your donation options?" You have 5 seconds to view this page. II. CLOSE THE WINDOW!! Write down everything you remember from the page. Does what you remember correspond with your initial question?
- What did we learn from the 5 second test? What Web content is and is not You are the expert! You know the subject! You know the content! You know your audience! Why is Web content so important? In many ways, this is the most important part of your site – it’s why a user comes here.
- Understanding how users read the site the first time Users scan
- Grab them in 27 seconds (or less than 2 minutes) Content is king – also consider design, but content is very important Still a learning process amongst “professionals” = the importance of design vs the importance of content We believe content is more important.
- Research guides a perfect example Teach them how to fish – give ranges for topics, call numbers, not specific titles. Active vs passive Research guide example of both good and bad:
- Break up content by Task: find book, article, etc. in library collection Time or sequence: any online purchase – find item, put in basket, checkout, pay, confirm… Type of information/Questions people ask: VCU’s hybrid audience (undergrad), task (studying, writing, self-help, etc.), and questions (how do I?) People/audience: not the best for navigation; used mainly in education
- Don’t just copy a document from your desktop to the Web http://www.imdb.com/title/tt0241303/ http://www.amazon.com/Como-agua-chocolate-Laura-Esquivel/dp/0385721234/ref=pd_bbs_7?ie=UTF8&s=books&qid=1211055542&sr=8-7 Avoid information overload lengthy web pages too many images to download pdf’s 2. Example of too much info on one screen
- Easiest information search first, advanced options later General to specific, news sites best examples: give headlines, link to complete story VCU’s news blog – entries link to stories
- “ who’s the stupidest dog ever? Yes you are!” all in the tone of voice What does your audience hear?
- http://www.jkup.net/terms.html What do people understand when we use library-centric terms? Electronic databases, resources, research guides, stacks, ILL, hold/reserve “ please don’t make me understand this”
- http://www.co.henrico.va.us/library/ Henrico county advanced search – format and location confusion and overlap
- Have also looked at terminology What would you call it? New england journal of medicine or nejm or new england j of med or what?
- http://tametheweb.com/2008/05/05/what-would-you-call-it/ Scenario: “ pretend you are stressed-out, Infectious Disease Researcher under a serious time constraint to stop a virulent Adenovirus strain. And you’ve been so busy over the years. So busy you’ve never slowed down to understand what those terms mean. You want an obscure article let’s say. One that could crack your case to stop this killer cold. And you just want to get on with, you know, your research stuff. “ What do you call it? Circulation Check out Holds Reference Course reserves
- http://tametheweb.com/2008/05/05/what-would-you-call-it/ Scenario: “ pretend you are stressed-out, Infectious Disease Researcher under a serious time constraint to stop a virulent Adenovirus strain. And you’ve been so busy over the years. So busy you’ve never slowed down to understand what those terms mean. You want an obscure article let’s say. One that could crack your case to stop this killer cold. And you just want to get on with, you know, your research stuff. “
- Tired yet? Hang in there. It’s called link fatigue. It’s also among the reasons why so many web surfers scan information -as opposed to read all the information we put on web pages.
- Focus now my tired, diseased researcher; I know you’re getting tired (maybe);
- from Bucknell University Information Services & Resources & hunter college studies Reference to Queen’s library, aquabrowser www.queenslibrary.org
- Recap! So, we now understand our user base, we know what tasks they want and need to preform on our site, we’ve learned how to chunk information and to write for the Web as opposed to print and we’ve looked at how to speak to the users on the Web… Now we look at design: Design is not only colors, fonts, etc. It’s the way in which we architect and organize and design information. Although content is king a well designed site is a pleasure to use.
- Designing information Wireframes – organize your content Talk about vcu libraries redesign and the need to talk about content rather than presentation This leads to standardization and consistency for the user
- Animal instinct Information scent/information foraging Does your site’s content have the strongest scent it can? Does your site’s design enhance your information’s scent or obscure it? If you don’t know how the scent of information affects your users, chances are your site prevents them from finding your most important content. “ information foraging” concept from Xerox Palo Alto Research Lab – “people are information foragers – sniffing our way through web sites, hunting for what we need.” information foraging uses the analogy of wild animals gathering food to analyze how humans collect information online. “ information scent” “ users estimate a given hunt's likely success from the spoor: assessing whether their path exhibits cues related to the desired outcome . Informavores will keep clicking as long as they sense (to mix metaphors) that they're "getting warmer" -- the scent must keep getting stronger and stronger, or people give up. Progress must seem rapid enough to be worth the predicted effort required to reach the destination.” Goes back to language – how have you labeled something? Did you make up words or use jargon? “ The most obvious design lesson from information scent is to ensure that links and category descriptions explicitly describe what users will find at the destination. “
- How do “make your content attractive to to ravenous beasts?” Easy to use navigation Easy to use search Make your site’s tasks easy to see and use… 2 strategies from nielsen: “ convince users that the site is worthy of their attention . As I described above, this means having good information and making it easy to find. once they arrive, make it easy for users to find even more good stuff so that they stay rather than go elsewhere. An entire movement was devoted to the idea of sticky sites and extended visits. “
- PEOPLE AREN’T INTERESTED IN READING Ppl are interesting in finding information Search boxes Consistent site navigation Maps Breadcrumbs / context Not hierarchical - flattened navigation
- Search is the user's lifeline when navigation fails. Even though advanced search can sometimes help, simple search usually works best , and search should be presented as a simple box, since that's what users are looking for. Search Ann Arbor delivers cutting-edge library programs and services but hasn't yet created a bridge between the catalog and their online databases (or an ability to simultaneously query multiple databases). http://www.aadl.org/catalog
- Search is the user's lifeline when navigation fails. Even though advanced search can sometimes help, simple search usually works best , and search should be presented as a simple box, since that's what users are looking for. Search http://www.lib.purdue.edu/#articles Federated search across databases
- Change the background on this one! Templates, consistency of language throughout a site, standardization navigation Terminiology design
- Did you feel like the last slide was out of place? You don’t want to do that to the user; you want them to feel comfortable Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That's good . “
- The design continuum
- How do we create consistency? Standardization Templates CSS and XHTML standards Consistency Cross browser Across your site http://www.aadl.org/
- What is web accessibility and why is it important? But when making a web site accessible to people with disabilities, why wouldn’t we at the same time make it accessible to people who aren’t using Windows and Internet Explorer? It’s a mindset and an attitude that go hand-in-hand for me. Surely, everyone wants to reach an audience as wide as possible, right? It’s about making it usable for everyone
- Section 508 Access keys Printer friendly CSS http://library.nyu.edu/research/subjects/ example of good design, but controversial elements - use of Java not accessible to JAWS readers, perhaps other disability access tools…?