Transcript
Page 1: Website Usability | Day 4

HELLO. WELCOME TO DAY 4.

Page 2: Website Usability | Day 4

ACCESSIBILITY

Page 3: Website Usability | Day 4

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

Page 4: Website Usability | Day 4

...is informed by

Accessibility

Usability

Universal Design

UNIVERSAL USABILITY

Page 5: Website Usability | Day 4

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.

Page 6: Website Usability | Day 4

USABILITYArises from User Centered Design (UCD).

Includes a broad and inclusive view of the user.

Page 7: Website Usability | Day 4

UNIVERSAL DESIGNNot just alternative designs to meet specific needs.

Accounts for users of all ages, experience levels, and physical or sensory limitations.

Page 8: Website Usability | Day 4

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:[email protected]

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)

Page 9: Website Usability | Day 4

UNIVERSAL DESIGN PRINCIPLESThese are most applicable to the web.

Page 10: Website Usability | Day 4

#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.”

Page 11: Website Usability | Day 4

#2 FLEXIBILITY IN USE“The design accommodates a wide range of individual preferences and abilities. Provide choice in methods of use.”

Page 12: Website Usability | Day 4

#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.”

Page 13: Website Usability | Day 4

#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.”

Page 14: Website Usability | Day 4

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.

Page 15: Website Usability | Day 4

Visual impairments

Hearing impairments

Mobile impairments

Cognitive impairments

TYPES OF DISABILITIES

Page 16: Website Usability | Day 4
Page 17: Website Usability | Day 4

STANDARD

Page 18: Website Usability | Day 4

HIGH- CONTRAST TEXT

Page 19: Website Usability | Day 4

ENLARGED TEXT

Page 20: Website Usability | Day 4

WITHOUT STYLING

Page 23: Website Usability | Day 4

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

Page 24: Website Usability | Day 4

Here’s what this headings box for the BBC homepage looks like in JAWS, one of the most popular screen readers:

Page 25: Website Usability | Day 4

WRITE DESCRIPTIVE LINK TEXTScreen reader users can call up a list of on page links.

Avoid “Click Here”, “Read More”

Page 26: Website Usability | Day 4

Here’s what this links list dialog displays for the BBC homepage in JAWS:

Page 27: Website Usability | Day 4

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

Page 28: Website Usability | Day 4

USE LOGICAL LINEARIZATIONScreen readers read top to bottom, left to right.

Avoid putting important information at the bottom (e.g. instructions for forms).

Page 29: Website Usability | Day 4

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.

Page 30: Website Usability | Day 4

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.

Page 31: Website Usability | Day 4

WRITE DESCRIPTIVE PAGE TITLESThis is the first thing a screen reader user hears.

Helps orient the user.

Page 32: Website Usability | Day 4

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).

Page 33: Website Usability | Day 4

normal

Page 34: Website Usability | Day 4

protanopia-red green

Page 35: Website Usability | Day 4

deuteranopia - red green

Page 36: Website Usability | Day 4

tritanopia - blue yellow

Page 37: Website Usability | Day 4
Page 38: Website Usability | Day 4

http://www.vischeck.com/

Page 39: Website Usability | Day 4

Sales by product

Sales by product

Page 40: Website Usability | Day 4

This is difficult to read.

This is easy to read.

Page 42: Website Usability | Day 4

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

Page 43: Website Usability | Day 4

FORMS

Page 44: Website Usability | Day 4

SIGN UP FORMSRemove ALL barriers to account creation.

Don’t make them recreate what they’ve already done.

Page 45: Website Usability | Day 4
Page 46: Website Usability | Day 4
Page 47: Website Usability | Day 4

WHY FORMS EXISTEvery form exists for one of three main reasons:

- Commerce

- Community

- Productivity

Web From Design: Filling in the Blanks, Luke Wroblewski

Page 48: Website Usability | Day 4

Uses of forms, based on Luke Wroblewski’s Web Form Design: Filling in the Blanks.

Page 49: Website Usability | Day 4

RELATIONSHIPA form is a way to establish a relationship with

the user and the organization.

Page 50: Website Usability | Day 4

TRUSTAchieved through logo, color, typography, and wording.

Page 51: Website Usability | Day 4

GOALSWhat is the goal of the form?

Page 52: Website Usability | Day 4

PURPOSEBase the name of the form on its purpose so users know what and why.

Page 53: Website Usability | Day 4

APPROPRIATE LANGUAGEBalance business needs with user needs.

Page 54: Website Usability | Day 4

NO SUPERFLUOUS QUESTIONSToo many questions cause user to question motivation.

Page 55: Website Usability | Day 4

NO SUDDEN CHANGE...in behavior or appearance – will make the user anxious.

Page 56: Website Usability | Day 4

Make it easy for registered users to log in and for new users to register

Page 57: Website Usability | Day 4

Simplify the process for registered and new customers

Page 58: Website Usability | Day 4

CONVERSATIONA form is a two-way conversation between

the user and the organization.

Page 59: Website Usability | Day 4

CONVERSE, DON’T INTERROGATEAvoid aggressive wording.

Page 60: Website Usability | Day 4

ORDER LABELS LOGICALLYShould reflect the flow of a conversation.

Page 61: Website Usability | Day 4

MORE INVOLVED QUESTIONS...should come towards the end.

