Inclusive design: more than a checklist

A desk with a large sheet of paper and pink post it notes. A person stands with their hand resting on the table. Inclusive design is more than a checklist.Design is powerful. It connects us to the world around us and shapes our lives. Inclusive design shapes products and services in ways that are useable by everyone. It requires a shared understanding of population diversity. Whether it’s a building a webpage, a policy framework or a town park, it ensures we “leave no-one behind“. Inclusive design is more than a checklist.

A blog page from Automattic says, “Truly inclusive designs are never really finished, and becoming fluent in inclusive design takes more than a checklist. We all need a map when we start exploring any new world”. This is the introduction to a “guidance map” aimed at leading individuals and teams through the processes of creating inclusive thinking and practice.

Although focused on technology, some of the principles and processes can be applied in other design situations. For example, “Learn about your audiences; their motivations, needs, behaviors, challenges, pain points and goals”. The key headings in this article on Design.blog are: 

      • Broadening perspectives and building empathy; 
      • Bringing diversity into teams and processes; and 
      • Building inclusion into designs.  

The article explains each of the three steps in more detail. Some concepts such as colour contrast are well-known to designers. Less considered factors are providing cost-accessible options of designs, and designing for low bandwidth. Designs should be adaptable for longer life and empower clients to continue without more designer input. These ideas really show that client needs are at the centre of the design. Designing out “pain points” is essential for all users. 

Design is a powerful tool and inclusive design has the “potential to unite heterogeneous cultures in shared understanding. To make products and experiences globally accessible.” Good design is inclusive design. 

 

Why icons should have labels

A brightly coloured abstract painting consisting of painbrush lines going in all directions. That's why icons should have labels.
Icons are like abstract paintings – they need labels

Digital designers are great at creating icon puzzles for users. They make a good guessing game until you learn what they represent. We see icons everywhere – on microwaves, washing machines, and of course, apps. Like abstract paintings, icons have different meanings for different people. We might like ambiguity in art, but not on our smart phones. That’s why icons need labels. 

Icons are used as a way to save space, or where space for instruction is limited. But designers make a lot of assumptions about previous experience with instructions. Hampus Sethfors explains that saving space at the expense of usability is not the way to go.

In his Axesslab article, Sethfors uses the example of trying to download a TED Talk on a smart phone for viewing later. He explains why icons are ruining interfaces and that icons need labels otherwise users give up and become unsatisfied with the app. Sethfors also uses Instagram, Gmail, and Apple apps as examples of what not to do. He goes on to look at icons on a washing machine dial, and then to icons that really work. You can really see the difference in the examples shown below.

Example of icons without labels.
Icons without titles
Example of Icons with titles
Icons with labels

 

 

 

 

 

A related article from Axesslab is how to improve web page content. It shows practical examples of how to improve accessibility and how to avoid simple pitfalls. 

The Australian Network on Disability has a blog page on writing accessible social media posts.  

There is more ICT information on this website. 

 

Accessible online content is everybody’s business

A laptop is open on a desk and a tablet next to it. Accessible online content is everybody's business.Accessible online content is essential as we try to live more of our lives at home. It’s everybody’s business to ensure accessible online content – not just something governments have to do. But how many businesses know this?

You don’t have to be a technical expert to do simple things such as using a clear font and ensuring colour contrast. Describing images using the alt-text feature helps people with screen reader. It also adds to search engine optimisation which means Google will like you more. Captioning videos is essential because it is useful for everyone – it’s universal design. 

An easy-to-read magazine article from Canada explains more. Indeed, their blog page is an example of clear text and plain language. The title of the article is, Experts calling on businesses to make their online content more accessible.

The World Wide Web Consortium (W3C) is an international organisation that develops web standards. The latest issue of their guidelines (WCAG 2.1) shows how to make content accessible. It includes a section on translations. Best to start with the overview. Remember, the web design is one part, uploaded documents also need to be accessible. Still too much? Start with WCAG for people who haven’t read them

A related resource is the Handbook for accessible graphic design. See also the Service Providers Accessibility Guide.

The section on ICT guidelines on this website has more resources.

Reducing cognitive load

