Module 4: Interaction Design

Introduction

Courses based on this module should:

Learning Outcomes for Module

Students should be able to:

Competencies

Skills required for this module:

Students

Instructors

Topics to Teach

Topics to achieve the learning outcomes:

Topic: Keyboard Interactions

Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support benefits other ways of interacting, including speech interaction and effective use of some assistive technologies.

Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the user’s expectations. Designers must document these custom interactions and make them consistent throughout the interface. Emphasize that defining keyboard interactions is a designer’s 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 of websites and applications, for example using:
    • the tab key to move through different components in a meaningful sequence
    • the enter key to access a component and to select a specific item on a component
    • the arrow keys to move through elements inside components, including sliders, tabs, dialogs, application menus, and tree views
    • the escape key to exit components
    • meaningful sequences across web pages and applications and inside complex widgets
    • additional keyboard shortcuts to reveal, review, and dismiss notifications
    • additional keyboard shortcuts to support efficiency
    • first letter navigation to jump to specific pieces of data in lists and grids
  • identify situations when additional keyboard shortcuts are necessary, for example when designing a custom functionality that is not keyboard supported by default
  • explain how keyboard support benefits other ways of interacting, including speech interaction and interaction using assistive technologies
  • evaluate the use of custom keyboard interactions
  • select keyboard interactions that do not conflict with the operating system, browser, and assistive technologies when possible
  • specify methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications
  • design consistent placement and appearance of focus indicators
  • collaborate with developers to:
    • provide methods to remap or disable conflicting shortcuts
    • programmatically set focus in complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications
    • 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, the use of the tab key to move through user interface components in a meaningful sequence, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions must be preserved as much as possible when designing custom widgets, as users mostly expect these.
  • Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers must collaborate with other team members, including developers and user researchers, on strategies to include custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. For information on developing custom keyboard interfaces, see WAI-ARIA Authoring Practices Developing a Keyboard Interface
  • 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.
  • Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using spoken commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support.
  • Refer back to Designer Module 1: Visual Design, Topic Orientation Cues to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, designers must consider programmatic keyboard focus when providing keyboard support. Emphasize that designers must collaborate with other team members, including developers and user researchers, to design user experiences that use focus placement to reflect changes of context and user interaction.
  • 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 those shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designer’s 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 the commonly used modifier keys in operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies.
  • Practical — Give students an interface and ask them to provide its keyboard interactions. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible.
  • Practical — Have students collaborate with developers to include custom keyboard shortcuts that do not conflict with existing operating system and assistive technology keystrokes. Assess how students collaborate with developers to develop strategies that avoid custom keyboard shortcut conflicts.
  • Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance as well as meaningful sequences depending on user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement as well as meaningful sequences.

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, while others may not be able to perform them at all. Present alternatives to motion-based gestures, for example providing methods to undo, abort, and reverse actions performed using complex gestures.

Discuss gestures that require dragging and drawing specific paths on a touch screen. Explain the difficulties these may present for some people with disabilities. Present approaches to using complex gestures appropriately.

Learning Outcomes for Topic

Students should be able to:

  • specify alternatives to multi-pointer gestures (including swiping, pinching, and drawing shapes) by using single pointer activation
  • apply methods to undo or abort an action carried out with path-based gestures, including use of the up event to undo, abort, and reverse activation
  • specify alternatives for device or user motion, for example components performing the same function that do not require user motion
  • apply methods to disable response to device or user motion to prevent accidental activation
  • design user experiences that consider larger target sizes for pointer inputs

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

  • Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty performing such gestures. Therefore, interfaces must have alternatives that do not require swiping or pinching to perform an action.
  • Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty performing such gestures. Therefore, interfaces must have alternatives that do not require motion for these gestures.
  • 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. Therefore, interfaces must support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures.
  • Refer back to Designer Module 1: Visual Design, Topic Flexible Layouts. Explain that larger target sizes for pointer inputs are recommended where possible. The minimum recommended size is forty-four by forty-four CSS pixels.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

  • 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.
  • 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.
  • Short Answer Questions — Ask students what the recommended minimum target size is for pointer inputs. Assess how students provide the minimum target size for pointer inputs.

Ideas to Assess Knowledge for Module

Optional ideas to assess knowledge:

Teaching Resources

Suggested resources to support your teaching:

Back to Top