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.


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:

Users appreciated the ability to refine their search results on 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

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:

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:

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.


Usability Best Practices for M-Commerce Sites – Part 1

People are increasingly turning to their mobile phones to shop for products, compare prices, read customer reviews, and to check for product availability. Due to this increased interest, we conducted an internal competitive mobile usability test with ten smartphone users in our lab here in Irving, Texas, to find out what the user experience was when it came to mobile ecommerce websites.  For testing purposes, we had each user complete a set of tasks using an iPhone. This is the first of a two-part series that reveals some of our findings.


Ensure the branding used on a mobile site is similar to that used on the traditional website and/or advertising. When users arrived at a site and recognized the company’s branding, they felt more comfortable and trusted the site they were visiting, thus making them more likely to proceed with their shopping experience.

Category Browsing

Provide users with the ability to browse by category directly from the homepage. Users who did not start searching began browsing by category. While it is not necessary to provide users direct access to categories from the homepage, they should, at a minimum, have a clear option to begin browsing.

Fig 1: Walmart                               Fig 2: Best Buy

Some sites did not provide users a clearly defined browse option on the homepage and users felt forced to use the search feature.  For example, users did not notice the Walmart browse feature because it was labeled ‘Find Rollbacks’.  This term was related to the store brand and did not fully describe its functionality.

Best Buy provided users with a way to offer specific categories on the homepage in a small amount of space and users found this presentation to be intuitive.

For sites that had an extensive list of product categories, users did not mind selecting an initial category on the homepage and  then navigating to a page that contained a breakout of that category.

Navigational Browsing

Provide users with the ability to view products as they browse by category. Additionally, provide broader and more general sub-categories.  Many sites forced users to continue refining their results when they began the process of browsing by category and users did not see the results of their search until they were four or five levels into the site (see Fig. 3 and 4 below).  By the time they navigated this far, the categories were often too granular and users indicated that they wanted to see products sooner and abandoned the process.

Fig 3: Sears Homepage                Fig 4: Sears Categories

Target offered users the option to select a department on the homepage. However, once users were presented with page after page of categories and sub-categories, they were frustrated with the number of levels they had to navigate through before they viewed any products (see Figures 5-7).

Fig 5: Product Categories (Target)

Fig 6: Shoe Categories               Fig 7: Women’s Shoe Categories

On (Figure 8), the sub-categorization was broader and more general in scope which allowed users the ability to browse the sub-categories, which they appreciated.

Fig 8:

Next week, in Part 2 of this post, we will share more learnings from our internal competitive test of  mobile websites, including effective ways to present the search feature, search results and  product listings.

User Experience of Cross-Channel Fulfillment

For traditional brick and mortars, the movement toward cross-channel fulfillment between the website and the store has presented many challenges. As this offering matures, many site owners will be faced with new issues that arise from allowing consumers to buy online, and then choose their purchase(s) to be shipped or to be picked up at a store. We have discovered, through usability studies of e-commerce websites, that consumers conduct a “game playing” behavior to find the best value within the multiple fulfillment channels offered.

This user behavior ultimately translates to the online consumer trying to find the best price and the quickest receiving method for their chosen product(s). On the surface, this sounds like basic e-commerce consumer behavior. However, websites that provide cross-channel fulfillment have not always offered a checkout process user experience flow that leverages this consumer behavior. The following is an outline of a decision tree that best illustrates this “game playing” behavior.

Note: We pick-up where the site visitor is making their purchase fulfillment decision in the checkout process:

Now imagine this decision tree being conducted on an e-commerce site that offers cross-channel fulfillment. You can see where it becomes a challenge to provide a usable flow to support this online consumer behavior. As you introduce new fulfillment methods on your site (e.g. pick-up in store), the behavior of the online consumer who is “playing the game” (for the best price and quickest method of receiving) needs to be taken into account when designing the checkout process. Focus on offering consumers an easy method of comparing fulfillment methods at once, thus allowing quicker and more educated decisions.

The last thing you want to have happen in the checkout process is something that will deter consumers from completing the purchase.

When is it Acceptable for Your Site to Ask for Credit Card Information?

In an online study conducted for a popular online yellow page provider, it was quickly revealed that visitors were uncomfortable with providing credit card information when they were just signing up for a free listing. In this study, 38 percent of participants reported an unsuccessful site visit and 20 percent of these claimed their lack of success was due to credit card requirements. Additionally, 21 percent claimed they would not likely to return to the site and 31% stated they were not likely to recommend the site to a friend or colleague.

Some comments elicited by some of these failed site visits:

  • “I am uncomfortable with giving my credit card. If you are not going to charge it, why do you need it?”
  • “I don’t like being asked my personal credit details online, when I’m not buying anything.”
  • “I will not give out my charge card info and it seems you will not set up an account without it.”

Credit card information is commonly required to set up accounts or complete transactions, even if the transactions are free, on a variety of sites. Sites that offer “try before you buy” or “free trial” programs will often want credit card information in place so people who (hopefully) choose to become paying customers will have already submitted their payment information. Another reason is that credit card information provides a reasonable way to ensure visitors are supplying accurate information.

Also, often times it is mandatory to certify age—visitors must be 18 years or older to access content, services or products on many sites. Credit cards, such as MasterCard, Visa, American Express, and Discover are used to verify age quickly and easily. All in all, when credit card information is provided, companies can confirm the information with a visitor’s bank and if the information matches, the registration or transaction can be completed. The real issue becomes the way a site communicates with visitors. If credit card information is needed for something other than a purchase, visitors will want to know why. And, they would want to be assured their card will not be charged for anything, without their authorization.

Below is an example of an online trial period sign-up form with strong points and improvement considerations identified:

If the credit card information is required before the visitor can continue with a free transaction, be sure to offer a well-worded explanation of why the information is needed, and assurance that the card will not be charged without the owners’ permission. And, if your site is offering a free pre-registration or a free trial period, consider delaying the request for credit card information until the visitor is actually ready to purchase. This action may even result in increased success rates and brand affinity for the site visitor.

Is Your Site Meeting the Needs of Your Future Customers?

Did you know that over a quarter of your site visitors are probably first time visitors? Did you know that first time visitors are less successful than all other visitors to your site? Understanding who your first time visitors are, why they visited your site, and how successful they were during that first visit is critical in providing both a satisfying user experience and helping drive the future landscape of the site. Here are a couple of examples. When analyzing the results of almost 9,000 visitor sessions from one of our online retail customers, we found that 25 percent were first time visitors to the site. Furthermore, first time visitors had a lower success rate (41 percent) than all other visitors to the site (51 percent).

In looking at their purchase history, 84 percent of first time visitors indicated that they had made a purchase in the customer’s store. This clearly identifies these visitors as not only being current in-store customers but also as a key segment in the future of your online customer base. We also learned that 86 percent of the first time visitors indicated they were the primary shopper for their household.

Perhaps most surprising was that the core demographic of the first time visitor was predominantly 25-45 year-old females while the frequent site customers were males 35-54. The site was catering to the frequent customer but not paying enough attention to the first time visitors and their needs. These are all key metrics that need to be taken into consideration to ensure the growth of the site. The takeaway is that you should continue to understand your first time visitor population, including their basic needs when creating future designs and modifications to your site. They are your potential  future customers.