When displaying search results and category lists on mobile sites & apps, users often simply have no idea where to tap in order to select a given item / product.
Can the entire “element” be tapped? Or is it only the product title? And what about the thumbnail? During the mobile commerce test sessions multiple issues arose as subjects were unsure of where to tap in order to select a given option in a list, what was even “tappable”, and where a link would take them when they tapped an area. Some even got completely stuck and, without knowing how to proceed, were unable to complete their purchase.
On touch devices users lack the subtle but crucial mouse hover states which provide instant indication if something is clickable or not. Often by changing the cursor from a pointer to a hand, changing link color, showing the destination url path (depending on browser), showing a link title, or by changing the visual appearance of entire elements by using a change in background color, borders, or even images.
But with touch devices’ lack of hover state these indications aren’t available to the user and interfaces must instead either be learned by trial-and-error (a sometimes acceptable trade-off for frequently used games and productivity apps) or the interface must at all times make it clear what is and isn’t clickable (clearly designed links and buttons). This proved a major problem during user testing of the mobile sites; especially on complex, navigation heavy sites such as mobile commerce sites.
A good example is inconsistent link styling. This is certainly a problem on Desktop sites too, but it is much worse on touch devices as users don’t have the hover state to assist them in clearing up hit area confusion (as previously mentioned, the problem was so severe in some cases that it lead to purchase abandonments). On Desktop, if the user is in doubt, they can hover the area with the mouse and get instant feedback on whether the area is clickable or not; on touch devices, users don’t have this affordance.
One particular issue that was observed at many of the test sites was when list items (e.g., a list of products within a category, a list of movies at a specific theater, or a list of different departure flights to choose from, etc) had multiple hit areas invoking different functions. The subjects were simply unable to determine which of the multiple elements they should click, and in most cases did not realize they lead to different places or invoked distinct features.
At Fandango, after having selected a specific movie to watch, users were shown the above list of theaters with specific show times. Here’s how the subjects interacted with the list:
That’s an 80% failure rate! Quite simply, it’s very confusing to users when a single visual element has this many different (interactive and non-interactive) hit areas. Two other approaches would have been to either make the entire list item one large hit area, all leading to the next step in the process (the “Time Selection”, where the “Buy” button currently takes you), or have users select the wanted play time directly at this page (allocating much large hit areas for the time options).
Generally speaking, one should avoid having multiple hit areas (for different paths or features) within the same list item and instead make the entire list item one hit area pointing to a single path.
The above examples are only two of the many instances where it was unclear to the subjects either what elements were clickable, what the differences were between the different hit areas, and most importantly, where to click in order to select a given option in a list.
The sites with the far fewest issues regarding hit areas embraced multiple of the following recommendations:
You do not need to adhere to every single of these recommendations, but the more you adhere to the clearer the hit area will be to the user. Also, in some cases bundling different hit areas in the same visual element may be preferable for the sake of functionality but you must be very mindful when doing such implementations.
A simple test we’ve found helpful in determining whether hit areas in a list are sufficiently distinct goes as follows:
If they immediately can identify the all the hit areas and can accurately predict the pages they lead to or functions they invoke, then odds are that the items are sufficiently distinct. If they have trouble identifying the hit areas you may want to revisit the design and see if you can make the distinction clearer.
This article presents the research findings from just 1 of the 850+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” mobile e-commerce user experience.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 firstname.lastname@example.org