CCT384 – Universal Design and AccessUD Principle: Perceptible Information

Week 4

Use of Different Modes (Pictorial, Sound etc)

Use of Different Modes (Pictorial, Sound etc)

Use of Different Modes (Pictorial, Sound etc)

Maximize Legibility of Information

Maximize Legibility of Information

Maximize Legibility of Information

Maximize Legibility of Information

Maximize Legibility of Information

Differentiate elements in ways that can be described

Differentiate elements in ways that can be described

Differentiate elements in ways that can be described

Provide compatibility with a variety of techniques

Provide compatibility with a variety of techniques

Provide compatibility with a variety of techniques

Principles of Universal Design

Perceptible Information

The design communicates necessary information effectively to the user, regardless of ambient conditions or the user's sensory abilities. Related to Norman’s Principles of “Visibility and Feedback” and

“Constraints”.

Ex. Customizable display fonts and colours. Benefits people with low vision or colour blindness as well as

people who are pre-occupied by another task.

Design of Everyday Things

Usability Principles Visibility

Feedback

Constraints

Mapping

Affordance

Visibility Principle

For more detailed descriptions read Don Norman’s “The Design of Everyday Things”

• Visibility – Make core user functions clearly apparent

•(e.g., toolbars vs. Menus) – Hide secondary user functions – Visible properties guide users as to what todo next – Structure enhances visibility

Visibility Principle

Visibility Principle

Visibility principle

Visibility

• This is a control panel for an elevator.

• How does it work?

• Push a button for the floor you want?

• Nothing happens. Push any other button? Still nothing. What do you need to do?

It is not visible as to what to do!From: www.baddesigns.com

Visibility

…you need to insert your room card in the slot by the buttons to get the elevator to work!How would you make this action more visible?

• make relevant parts visible• make what has to be done obvious

make the card reader more obvious provide an auditory message, that says what to do (which language?) provide a big label next to the card reader that flashes when someone enters

What do I do if I am wearing black?

Invisible automaticcontrols can make it more difficult to use

Visibility Know state of device and actions available

Natural design No explanations needed

What can I do with this technology?

What is it doing?

Visibility

Poor visibility: Boeing 757 Flight Management System did not show

names of beacons when selecting where to navigate

Good visibility: Google search page makes it clear where you can

enter search text

28

Class discussion

What other examples of poor or good visibility can you think of?

Case Study 1: Multimedia CD-Rom

The Digital Field Trip is a popular series for teaching topics in high school biology.

The accessibility improvements were performed as part of a pre-planned upgrade.

Students with visual and other disabilities were included in the user testing.

We used active accessibility.

Case Study 1: Multimedia CD-Rom

Case Study 1: Multimedia CD-Rom Original point-and-click interface

Most controls mouse-drivenText in

images

Large buttons(Principle 7: Appropriate Size)Relatively simple layout

(Principle 3: Simple/Intuitive)

“Back” Function(Principle 5: Error

Tolerant)

Image-rich content

Case Study 1: Multimedia CD-Rom Keyboard navigation

Focus indicator(Principle 4: Perceptible)

TAB key navigation(Principle 1: Equitable Use)

(Principle 6: Low Physical Effort)

Voice output of navigation

information(Principle 4: Perceptible)

Mouse-only use still available

(Principle 2: Flexible Use)

Case Study 1: Multimedia CD-Rom Panoramic field trip viewer

Keyboard control and descriptions of viewer(Principle 1: Equitable Use)

(Principle 4: Perceptible)(Principle 6: Low Physical Effort)

Text-to-speech of content

(Principle 2: Flexible Use)(Principle 4: Perceptible)

Case Study 1: Multimedia CD-Rom Audio descriptions of images

Keyboard operable controls

(Principle 1: Equitable Use)(Principle 6: Low Physical

Effort)

Descriptions of images

(Principle 4: Perceptible)

Case Study 1: Multimedia CD-Rom Other interactive exercises

Keyboard operable(Principle 1: Equitable Use)

(Principle 6: Low Physical Effort)

Keyboard shortcut not

listed

Case Study 1: Multimedia CD-RomVideo

Captions(Principle 4: Perceptible)

Descriptions added to narration

(Principle 4: Perceptible)

Case Study 2: Web-Based App

The project was to develop an accessible Web-Base chat application.

The result was A-Chat.

We recruited user testers who are blind, have low vision, or who have mobility impairments.

We used passive accessibility.

Case Study 2: Web-Based App Main Window

Undo for most functions(not “Message Send”)(Principle 5: Error Tolerant)

Simple Layout(Principle 3: Simple/Intuitive)

Screen Reader-Friendly Text and Controls

(Principle 4: Perceptible)Same product used by

everyone.(Principle 1: Equitable Use)

Enables keyboard navigation(Principle 1: Equitable Use)

(Principle 6: Low Physical Effort)

Case Study 2: Web-Based App Preferences I

Screen refresh options(Principle 2: Flexible Use)

Preferences(Principle 2: Flexible Use)

New message chime(Principle 4: Perceptible)

Help for AT users(Principle 2: Flexible Use)

Case Study 2: Web-Based App Preferences II

Order of message can be “old to new” or “new to old”

(Principle 2: Flexible use)

“New messages only” function(Principle 3: Simple/Intuitive)

Case Study 2: Web-Based App Preferences III

Display preferences(Principle 4: Perceptible)

(Principle 7: Appropriate Size)

Navigation Aids(Principle 1: Equitable Use)(Principle 2: Flexible Use)

(Principle 3: Simple/Intuitive)

Case Study 2: Web-Based App Other interactive exercises

High contrast colour schemes

(Principle 4: Perceptible)

Activity

Applying Universal Design – from learning to practice

Activity

Do this on your own groups

Go find two examples of problems in the GUIs of software apps or the UI of a interactive device (not Web pages) Problem must illustrate a violation of the

perceptible information principle Describe the problems in these terms

“Post” on the wiki page before end of class

Group ExerciseThe following is the user interface for an application. It allows a customer of an insurance agency to submit a claim form for damage to their automobile

The customer can fill out the textboxes then click on the image of the automobile to enter a description of the damage. For example, if the door is dented, the customer can click on the door. A dialog box will appear that allows the user to enter a description of damage to the door. When the user is done the dialog box is closed. The user can click on the door again to view or edit what was previously entered.

Critique this interface in terms of the fundamental design principles discussed in class, and suggest an alternate interface.

References

The Principles of Universal Design‚ Version 2.0 (1997) by North Carolina State University (as cited in Preiser & Ostroff ‚ 2001)

Center for Universal Design (US) Home of the Principles of Universal Design, Exemplars of Universal Design, universal design history, the Design File, Center for Universal Design Newsline, publications, and more. http://www.design.ncsu.edu/

CAST (US) Home of Bobby, the web accessibility analysis tool, Universal Design in Learning and the National Center On Accessing the General Curriculum, and eProducts. http://www.cast.org

DO-IT: Disabilities, Opportunities, Internetworking, and Technology, http://www.washington.edu/doit/

Adaptive Environments Center (US) Home of the South Boston Waterfront Project, Designing for the 21st Century Conference, Access to Public Schools, New England ADA Technical Assistance Center, universal design education and consulting, Access to Design Professions, publications and more. http://www.adaptenv.org

Accessible Electronic & Information Technology: Legal Obligations of Higher Education and Section 508, Cynthia D. Waddell, J.D., 1999, http://athenpro.org/node/54

Next class

Next class: Universal Design Principle: Cognitively Sound

Readings: Erlandson, Chapter 8