Mobile version of ecommerce Web site: Search and catalog page design

Original:Mobile Commerce usability:search and Category Pages

Author: Linda Bustos

Translator: Shan

———————————— the full text of the split line —————————————

Mobile Shopping

This is the second part of this series:

Part 1th: Website home page and navigation

Part 2nd: Search and Catalog pages

Part 3rd: Product pages and shopping carts

Part 4: Forms and Checkout

Here are my references to Best Buy, Target, Sephora, Moosejaw, Barnes and Noble, Amazon, Sears2go, Ralph Lauren and Tickets.com (each site is directly linked to their mobile version ) Some suggestions on the usability of mobile device websites.

Search

Error handling

As I mentioned in part 1th of this series: home page and navigation, some sites, such as Best Buy and Barnes and Noble, offer keyword search rather than directory browsing options. If you try this way, make sure that the site's search engine handles synonyms and similar words very well. Often, it's easier to make mistakes than traditional computers with touch-screen phones and keypad input. Search engines automatically complement technology, and technology like the itunes Store is also useful.

Layout

Many websites display a search box on every page, just like a traditional e-commerce site.

Search results and Catalog pages

Sorting options

Best Buy numbers Each of its search results options so that you can quickly select the corresponding search results using the numeric keypad. In addition, the search results do not display thumbnails (for faster page reads). A potential problem is the default search results, if there are 200 search results and are sorted by price, then the low price and the accessories that contain this keyword may be displayed on the previous pages. For example, the HDTV cable may be confused with the HDTVs results page.

BestBuy List

Sears offers more options. You can further filter your search results by listing, price, rating, keyword relevance, and popularity. This is really very useful:

Sears Sort

Because some mobile devices do not have a fallback key, it is recommended to provide a link to return to the search results list. Unfortunately, Sears did not do so.

Minimized clicks

The list of directories also contains inventory (entity and online inventory) and prices, which reduces user clicks and page reads and effectively improves the shopping experience. If you supply the goods in the shop, please make sure which products are suitable for this service. Sears even includes services that provide access to a sister store:

Sears Avail

Amazon offers a "Nice-to-have" feature that allows you to add a product to your cart or to a list of items you want to buy on the right-hand side of your catalog or search results (on the iphone, click the arrows to expand the list and select the item). This reduces the number of pages read, and the "prey" is able to accurately understand from the description of the product that this is not what they want.

Mobile Amazon Cart

What is clickable?

Make sure the thumbnail of the picture is clickable. Moosejaw's old version of the design is very confusing, only the title can be clicked:

What-to-click

Whether to display thumbnails and star ratings in search results is up to you, they reduce page reading speed but can help users make better choices. Best Buy chooses not to display thumbnails, which may be due to the fact that many products are not rendered well in thumbnails. If you do not display thumbnails, make sure there is enough space between the search results to allow you to use your fingers.

Do you like this article? Please look forward to the next article: product display page and shopping cart .