Web Design

For me, having been involved in accessibility for so many years, I've realized that yes, you can meet standards and yes, you can get to the level of compliance that guidelines will have. You get to. But how do you actually make your experience so that it actually, you know, is sensible, meaningful and successful? Like really successful for users?

So it's the same issue of just sort of meeting usability standards, but how do you actually go to the level of, you know, creating, wow. Or creating a meaning for a user, you know, helping them with their task, helping them get to the next level. So accessibility has been part of the story of the World Wide Web. And the creator, Tim Berners-Lee, said it best that, you know, it's really about universal access.

So there are there are three cases to be made for accessibility the legal, the moral and the business case. Now, the legal case, close to 20% of the U.S. population has a disability, and that's one in five people. And that's both the U.S. and the U.K. In the E.U., it's like one in seven people. The thing with access and accessibility is it's moving more towards being seen as a human right internationally

as opposed to what's termed an accommodation. Right. So accommodation is like if you're in a school situation, your child has a disability, they basically get more time to finish a test. And as opposed to sort of being seen as a bolt on, as an add on to your coding or your design efforts. Accessibility is seen more, is being seen more now by companies as more of a fundamental right and as part of the fabric,

the basic foundation of good coding and good UX design. So accessibility is actually required by federal law. And there are, you know, many lawsuits in the period of 2015 to 2017, over 250 different businesses were sued in the U.S. And there are some very famous cases. There are some very big cases, like AOL was sued years ago. You know, Target,

which is a very popular store in the US, was sued. Charles Schwab, the financial investment company Netflix, the video company. So many different lawsuits have taken place. And, you know, outside of some the money side of it, the the PR side of it, which is one of the business issues that we're getting into, is is also at issue. And the legal picture is really important because in the United States, most companies are motivated by lawsuits.

That's the primary motivation. It's not really empathy, it's the lawsuits. And so it's really important to understand the legal side of it. The moral side of it now is that universal access and interoperability are really part of everything we're doing on the Web, or they should be, you know, and if you have tried to send a calendar from Gmail to your Apple calendar or, you know, for example, to interoperability of, you know, QuickTime and it just doesn't work on on PCs as well as, you know, works

smoothly on the Mac interoperability issues are everywhere. You know, responsive Web design has been a champion for any device, any resolution. So inclusiveness is built into responsive web design. And it turns out that responsive web design is actually a really good opportunity for you to address your accessibility project.

So there's corporate social responsibility. Many companies have a corporate social responsibility policy. The other thing is that many people with disabilities face huge discrimination in employment, but some of the things we heard are the, you know, the common mistakes that you find in the developing world, for example, that users with mobility issues so they're in a wheelchair, will go to a job interview. And then the the interviews

on the seventh story in the there's no elevator with elevators broken. So this happens all the time. You know, I was in the New York subway and there was a woman in a wheelchair that in a in a push wheelchair. And the elevator was broken. I actually saw these two two guys. So this woman look like a refugee as well. And these two guys came over, these two kind of businessmen just ran over to the to the to the woman and grabbed her wheelchair and and ran her up like three flights of stairs.

Just incredible. That's really what we're doing with accessibility, is we're providing that like automatic like access. Don't even think about it because the discrimination that users people with disabilities face is huge. There's a 70% unemployment rate, for example, with the blind community in Portland, in the US here, and

users with disabilities, according to the latest census, tend to face like 70% less earnings type of issue. You know, So access to services and online content is a huge issue. And the other thing is that many people with disabilities suffer from health issues or multiple disabilities. So you may have somebody that has multiple disabilities as well. So it's kind of compounded. The access issue is compounded.

Now there's the business case for accessibility, as I mentioned, lawsuits, a big one, but accessibility actually encourages us to do clean coding and to think about the usability of our sites, you know, because you're thinking about the user. Any time you're thinking about the user, you're doing user advocacy. User advocacy gets you to walk in their shoes. Walking in their shoes generates empathy. Empathy helps you think about the website from the person who's going to use it, not your perspective.

