Maybe you just refreshed your website, or perhaps you’re satisfied that your tried and true website is performing well. Either way, you know that an organization’s website is often its first opportunity to make a great first impression on a prospective member, client, partner, employee, or supporter. So today, let’s talk about your website’s “UI, UX, and accessibility.”
Wait, what?
Let’s back up: In digital design, user interface (UI) refers to the interactivity, look, and feel of a website or page, while user experience (UX) encapsulates a user’s overall experience with the product or website. Digital accessibility is the practice of making online content usable by all people, including those with disabilities.
At GRAPHEK, we work every day with clients seeking to meet people where they are through exceptional design. To talk through what we should all be looking for when we consider our own organization’s online presence, join us for a conversation with Tim Connor, senior art director, as we explore what UI, UX, and accessibility can mean for an organization looking to make their website the best it can be.
In simplest terms, Tim says, UI is a study in fonts, colors, purposeful design, and effective interactivity of buttons and links, while UX is more about whether the website operates fluidly and allows a user to navigate from page to page with minimal friction. To dig a little deeper, Tim likes to use what he calls the House Analogy:
UX: This is similar to researching the future homeowners’ likes, dislikes, needs, and tendencies.
UI: This is similar to drafting a blueprint of the house, including specifics such as the floorplan; how many levels there are; the locations of the staircases, windows, and doors; and even which direction the doors open. This blueprint of a website is called a wire frame.
Visual Design: This is where we expand on the UI wire framing and UX research to select the paint colors for all of the walls, flooring options, light fixtures, furniture, upholstery, and so on.
Accessibility: This ties back to knowing the homeowners. Do they need ramps to get into their home? An elevator? Particular lighting? We have to account for all of that in the process.
Accessibility technically falls under UX, as having a good user experience means, for example, that someone with a visual impairment can find, read, comprehend, and relate with your content; they’re not restricted, for example, by poor color contrast or font size. To help organizations design with accessibility in mind, a “508 compliance” guide was created, with guidelines including using large text (14-18 point), ensuring hyperlinks have descriptive text; adding captions and subtitles to videos; avoiding flashing lights or blinking bright elements; and ensuring the website is compatible with screen readers.
As you’ve probably gathered, you’ll be able to test some of these components yourself. Are images described? Are your font sizes large enough? If you have an international audience, do you have an auto-translate feature? Other aspects of design might feel a little less familiar to someone outside of the design world, such as testing color compatibility. For that, color contrast values can be tested using a Web Content Accessibility Guideline (WCAG) standard, which are a set of recommendations for making Web content more accessible, primarily for people with disabilities but also for other users, including other devices such as mobile phones.
“Reviewing a website can be a laborious process,” Tim said, “but as you go through a site page by page, with the mindset of a typical site user, we’re looking for quality control at every turn. I was on a site recently where the phone icon to call the company was overlaying what is commonly called a ‘hamburger menu’ – the three stacked lines that indicate a menu dropdown – so every time I tried to click on the hamburger menu to navigate the website, the ‘make a call’ phone interaction would open instead.”
“We also look at how content is laid out; if your banner image is so large that all of your content is pushed off screen, that’s the equivalent of a newspaper article being ‘below the fold’ and, therefore, out of sight. People have short attention spans and we can’t depend on them to scroll repeatedly to find your content – that’s lost opportunity. These are the kinds of things we’re looking for when we run ‘audits’ of websites for clients.”
Another typical feature on websites, commonly called carousels or sliders – usually a series of five or more banner images and content that rotate like a slideshow – get low marks for UI, UX, and accessibility. People read at different rates, so oftentimes they flash by too quickly. Or, a short attention span means no one sees past the first or second one, and they cannot be bothered with clicking through all of the “pages” of the carousel. If content is important enough to put on your home page, work on a design that allows you to highlight the critical messages you need to share rather than hiding content behind other content. Every time you lose eyeballs on content because it’s tucked behind something, you’ve lost opportunity.
Accordion menus – which require a user to expand or contract the menu using arrows – can potentially be a more workable solution for saving space since they make scrolling less necessary and therefore less taxing. Essentially, you’re isolating information with a minimal footprint but still showing all components of the menu at once.
Not surprisingly, the structure supporting all these features is critically important during the planning stages.
“When we design a website, we want to craft the infrastructure behind it first, so we can think through how we want elements to interact, appear, and be placed. We want websites to feel easily digestible, intuitive, and accessible to everyone,” Tim added. “When you come across a website that works beautifully, where you don’t get blocked by login screens and where you can find what you’re looking for easily and quickly – and find your way back to your starting point with minimal effort – that’s not by happenstance. That’s the result of thoughtful, ground-up design with the end user in mind, with constant attention on a website’s upkeep. Every time new content is added, it’s imperative to check that the new content didn’t disturb the flow of the prior content, and that the site still looks and behaves consistently.”
“The good news is,” he added, “building and maintaining a website doesn’t have to be overly difficult. It requires thought, planning, prioritization, and a willingness to explore options for UI, UX, and accessibility.”
Are you ready to make sure your website is delivering? Give us a call, and let’s get to work.
Want to know more? Tim shares his favorite resources for understanding UX and UI:
