Accessibility before Aesthetics

It’s time we start addressing accessibility before aesthetics in our design processes to create meaningful products for our diversified societies and cultures. Before diving into the Why, How and What of it, let’s revisit the definitions of these terms to set the context.

Accessibility

As the definition goes, it’s simply the quality of being able to be reached or entered. In terms of Design, it however refers to the characteristic that products, services, and facilities can be independently used by people with a variety of disabilities.

Aesthetics

As the definition goes, it’s a branch of philosophy which deals with questions of beauty and artistic taste. While it is mainly relates to the study of sensory values, in Design it’s about the visual attractiveness of a product.

As stated in Interaction Design Foundation here, studies have proved that creating good aesthetics in a product leads to better usability and user experience which is further catalyzed by references in Don Norman’s Emotional Design: Why We Love (or Hate) Everyday Things, that visually appealing websites are rated as more usable than they actually are, because their attractiveness evokes pleasant emotions in users.

Let’s see how Aesthetics work in design today. It has grown into a common belief that usability of a product is often defined by the attractiveness, i.e., the aesthetic appeal of the design. It’s a general belief that their attractiveness provides a sense of pleasure to the user’s mind and that will surely increase downloads, active users, reduce the drop off rates, reach a larger user-base. I’m sure many would agree that it happens to the best of us: we open any new product, new mobile app, new website, a sleek animation on dribbble, any design project, which is beautifully designed (aesthetically), crafted and presented, we go through the entire content to realize whether we missed out on something or did we really understand the purpose behind the product, though it visually appealed a lot. If one refers to Don Norman’s three layers of designVisceral Design level plays an integral role in this context, which more or less explains the belief that aesthetics enhance the UX of the product but it surely lacks on the other two layers (Behavioral & Reflective Design). In a way,

Let’s talk about the elephant in the room, Accessibility. In alignment to the idea of Accessible Design, there’s another concept which apparently is bigger and arduous today, is Inclusive Design; but how does it differ?

Well, Inclusive Design, as the understanding goes, is like an environment which can be accessed and used by as many people as possible, irrespective of their age, gender, location, disabilities and other differential factors. So naturally, accessibility is a core subset of inclusive design and means much more. Nowadays, as more and more organizations are addressing the 1 Million+ Users, Next Billion Users, we often come across the idea of Design for All, which in simple sense is an ideal state. The amount of diversity we witness among our users in the society, it is surely an ideal scenario, if not impossible, where one design solution fits all. But it also signifies that we must work towards it, the more we address these diversified aspects, the better we create. While it is potentially fruitful for both users and businesses, designing for as many users as possible is indeed a daunting prospect .

Our products today, as they aim to reach more and more users, have to be designed with more inclusion for the businesses to sustain in this competitive market. People nowadays tend to focus more on aesthetics of a product expecting usability to be default but often usability aspects are lost or compromised in the process. An aesthetically brilliant product might only address a small set of users because good aesthetics demand more and more criteria like for visual aesthetics, it ranges from color, shape, pattern, texture, hierarchy, balance, scale, line, proximity and movement. Naturally, more the filters, smaller the user group, and addressing this challenge of finding more inclusivity and accessibility in our design process is the need of the hour.

How can we address Inclusive Design?

There is an endless range of things which can be addressed to attain inclusiveness in design and believably it can be retrieved through our standard design thinking methods of ethnographic study, empathy, user research, usability analysis. But let’s start with some of the distinct ones; first up the King of Aesthetics: Color.

• Color

As designers, it seems odd to consider a scenario that not everyone sees color in the same way, or even at all. Color Vision Deficiency (CVD), commonly known as Color Blindness is among one of the most common and widespread disabilities in the world, which we don’t easily accept or address in our day-to-day living, unless critical. A reported 50 million cases exist in India with 9% of world population suffering from this, often inherited, incurable disability. Putting a billion users in perspective, the user-base is humongous.

One way of addressing color while designing for inclusion is the concept of Color ContrastWCAG guidelines say that a contrast ratio of 4.5:1 between foreground and background color is required to suffice accessibility index. There are various tools across the internet which helps one select a color palette. To list a few common ones: WebAIM Color Contrast Checker , WCAG Contrast Checker. In the below image, all the 10 text blocks might appear legitimate to most of us, but the five blocks on the left are surprisingly NOTaccessible by WCAG standards .

• Shape

Shapes work wonders where color fails. Using shapes as visual cues to show various states of the product is significant for accessibility, and when complemented with color, can be a great combination to address accessibility with aesthetics. The application of solid and hollow icons to show two states of any action button is being widely adopted today which is a great way of making our products more inclusive. The image below is one great example of how any product can use the concept of simple shapes and play only with strokes of a neutral color to communicate so much.

• Labels

Designing an icon which clearly communicates the action in itself is a challenging task and when your product has some unfamiliar actions, which users aren’t expected to know, it becomes an even bigger challenge to communicate. An assistive method of using text labels with icons for any action button, or wherever applicable, caters to our non-literate users and the ones with cognitive disabilities. Usage of text labels can also apply to form fields where a labelled textbox speaks more than a blank one.

The image below is a representation of how accessibility is being addressed in a bottom navigation bar. It reflects how these old, new, big, small platforms are using the concepts of color, shape, and labels, to achieve certain levels of inclusivity. The index here can be put to a scale of least accessible (red circle) to fairly accessible (amber square) to most accessible (green triangle). Obviously, aesthetics are then integral as well with some probable trade offs.

• Multilingual Support

Companies today are building products for larger audiences spread across borders and cultures. Understandably, to reach out to more and more users, the products must relate to those users’ needs. Considering the Indian stretch, where attire, food, language, and culture alters every 400 km, it becomes immensely critical that our products cater to users of different regions and languages. Multilingual support in applications is amongst one of the primary requirements for a user today. Once that aspect is considered, then it brings in the aesthetic challenges of font families, font weights, font legibility, linguistic accuracy. The image below shows how some applications, especially serving in the public domain for universal payments, map navigation, easy media content, have prioritized multilingual support for reaching out to more users.

• Situational Optimization

Our products are today used under different circumstances, different environments, different restrictions, which challenge the accessibility of these products. Google’s Android Auto is a great example how an entire device optimizes to a Drive Mode, carefully restricting functionalities but without compromising on the experience with a drastically different set of design guidelines. It is actually helping a lot of players in this domain to learn and improvise their own products. Voice Command is another way of enabling accessibility in situations when the users are often left paralyzed or disabled with basic interactive modes.

• Gender Neutrality

While working in the field of automotive UX, we realized that most of our products haven’t really been addressing women drivers, primarily because the number of women drivers are quite less but that’s what inclusive design is all about, looking at the excluded. Another great example is the dating app Bumble’s challenge towards outdated heterosexual norms by empowering women to make the first move and ensuring safe communications. Gender Neutrality is indeed a big challenge in the society and addressing exclusions in design might prove useful.

• Product Scalability

Responsive Design has long been an established concept. With Mobile Onlytrends catching up in the industry, the concept of Progressive Web Apps has also grown many folds. Also, people nowadays have access to multiple devices with various aspect ratios, dimensions, across wide budget ranges. While most products are available across platforms/devices by default, they aren’t optimized enough to scale accordingly to maintain a consistent user experience. To improve on inclusion of more users, our products must seamlessly scale across platforms/devices, a requirement which also extends to technical stakeholders. Another aspect of scalability is functioning under irregular network speeds or offline modes. Evidently, network coverage is often very sluggish, and/or unreliable in parts of the emerging world which puts our product accessibility into challenge.

The image below are a few examples of how companies are addressing offline accessibility for their services assuring users continue to function without any dependency on network connectivity.

The no. of ways we can address inclusivity in design is relentless and these are just a few ways of how we can start redefining our products and services for more and more people. Like aforementioned, ironically, one valid approach of addressing Inclusive Design can be to start with Exclusioni.e., by trying to understand which users are being excluded from reaching or using our products. While accessibility needs to be a priority, on the other hand, the value of aesthetics can’t be undermined as well in our products. With the King of Aesthetics: Color potentially taking a backseat, aesthetics of the product ought to take a blow or find better trade offs to maintain the visual appeal.

Today, it might seem like a major alteration in our thinking process and design approach but as we learn more about it, accessibility and inclusive designshould become the default rather being the elephant in the room creating a hullabaloo. But the more we empathize and understand these larger user groups, unlearning many established conventions of design, the more challenging it will get to design a solution, and that’s what promises to impact our products for the next billion users more than aesthetics alone.

Thanks for reading about the impact of inclusive design and aesthetics in our design process. Feel free to share it, share your views, feedback and more great examples on how we are addressing inclusive design practices in our products so that we can further learn and implement. There are some great content on Inclusive Design practices across MicrosoftGoogle and other major players of the industry.

Author: Arijit

Source: uxplanet.org

This entry was posted in Knowledge sharing, Uncategorized. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


− two = 5

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>