Right? So the other thing is that it supports echo and usability. Now, that alone should be enough of a business case, right? So I mean, imagine like, like limiting your site so it's not findable or limiting your site so users stumble and can't get through your site. I mean, you just wouldn't you wouldn't argue against that, right? So accessibility needs to be the third pillar in our optimization strategies that that that is part of the the the launch strategy of any product.

Now accessibility also helps support internationalization and mobile friendly content which are also, you know, critical to SEO and usability and responsive web design, as I mentioned, now makes accessibility easier because you've got HTML5 and CSS3. And then of course, the heavy use of ARIA, which is the accessible rich Internet application, you know, formatting that language that Google has put out.

So ARIA is is kind of a standard as well with especially web application accessibility. And the the other thing I think that's key to the business case is that that accessibility just leads to bad PR, you know, it kind of gives your company a bad reputation in, in Norway where there, you know, it's illegal to have an inaccessible website. It's a form of discrimination. The the airline SAS

versus Norwegian Airlines. So SAS was was cited by the government for having a, you know, their booking engine on their website. You couldn't you can use it if you're a blind user. For example and Norwegian Airlines was like is like perfect. It's like it's a beautiful example and stuff. So there is this kind of like people are thinking, oh, SAS is like, you know, just hates its users or just is completely,

you know, insulting to its to its users with disabilities. And so there's a little bit of bad PR that was going on with those two airlines. And there's actually a a supermarket in Norway that is working with disabled users, with the disabled community to improve the online shopping for its website, for purchasing, you know, online. And and they're promoting that as part of their kind of goodwill.

So they're using that that reverse you know, the good PR as a way to promote the fact that they're doing inclusive design and that their their web strategy is is inclusive and higher in accessibility.

For you, one of your biggest biases and issues as a designer if you're a visual designer or if you're working on a website or app that – you know – you're a stakeholder on the team, it's going to be the fact that you can actually  see what's on a screen, assuming that you're not blind, that you're actually reviewing visual designs.

And the things that I found that are the biggest challenges for visual design are the *semantics*. So, words make sense when you look at them or descriptions are aided with a visual cue; you know – confirmation messages visually colored or it flashes up and there's something that gives you a visual cue there, error messages the same thing. So, these kind of semantics of – you know –

that you understood an error message or you understood something are one of the things we just get used to. And then we forget what it might be like if you don't have the visual crutch. So, this example here is a quiz, and this is where we saw this, when we were optimizing this quiz, that  when we were looking at the accessibility of it, the problem with it – so we went through and we made it accessible, so you could

keyboard and tab through the the different choices – and then we tested it with a user. And we were like, oh – we totally didn't realize this. What was happening is that the correct answer was appearing to the left of the answer choice. And the problem was that when it announced the correct choice, even though it was accessible, it didn't say which one it was.

So, say Choice B was circled and then the correct answer was displayed over there, but it just didn't have this semantic of saying, "The correct answer is Choice B (blah blah blah blah blah)." So, very simple, but a good reminder of like, oh yeah – you know – reinforcing the fact that your visual bias adds context; that might not be there when it's read aloud or when it's navigated through an audible experience like a screen reader.

The second bucket for visual bias is the interaction; it's the little animations or little micro-interactions that are occurring on a screen are another source of – you know – it's like, "Well, I saw that, but a screen reader didn't." You know. So, being aware of that, as well as the third one, which is *place*. So, like the location on a screen or movement that occurs – some meaning from a state change.

Like a hover is a classic one – you hover on and off and it kind of tells you that it's a clickable element or it tells you that nothing's happening. Sometimes you click on stuff, play buttons or you click on elements on a screen that are loading like a button or something like that – nothing happens. And then you can kind of tell nothing's happening because if you have a little technical proficiency as a user, you can look down and see if the page is loading on your browser in the lower-left corner

or you can see that nothing happened – you push the button and nothing happens. Well, if you don't have that visual cue or if something is placed in an area of a screen that you have to kind of navigate back up to the top if you're using assistive technology, that's going to be a blocker. Right? So, visual bias I think is our worst enemy because  we're so familiar with it, we're so used to it   that we've forgotten that we are, so we have that crutch.

