 Great, we realized the description in the book was wrong. So this is 10 design principles for UX and accessibility. So very good information for marketers or people who are trying to bring accessibility in UX to their practices. What is in the book is wrong. I don't even understand what I was supposed to be talking about. So if you're in the wrong place, giving you a heads up. Also come on up. There's a few more seats up here in the front. If you're looking for a place to sit, there's also a couple in the middle here. Don't be shy. We like everybody. It is, okay good. In the booklet it has a description about a bot something. Yeah, don't know what that is. But I'm willing to learn if anyone wants to tell me about it. Yeah, we're happy to see you all. Yeah, thanks for coming out. Yeah, all right, I think we're at time so we should get started. Yeah, let's go ahead and get started. Okay, so welcome. So welcome. My name is Jaina Feaster. I am the vice president of UX and creative at Sandstorm. My pronouns are she, her, hers. I am currently have my gray hair pulled up in a half bun and I'm wearing my cool new shirt from Sandstorm with the Sandstorm logo on the front. Oh, I'm also, fun fact, gotta do that. I am a TEDx leader in my community. I run TED events and I'm also a flamenco dancer. Okay, Alma. Hello, everyone. I'm Alma Meches. I'm the senior UX architect at Sandstorm. I'm a light-skinned female. I have dark brown hair. They are in two very fun braids right now. And I'm wearing a shirt that's blue that says yes and. I also wear glasses and I have a very, very fun mask on that has Ghibli characters. So if you love Ghibli, come and talk to me. So my pronouns are she, her, hers. Fun fact about me, I love board games. I am doing a terrible job right now of playing Tears of the Kingdom. So again, if you have good builds, come and talk to me. And all of my Zelda people out there. Also, I love driving on road trips. And as a matter of fact, I drove here from Chicago with my husband who also works at Sandstorm. And our Chihuahua is also here. So if you see us out and about, come say hi to our Chihuahua Chupi. She is very tiny and very old and very precious. Okay. Okay, so let me first tell you a little bit about Sandstorm. So we are a digital agency located in Chicago with Sandstormers, yes, we call ourselves Sandstormers, located all over the US. Our clients are organizations who want to use marketing, technology, and UX to achieve their missions. These organizations are typically professional and trade associations, higher ed, and larger nonprofits. All of our developers who, I am a UI designer, creative director, strategy person, they make my dreams come true. Our developers really, really take care of us and take care of our brands. And all of them are located all over the US and many are Drupal certified. And over the past 15 years, we did up this number recently. We've conducted over 4,400 hours of UX research, which we will be referencing today. So let's open with another fun fact, not about Jaina and myself, but about usability studies. Did you know that you only need five to six users in a user group to identify about 80% of the usability issues on a site? So what does this mean? Why is that number important? So I think for a lot of people, the term usability can be really large and the word accessibility can be really scary because there's a lot of work to be done, but it can be done very quickly and easily. So if we're trying to convince our leaders, executive teams, board members, or just general staff that we wanna do these activities, we don't need to spend a huge amount of money or recruit a large number of people to start getting meaningful results and making a big change on our sites. So let's talk a little bit more about why we would conduct a UX audit or usability testing. So first, we wanna uncover the user tasks and goals. What are they doing on the site? How do they wanna engage with our content and features? This helps us prioritize things in the future. We can identify opportunities for improved accessibility. So this ensures that our site can be accessible for all, not just the audiences that we might have in mind that meet our business goals, but everyone who comes to our site. Next, we wanna reduce site abandonment. Again, we want our sites to be very sticky. We want people to stay. We want them to engage. The longer they're there, the better chance there is for them to click on something, engage with a piece of content that we want to engage with, or maybe even buy something if that's the goal of our site. So keeping them there, we'll making sure that the site doesn't have that abandonment issue, we'll keep them on the site. And then by testing early and often, you can prioritize those different development features that are gonna be useful for your users that we know will get engagement because they've told us that those are the features that they want. And we can reduce the amount of development time and cost because we're doing the things that we know we're gonna have a big impact. And then finally, we wanna make sure that we're reducing subjectivity in a lot of the associations and organizations that we work in. There can be a board of 20 or more people who all have a voice and are all experts in their field and wanna make sure that their opinions are heard. A lot of times there's conflict in those opinions. So by introducing this new way of getting information, it removes some of that subjectivity and allows us to say, we know that your experts, we honor your opinion and we honor your expertise, but let's talk to the people that are really gonna be using the site and start breaking out of some of the silos that you have. Maybe we're very department driven or we all have specific titles or areas of expertise. And maybe our users don't think that way. So we need to start thinking like our users. So conducting these audits just lets us get into the mind of the user and make sure that we're identifying their wants and needs and prioritizing those perhaps over our, yep. So when we think about accessibility, some of the things that we really need to keep in mind are that UX and accessibility go hand in hand. After all, our goal is to create an amazing experience that is delightful for all users. Knowing that 26% of the US population has a disability is a driver to embrace this and in all of our marketing tactics from print, social, and especially digital. So for example, a lot of you that were here earlier today probably saw me taking my glasses off and on. So I have a disability because this helps me see, but it doesn't help me see here. And I still need to go to the eye doctor too. Okay, so by focusing on accessibility we can ensure that nobody is excluded. So where are we on this journey? Well, as we like to say at Sandstorm there's a lot of opportunity. Only 2% of all websites meet accessibility standards. Only 2%. All right, so I think it's time to get into some fun stuff. We've given you a little bit of heaviness, but there's a lot of opportunity, like Jaina said, for improvement. So we wanna share all the things that we've learned over those 4,400 hours of doing research, accessibility testing and audits. So I'm very excited to share these with you. If you have a camera and you wanna take pictures of them we totally encourage that. There's gonna be lots of slides with stats and data on them. We've also got some free tools throughout the presentation. And we'll obviously share this out afterwards so you can get all the good links and things as well. All right, let's go. So number one, our very first design principle. Users want everything instantly. So again, we live in a very fast-paced society. Everybody wants everything right now. You want it all at your fingertips and you don't wanna wait for anything. So we wanna give our users that immediate satisfaction of being able to get to whatever it is that they want right away. And when it comes to load times people actually think they're a lot more patient than they are. Unfortunately, that is not true. So here we have some stats. As of 2022, 53% of users will hit the refresh button either on their browser or in their phone if the page takes more than three seconds to load. So let me count that out for you. One, two, three. That is an eternity on your phone. Nobody wants to wait that long. So we're hitting that refresh button because we've been trained to expect things to occur immediately on the web. So what can we do about this? Well, let's look at mobile devices in particular. So here's where the problem gets even further. If we have somebody on their mobile device they will bounce from a site at a rate of 32%. If the site takes only three seconds if we go up to five seconds that increases to 90% and if we go up to 6% it's over 100%. So we really, really, really have to work on getting our sites to load very quickly. And no matter what, faster is better and less is more. So there's gonna be several things that we'll talk about later on about content and things like that. But we wanted to give you some tools that can help you assess how to check your site. Oh, I'm sorry, we have one more slide about speed. And again, we're all in the same company. So if you start running some speed tests on your site and you see that it's slow know that there is much room for improvement. There has been improvement over the last several years about 15% of sites according to Google are fast enough to meet that threshold that we were talking about but there is room for improvement. So to get an idea of where your site is and what are some things you can improve we've got some tools here that you can use to check your site out. So our screenshot here is showing the Chrome, Google Chrome Inspect tool. So if you right click on the page and click Inspect then you click on the performance insights tab which is a couple over there. So the fourth one from the left. Then this will give you a way to look at how quickly your page is loading. So this just gives you some raw numbers and it'll show you some stats about what things are loading, if things are hanging if there's missing stuff and you can kind of dig in and there's different tabs here that you can take a look at to see what kind of things are missing and if you're a marketing person or a QA person or a UX person you can do this test on your Chrome browser. It's totally free. You don't have to install anything on your computer additional and take a look at it and then start having a conversation with developers and other team members and say, hey, I see that there might be some things here that we can improve. How do we work together to make these better? Do we maybe need to look at the design and trim some things down or are there additional plugins or ways that we can code the page a different that might improve the speed? We also have a couple of other tools here that you can use that are free. So feel free to snap a picture of these if you'd like. There is the Google speed insights. So you just go to that and it'll give you a number, tell you how fast your page is and give you some reports about things you can fix and improve. And then GT metrics is another tool that's free. Again, does the same thing, speed test your site and will give you information about what things you can improve. So our final takeaway here is, again, users think fast is easy. We all want things very quickly. So if your site loads quickly, you are giving them that instant gratification and improving their experience. Next up is principle two. So users don't read, they scan. The internet has made our brains evolve into what we call a digital brain. These new circuits that make the digital brain quickly scans for the information to make sure the user's in the right place and this is the right content to meet their needs. And as you just learned from principle one, this has to be done in three seconds. So making sure your content is scannable is key to creating a great UX and accessible experience. So you always look at Apple. Okay, I have Apple in here, so don't hate me, but you know, whatever. Since users scan, we need to create digital experiences to reflect the needs at the moment. This includes creating clean, catchy headlines to draw them in. Scannable headlines that inform and engage the user so that they can get to the main point without reading all the content. But we also need to make sure that detailed content is there so that when they're ready, they can get the details they want. So the content has been created and has to work harder to meet the needs of all these different users. Also, our digital brain loves images. So images need to be there to help bring that content to life and not make the page feel too text heavy. But you need to make sure those images are relevant and support the content and for the user to engage. So don't believe me. Well then let's take a look at this usability study conducted by Nielsen Norman on the Apple Watch product page. On the left side, you'll see the product page. It is clean, engaging headlines, those relevant images and concise body copy. Now take a look at the right side with the eye tracking map from the usability study. You'll see exactly where the participants are looking. The larger circles is the more time that they spent reading. As the participant moved down the page, their eye traveled from left to right, up and down, from subhead to subhead, to content, to image, and image to content, just like a lawnmower, back and forth and down the page. The visual captures the digital brain in their natural habitat. Thank you for that laughter. Additionally, to help the digital brain include different types of content like poll quotes and bulleted lists. Also add more visual content including videos and don't forget about social sharing pattern for easy engagement. This page from Panagonia, it looks and is working right on. Users aren't reading, they are scanning. Variation in the content helps scanning, increases engagement and reduces fatigue. Now from an accessibility perspective, these same practices for the content make it more scannable and the content clear, especially clear hierarchy, so those screen readers can read it and the other assistive technologies can access it. Since the screen reader converts text, buttons and images and other screen elements into speech and braille, the page structure needs to be developed and the content entered with accessibility in mind. If the site is built with accessibility best practices and clear, consistent structure, you'll be able to tab through the content and check if your content reads correctly and in the order you intended. But you can also download a Chrome extension to test it out too. So as you can tell, we're giving you a lot of free things just to add into your day, because you know, why not? We need to be more proactive. So if you don't have a screen reader laying around, you can always use this extension called screen reader. After installing it, the web page and then you can tab through the content and you'll be able to see is the content being read in the order that you wanted? Is it broken up by headlines and lists? Does the content make sense? If not, then you need to make some structure updates and so all the users can engage with the content. So this extension is not perfect at all. It does not replace the actual screen readers, but many of us don't have access to screen readers or many of you all don't have access to them. So we don't want that to hinder your practice of bringing accessibility to your world. So the takeaway, tap into our new digital minds and break up those dense pages of content to be more scannable for all your users. I like to think of it like a candy bar. Nobody wants to eat one of those really gross five pound Hershey bars that you see around the holidays, but everybody loves a bite-sized candy bar. So the more bite-sized we can make our content, the better, nice. Our next design principle is, and I am so, I do this all the time. Okay, users like to share content even when they don't read it. Y'all did it, I know you've done it. Come on, get those hands up. You share it without reading it. I think there's a lot of people that are not telling the truth. So with that, a catchy headline or an awesome, wonderful graphic is what we look for at the beginning of each article. And then we'll send it to at least five, maybe 10 people, all including friends, family co-workers. So it's so much worse if something related, if there's something related to chihuahuas or cats or for me, I'm a beagle mom. So anything with beagles, yeah, I'm sharing that constantly. And it becomes like a marathon. We even have a channel for it at the office. Becky's Corner. Becky's Corner, where we all share things like that. So know that it can be fun, but we have to definitely think about it. So the less time users spend reading, the more likely they will share it. Data revealed that average scroll depth had little relation to the amount of time users actually share the story. People form an opinion based on a summary or a summary of summaries without making the effort to go deeper in the content. This habit or human behavior is a theory used when organizing content and testing for usability. This leads directly to our next point. Infographics and lists are the most shareable contents and should be accessible to all users. Infographics can be a challenge for individuals with visual impairments and also for individuals with cognitive disabilities. It can be difficult to follow designs or certain elements on the page that can be distracting. So what we do is we recommend and we know that those infographics are not accessible, but what you can do is create a descriptive transcript which can help meet the wide range of your user needs from audio and visual information. Full text versions of the infographic are also easier for screen readers to scan and read. So takeaway, we know users like to share content so we recommend including social sharing close to your headlines on your web pages. And if your articles happen to have infographics, take the time to provide transcripts for accessibility. Right, next is principle number four. Buttons need to be more than color to be clickable. So for this, we know that designers love subtle color changes, a lot of grays and very beautiful light design. And those can be very lovely, but in most cases, that's not enough for users to understand the intention of our buttons. So I'm not saying don't use color. I work with loads of designers, I love beautiful design, but what we are saying is that you can't rely only on color. So we need to provide some supporting visual cues to help users interact with our content. So things like making sure that if we're doing a correct or incorrect, instead of just having a red box or a green box for someone who has color blindness, those boxes may appear the same color or they may not see them at all. So if that's our only visual indication that something is incorrect or that the user needs to take some sort of additional action, they might miss that. So by changing this and making it to an X or a check mark, we can still use the beautiful colors that we selected, but we've provided an additional way to get the same information. And if we add a third layer of including the text with it as well, then we're providing even more information for someone who's using a screen reader or on a Braille device. So again, we also love these type of elements because if somebody prints something out, they're probably going to print it on a black and white printer. Maybe they're at a library or they're at home and they wanna save money on the ink color or in their toners. And yes, people do still print things out. I know that we're all on our phones and things, but my dad will print literally everything from the internet and has stacks of papers in his apartment. And so for those who are using devices like that to print things out and read them later and they don't have color, clues like this will help them understand what was the intention of those icons on the page. Some other examples of visual cues that can support color are things like a pattern in the background, symbols like we saw in the previous page, underlining, bolding and italicizing content. And then we have an example here where we're changing the shape of a button to indicate that it has been activated versus the inactive state of the button is just a pill shape. So again, some of these things can create a very delightful micro-interaction and that's what we're looking for, right? We want our pages to have a little bit of spice to them but not too much spice, so that it's very clickable and fun. They know they've taken an interaction. But as we believe at Sandstorm, we have to build on ideas, the yes and philosophy. So yes, we can change the shape, but what if we did it from a brand perspective? What if we actually took this as an opportunity to bring in more visual cues and also more branded elements? So for example, the top left card on your screen is a very clean and easy to read card, but on the hover click, an unexpected thing happens. Referencing the overall branding, the red waves emerge from the bottom of the card to tell the user that there's something to click on, but then it also reinforces the brand, something very unique and also very delightful for the user. The bottom buttons are not as dramatic, so you can see where they were starting or we were starting to create hierarchy with our buttons and give a lot more opportunities to tell that story while also maintaining accessibility. So the bottom ones have an outline and then when they're activated, they go to a fill. So your takeaway, take a hard look at your buttons. Are you relying only on color change to cue that hover click? If so, consider adding a small, even a branded visual cue to help all users interact and engage with their content and maybe everyone can have a little bit more visual fun along the way. Principle number five, users will squirrel on desktop if you give them a reason. So we've all been trained on our mobile device to scroll. That is the way that we interact with content, so with our index finger or our thumb or various other ways and on desktop for a while, it was a challenge to get people to scroll down the page, but scrolling is coming back so long as we give them a reason to do that. So examples are things like shopping pages or basically any of your social media just infinitely scrolls forever. Some of those patterns can be a little bit negative, but we do wanna give users reasons to stay on our page, especially if we have great content for them. So let's look at a couple of examples and talk about some things that we can maybe improve on. So first, this is the homepage for the Bill and Melinda Gates Foundation. We did not design this website. We're just showing it as an example here. They may have made changes since. So again, take this as we see it in the moment. So they have a beautiful design here. There's a lovely image in the background. We have a very bold statement about who they are. The challenge with this is that it kind of cuts off. So for a lot of users, they don't realize that there's additional great content right underneath this image and they maybe start exploring the navigation up at the top or they hit the search because they don't think that there's anything additional on this page. So we need to give them a reason. They're missing out on more things that could be relevant to them on the page. So this is an example of what maybe we shouldn't do. So let's show you a different example of something that's a little bit better. Here's the Uber page. So again, they have a very similar concept. They have a very beautiful engaging image at the top, you know, fun visual. They have a very nice headline, a quick call to action button right at the top. But you can see that that little section right underneath it is just peeking in. It gives you a little difference in color and the user can understand, oh, there's a little bit more on this page. Let me scroll down and see what else they have to offer. So at first glance, they can see there's more there and they want to engage with it. So let's talk about that. That kind of sweet spot right where the browser ends is called the fold. Some of you may have heard this. Some of you may think that the fold is out. The fold has never really been out. The whole point of the fold is just to let people know, hey, there's more going on in this page. And in our previous takeaways, we talk about pages needing to load very quickly. And this is where the fold can really be engaging, right? We know that there's that kind of sweet spot on the page. Our screenshot here is showing that about 65% of interactions happen in that very dark red zone or where that line is kind of across the middle. That is kind of where the browser stops or just a little bit before it. So we want to make sure that there's always something there that's driving our users down to the next thing on the page. And speaking of that lower half, we do have some information from an organization called Chartbeat that says 66% of users will spend time on the lower half of pages, especially when the content was perceived to be normal. So if the top part of the page doesn't look to advertising or something with a rotator or something like that, then they are willing to continue on down the page. So let's take a look at some examples of how this works in real life. So on the left-hand side, you'll see a screenshot of the American Planning Association. So this was a design that we worked on and did some usability studies on. They needed a banner ad on their page. I know we all are huge fans of banner ads, but everybody needs them, everybody wants them. So we said, okay, no problem. We'll put the banner ad here. This is where they requested it. You can see it's kind of, you know, in the third position on the page, there was some additional content here. We did some usability testing with users, and they basically stopped at the yellow advertisement at the bottom. So there's more content on this page. They didn't bother to look at that content because they thought that banner ad was the bottom of the page, done. So after that study, we said, ah, we see that this is a problem. It's creating a false bottom, so we need to correct that and move that banner to a more appropriate place, which is more the traditional bottom of the page. So we ended up moving that banner ad below this additional content. You can see over on the right-hand side with the lovely pictures in the video, and it tested much better. Users were able to see that that was the bottom of the page, and it's kind of a little shifted down so that you can see the footer starting at the bottom. Yeah, and the organization was happy because their banner ads were still on the homepage. So win-win. Exactly. Take away here is watch out for those false bottoms as you're looking at things. Make sure you check it in lots of different devices, different browser types, and make sure that there's not anything that looks like it's a big open gap or something that might feel like it's the bottom of the page. If you have that, then might wanna adjust some things, do a little tweaking, and think about moving some things around. Okay, principle number six. Okay, we talk about this every day with our clients. And what we've started doing now is having almost a UX-based camp, or a boot camp with some of our clients. It's worked really, really well to where we walk them through some of this deck so we can have better conversations later because those rotating homepage images, they keep coming back. They're never gonna go away. But the problem is your users think they're an ad, as they rotate, it just doesn't work for your users. The overuse of this tactic has resulted in banner blindness. They don't read it. It's real. And if you have a button on that first rotation in your banner, only 1% of the people will actually click it. The second one, it's even worse. So please, we're gonna dive in a little bit more, but please, please stop rotating banners. So, Samsung. This was a homepage from a few years ago. And so we do association work and nonprofit work, but we like to look at inspiration brands out of our space. So we're looking at what's going on, how people are using different sites. So this one we looked at Samsung just to see what they're doing. And there's some opportunity here. So the dark image fills the page, which could create a false bottom, which we just learned about. But the main thing we wanna focus on here is the product image. In this case, the Galaxy Note 20, it auto rotates. As your user is scanning the content and changes into another product image automatically. The rotation created banner blindness and it's bad for accessibility. The arrows located on the left and right to click through the images are too small, too light, don't have enough contrast, and get lost on the background. And finally, the visual cue along the bottom of the hero where you can see how many images are in the rotation is also totally obliterated and you can't even see it. There is a pause button in the lower right hand corner, but you can't see that either. So Samsung did go in and reworked their website recently and they lightened it up. So trying to make some changes and hopefully making it a little bit better for the user. They changed it to something a little bit lighter. The arrows located in the left and right to click through the images, they're a little bit more clear. There's still some contrast issues which we'll talk about in a minute. The thin bar along the bottom of the image, it's more visible. You have the ability to pause the auto rotation. It is better, but it's still an auto rotation. As you're still reading the content, it will rotate. So Samsung is asking their users to move fast enough to stop the content so they can read it. This requirement is putting the work on their user and this is not good UX or good accessibility. So if you decide to include a rotator, make it user activated. So on your screen, you're seeing the homepage for now foods. In the lower left hand corner of the hero, the user knows that there are three images represented by the three bars. The white has also been tested for contrast so we can see it very clearly. There's also one that is filled in so you know which one you're in. The color contrast makes those bars easy to understand and easy to find. The user can click through the images by clicking one of those bars or they can choose to let the animation play. But the big thing is, is the user has complete control to access the content in the way they want it. It's accessible and gives them the choice to read the content that they're wanting to read. They know what to expect and can make their own decisions about how to engage with the content. Another way to do it, because we know that the hero is something that a lot of people have to negotiate. Everyone wants to be in the hero. Everyone thinks their content has to be at the top of the page. You know, we've all been there and had those conversations. And this is another way that Northwestern Medicine tackled it. So instead of having an auto rotator, they have these three bars on the right side with called actions. So if you think about it, these three buttons are the ones you would want easy access to when you go to the hospital. You know, I need to go to the hospital. I want to request an appointment. I want to find a doctor. I want to find a location. Many times when a person comes to a hospital, they're in a heightened state. Maybe their loved one is ill or they need care. So bringing those up to the very top and making them very accessible and very easy to navigate is something to consider. Now again, in this one, the contrast is a concern, which we'll talk about in a few minutes of color contrast. But the concept is pretty good because that's what the users want. So through UX research and through analytics, Northwestern knows that their actions, knows what the actions are that the user wants to do on the site. So why not make them stand out and easily accessible at the top of the page? So then going on, you know, we also know that many times with websites, we'll have a video in the hero. It'll autoplay when the user lands on the site to kind of give an emotive feel to the site itself. So what it does though is it has for some people, they want to be able to reduce that motion. So here on the top right of the page, you'll see the button that says reduce motion. Again, giving control to the user to engage with the content in the way they want. So they click the reduce motion, it stops the video and it stops all those micro interactions, all those little button hover states that we talked about earlier are stopped so the user can engage in the content the way they want. So your takeaway, reduce banner blindness, please, by not using auto carousels. Prioritize or personalize the experience that your users have to control the, the users have to access the content in the way they want it. All right, so. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. So. one. Oh boy, another PDF file. Okay. So here's some things that are a challenge with PDFs. So number one, PDFs don't respond to the screen. So that can result in a lot of wasted space. You might need to zoom in on your phone so that you can actually see what's happening in there. A lot of times PDFs are actually just a really glorified version of JPEG or other image size or image style. So again, we're not doing our users any favors by having a giant picture and yet another thing that they need to interact with. They're actually not designed to be read online. So these are often versions of a print document that has just been converted so that it can be uploaded and shared online. So again, there's no consideration for how a user might engage with it in a digital environment. It was created to be in a book or in a binder or printed out and read in your hand. Also, it's difficult to collect good analytics from PDFs except for how many times they were downloaded, but we don't know. Did they read the content in there? Did they engage with it in any other way? If there were links inside the PDF because we did do some work, we may not get any information about that. So it's not helping us say, hey, we did great things with the content and they shared it. And then PDFs are not automatically accessible. It takes a lot of work and is like its own special art and science to make PDFs fully accessible. Sometimes it can also be very expensive to do remediation to make a PDF fully accessible because they need to be created with all these different tags, headlines, readable text and contrast and alt tags. So you're basically building a web page and then building a whole separate web page in a different system. So we'd rather just build the page once or do some other things that we can do to make those more accessible. Also, PDFs can just be a bad experience. Sometimes they open in a new browser in a new tab or in a totally separate app. Again, if we're talking about engaging all audiences at all economic levels, at all abilities, they may not have access to some of those tools. So we want to make sure that anytime that's the only way we're providing things that we try to have some alternatives for that. It takes away control like Jaina was talking about from them being able to fully engage in the experience. And sometimes people can become disoriented. If they're not used to things opening up or changing, then it might be a struggled experience for them. So we just want to make sure that as we're thinking about PDFs, we think about different ways we can engage with them. We know they're not going away. We know that organizations love to create them. So what do we do about it? Okay, so we can create a gateway page where we can have control over the content. We can put things in actual HTML and have a good structured format. So our search engines can read them, our users can read them and all that assistive technology can see what the content is about and then allow users the alternative option of downloading the PDF to get the full content. We would love for all content to be just on the web. We know that's not realistic. So if we can do some baby steps to help people get there and maybe even summarize some of the content, then we're starting to make steps that way. Also, the good thing about this is that these pages are shareable where a PDF might not be a shareable directly from that document. And these pages can include things like table of contents and topics so that users and again, those search engines can understand what kind of information is on them, index them properly and then serve them to the right audiences. So these pages empower a user to download the PDF when they're ready to use it, ready to read it and they understand what type of technology they might need to access that document. So take away here again, creating PDF gateway pages is a better user experience. It makes it more accessible and is better for search engine optimization. So spare users the nasty surprise of being dumped into a PDF file. Nobody loves it and create those PDF gateway pages. All right. And then as we mentioned earlier, contrast is our principal number eight. Many users struggle with contrast. So contrast is the difference between text over a background and lack of contrast can decrease the legibility of content and make websites harder to read and harder to use. So contrast needs to be considered in regard to color, fonts and backgrounds. And I know that I sound like I'm a design killer. I am not. I love designs and brand. And I know that it is very difficult to create unique brands and express them in all the colors of the rainbow. But when we're doing that, we need to make sure that we're thinking about all users and especially contrast because it can be very challenging to build a beautiful brand and then find out, Oh, it's not accessible. Now we need to change everything. And we spent all this money and time making that brand and building all of these assets around it. But now we need to go change it. So if we think about it from the beginning, that's way more helpful. And we can start incorporating those things in the early parts of the process. So let's look at an example here. So this is a screenshot of the Affleck site. And so you can see that here, they were thinking about contrast, right? They have this first screen here that has kind of a dark background with white text for their hero image. It's got a headline and the content has okay contrast. It's not great, but they did also offer a way to make it high contrast by having that little slider up in the top, which is a great idea, you know, giving the user control allowing them to change the experience to be a higher contrast. Unfortunately, they went a little bit too far. So 100% black or true black background has too much contrast. And so for users who have visual concerns, this can actually increase the fatigue of them reading this type of content. So maybe toning it back just a smidge from pure black would have been a bigger win. But again, we appreciate that they're at least making the effort to have that user controlled ability. So how do you know if you have the right contrast ratio? Well, there is an amazing tool out there called Web AM. And it allows you to freely go out and check the contrast ratio of your site, all your colors, you simply enter a hex value in the foreground and the background and it will give you a number telling you what your contrast ratio is. Don't worry about what that ratio number means. What you're looking for are visual indications that you are passing. So you see a green box there that says pass under the WCAG or WCAG AA. That is one thumbs up from me. And if you get a WCAG AAA, that's a double thumbs up for me. So you want to go for double thumbs up because that's the best. That's going to be the most accessible for the most number of users. So here you can see an example. We've put a foreground color of a blue, which is like your old school blue link, and a background color of white. This is a very high contrast ratio. The higher the number, the better the contrast is. So what you want is that super high number. And again, it gives you the visual indications of what has passed. But don't worry, there's going to be some colors that don't pass. If they don't, then you can just adjust the lightness. So that's that little bar right there. And you can make it lighter or darker and see what, you know, how far you need to go to get to that color that passes. So you can see here that instead of saying pass in the little green bubble, it says fail. That makes me very sad. That's a double thumbs down. So, you know, you can work on that. And again, work with your designers, work with the creative team and say, hey, I found some things that maybe don't pass contrast as much. What can we do to improve those? Maybe it's just changing the shade, you know, a couple notches down, make it a little darker or make it a little lighter. Maybe we can still be on brand without changing the whole thing. And it could be a win for everyone. Okay, but using that tool by just looking at one image at a time, that takes a lot of time, right? So what we do is when we first start working with clients, we'll take their existing palette and start testing it. So this is one tool we use. It's another free tool from GitHub. You put all the colors in. And then it gives you a nice grid where it shows you what font color can be on what background. All those gray squares in the middle say don't do that. That's a double thumbs down from Alma. So all the gray tones, they just ones that you are not accessible. So don't even just talk about them, just ignore them. The color combination view is a great way to look at those colors at once. You can share the results. And what we do with this is we then work with the marketing teams of our clients and talk to them about their brand. And say, do you want to go ahead and update the colors? How can we work on this together? Because we need to collaborate with them if we tell them to change their brand colors, they're going to get really mad at us. And it's going to become a really bad experience. Oh, and by the way, triple A is awesome, but only one client of ours has ever asked for triple A. And it took them two years to make their color palette work. Their chart is pretty cool. Another tool we use here is contrast grid. So you'll see at the top that we actually test black as well as our gray tone, because there will be times where you'll have the black font on a color, and you want to be that true black. Or otherwise, you'll have it be our lighter tone of the 333, which is usually works really well for people that have multiple, it works better for everybody, not too high contrast and not too low contrast. So again, all those colors in the middle, don't do that. Please don't do that. And then it's all, it's all great, your brand will be digitally forward and you'll look like a hero. So please remember to test all colors for contrast to improve your website accessibility and your UX. We do like to use these colors as well on print. So there's a nice consistency so that we can make sure our print colors are really high contrast to And as an organization, talk about where you want to be. So you know, like I said, I love a double thumbs up triple A, but maybe your clients or organizations aren't ready for that. So if you come to an agreement and say, we're going to shoot for double A, you've at least made some people's lives better. You're improving and making steps along the way. Oh boy, we have two more left. Alright, speed through. Alright, so text links can create a sticky user experience. So here, text links are the way that we get through the web. They're on every single website and they help us get through our experiences. So here is some examples of a terrible den of bad user links. I'm sure all of you have seen these like click here, get more information fill out this form. This is just terrible, terrible links. So good UX equals good usability equals good accessibility. Links are super, super important because it's how we get from point A to point B on the web. Navigation is important to which we can talk about in a minute. But links need to be descriptive. So using words like here, this more are harder to use actually, because they're small words. So they're hard to interact with. And they also give you no idea about what to expect from the next page. So we want to make sure that links are descriptive, that they're letting us know where they're going. We can try and buttonize some special links and grouping them together. And if there's a download like we were talking about with the PDFs before, we need to include a format and size so users know what to expect. Also, assistive technology like screen readers can be programmed to read specific links. And I'm sorry that I'm going through this very quickly, but we only have a few minutes left. So again, the links, the more descriptive they are, the better they are. Here's some examples of that. So the first set of links that are in red with an X next to them are things not to do, where we've put things like a full URL in there. That's really hard to read. And if I have a screen reader, it's going to read that whole web address to me. Instead, let's tell the user where they're going and make that the link. And the second one, we have the very standard click here. Again, where are we clicking and where are we going? So instead changing that to the words of where we're going, very descriptive. And then the last one, same thing, we're highlighting the word students, but we've done that twice in a row. So there's not enough context there. And then finally, we have an example here where we're showing buttons. So again, we talked about buttons earlier. One activity that I like to do with clients is just blank out the words on them and say which is the most important button. Nobody could figure it out. They guessed maybe the first one, but they weren't really sure. So in the redesign of this, after we did a study and found that users didn't know which one to click on either, we created one that was a button, which is the one there for downloading the product catalog, and then de prioritize the other two into links with descriptive text. So takeaway here is we need to make sure that descriptive links or text has very descriptive links have descriptive text, sorry, and that it will help guide the users on their journey. So all right. And then our last principle of the day is empowering users to navigate on their site. So navigation serves lots of functions. It is the primary way that users navigate around their site other than Google searches. But navigation needs to be super clear so that users know where they can go and what kind of content you have on your site. So we got a quick example here of the Puma site. You can see the navigation at the top is highlighted. It's not obvious that these actually have a big drop down mega menu, because there's no visual indication here. And when you tab through these, it doesn't expand the navigation out. So if you're a keyboard user, it's really hard to know what all of the options are on the page. And so here's an example of when you actually hover over this, you can see that it's a giant menu and there's many, many options here, but that's not apparent until you hover. And this is less accessible because we have lots of computers today that are touch screen, we've got mobile devices, and this does respond. But you know, there's lots of different ways that users interact with the web, not just with a pointed mouse anymore. So we need to make sure that there are visual indications for navigation because it's super, super important. And so here's another example of the New York Times. This one has the same kind of navigation with no visual indications, but these are all individual pages. There's no subs underneath this. There's no mega menu that opens up. So this is the perfect example of why you might use a navigation like this without a visual indication. And then finally, an example here, this one does have a mega menu. It has some little carrot icons or down arrows to indicate that there's additional content. If you click to reveal, and then this also works with tab, you can tab through it and each of the menus open to reveal what kind of content is underneath there. So final takeaway here, just make it clear that navigation includes drop down menus. And please don't rely on hover only because not all people are mouse users. All right. So everybody take out the phones. This is our final slide here. We got one more after it. But yeah, we'll be sharing this after this meeting as well. But it's all the takeaways that we went through at a glance. Feel free to share it with all the people that your your leadership, your teams. But yeah, just very quick. Okay, cameras are almost down. Okay, then the final one, the big one ROI, it was promised to you in the description that was online, but not in the booklets. So for those of it, you need the proof, the value of UX. This is your slide. We are often asked what is the return of investment or the ROI of UX. And Amazon recently shared a document where it states that every $1 spent on UX, your return in investment is $100. $1 to $100. So if everyone, if you're trying to deal with leadership, it's like, well, we don't have accessibility issues. None of our users access the site like that. Show them this slide. It'll hit them in the pocketbook. And maybe then you'll get them on your side to start looking at UX and accessibility. Exactly. We're trying to give a positive spin. We're hiring. Come see us. Okay, we're hiring. And she came. Yes, I'm sorry we ran long. Thank you for hanging out with us. We just get really excited and passionate. Also, if you have questions, come up and see us. We're going to hang out for a few minutes. We wanted to get to questions. We have some really cool holographic Urock stickers. If you come ask us a question. So thank you.