Optimize buttons for mobile ecommerce

Contributors

@andreea-macoveiciuc-content-expert


Business Benefits

Improve user experience and reduce abandonment rates.


Use button icons and borders to let users know that they can click on a button or element to perform a specific action.

Add downward arrows to indicate a dropdown list, a magnifying glass to indicate a search button, and a shopping bag to indicate a user’s shopping cart. For example, Kenneth Cole’s website uses a hamburger icon to indicate the navigation menu, a shopping bag icon for the shopping cart, a magnifying glass for the search functionality, and borders around Shop Men’s and Shop Women’s to indicate that they are clickable elements.

Use color-contrasting buttons with a target size of 48x48 pixels for Android devices and 44x44 pixels for iOS devices.

This will ensure buttons are easily noticeable and easy to tap without accidentally clicking another element.

Use a touch target size of 10x10mm to avoid clickable areas overlapping.

A study by MIT Touch Labs revealed that the average finger pad area is 10-14 mm and the average fingertip area is 8-10 mm, so a touch target size of 10x10mm should be sufficient to ensure users don’t accidentally tap on other clickable elements.

Add Click to Call, Live Chat and other reassuring buttons in key areas like during checkout and on the pricing page.

This prevents users looking for an FAQ list, browsing the internet for answers, or abandoning your site, thus boosting users’ confidence in their purchase. You can use tools like SurveyMonkey to survey users and find their most common fears, uncertainties, and doubts (FUDs) and where on your site they experience them to further optimize button locations. For example, Home Depot immediately prompts users to get in touch with someone via an appointment or phone call when browsing the hardwood flooring section, since it’s highly likely that users will face FUDs when shopping for new hardwood flooring from a mobile device.

Add one Add to Cart button above product descriptions and one below them to cater to different user types.

This caters to both users ready to buy as soon as they land on the product page and users who want to read the product details first, thus improving your site’s overall user experience by avoiding extra scrolling.

Use an Add to Cart button with a different icon than your general Cart button to avoid unnecessary confusion.

Add collapse buttons in accordion elements to make it clear that the content is collapsible.

For example, use a downward-pointing arrow icon to allow users to expand the accordion element and an upward-pointing arrow to collapse it. Users expect to use their browser’s back button to collapse accordion elements, so ask your web developer to ensure that they can be collapsed using the browser back button.

Last edited by @hesh_fekry 2023-11-14T11:25:40Z