Usability Best Practices for M-Commerce Sites – Part 2

In Part 1 of this post, published last week, we acknowledged the increasing consumer interest in using mobile phones to shop products, check  product availability, compare prices, and read customer reviews. As previously stated, we conducted an internal competitive test with ten smartphone users in our lab here in Irving, Texas, to find out what the user experience was when it came to m-commerce websites. For testing purposes, we had each user complete a set of tasks using an iPhone.

Part 1 focused on effective homepage presentation, navigational browsing and category browsing. Part 2 provides a look at mobile website search functionality, and product listing and detail pages.

Search

Provide a prominent and persistent Search feature at the top of the page.
From the homepage, some of the users started to look for a specific item of clothing by using the Search feature. Users were easily able to find this option when it was located at the top of the page, because they were accustomed to seeing it on the top right corner on most websites when shopping on their computers. Users also appreciated it when the Search feature appeared at the top of each subsequent page because this made it easy for them to locate and use the search field when they did not find the product(s) they were looking for. On mobile sites where it did not appear at the top, users struggled or could not locate this option and felt forced to browse by category.

Fig 1: Amazon                 Fig 2: American Eagle (AE)

The Search feature on Amazon’s mobile site was placed at the top of the page and was easily located by users as viewed in Figure 1. However, the AE mobile site, Figure 2, had an advertisement at the top of the page which occupied a large amount of space and consequently pushed the Search function below the page fold, causing most users to overlook it.

Search Results

Provide users the ability to narrow their search results and ensure internal search engines are optimized the same as your full site.
When searching mobile sites, users tended to enter much shorter search terms due to the following factors:

• The keyboard is less functional. Users are often in a hurry when they are using mobile websites.
• The screen is smaller which renders the search field area smaller; the smaller the perceived area to type in, the fewer characters are used.

As a result, users often generate a large number of results, which can be overwhelming or require too much time for users to browse. For instance, when searching for the term ‘black dress shoes’, Sears returned 32,000 results and Amazon returned ‘10+’ pages, with no indication of the total number of pages. Whereas they would click through a bigger list on a computer, in a mobile environment, they are less likely to do this.

Fig. 3: Overstock.com

Users appreciated the ability to refine their search results on Overstock.com. The ‘Refine’ button (Figure 3) allowed users to choose characteristics to filter their search results down to a number which was not overwhelming.

Fig. 4:                                               Fig. 5:
Urban Outfitters Mobile Site             Urban Outfitters Full Site

Additionally, the search results on a mobile site tended to be less relevant than those provided on the traditional website. For instance, a search for ‘black dress shoes’ on Urban Outfitters’ mobile site returned results for black dresses (Figure 4) while the same search on the full website returned results for shoes (Figure 5).

Results Listing Page

Pricing
Show the price for each item and if it is on sale, include how much you will save by purchasing this product. 
Pricing information proved to be one of the most influential factors when users were viewing product information. They also appreciated seeing any savings they might incur by purchasing the item on a particular site.

Fig. 6: Sears

Product Description
Include a brief description and a picture of the product. 
A brief description of the product on the search results page, often provided in the title, was sufficient for users to determine if the product would meet their needs. Users found information about material, manufacturer, and style the most helpful.

Product Ratings
Display customer ratings as well as the number of ratings. 
Users indicated that they often relied on product ratings when making a purchasing decision and said they were more likely to buy products with a higher rating. As with a traditional website, the more ratings which were available, the more weight the ratings carried.

Product Availability
Inform users of the methods that they can use to purchase the product.
Users appreciated sites which indicated which products were in stock, available online only, available in the store or available both in the store and online.

Product Detail Page

Provide users with a short, succinct Product Detail page with the following information and options appearing above the page fold:

• Product description
• Ability to select size, color, quantity, etc.
• Reviews
• ‘Add to Cart’ button

Provide users with multiple product images so they can view products from all sides.
Users often overlooked key elements of the page when viewing Product Detail pages that required scrolling through multiple screens or viewing related checkout elements that are visually separated from each other (Ex. ‘Quantity’ drop-down above the page fold and ‘Add to Cart’ three screens down, separated by promotional offerings). Users often overlooked product descriptions, user ratings or the ability to modify color, quantity, or size when pages required extensive scrolling.

Fig. 7: Overstock.com

When the ‘Product Description’ link was located above the page fold as is shown in Figure 7 above, it was noticed by users more often which resulted in them exploring the information provided.

Fig. 8: Target.com

Users also stated the need to view multiple, detailed images of the product they were interested in purchasing or browsing. Users indicated that seeing all unique angles of a product, as well as getting a good detailed view of the fabric was essential when browsing or purchasing products on traditional sites as well as m-commerce sites. Target’s mobile site provided users with this option (Figure 8).

By incorporating the usability best practices discussed here and in our previous post, you can go a long way in meeting the needs of your m-commerce users.