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

A Wrap Up on Gift Checkout

“Is the sweater I’m sending my daughter going to arrive in a gift box? I have no way of knowing what the gift-wrap looks like.”

“If I want to send 3 items to my dad, is each item going to be individually gift-wrapped?”

“It’s not clear how I can add a personal note to go along with the gift to my mom.”

“I don’t want the invoice to show pricing on it when my friend gets the gift. But there’s nothing on the site to tell me how that would work.”

“Would a gift receipt be included with the shipment?”

“I don’t want to give my credit card info before I know what options are available on the site for me to send a gift to my wife.”

The questions and comments above capture some of the uncertainties that site visitors encounter while shopping online to send items as gifts to family and friends. This underscores the importance for retail sites to assess if their checkout process is optimized for gift checkout. To that end, our focus in this article is to examine best practices as they relate to the following:

  1. Availability of gift box/wrap options
  2. Options to add gift messaging
  3. Details about invoicing and gift receipts
  4. Presenting gift options prior to collecting credit card info

Availability of Gift Box/Wrap Options

Ensure site visitors are provided an option to select a gift wrap. An optimal way of incorporating this into the checkout process is to include a ‘gift wrap’ option on the order summary because the summary lists all items ordered, making it easy for users to select gift options for each individual item. Additionally, providing it in the order summary makes it early enough in the process for users to know at the outset of the checkout process that the site offers gift options. An example of how the gift box/wrap options can be presented in the order summary is illustrated by the red highlighted box in the screenshot below from a major retail site:

 

Once visitors click on the ‘gift wrap’ option, provide them the ability to view the types of gift wrap offered and ability to specify gift wrap options for each item in their order summary.

This is illustrated below by the red highlighted boxes. The site presents visitors a visual of the gift wrap options and fields to decline or specify gift wrap options for each item in the order summary.

 

 

Options to Add Gift Messaging

Users interested in sending gifts expect the ability to add a gift message along with their gifts. Below is an example from a site that gives visitors the choice of selecting either a complimentary basic message to be included on the packing label, or a personalized greeting card to be included for an additional charge.

 

When visitors click on the ‘Sample’ link (see red highlighted box above), a pop-up of a sample package label message is displayed, as illustrated below:

 

Additionally, those who opt to add a personalized message are given the option to select a greeting card and a field to include a personal message:

Details about Invoicing and Gift Receipts

Visitors often are concerned that the gift package that is sent out to their friends or family may contain a bill with pricing on it. Visitors expect to see a statement letting them know about the site policy regarding invoicing and gift receipts. It is a best practice to ensure that once visitors are done with selecting their gift wrapping and personal message option, they are presented with a statement informing them that the invoice sent along with the gift package will not include any pricing. Additionally, if business policies allow, consider including a gift receipt with the package and ensure visitors are informed of this in an additional statement.

Present Gift Option Selections Prior to Collecting Credit Card Information

Users want to know what types of gift options are available to them prior to entering their credit card info. Hence, ensure options pertaining to the gifts are presented at the beginning stages of the checkout process. As noted in the first example in this newsletter, a good stage in the checkout process for introducing the gift options feature is the order summary because it is early enough in the process for users to know that the site offers gift options.

‘View All’ – The E-Commerce Version of Window Shopping

Many of the websites we have usability tested are e-commerce sites containing multiple product types. The products on these sites often include items such as clothing and shoes for the family along with house wares and other home goods. In each of these cases, the female in the household was considered the primary shopper for the family for these types of items and therefore the main audience for the retailer.

Retail sites characteristically have a consistent way to display products. The typical browsing pattern we noticed was:

  • Select a category or department
  • Select a sub-category
  • View small product images on the sub-category (or category) page
  • Click on individual images or product titles to load a product page

In watching females browse online in this way, a striking similarity emerged: As soon as these shoppers opened a page displaying multiple small product images, at least 90% of them immediately looked for a way to see all the items on the page in order to quickly find the item or item type they were searching for. On many sites, this was achieved by selecting a ‘View All’ button or text link. After seeing this pattern on a few retailer sites, our analyst teams began probing to determine if this was something unique to the usability lab environment or if this was standard shopping procedure (SSP). Guess what? It’s SSP. Typical comments we have heard from female users as they reviewed retail sites include, “I typically go to ‘view all’. I don’t like clicking through pages.” and “A ‘view all’ button would make life easier for me. It would take me forever to go though all these pages!”

Recognizing this has some interesting implications for any online retailer. We have seen that female shoppers in particular not only desire to scan every item in a particular category on a single page, but also wish for similar products to be grouped together within that single page. For example, female users expect to see dresses of similar lengths to be displayed adjacent to one another as they scroll down the page. They do not want the long dresses to be randomly placed among the knee-length dresses because then they have to scroll up and down to compare like items. Since we have seen few apparel sites with a product compare feature, the correct placement of products within category and sub-category pages becomes very important to provide the user with what she needs to have a successful site visit.

Based on our research and observations, here are a few necessities to remember when structuring your category and sub-category pages for retail sites:

  • Establish ‘View All’ functionality.
  • Verify the ‘View All’ button or link is easily accessible.
  • Default subsequent results pages to the view all option, if the shopper clicks ‘View All’ once
  • Group similar products adjacent to one another within the page to allow for easy, visual comparisons.