I’ll start with a quote by Jakob Nielsen, co-founder of the Nielsen Norman Group, pioneers in web usability.
“On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave. If the homepage fails to clearly state what a company offers and what users can do on the site, people leave. If users get lost on a website, they leave. If a website's information is hard to read or doesn't answer users' key questions, they leave. Note a pattern here?”
So, how does a website owner make their site usable? It seems like a very subjective metric, one that would be different depending on who you ask. I disagree. I think that often the subjective can be made objective. For example, Quality (of websites, bird feeders, motorcycles) can actually be intrinsically measurable. For more on this, I suggest reading Zen and the Art of Motorcycle Maintenance in which a fictional character becomes obsessed with systematically describing what defines “good” writing. It can be difficult to create these systems though - His philosophical investigations eventually drove him insane, and he was subjected to electroconvulsive therapy, which permanently changed his personality. So to make things easy on you (and to avoid the need for shock therapy), I’ve done some of the dirty work.
First, what are you to do when seeking a roadmap for your website usability? Let’s change lenses for a second. Likely, you are also concerned about your website accessibility. If not, you should be, After all, approximately 25% of American adults have a disability, according to the Centers for Disease Control and Prevention.
Website Accessibility = Website Usability
Further, I would say that accessibility = usability (however, the inverse is not necessarily true). After all what accessibility really means: Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed. In short, when your website is accessible, your website is usable by the largest population possible.
So, if accessibility equals usability, let’s use the roadmap for accessibility that already exists. Here are 8 criteria taken from the latest WCAG accessibility standards, that will help ensure you have a usable website. Particularly, we focused on Guideline 2.4 of the standard, Navigable. These guidelines apply to the disabled, abled, elderly… basically everyone, and will help maximize the usefulness and stickiness of your site, thus engaging and expanding your audience.
Guideline 2.4 Navigable
So, what is this guideline?
The point of this guideline is to tell the user where they are and to enable the user to go somewhere else. Much like signage in a parking garage or building, you want to know where you are at any given time, and how to get where you need to go.
What is the objective of the guideline? What are we trying to achieve?
- Information about the user's location within a set of Web pages is available.
- Headings and labels describe topic or purpose.
Okay, enough setup! What do I (or my web team) need to do?
2.4.1 Bypass Blocks
Add an easy way for users to skip repetitive content, like navigation. You can use a combination of skip links for screen readers and visual cues (for example, clickable arrows) for sighted users. Here is a good summary:
https://www.digitala11y.com/understanding-sc-2-4-1-bypass-blocks/
2.4.2 Page Titled
Make sure your page titles are as informative as possible and help orient the user. For example, a user reviewing their shopping cart may open a page titled “Current Shopping Cart for user engineroom14 with 12 items”.
2.4.3 Focus Order
This is a big one. If a user is taking the time to submit a form on your site - perhaps they want that book on the intrinsic value of Quality, or they want to buy those rare Air Jordans you have for sale - you want to do them a solid and make it as easy as possible. So, a user should be able to tab through each form element in a clear and logical order.
For instance, first name, last name, address, then preferences around their Air Jordans (size, color, price, etc.) Further, there should be a high-contrast visual cue noting which element they are currently focused on. This is discussed more below, under Focus Visible.
2.4.4LINK PURPOSE (IN CONTEXT)
This one is pretty simple: The intent of this Success Criterion is to help users understand the purpose of each link so they can decide whether they want to follow the link. So,
Good:
A link on your page that says Read more about Air Jordan Black Out Editions
Bad:
Two different links on the page with the same description, such as “Read more” or “Click Here”. Remember: to a user relying on a screen reader it is much more difficult to quickly understand where they will go if they click these links.
2.4.5 Multiple Ways
Providing an opportunity to navigate sites in more than one manner can help people find information faster. Also, Individuals with cognitive limitations may find it easier to use search features than to use a hierarchical navigation scheme that is difficult to understand.
Here are some examples:
Site search: Add a search bar, in addition to allowing the user to navige your site for content. For example, rather than sifting through Air Jordans by year and then price point, a user can simply search “Air Jordan 12 Retro Flu Game 2016”
Global Navigation:
On every page you should have a [skippable!] set of links to your shopping cart, wish list, etc.
2.4.6 Headings and Labels
Many users with cognitive differences have trouble with short-term memory. So, it is helpful to provide meaningful headings throughout your content. There should be no more than three paragraphs under one heading. Also, form input labels must be set in code.
2.4.7 Focus Visible
This one is updated in the newest draft standards. To meet this requirement, a user must be presented highlighting or a cursor when tabbing through a website, especially forms and navigation. If your site uses forms, you may need to make some updates to meet this new requirement. The new Focus Visible Enhanced requirement dictates that your focus indicator has these attributes:
- Minimum area: The focus indication area is greater than or equal to the longest side of the bounding rectangle of the focused control, times 2 CSS pixels.
- Focus contrast: Color changes used to indicate focus have at least a 3:1 contrast ratio with the colors changed from the unfocused control.
- Contrast or thickness: The focus indication area has a 3:1 contrast ratio against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.
You can read more about the latest WCAG 2.2 Draft Requirements in our blog post here.
2.4.8 Location
From the guidelines: This Success Criterion is helpful for people with a short attention span who may become confused when following a long series of navigation steps to a Web page. It is also helpful when a user follows a link directly to a page deep within a set of Web pages and needs to navigate that Web site to understand the content of that page or to find more related information.
The most common example of this is a breadcrumb trail that is clickable so the user can navigate back up the tree if they want. This may require a good bit of development if your website does not have this already, but I suggest considering this useful addition to your navigation.
There are really 10 criteria (not 8), but the remaining two are a bit redundant, but for completeness, I will include links below.
2.4.9 Link Purpose (Link Only)
And for good measure, I came across this useful write-up on designing websites for seniors.
That’s it.
Hopefully, these 8 steps will make your website more user-friendly. Share this with your external or internal development teams and use it as a roadmap. You will likely not be able to get to everything at once, but they say life is about the journey anyway, so safe travels.
