3. UNIVERSAL USABILITY
...is a goal, not an outcome.
“To achieve universal usability, designers need to ‘support a
wide range of technologies, to accommodate diverse users
and to help users brides the gap between what they know
and what they need to know.’”
Web Style Guide, 3rd Edition
5. ACCESSIBILITY
1999: World Wide Web Consortium establishes the Web
Accessibility Initiative (WAI).
Promotes best practices to make the web accessible to people
with disabilities.
Ensures that the tools and technologies that designers need
are available to create designs that work in different contexts.
Basically refers to how well a site can be used by as many
people as possible.
7. UNIVERSAL DESIGN
Not just alternative designs to meet specific needs.
Accounts for users of all ages, experience levels, and
physical or sensory limitations.
8. The Principles of
Powered door with sensors is
convenient for all shoppers,
especially if hands are full.
Universal Design
The design of products and environments
to be usable by all people, to the greatest
Public emergency stations utilize
recognized emergency colors
and a simple design to quickly
extent possible, without the need
convey function to passers-by.
for adaptation or specialized design.
Flexibility in Use
The design accommodates a wide range of
individual preferences and abilities.
Simple and Intuitive Use
Use of the design is easy to understand,
Equitable Use regardless of the user’s experience,
knowledge, language skills, or education level.
The design is useful and marketable to people
with diverse abilities.
A sequential-trip trigger on a nail
gun requires the user to 1 activate
the safety before 2 pulling the
trigger, minimizing accidents that
occur when a user accidentally
hits an object or person
while pulling the trigger. As per Center for Universal Design at North Carolina State University’s College of Design
(www.design.ncsu.edu/cud/about_udprinciples.htm)
2
Perceptible Information
The design communicates necessary information
Large-grip scissors accommodates use
effectively to the user, regardless of ambient Small bumps on a cell phone
keypad tell the user where
with either hand and allows alternation
conditions or the user’s sensory abilities. important keys are without requiring
1 between the two in highly repetitive tasks. the user to look at the keys.
Door lever does not require grip Wide gates at subway stations
strength to operate, and can even be accommodate wheelchair users as well
operated by a closed fist or elbow. as commuters with packages or luggage.
Tolerance for Error
The design minimizes hazards and the
adverse consequences of accidental or
unintended actions.
Size and Space
for Approach and Use
Center for
Low Physical Effort Appropriate size and space is provided for approach,
The design can be used efficiently and comfortably and reach, manipulation, and use regardless of user’s body
Universal Design Web:
design.ncsu.edu/cud
E-mail:
cud@ncsu.edu with a minimum of fatigue. size, posture, or mobility.
at NC State
500 copies of this public document were printed at a cost of $1.34 each.
Recycled paper and soy-based inks
10. #1 EQUITABLE USE
“The design is useful and marketable to people with diverse
abilities. Provide the same means of use for all users: identical
whenever possible; equivalent when not.”
11. #2 FLEXIBILITY IN USE
“The design accommodates a wide range of individual
preferences and abilities. Provide choice in methods of use.”
12. #3 SIMPLE AND INTUITIVE USE
“Use of the design is easy to understand, regardless of the user’s
experience, knowledge, language skills, or current concentration
level. Eliminate unnecessary complexity and arrange information
consistent with its importance.”
13. #4 PERCEPTIBLE INFORMATION
“The design communicates necessary information effectively to
the user, regardless of ambient conditions or the user’s sensory
abilities. Use different modes (pictorial, verbal, tactile) for
redundant presentation of essential information and provide
compatibility with a variety of techniques or devices used by
people with sensory limitations.”
14. PEOPLE WITH DISABILITIES
1 in 5 people in the United States.
Number of people with disabilities rose 25% in last decade.
In 2010 21.5 million people were visually impaired or blind.
15. TYPES OF DISABILITIES
Visual impairments
Hearing impairments
Mobile impairments
Cognitive impairments
23. USE DESCRIPTIVE HEADINGS
Helps users understand page structures.
Screen readers don’t look at web pages, they read HTML
code.
Can call up a list of on page headings and jump to the
section of a page
24. Here’s what this headings box for the BBC homepage looks like in JAWS, one of
the most popular screen readers:
25. WRITE DESCRIPTIVE LINK TEXT
Screen reader users can call up a list of on page links.
Avoid “Click Here”, “Read More”
26. Here’s what this links list dialog displays for the BBC homepage in JAWS:
27. PROVIDE INFORMATION IN LISTS
Screen readers call out the number of items in each list
before reading them, much like an answering machine.
Mark up is in code <li> tag
28. USE LOGICAL LINEARIZATION
Screen readers read top to bottom, left to right.
Avoid putting important information at the bottom (e.g.
instructions for forms).
29. USE SHORT SUCCINCT ALT TEXT
ALT text is a description of the images on a page that screen
readers read aloud.
Use succinct text to avoid long drawn out speech.
30. WRITE SHORT PARAGRAPHS
Conclusion first, followed by the what, why, when where
and how.
This allows users to quickly understand what the paragraph
is about.
This benefits sighted users as well.
31. WRITE DESCRIPTIVE PAGE TITLES
This is the first thing a screen reader user hears.
Helps orient the user.
32. COLOR BLINDNESS
Inability to perceive difference between some colors.
Affects 5 to 8% of males, 0.5% of females (Wikipedia).
Safest colors to use are black and white.
Use colors for emphasis, not visual cues.
Provide redundant cues (textures, text labels).
42. WORKSHOP # 1 TEST SITE
Please go into the group you worked with when creating
personas.
AFTER CREATING PROTOTYPE:
Do a prototype test with another group
Make improvements with original group
44. SIGN UP FORMS
Remove ALL barriers to account creation.
Don’t make them recreate what they’ve already done.
45.
46.
47. WHY FORMS EXIST
Every form exists for one of three main reasons:
- Commerce
- Community
- Productivity
Web From Design: Filling in the Blanks, Luke Wroblewski
48. Uses of forms, based on Luke Wroblewski’s Web Form Design: Filling in the Blanks.
49. RELATIONSHIP
A form is a way to establish a relationship with
the user and the organization.
69. 6 COMPONENTS OF FORMS
Labels – tell users what the input fields mean
Input Fields – text fields, password fields, check boxes, radio
buttons, sliders, etc
Actions – when clicked these perform an action, such as
submitting a form
Help – provides assistance on how to fill out the form
Messages – provides feedback based on user input
Validation – ensures that data inputted conforms to acceptable
parameters
70. #1 LABELS
Words vs sentences
Try to use words, but if needed, add a phrase to eliminate
ambiguity
Sentence case vs. title case
Sentence case is slightly easier to read
AVOID ALL CAPS AS THEY ARE HARD TO SCAN
73. #2 INPUT FIELDS
Don’t invent new fields – simple is best
Distinguish which input fields are required – convention is
an asterisk *
Colons at the end of a label – matter of preference
Top vs left vs right alignment of labels- each has advantages
and disadvantages
74.
75. Vertical: when user types data their eyes are fixed across the
vertical axis at the left to the input field
76. Eye needs to jump from one field to the other. Too much distraction.
77. SELECT MENUS
Many choices in a small space.
Hard to use especially when there are many choices.
Easier to enter state or country code than to choose.
78.
79. RADIO BUTTONS
Easy to scan.
But if list is long, it’s hard for user to scan
Limit to groups of four to six options.
80.
81. CHECK BOXES
Allow for multiple selections.
Use single checkboxes for binary choices (yes, no).
82.
83. #3 ACTIONS
Avoid generic words like “Submit” as they lend a generic
impression of the form.
Use descriptive words such as “Join LinkedIn”.
84. PRIMARY VS. SECONDARY
Primary actions are links and buttons that perform
essential “final” functionality (Save, Submit).
Secondary actions allow users to retract data that they have
entered (Back, Cancel).
These should have less visual weight than primary actions
as they have undesired consequences.
87. #4 HELP
You should never have to explain how to use a form!
Use accompanying copy only where needed:
Such as WHY you need their phone number;
How a birth date will be used;
Link to Terms & conditions.
Copy is usually ignored so may it short and sweet.
Show an icon that users can click if they need help.
89. #5 MESSAGES
Error message – emphasize through color, recognizable
icons, placement, large font or a combination.
Success message - use to notify users they have reached a
meaningful milestone.
Encourages user to continue a filling out a lengthy form.
90. #6 VALIDATION
Use only where needed – excessive validation is as bad as
none.
Use only to confirm key points, ensuring realistic answers
and suggesting responses.
Use smart defaults – helps make the completion of the form
faster and more accurate
Pre-select user’s country based on IP address.
91. {
dynamic help
smart default
Uses dynamic validation and smart defaults
92. FORMS: THINGS TO CONSIDER
What you call the sign up form.
Where do you place the link?
If a user can’t find a sign up form, they can’t sign up!
Over 75% of websites place it in header.
Over 21% find a prominent place on the homepage.
Rarely placed in the sidebar.
93. 5%
2%
17%
18%
40%
18%
Create Account Register Join Sign Up Start Here Other
94. BOTTOM LINE ON SIGN UP FORMS
The registration link is titled “sign up” (40%) and placed in
the right upper corner.
Sign-up forms have a simplified layout to avoid distractions
for users (61%).
Sign-up forms are one-page-forms (93%).
Sign up forms attract visitors by explaining the benefits of
registration (41%).
95. BOTTOM LINE ON SIGN UP FORMS
Titles of the input fields are highlighted bold (62%).
No trend in the label alignment can be identified.
Designers tend to use few mandatory fields.
Designers tend to use few optional fields.
Vertically arranged fields are preferred to horizontally
arranged fields (86%).
http://uxdesign.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
96. FURTHER READING
Forms That Work: Designing Web Forms for Usability,
Caroline Jarrett and Gerry Gaffney
Web Form Design, Filling in the Blanks, Luke Wroblewski
Signup Forms - Luke Wroblewski
97. WORKSHOP #1 US CENSUS
Please divide into three groups.
Design a web page for delivering the US Census
What special considerations will you make for business and user
needs?
Sketch quickly, write legibly
Try to approximate actual size of objects and fonts
You have 20 minutes
Hint: It’s probably some kind of form
98. WORKSHOP #1 US CENSUS
Considerations:
The census site must gather the following:
• Name • Gender • Age
• What the participant’s relationship to the householder is
Are there any special considerations to make towards business
objectives? How will the information be used or processed?
What affordances/signifiers will you make in your design to
accommodate diverse populations?
What happens after the form is submitted?
99. WORKSHOP #1 US CENSUS
Definition of householder:
The householder refers to the person (or one of the people)
in whose name the housing unit is owned or rented
(maintained) or, if there is no such person, any adult
member, excluding roomers, boarders, or paid employees.
If the house is owned or rented jointly by a married couple,
the householder may be either the husband or the wife.
The person designated as the householder is the "reference
person" to whom the relationship of all other household
members, if any, is recorded.
The number of householders is equal to the number of
households. Also, the number of family householders is
equal to the number of families.
Source: http://www.census.gov/population/www/cps/cpsdef.html
101. PRETTY THINGS WORK BETTER.
Norman D., 2004 Emotional Design: Why we love (or hate) everyday things
102.
103.
104. PROCESSING DESIGN
Self-image
Reflective
Memories
Usefulness
Behavioral
Performance
Visceral Appearance
Modified from Norman D., 2004 Emotional Design: Why we love (or hate) everyday things
118. CULTURAL COLOR THEORY
Red - China, prosperity, happiness/South Africa, mourning
Yellow - Egypt, mourning/Japan, courage
Green - Middle East luck/Indonesia, forbidden color
Black - China, trust, high quality
119. BEHAVIORAL LEVEL
Performance - how well a product works.
Usefulness - how useful is a product.
Function rules!
Usability is king!
125. REFLECTIVE LEVEL
Stays long than visceral level.
Sense of exclusivity.
Sensitive to experiences, training, education.
Cultural differences relevant.
128. FURTHER READING
Thinking Fast and Slow, Kahneman, D. 2011
Emotional Design: Why we love (or hate) everyday things,
Norman, D. 2004
Designing for the Social Web, Porter, J. 2008
Mental Models: Aligning Design Strategy with Human
Behavior, Young, I. 2008
Neuro Web Design, Weinschenk, Ph.D., 2009
129. WORKSHOP #2 EMOTION & DESIGN
Break into three groups:
Find 3 sites that play well on emotions through design.
