- Visual elements can have either have one hit area leading to a single destination or many to multiple destinations
- If the number or destination of hit areas are unclear, as they are on 33% of sites, our large-scale testing has shown that users can experience unnecessary disruption or disorientation
- Issues with unclear hit areas in visual elements are observed to be more serious on mobile devices
Knowing what is clickable and what is tappable — and where these linked elements begin and end — is vital in ensuring that users feel in control when navigating a site.
Furthermore, knowing where these links lead to is equally important to users’ ability to navigate efficiently and with confidence.
However, our large-scale testing of homepages during our Premium UX research reveals that unclear hit areas lead to major uncertainty about whether visual elements consist of one large hit area leading to a single page, or multiple hit areas leading to different pages.
Typically, unclear or ambiguous hit areas are seen in clickable or tappable graphic elements, such as banner images or when text and graphics are combined in one element.
Surprisingly, our e-commerce UX benchmark shows that 33% of sites — 28% of mobile e-commerce sites and 43% of desktop sites — fail to convey the functionality and destination of links in visual elements.
The resultant uncertainty can lead to users inadvertently following unsuitable links that — at a minimum — slow down product finding and checkout, and at worst lead to disorientation and possible site abandonment.
In this article, we’ll discuss the following:
- How ambiguous hit areas cause users to miss links to desired destinations
- How ambiguous hit areas cause users to take unintended detours
- How mobile hit area ambiguity is worse than on desktop
- How to avoid unclear hit areas in visual elements on both desktop and mobile sites
1) How Ambiguous Hit Areas Cause Users to Miss Links to Desired Destinations
The first issue occurs when users assume a linked element contains a single path when in fact it contains multiple paths.
For example, an image with multiple links could appear as one hit area if the links aren’t styled in a way that indicates their functionality (see section 4 below).
This means that some users have to spend more time than necessary getting to the page they need if they overlook a link that would have taken them directly there.
Other users may never find the desired location — testing has shown how users can easily become distracted and fail to complete a goal if it’s unnecessarily difficult.
Depending on the destination’s importance, this could result in users abandoning suitable products, or even a site, if they fail to reach the content they’re looking for.
2) How Ambiguous Hit Areas Cause Users to Take Unintended Detours
The second issue — in direct contrast to the first — is when users assume a visual element contains multiple paths when in fact it’s a single link.
A common example of this issue is when a banner image showcasing multiple products is linked to a single destination, and not to the individual products depicted in the graphic.
In this case, users will experience at least a minor interruption if they find themselves on a page with many products rather than the one they are interested in.
And if users find themselves off course, getting back on track could be difficult unless they are well supported by site attributes such as good navigation design and “Back” button performance.
3) Mobile Hit Area Ambiguity Is Worse than on Desktop
During testing of mobile UX the issue of unclear hit areas occurred more frequently and was often more severe than on desktop sites.
The severity of the issues on mobile were often due to the overarching mobile e-commerce UX issues, such as a lack of page overview and an increased sense of disorientation compared to desktop.
Such mobile-specific issues mean that it is harder for users to recover from unexpected detours caused by unclear links.
The higher frequency of issues on mobile can be partially attributed to the absence of hover effects that can help prevent link ambiguity on desktop (see next section).
Additionally, since mobile users are constantly physically interacting with the interface through scrolling with their fingers there’s an increased risk of tapping something inadvertently if hit areas for visual elements aren’t clear.
4) How to Avoid Unclear Hit Areas
Resolving the issue of ambiguous hit areas depends to some extent on whether the site is a desktop site or a mobile site.
However, there are some basic design aspects that apply to both, which can help users distinguish hit areas.
In particular, using borders, separators, arrows or other indicators, or background colors to clearly delineate hit areas — and doing so consistently throughout the site — will help users intuit the correct hit areas without having to spend time examining the interface.
How to Avoid Unclear Hit Areas on Desktop Sites
On desktop, users are helped by the numerous clues that are displayed on hover that indicate if an element is clickable and where the path leads:
- The cursor change when a link is hovered
- Styling — such as for links and buttons — that changes when hovered
- Displaying the destination’s title when the link is hovered
- The link paths displayed in the bottom of the viewport of most browsers when a link is hovered
Yet these “basics” are not enough — testing has revealed that many users move through sites very quickly and aren’t observant enough, or patient enough, to benefit from these subtle clues.
To ensure hit areas are clear for desktop users, multiple hit areas leading to the same path should be clearly indicated by having a synchronized hover UX, where hovering one clickable element will invoke the hover style of all other elements leading to the same path.
In practice, this is done by wrapping the entire block of elements in a single link; for example, by wrapping the image, title, snippet, bullets, and buttons into a single unified link with one large hover area and effect.
How to Avoid Unclear Hit Areas on Mobile Sites
On mobile, in the absence of hover effects, the solution is simply to avoid any ambiguity regarding hit areas.
Thus it’s typically best to avoid complicated visual elements that contain multiple hit areas.
Instead, a better-performing design is to encapsulate each item separately and make it a single hit area.
In addition, whenever hit areas could be misinterpreted, help users by making it clear what elements are links; for example, by using background shading or another form of encapsulation, and ensuring the size of the hit area matches the size of the visual element.
Clear Links in Visual Elements Speed Up Product Finding
Without clarity around links in visual elements, users can end up badly off course in their product-finding journeys.
Surprisingly, our research in e-commerce UX shows that 28% of mobile e-commerce sites and 43% of desktop sites fail to convey the functionality and destination of links in visual elements.
Given the potential for unexpected time-consuming detours and longer than necessary paths to destinations, it’s critical to make it obvious to users
- what parts of visual elements are clickable or tappable,
- where those links are going to take them,
- and where the hit areas begin and end.
There are various ways to make it clear to users whether there is just one link in visual elements or many, and where those links lead to:
- On both desktop and mobile sites, use design elements such as borders, separators, and other visual cues to distinguish separate links.
- Also, make sure that the size of the hit areas exactly matches the size of the visual element.
- On desktop, use unified hover effects to indicate when visual elements with different subelements consist of one link rather than many.
- On mobile, opt for simplicity when it comes to visual hit areas: avoid any ambiguity regarding hit areas by ensuring all visual elements have single hit areas.
Clarity around links in visual elements will give users confidence by ensuring that each time they follow a link they are taken where they expect to go, making product finding a smoother process while bolstering the site’s e-commerce conversion rate optimization.
(Premium subscribers can view our guideline for more on hit areas.)
This article presents the research findings from just 1 of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.