{"id":17508,"date":"2019-04-10T12:21:29","date_gmt":"2019-04-10T11:21:29","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=17508"},"modified":"2020-08-25T16:48:38","modified_gmt":"2020-08-25T15:48:38","slug":"accessibility-before-aesthetics","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/accessibility-before-aesthetics\/","title":{"rendered":"Accessibility Before Aesthetics"},"content":{"rendered":"

It\u2019s time we start addressing accessibility<\/strong> before<\/strong> aesthetics<\/strong> in our design processes to create meaningful products for our diversified societies and cultures. Before diving into the why<\/strong>, how<\/strong> and what<\/strong> of it, let\u2019s revisit the definitions of these terms to set the context.<\/p>\n

Accessibility<\/h2>\n

As the definition goes, it\u2019s simply the quality of being able to be reached or entered. In terms of Design<\/strong>, it however refers to the characteristic that products, services, and facilities can be independently used by people with a variety of disabilities.<\/p>\n

Aesthetics<\/h2>\n

As the definition goes, it\u2019s 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<\/strong> it\u2019s about the visual attractiveness of a product.<\/p>\n

As stated in Interaction Design Foundation here<\/a>, 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\u2019s 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.<\/p>\n

While these various studies may prove the concept legitimate enough, but does it address the aspect of accessibility<\/strong>?<\/p>\n

Which brings me to an impulsive question:<\/p>\n

Why would accessibility<\/strong> be considered more important than aesthetics<\/strong> if aesthetics enhance the UX of the product? Or does it really improve the overall UX of the product?<\/p>\n

\"The concept of accessibility and aesthetics in reality applies to all our businesses, products, services, ranging from industrial to digital to personal to corporate spaces and is indeed vast. While it is equally important across all domains, this story is specifically in the context of user experience and design considerations of digital products.\"<\/span><\/p>\n

Let\u2019s see how Aesthetics<\/strong> 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<\/strong> of the design. It\u2019s a general belief that their attractiveness provides a sense of pleasure to the user\u2019s mind and that will surely increase downloads, active users, reduce the drop off rates, reach a larger user-base.<\/p>\n

I\u2019m 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.<\/p>\n

If one refers to Don Norman\u2019s three layers of design, Visceral Design<\/strong> 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).<\/p>\n

\"In a way, good aesthetics act as a conceal for usability issues, poor user flows, flawed architecture. So, surely good aesthetics, though important for all products, doesn\u2019t necessarily improve the UX of the product on all levels.\"<\/span><\/p>\n

Let\u2019s talk about the elephant in the room, Accessibility<\/strong>. In alignment to the idea of Accessible Design<\/strong>, there\u2019s another concept which apparently is bigger and arduous today, is Inclusive Design;<\/strong> but how does it differ?<\/p>\n

Well, Inclusive Design<\/strong>, 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<\/strong> and means much more.<\/p>\n

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<\/strong>, 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.<\/p>\n

While it is potentially fruitful for both users and businesses, designing for as many users as possible is indeed a daunting prospect.<\/p>\n

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<\/strong> but often usability aspects are lost or compromised in the process.<\/p>\n

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<\/strong>.<\/p>\n

How can we address Inclusive Design?<\/h2>\n

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\u2019s start with some of the distinct ones; first up the King of Aesthetics: Color<\/strong>.<\/p>\n

Color<\/h2>\n

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<\/strong> (CVD), commonly known as Color Blindness is among one of the most common and widespread disabilities in the world, which we don\u2019t 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.<\/strong><\/p>\n

One way of addressing color while designing for inclusion is the concept of Color Contrast<\/strong>. WCAG guidelines<\/a> say that a contrast ratio of 4.5:1<\/strong> 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.<\/p>\n

To list a few common ones: WebAIM Color Contrast Checker<\/a>\u00a0, WCAG Contrast Checker<\/a>. 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 NOT<\/strong> accessible by WCAG standards.<\/p>\n

\"\"<\/a>

