Blog

In the online world, perhaps the most fundamental way to be inclusive is through web design. As the theme of this year’s National Inclusion Week is ‘Everyday Inclusion: Celebrate and Inspire’, we wanted to celebrate some inclusive design successes and inspire others to take action by sharing our tips for more inclusivity in ecommerce.

Being inclusive through accessibility

The key to unlocking digital inclusion is to facilitate accessibility for all. In terms of web design, this means taking into account the diversity and varied ability of web users, then making this a key consideration during the design process.

In the UK in 2019, approximately 20% of internet users self-identified as disabled and these disabilities range from sensory and mobility impairments, to mental health conditions and learning difficulties. Each disability will have a different set of accessibility needs, so it is important to build an understanding of how individual experiences can differ when planning a site.

The UK Home Office has released guidance aimed at government services to aid them in designing for specific impairments. The most impactful of the resources, which can all be found on GitHub, are the “do’s and don’ts” accessibility posters. These include advice for certain impairments, for example for low vision: “Do use good colour contrasts but don’t bury information in downloads.”

Many inclusive design principles, although aimed at making sites more accessible for those with disabilities, are in some ways general best practice for a well-designed site. For example, from this inclusive design checklist by Heydon Pickering, Dan from C3 explains the other benefits of these methods:

“Inclusive design does not just help those with disabilities, but those living in areas with poor network conditions too. Reducing page load by compressing imagery can greatly help these users by ensuring pages load quicker and take up less data. We also generally audit our sites to ensure that they have HTML which is screen reader compatible. This usually involves making sure everything is appropriately labelled / titled and added ARIA properties where appropriate.”

That said, there will be some situations where focussing on specific accessibility needs would be a good approach. As the end-user demographics of each website will differ, so will their needs. Where sites have a clear demographic group, an essential step in the inclusive design process should be to figure out exactly which needs to cater for.

Consulting the “experts”

Many ecommerce sites will already have the resources they need to identify this: their customers. People are, after all, the living experts on their own inclusion.

As highlighted by Lenny Gray Mowris, from the Design for Good Task Force at AIGA Atlanta: “The key to inclusive design is including people. In the process, in the conversation and in the shared awareness of what [inclusion] is.” Tim, MD at C3 shares the most accessible ways that merchants can involve their customers in the design process:

“How well do you really know your customers? Understanding who your audience is, what resonates with them and how they interact with your website across different channels can give you significant opportunities for improvement and optimisation. Involving customers through digital (heatmapping, surveys etc) and offline (focus groups, lab sessions etc) research and profiling can help to give great insight into the needs and demands of your customers, in turn helping you to understand your audience and optimise their experience.”

Technological advancements have meant that we can delve even deeper into user experience, using biometrics and psychology to understand customer behaviour. Technologies such as eye-tracking and facial recognition can provide insight into what a customer is looking at and how this makes them feel.

At C3, we partnered with UX research experts Endless Gain to gather biometric and conventional data on one of our client sites, Oakhouse Foods. We then used the findings of the research to build the next generation of the Oakhouse Foods site, with their customers’ needs and usage patterns as the key focus.

A case study in inclusive design: Oakhouse Foods

Oakhouse Foods are a frozen meal delivery service catering especially for independent living seniors, recently discharged hospital patients, those with difficulty swallowing, and care homes. The research by Endless Gain demonstrated how Oakhouse customers have varying ability when using the internet, but overall favour a simple and straightforward online shopping experience.

One particular example from the research demonstrated that a focus on visual fluency, especially in the navigation bar, would prevent customers from becoming lost and confused whilst trying to locate products. This was identified through eye-tracking and facial analysis to identify emotion, as well as other more conventional methodologies such as click-and-scroll mapping. Endless Gain made tangible recommendations for optimising the structure of the site to make information more easily digestible, as well as referring to resources such as the Web Content Accessibility Guidelines (WCAG) 2.1. Not only did they focus on the visual elements of the site, but they also considered how customers would be feeling throughout the purchasing journey and suggested how this could be made as inclusive as possible.

The insight provided by Endless Gain was invaluable in developing a second-generation site that built upon the previous site, to be an even more intuitive and empowering experience for Oakhouse customers.

Design for the minority, reach the majority

Designing an inclusive site clearly benefits those who have permanent disabilities. However, there are plenty of ways that a focus on accessibility can benefit the rest of your customer base, too.

As put by Robin Christopherson, Head of Digital Inclusion at AbilityNet: “When you struggle to see the text on a desktop computer, you get a bigger monitor or reduce the screen resolution, and you can choose your preferred keyboard and mouse. Now we look at a small sheet of glass on a sunny day, we juggle our phones one-handed, we’re distracted or in a rush. We are, quite literally, temporarily vision, motor, hearing, and cognitively impaired on a daily basis.”

“The Persona Spectrum” by Microsoft, taken from their Inclusive Design Toolkit, demonstrates this point by showing how exclusion could be temporary or situational and, therefore, how inclusive solutions can scale to a broader audience.

Inclusive design is also brilliant for business. It is widely accepted in the ecommerce industry that slicker user experience can mean better sales, so designing your UX with more people considered could have benefits hidden in the bottom line.

There is more work to be done

Considering there are many advantages to building an inclusive site, it’s surprising that out of the top 1 million homepages, less than 1% would meet the minimum accessibility standard laid out by the WCAG. The most common failures, as reported by Ability Net, were low contrast text, missing alternative text and issues with empty links.

CAPTCHA, a test used to protect sites from spam by asking humans to solve puzzles, has also been criticised for being too difficult for those with disabilities. Jason Polakis, a computer science professor at the University of Illinois, suggests that machine learning has become so advanced that it can decode these puzzles easier than humans, thus leaving many humans excluded.

So, there is clearly more work that needs to be done. In order to make tech more inclusive, we need to identify our own biases and reduce these by involving a more diverse range of individuals when designing online spaces. For merchants migrating to a new ecommerce platform, like our client Oakhouse Foods, there could be real value in taking a step back to be more inclusive throughout the whole design process.