240 likes | 425 Views
Website Usability. Making Content Easy to Find. Basic Usability Concepts. What is usability, anyway?. What is a website?.
E N D
Website Usability Making Content Easy to Find
Basic Usability Concepts What is usability, anyway?
What is a website? • A set of interconnected webpages, usually including a homepage, generally located on the same server, and prepared and maintained as a collection of information by a person, group, or organization. (The American Heritage® Dictionary of the English Language, Fourth Edition)
What is usability? • The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. (ISO 9241:11 Guidance on Usability 1998)
Key factors in usability • Who will use the product? • What are they trying to do? • How long should it take? • Will they be happy about it? • Under what circumstances?
Basic Accessibility Concepts Why is web accessibility important?
How many people with disabilities? • The percentage of people with disabilities in many populations is between 10% and 20%. Not all disabilities affect access to information technologies such as the web (for instance, difficulty walking, or a heart condition, would not affect web access) but many do. (Fact Sheet for "Web Content Accessibility Guidelines 1.0")
Five Primary Disabilities • Visual impairments • Hearing impairments • Mobility impairments • Cognitive impairments • Seizure disorders
Major Sources of Information The really good stuff, mainly websites but also a few print works
Analyzing Websites Usability Accessibility
Usability Checklist • Images & animations. Use the alt attribute to describe the function of each visual. • Image maps. Use the client-side map and text for hotspots. • Multimedia. Provide captioning and transcripts of audio, and descriptions of video. • Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here." • Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible. • Graphs & charts. Summarize or use the longdesc attribute. • Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported. • Frames. Use the noframes element and meaningful titles. • Tables. Make line-by-line reading sensible. Summarize. • Check your work. Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG
Usability Design Cycle Deliver Product Set Goals Study Users Build Test Mander and Smith, Web Usability for Dummies p.12 Design
What users bring • Most users have screen area set to 800 X 600 (3/2003) • Short attention span • Task in mind or an information need • Previous experience with websites and other media • Limited connection speed
What users bring • Users do not read - they scan • Used to printing and page idea
Guidelines • Jargon – OPAC, Database, department names • Don’t make them think • 20% of content gets 80% of your views. • Check your logs • Typical “visit” just 4 to 5 clicks • What to leave out of the site • http://www.jkup.net/terms.html
Guidelines • Text quality • Paper 600 dpi to thousands of dpi • Computer screen 70 dpi to 100 dpi max.
Usability of other items • Newspaper • “Above the fold”, sections, and paging • Books • Index, paging, TOC and chapters • Physicality of a book – marking etc. • Computers • Hum, What context do they give us? • Web pages????
Guidelines • One Goal per page? Good or bad? • User centered goals • Page size and accessibility. Does it matter? One screen philosophy • Scroll – left, right, up, down? • Frames – a bad idea • Tables for design or CSS
Guidelines • Tables over 500 pixels? • 670 pixels max. to print • Printing of pages
Navigation • What do users use? • What they use vs. what they say they use. • Navigation – right, left, top, bottom? • User orientated navigation • How can they find “deep content”? • Make “Home” omnipresent
Navigation • Navigation on every page • Designed for USERS • Navigation via graphics + or - • Use a site or “sight” map
Guidelines - Links • Click here? Context and links • Red and blue • Underlining • Off site links • Title, H1 & link name matching • Opens in a new window
Guidelines • Graphics - when and where? • Graphics quality • GIF, JPG and PNG • Colors – 216 Where are all the others? • What colors are “safe”