Behind every great site or application lies thought, empathy and inclusion. This doesn’t happen by accident, it happens by design.

Inclusive

Design

Principles

Henny Swan, Ian Pouncey, Heydon Pickering and Léonie Watson

 

www.InclusiveDesignPrinciples.org

#IDPrinciples

Design is not just what it looks like and feels like. Design is how it works.

 

- Steve Jobs

Applying accessibility techniques to an unusable site is like putting lipstick on a pig. No matter how much you apply, it will always be a pig.

 

- Lipstick on a usability pig, Jared Smith

Consider situation:

People use your interface in different situations. Make sure your interface delivers a valuable experience to people regardless of their circumstances.

Captions on the go: watching video on a train, second screening or while the kids watch TV.

Imagine being low vision, doing the weekly shop while waiting for a train on a sunny day.

Prioritize content:

Help users focus on core tasks, features, and information by prioritizing them within the content and layout.

 On a laptop secondary content dominates the screen

 Zoomed at 300% and only ads are visible

Headings help us target the content we want

Overuse of headings undermines prioritising content

Headings or lists?

Be consistent:

Be consistent with conventions and with their application throughout your interface.

Use consistent design patterns

Use consistent editorial, including text alternatives used cross platform

Offer choice:

Consider providing different ways for people to complete tasks, especially those that are complex or non standard.

Provide a choice in how to complete a task:

 

- Swipe to delete

- Tap to edit and delete

Give control:

Ensure people always have control over content and presentation. People should be able to access and interact with content in their preferred way.

Do not suppress devices settings such as orientation

Provide means to control autoplay

Provide a choice on how to control autoplay

Separate audio controls for audio prompts for blind gamers

Provide comparable experience:

Ensure your interface provides a comparable experience for all users, so people can accomplish tasks in a way that suits their needs without undermining the quality of the content.

Colour closed captions/subtitles makes dialogue much easier to follow

“It can be difficult today to visualise the building as it looked a hundred years ago, but as we follow the tour, imagine the rooms with their royal furniture and ornaments removed, and with lino covering the floors, and boards protecting the walls. You’ll have the opportunity to see photographs of the Pavilion during its time as a hospital throughout our tour.”

Add value:

Consider the value of features and how they improve the experience for different users.

Chromecast in iPlayer: independently control TV from your accessible device of choice

Voice API

Camera API

Touch ID

How do we know when something is accessible?

How do we know when something is accessible? When I can use it!

When I can use it!

- Johnny Taylor

Inspiration and acknowledgements

Co-authors: Léonie Watson, Ian Pouncey and Heydon Pickering

 

Contributors: Jamie Knight, Chris Mills, Glen Gordon, Marco Zehe, Ethan Marcotte, David Sloan, Melanie Richards, Tom Waterhouse, Matt Attkinson, Charles McCathieNevile, Patrick Lauke, and Justin Stockton.

 

www.InclusiveDesignPrinciples.org (English and Spanish)

Blog post and slides at www.paciellogroup.com

 

#IDPrinciples