{"id":5108,"date":"2020-07-07T12:21:00","date_gmt":"2020-07-07T12:21:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5108"},"modified":"2020-08-21T12:33:46","modified_gmt":"2020-08-21T12:33:46","slug":"inclusive-design-what-is-it-and-how-to-make-it-more-inclusive","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/inspiration\/inclusive-design-what-is-it-and-how-to-make-it-more-inclusive\/","title":{"rendered":"Inclusive Design? What is it and How to make it more Inclusive?"},"content":{"rendered":"\n<p>Is your design for everyone? We talk a lot about creating with an audience in mind, but it\u2019s important to understand that audience can identify in several ways.<\/p>\n\n\n\n<p>Now more than ever before, it is important to create designs and visuals that are inclusive of that entire audience segment. An inclusive aesthetic will make users feel like they are part of the design and that a company, organization, or product is for them.<\/p>\n\n\n\n<p>Inclusivity is more than just accessibility. It\u2019s a combination of function and visual design that creates something that people identify with and want to be a part of.<\/p>\n\n\n\n<p>It\u2019s time to check yourself and your designs, put aside your biases and take a hard look at projects to ensure they are as all-encompassing as they can be. Let\u2019s get started.<\/p>\n\n\n\n<h2>What Is Inclusive Design?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5109\" data-permalink=\"https:\/\/azoora.com\/blog\/inspiration\/inclusive-design-what-is-it-and-how-to-make-it-more-inclusive\/attachment\/inclusive-design-01\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-01.jpg\" data-orig-size=\"1100,676\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Inclusive-Design-01\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-01-300x184.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-01-1024x629.jpg\" loading=\"lazy\" width=\"1024\" height=\"629\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-01-1024x629.jpg\" alt=\"\" class=\"wp-image-5109\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-01-1024x629.jpg 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-01-300x184.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-01-768x472.jpg 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-01.jpg 1100w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>There\u2019s a misconception that inclusive design is made for users with disabilities. While inclusive design can impact this audience, it\u2019s a lot more than that.<\/p>\n\n\n\n<p>The&nbsp;<a href=\"http:\/\/www.inclusivedesigntoolkit.com\/whatis\/whatis.html\">University of Cambridge<\/a>&nbsp;describes it like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Inclusive design emphasizes the contribution that understanding user diversity makes to informing these decisions, and thus to including as many people as possible. User diversity covers variation in capabilities, needs, and aspirations.<\/p><\/blockquote>\n\n\n\n<p>Inclusive design takes into account differences in the way people look and interact through imagery and videos. It accounts for function and usability. It presents a more accurate picture of what the world looks like by presenting a range of diversity at all levels.<\/p>\n\n\n\n<p>A website, rand, or company that has an inclusive culture may look this way by default with imagery that reflects different types of people. The challenge is recognizing your own biases (cultural and physical) so that you can show even greater representation.<\/p>\n\n\n\n<p>At the same time, it must be authentic. If you make a women\u2019s product, for example, there are some innate limitations in user imagery. That\u2019s OK. Just take care to show diversity in other ways, such as age or race.<\/p>\n\n\n\n<h2>Inclusive Design Checklist<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5111\" data-permalink=\"https:\/\/azoora.com\/blog\/inspiration\/inclusive-design-what-is-it-and-how-to-make-it-more-inclusive\/attachment\/inclusive-design-02\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-02.jpg\" data-orig-size=\"1100,614\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Inclusive-Design-02\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-02-300x167.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-02-1024x572.jpg\" loading=\"lazy\" width=\"1024\" height=\"572\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-02-1024x572.jpg\" alt=\"\" class=\"wp-image-5111\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-02-1024x572.jpg 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-02-300x167.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-02-768x429.jpg 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-02.jpg 1100w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>While inclusivity does relate to function, here we are focusing on visual presence. When a visitor sees your design for the first time, what impression are they left with? How does that imagery reflect on the brand as a whole? What are the visitor\u2019s takeaways?<\/p>\n\n\n\n<p>Ask yourself if you have a fair representation of people in images on your website. Do you use words and language that can unintentionally offend? (This happens more commonly than you may think.)<\/p>\n\n\n\n<p>Inclusive design should show a complete range of diversity \u2013 ability, language, culture, gender, age, race, and other forms of human difference. It can be something as simple as having an image of someone with a tattoo or as complex as having multiple translations and cultural shifts for content.<\/p>\n\n\n\n<p>Is your design inclusive? Start with a quick analysis.<\/p>\n\n\n\n<ul><li>Do the people in images look the same? (Age, gender, body shape and size, race, etc.)<\/li><li>Is content in different backgrounds? (Outside, inside, city, country, etc.)<\/li><li>Is language welcoming and inviting to all? (Free of stereotypes or degrading terms, etc.)<\/li><li>Is functionality and usability clear and understandable?<\/li><\/ul>\n\n\n\n<p>As for the more functional aspects of inclusive web design, <a href=\"https:\/\/github.com\/Heydon\/inclusive-design-checklist#inclusive-web-design-checklist\">this checklist<\/a>\u00a0can be a good starting point.<\/p>\n\n\n\n<h2>Inclusive Design Principles<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5112\" data-permalink=\"https:\/\/azoora.com\/blog\/inspiration\/inclusive-design-what-is-it-and-how-to-make-it-more-inclusive\/attachment\/inclusive-design-03\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-03.jpg\" data-orig-size=\"1100,673\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Inclusive-Design-03\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-03-300x184.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-03-1024x627.jpg\" loading=\"lazy\" width=\"1024\" height=\"627\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-03-1024x627.jpg\" alt=\"\" class=\"wp-image-5112\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-03-1024x627.jpg 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-03-300x184.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-03-768x470.jpg 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-03.jpg 1100w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/inclusivedesignprinciples.org\/\">Inclusive Design Principles<\/a>, a project by Henny Swan, Ian Pouncey, Heydon Pickering, and L\u00e9onie Watson provides a good starting point for thinking about how to be more inclusive with design. These principles provide guidance for inclusivity in terms of aesthetics, function, and accessibility. (You can even download them as illustrated posters as a reminder.)<\/p>\n\n\n\n<p>The principles include:<\/p>\n\n\n\n<ul><li>Provide a comparable experience for all users<\/li><li>Consider situational differences in location, interaction, and ability<\/li><li>Be consistent with user patterns and functionality<\/li><li>Give control to users when it makes sense<\/li><li>Offer choices and alternative user journeys<\/li><li>Prioritize content with one thing to do or focus on at a time<\/li><li>Add value with features, content, and visual frameworks<\/li><\/ul>\n\n\n\n<h2>How to Make Projects More Inclusive<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5113\" data-permalink=\"https:\/\/azoora.com\/blog\/inspiration\/inclusive-design-what-is-it-and-how-to-make-it-more-inclusive\/attachment\/inclusive-design-04\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-04.jpg\" data-orig-size=\"1100,675\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Inclusive-Design-04\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-04-300x184.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-04-1024x628.jpg\" loading=\"lazy\" width=\"1024\" height=\"628\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-04-1024x628.jpg\" alt=\"\" class=\"wp-image-5113\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-04-1024x628.jpg 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-04-300x184.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-04-768x471.jpg 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design-04.jpg 1100w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>It comes down to this<\/strong>: If your company culture is diverse and inclusive, it is a lot easier to include these people in conversations and create best practices. But if everyone at your table looks and thinks the same, it\u2019s going to be a lot harder to create and design for what you don\u2019t know.<\/p><\/blockquote>\n\n\n\n<p>This all sounds like a no-brainer, right? You want to create designs that appeal to the widest audience possible.It comes down to this: If your company culture is diverse and inclusive, it is a lot easier to include these people in conversations and create best practices.<\/p>\n\n\n\n<p>But how often do you come across a website where all the people in the photos are white? Or where none of the children wear glasses? There are so many other instances that show a lack of inclusivity.<\/p>\n\n\n\n<p>Start by thinking about your actual audience. What do they look like? What do they care about? What is important to them? These things should be reflected proportionally in the design.<\/p>\n\n\n\n<p>This is probably a conversation with the design team early in the process. It is likely to be somewhat uncomfortable as well. You will need images and illustrations that reflect this diversity. It makes a lot of sense to communicate this before the photos are taken.<\/p>\n\n\n\n<p>Poll your audience and ask them what they expect to see of your product or brand. Opening lines of communication and gathering that feedback can show you where there are biases that you don\u2019t see and give you an opportunity to be better.<\/p>\n\n\n\n<p>Look at yourself in meetings and photos. Who isn\u2019t a part of your team? When you take a look at your own shortcomings in terms of inclusivity, it is easier to see where there is potential for change. The people who are missing from the conversation could be the most important.<\/p>\n\n\n\n<p>Design decisions to support inclusivity:<\/p>\n\n\n\n<ul><li>Practice sensitivity; if you think something might be offensive, leave it out<\/li><li>Warn before harm; let users know if something upsetting may follow<\/li><li>Provide alternative paths and options<\/li><li>Take care with alt text; don\u2019t let something slip in that shouldn\u2019t<\/li><li>Ask questions and test with real people; they will tell you if something isn\u2019t right<\/li><\/ul>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p>Inclusive design comes down to two things: Aesthetics and function. They are equally important, especially in web design.<\/p>\n\n\n\n<p>The first step to creating more inclusive designs is to recognize your own biases. Gather feedback and then work toward creating something that appeals to a wider audience. It\u2019s not always easy, but an inclusive design is good for business because it supports a wider audience base.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Is your design for everyone? We talk a lot about creating with an audience in mind, but it\u2019s important to understand that audience can identify in several ways. Now more than ever before, it is important to create designs and visuals that are inclusive of that entire audience segment. An inclusive aesthetic will make users [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":5110,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[85,81],"tags":[86,209],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Inclusive-Design.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1ko","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5108"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=5108"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5108\/revisions"}],"predecessor-version":[{"id":5114,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5108\/revisions\/5114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/5110"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=5108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=5108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=5108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}