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'.
Learning Outcomes
Remember the attainability, responsiveness, and cognitive load factors that determine how we will experience interactive media.
Understand the concepts underlying an 'art and design citizenship' mindset that will lead students to create for a sensory and physically diverse population.
Apply digital simulation tools and internet searches to test the WCAG 2.2 compliance of current web media
Analyze and evaluate the effect that universal design constraints have on the design of interactive media.
Create a website that applies the universal design constraints in a practical use-case scenario.
Anticipatory Set
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...
Lived with vision impairments?
Lived with hearing impairments?
Lived with physical impairments?
Had a temporary vision, hearing, or physical condition due to surgery or injury?
Had situations where colors, images, or text were difficult to see on a digital device due to bright lights, or dim screens?
Had situations where any media or products were difficult to read or understand due to overly complex navigation, or complicated screen layouts?
Had situations where fatigue has negatively influenced your 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
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.
Attainability
Watch the screen-reader video demonstrations.
Use a quiz or written exam to test students' understanding of how screen readers work.
Cognitive Load
Use the I-See-U search function to find definitions of and explanations for:
Cognitive load management methods
Use a quiz or written exam to test students' understanding of interactive design that manages cognitive load.
Understand
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
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 SilkTide Chrome extension (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
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
Create a screen capture of the website that was analyzed, and adjust the color, contrast, 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
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
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 4.5: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?