We’ve all probably met someone like her (or at the very least, watched a movie she was featured in) — the shallow, high-maintenance trophy wife. She’s young and absolutely stunning and when she walks into a room on the arm of a wealthy 50+ year-old man, all eyes are on her. However, this particular woman requires a lot of money and a lot of pampering to keep happy.
Just like a high-maintenance trophy wife, an over-designed website is a strain on resources. And everyone on the user-end can see that this website isn’t worth the trouble; however, the designer just sees beauty that will represent them. The designer doesn’t realize the people are rolling their eyes at this over-designed website, frustrated by the resources they themselves have to provide, just to find basic information. And the designer also doesn’t realize that if those resources are unavailable, so is the website (just like the trophy wife who finds a new fish when the cash runs out).
Just because a website is beautiful does not mean it’s functional. And unless your website is literally intended to be an art piece that offers nothing else, design needs to come second to functionality. When you prioritize design, it usually means you’re going to include a lot of superfluous features that make it difficult to actually use. Scroll effects that cause hurdles while navigating via keyboard, 3D visuals that can make people nauseous or confused, un-pausable animation, not to mention most over-designed websites take FOREVER to load and becomes practically non-functional on anything less than a fiber Internet connection. I truly don’t understand the point of putting so much effort into something so utterly un-usable.
These two have something else in common: Beauty is fleeting. If beauty is all you’re bringing to the table, your usefulness will quickly become irrelevant. If you put more effort into the design than the experience you’re providing, there won’t be much worth returning to your site if a user knows they have to wait several minutes just for it to load and once it does, they’ll need to jump through annoying hurdles just to use it. They’ll probably find that information elsewhere, rather than contribute more resources to something whose beauty has been diminished by their inability to make those resources worth contributing.
And what happens in literally every Nancy Meyers movie wherein the husband left the smart, funny, but middle-aged female protagonist for a shallow, high-maintenance but beautiful 20-something-year-old with an attitude problem? The husband tries to go crawling back to the wife because he realized her dependability, intelligent conversation, and refreshing wit more than made up for her lack of youthful beauty. And in reality, websites are no different.
Obviously, this simile is based on a tired Hollywood stereotype. However, that doesn’t make it any less valid. I grow so exhausted watching designers on Twitter show off inaccessible designs that will inevitably drain the resources of anyone unfortunate enough to land on their site. I’m not saying websites shouldn’t be beautiful – but they MUST be functional and usable by EVERYONE. And if only beauty is taken into consideration when designing a site, you’re setting yourself up for failure and dooming your audience to a poor user experience.
How to design inclusively
Here are a few common issues I see from the #UXUIdesign crowd.
Poor color contrast
Every single day I see poor color combinations. This is literally one of the easiest things to avoid but one of the most common issues. Pro tip: If you have a light and a dark mode, CHANGE THE COLORS OF THE FONT. That hot pink may look great on a #333333 background, but it is virtually unreadable on top of an #eaeaea. Run your colors through a contrast checker, like WebAIM, and adjust accordingly. And while I realize things in the mint/lime-green family are super hip right now because all y’all are doing it, they are not accessible with other light colors. So can you tone down the white font on a lime background? If even those of us with perfect eye health have to squint to read your content, you’re putting your users at a severe disadvantage.
Forgetting to consider focus
It’s not uncommon to provide button or link styles in a design you’re showing off. Usually, these are shown in two states: static and hover. However, by not including a focus state design sample (as in, the state of the button or link when a keyboard user has navigated to it), it is a clear indication you’re probably not keeping accessibility in mind during your design process. For example, yes, you can make a focus state button use the same style as the hover state, what about the focus outline? Did you consider it? Did you design it so it fits with the site while allowing keyboard users to know exactly where they are on a page, or are you unaware it’s even there? Is your intention to instruct the developers to disable it? By not considering keyboard navigation, you are excluding a huge group of people from successfully using your website and creating a poor user experience. If you’re unsure how to design for focus indication, Deque’s “Give Your Site Some Focus!” article should but a good jumping-off point to begin designing inclusively.
No need for a menu, I’ll just have a hamburger
Something I’ve seen a lot recently is completely replacing the main menu of a site with a hamburger icon (☰). This is actually really bad practice, especially when it’s just the icon and not “Menu ☰.” This reduces menu visibility and forces users to click through more obstacles to access basic navigation. And honestly, it often looks pretty silly. You have a main menu header bar, and on the left is the logo and then waaaaay on the right is the hamburger menu icon. Why all the extra space? It just looks like one of those long, 20-person dinner tables in the movies where the husband is on one end and the wife is on the other to emphasize how distant they are, literally and emotionally. You are wasting space and your users’ time by tucking your main menu away. It’s also an excuse not to audit and consolidate your content to make it more efficient (which usually provide a better user experience). If you hide your main menu away, you don’t have to worry about the limited real estate of a main menu and you can just throw all kinds of crap in there. It’s lazy. Fix your content, prioritize important pages, and put them in a visible main menu.
This IS an accessibility issue. For one, you’re creating much more of a hassle for keyboard users. For two, that’s if they can even access it at all. It is 2022, and still, the amount of poorly developed hamburger menus I come across is astounding. They aren’t made with keyboard users in mind at all. And in cases of content management systems (CMS) like WordPress wherein users are able to install pre-designed themes, developers of hamburger toggle menus aren’t aware of the theme’s core capability which causes a conflict. For example, if the theme is accessibility-ready, it may have a hidden “skip to main menu” link. These depend on anchor points. So if a developer is unaware these links exist and override the theme’s main menu with their own hamburger toggle menu, they probably won’t implement the ID the skip-link depends on, causing it to become broken and useless.
I could bitch all day about this trend. I’ve seen it cause way too many hurdles for the sake of minimalism that’s gone too far. And hey, if you’re a fan of the hamburger main menu on desktop, you’re probably pretty offended by now. Just remember, if a user can’t access or use your main menu, they can’t use your site. So go ahead and be mad that I’m pissing all over your “creativity,” just remember by continuing to do this you’re probably shooting your own business, organization, or client in the foot by doing so. And before you say “keyboard users aren’t in my demographic,” please refer to my recent post “Disabled people aren’t in my demographic” and other dumb crap people like to say. Maybe keyboard users aren’t in your demographic because your site is so inaccessible it’s unusable by them so by not considering their needs you’re forfeiting that income, hmmm?
Remember who you’re designing for
When designing websites, just keep who you’re designing for in mind. No, not the client: the end-user. Do you want to design something that only looks nice, or do you want to design something people actually enjoy using? When you keep those things in mind and consider all potential users who may come to your site (hearing impaired, visually impaired, motor impaired, cognitively impaired, in addition to users who may not have a disability that affects their browsing), that’s when you really start creating something beautiful that many more people can enjoy.
Your website shouldn’t be comparable to a stereotypical trophy wife. If you want your website to succeed, you must make it accessible to reduce the frustration and strain on resources you demand from the end-user. It really doesn’t matter how sexy your website looks if it is barely tolerable.