Contributors
@andreea-macoveiciuc-content-expert
Business Benefits
Improve usability, lower site and cart abandonment rates, increase conversions, and improve overall user experience.
Check that all icons are clickable and remove any purely visual icons.
Icons that aren’t clickable can make users think that the site isn’t working or that they are doing something wrong, which could confuse them and lead to poor user experience.
Only use sliders when exact values aren’t relevant and use tap sliders whenever possible.
Common issues with sliders on mobile sites include sliders moving when users take their fingers off the screen or fingers covering important labels, which hinders usability. Tap sliders are useful for avoiding sliders accidentally shifting when users take their fingers off the screen. For example, the Airbnb mobile site uses a slider for estimated price ranges and offers users the option to tap range values instead of dragging and sliding.
Use static images or manual carousels instead of auto-rotating carousels or sliding graphics.
Using an auto-rotating carousel on a small mobile screen risks confusing or frustrating users since the image might rotate when they are in the middle of reading the image copy or about to tap the screen. Users also often mistake auto-rotating carousels for advertisements and tend to ignore them.
Use familiar mobile layouts and follow mobile design conventions whenever possible.
Mobile users are used to things like the menu and back buttons being in familiar locations, such as the top left or right of the screens. Sticking to mobile design conventions decreases friction and improves user experience.
Add support for the native back button and ensure that any data users filled in isn’t lost when they use it.
Ask your web developer to ensure your mobile site supports native back buttons. Sites that don’t support the native back button could unintentionally redirect users who use their native back button to the homepage, which can greatly hurt usability and cause abandonment rates to soar. For example, Adidas allows users to navigate its mobile site using their device’s native back button, without risking losing information they’ve already provided.
Add support for both pinch and double-tap magnification gestures and add reminders like Tap to Zoom to images.
Users expect mobile sites to respond to common magnification gestures, like pinch and double-tap, to zoom in on product images. Reminding users that they can zoom in on your images also improves user experience and can lower site abandonment rates. Ask your web developer to add support for pinch and double-tap magnification gestures.
Use high-quality product images that maintain resolution on different screens and platforms.
Ask your web developer to ensure only high-quality images are used and that they maintain their resolution regardless of platform or screen size. Low-quality images that pixelate and become grainy when zoomed in hinder user experience and damage credibility. For example, using high-quality images allows users browsing H&M to see the fine details of this sweater when they zoom in.
Use overlay filters or drawers when filtering simple data to give context to product lists and search results.
Overlay filters narrow down users’ search results in real-time as they apply or deselect more filters. This ensures they’re continuously aware of the products available and are spared any unwanted surprises (like 0 matching results) when they’re done.
- Use onscreen filtering for filters with lots of data to keep users focused on the task at hand.
- This feature is built into most ecommerce platforms, but ask your web developer to add or configure it if you’re not technically inclined.
Use a carefully considered responsive design conducive to shopping on a mobile device.
Last edited by @hesh_fekry 2023-11-14T11:25:41Z