I’ve bought two dozen or more bottles of wine from the New York Times Wine Club over the past few years. That would not qualify me as a highly valued customer, I’m sure, but it would likely rank me as worth retaining.
This morning I received an email ad from the wine club promoting a new Spanish wine. Though I was not interested in the offer, the email did serve as a trigger to visit the site. When I landed, I searched on pinot noir – the only grape I’m interested in these days — and here’s a picture of the results page. It’s beautifully laid out but what a brand-eroding experience!
Of the 12 wines proffered, 10 are tagged Not Available. I know that one of them, at least, hasn’t been available for a year. The list would suggest, therefore, that the search pulls from historical product offerings rather than current product offerings. That might be acceptable if the products are simply out of stock, but what if they are no longer offered? Is it really that difficult to maintain a database?
The cost of providing current, relevant search results may be far less than the cost to the brand when it reflects so poorly on its diligence and processes. How do you ensure that your search results reflect relevance AND currency?
–Roger Beynon, CSO
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
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.
It has become commonplace for e-commerce sites to provide a Quick View feature to enhance the shopping experience for their users. This post addresses the “Do’s and Don’ts” of the Quick View feature.
Let’s start with a definition. The Quick View is a site feature that allows users to quickly view detailed product information without navigating away from the product listing page. Upon mouse-over of a product image, the user simply clicks a button, typically labeled ‘Quick View’, and an overlaid window appears, presenting the product detail. This minimizes time spent browsing products since the user no longer has to wait for the site to refresh and display a product detail page every time he/she wants to review product details.
Consider the screenshot examples below. Figure 1 displays a Quick View button for the product of interest (in this case, labeled ‘QuickLook’). Figure 2 displays the resulting Quick View window.
Creating User Awareness
To alert users to the presence of the Quick View feature, follow the guidelines below:
Ensure the Quick View button appears on mouse-over of the product image, as opposed to appearing at all times. This presents a cleaner look and feel. Additionally, ensure the button appears instantly upon mouse-over.
Ensure the Quick View button is centrally located within the product image and thus in the users’ direct line of sight.
Ensure visual treatments of the button are such that the button commands attention. In the example screenshot above, notice the button’s contrasting colors.
Optimal Quick View Windows
For an optimal Quick View window, consider the following guidelines:
- Provide dynamic content within the window. Ensure relevant product features, such as product size and color are dynamically available via mouse-over or click of an icon.
- Balance conciseness with rich content through the use of bulleted text and/or tabbed information, if needed.
- Provide the ability to navigate to the actual product details page so that users can obtain additional information, if desired.
- Provide the ability to add to cart from the Quick View window, as well as make all required selections such as size, color, quantity, etc.
- Include an easy to locate ‘close’ icon in the top right of the window.
- When adding to cart, present relevant error messages that dynamically appear within the window if required selections have been overlooked or if there is insufficient inventory.
- Upon clicking the ‘Add to Cart’ button, provide clear notification that the item has been added to cart. Ensure the window closes automatically, so the user is not required to take the extra step to close it.
When implementing a Quick View feature, avoid these potential pitfalls:
- Do not strip out all product detail from the product listing page just because you have placed the details within the Quick View window. This is particularly important in the case of technical or electronic products. Stripping out all product detail from the detail page will likely frustrate users as they will be forced to rely on the Quick View window to access product details.
- Do not do away with the product detail page. Though the Quick View feature is now more common on e-commerce sites, there are still many users who want to navigate to and view a product detail page before making a purchase decision. Ensure the Quick View is not the sole option for providing product detail.
By following the recommendations above, the Quick View can become a powerful tool that enhances the user experience by cutting down time spent browsing.