Design mobile e-commerce websites
Design mobile e-commerce websites
1. Place a prominent search box front and center, at the top of the first screen.
This provides a path for visitors who know what they wish to buy. You can put a reminder about a current discount below the search box.
2. Place a half-displayed image that will encourage users to swipe down and then show more images that link to product categories.
This provides a path on the first screen for visitors who are browsing. You can use a browse by product type menu. You should display a lot of clear, detailed product photos on a secondary screen, and make it easy to navigate through store departments. You can add a More like this button to help in browsing.
3. Display large filter options that are simple and easy to interact with.
Display only useful filters and prioritize the most used ones and collapse the rest. Hide filters that would return zero results. Space filter options to make them easy to select on mobile devices.
4. Add a link to the shopping cart, a homepage link like the company name, and a link to load the desktop view of your store.
5. Avoid multiple level menu navigation, instead favoring multiple screens.
Allow users to drill down through categories via a series of landing pages. Do not ask them to navigate through complex navigational trees on a mobile device.
6. Use your customer's vocabulary for your product tags, menus, and button labels for navigation.
When in doubt, ask users how they would describe various elements.
7. Use big product images and clear call to action buttons, while limiting navigation.
Navigation can be reduced to a simple back arrow or hamburger menu. Calls to action should be easy to select and clearly visible. Product images should be large enough to allow the user to see details. If it is not, allow it to be zoomed.
8. Minimize data entry and be forgiving over formatting.
Entering data on a mobile device is hard. Therefore: Avoid it when possible, instead favoring things like zip code lookup. Remove fields that are not required. Remember previously entered data. Do not split data across multiple fields, like a telephone number or name. Do not require specific formatting. Allow users to see a password they enter so they can check for typos.
9. Utilize the unique characteristics of mobile to provide a superior shopping experience.
Mobile allows you to do things like: Scan barcodes on items in physical stores. Notify the user of a flash sale. Look up location information without data entry. Pay through biometrics like Face ID.