website usability | day 4
Post on 27-Jan-2015
115 Views
Preview:
DESCRIPTION
TRANSCRIPT
HELLO. WELCOME TO DAY 4.
ACCESSIBILITY
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
...is informed by
Accessibility
Usability
Universal Design
UNIVERSAL USABILITY
ACCESSIBILITY1999: 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.
USABILITYArises from User Centered Design (UCD).
Includes a broad and inclusive view of the user.
UNIVERSAL DESIGNNot just alternative designs to meet specific needs.
Accounts for users of all ages, experience levels, and physical or sensory limitations.
The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.
The Principles of
�
�
�
�
�
��
Size and Space for Approach and UseAppropriate size and space is provided for approach, reach, manipulation, and use regardless of user’s body size, posture, or mobility.
Low Physical EffortThe design can be used e!ciently and comfortably and with a minimum of fatigue.
Tolerance for ErrorThe design minimizes hazards and the adverse consequences of accidental or unintended actions.
Equitable UseThe design is useful and marketable to people with diverse abilities.
Perceptible InformationThe design communicates necessary information e"ectively to the user, regardless of ambient conditions or the user’s sensory abilities.
Simple and Intuitive UseUse of the design is easy to understand, regardless of the user’s experience, knowledge, language skills, or education level.
Flexibility in UseThe design accommodates a wide range of individual preferences and abilities.
Powered door with sensors is convenient for all shoppers, especially if hands are full.
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.
Large-grip scissors accommodates use with either hand and allows alternation between the two in highly repetitive tasks.
Small bumps on a cell phone keypad tell the user where
important keys are without requiring the user to look at the keys.
Door lever does not require grip strength to operate, and can even be operated by a closed fist or elbow.
Wide gates at subway stations accommodate wheelchair users as well as commuters with packages or luggage.
2
Public emergency stations utilize recognized emergency colors and a simple design to quickly convey function to passers-by.
1
Universal Design
Web:design.ncsu.edu/cud
E-mail:cud@ncsu.edu
500 copies of this public document were printed at a cost of $1.34 each. >�Recycled paper and soy-based inks
Center for Universal Designat NC State
As per Center for Universal Design at North Carolina State University’s College of Design(www.design.ncsu.edu/cud/about_udprinciples.htm)
UNIVERSAL DESIGN PRINCIPLESThese are most applicable to the web.
#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.”
#2 FLEXIBILITY IN USE“The design accommodates a wide range of individual preferences and abilities. Provide choice in methods of use.”
#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.”
#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.”
PEOPLE WITH DISABILITIES1 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.
Visual impairments
Hearing impairments
Mobile impairments
Cognitive impairments
TYPES OF DISABILITIES
STANDARD
HIGH- CONTRAST TEXT
ENLARGED TEXT
WITHOUT STYLING
DESIGNING FOR SCREEN READERS
JAWSScreen reading software.
JAWS SAMPLE
USE DESCRIPTIVE HEADINGSHelps 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
Here’s what this headings box for the BBC homepage looks like in JAWS, one of the most popular screen readers:
WRITE DESCRIPTIVE LINK TEXTScreen reader users can call up a list of on page links.
Avoid “Click Here”, “Read More”
Here’s what this links list dialog displays for the BBC homepage in JAWS:
PROVIDE INFORMATION IN LISTSScreen 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
USE LOGICAL LINEARIZATIONScreen readers read top to bottom, left to right.
Avoid putting important information at the bottom (e.g. instructions for forms).
USE SHORT SUCCINCT ALT TEXTALT text is a description of the images on a page that screen readers read aloud.
Use succinct text to avoid long drawn out speech.
WRITE SHORT PARAGRAPHSConclusion 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.
WRITE DESCRIPTIVE PAGE TITLESThis is the first thing a screen reader user hears.
Helps orient the user.
COLOR BLINDNESSInability 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).
normal
protanopia-red green
deuteranopia - red green
tritanopia - blue yellow
Sales by product
Sales by product
This is difficult to read.
This is easy to read.
ACCESSIBILITY RESOURCES
Usability.govUniversal Design
WORKSHOP # 1 TEST SITEPlease go into the group you worked with when creating personas.
AFTER CREATING PROTOTYPE: Do a prototype test with another groupMake improvements with original group
FORMS
SIGN UP FORMSRemove ALL barriers to account creation.
Don’t make them recreate what they’ve already done.
WHY FORMS EXISTEvery form exists for one of three main reasons:
- Commerce
- Community
- Productivity
Web From Design: Filling in the Blanks, Luke Wroblewski
Uses of forms, based on Luke Wroblewski’s Web Form Design: Filling in the Blanks.
RELATIONSHIPA form is a way to establish a relationship with
the user and the organization.
TRUSTAchieved through logo, color, typography, and wording.
GOALSWhat is the goal of the form?
PURPOSEBase the name of the form on its purpose so users know what and why.
APPROPRIATE LANGUAGEBalance business needs with user needs.
NO SUPERFLUOUS QUESTIONSToo many questions cause user to question motivation.
NO SUDDEN CHANGE...in behavior or appearance – will make the user anxious.
Make it easy for registered users to log in and for new users to register
Simplify the process for registered and new customers
CONVERSATIONA form is a two-way conversation between
the user and the organization.
CONVERSE, DON’T INTERROGATEAvoid aggressive wording.
ORDER LABELS LOGICALLYShould reflect the flow of a conversation.
MORE INVOLVED QUESTIONS...should come towards the end.
GROUP RELATED INFORMATIONAddress one topic at a time.
Groups are related through purple headings and fine lines
Content is related, but the groups are separated too much. Potential for confusion.
ONE AT A TIMEThe flow from one set of questions to the next should resemble a conversation.
REMOVE CLUTTERBanners, unnecessary navigation, anything that might distract.
Effective use of white space
Tone is appealing, form has no superfluous questions
Labels – tell users what the input fields meanInput Fields – text fields, password fields, check boxes, radio buttons, sliders, etcActions – when clicked these perform an action, such as submitting a formHelp – provides assistance on how to fill out the formMessages – provides feedback based on user inputValidation – ensures that data inputted conforms to acceptable parameters
6 COMPONENTS OF FORMS
#1 LABELSWords 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
Pretty, but difficult to scan
Individual words would have sufficed
#2 INPUT FIELDSDon’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
Vertical: when user types data their eyes are fixed across the vertical axis at the left to the input field
Eye needs to jump from one field to the other. Too much distraction.
SELECT MENUSMany choices in a small space.
Hard to use especially when there are many choices.
Easier to enter state or country code than to choose.
RADIO BUTTONSEasy to scan.
But if list is long, it’s hard for user to scan
Limit to groups of four to six options.
CHECK BOXESAllow for multiple selections.
Use single checkboxes for binary choices (yes, no).
#3 ACTIONSAvoid generic words like “Submit” as they lend a generic impression of the form.
Use descriptive words such as “Join LinkedIn”.
PRIMARY VS. SECONDARYPrimary 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.
Imagine clicking “Reset Form” by accident
“Register with us” would have been more helpful than submit
#4 HELPYou 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.
Both user-triggered help and dynamic help
dynamic help
user-triggered help
#5 MESSAGESError 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.
#6 VALIDATIONUse 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.
Uses dynamic validation and smart defaults
dynamic help{smart default
FORMS: THINGS TO CONSIDERWhat 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.
5%2%
40%
18%
18%
17%
Create Account Register Join Sign Up Start Here Other
BOTTOM LINE ON SIGN UP FORMSThe 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%).
BOTTOM LINE ON SIGN UP FORMSTitles 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/
FURTHER READINGForms 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
Please divide into three groups.
Design a web page for delivering the US CensusWhat special considerations will you make for business and user needs?Sketch quickly, write legiblyTry to approximate actual size of objects and fontsYou have 20 minutesHint: It’s probably some kind of form
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?
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
WORKSHOP #1 US CENSUS
EMOTION AND DESIGN
PRETTY THINGS WORK BETTER.
Norman D., 2004 Emotional Design: Why we love (or hate) everyday things
Reflective
Behavioral
Visceral
DESIGN PROCESSING
Self-image
Memories
Usefulness
Performance
Appearance
Modified from Norman D., 2004 Emotional Design: Why we love (or hate) everyday things
VISCERAL LEVELAutomatic, biological, universal.
Attractive faces,symmetrical objects, round objects, soothing colors and sounds.
Design implications in images, graphics, visual design, aesthetics.
AVOID STOCK IMAGESWe are drawn to friendly authentic faces. Not stock images.
Women
Men
COLOR EFFECTS EMOTION
CULTURAL COLOR THEORYRed - China, prosperity, happiness/South Africa, mourning
Yellow - Egypt, mourning/Japan, courage
Green - Middle East luck/Indonesia, forbidden color
Black - China, trust, high quality
BEHAVIORAL LEVELPerformance - how well a product works.
Usefulness - how useful is a product.
Function rules!
Usability is king!
BEHAVIORAL DESIGNis user friendly
http://www.mamamarketing.nl/wp-content/uploads/2011/01/hakken.jpg
123
REFLECTIVE LEVELStays long than visceral level.
Sense of exclusivity.
Sensitive to experiences, training, education.
Cultural differences relevant.
WHAT DOES THIS PRODUCT SAY ABOUT ME?
Behavioral Reflective
FURTHER READINGThinking 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
Break into three groups:
Find 3 sites that play well on emotions through design.
WORKSHOP #2 EMOTION & DESIGN
CLOSING SURVEY
Closing Survey
THANKS! WAS FUN.STAY IN TOUCH.
top related