Page 62: Website Usability | Day 4

GROUP RELATED INFORMATIONAddress one topic at a time.

Page 63: Website Usability | Day 4

Groups are related through purple headings and fine lines

Page 64: Website Usability | Day 4

Content is related, but the groups are separated too much. Potential for confusion.

Page 65: Website Usability | Day 4

ONE AT A TIMEThe flow from one set of questions to the next should resemble a conversation.

Page 66: Website Usability | Day 4

REMOVE CLUTTERBanners, unnecessary navigation, anything that might distract.

Page 67: Website Usability | Day 4

Effective use of white space

Page 68: Website Usability | Day 4

Tone is appealing, form has no superfluous questions

Page 69: Website Usability | Day 4

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

Page 70: Website Usability | Day 4

#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

Page 71: Website Usability | Day 4

Pretty, but difficult to scan

Page 72: Website Usability | Day 4

Individual words would have sufficed

Page 73: Website Usability | Day 4

#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

Page 74: Website Usability | Day 4
Page 75: Website Usability | Day 4

Vertical: when user types data their eyes are fixed across the vertical axis at the left to the input field

Page 76: Website Usability | Day 4

Eye needs to jump from one field to the other. Too much distraction.

Page 77: Website Usability | Day 4

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.

Page 78: Website Usability | Day 4
Page 79: Website Usability | Day 4

RADIO BUTTONSEasy to scan.

But if list is long, it’s hard for user to scan

Limit to groups of four to six options.

Page 80: Website Usability | Day 4
Page 81: Website Usability | Day 4

CHECK BOXESAllow for multiple selections.

Use single checkboxes for binary choices (yes, no).

Page 82: Website Usability | Day 4
Page 83: Website Usability | Day 4

#3 ACTIONSAvoid generic words like “Submit” as they lend a generic impression of the form.

Use descriptive words such as “Join LinkedIn”.

Page 84: Website Usability | Day 4

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.

Page 85: Website Usability | Day 4

Imagine clicking “Reset Form” by accident

Page 86: Website Usability | Day 4

“Register with us” would have been more helpful than submit

Page 87: Website Usability | Day 4

#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.

Page 88: Website Usability | Day 4

Both user-triggered help and dynamic help

dynamic help

user-triggered help

Page 89: Website Usability | Day 4

#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.

Page 90: Website Usability | Day 4

#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.

Page 91: Website Usability | Day 4

Uses dynamic validation and smart defaults

dynamic help{smart default

Page 92: Website Usability | Day 4

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.

Page 93: Website Usability | Day 4

5%2%

40%

18%

18%

17%

Create Account Register Join Sign Up Start Here Other

Page 94: Website Usability | Day 4

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%).

Page 95: Website Usability | Day 4

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/

Page 96: Website Usability | Day 4

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

Page 97: Website Usability | Day 4

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

Page 98: Website Usability | Day 4

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

Page 99: Website Usability | Day 4

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

Page 100: Website Usability | Day 4

EMOTION AND DESIGN

Page 101: Website Usability | Day 4

PRETTY THINGS WORK BETTER.

Norman D., 2004 Emotional Design: Why we love (or hate) everyday things

Page 102: Website Usability | Day 4
Page 103: Website Usability | Day 4
Page 104: Website Usability | Day 4

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

Page 105: Website Usability | Day 4
Page 106: Website Usability | Day 4

VISCERAL LEVELAutomatic, biological, universal.

Attractive faces,symmetrical objects, round objects, soothing colors and sounds.

Design implications in images, graphics, visual design, aesthetics.

Page 107: Website Usability | Day 4
Page 108: Website Usability | Day 4
Page 109: Website Usability | Day 4
Page 110: Website Usability | Day 4
Page 111: Website Usability | Day 4

AVOID STOCK IMAGESWe are drawn to friendly authentic faces. Not stock images.

Page 112: Website Usability | Day 4
Page 113: Website Usability | Day 4

Women

Page 114: Website Usability | Day 4

Men

Page 115: Website Usability | Day 4

COLOR EFFECTS EMOTION

Page 116: Website Usability | Day 4
Page 117: Website Usability | Day 4
Page 118: Website Usability | Day 4

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

Page 119: Website Usability | Day 4

BEHAVIORAL LEVELPerformance - how well a product works.

Usefulness - how useful is a product.

Function rules!

Usability is king!

Page 120: Website Usability | Day 4

BEHAVIORAL DESIGNis user friendly

Page 123: Website Usability | Day 4

123

Page 124: Website Usability | Day 4

TOP SEARCH ON YAHOO.COM“www.google.com”

Page 125: Website Usability | Day 4

REFLECTIVE LEVELStays long than visceral level.

Sense of exclusivity.

Sensitive to experiences, training, education.

Cultural differences relevant.

Page 126: Website Usability | Day 4

WHAT DOES THIS PRODUCT SAY ABOUT ME?

Page 127: Website Usability | Day 4

Behavioral Reflective

Page 128: Website Usability | Day 4

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

Page 129: Website Usability | Day 4

Break into three groups:

Find 3 sites that play well on emotions through design.

WORKSHOP #2 EMOTION & DESIGN

Page 131: Website Usability | Day 4

THANKS! WAS FUN.STAY IN TOUCH.


Top Related