There's more than one bias, though. There's *mouse-heavy bias*. So, we've gotten used to the fact that we use mice all the time and as designers we require point and click a lot. So, it took me a while to realize how important this was. Many years ago when I was doing lots of usability – you know – kind of user studies and going out and talking to users, then when you're doing B2B studies (business-to-business studies), you usually run across

that one user who is the keyboard user,  and it's like "I don't use the mouse." Like, this woman is using this very important software for the company and sometimes she's the only user. And she's going through and just because of the speed that she needs to input, it's keyboard-driven. Now, we found this with many types of applications like that, so designing for keyboard accessibility for the heavy input user is just something  that you end up supporting.

It's one of these universal type of design approaches. And so, with accessibility, we're blocking users if we make things too mouse-dominant because then they're not able to use the keyboard. And without the keyboard, there's  usually not a focus state related to that. So, we'll talk more about focus states just like we've been talking about since they're so important.   Now, the other bias is the *color bias* – so we've talked about color blindness.

And for example, putting error messages only in red text. And if you recall the guideline there is to add a supporting element like another visual element to reinforce the color. Don't just use color alone basically. So, watch out for those three biases:  *visual bias, color bias and mouse bias*   because as a sighted designer or business person  or developer you're probably

going to be biased by those things. Now, in the design phase, some of the very basic accessibility things you should be nipping in the bud, in other words, stopping them before the train goes down the track are things like *typography*, so the size of your font; designing and defining that up front or making sure that that's documented in a style guide is really important. If it's not, then that's where a developer needs to be familiar with accessibility so they can stop it

at their stage of coding or a front-end web developer who's putting together a style sheet that will call those styles. So, *color contrast* is the other big classic, and I think if there's one skill that any good designer – and I'm talking visual designer – needs to learn, it's *high contrast* because that seems to be the big one from the dozens of designers that I've worked with over the years. It seems like they give me designs all the time that are low contrast. It's the gray on gray, as I like to joke.

Then *link visibility and target size* is the other one. This is all up front. So, before you even get to thinking about accessibility, you should be thinking about that. And then *labeling or label proximity* – so how close the label is to the element that you're trying to get the call to action on. Once you have those basics, then you can add *predictability and consistent navigation*;

things like the focus, focusability, and then the blocks of content being separated and distinct from each other.

Now, just to start off by saying responsive is a default. Responsive is not an option – *do it*. And the reason is because that's where the world is at. Everyone expects things to be mobile-optimized, and responsive just means that if I switch from my laptop to my tablet to my phone, the site's going to fit to that resolution; it's going to kind of follow me.

And we know that users do that; that's the default. So, by doing responsive design, you're supporting device switching, and that's why it's important. You're also potentially making things a little bit more accessible and SEO-friendly, which is a factor for Google's algorithm that prioritizes responsive sites.

A lot of the users have now become very tech-savvy. A lot of the people using apps and using websites have been using them for 15 or 20 years now. And they are pretty skilled, so they understand the typical patterns. They know that a checkout icon should be in the top-right corner. They know how a good login and registration works; so, all things like that

are kind of predetermined and there's pretty  little innovation here. So, you can do research to test the viability of the product. But in a couple of really, really like pattern cases there isn't really much way to innovate and user  interface – the *visuals can be the differentiator*, and of course, we can use a design system like  Material Design, but that would be a horrible world to live in because those apps would be all  looking boring and soulless.

And people want that design – that's why people buy Apple products among other things, because they look good and they are different than everything else, at least sometimes. So, *people buy with their eyes* and we really need to remember that. And also, there is something called *aesthetic usability effect*, which means that if something looks good, it's naturally perceived by people as being more usable even if it's not. So, those visuals are important  and we really, really need to keep that in mind.

Okay, so let's get to the actual  UI after that lengthy intro. Let's start with *visualizing* because we need to  visualize what we're going to make and of course, if we don't have a lot of experience, we need to kind of use what we have. So, the *less experience we have, the harder it is to visualize* the things that we want to design. And I have a very good example of how it often ends up and how it actually discourages people that comes from 'The Simpsons'.

