Contributors
@paul-boag
Business Benefits
Make a more user-friendly mobile version of your site to boost conversions and purchases.
Introduce a ‘switch to desktop version’ option for mobile users, to reassure them they are not missing important information, increasing the chance they go ahead with the mobile purchase.
Give a mobile user the option to view an item on the full version of a website.
Reduce perceived latency when you’re creating a mobile commerce app.
This can be achieved by:
- Using animation to mask short delays while the network is accessed.
- Preload content that users might request next.
- Load a skeleton view of your page, before populating images and content.
- Use progressive JPEGs for images and placeholder images.
Plan the mobile shopping process from the start, rather than addressing it as an after-thought.
Consider starting with the mobile shopping experience, rather than addressing the desktop first. Get familiar with common usability mistakes that companies make.
As with all ecommerce, remove confusing terminology in navigation elements, and use the customer’s language instead.
Don’t use terms to describe store departments and product types that all users do not necessarily understand. For example, a clothing company chose product categories that aren’t familiar to most people, and testing revealed a user who wanted to search for boots clicked away because of the menu.
Know your target customers extremely well, and use their language, not your own. Be careful not to presume customer knowledge of your products and services.
Limit how much data entry you ask from mobile shoppers.
Customize the keyboard for each type of data entry. For example, show a numerical pad for things like phone numbers. Ask the user to enter their zip code first, then auto-fill the city and state info for them. Avoid splitting data entry like telephone numbers, across multiple fields.
Allow users to edit information such as billing address, in place by tapping on it.
Untappable items confuse and frustrate mobile users. In one example, taken from the ecommerce checkout process of a mobile site, the user is trying to edit her billing address. She repeatedly tapped the address and swiped up, down, left, and right, with no effect, which leads to frustration.
Use carousels with extreme care on mobile as image carousels kill conversions.
Tests show that text is often too small and the images are too crowded when automatically converted from desktop to mobile. Moreover, some desktop version features do not fit the navigation scheme on a smaller screen, so they are bumped into the carousel which confuses the user, who expects straightforward site navigation.
If you do use a carousel ensure:
- It does not progress automatically.
- It is swappable.
- It is easily readable.
- It works well on lower powered devices.
- It works well on poor connection speeds.
Warn visitors when they are about to access a page that is designed for desktop to improve user experience.
Amend how the screen shows for mobile when you use responsive design. For example, a website does not have a mobile-formatted page for international shipping. But instead of dropping the user into that page unexpectedly, the feature is presented as a benefit while, at the same time, the user is warned it will display as a desktop-formatted page.
Use menu solutions like arrows that point up and down to show whether a menu category is expanded, to improve the product browsing on a mobile screen.
Tests show that people are rapidly confused by most menu systems that run more than two levels deep, are too chunky with how they present the products, or which use misleading solutions, such as right-pointing arrows that lead some users to expect the screen to shift to the side when it won’t.
Choose button or function names that users can easily understand, and combine related functions into a single button to reduce the risk of a user pushing the wrong one.
Test to find out if for example, “filter” may be a better word choice than “sort by”, to label a button or function with. Combine similar controls such as filtering and sorting on a single screen, accessed through a button labelled “Filter.”
Last edited by @hesh_fekry 2023-11-14T12:10:24Z