© 2014 the University of Greenwich 1 Usability and Accessibili Usability and Accessibility in Web Site Design Dr Kevin McManus http://staffweb.cms.gre.ac.uk/~mk05/ web/usability/
© 2014 the University of Greenwich 1
Usability and Accessibility
Usability and Accessibility in Web Site Design
Dr Kevin McManushttp://staffweb.cms.gre.ac.uk/~mk05/web/usability/
© 2014 the University of Greenwich 2
Usability and Accessibility
Thinking Allowed
• What do people hate about websites?
• Is designing the interface of a web site different from designing the interface of other software?
• What aspects of design should be considered?
• Users - who are they and what do they want?
• Do all web sites have the same aims?
© 2014 the University of Greenwich 3
Usability and Accessibility
“Getting people to your site in the first place: that's what the advertising budget is for.
Making people stay on your site and convert them from one-time visitors to regular users: that's what the usability budget is for.
Internet start-ups typically spend 300 times as much money on advertising as they spend on usability.”
Jakob Nielsen - web site design expert, some time last century
See alsoNielsen, J. (2008) Usability ROI Declining, But Still Strong, Nielsen Norman Group,
http://www.nngroup.com/articles/usability-roi-declining-but-still-strong/
© 2014 the University of Greenwich 4
Usability and Accessibility
What do people hate about web sites?
© 2014 the University of Greenwich 5
Usability and Accessibility
Is designing the interface of a web site different from designing the interface of
other software?
• Yes and no
• What factors might be different?
• What factors might be the same?
supermarket checkout
spreadsheet
cash machine
video recorder
accounting software
game
© 2014 the University of Greenwich 6
Usability and Accessibility
“They say, ‘When I design a web page, I try to consider the way most people will probably be using it.’”
This makes web sites unique? I'm speechless.
Scott Butler from Rockwell Software
See alsoNielsen, J. (1997) The Difference Between Web Design and GUI Design,
Nielsen Norman Group http://www.useit.com/alertbox/9705a.html
© 2014 the University of Greenwich 7
Usability and Accessibility
Five Aspects of Design to Consider
• Navigation
• Multimedia content
• Textual content
• Interaction
• Accessibility• Technical aspects• Human aspects
© 2014 the University of Greenwich 8
Usability and Accessibility
Navigation
• Where am I?
• Where can I get to?
• How do I get there?
• How do I get back?
• Where's the thing I want - now?
© 2014 the University of Greenwich 9
Usability and Accessibility
Navigation Aids• Navigation bars• Site maps• Frames (not allowed in XHTML strict)• Related links (people who bought this book also ..)• Searching (is Google the answer to navigation?)• Breadcrumbs Home > Products > Clothes > Shoes > Sneakers
• How do users usually get to a particular web page?• What navigation aids do you find most useful?• Are users actually interested in navigation?
© 2014 the University of Greenwich 10
Usability and Accessibility
Multimedia content• Download times
• getting better with streamed content• as opposed to download and play content• everyone has broadband these days
• Animations• hard to ignore, even when you want to
• Splash screens• so last century
• surely the user would prefer to get straight to the content?
• Decoration• information or distraction?
© 2014 the University of Greenwich 11
Usability and Accessibility
“Macromedia says Flash is…
‘the solution for producing and delivering high-impact web sites.’
It's also a solution for making your site highly annoying and downright unusable.”
Ragus, D (1999) Flash is Evil, Dack Consulting, http://www.dack.com/web/flash_evil.html
© 2014 the University of Greenwich 12
Usability and Accessibility
Textual content• Most web content is still written text.
• Most people don't read web pages• they scan them
• Nielsen, J. (1997) How Users Read on the Web, NNG
• Nielsen, J. (1997) Why Web Users Scan Instead of Reading, NNG
• Morkes, J., Nielsen, J. (1998) Applying writing guidelines to Web pages, Proc. Conference on Human Factors in Computing Systems pp 321-322, ACM
• Text needs to be• Spill cheked and prof red?
• must be correct my spill chukka didn't complain!
• Concise and precise• Physically easy to read
• colour scheme
• fonts
• background
• layout
• Appropriate for an international audience?
© 2014 the University of Greenwich 13
Usability and Accessibility
Interaction
• Nobody likes clicking• apart from hyperactive small children
• Reduce clicks wherever you can• broad and shallow is generally better than
narrow and deep
• Fitts' Law†
• the time to acquire a target is a function of the distance to and the size of the target
† Fitts, Paul M. (1954). The information capacity of the human motor system in controlling the amplitude ofmovement. Journal of Experimental Psychology, volume 47, number 6, June 1954, pp. 381-391
© 2014 the University of Greenwich 14
Usability and Accessibility
fitts.html
© 2014 the University of Greenwich 15
Usability and Accessibility
Accessibility• Technical aspects (how systems vary)
• different browsers• need for special plug-ins• different machine capabilities (e.g. screen
resolution, processor speed)• connection speeds
• Human aspects (how people vary)• range of computer experience• disabilities• preferences/needs• language and culture
© 2014 the University of Greenwich 16
Usability and Accessibility
“Design for diversity, or expect to succeed with only a very narrow market.”
Usability First Glossary, Foraker Labs http://www.usabilityfirst.com/glossary/diversity/
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
Tim Berners-Lee, Web Accessibility Initiative http://www.w3.org/WAI/
© 2014 the University of Greenwich 17
Usability and Accessibility
Human Factors • Visual disabilities
• lack of screen reader compatibility • unlabeled graphics and video, poor labelling of tables & frames
• poor user style support
• Hearing disabilities: • lack of captioning for audio
• Physical or motor disabilities: • lack of keyboard support for menu commands
• Cognitive or neurological disabilities: • lack of consistent navigation structure • overly complex presentation or language • flickering or flashing designs on pages
© 2014 the University of Greenwich 18
Usability and Accessibility
Web Accessibility Initiative (WAI)
• The WAI, in coordination with organisations around the world, pursues accessibility of the Web through five primary areas of work• technology• guidelines• tools• education and outreach• research and development
• Web Content Accessibility Guidelines (WCAG) 1.0 published in 1999
© 2014 the University of Greenwich 19
Usability and Accessibility
WCAG 1.0Guidelines cover 14 areas of interest
1. Provide equivalent alternatives to auditory and visual content2. Don't rely on colour alone3. Use markup and style sheets and do so properly4. Clarify natural language usage5. Create tables that transform gracefully6. Ensure that pages featuring new technologies transform
gracefully7. Ensure user control of time-sensitive content changes8. Ensure direct accessibility of embedded user interfaces9. Design for device-independence10. Use interim solutions11. Use W3C technologies and guidelines12. Provide context and orientation information13. Provide clear navigation mechanisms14. Ensure that documents are clear and simple
© 2014 the University of Greenwich 20
Usability and Accessibility
WCAG Priorities
Priority 1 - AMust satisfy these requirements, otherwise it will be impossible for one or more groups to access the Web content
Priority 2 - AAShould satisfy these requirements, otherwise some groups will find it difficult to access the Web content
Priority 3 - AAAMay satisfy these requirements, in order to make it easier for some groups to access the Web content
Each guideline includes a range of checkpoints that are expressed as a range of priorities
© 2014 the University of Greenwich 21
Usability and Accessibility
e.g. Guideline Checkpoints5. Create tables that transform gracefully
5.1 For data tables, identify row and column headers. [Priority 1]• For example, in HTML, use TD to identify data cells and TH to identify headers.
5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells. [Priority 1]
• For example, in HTML, use THEAD, TFOOT, and TBODY to group rows, COL and COLGROUP to group columns, and the "axis", "scope", and "headers" attributes, to describe more complex relationships among data.
5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). [Priority 2]
• Note. Once user agents support style sheet positioning, tables should not be used for layout.
5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting. [Priority 2]
• For example, in HTML do not use the TH element to cause the content of a (non-table header) cell to be displayed centered and in bold.
5.5 Provide summaries for tables. [Priority 3]• For example, in HTML, use the "summary" attribute of the TABLE element.
5.6 Provide abbreviations for header labels. [Priority 3]• For example, in HTML, use the "abbr" attribute on the TH element.
© 2014 the University of Greenwich 22
Usability and Accessibility
Quick Tips to Make Accessible Web Sites
• For Complete Guidelines & Checklist: http://www.w3.org/WAI
• Images & animations• Use the alt attribute to describe the function of each visual
• Image maps• Use 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."
© 2014 the University of Greenwich 23
Usability and Accessibility
Quick Tips to Make Accessible Web Sites
• 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 NOFRAMES and meaningful titles• Tables
• Make line by line reading sensible, no nesting• Check your work
• Validate. Use tools, checklist, and guidelines at www.w3.org/TR/WCAG10 and www.w3.org/TR/WCAG20
© 2014 the University of Greenwich 24
Usability and Accessibility
WCAG 2.0• Website accessibility has been given serious
consideration for many years• before the WWW penetrated all corners of society
• Has become an increasingly hot topic• especially since the rise of the silver surfers and...
• Representative groups for people living with disability tend to be a highly vocal minority• many criticisms of WCAG 1.0 were raised
• WCAG 2.0 working draft 2001 heavily criticised• 12 working drafts later
• addressing over 3000 issues• remained review until 2nd December 2008
© 2014 the University of Greenwich 25
Usability and Accessibility
WCAG 2.0• WCAG 2.0 takes a different approach to WCAG 1.0 with 4 categories of
interest and no focus on specific technologies such as HTML
• Perceivable• Provide text alternatives for non-text content• Provide captions and other alternatives for multimedia• Create content that can be presented in different ways, including by assistive technologies,
without losing meaning• Make it easier for users to see and hear content
• Operable• Make all functionality available from a keyboard• Give users enough time to read and use content• Do not use content that causes seizures• Help users navigate and find content.
• Understandable• Make text readable and understandable• Make content appear and operate in predictable ways• Help users avoid and correct mistakes.
• Robust• Maximize compatibility with current and future user tools
© 2014 the University of Greenwich 26
Usability and Accessibility
Legal Compliance• Businesses with an online presence are required by law provide
access to users with disability• not just because there ethical and commercial justifications
• On 27th January 2012, the RNIB served legal proceedings against low-cost airline bmibaby over their ‘failure to ensure web access for blind and partially sighted customers’ • to date, at a number of actions have been initiated by the RNIB, and all
settled out of court
• The landmark 2010/2012 Jodhan decision caused the Canadian Federal government to require that all online content meets the accessibility requirements of WCAG 2.0
• The Australian Government has mandated that all of its websites meet the WCAG accessibility requirements• http://webguide.gov.au/accessibility-usability/accessibility/
• It is anticipated that all nations will require legal compliance• But what with?
© 2014 the University of Greenwich 27
Usability and Accessibility
Disability Discrimination Act 1995• Championed by the RNIB the main part of the DDA
requiring websites to be accessible came into force on 1 October 1999• updated in 2005 to require compliance from employers and
service providers previously exempt from the Act• such as the police and small employers
• Requires• websites to have links which are accessible to a screen reader • PDF forms that can be read by a screen reader • The size of text, colour contrasting and formatting of a website to
be accessible to a partially sighted job person • public information (e.g. transport timetables) must be in a format
accessible to screen readers• online retailers must not excluding people from making
purchases on their website
© 2014 the University of Greenwich 28
Usability and Accessibility
Equality Act 2010• EU + UK legislation• The Act is 'anticipatory‘
• you cannot wait until a disabled person wants to use your services, you must think in advance about what disabled people might reasonably need
• For instance, it may be unlawful for a website to• have Web links on that are not accessible to a screen reader
• or have forms in a PDF format that cannot be read by a screen reader
• have service information not in a format accessible to screen readers• for instance, timetables on a public transport website
• use colour contrasting and formatting of text making it difficult for a partially sighted user to read
• change security procedures without considering the impact of blind and partially sighted customers that use screen readers
• for instance requiring a CAPTCHA
© 2014 the University of Greenwich 29
Usability and Accessibility
Section 508
• 1998 the US Congress amended the Rehabilitation Act
to require Federal agencies to make their electronic and
information technology accessible to people with
disabilities
• Section 508 was enacted to eliminate barriers in
information technology• to make available new opportunities for people with disabilities,
• to encourage development of technologies that will help achieve
these goals
• Has led to development of very useful guidelines
© 2014 the University of Greenwich 30
Usability and Accessibility
Accessibility Tools• The original and best tool was Bobby by CAST
• this was bought by Watchfire and integrated into WebXact• then bought by IBM and incorporated into Rational
Step 1 • choose a sensible DOCTYPE and use a markup validator
• http://validator.cms.gre.ac.uk
Step 2 • use a decent WCAG and 508 validator tool
• WAVE from webAIM• AccVerify from HiSoftware• Accessibility Check from Etre
Step 3• tools cannot automate all checks
• perform manual checks
© 2014 the University of Greenwich 31
Usability and Accessibility
Who are users and what do they want?
• We are all web users, so some concerns are likely to be very common (e.g. download speeds) but we also differ:• experience and skill• age• how we're connected to the web• time available• cultural background• learning style• needs• preferences
© 2014 the University of Greenwich 32
Usability and Accessibility
“Do not do unto others as you would they should do unto you. Their tastes may not be the same.”
George Bernard Shaw
“It's not rocket science. It's social science.”
Clement Mok - design Guru
© 2014 the University of Greenwich 33
Usability and Accessibility
Who are users and what do they want?
• A web site and its users may have different goals e.g. (based on Fleming 1998)
Site User
Wants to make money Wants to get good value and buy securely
Wants to find out about its customers
Wants to maintain privacy
Wants to offload 6,000 overstocked copies of Shania
Twain’s latest CD
Wants to buy Charlie Farley and the Electric Rusks' new CD
© 2014 the University of Greenwich 34
Usability and Accessibility
Who are users and what do they want?
• What will happen if the site forces its goals on the user?• How can you see things from your users' point of view?
• Think about who they are• children, parents, teachers, etc.
• Think about how to deal with multiple groups• Imagine what they want and need
• use scenarios
• Ask them• surveys and so on
• Read up what others have said• Evaluate your site• Use techniques from traditional HCI
• e.g. heuristic evaluation
© 2014 the University of Greenwich 35
Usability and Accessibility
Do all web sites have the same aims?• Obviously not!!!
• Some different types of site (Fleming 1998):• Shopping• Community - sharing an interest, interacting with people with a
similar interest• Entertainment• Identity - presenting a corporate (or personal) identity on the web• Learning - teaching something via the web• Information - providing access to a large amount of information
for reference purposes
• For each type, the user will have goals and the site will have goals
• Need to design to match site's goals with user's goals so that both get what they want
© 2014 the University of Greenwich 36
Usability and Accessibility
Web Science
http://webscience.org/
© 2014 the University of Greenwich 37
Usability and Accessibility
Summary
• It is very easy to create obstacles to usability• and drive away our hard won customers
• We do not create accessible websites because we are good people• we do it because
• it is required by law• it improves usability
© 2014 the University of Greenwich 38
Usability and Accessibility
Books
• "Web Navigation - Designing the User Experience“, Jennifer Fleming, O'Reilly, 1998
• "Web Design in a Nutshell“, Jennifer Niederst, O'Reilly, 1998 - more technically than usability oriented but lots of useful information & tips
• "Designing Web Usability“, Jakob Nielsen, New Riders, 1999 - excellent but expensive book
© 2014 the University of Greenwich 39
Usability and Accessibility
Web Resources
• Usable Information Technology (Jakob Nielsen)• http://www.useit.com
• Usability First - a guide to usability resources• http://usabilityfirst.com/
• W3C's Web Accessibility Initiative (WAI)• http://www.w3.org/WAI/
• WebAIM - expanding the web's potential for people with disabilities• http://www.webaim.org• home of the WAVE accessibility evaluation tool
© 2014 the University of Greenwich 40
Usability and Accessibility
Any Questions?