Best Practices for Mobile Site Checkout

With the constant evolution of smart phones and mobile devices, users are expecting more efficient and intuitive functionality from mobile websites. This is especially true for those mobile sites designed for touch screen devices.

According to a 2009 whitepaper from Gomez, Inc., almost 75% of mobile web users expect to complete a simple transaction in a minute or less before giving up and exiting the site. This is due to a variety of reasons such as interruptions from everyday life, incoming phone calls, and changing network strength when on the move.

Customers are continually frustrated when attempting to make a purchase on a mobile website, especially when they invest a lot of time and energy researching to find the perfect item, only to struggle when going through the checkout process. Sometimes their frustration stems from a number of factors, and other times it is something as simple as not having a guest checkout option. So, how can mobile site managers make the customer experience of their mobile checkout process more intuitive and enjoyable? We conducted an internal study of mobile websites to find out.

We looked at the mobile websites for Amazon.com, BestBuy.com, Target.com, and BarnesandNoble.com with a focus on their Add to Cart and Checkout processes. Users were asked to search for and purchase a DVD of their choice on some of the most commonly used smartphones, such as the iPhone 3Gs/4G, Android (Droid X/Evo), and Blackberry Curve. From this study we have compiled what we consider to be some of the most important factors to consider when improving the checkout process on your mobile site.

  • Provide an ‘Add to Cart’ option from the Search Results.
    A Search feature is often paramount on mobile retail websites as several users prefer to search for products instead of clicking through various product-related pages. Also, the ability to add an item to the cart from the search results, instead of only the product page, saves users a click and an additional page load.

  • Place a ‘Checkout’ button at the top of the screen, as well as at the bottom.
    Placing a ‘Checkout’ button at the top of the screen expedites users’ ability to dive into the checkout process as it is easily accessible. Additionally, a button at the bottom of the screen saves users from having to scroll back to the top of the page to checkout if they have multiple items in their cart.

  • Allow users the ability to checkout as a ‘Guest’.
    Customers do not like being forced to register with the site in order to purchase an item. We have heard some customers say they would simply discontinue the transaction or drive to a store to find the same item, simply because they are being asked to register at the beginning of the checkout process. However, it is worth providing users with an option to create an account at the end of the transaction as they have already entered their information. If you offer users the option to create an account at the end of the process, ensure the benefits of registering are displayed.

  • Provide a step/progress indicator throughout the entire checkout process.
    This feature helps manage users’ expectations and lets them know where they are in the process. Customers like knowing where they are and how much further they have to go before completing their checkout process. Lack of communicating the progress may ultimately hurt conversion if users encounter issues during checkout.

  • Provide a field-sensitive on-screen keyboard.
    When clicking in alpha-fields (i.e. First Name, Last Name), display an alpha keyboard. When clicking in numeric fields (i.e. Zip Code and Phone Number), display a numeric keyboard. Email fields should have <.com> and <@> keys. Also, in an address field, begin with a numeric keyboard for the street number and switch to an alpha keyboard after a space is entered to enter the street name. See the examples below:

  • Default shipping address to billing address or vice-versa.
    Regardless of which address information you ask your customers for first, ensure the same address is reflecting on the following step for shipping/billing. Also, ensure a method for editing the address or entering a new address is also present in cases where the billing and shipping addresses differ.

  • Provide the shipping options on the shipping address page.
    Consolidating these related steps into one page equals one less step in the overall checkout process, expediting the transaction time.

  • Automatically save the cart contents.
    On return to the mobile site, items added to the cart should persist, regardless of whether or not the user has signed in. If the user is signed in and items are added on the mobile site, allow items to carry over to the html website’s shopping cart, should the user choose to complete the transaction later from their home.

Implementing these best practices within the checkout process of your mobile website will help to ensure that customers have any easy and enjoyable purchasing experience.

–Tony Moreno, Senior Usability Analyst

Advertisements

Best Practices for Mobile Site Checkout