graphic of a side-on view of a head with a mosaic of brightly coloured triangles filling the space. Minimise brain drain to reduce cognitive load.Reducing cognitive load means reducing the mental effort required to do something. Making designs easy to use and understand is part of the solution. Whether it’s digital information or walking the street, we can all do with some help by reducing cognitive load so we can process the important messages. 

Jon Yablonski developed seven design principles for reducing cognitive load in relation to user interfaces in the digital world. But these are useful tips for other fields of design. The seven principles make a lot of sense and are explained simply. The principles are:

      1. Avoid unnecessary elements: less is more
      2. Leverage common design patterns: keep things familiar
      3. Eliminate unnecessary tasks: make it easy to stay focused
      4. Minimize choices for easy decision making
      5. Display choices as a group: to help with decisions
      6. Strive for readability: make it legible
      7. Use iconography with caution: they aren’t always intuitive

Yablonski’s website explains further the concept of cognitive load.  Every time you visit a website or a new environment your brain has learn something new. You have to do two things at once – focus on learning how to get around and at the same time, remember why you are there. The mental effort required is called cognitive load. If you get more information than you can handle, the brain slows down. We can’t avoid cognitive load, but designers can help minimise it. 

 

Accessible design is parent friendly design

Infographic showing three groups of disability: permanent, temporary and situational.
Microsoft infographic: Permanent, temporary, situational disability

A light-hearted tone is no cover for the serious nature of accessibility. Hampus Sethfors explains “the dad-thing comes with a ton of accessibility needs”. Carrying a baby means the loss of one or both arms and hands. He also found he had less brain processing capacity. As Hampus says, accessible design is parent friendly design, and he explains why.

Holding a baby is a classic example of situational disability as described in the Microsoft Inclusive Design Toolkit. However, smart phone voice control and access to a headset means he can listen to a podcast. Other parent disabilities are mostly related to having less brain processing capacity. Sleep deprivation and constantly thinking about keeping a baby alive are just two factors. Captions on Netflix means he can keep the sound down or off completely.

This blog post is written in a lighthearted way, but there are important messages that all designers should heed. The access lab blog has easy to read content and is a great example of how to write more inclusively. Most of the articles are related to digital technology, but the principles are valid in other fields of design.

5 Pillars of Inclusive Smart Cities

Slide from James Thurston presentation 5 Pillars of Smart Cities explaining a smart city.A smart city uses communication technology to enhance liveability, workability, and sustainability. While the tech gets smarter it’s not getting more accessible. The most significant barriers to inclusion are lack of leadership, policy, and awareness, and limited solutions. This was part of James Thurston’s keynote, the 5 Pillars of Inclusive Smart Cities.

Head and shoulders of James Thurston. He is wearing a light blue shirt and glasses and smiling to the camera.James Thurston is G3ict’s Vice President for Global Strategy and Development. He previously worked for Microsoft, so he knows the territory well. His keynote presentation at UD2021 Conference showed that technology is improving but it’s not inclusive. Cities have to do a lot more if we are to meet the challenges of the digital world.

He lists the five pillars as:

      1. Strategic Intent: inclusion strategy and leadership
      2. Culture: citizen engagement and transparency
      3. Governance & Process: procurement and partnerships
      4. Technology: Global standards and solution development
      5. Data: Data divide and solutions

These five pillars have 18 Capabilities and 27 Enablers which are explained the Smart Cities for all Toolkit.  There are six key elements in the Toolkit:

      1. Guide to Priority Standards
      2. Guide to Adopting a Procurement Policy
      3. Communicating the Case for Digital Inclusion
      4. Database of Solutions
      5. Maturity Model City Assessments
      6. Inclusive Innovation Playbook. 

You can see a 13 minute video of a previous presentation that covers similar ground. 

 

Personas for digital technology

12 Faces representing the 12 personas.There’s nothing like asking potential users what they think of a new product. Even better if you involve them in the design process. But sometimes it’s not possible and designers resort to personas. This is often the case in digital technology. The Inclusive Design Toolkit has a suite of 12 personas representing a broad view of potential users. Each one has a story to tell about their lifestyle and their connection to technology.

