Our individual experiences vary. So much so, that it’s time to call out the notion of “normal” or “average” as the misconception it really is. After all, you might be reading this blog post in a quiet office space, comfortably positioned in front of a computer screen. But a different reader could be skimming this same piece on mobile while waiting for the airport luggage claim, exhausted after a long flight.
These two reading experiences are staggeringly different, and each comes with its own needs - affecting everything from letter size to contrast and more. It gets even more diverse: a visually impaired individual is perhaps enlarging the screen for readability. And a blind person could be listening to this text as it’s read by a screen reader. The list of possible human experiences goes on.
The ways in which we perceive and interact with technology are as unique as our identities, drawing on our immediate circumstances as well as our backgrounds, knowledge, and abilities. When we create products and interfaces with just one ideal user in mind (a hypothetical being who usually resembles its creators to a surprising extent), we miss out on the wide range of real life people who come in contact with our designs. That’s where web accessibility and inclusive design come into play.
7 principles of inclusive design
What is inclusive design?
Inclusive design is a methodology, intended to optimize the products we create for the full spectrum of human needs and abilities. In designing for inclusivity, designers and engineers look to provide a variety of options in which to experience the product, rather than a single, one-size-fits-all route.
Inclusive design builds on the principles of UX design and accessibility - it strives to make all users feel welcome and included. By offering multiple solutions for interacting with the product, inclusive design widens the scope of people who can use it, in a way that suits their individual needs.
When speaking of inclusive design, it’s important to remember that it is a process and not an end goal. An interface that caters to the needs of the entire population in every conceivable scenario is never within reach. But expanding our perception of what it means to design for web and mobile, and who it is that we’re designing for, is nevertheless a worthwhile effort, leading to continuous growth and improvement.
As an Inclusive by Design company, we at Wix are committed to making the web a place for everyone, regardless of circumstance and ability. On top of complying with the WCAG 2.0 guidelines and giving our users the tools to make their website accessible, we make it a priority to deliver the best experience for all of our users worldwide. Below are the seven inclusive design principles explained, followed by a few lessons we’ve learned here at Wix:
01. Provide content in multiple ways
Ensure that each of the elements on your interface can be experienced in more than one way, and that all such methods are equivalent in the value they provide. A plethora of comparable options can increase the chances of meeting the unique needs and abilities of each of your users, without compromising the quality of the content.
Since making inclusivity and accessibility a company focus at Wix, we’ve begun noticing how being more deliberate in the accessible alternatives we provide can actually improve the design itself. For example, when the alt-text descriptions we wrote for images didn’t add much value to the context of the page, it helped us see that the image itself didn’t provide as much value as we intended. This resulted in a change of the page’s design, and a different choice of image, which further strengthened the page’s message and improved overall usability.
In practice: Adding alt-text descriptions for images, video captions, audio descriptions, transcripts, and properly labeling field names on online forms.
02. Design with various situations in mind
Users will be browsing your product in a variety of different contexts, and your interface should accommodate that range of circumstances. For example, a first-time user could be looking for an introductory break-down of your services. An established user, however, might know exactly what they’ve come in to do, quickly performing the task while multitasking on another errand simultaneously.
In practice: Popup lightboxes that segment users by behavior, such as a one-time popup for first-time visitors, or an exit popup for those just about to leave the site. Another example is dark mode, meant for a better viewing experience in low-light environments.
03. Maintain consistency and design conventions
Users need to know what to expect when browsing your product. Aim to give them a sense of what each of their actions will result in on screen. This can be achieved by crafting a coherent interface that employs well-established design conventions. Utilize these familiar patterns to reinforce your message ands improve user experience.
In practice: One well-known design convention is grayed out buttons to signify an action that’s not currently available. Use conventions such as these in your favor, and avoid confusing scenarios like a grayed out button that you’d actually like users to click.
Other examples include the colors green and red that mean “yes” and “no” (respectively), and the website navigation convention of a logo leading back to the homepage.
04. Create a simple and intuitive design
We do confess an unwavering love of parallax scrolling, interactive hover effects and other web design trends. But at the same time, these fads can lead to aesthetic decisions that distract from the UX design, making it less intuitive. The design of your interface should guide users to perform the task at hand. Similarly, any design features you use (from hover effects to animations) should come together in reinforcing your content, as opposed to overshadowing it for the sake of aesthetics.
Inclusive design shouldn’t contradict good design. On the contrary, it can help refine it. The principles of inclusive design can keep us on track in terms of the message we want our products to deliver.
In practice: There are many aspects within a website or app that can help make the design simple and intuitive. For example, website menus that are easy to access, hover effects and visual indicators to signal that an element is clickable, and collapsed elements to arrange large amounts of content in an organized manner. Employing visual hierarchy can also help prioritize the content on each page.
05. Collaborate to overcome personal biases
We all have personal biases that lead us to design for users who are most like us. To overcome these biases, it’s best to go beyond our own sense of empathy, however well-intentioned, and work closely with individuals who differ in background, as well as in physical, cognitive, and learning abilities. This sort of collaboration leads to unique insights about the product and its pain points.
At Wix, we try to make sure that our teams include designers, developers, engineers and QA specialists of all ages, abilities, and backgrounds.
In practice: Ensure that a wide spectrum of people partake in the process, from the initial user research, to the design itself and the product’s testing stages (more on tests later).
06. Allow tolerance for user error
As part of relinquishing the concept of the perfect user, it’s beneficial to remember that all users make mistakes, too. Factoring this oh-so-human truth into the design from the get-go can lead to a pleasanter, less frustrating browsing experience. Leaving room for user error means offering the chance for users to change their minds and correct their mistakes. This way, users can enjoy the benefit of knowing that their actions are never irreversible.
On top of being inclusive, this approach to design also ties into the concept of calm tech, by fostering a more humane and positive relationship to the digital world.
In practice: The option to undo and redo, warning messages that show up before performing a permanent action, and success or error messages that provide a clear and informative indication of status. Friendly 404 page design can also ease the tension in moments of error.
7. Test and measure
Like any other part of the design process, the inclusivity of our products should also be checked and tested. Integrate inclusivity as one of the parameters to look into at all stages of the product development, from the UX prototyping, to the user interviews and usability testing.
In practice: Make sure to check your interface for accessibility compliance, and ask yourself whether it meets all of the above mentioned criteria. Most importantly, test the product with the help of people whose needs and abilities are different from your own, and ask for feedback as to how those needs can be best met.
Looking to expand your understanding of accessible design, explore our Accessibility Specialist Certification with Wix Learn.