Improving The Online Shopping Experience, Getting Customers To Your Products

Amazon turned sweet sixteen this year, and, by extension, so did online shopping as we know it. As online shopping has grown over the past 16 years, so have user needs and expectations related to the online shopping experience. Setting up shop online is easy, but creating an experience that satisfies target users is a different story altogether.
In the traditional journey of a purchase, commonly depicted as a funnel, a business loses potential customers as they move closer to the purchasing stage. While this is natural and expected, improving the user experience can reduce this loss by removing unnecessary barriers to shopping online.

Ways to improve the online shopping experience and reduce the drop in the purchase funnel.
The guidelines, techniques and best practices in this two-part series address common user experience issues on e-commerce websites. They are intended as a starting point; books have been written on many of these topics, and a few are recommended at the end. Improving the user experience requires a good understanding of your users and their goals on your website. Use that lens as you read through, to see which of the techniques will improve the online shopping experience for your users.

Promote Your Online Presence

Make it easy for customers to find your website by using a combination of online and offline marketing tactics. Analytics will show you how users are coming to your website — for most websites, search engines and other online referrals, including social media, play a big role. What these reports will not show you are missed opportunities, such as customers ending up on your competitors’ websites instead of yours because of their search keywords.

• Analyze your website and the websites of key competitors to compare how you rank on the search terms used by your target users and to identify areas for optimization. Personas, which are representative profiles of target users, can be used as a tool for search marketing efforts, helping you to identify and prioritize keywords, offers and features and to create targeted landing pages. Digital consultancy Roundarch has an example of a keyword persona that it uses when working on search engine optimization (SEO) for Avis.
• If your business is selling in a competitive market, supplement your SEO efforts by buying relevant keywords for paid placement alongside search results, using services like Google AdWords and Microsoft adCenter.
• Create business profile pages on services such as Google Places, Bing Business Portal and Yahoo Local: these will be highlighted in search results and on location-based social networking services. In addition to your business name, include your physical address, phone number, URL and hours of operation.
• Use email campaigns to attract new customers and draw previous customers back to your website. In a recent Forrester study, retailers ranked email as having the highest return on investment (ROI) among their marketing efforts, including paid search, affiliate marketing and Facebook marketing.
• Create, join or support communities and social networks related to your products or related to issues that your product addresses. An example is Aspirin manufacturer Bayer’s involvement in and sponsorship of the Strong @Heart community on Facebook.
• Go where your customers are; these days, that includes social networks. Companies are experimenting with Facebook ads and check-in coupons, offering promotions on their Facebook walls, and tweeting time-limited deals to their followers. Although companies such as JCPenney and 1-800-Flowers.com have set up Facebook storefronts, their ROI is questionable in value.
  JCPenney’s Facebook storefront allows users to shop on the social network.
  
• Use a short, simple, intuitive and memorable Web address, and secure alternate spellings (walmart and wal-mart) so that users can get to your website even if they misspell your name (jcpenny, jcpenney, jcp).
• Increase visibility in search engine results using SEO techniques, including picking the right keywords and creating keyword-rich and search-friendly page URLs, titles, headings, tags and content. SEO is not a dirty acronym if done the right way. Trying to fool search engines may work for a while, but you will eventually be penalized, as JCPenney and Overstock recently discovered.
• Feature the URL prominently offline: in printed material, while people are on hold on the phone waiting for service or support, in offline advertising and promotion, and in brick-and-mortar stores where appropriate. Quick Response (QR) codes give smartphone users quick access to a website, a sub-section or a particular page without having to type in a long address.

Instill Confidence In Customers

Instill confidence and trust in customers by prominently displaying clear policies, trust certificates, security badges and contact information. Customers are cautious when asked for personal information, and rightly so, with news of hacked websites being so common. Even established brands that customers recognize and trust can use these techniques to reinforce confidence.

• Looks matter, and your website’s design is often the first impression that a customer will get of your business. Creating a professional-looking website is easy and inexpensive, so get the basics right and make a good first impression. This includes designing for accessibility and especially ensuring that your website renders well on mobile devices.
• Highlight security on secure areas of the website to remind customers that their information is safe; even though browsers have small built-in indicators to show secure areas, reiterate it on the page. Amazon does this through its sign-in button; other websites display a padlock icon near the log-in area.
  
  Amazon’s sign-in button reinforces a sense of security.
• Clearly state your business practices (including privacy, security and return policies), and make them accessible from every page. Don’t make users hunt for this information; rather, present these links contextually where appropriate (for example, display a link to your privacy policy near the email-address field).
• Visible contact information instills confidence, even if the customer does not have to use it. Offer contact options and alternatives: even though Amazon does not publicize its customer-service phone number, it makes up for it by offering excellent support via email, chat and call-backs.
• Lesser-known brands should do all of the above, as well as instill confidence by displaying trusted third-party certification and affiliations. These include trust certificates (e.g. TRUSTe), security badges (e.g. VeriSign), accreditation (e.g. BBB) and ratings (e.g. Bizrate).
  Instill confidence with trusted third-party certification and affiliations.
  

