What do Amazon and Nike look like through the lens of a keyboard?
Websites are not usually designed with keyboard-only users at the forefront. While these users do not make up the majority of most websites, they are still an important part of our web ecosystem and deserve a comparable web experience as our users that utilize the traditional keyboard and mouse or touchscreen input methods have.
There are multiple methods of making a website accessible to these users, including giving users options to skip navigation, hotkeys, and thoughtful organization and labelling of content. These accessibility options need to be considered from the very beginning of the design process all the way through the development process in order to be effectively implemented.
What is Keyboard-Only Navigation (and why is it important?)
Have you ever had to navigate using only a keyboard? Many people do this on a daily basis, as their primary method of navigating the web. These users include those with visual impairments, who use the keyboard in conjunction with a screen reader; users with physical or mobility impairments that may struggle with the fine motor skills needed to accurately operate a mouse; and those who may have a short term or temporary disability, such as a broken hand.
Keyboard navigation is rather simple, and anyone with a functioning keyboard can (and should) try it out. Go to your favorite website and start by pressing the “Tab” key; you’ll see navigation, links and other clickable options highlighted. To go back one step, you can hold Shift+Tab. If you encounter a dropdown or navigation item, you may have to use the arrow keys to go through; and finally, to select a link, you press Enter. It’s quite easy from a technical standpoint; however, it can become quite tedious depending on the page design and layout.
Keyboard-only users are not usually the first group of users considered when designing a website or app; most times, they’re seen as an afterthought. While we are making great leaps in making the internet accessible to everyone, this still isn’t the standard, and many companies and developers only build their sites to be barely usable, rather than enjoyable and easy to use for everybody. Let’s take a look at two wildly popular e-commerce sites to compare how they handle designing for keyboard-only users.
Amazon vs. Nike
Amazon is one of the most commonly visited websites in the world. A FAANG company that no longer acts exclusively as an online bookstore, many people from all walks of life rely on Amazon for goods, groceries, and, yes…books. Nearly 200 million people use Amazon to purchase goods, many of which are bound to be keyboard-only users.
Nike is well known for their fitness apparel and sneakers, blending functionality and fashion in their products. This is true for their website as well. Their site ultimately serves the same purpose as Amazon’s, to advertise and sell goods; however, they have slightly smaller reach and a more focused group of users.
Let’s start our comparison by talking about a fundamental law of UX: Fitt’s Law. Fitt’s Law states that the “the time to acquire a target is a function in the distance to and the size of a target”. In a nutshell, more important and commonly used targets should be larger and easier to access than targets that are of less importance. It also means that the distance to and from the task should follow logical sightlines and user paths. In my opinion this can and should also be interpreted, in the context of keyboard-only users, as the number of tabs or actions required between important pieces of information and related information.
Keeping Fitt’s Law in mind, we’ll take a look at the overall informational design of each site. The home page of Amazon is filled with a myriad of links, advertisements, and categories to navigate through. This creates a lot of interactive clutter, even for mouse and monitor users. The logical pathways used in visual design largely go out the window, as every target needs to be made accessible. For those who are visually impaired, all of the interactions are given equal importance as they all are highlighted when navigating through the page.
Trying to tab through all of the options can be extremely frustrating, as hundreds of links to reviews, similar items, methods of purchasing and more get overwhelming and tedious for keyboard only/assistive technology users. A mouse and monitor user will be able to learn how to filter and skip irrelevant information; a keyboard-only user is forced to go through most of these links, one at a time. This makes shopping on Amazon much less of an enjoyable or efficient experience for such users.
As contrast, the Nike website seems very visually oriented and bare. The interface is very slim; while we have a lot of options in the navigation, they are organized as such that the user can sort by category and use the arrow keys without having to tab through every subgroup. This brings much more efficiency to the keyboard-only user and is a function that works especially well with screenreader technology. The focus on images does mean that the visually-impaired user will have a significantly different experience than intended as a screenreader will just read out the assigned alttext, however, it is overall much simpler and easier to navigate with just the keyboard.
A large part of this difference is due to differences in advertising strategy and the sheer amount of items Amazon has compared to Nike; the barrage of ad links and extra items is a fundamental irritability that plagues sighted and non-sighted users alike. We can’t ask Amazon to completely remove ads or suggestions, and keyboard-only users deserve to have the same access to these (as well as more useful features, such as product ratings, reviews, and more of these “small link” options). So, how can Amazon balance this?
In order to remedy the aforementioned problem of link clutter, Amazon could better segment their website so that the most important links are prominent; currently, a tag for “sponsored” that pops up to explain what it means for the item to be a sponsored ad, is the first thing in each product block that gets highlighted. This could be put after the main product name in the code, perhaps located at the bottom of the group. Additionally, ratings and reviews can be condensed into one link to reduce extra clutter.
Navigation Matters
No matter the interaction type of the user, we have to consider what features are most important and what users are most likely to be trying to achieve. For example, most users come to Amazon with an idea or goal of what they would like to buy in mind; after all, browsing a shopping website that has millions of products is not exactly the most efficient shopping experience. It takes only seven tabs to get to the search bar — nice and painless.
For Nike, we have a little bit longer to get to the search bar: thirteen tabs. It’s also worth noting the location of the search bar in relation to the navigation; in Amazon’s case, the search option is before their monumental navigation bar, while Nike has it after. Neither are particularly right or wrong, and the difference of five tabs isn’t egregious by any means; it’s possible that Nike, as a more “browsing-friendly” website, realized their users were less likely to search for a particular product than browse their shoe category or Jordan collections.
Both Amazon and Nike offer a “skip to main content” option, which skips past the navigation and search on both sites. This option is hidden to visual users, and implemented by creating an invisible button that only shows when activated from the keyboard tab. “Skip to main content” buttons are considered to be a best practice, especially for repeat users who don’t need to hear the navigation or certain types of websites that are likely to have more important and more searched content on the front page.
A huge usability difference between Amazon and Nike comes when you take a closer look at the navigation and how these categories are grouped and primed for interaction. Once again, the number of links available is a problem for users of Amazon; the navigation features a whopping thirty categories to browse. This is not a predictable number, and there are likely very few users who will be able to recall the options when returning to the site (or even in the middle of browsing). Hick’s Law states that “the time it takes to make a decision increases with the number and complexity of choices”. With so many categories to choose from, it will be hard for users who can only keep a certain number of options in their mind at a time to choose the correct category.
In contrast, Nike does a great job with how they organize their navigation menu; seven categories, with the option to go further into the subcategories using the arrow keys. Giving this option to the user allows for more ease of use to familiar users, though it has one drawback; are users expected to know what falls under each category? What if a user doesn’t know, for example, if the shoes they are looking for are under Men’s or Women’s? The user has the option to go through each individual category if they need to, or if they know where they’re going or what they’re searching for, it’s easier to skip options. Users have a shorter path to get to where they need to go.
Placement and organization of these features on the page and in the code makes a big difference for usability. When a keyboard user is tabbing through content, the pattern follows how the page is coded. For example, if a navigation bar comes up first before the search bar, this is likely because the <nav> content is placed before the <div> for search bar in the code. This type of thoughtful placement has ramifications for keyboard users; it affects the order and amount of tabs to get to their final goal. For example, Amazon has their search bar before their large navigation menu, while Nike has theirs after. This makes sense, because Amazon has a much larger navigation menu than Nike, so users would not want to tab through every option; however, you can give the best of both worlds by condensing the Amazon menu into broader categories.
The search bar is one example of where a hotkey would be useful for keyboard users; a shortcut to a commonly used item, such as a search bar or cart shortcut, can help users navigate more efficiently. Keyboard shortcuts can be difficult to implement, as visually-impaired users might have difficulty identifying the individual keys on the keyboard; if we look at the keys typically used in keyboard navigation, they all have distinct shapes and are on the edges of the keyboard, where they are easier to access and locate relatively quickly and accurately. Due to this limitation, there are very few combinations or keys that can be used as a keyboard shortcut, so it is important to identify only the most important tasks when assigning shortcuts. For both Nike and Amazon, as well as most e-commerce sites, the search function is one of the most used functions; the amount of use and time it takes to get to each search bar makes a great case for the search bar to take one of the shortcut slots.
Lastly, object focus is an important part of designing for keyboard-only users. Every option that can be clicked by a mouse needs to be accessible to a keyboard-only user, and there needs to be feedback that the item is selected. Both websites do a good job of having the selected object visible, usually with a border of some sort; however, Amazon’s has a few glitches in the navigation area where a tab may not highlight something (or if it does, it’s not immediately obvious). With a screenreader, any text within the HTML tag will be read, so a visual border isn’t as important for these users; however, the text itself needs to be succinct, clear, and quickly identifiable (ideally by using words or phrases with unique syllables).
Takeaways and Best Practices
The baseline considerations for a keyboard accessible site according to Marieke McClosky of the Nielsen Norman Group are:
- Obvious keyboard focus
- All interactive elements are accessible
- Skip Navigation link
These should be considered the bare minimum, as they will allow for a website to be usable; however, there are more considerations to creating an enjoyable and equal experience for keyboard-only users.
Both Amazon and Nike have websites that are usable with only a keyboard; however, our goal is to make as similar an experience as possible for visual and keyboard users. This means considering them throughout the entire design process. Mapping out where information is found, deciding what objects need to be clickable, designing the layout for a simpler user path, and making sure developers include appropriate tags and text in the HTML are all crucial steps in designing a website that is usable and enjoyable to use by keyboard-only users.
Developers should be consistent with their use of semantic HTML so the keyboard and screen readers know what they are targeting, as well as alt-text and link labels. Make sure you have a plan or route through the website and the most used tasks handy; this can help with planning the structure both on the page and in the code, which influences the order screenreaders and keyboards read the page.
Sources
Holmes, K. (2018). Mismatch: How inclusion shapes design. The MIT Press.
McClosky, M. (2014, April 6). Keyboard-only navigation for improved accessibility. Nielsen Norman Group. https://www.nngroup.com/articles/keyboard-accessibility/.
Pearlman, A. (2019, June 11). UX optimizations For KEYBOARD-ONLY and assistive technology users. Smashing Magazine. https://www.smashingmagazine.com/2019/06/ux-optimizations-keyboard-only-assistive-technology-users/
Yablonski, J. Laws of UX. https://lawsofux.com/.
