Universal Design Principles

[Author: Bill Fischer]

Universal Design

  • Responsive design maximizes the user experience for multiple modes of access. The media can respond to the user no matter what their permanent or temporary disability may be.
  • This approach inevitably leads to a better experience for abled persons as well.
  • Universal design allows disabled persons to participate in society as full members alongside their abled counterparts.

Accessible Design

  • Accessible design provides one or more alternative and separate versions of media that are specifically targeted for persons with specific disabilities.
  • Though this separates the disabled from simultaneous media consumption with their abled counterparts, it is sometimes the only method available due to technology, distribution or budget constraints.


Attainable Design

  • The attainability of information has been supercharged by digital hardware and networks that can deliver searchable media containing text, audio, animation, video, and interactivity in a singular product.
  • The cell phone is the lowest common denominator. If a household owns only one digital device, it is probably a cell phone. Video can deliver text, audio and visual media, and that allows simultaneous multiple modes of access.


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 can be 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. Media creators must assess 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.

Progressive Enhancement

One way to think of the relationship between Accessible and Universal Design is to create one-size-serves-all media using "progressive enhancement". This starts with text, or as the author of the Harry Potter book series, JK Rowling, wrote (for the character Dumbledore) "Words are, in my not so humble opinion, our most inexhaustible source of magic." This declaration is certainly true when thinking about media that can be accessed by all.

    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 or being mentally exhausted after a long day.

Progressive Enhancement Writing 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
    • Video 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
    • Video shows: Person on their knees looking directly into a dog's eyes from 6 " away

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.

Affordance

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