Accessible Color Contrast Ratio \u2265\u00a04.5:1<\/p><\/div>\n

<\/div>
<\/svg><\/div>

\"Using the right contrast for our product colors might indicate having lesser colors in the palette, but it surely enhances the legibility of the product.\"<\/p><\/span><\/blockquote>\n

Shape<\/h2>\n

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. <\/p>\n

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.<\/p>\n

\"\"<\/a>

Smart Shapes<\/p><\/div>\n

Labels<\/h2>\n

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\u2019t 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.<\/p>\n

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<\/strong> (red circle) to fairly accessible<\/strong> (amber square) to most accessible<\/strong> (green triangle). Obviously, aesthetics are then integral as well with some probable trade offs.<\/p>\n

\"\"<\/a>

Bottom Navigation Bar<\/p><\/div>\n

<\/div>
<\/svg><\/div>

\"For better inclusivity, color shouldn\u2019t be the only or preferred way of communicating a state of the product.\"<\/p><\/span><\/blockquote>\n

Multilingual Support<\/h2>\n

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\u2019 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. <\/p>\n

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. <\/p>\n

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:<\/p>\n

\"\"<\/a>

Multilingual Support<\/p><\/div>\n

Situational Optimization<\/h2>\n

Our products are today used under different circumstances, different environments, different restrictions, which challenge the accessibility of these products. Google\u2019s Android Auto<\/strong> is a great example how an entire device optimizes to a Drive Mode<\/strong>, carefully restricting functionalities but without compromising on the experience with a drastically different set of design guidelines. <\/p>\n

It is actually helping a lot of players in this domain to learn and improvise their own products. Voice Command<\/strong> is another way of enabling accessibility in situations when the users are often left paralyzed or disabled with basic interactive modes.<\/p>\n

<\/div>
<\/svg><\/div>

\"For better inclusivity, our products must support more than one way of interacting with it.\"<\/p><\/span><\/blockquote>\n

Gender Neutrality<\/h2>\n

While working in the field of automotive UX, we realized that most of our products haven\u2019t really been addressing women drivers, primarily because the number of women drivers are quite less but that\u2019s what inclusive design is all about, looking at the excluded. Another great example is the dating app Bumble\u2019s challenge towards outdated heterosexual norms by empowering women to make the first move and ensuring safe communications. <\/p>\n

Gender Neutrality is indeed a big challenge in the society and addressing exclusions in design might prove useful.<\/p>\n

Product Scalability<\/h2>\n

Responsive Design<\/strong> has long been an established concept. With Mobile Only<\/strong> trends catching up in the industry, the concept of Progressive Web Apps<\/strong>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\u2019t optimized enough to scale accordingly to maintain a consistent user experience. <\/p>\n

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.<\/p>\n

I remember how Google Offline Maps and Google Translate empowered me during my Euro Trip<\/a> when I was disconnected from the internet, otherwise I would have been paralyzed.<\/p>\n

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.<\/p>\n

\"\"<\/a>

Offline Modes<\/p><\/div>\n

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<\/strong> can be to start with Exclusion<\/strong>, i.e., by trying to understand which users are being excluded from reaching or using our products. <\/p>\n

\"While accessibility needs to be a priority, on the other hand, the value of aesthetics can\u2019t 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.\"<\/span><\/p>\n

Today, it might seem like a major alteration in our thinking process and design approach but as we learn more about it, accessibility<\/strong> and inclusive<\/strong> design<\/strong> should 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\u2019s what promises to impact our products for the next billion users more than aesthetics<\/strong> alone.<\/p>\n

This article was originally published on Arijit Dey<\/a>'s Medium page.<\/p>\n","protected":false},"excerpt":{"rendered":"

It\u2019s 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\u2019s revisit the definitions of these terms to set the context. Accessibility As the definition goes, it\u2019s simply the quality of being able to be reached or entered…. Read More ￫<\/a><\/p>\n","protected":false},"author":283,"featured_media":17535,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[495],"tags":[],"class_list":["post-17508","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessiblity"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n