Universal Design Principles

Progressive Enhancement

One way to think of the relationship between Accessible and Universal Design is to create one-size-fits-all media using "progressive enhancement":

    1. Create the content in a visual narrative form that can be navigated and understood as text alone (semantic design). When that text is either read or heard by the user/audience, they should have an experience that is complete, both emotionally and narratively.
    2. Enhance the experience with graphics, illustration, motion and sound design. This enhancement will engage more parts of the brain for those that can receive it through their available senses and physical abilities (both permanent and situational)
      • "Permanent" could mean being sight or hearing impaired, for example.
      • "Situational" could mean external forces such as being in a quiet room without headphones while watching a video.

Progressive Enhancement Example

Video Writing Example 1

(2 versions needed - one with audio description and one without):

    • Narrator says: Sometimes I wonder what my dog is thinking
    • Image shows: Person on their knees looking directly into a dog's eyes from 6 " away

Video Writing Example 2

(1 version needed - because the narrator describes the visual action):

    • Narrator says: Sometimes I stare directly into my dog's eyes, wondering what she is thinking
    • Image shows: Person on their knees looking directly into a dog's eyes from 6 " away

Responsive versus Adaptive Design

Responsive design allows for the abled and disabled to experience media together. Adaptive design offers multiple modes of access to media to accommodate special needs and is used when a universal, shared, experience is not viable due to technology, costs or other reasons.

Multiple Modes of Access

The concept of multiple modes of access involves creating multiple means for engagement that can be accessed by persons with multiple means of sensory abilities. It is a judgement call as to how different modes can provide a qualitatively equal experience. Comparing a VR app to a website or an instructional video to a text document or an interactive game to one on one tutoring is like comparing apples to oranges. What we must do is apply our best creative and production processes within the capabilities of each medium in which we are producing.

Universal Design advocate Jean Hanks likes to use the Harry Potter franchise as an example. When fans are asked which they prefer; the books or the films, the most typical response is that they are different but qualitatively equal experiences.


This concept was applied to design by Donald Norman in his book The Psychology of Everyday Things in 1988. According to Norman:

  • "...the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. [...] Affordances provide strong clues to the operations of things. Plates are for pushing. Knobs are for turning. Slots are for inserting things into. Balls are for throwing or bouncing. When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed." (Norman 1988, p.9)
  • False affordance is as bad or worse than missing affordance. For instance, graphic that looks like a button, but isn't, creates a situation where the user is prompted to get an error (when they try to click or touch the "button" and nothing happens).

Affordance Examples

In web design, affordances can be:

  • Underlining text links
  • Maintaining consistency of formatting from page to page
  • Consistency of visual queues throughout the media
  • Accompanying icons with text

In Video and Animation, affordances can be:

  • Title cards
  • Establishing scene shots
  • Clear, narrative-driven visual hierarchy
  • Writing in a visual narrative style

In Imaging, affordances can be:

  • Clear, narrative-driven visual hierarchy
  • The inclusion of these elements:
    • Place
    • Time
    • Story

Cognitive Load

Cognitive load is any additional thinking a user may have to employ to navigate a digital or physical environment. This includes anything that the design asks people to remember, then apply later. It also happens when a user interface is inconstant from instance to instance in a way that asks the user to re-figure-out how to use it. Menus that collapse ask the user to play a memory game... hmm... let's see... which collapsed menu contained that button I'm looking for? That's cognitive load. And it distracts from why the user is there in the first place which is to experience the content, not the navigation.