Faceted search was originally designed for desktop and laptop users. Translating this experience onto a mobile device is difficult because the very thing that makes the faceted search so helpful to users – being able to see the filters and the results at the same time – is difficult to achieve on a small screen. There simply isn’t enough space to show a full set of facets and a decent number of detailed results simultaneously.
Until recently, most mobile designers haven’t even tried to display facets and results at the same time, instead opting to place them on separate screens. Below are tips to avoid making common mobile e-commerce design mistakes in your e-commerce pages.
1. Insert a waiting page with a rotating animated GIF when products, etc. are being loaded.
When results are loading customers can get impatient with the amount of time that it is taking for the result to load. For this reason, I suggest that you place a rotating icon (an animated “spinner” GIF) on top of a grey-toned layer (a “dimmed layer”) while moving to pages which require more than 1 to 2 Seconds to load. Some might debate that their online store is so quick that “waiting/loading/processing icons” are pointless. This thought can be correct theoretically. However, the client might be shopping from a sluggish Internet connection, and most people hardly have any patience. A Waiting icon reassures consumers as they understand what is happening on the page.
2. Display the filters or the number of filters the customer has selected when she returns to the product list.
On Overstock when the customers wanted to select a filter, they were clearly displayed at the top of the product list, this gives two benefits:
- The customer can quickly navigate to find a list of
- The customer can clearly see the filters he has
3. Do not display a list of products before the customer has selected a specific product category such as “Jeans” in the higher-level navigation.
By ensuring that only if a customer picks a category that they can see the full product list, and products are not shown before that point it prevents confusion. As seen above from Asos’s example a customer will not see products until they navigate to a category completely preventing confusion, and having a customer not know where they are in the process.
4. Do not make the customers select size, brand, etc. in the smartphone’s native rolling wheel; this makes it difficult for the customer to get a good overview of the filters.
When the customer must select filters in a rolling wheel, which makes it difficult to get a clear view of all of the options available.
5. Highlight the filters the customer has selected at the filter page.
Asos does a great job here of ensuring that all filters are visible to the customers at all times, so a customer can easily find and refrence the filters that were already selected.
6. Be careful not to use too small and grey text to highlight selected
The only issue with this set-up is Asos made the text of the selected filters a very light color that makes it difficult to see and read. Putting the font in a more readable text style would make Asos mobile product filtration close to perfect in execution.
7. Make sure that the wording of your filters is self-explanatory and specific. Instead of “Size”, use “Waist Size”, etc.
Here is seen that is very difficult to navigate Amazon’s option, instead of one sizing option there is six. This makes it difficult for the customer to understand which of the options are best to select. As it is very unclear and confusing as to what the difference is between, “Woman’s General Size,” “Woman’s Plus General Size,” and “Plus Size”. By keeping naming conventions clear it make it easier for a customer to find what they are looking for and to purchase what they need.