Many factors affect digital exclusion: prior experience, competence, motivation and general attitude about technology. The personas highlight these factors to make it easier for designers to be inclusive. Each persona has a description of their lifestyle, competency with technology, and physical and sensory capabilities. 

The online resource is part of the Inclusive Design Toolkit with the option to download a PDF. You can take a deeper dive into the personas as a family set. This takes personas one step further by introducing family interactions. The Inclusive Design Toolkit also has an exclusion calculator that estimates the number of people unable to use a product or service. 

Cover of the book Inclusive design toolkitThe Inclusive Design Toolkit is based on thorough research over more than ten years. The personas were produced as part of a project to improve the inclusivity of railway journeys. 

The team wrote a conference paper about using personas for product development. They assessed the task of carrying a tray of food across a cafe, taking into account how using mobility aids restricts hand use. The title of the paper is, Evaluating inclusivity using quantitative personas. The full paper is available by request from ResearchGate. 

 

Handbook for accessible graphic design

Front cover of the handbook for accessible graphic design. Bright yellow with black text.Graphic design covers all kinds of creative design and visual communications. The accessibility of graphic design is not always considered in the production of websites brochures or Word documents. Fortunately there is a great handbook for accessible graphic design.

Graphic design covers creative design, visual communications, applied design and technology sectors. So the handbook covers typography, digital media, web accessibility, Office documents, accessible PDFs, print design, environmental graphic design, colour selection and more. It’s written for an easy read and has a logical structure. At the end is a list of publications, links to websites and tools to help. This excellent resource comes from Ontario, Canada.

There are so many little things that graphic designers can do to make their creations more accessible. The guide unpacks them to show it can be done with little, if any, extra effort. The title of the guide is, AccessAbility 2: A Practical Handbook on Accessible Graphic Design.  

 

Accessibility in UX Design

Infographic showing three groups of disability: permanent, temporary and situational.
From the Microsoft Inclusive Toolkit

The Web Accessibility Guidelines aren’t just for web designers and tech people. We all need to have an overall grasp of what they are about. As we do more online it is important we don’t make things inaccessible by mistake. Claire Benidig introduces the concepts of accessibility in UX design using the guide from Microsoft.

Cognition, Vision, Hearing, Mobility and Mental Health are all covered in an easy to read way. So, non-tech people can understand.

If we know about the basics of web accessibility, we can give a decent brief to a web designer. Then we will we can check if the Web Accessibility Guidelines were built in. Many designers still think of accessibility as an add-on feature.

Claire’s article is titled, Accessibility in UX Design.  She says that accessibility is not confined to a group of users “with some different abilities”. Anyone can experience a permanent, temporary or situational disability. An example of situational disability is having just one arm free because you are holding a baby or the shopping. 

Microsoft inclusive design principles state:

“Exclusion happens when we solve problems using our own biases. As Microsoft designers, we seek out those exclusions, and use them as opportunities to create new ideas and inclusive designs.”

Inclusive online meetings: Preparation is key

two laptops are open on a desk and one has several faces of people who are online.There’s been a few articles about working remotely and participating in online meetings. But there are a few nuances, little things, that need attention so that meetings are inclusive. An article from the Commons Library says it is not about the technical details. Rather, it’s about the culture and processes particularly for mixed face to face and online participation.

The article covers:
– Meeting preparation
– Collaboration tools
– Meeting process
– After the meeting

Some of this is basic, but the transitions in and out of lockdowns means more hybrid meetings – some face to face and some online participants. This is not easy for participants. Internet dropouts and other tech problems such as poor sound add to the mix of issues. This is where the chair’s role is very important because body language and facial expression are all helpful in making sure everyone gets to contribute.

Hosting hybrid online meetings is also covered by Blueprints for Change.  It has some Tips and Tricks.

For hybrid meetings, everyone in the room should be on camera. This can mean a rearrangement of the room and careful placement of the camera. 

“In a hybrid meeting environment people who are on screen should be assigned a buddy who is in the physical room. Their buddy regularly checks in with them, talks to them on breaks, makes sure they can see and hear at all times. Buddies might even bring them to break/snack conversations so they don’t miss the in-room side conversations.”