Inclusive UX: Designing Websites for Everyone

1. Introduction: Hi everyone, my name is Regine Gilbert. I'm a User Experience Designer in New York City, and today, we'll be talking about inclusive design and making products for everyone. I've seen over and over again where you can't do certain functionalities, within websites or applications, because it wasn't thought about. It's oftentimes an afterthought to think about disabled people when making a product. It's very important to think about it early in the process, and see how you can build accessibility, inclusivity into your process as you go along. Today, we're going to dive into inclusive design principles, user research, and how you can incorporate inclusive design into your process. We all use digital products these days, it's very hard to find people without a cell phone in their hands or computer in their home. Because it is our way of buying our groceries, ordering our pharmaceuticals, we do everything online now. So, you want to think about all the potential people who could be used in that, including your mother, or father, or grandmother. There's so many things that we need to think about, how are we making these products for people today and how will we make it for our future selves? 2. What is Inclusive Design?: What is Inclusive Design? Well, it means designing for everyone and thinking about all your potential users. Included in inclusive design is accessibility. Accessibility means designing for disabled people. So that is using the web content accessibility guidelines as the base for creating products that are accessible for disabled people. Recently, I went on a trip to Athens, Greece, where I saw signs in both Greek and English. When I saw these signs, I felt that this was an inclusive product, right? Because I was able to read the sign and so people who are Greek. There are a lot of people throughout the world who do speak English. So having the signs in both English and in Greek meant that, more people could access these areas and see where they're going. So a lot of us walk in the streets these days, and you may or may not notice the curb cut in the street, and that curb cut was made for people who have wheelchairs. But this curb cut is something that benefits all of us. Many of us use social media, and a lot of us use it when we're out and about, or in the workplace. So when you are scrolling through your Instagram, or you're looking at YouTube, a lot of times, you don't stop to listen to it. So therefore, you look for the words or captions, and that's one area where you can see where inclusive design is being applied or not being applied. So when you can read something and understand the texts without hearing it, that is an application of inclusive design because, it's incorporating the texts, so that somebody who cannot hear, can see it. When we think about the different disabilities, permanent, temporary, or situational, the permanent is something that you live with for your life, the temporary is one that you may recover from. So if you break your arm, your arm is going to heal. If the situational ones, where you may be in a loud bar, once you leave that bar, it's no longer loud and then you can hear. When you think about it, it can be overwhelming, how can I think of everybody in every situation? We don't have to think about everybody in every situation, but you can take the steps to have a level of understanding from the start. There are a lot of different options out there when it comes to references for inclusive design. One of the references I like a lot is Microsoft's inclusive design toolkit. Microsoft's inclusive design toolkit showcases temporarily abled bodied people as well as permanent and situational disabilities. For example, they have touch, where they have someone with one arm, somebody with an arm injury or a new parent, they have seeing, where someone is blind, somebody has cataracts, and someone is a distracted driver. They have hearing, where someone's deaf, someone has an ear infection, or a bartender who's in a loud bar. Then, they're speaking, someone who is non-verbal, someone who has laryngitis, and someone who has an heavy accent. So in this video, we're going to be taking a look at inclusive design from the perspective of design as a way of thinking. We're not looking into the code specifically, but we will touch on various guidelines and principles of inclusive design. It's my hope when you walk away from this class, that you're taking some principles with you, that you can take in your day to day, and the products that you build. Next up, we're going to be diving into design principles. 3. Principles of Inclusive Design: When we think about design oftentimes, we think about making things that are beautiful. That's all well and good. But people, at the end of the day, are going to be using your product. It should be the intent of the designer to create a product that can be used by as many people as possible. So when you're thinking about the visual layout, you have to be considerate of people who may not be able to see all those different colors that you're putting out there. People may not be able to understand the language that you're using. So, there's all these different factors that you need to think about when you're creating designs. Once you've thought about who could be using your product, you have to think about how they're going to be using your product. So, that means thinking about which device they may be using, and thinking about their overall experience. So, when you think about user experience, a lot of times, it's truly platform agnostic, meaning, you want to think about their experience from beginning to end. When I worked in e-commerce, we found that many people were doing shopping on their mobile device, but they weren't actually making the purchase on their mobile device. They were making their purchase once they went back home, on their laptops, or their iPads or their desktops. So, when we had to think about our users and their experience, we had to think about their entire experience from platform to platform. So, regardless of platform, what you want to focus on when you're creating your inclusive products are, can your users find what they need? Can they understand what they need to do? Can they take action where they need to take action? When you're looking to make more inclusive designs, where do you begin? A good place to begin is looking at the web content accessibility guidelines, which have recently been updated this year because when the original guidelines were created back in 2008, we didn't have our smartphone devices, and so a lot of things have changed within the last 10 years. So, one place I like to look is called Web AIM. Web AIM is a great website to look at for general understanding of the web content accessibility guidelines, as well as they offer trainings and evaluations and reporting. What you can also do, is you can use their tools that they have on the site, for things like checking color contrast and other things of that nature. Web AIM's wave tool actually go through and read your site and let you know certain things that are accessible and things that are not. One thing that I often have a challenge with is colors, and finding the right colors that work with each other. Part of the web content accessibility guidelines, is making sure that you have the correct color contrast ratio. The good thing is that there are checkers out there. So, Web AIM provides the checkers. So, this is an ongoing thing for me, to find out which colors work best with each other because one of the things with accessibility, is you want to make sure that you have the right color contrast in order for people to see your content. When you think about accessibility and going through a website, you want to make sure that your users can actually navigate through the site. Make sure that the options for them are very clear, and that they can get to where they need to get to with the correct buttons, allow them to go back, allow them to move forward and allow the user to ultimately reach their goal. I am looking at the Web Accessibility Initiative website. At the top of the screen here, there are two options you can skip to content or you could change the text size or colors. This will allow the user full control, which is part of inclusive design. This will allow for a better experience for the user if they can either skip the content or change the text size or colors, if the colors on the screen do not work for them. The reason these options are at the very top, is because you want to allow your users to be able to select this from the beginning. If you put this at the bottom of the page, this would be difficult to find, and therefore cause frustration and ultimately provide your user with a bad user experience. There are ways to make your social media accessible. There are few people who are doing very well in this area. I think Facebook does well, as well as Twitter. So, Twitter you can add ALText to your imagery. So, for instance, if I put a post on Twitter and I write the text of whatever happened and I add an image. I can actually put ALText, which means that I can add description of what that image is. I can say that there is a dog looking over the ocean, and I could put that ALText, so that if somebody who is visually impaired goes through Twitter and looks at my feed, they can obviously hear the text but they can also hear the ALText text associated with that image that I put up. So, if you're looking to get an assessment of your current website or your application, I do recommend that you use some sort of online tool to get some sort of audit. It is always recommended that you get a professional to do the audit, but if you don't have the time may be, or the money, you can use the tools online, there's Chrome plug-ins, there's different things that'll be resourced here that you can find. Think about your last project. What's one thing you could have done that maybe would have incorporated accessibility? Thinking about users other than your normal users, potentially. What changes could you have made, or what could you do in the future to apply some of these accessibility and inclusivity principles? We've talked about basic inclusivity principles, as well as the WeCAG web content accessibility guidelines. Next step, we're going to talk about user research, and how you can put user research into place to make better designs. 4. User Research: User research is a big part of user experience design. What you want to do is you want to ultimately get an understanding of who your user is and what their needs are and how your product is going to fulfill those needs. So, the various ways that you can do research, you can do user interviews, you can conduct surveys, you can conduct focus groups. There are so many different ways that you can look at your various users and how they will be using your product and interacting with it. Another great way is to go and do field research or an ethnography, and go out and experience what they're experiencing or just observing how they could experience your product or how they're using other products. When you're thinking about accessibility in your designs, you want to incorporate user research early. I'll give an example of a project that I give in my classes. I have my students create an empathy map. An empathy map will have you think about what your user does, what they think, what they feel, what they say. In particular, in this one class, I had my students create an empathy map for somebody who had low vision, colorblindness, or who was fully blind. I had a student who reached out to her father who was colorblind. That particular day he had been reading a newspaper where there was a chart and the chart was full of colors that he could not read. So, he wrote back saying, "You designers need to make sure you don't use color as an indicator, use patterns, that's easier for me to see." So, it's doing the research and having an understanding of who your users are and who your users could be for your product in order to design something that's best for them. So, one example I think of is LinkNYC, for people who live in New York City, they'll see kiosks throughout the city. These kiosks have replaced telephone booths which are no longer needed because we all have our cell phones. One of the more interesting things is that LinkNYC has audio features that can be used by anyone. It is, especially, helpful for people who are visually impaired and may not be able to see the screen. So, one of the reasons user research is very important is because you want to think about all your users in the very beginning, and even when this is done and you think about accessibility you may not be reaching the goal you want to reach. This happened with LinkNYC initially where it was released and there were some people in the disabled community that weren't happy with the product. So, feedback was given, and they were able to go back and make some changes to make sure that they incorporated those accessibility needs into the product. Participatory design versus user testing. There is a difference. Participatory design means that the participants are actually helping you design the product along the way, whereas user testing is having the users test your final project or product. I got the pleasure of being an advisor on a project from some Parsons' MFA students who decided that they wanted to do participatory design and incorporate blind designers along with sided designers in order to create a product that could be used by all. The students brought in blind users and they were able to actually help design a way-finder project or a product for a participatory design. It doesn't require that the other person, the participant, be an expert in design. It helps that they're not actually because a lot of people with the original ideas that are not designers necessarily, they come in and they give their input and feedback based off of their experiences. How will you go about incorporating accessibility in your project? When I ask how I mean, what are you going to do? How are you going to know if something works or it doesn't work for your users? So, if you don't have a lot of time or money to do the user research, you can obviously search online, and maybe talk to one to five people to get an understanding of who your users are. If you're very early in the process, let's say you have a hand sketch, how can you test that with people early on to see if that will work? It doesn't take much even if you can give out $5 gift cards to ask a few questions, do a few user interviews. These are things that you could do on a smaller scale that will give you a lot of feedback and input. If you're a solo designer working on something, you may be in a coffee shop and be able to ask people. If you're with a larger organization, you can use services such as usertesting.com to gain insight from users. It does depend on, again, your resources but there are people everywhere. So, I don't think there's any excuse not to do user research on your products. Here are a few questions that you can ask yourself when you're starting out user research. How can you make your final project more accessible? What type of research could you do to incorporate accessibility into your project? Is there a way for you to incorporate participatory design into your project? By participatory design, I mean can you bring in people with disabilities to help you create your product? How will you test your product to ensure that it's accessible? These are some basic questions that you can ask yourself at the start of user research in order to make sure that you are making an accessible and inclusive product. Next up, we're going to discuss planning and implementation of accessibility into your products. 5. Planning and Implementation: In this lesson, we'll be discussing planning and implementation of accessibility into your projects. As many of you know and if you've tried anything new, you know that it takes practice and it takes time to get good at anything. So, the same goes for incorporating accessibility into your projects. It doesn't happen overnight. You want to be able to have an understanding of what the web content accessibility guidelines are, first and foremost, and see how you can incorporate those into your implementation and the project plans that you have. When you're planning a project, you have to think about what's going to happen throughout that project. When you're working with web or mobile or any digital product, you want to think about your users. You can take a look at the Web Accessibility Initiative. It starts out with initiating, learning the basics, exploring the current environment, setting objectives, then you get into the planning. You create an accessibility policy, you assign responsibilities, you determine your budget, you review the environment, you review websites, and then you move into implementation. Where you build skills and expertise, you integrate goals into policies, you prioritize issues, and then you want to sustain that. You can monitor your sites, you engage with your stakeholders, track standards and legislation. In the past, one of the ways that I've gone about incorporating accessibility, is to create some guidelines. Based on the specific website that I was working on, there were things that were specific to our product that may not necessarily be covered for all products that are out there. So, you'll want to look at your specific product and see what your needs are and how those align with the Web Content Accessibility Guidelines standards. But it's a good place to start by having an internal document that you can use and reference, so that you can give that out to other people in other departments. Web Content Accessibility Guidelines have three different tiers for reaching a certain level of standards. There is single A, double A, and triple A. Depending on what your goal is, you will set forth the guidelines within your internal team as to what you're going to do. Part of the Web Content Accessibility Guidelines, is that it not only determines the types of designs, but also the back-end code that is used. So, depending on the level that you would like to reach if you're single A, double A or triple A, you may be applying different types of rules to the sites that you're building. When you are thinking about accessibility and being a solo designer or freelance designer, you want to think about the benefits that having accessible design brings to your user. So, not only to your user, but to your stake holders well. So, there are lots of benefits, there's a lot of search engine optimization benefits to having an accessible site and following the weak hack standards. I would stress to your potential clients or to your clients the importance of accessibility and what it can actually do for them as a business. There was a lawsuit back in 2006 with the National Federation of the Blind and Target, and the issue boiled down to, the National Federation for the Blind felt that there was discrimination because the ads that were being used by Target were not accessible for screen readers or people who are visually impaired. So, Target had to go back and fix many things on their website so that it was accessible, so that people who are visually impaired could make purchases and also experience the discounts that other people were receiving. Part of the issue was that the Web Content Accessibility Guidelines weren't being followed. So, a lot of times there were images that were with texts, but the texts were not live texts. Because the text weren't live texts, they were not able to be read by a screen reader. So, in the United States there's laws such as the American with Disabilities Act and Section 508, that are applicable for government websites. Meaning that government websites need to be accessible for people with disabilities. This also means that people who oftentimes work with government entities also need their websites to be accessible as well. If you work with the federal government or you're building websites for the federal government, you'll want to make sure that your websites are adhering to the Web Content Accessibility Guidelines. So that you are making sure that your websites are following the laws of either the ADA or Section 508 or other laws that may be applicable for your sites. I like the saying, if you fail to plan you plan to fail. You want to make sure that you are planning and managing your web accessibility as early as you can. So, if you know you're kicking off a project, ask those question; how can I incorporate accessibility early on? Make sure you fold that into the planning and implementation process of whatever it is that you're building. Next up, we'll be discussing analysis and usability testing. 6. Usability Testing: What is usability testing? Usability testing means testing your product with users. So, you could do that in various ways. You could do that one-on-one, having a person test your product, and sitting with them, and observing them. It may be something that you could do remote. You can see them using the product through various systems such as the Zoom. There are ways to do it depending on if it might be a service that you're providing, how can you make sure that you are allowing all users to access your service? Best practices for recruiting people with disabilities is looking around you. So, are their local colleges or universities around that have potentially people with disabilities that may want to participate with your product on a volunteer basis, or for small compensation? There are reaching out to local communities. The deaf community, the blind community, and various agencies may have access to different people who want to test your product. So, when you're reaching out to people, I advise saying that, ''I have a new product or I have an existing product, and I've made some improvements on it. I'd like you to test it to see how I can make it better or if it's good the way it is.'' So, you won't to be able to say, ''I am trying to make a better product. I am looking to get multitude of users to use my product and I am interested in having you test my product so that I can ultimately provide inclusive design.'' If you're looking to do user testing and maybe you're short on time or maybe you're short on resources, where do you go? What do you do? You can test with yourself, but if you've been building the product you probably know it pretty well. There are friends, there are family that you can reach out to who can test it and maybe give you a little bit of feedback. Sometimes, you're not able to do that. So, maybe you could potentially send out some things such as the survey as a way of testing to ask some questions. That way, you send the survey out, when it comes back, you can have some answers and potentially make some adjustments to your product that way. There are a few resources out there that I highly recommend for designers, developers, product managers, and anyone interested in building web products. One book always recommend is, Don't Make Me Think by Steve Krug, because it is essentially what the title says, ''Don't make me think.'' You don't want to have your users thinking about where should I go next? Or how do I do this thing? So, it's a great first step in looking to see how you can go about usability testing by looking at this book, reassessing your site, seeing where you can fix things, and then putting it in front of users so that they're able to test your product. When you're doing usability testing, sometimes you have to start with yourself. A good way of doing usability testing on your own just to start before you actually put it in front of users, is to try some of the plug-ins. One of the plug-ins that I like to use is called SEE. SEE allows me to see what a website that I'm working on may look like with certain eye conditions or colorblindness. So, for Retinitis pigmentosa for example, you can use this bar here to go up and down and see what Retinitis pigmentosa may look like for your particular website. This is helpful in that, it'll give you a sense of maybe I can change the layout of one thing because it's blocking the view of this thing, and maybe this isn't the best for accessibility. The SEE plug-in also has the area for colorblindness that you could select. So, there are four different types of colorblindness that you can apply. So, protanomaly, you can click on and you could put it up. I'm putting it up to the highest that it could go, and it'll show me what it would look like for somebody who's colorblind to use this particular site. What you want to do is when you're building out a site, you want to look at the colors that you're using and use a color contrast checker. There are a lot of accessibility tools that are actually built into both PCs and Macs, and mobile devices for both iOS and Android. For example, you can use on a Mac a screen reader and you can start the screen reader by hitting ''Command,'' and ''F5.''. ''Voice-over on film, Window, zero. Slider has keyboard focus. You are currently on a slider, inside of web content. To start interacting with the slider, press Control-Option-Shift-Down Arrow. To exit voice-over off.'' So, that is how you turn on and off a voice over, Command F5 to turn it on, Command F5 to turn it off. Voice-over is what people who are visually impaired used to maneuver on the website and throughout their computer as a whole. In my past experience, I have worked with various teams and departments, and including copywriters who would write the copy for not only the website, but the alternative texts that was used for the imagery. During the testing phase, our copywriters would use the voice-over feature on their laptops so they can see if the copy was being read as they wrote it. As I mentioned before, webaim.org provides great resources for checking usability and accessibility on your website. They have a wave plug-in that you can use. You can also check your website on their site to see if it is accessible. Again, you'll want to go through that with a fine-toothed comb to see if it's really applicable for your site or not, because some of the things that you might have made accessible it may read as inaccessible, but you can make the adjustments as needed. But it is a good place to start. So, you can test these things out, fix them and adjust them before you actually put them in front of users. Next up, we're going to look forward to innovations and pass innovations in inclusive and accessible designs. 7. Innovations Past and Present: When it comes to accessibility, there's a lot of past and present innovations that are happening. Past innovations can show us that when we make things, they can actually be beneficial to everyone. We all text, but a lot of us don't know where text comes from right? So, texting actually was initially designed for people who were deaf and now it's something that we all use today. Another thing that is happening are lot of future opportunities for accessibility and inclusive design. I recently had the experience of trying the new Xbox adaptive game controller and it is a controller that was actually designed by a disabled person. What's cool about it is most game controllers you have to hold, and this one actually lays flat and you move something like this. So, there are all these ways that innovations that are created for people with disabilities can actually be used by everyone. So, one person that I have respect for in the disabled community is a person named Liz Jackson and she has created disabledlist.org and it is an organization that works to get disabled persons involved in the design process and employed with various companies. Most recently, she got a commitment from Wells Fargo to get more disabled people hired. Another person I would recommend to follow is Neil Milliken. He has a great Twitter page, he also has a weekly show called Axschat, where he speaks with different accessibility experts from all around the world. I am very excited about the world of accessibility and inclusive design because there's a lot happening. There's a lot more people getting involved, there's a lot more people caring about it, and in this country, we're getting older, we are changing, and we need to think about our future selves and the products that we built for ourselves. I hope that you've enjoyed this lesson and that you have learned something new today. I hope that you are inspired to go and see what you can do and see how you can create more accessible and inclusive designs in the products that you create, or make, or want to make in the future, and I hope that you continue to share with others what you learn. 8. What's Next?: