UNIVERSAL USABILITY...is a goal, not an outcome.“To achieve universal usability, designers need to ‘support awide range of technologies, to accommodate diverse usersand to help users brides the gap between what they knowand what they need to know.’” Web Style Guide, 3rd Edition
UNIVERSAL USABILITY ...is informed by Accessibility Usability Universal Design
ACCESSIBILITY1999: World Wide Web Consortium establishes the WebAccessibility Initiative (WAI).Promotes best practices to make the web accessible to peoplewith disabilities.Ensures that the tools and technologies that designers needare available to create designs that work in different contexts.Basically refers to how well a site can be used by as manypeople 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, andphysical or sensory limitations.
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 nailgun requires the user to 1 activatethe safety before 2 pulling thetrigger, minimizing accidents thatoccur when a user accidentallyhits an object or personwhile 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: email@example.com 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
UNIVERSAL DESIGN PRINCIPLES These are most applicable to the web.
#1 EQUITABLE USE“The design is useful and marketable to people with diverseabilities. Provide the same means of use for all users: identicalwhenever possible; equivalent when not.”
#2 FLEXIBILITY IN USE“The design accommodates a wide range of individualpreferences 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’sexperience, knowledge, language skills, or current concentrationlevel. Eliminate unnecessary complexity and arrange informationconsistent with its importance.”
#4 PERCEPTIBLE INFORMATION“The design communicates necessary information effectively tothe user, regardless of ambient conditions or the user’s sensoryabilities. Use different modes (pictorial, verbal, tactile) forredundant presentation of essential information and providecompatibility with a variety of techniques or devices used bypeople 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.
TYPES OF DISABILITIES Visual impairments Hearing impairments Mobile impairments Cognitive impairments
USE DESCRIPTIVE HEADINGSHelps users understand page structures.Screen readers don’t look at web pages, they read HTMLcode.Can call up a list of on page headings and jump to thesection of a page
Here’s what this headings box for the BBC homepage looks like in JAWS, one ofthe 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 listbefore 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 screenreaders read aloud.Use succinct text to avoid long drawn out speech.
WRITE SHORT PARAGRAPHSConclusion first, followed by the what, why, when whereand how.This allows users to quickly understand what the paragraphis 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).
Tone is appealing, form has no superfluous questions
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
#1 LABELSWords vs sentencesTry to use words, but if needed, add a phrase to eliminateambiguitySentence case vs. title caseSentence case is slightly easier to readAVOID ALL CAPS AS THEY ARE HARD TO SCAN
#2 INPUT FIELDSDon’t invent new fields – simple is bestDistinguish which input fields are required – convention isan asterisk *Colons at the end of a label – matter of preferenceTop vs left vs right alignment of labels- each has advantagesand 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 scanLimit 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 genericimpression of the form.Use descriptive words such as “Join LinkedIn”.
PRIMARY VS. SECONDARYPrimary actions are links and buttons that performessential “final” functionality (Save, Submit).Secondary actions allow users to retract data that they haveentered (Back, Cancel).These should have less visual weight than primary actionsas they have undesired consequences.
“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.
user-triggered helpdynamic help Both user-triggered help and dynamic help
#5 MESSAGESError message – emphasize through color, recognizableicons, placement, large font or a combination.Success message - use to notify users they have reached ameaningful milestone.Encourages user to continue a filling out a lengthy form.
#6 VALIDATIONUse only where needed – excessive validation is as bad asnone.Use only to confirm key points, ensuring realistic answersand suggesting responses.Use smart defaults – helps make the completion of the formfaster and more accuratePre-select user’s country based on IP address.
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% 17% 18% 40% 18%Create Account Register Join Sign Up Start Here Other
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%).
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/
FURTHER READINGForms That Work: Designing Web Forms for Usability,Caroline Jarrett and Gerry GaffneyWeb Form Design, Filling in the Blanks, Luke WroblewskiSignup Forms - Luke Wroblewski
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
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
FURTHER READINGThinking Fast and Slow, Kahneman, D. 2011Emotional Design: Why we love (or hate) everyday things,Norman, D. 2004Designing for the Social Web, Porter, J. 2008Mental Models: Aligning Design Strategy with HumanBehavior, Young, I. 2008Neuro Web Design, Weinschenk, Ph.D., 2009
WORKSHOP #2 EMOTION & DESIGN Break into three groups: Find 3 sites that play well on emotions through design.