Enhance Product Findability

Enable customers to quickly find and discover products by offering robust search and navigation. Customers will not always start on your home page — a search engine or QR code could drop them many levels deep on your website — but good navigation and search should help them find their bearings.

• Create a strong foundation through distinct product categories and user-centric labels that help users explore other areas of the website. Involve users in the design process by conducting exercises such as card-sorting to understand their mental model and to create an architecture that is intuitive to them.
• Mega-menus can be used to expose multiple category levels without making users drill down. See Econsultancy’s article “25 E-Commerce Mega-Menus Dissected” for more examples. Keep in mind, though, that mega menus aren’t a panacea, they also require profound usability considerations.
  OfficeMax’s mega-menus facilitate the scanning of categories.
  
• Breadcrumb navigation enables customers to identify where they are on your website and helps them backtrack or broaden their search results if needed.
• Keep the search box consistently in the same location across the website. Customers expect it to include a text field, followed by a button labeled “Search,” usually in the top right of the screen.
• Accept colloquial synonyms and common misspellings as search keywords, and match results accordingly. On Amazon, a search for “iTouch” brings up the iPod Touch, and a search for “polar bear book” (as information architects so lovingly call it) brings up Information Architecture for the World Wide Web (which happens to be a great resource that looks closely at many concepts mentioned in this section).
• Help users get faster and more relevant search results. Predictive type-ahead options help users select the appropriate term before running a search. Providing related search terms helps with typos and more common alternatives.
• Display results based on relevance, but give users the options to refine, filter, compare and sort results based on various criteria and to control the number of results displayed at a time.
• Display a summary of key product information in the search results to speed up identification and selection. In addition to the name and image that the user expects, provide pricing, availability, ratings, shipping details and other relevant information.
  The search results for “polar bear book” on Amazon, which include: (1) predictive type-ahead; (2) tolerance for synonyms; (3) sorting options; (4) filtering options; (5) summary of key product information (ratings, reviews, formats, pricing, availability).
  

Stay tuned for the second part, which will focus on guidelines and techniques to help customers make purchasing decisions and to guide them through the check-out process.

Enable The Customer To Decide

Inform and reinforce the customer’s buying decisions by offering in-depth product information. The content on product pages should be relevant and should give the customer a virtual feel for the product. Ensure that your website addresses the key elements of a product page, listed below.

• Product name
  Product names should contain relevant keywords to help customers find and identify the right product. For a product such as a book, information about the author and edition is required.
• Images
  Use clear product images, with alternate views. Where appropriate, allow customers to zoom in, see different color swatches, or spin the product around with a 360° view. The product page for a book could get away with an image or two, but apparel should offer most of these options.
• Video
  Static images are not always sufficient to present a product. Video is a good way to showcase complex products that need detailed explanation or a “how to” demonstration.
• Pricing and availability
  Clearly list the price and availability. When products have variations (for example, different capacities for a hard drive, or different colors for shoes), make it easy for users to identify size and color combinations that are in stock (see the screenshot for Kohl’s below). And provide sizing charts to avoid surprises and returns later. If your business also has brick-and-mortar stores, allow users to check in-store availability online.
• Description
  Give customers a clear understanding of your products by providing detailed descriptions, with text and multimedia. Descriptions should be simple, clear and jargon-free. Consider tablet and mobile users by providing alternatives to Flash and Java content, and don’t require mouse hovering to access essential information.
• Customer ratings and reviews
  Unbiased and unedited ratings and reviews by customers will help visitors make up their minds about products that they may not be familiar with (for example, customer reviews suggesting to buy half a shoe size larger for a better fit will help others not make the same mistake). Many users look up ratings and reviews when they are in stores, not only at their desk, so make ratings and reviews easily accessible from mobile devices.
• Suggestions of related products
  These could be complementary products (for example, a USB power adapter when the customer is buying an iPod Touch), alternative products (different styles, models or versions) or recommendations based on other people’s purchases (“Customers who bought this also bought…”). Whatever their nature, they should be relevant and valuable to the user, not just an attempt to sell more.
• Tools
  Give users ways to save and share pages on the website. Businesses commonly do this through wish lists, “Email this page” features, and social sharing and bookmarking. Speaking of social, companies such as Buy.com (see screenshot below) and Wet Seal are experimenting with social shopping, allowing users to shop with their Facebook friends.
• Contact information
  Make it easy for customers to reach you when they need help.
• “Add to cart”
  Last but not least, make the call to action clear and prominent, to ensure that customers know how to check out.

The key elements of product pages on Zappos.com are highlighted.

Kohl’s offers a visual way to identify color and size combinations that are in stock.

Social shopping on Buy.com includes: (1) friends who are currently shopping together, (2) a chat window.

Reduce Shopping-Cart Abandonment

Customers abandon their shopping carts for numerous reasons, many of which can be prevented by improving the experience.

• Make the shopping cart always visible and accessible, and display a summary of items in the cart, keeping check-out a click away. As basic as this sounds, some websites still don’t enable customers to get to their shopping cart without adding something else to their order.
  
  Deal Genius offers no visible way to get to one’s shopping cart.
