Mobile product filtering values, as well as the filter varieties, will generally have to be concealed behind a tool. Throughout our mobile testing, we noticed this tends to make mobile filters very vulnerable to being ignored completely, but additionally, the technique of applying numerous filtering values immediately becomes unjustifiably difficult (when compared with desktop).
Each time a designer faces the process of displaying huge amounts of data to users, filtering and sorting options become unavoidable. Filtering and sorting help users define the information which can be displayed based on what they’re searching for.
Designing a filtering and sorting option is in no way brain surgery, however, there’s a handful of different methods you could take.
1. Allow the customer sort by multiple methods
I suggest you provide the customer with the following sorting options:
- New & Popular (or that you distinguish “New” or “Popular”)
- Customer Reviews: High–Low
- Customer Reviews: Low–High
- Price: High–Low
- Price: Low–High
- Alphabetical A–Z
- Alphabetical: Z–A
2. Do not insert “Add to Cart” buttons in product lists unless many customers add products to the shopping cart directly from your product lists.
Customers rarely buy directly from the product lists because they would like to read more about each product before purchasing. In most cases, it is, therefore, a waste of precious space on the small screen to insert “Add to Cart” buttons in a product overview such as in the Staples online shop.
It is far more important to “persuade” the customer to go to the product page from which most customers add products to their shopping cart.
3. Use large images if you sell products such as dresses, watches, etc. where it is important for the customer to sense the product without going to the more detailed product page.
For this reason, fashion companies such as ASOS and Zalando have invested a lot of money into displaying high-quality product images large enough to give the customers a good sense of the products, without having to go to every product page.
Additionally, models display their products according to the fashion feel, as is the case at ASOS.
ASOS knows that the customer is looking at the image, the price, and the brand to decide if she wants to go to the product page or not.
If you sell products like clothing, shoes, watches, etc., I recommend that you display rather large product images with little product information: e.g., brand and price such as in the ASOS online shop.
4. Show one product image per line if you have to display a lot of information on prices, ratings, bulk discounts, etc.
In other industries such as the tech industry, however, it makes good sense to display more information up front about technical details, bulk discounts, etc. In the B and H shop, it is important for the customer to grasp all relevant information quickly and without having to go to every product page.
Below is list of product information displayed at Amazon, Staples, eBay, Toys“R”Us, Walmart, IKEA, and John Lewis:
- Product name
- Type of product
- Before and after prices
- Price for members
- Product number
- Available sizes
- Name of the designer
- Free delivery on orders above XXX USD
- Free returns
- Buy today and get it delivered by XX.XXXX
- Delivery options
- Average customer review
- A bestseller
- An offer/discount
- Buy X products, and get a better price
5. Make it possible for the customer to choose how many products to display per page and per line.
We found that pagination links can be tough to tap accurately and will typically result in a new page load. Meanwhile, infinite scrolling proved very effective at getting subjects to explore many products (in fact, test subjects scrolled through more than twice as many products on test websites with infinite scrolling as they did on those with pagination). However, as mentioned, it can make the footer inaccessible. During mobile testing, it rendered vital mobile footer links — such as “Desktop site,” “FAQ” and “Shipping,” general cross-navigation, and similar elements — inaccessible to the test subjects, who all had clear expectations of these links being available in the footer.
The best solution, therefore, is to have a single large “Load more” button at the end of the product list. We’d recommend loading only 15 to 30 products on mobile devices before showing the “Load more” button, and then simply loading them all at once (not lazy-loading).
6. As a minimum, display a product image, price, and brand/designer in the product overview.
Regardless of the industry the item is fashion or technical ensure that the item has the following fields as a minimum:
- Brand Name
- Prouct Name
7. Offers/discounts: Display the before and after price, and emphasize how much the customer saves.
Special offers are always an effective way to attract the attention of customers, by putting the saving price, the original price, and the saving amount it ensures that the customer is given all the information needed to make a descion.