Web Design and Development
theLonelyWolf
09-UsabilityandAccessibility.pptxUsability & Accessibility
Now: Write down 3 things a user can DO (actions) on your project website – that you could test
See chapter 9 of Deliver First-Class Websites 101 Essential Checklists (Shirley Kaiser)
Learning Outcomes
learn to apply user-centred design principles and methods
learn to apply best practices in creating standards-based websites
understand the 5 quality components of usability
appreciate the needs of different audiences
appreciate the value of making websites more accessible
Usability
some of this lecture content comes from:
Jakob Nielsen
"the world's leading expert on Web usability" (U.S. News & World Report)
useit.com
usability is a quality attribute that assesses how easy user interfaces are to use the word "usability" also refers to methods for improving ease-of-use during the design process
http://www.useit.com/alertbox/20030825.html
Usability is defined by 5 quality components
learnability: how easy is it for users to accomplish basic tasks the first time they encounter the design?
efficiency: once users have learned the design, how quickly can they perform tasks?
memorability: when users return to the design after a period of not using it, how easily can they reestablish proficiency?
errors: how many errors do users make, how severe are these errors, and how easily can they recover from the errors?
satisfaction: how pleasant is it to use the design?
What is Important?
Utility - the design's functionality: Does it do what users need?
Usability and utility are equally important
Utility = whether it provides the features you need.
Usability = how easy & pleasant these features are to use.
Useful = usability + utility
It matters little that something is easy if it's not what you want. It's also no good if the system can hypothetically do what you want, but you can't make it happen because the user interface is too difficult.
5
Why Do People Leave a Site?
if a website is difficult to use
if the home page fails to clearly state what a company offers and what users can do on the site
if users get lost on a website
if a website's information is hard to read or doesn't answer users' key questions
people don't read instruction manuals for websites.
there are plenty of other websites available
Note: many student designs don't have any real "content" on the home page – just links to other pages. Provide some kind of "locating" text that helps new users know what the site is.
6
Usability Improvements: Results
current best practices suggest spending about 10% of a project's budget on usability - this will more than double a website's quality metrics and nearly double an intranet's quality metrics
internal projects = cutting training budgets in half and doubling the number of transactions employees perform
external projects = doubling sales, doubling registered users or customer leads, or doubling another desired goal
Usability Metrics
From a study of 43 website redesigns in 2003, improvement in usability metrics (spending 10% of project budget on usability)
Metric Improvement
Sales / conversion rate 100%
Traffic / visitor count 150%
User performance / productivity 161%
Use of specific (target) features 202%
Improving a Website's Success
Formula for website success is: B = V × C × L
B = amount of business done by the site
V = unique visitors coming to the site
C = conversion rate (the percentage of visitors who become customers)
L = loyalty rate (the degree to which customers return to conduct repeat business)
so how do we make a site more successful?
Increase any one of V, C, or L
9
Test Your Website
there are different types of testing:
Functionality (Quality Assurance) Testing – where you check that the site does what it is supposed to do (checking for broken links, code errors etc.)
User Acceptance Testing (UAT) – verify the result meets the agreed-on requirements (usually with client)
Usability Testing – determine how easy the site is to use; discover how the site aids or hinders people
Improve Usability by User Testing
get some representative users, such as customers or employees (who work outside your department)
ask the users to perform representative tasks with the design
have them test a specific area of the site
give them specific tasks, and give all users the same task so you have something to compare
Who Are "Representative Users"?
Iterative Design & Testing
you don't want a big, expensive study
it is a better use of resources to run many small tests and revise the design between each one
so you can fix the usability flaws as you identify them
testing 5 users is typically enough to identify a design's most important usability problems
iterative design is the best way to increase the quality of the user experience
the more versions and interface ideas you test with users, the better
Iterative Design & Testing
observe what the users do, where they succeed, and where they have difficulties with the user interface.
shut up and let the users do the talking
if possible, record the user's mouse movements and faces, so you can review the footage later
systems exist for tracking eye movement for where users look on a page
Don't help, or make them uncomfortable
Try to make it as natural as possible
Performing The Test
encourage the user to "think-aloud", that is to tell you what they are thinking as they are performing the process... no matter how silly it seems to them
Facilitator ... "As you are working, please think out loud and describe what you are looking for, what questions you have, anything that surprises you, etc. I won't normally answer these questions for you but they will help us to understand how to make the site more user friendly"
Performing The Test
help users only if they become totally stuck and unable to proceed, and you see they are wasting the limited test time you have. but don't jump in and give them hints, or explain how the site is meant to work.
remember to explain to your users that you are testing the website, not them
why is this important?
Don't want people thinking they have to say nice things, don't want them to be embarrassed…
We want authentic (unskewed) feedback.
17
Performing The Test
test across different browsers and make sure you clear all the settings between tests like the history, cookies
Use post-test questionnaires to capture quantifiable feedback about their experience - typically this is the least useful part of the text as people tend to give answers to "please you", rather than honest feedback.
Sample Form
Task Type 1 – First Impressions
Give them limited free time to explore the site, (2-3 minutes) then stop and ask basic questions like:
what does this site sell?
who is this site designed for?
at first glance do you feel this site would have what you are looking for?
do you trust the website?
Task Type 2 – Specific Item
Ask the user to search for a specific item, or a specific type of item by giving them a realistic scenario
Example - You live on Horn Island with postcode 4875 in the Torres Strait. Your electric jug has just died. You want to buy a new stainless steel cordless jug and have it shipped to you.
Find the cheapest item and how much it will cost including postage.
Task Type 3 – Open Ended
Give the user a more vague problem they have to solve for themselves, allowing them to use their own preferences to find the answer.
Example - Your 4 year old daughter has been given a $50 gift card for her birthday. Find and purchase an educational toy which will come as close to this $50 amount including postage.
Use realistic data
if you expect your user to purchase items, determine in advance how they will do this (will you provide them with a credit card, or build in a "testing" credit card number which you will disable later).
also establish if they are to provide dummy details or their real details.
using their real details is better, as people make mistakes when they try to enter rubbish.
fake but realistic details are better than blah blah aorsietnasrt stuff
Task Type 4 – Customer Service
Give the user a problem they need to resolve in relation to a purchase on the website.
Example: You live in Cairns, postcode 4870. You have purchased an iPod Nano worth $170 for your sister, only to find she already has one. You still have the receipt and the packaging, but it has been opened. Find out if you can return the item, and if so how.
When you write these tasks describe the goals but not the steps, for example don't say "search using the term electric kettle" or "click on returns"
When To Test?
before starting the new design, test the old design
test your competitors' designs
to get cheap data on a range of alternative interfaces that have similar features to your own.
conduct a field study to see how users behave in their natural environment.
make quick (paper?) prototypes of new design ideas and test them.
refine the design ideas that test best through multiple iterations, testing each iteration.
implement final design, test it again.
What is Accessibility?
Accessibility
the inclusive practice of making websites usable by people of all abilities and disabilities.
"Accessibility is about ensuring an equivalent user experience for people with disabilities, including people with age-related impairments. For the Web, accessibility means that people with disabilities can perceive, understand, navigate, and interact with websites and tools, and that they can contribute equally without barriers."
Accessibility for Usability
accessibility's business goal is not to just be compliant
what you really want is to sell more products to disabled customers, or get more workplace productivity out of your disabled employees or similar
i.e. you want to achieve the site's goals more broadly
these goals are the same as any usability project.
Accessibility -> Usability
accessibility improvements also improve usability for everyone (not just disabled users), especially:
older users
people using different devices
people with low literacy or not fluent in the language
people with low bandwidth connections or using older technologies
Accessibility Guidelines
guidelines ensure websites work well with assistive technologies:
screen readers (read aloud Web pages)
screen magnifiers (enlarge Web pages)
voice recognition software (used to input text or navigate)
most of these requirements are technical and relate to the underlying code rather than to the visual appearance.
Web Content Accessibility Guidelines (WCAG) 2.0
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.
Web Content Accessibility Guidelines (WCAG) 2.0
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.
Online Checking Tools
http://www.w3.org/WAI/ER/tools/
Demo: http://wave.webaim.org
With http://ditwebtsv.jcu.edu.au/~sci-lmw1/theadviceshop
How to design accessible sites
#1. use semantic, valid HTML
conduct tests to ensure that your website makes sense without CSS (Firefox Web Developer toolbar – test site without CSS)
avoid using frames
set DOCTYPE and <meta> elements (like lang and charset)
ensure that navigation works without a mouse
ensure that your website makes sense in black and white
avoid animations, including blinking or scrolling text
See chapter 9 of Deliver First-Class Websites 101 Essential Checklists (Shirley Kaiser)
34
Simple Stuff – Quick to do
use alt attributes for ALL images (use alt="" for images that assistive technology should ignore)
use <labels> for form input fields
make link text meaningful – not "click here"
use semantic elements to mark up structure
allow text resizing (no horizontal scrolling)
provide controls for time-based media (audio/video)
ensure paragraph spacing is at least 1.5 times larger than line spacing
Much of this is the same as what you do to improve search engine results.
35
Summary
adopting user-centred design principles and methods leads to more effective websites that are more accessible to a larger audience
applying best practices in creating standards-based websites leads to more usable and accessible sites
usability is a quality attribute that assesses how easy user interfaces are to use
there are 5 quality components of usability:
learnability, efficiency, memorability, errors, satisfaction