With the constant evolution of smart phones and mobile devices, users are expecting more efficient and intuitive functionality from mobile websites. This is especially true for those mobile sites designed for touch screen devices.

According to a 2009 whitepaper from Gomez, Inc., almost 75% of mobile web users expect to complete a simple transaction in a minute or less before giving up and exiting the site. This is due to a variety of reasons such as interruptions from everyday life, incoming phone calls, and changing network strength when on the move.

Customers are continually frustrated when attempting to make a purchase on a mobile website, especially when they invest a lot of time and energy researching to find the perfect item, only to struggle when going through the checkout process. Sometimes their frustration stems from a number of factors, and other times it is something as simple as not having a guest checkout option. So, how can mobile site managers make the customer experience of their mobile checkout process more intuitive and enjoyable? We conducted an internal study of mobile websites to find out.

We looked at the mobile websites for Amazon.com, BestBuy.com, Target.com, and BarnesandNoble.com with a focus on their Add to Cart and Checkout processes. Users were asked to search for and purchase a DVD of their choice on some of the most commonly used smartphones, such as the iPhone 3Gs/4G, Android (Droid X/Evo), and Blackberry Curve. From this study we have compiled what we consider to be some of the most important factors to consider when improving the checkout process on your mobile site.

  • Provide an ‘Add to Cart’ option from the Search Results.
    A Search feature is often paramount on mobile retail websites as several users prefer to search for products instead of clicking through various product-related pages. Also, the ability to add an item to the cart from the search results, instead of only the product page, saves users a click and an additional page load.
  • Place a ‘Checkout’ button at the top of the screen, as well as at the bottom.
    Placing a ‘Checkout’ button at the top of the screen expedites users’ ability to dive into the checkout process as it is easily accessible. Additionally, a button at the bottom of the screen saves users from having to scroll back to the top of the page to checkout if they have multiple items in their cart.
  • Allow users the ability to checkout as a ‘Guest’.
    Customers do not like being forced to register with the site in order to purchase an item. We have heard some customers say they would simply discontinue the transaction or drive to a store to find the same item, simply because they are being asked to register at the beginning of the checkout process. However, it is worth providing users with an option to create an account at the end of the transaction as they have already entered their information. If you offer users the option to create an account at the end of the process, ensure the benefits of registering are displayed.
  • Provide a step/progress indicator throughout the entire checkout process.
    This feature helps manage users’ expectations and lets them know where they are in the process. Customers like knowing where they are and how much further they have to go before completing their checkout process. Lack of communicating the progress may ultimately hurt conversion if users encounter issues during checkout.
  • Provide a field-sensitive on-screen keyboard.
    When clicking in alpha-fields (i.e. First Name, Last Name), display an alpha keyboard. When clicking in numeric fields (i.e. Zip Code and Phone Number), display a numeric keyboard. Email fields should have <.com> and <@> keys. Also, in an address field, begin with a numeric keyboard for the street number and switch to an alpha keyboard after a space is entered to enter the street name. See the examples below:


  • Default shipping address to billing address or vice-versa.
    Regardless of which address information you ask your customers for first, ensure the same address is reflecting on the following step for shipping/billing. Also, ensure a method for editing the address or entering a new address is also present in cases where the billing and shipping addresses differ.

 

 

  • Provide the shipping options on the shipping address page.
    Consolidating these related steps into one page equals one less step in the overall checkout process, expediting the transaction time.

 

 

  • Automatically save the cart contents.
    On return to the mobile site, items added to the cart should persist, regardless of whether or not the user has signed in. If the user is signed in and items are added on the mobile site, allow items to carry over to the html website’s shopping cart, should the user choose to complete the transaction later from their home.

 

 

Implementing these best practices within the checkout process of your mobile website will help to ensure that customers have any easy and enjoyable purchasing experience.

Author: Tony Moreno, Usability Analyst
Contributors: Jeff Schueler, President & CEO
Jason Vasilas, Senior Usability Specialist

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.

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.

Homepage

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 Overstock.com (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: Overstock.com

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.