Embrace 7 Principles of Universal Design for Better Website Design

Lela Kodai by Lela Kodai

Embrace 7 Principles of Universal Design for Better Website Design

Lela Kodai

posted in Design on July 2, 2015 by Lela Kodai

People have been studying design for ages, but we rarely see much crossover in the design fields. For example, using web design principles are not the only way to design websites. In fact, we web designers can learn a lot from other design approaches to create stronger, more inclusive experiences, on a strong foundation for lasting products.

The most prominent example comes from a team of non-web designers at North Carolina State University, who laid down some truly universal concepts for good design. They called this series of concepts the 7 Principles of

Universal-Design

So why don’t we learn from them? When we apply universal design principles to web design it’s a win-win.

The Origins

The term "Universal Design" was coined by Ronald Mace and a team of architects, product designers, and engineers in the 90’s. However, the principles were originally created for architecture and appliances, not websites.

Mace spent much of his career at North Carolina State University, working toward the idea of designing “all products and the built environment to be aesthetic and usable to the greatest extent possible by everyone, regardless of their age, ability, or status in life.” according to NC State.

Are these values not the same values we have (or should have) in tech design? Let’s breakdown these principles, and you’ll see how this architecture business extends to the digital realm:

1. Equitable Use

“The design is useful and marketable to people with diverse abilities.”

equitable-use

As the name implies, the first principle is simply about providing an equal way for your users to access features and information. Avoid segregating any group of people because of personal restrictions and/or device capabilities.

For example:

  • High Contrast: Having high contrast helps both users with weak vision, and users simply standing in the sunlight.
  • Alt Texts: Screen readers need alt texts, of course, but they also help users on slow or unstable connections, and act as a fallback if the image path is broken.
  • Mouse-Only Interactions: Hiding information behind a mouse-only interaction (like hover or double-click) makes it impossible to access for many users. Devices without pointers are in the majority, which changes the interaction ‘abilities’ of your users regardless of their personal physical state.

2. Flexibility in Use

“The design accommodates a wide range of individual preferences and abilities.”

flexibility-in-use

This is largely about giving users a choice on how and when they access features, rather than forcing them into places they don’t want to be. Have enough flexibility in your solutions for user adaptations, and they will have a more pleasant experience. Everyone enjoys a touch of personal customization.

For example:

  • Scroll-Jacking: The arguments against scroll-jacking are often in line with this principle. If you take away the user’s ability to navigate your website at their own speed, they may not have time to take everything in. This can get frustrating, causing them to leave.
  • Text Resizing: Allow for the sizing up and down of text in your layouts. A simple browser or OS text adjustment shouldn’t ruin your beautifully crafted application.

3. Simple and Intuitive Use

“Use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or current concentration level.”

how-does-this-work

Every tech designer has heard their client say they want an easy to use application. Good design, is often defined as being intuitive to the user, and the simpler the design is, the more likely users are to achieve their goals. Unfortunately, this is easier said than done.

There are loads of blog posts about making designs more intuitive. I recommend Jared Spool’s great article What Makes A Design Seem ‘Intuitive’?, and Heidi Pungartnik’s article 15 Timeless Rules for Creating Intuitive Web Apps (With Examples) to get started.

4. Perceptible Information

“The design communicates necessary information effectively to the user, regardless of ambient conditions or the user's sensory abilities.”

perceptible-information

In the land of the internet, this principle is tightly coupled with the first principle, Equitable Use. Websites are, by and large, fancy ways of conveying information.

For example:

  • Information Organization: Besides having adequate text contrast and sizing, breaking your information down into easily digestible pieces will make your content more accessible. Specifically, things like using subheadings in a long text post will make speed reading and skimming more effective.
  • Graphics: A graphic to emphasize a point you’re making in text helps more visual users (and can convince a skimmer to slow down and read more closely).
  • Charts and Graphs: Supplying both graph and table views of data allows users not only the flexibility to choose how to get information (#2 Flexibility in Use), but also can help make patterns in the data more discernible. Who doesn’t want that?

5. Tolerance for Error

“The design minimizes hazards and the adverse consequences of accidental or unintended actions.”

greyhound-couch-biff

Everyone accidentally clicks or taps a part of their screen, and everyone has changed their mind mid-action, regardless of physical or mental agility. Ensuring that a user can’t trap themselves in a corner, or accidentally cause irreversible damage to their information is paramount to keep users around. Users who are afraid of making a mistake won't want to use the product at all.

For example:

  • Avoiding Accidents: Account for these inevitabilities by putting permanent functions inside menus and/or behind “are you sure?” confirmation prompts. This makes them harder (practically impossible) to accidentally execute.
  • Allow for Undo: An alternative to prompting users all the time is to give them an “undo” option, or a way to dig into archives to retrieve old items.

6. Low Physical Effort

“The design can be used efficiently and comfortably and with a minimum of fatigue.”

low-physical-effort

There are two aspects to this principle. The first is very literal: don’t require your users to go back and forth across the screen to complete a single workflow. The second aspect is more about mental fatigue, and perceived difficulty of the task at hand.

For example:

  • Action Grouping: Group actions together in specific areas of the screen. This minimizes the amount of mouse dragging or thumb stretching needed, which is helpful for anyone. It is especially helpful for users with either very large screens, or for users who have super-zoomed into their operating system and have to scroll through interfaces that would normally fit on a "default" screen.
  • Minimize Requests: Don’t require users to fill out lengthy forms or jump through multiple ‘hoops’ to gain access to their goal (account creation, a trial period of your application, a sample of a new book etc.). The less effort you require, the more involvement you’ll get.

7. Size and Space for Approach and Use

“Appropriate size and space is provided for approach, reach, manipulation, and use regardless of user's body size, posture, or mobility.”

size-and-space

This ties into the 6th concept of having low physical effort by keeping your actions grouped together. How you use screen real estate is important to the overall experience inside the application.

For example:

  • Action Targets: Take into account varying hand size and dexterity, especially for one-handed mobile device use. Make action targets large enough to click or tap easily, and put your primary actions within easy reach.
  • Posture: Some users are walking down the street, laying in bed, or doing other things that may make their reach a challenge. We can’t assume all users are sitting in a chair, at a desk, with a keyboard and mouse.
  • Dynamic Spaces: Virtual keyboards (and other accessibility tools) cover part of the screen. Keep dynamic space usage in mind through all states of onscreen keyboards, dropdown menus, etc. to avoid causing the user to block their own actions forward.

Onward

These fundamentals of equity, flexibility, simplicity, perceptibility, error tolerance, low effort, and appropriate sizing should stick with you throughout your design process. Whether you’re designing websites or buildings, these universal design principles will help us create better experiences for everyone.

We should all be taking these concepts and using them to the advantage of our projects and our users. Let's look to other fields for inspiration, and seek out the solutions other designs have discovered, to enable well-grounded design.

Other Resources

TheMoreYouKNow-Unicorn

If you’d like more information, the Centre for Excellence in Universal Design is a great website with more history, specific case studies, and even an awards system. I highly recommend checking it out.

Create better web applications. We’ll help. Let’s work together.