Interactive Design Lesson Ideas

[Author: Bill Fischer]

Overview

Here are some ideas for lessons, categorized according to 'Bloom's Taxonomy' and integrating Debroah Meier's 'Five Habits of Mind'.

  • [18 hours of instruction Total]

Learning Outcomes:

    1. Remember the attainability, responsiveness, and cognitive load factors that determine how we will experience interactive media.

    2. Understand the concepts underlying an 'art and design citizenship' mind-set that will lead students to create for a sensory and physically diverse population.

    3. Apply digital simulation tools and internet searches to test the WCAG 2.2 compliance of current web media

    4. Analyze and evaluate the effect that universal design constraints have on the design of interactive media.

    5. Create a website that applies the universal design constraints in a practical use-case scenario.

Anticipatory Set:

  • [30 minutes]

Connecting: Ask each student or trainee to close their eyes, and hold up a finger for every 'yes' to the questions below. Then have them open their eyes and hold up their hands. There will be a lot of fingers. This will let them know that these are not obscure conditions that we are designing for and that we are all touched, directly or indirectly, by variations in abilities.

Have you or someone you know...

  1. Lived with vision impairments?

  2. Lived with hearing impairments?

  3. Lived with physical impairments?

  4. Had temporary vision, hearing, or physical due to surgery or injury?

  5. Had situations where colors, images , or text were difficult to see on a digital device due to bright lights, or dim screens?

  6. Had situations where any media or products were difficult to read or understand due to overly complex navigation, or complicated screen layouts?

  7. Had situations where fatigue has negatively influenced you ability to read or understand products or media of any kind?

Experiencing: Using the WCAG Checker called WebAim (external link), students can check their favorite websites for accessibility compliance.



Remember

  • [120 minutes]

Responsiveness

Use an online search engine to: find definitions of and explanations for:

  • Americans With Disabilities Act Section 508 (ADA)

  • WCAG standards

Work in groups to assemble and present the knowledge gained from the research. Google Slides is a good way to create presentations collaboratively.

Attainability

Watch the screen-reader video demonstrations.

Use a quiz or written exam to test student's understanding of how screen readers work.

Cognitive Load

Use an online search engine to: find definitions of and explanations for these design principles:

  • Signal and Noise

  • Discoverability

  • Affordance

  • Reaction

  • Feedback

  • Recovery

Work in groups to assemble and present the knowledge gained from the research. Google Slides is good way to create presentations collaboratively.



Understand

  • [30 minutes]

Review and Engage in a discussion or writing assignment that is prompted by the following (five habits of mind) questions.

Why is it important to create designs that will respond to persons with every kind of sensory and physical ability?

Do you feel like applying universal interactive design will unduly restrict your creative options?

How might a blind person experience a web page in comparison to a sight-typical person. And, how can we understand that?

How does universal interactive design affect:

  • Physically-impaired persons

  • Sight-impaired persons

  • Cognitively-impaired person

What would happen if:

  • We did not have the contemporary digital accessibility checking tools available to us now?

  • We ignored universal color design when we create as artists and designers?



Apply

  • [30 minutes to obtain the digital tools] [60 minutes to capture and add evidence]

Tools

Check a site, of the student's choice, in the WCAG Checker called WebAim (external link) against these criteria:

    • Image alt tag presence

    • Contrast errors

    • Incorrectly named links

    • Proper use of headers

    • Correct information-driven visual hierarchy

    • Also check on the site: good use of information grouping and spacing (The Wave checker will not do this, so it will be a human endeavor.

Experience how color is affected by human biology and environmental influences by:

    • While looking at the chosen website, turn all of the room lights on, then off. Take note of the difference in how well the screen can be seen.

    • Use the NoCoffee Chrome plugin (external link) to experience the website through the eyes of a color-blind person.

Add photographs and screen captures to the slideshow from the 'Remember' section.



Analyze

  • [90 minutes]

Based on the analysis from the apply section, write an action plan for how to correct the following issues:

    • Image alt tag presence

    • Contrast errors

    • Incorrectly named links

    • Proper use of headers

    • Correct information-driven visual hierarchy

    • Good use of information grouping and spacing.

Add the action plan to the slideshow from the 'Remember' section.


Evaluate

  • [60 minutes]

Create a screen capture of the website that was analyzed, and adjust the color, contrast, layout layout to improve the grouping, spacing, visual hierarchy, and contrast,

Photoshop is a perfect tool for this

Students can self-evaluate, evaluate their classmates, or evaluate as a group. Photoshop is a perfect tool for this.



Create

  • [9 hours]

Create a simple working website or mock-up that aims to excel in these design goals

    • Image alt tag writing

    • Contrast

    • Well named links

    • Proper use of headers

    • Correct information-driven visual hierarchy

    • Good use of information grouping and spacing.

A rubric for assessing the layout

  • [60 minutes]

  • Are descriptive alt tags included for all images. They need to succinctly describe the image? If the image serves as a link, it should include the link destination.

    • An example of a bad tag: figure 2

    • An example of a good tag: cartoon of a dog in a window barking at a postal delivery woman approaching a house on foot.

    • An example of a tag with a link destination: fish icon: links to the fishing guide

  • Is all text contrast between 7:1 and 16:1?

  • Are all iconography contrast between 3:1 and 16:1?

  • Are the headers in Hierarchical/chronological order? For example:

    • Title, Heading, Sub-heading, Normal

    • H1, H2, H3, H4, Normal

  • Is it clear, at a glance what the most important, second most important, and third most important pieces of information on the page are.

  • Are sets of related information grouped with generous margins around them?