• A persistent shopping cart is important. Users who leave the website without completing their purchase should see their items in the cart when they return. If the user is logged in, the cart should also persist across devices, allowing them to seamlessly continue shopping anywhere and anytime.
• Using the customer’s address or ZIP code, show taxes, shipping options and costs, delivery estimates, and the total cost, thus avoiding last-minute “cart shock.”
• Give users the ability to update their shopping cart without having to go back to the product page.
• If you offer promotional discounts or coupons, give users the option to redeem them without making others feel like they are missing out on savings. Let users know how they can get these discounts (“Sign up for our weekly newsletter to get a discount on your next purchase!”).
• Offer contextual support to answer questions that shoppers may have regarding when their items will arrive, your return policy, and how to contact live help through a phone number, call-back or chat. Display this information in a sidebar, on the shopping-cart page or in a small pop-up window, so that users do not lose the context of where they are.
  
  Office Depot’s shopping cart features: (1) a persistent shopping cart, which shows the total cost and expands on hover to show its items; (2) the estimated total; (3) options to update the cart; (4) discounts, if applicable; (5) help options.

Keep Registration Short And Optional

Make the registration process optional and short; forcing registration is one of the main reasons why users don’t complete purchases. If you still need convincing, “The $300 Million Button” should drive the point home.

• When the check-out process starts, allow registered customers to log in, and provide easy ways for them to recover forgotten account information.
• Allow new customers to check out without registering. At the end of the check-out process, give them the option to register and save their information for future use. By this time, they will be motivated to simply create a password in order to avoid typing all of that information the next time.
  
  Sears has simple check-out options, allowing new users to register after checking out.
• Simplify and minimize the information required during the check-out and registration processes, by logically grouping the most important information first, and putting optional information towards the end. Some retailers, like Adorama, have got their check-out process down to one page.

Streamline Check-Out

Streamline the check-out process with relevant recommendations, a progress indicator, an order summary and confirmation.

• Relevant recommendations can be a valuable reminder to customers as they check out. Like product suggestions, recommendations at check-out should be relevant and useful to the customer, instead of a way to try to sell anything and everything. Buying the same noise-cancelling headphones from Buy.com and Amazon resulted in very different recommendations, as shown below.
  
  Very different recommendations from Buy.com (above) and Amazon (below).
• “Enclose” the check-out process by removing the header, navigation and footer. This will minimize distractions and guide the customer through the last few steps to complete their purchase.
• Use a progress indicator to show customers where they are in the process. “Three steps completed. Just one more to go!”
• Give users a choice of payment methods. If users prefer not to give their credit-card information, allow them to pay by PayPal, Google Checkout or another trusted local payment option. Make sure the third party displays the total amount to be charged before asking for any payment information.
• Link to your policies in context: link to the privacy policy when asking for an email address, and a link to the security policy near the credit-card fields. This relieves users from having to hunt for these policies and also instills confidence.
• When displaying the summary page of their order, allow customers to verify (and change, if necessary) the details before confirming the order. This is also a good place to restate the estimated delivery dates so that they can change the shipping method if desired.
• The final call to action that directs users to complete their purchase (“Place order”) should be prominent. Don’t lose customers at this stage by presenting other options to them.
  
  The check-out process on Adorama has been streamlined to a single page: (1) progress indicator; (2) multiple payment options; (3) contextual policies; (4) option to make changes; (5) prominent final call to action.
• Once the order has been placed, display a confirmation page, with the order number, saving and printing functionality, and a summary of the customer’s next steps or options. The order confirmation page for Shutterfly, a photo publishing website, not only tells users what their next steps are, but also displays timelines for the fulfillment of their order and contextual links to the next steps.
  
  Shutterfly’s order confirmation page informs users what to expect next, using contextual links.
• If your website allows new customers to check out without registering (as suggested above), then that would be a good time to ask them whether they would like to select a password to create an account and save their information for next time. Highlight some of the benefits of creating an account, so that registering at this stage becomes a no-brainer.

Take Action

Congratulations on making it through the 50 techniques in this two-part series. But this is just the beginning. If you kept your users in mind as you read through this article, you may have already identified areas in your online shopping experience that could be improved. Some of these, like presenting contextual links, are quick fixes, while others, like improving findability, will take weeks or months to implement.
When making changes, measure the impact of the changes using analytics, multivariate or A/B testing, and usability testing (see the further reading below). Improving the online shopping experience not only will make it easier for users and satisfy them more, but will increase your bottom line

Further Reading

• Search Engine Optimization: An Hour a Day, third edition, Jennifer Grappone and Gradiva Couzin
• Search Analytics for Your Site: Conversations With Your Customers, Louis Rosenfeld
• Information Architecture for the World Wide Web: Designing Large-Scale Web Sites (aka the polar bear book), Peter Morville and Louis Rosenfeld
• Neuro Web Design: What Makes Them Click?, Susan M. Weinschenk
• Designing Search: UX Strategies for eCommerce Success, Greg Nudelman