cct384 – universal design and access
DESCRIPTION
CCT384 – Universal Design and Access. UD 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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/1.jpg)
CCT384 – Universal Design and AccessUD Principle: Perceptible Information
Week 4
![Page 2: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/2.jpg)
Use of Different Modes (Pictorial, Sound etc)
![Page 3: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/3.jpg)
Use of Different Modes (Pictorial, Sound etc)
![Page 4: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/4.jpg)
Use of Different Modes (Pictorial, Sound etc)
![Page 5: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/5.jpg)
Maximize Legibility of Information
![Page 6: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/6.jpg)
Maximize Legibility of Information
![Page 7: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/7.jpg)
Maximize Legibility of Information
![Page 8: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/8.jpg)
Maximize Legibility of Information
![Page 9: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/9.jpg)
Maximize Legibility of Information
![Page 10: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/10.jpg)
Differentiate elements in ways that can be described
![Page 11: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/11.jpg)
Differentiate elements in ways that can be described
![Page 12: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/12.jpg)
Differentiate elements in ways that can be described
![Page 13: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/13.jpg)
Provide compatibility with a variety of techniques
![Page 14: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/14.jpg)
Provide compatibility with a variety of techniques
![Page 15: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/15.jpg)
Provide compatibility with a variety of techniques
![Page 16: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/16.jpg)
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.
![Page 17: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/17.jpg)
Design of Everyday Things
![Page 18: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/18.jpg)
Usability Principles Visibility
Feedback
Constraints
Mapping
Affordance
![Page 19: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/19.jpg)
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
![Page 20: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/20.jpg)
Visibility Principle
![Page 21: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/21.jpg)
Visibility Principle
![Page 22: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/22.jpg)
Visibility principle
![Page 23: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/23.jpg)
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
![Page 24: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/24.jpg)
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
![Page 25: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/25.jpg)
What do I do if I am wearing black?
Invisible automaticcontrols can make it more difficult to use
![Page 26: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/26.jpg)
Visibility Know state of device and actions available
Natural design No explanations needed
What can I do with this technology?
What is it doing?
![Page 27: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/27.jpg)
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
![Page 28: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/28.jpg)
28
Class discussion What other examples of poor or good visibility can
you think of?
![Page 29: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/29.jpg)
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.
![Page 30: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/30.jpg)
Case Study 1: Multimedia CD-Rom
![Page 31: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/31.jpg)
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
![Page 32: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/32.jpg)
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)
![Page 33: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/33.jpg)
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)
![Page 34: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/34.jpg)
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)
![Page 35: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/35.jpg)
Case Study 1: Multimedia CD-Rom Other interactive exercises
Keyboard operable(Principle 1: Equitable Use)
(Principle 6: Low Physical Effort)
Keyboard shortcut not
listed
![Page 36: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/36.jpg)
Case Study 1: Multimedia CD-RomVideo
Captions(Principle 4: Perceptible)
Descriptions added to narration
(Principle 4: Perceptible)
![Page 37: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/37.jpg)
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.
![Page 38: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/38.jpg)
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)
![Page 39: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/39.jpg)
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)
![Page 40: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/40.jpg)
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)
![Page 41: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/41.jpg)
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)
![Page 42: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/42.jpg)
Case Study 2: Web-Based App Other interactive exercises
High contrast colour schemes
(Principle 4: Perceptible)
![Page 43: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/43.jpg)
Activity
Applying Universal Design – from learning to practice
![Page 44: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/44.jpg)
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
![Page 45: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/45.jpg)
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.
![Page 46: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/46.jpg)
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
![Page 47: CCT384 – Universal Design and Access](https://reader033.vdocuments.us/reader033/viewer/2022051421/56816606550346895dd937a4/html5/thumbnails/47.jpg)
Next class Next class: Universal Design Principle: Cognitively
Sound
Readings: Erlandson, Chapter 8