Improve usability, lower site and cart abandonment rates, increase conversions, and improve overall user experience.
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.
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.
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.
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.
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.