So, you see an image in your head and you try to recreate it and you end up with something like this and you say to yourself, 'Why doesn't mine look like that?' And this is because we often think that it's really easy to just recreate something that we have in our head without the foundational elements that are making up a good design, and we think that those Dribbble shots – you know – with like semi-transparent buttons are what is good design, so we kind of skip the whole grid, skip the typography,

just add a nice gradient and we  think that's going to be fine. Well, it's not the case. So, what is UI design? In general, what you really, really need to learn first, because everything else comes with practice, is *grid typography*, *hierarchy*, *readability* and *some basic aesthetics*, but you don't really need to be an artist, and design is definitely not art. It's not art because you have a very limited kind of scope of what you can do,

and you can't be "too creative" because that's going to make it unusable. So, a lot of those Dribbble shots are basically artworks and they're just not able to become a real product because  they are done in a way to just kind of have like a flashy visual. So, we need to understand that, but what I think is the most important thing is *the grid and the layout*. But I often tell the junior designers what I think a UI design really is because this whole design thing is  really like created to feel difficult to people.

Like, you know, we have those super genius UX designers talking about lengthy processes, and as a junior we get discouraged – we  get like, 'Oh, I'm not going to learn that ever because I'm not a super genius like they  are.' But in reality, a lot of the design is basically moving rectangles around. So, you take a rectangle and based on some research and some knowledge you move it to a different position, change the color, change the size and that's it.

And it's all rectangles, even if you're moving ovals because the bounding boxes are rectangular as well. So, if you learn *how and why and where to  move those rectangles to*, you're set to go.

User Interface Design Patterns are recurring components which designers use to solve common problems in interfaces. like, for example, when we think about those regular things that often are repeating themselves to kind of appear in, you know, in complex environments We need to show things that matter to people when they matter and nothing else. Right. it's just really sad what we see. Like, for example, if you look at Sears, right? Sears is just one of the many e-commerce sites, you know, nothing groundbreaking here. So you click on one of the filters and then the entire interface freezes

and then there is a refresh and you're being scrolled up. And I always ask myself, is this really the best we can do? Is really the best kind of interface for filtering that we can come up with, or can we do it a bit better? Because we can do it a bit better. So this is a great example where you have galaxies and then galaxies, you have all this filters which are in rows. Sometimes they take three rows, sometimes four or sometimes five rows. That's okay. Show people filters, show people buttons if they important show them.

Right. But what's important here, what I really like is we do not automatically refresh. Instead, we go ahead and say, "Hey, choose asmany filters as you like", right? And then whenever you click on show results, it's only then when you actually get an update coming up in the back. Which I think is perfectly fine. You don't need to auto update all the time. And that's especially critical when you're actually talking about the mobile view. The filter. Sure, why not? Slide in, slide out, although I probably prefer accordions instead.

And you just click on show products and it's only then when you return back to the other selection of filters and only when you click okay, show all products, then you actually get to load all the products, right? Designing good UI patterns is important because it leads to a better user experience, reduces usability issues, and ultimately contributes to the success of a product or application. It's a critical aspect of user centered design and product development.

In the investigative tract, we're using ads, we're  using social media. And this is just examples of the content; this is not an exhaustive list. Then, in the *verifying and committing*, they might be looking at content like endorsements or reviews; they  might be looking at the sales collateral. And then, really the UX starts. This is the setup, the  getting-started guides, the first-run experience in an experience. Even the how-to – that how-to  content for some people and some experiences

continues into the engagement. And here's where those titles, buttons, descriptions, any alerts that pop up and the just game and experience content; you've also got troubleshooting, error messages, alerts if things break. And then we've got the sticky content, the profile ratings and the badges. And then there might be forums where people, customers can get engaged with other people. There might be training and conferences. So, if we take a look at—holy mackerel! That's an awful lot of types of content.

And the important thing here is *this content isn't interchangeable*. Stuff that you make for sales collateral  is not useful in your first-run experience. They need to be similar, they  need to be part of the same body, but they are materially different because  they're serving a *different purpose*. So, the kinds of content we're looking at  is really this lower half. This is the UX content... the content that is  *spinning the wheel from setup into preferring*.