[Draft] Module 4: Interaction Design [WIP]
Introduction
Courses based on this module should:
- explain strategies that people with disabilities use to interact with components
- describe accessibility requirements related to input methods, including mouse, keyboard, touch, and voice
Learning Outcomes for Module
Students should be able to:
- explain strategies that people with disabilities use to interact with components
- design user experiences for different input methods, including mouse, touch, keyboard, and speech
- define keyboard interactions and meaningful sequences inside complex widgets, including buttons, carousels, sliders, tabs, and treeviews
- evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope
- identify related requirements for developers to code interactions for components, including through mouse, keyboard, touch, and voice
Competencies
Skills required for this module:
Students
- Foundation Prerequisites
- Prior Designer Modules
- Knowledge of:
- Visual Design
- Prototyping
- Responsive Design
- Information Design
- Interaction Design
Instructors
- Applied expertise in teaching:
- WCAG Success Criterion 1.3.1 Info and Relationships
- WCAG Success Criterion 1.3.2 Meaningful Sequence
- WCAG Success Criterion 1.3.3 Sensory Characteristics
- WCAG Success Criterion 1.3.4 Orientation
- WCAG Success Criterion 1.4.1 Use of Color
- WCAG Success Criterion 1.4.3 Contrast (Minimum)
- WCAG Success Criterion 1.4.4 Resize Text
- WCAG Success Criterion 1.4.6 Contrast (Enhanced)
- WCAG Success Criterion 1.4.8 Visual Presentation
- WCAG Success Criterion 1.4.10 Reflow
- WCAG Success Criterion 1.4.11 Non-Text Contrast
- WCAG Success Criterion 1.4.12 Text Spacing
- WCAG Success Criterion 2.1.1 Keyboard
- WCAG Success Criterion 2.1.2 No Keyboard Trap
- WCAG Success Criterion 2.2.1 Timing Adjustable
- WCAG Success Criterion 2.2.5 Re-Authenticating
- WCAG Success Criterion 2.2.6 Timeouts
- WCAG Success Criterion 2.4.3 Focus Order
- WCAG Success Criterion 2.4.6 Headings and Labels
- WCAG Success Criterion 2.4.7 Focus Visible
- WCAG Success Criterion 3.3.1 Error Identification
- WCAG Success Criterion 3.3.3 Error Suggestion
- WCAG Success Criterion 3.3.4 Error Prevention
- WCAG Success Criterion 4.1.3 Status Messages
- In-depth knowledge of:
- Foundation Prerequisites
- Prior Designer Modules
- Visual Design
- Prototyping
- Responsive Design
- Information Design
- Interaction Design
- Basic knowledge of coding techniques
Topics to Teach
Topics to achieve the learning outcomes:
Topic: Keyboard Interaction
Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain that providing custom keyboard interactions can favor efficiency but can also disrupt the users’ expectations. Thus, designers need to document these interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers’ responsibility, whereas implementing such interactions is a responsibility shared with the developer.
Learning Outcomes for Topic
Students should be able to:
- design user experiences for keyboard navigation through and inside components, for example:
- using the tab key to move through different components
- using the enter key to enter a specific component and to select a specific item on a component
- using the arrow keys to move through elements inside components, including application menus, dialogs, list items, and grid cells
- using the escape key to exit components
- using first letter navigation to jump to specific pieces of data in lists and grids
- specific keyboard shortcuts to support efficiency
- identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default
- evaluate the use of custom keyboard interactions and select keyboard interactions that avoid conflicts with the operating system, browser, and assistive technologies when possible
- cooperate with developers to provide mechanisms to remap or disable conflicting shortcuts
- define methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications
- define focus indicators that are visible and that have appropriate contrast ratios for complex widgets
- identify related requirements for developers to implement keyboard support for components that have no keyboard support by default
Teaching Ideas for Topic
Optional ideas to teach the learning outcomes:
- Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets, as these are mostly expected by users.
- Reflect with students about keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers need to work closely with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and working with developers to implement such keystrokes.
- Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible.
- Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using such shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help mechanisms is a designers’ responsibility, whereas implementing them is a responsibility shared with the developer.
Ideas to Assess Knowledge for Topic
Optional ideas to assess knowledge:
- Short Answer Questions — Ask students about commonly used modifier keys of operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies.
- Practical — Present students with a user interface that can be interacted only with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible.
- Practical — Students work with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students work with other team members to develop strategies that avoid custom keyboard shortcut conflicts.
Topic: Gestures and Motion
Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, some others may not be able to perform them at all. Discuss some alternatives to motion-based gestures.
Discuss some gestures that require dragging and drawing specific paths on a touch screen. Explain that these are difficult (and sometimes impossible) to perform for some people with mobility impairments.
Learning Outcomes for Topic
Students should be able to:
- use components that do not require motion as an alternative for device or user motion such as shaking
- design methods to disable response to motion to prevent accidental actuation, for example undoing an action by shaking a device
- design alternatives to multi-pointer gestures (including swipe or pinch) using single pointer activation
- design methods to undo or abort an action carried out with path-based operations
Teaching Ideas for Topic
Optional ideas to teach the learning outcomes:
- Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require motion for these gestures.
- Show examples of gestures such as swipe or pinch. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require swiping or pinching to perform an action.
- Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so user interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures.
Ideas to Assess Knowledge for Topic
Optional ideas to assess knowledge:
- Practical — Give students an interface that uses a motion-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to motion-based gestures.
- Practical — Give students an interface that uses a multi path-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to multi-pointer and path-based gestures.
Ideas to Assess Knowledge for Module
Optional ideas to assess knowledge:
- Practical &mdash: Give students a web email client and ask them to provide the necessary custom keyboard shortcuts. Assess how students balance the use of standard versus custom keyboard shortcuts.
- Portfolio — Students design the interactions for a given interface. Assess how students design user experiences for different input methods, including mouse, touch, keyboard, and speech.
Teaching Resources
Suggested resources to support your teaching:
- How People with Disabilities Use the Web — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use.
- Keyboard Compatibility (Web Accessibility Perspectives) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
- Colors with Good Contrast (Web Accessibility Perspective) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
- Clear Layout and Design (Web Accessibility Perspective) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
- Large Links, Buttons, and Controls (Web Accessibility Perspectives) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
- Notifications and Feedback (Web Accessibility Perspectives) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
- WCAG — Address accessibility of web content on desktops, laptops, tablets, and mobile devices.