Shopping Carts + Check-out ... ... ... ... ... There is often no big single problem, there are "just" a lot of little problems.


Quite a lot of my projects starts with the request ...
Please improve our IA and UX - Improve navigation and homepage, and reduce the number of clicks required to access either product details, key content and the check-out.
Well, being a holistic person and fanatic, or call me a nut of findability, utility and usability ...
I made again and again the experience that clients often ask the wrong question - and it's our responsibility to find the real pain points.
In cases of e-commerce clients it's from time to time not the solution to change the navigation and homepage - but these both topics are most mentioned by clients.
Many clients view their responsibility from a top-down perspective - Can User find what they need from the homepage? Yes it's an important question, but this approach takes no notice of the fact that many visitors don't start from your homepage. Quite a lot of your customers will never visit your homepage. Efficient and high-perfomance search engines, social networks, blogs and or your own banner and commercials are linking your visitors to your shop. And these links rarely refer to your homepage.
Quite often I suggest my clients to look at the analytics first and then it's again and again the situation that we start prior to the site itself, improving the findability of the site and key pages, or to start with the "end", utility and usability of the shopping cart and checkout-process. This article will deal with the latter.

How can site designers and planners make the user experience of their checkout process more consistent, easy and enjoyable?
I have compiled what I consider to be some of the most important factors to consider when taking consumers through a checkout process.



User / Visitor Life-Cycle see further diagrams:

Customers are again and again frustrated when purchasing online, especially when they invest a lot of time and energy researching to find the wanted item, only to struggle when going through the checkout process. Sometimes their frustration and disappointment most often stem from a number of aspects, and other times it is influenced by tiny but important aspect.

  • Checkout Step Indicator / Breadcrumbs
Provide a step-progress-indicator throughout the entire checkout process to show your user where they are. One thing I hear frequently is that users like knowing where they are and how much further they have to go before completing their checkout process. Use headlines, subheadings and breadcrumb navigation - good headings and subheadings can help customers establish which page they are on and what the topic of the page they are viewing is. Breadcrumb navigation helps customers establish how deep they are within the site structure and process. And it shows what is available to view before and after the page users are on within the flow or process.
Give a clear indication of what to expect next. And at the end ensure the Confirmation/Thank You page provides customers with a time line of when they can expect their order to be fulfilled. It is also important to show your gratitude by thanking customers for their order. Customers often indicate they value sites that make an effort to show their appreciation.

  • Contact Information
If you offer a live help line, make sure contact information and a phone number are highly visible everywhere in the checkout process in best case visible above the fold and easy for customers to see. For those not wanting to call a Toll Free Number and wait on hold, Live chat is an excellent customer service feature. I’ve found it to be very effective for businesses with high value items such as high-end electronic etc..

  • Availability Of Products
Show stock and availability of products as early as possible within the checkout and order process. At best case the shop shows product inventory and item availability as early in the shopping and buying process as possible.

  • Price, Shipping Costs, Taxes
Provide the price of the item, shipping and tax cost as early in the process as possible.
Customers will very often hesitate to continue with the checkout process if they cannot determine how much it will cost to ship the item(s), especially in case of minor items when the shipping costs might be higher than the product and for bigger items that might be more expensive to ship or those that involve a freight charge.
You should provide a link to general shipping rates so that customers can estimate their final price, sooner, rather than later.
I have recognized that customers would definitely abandon the site if they did not have the total cost of their purchase before being asked to provide their credit card information. Companies, brands and shops also often lose quite a lot of trustworthiness and credibility when this occurs.

  • Shipping Options
Shipping options have positively impact on your shop. In 2009 the e-tailing group conducted the 5th Annual Cross-Channel Shopping Survey (http://www.e-tailing.com/content/?p=288) by examining in-depth cross-channel tactics on forty websites and visiting seventy-seven retail stores that enable buy online/pickup in-store along with other related customer conveniences including product look-up, marketing collateral and web integration.
A number of interesting findings were emphasized. These findings may lead to changes in the way retailers get products into consumers’ shopping carts, and ultimately into their homes - Buy online/pickup in-store - ship-to-store model – Packstation (http://en.wikipedia.org/wiki/Packstation) - etc.

  • Checkout as a “Guest”
Allow users the opportunity to checkout as a “Guest”. Customers do not like being forced to register with the site in order to purchase an item. Initially, many of first time visitors are skeptical and doubtful.
I have spoken to several customers, they said they would simply go to another site or drive to a store to find the same item, simply because they are being asked to register. Many users associate registration with potentially receiving SPAM or junk mail. That doesn’t mean that it’s not a NO-GO combining your newsletter abo and your checkout process – but you have to do it clear, polite and obvious, and tell your customers and potential subscribers their benefits to order your newsletter. And tell him in advance how often you will send him your newsletter – perhaps you can offer him the opportunity to order just the next issue.

  • Familiar Image (Key Image)
Ensure the shopping cart page contains a clickable image of each product being purchased. In spite of the fact that most customers have more than likely seen the product in detail before adding it to their cart, it’s confidence-building and reassuring for the user to see the familiar product image. This increases user’s comfort level before starting the actual checkout process.

  • Maintain User’s Data
Retain customers’ previously entered information. Customers’ frustration levels increase enormously when the checkout process lose information the user entered within a previous step, simply because he clicked the browser’s back-button or even more when he clicked the site’s back-button.

  • Security Badges, Trust Certificates
Keep security badges, trust certificates and an updated SSL certificate in place so consumers can perceive your site is secure.
It is important to show to your users that they are buying from a secure store. That you and your shop make an effort to protect user’s privacy, personal information, billing information and any other private information shared during a transaction.
It is also necessary to have an updated SSL certificate so the appropriate “lock icon” appears in the lower right hand corner of shoppers’ browsers when they enter a secure section of your store or a secure checkout page.

  • Printer Friendly option
Allow users to print the summary by displaying a “printer friendly option”.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Test different combinations of these above mentioned factors to see which ones produce the best results for your store and shopping cart. There are many more things that can be done to improve specific processes within any eCommerce store. These factors will help to ensure that customers have any easy, as well as enjoyable, purchasing experience.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

In connection with this topic I like pointing you to a former article about forms:

The form of forms … We need them, but also hate them

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Update - 2011 March 3rd:

Today I discovered a great study by Baymard Institute:

E-Commerce Checkout Usability - http://baymard.com/checkout-usability

Exploring the user's checkout experience - An original research study by Baymard Institut (Christian Holst, Jamie Applesee)


Comments

  1. Hi Holger, great article. The life-cycle diagrams are simply fantastic, I wish I have thought of that..

    I'm glad that you've found our study useful. And thanks for the link.

    - Christian Holst, Baymard Institute

    ReplyDelete
  2. Great post Holger, definitely the pain points that we're looking at as we're revisiting our checkout process.

    ReplyDelete
  3. Thank you for your compliments, I really appreciate that.

    ReplyDelete
  4. Hi, new visitor here. Good post, nice approach, I share a lot of your views. Keep writing the good stuff.

    ReplyDelete
  5. A very interesting view on this you have, really. I don't know what else to say. Keep it up.

    ecommerce shopping carts

    ReplyDelete
  6. Is your site some kind of oxymoron? How can you be a UX guy and serve up white text on a black background? It's one of the biggest no nos in the ux/ui world. Seriously, it's very hard to read, it's hurting my eyes. I'm copying the text out to read in a text editor.

    ReplyDelete
  7. Thx Anonymous Writer
    I am sorry that you had have problems to read my article, next time it might be easier to switch the CSS by your browser.
    First of all usually I have a general rule, I don’t answer or publish anonymous comments, but no rule without exception and that brings us to the subject of ‘you should not only know the what (of rules) you have to know the why’
    The contrast of text and background colors should be high, so that type is as legible as possible.
    There are studies on the readability of various color contrasts, which generally demonstrate that dark colored text on lighter backgrounds are easier to read, but most of these studies focused and had been tested on standard monitors in good environments of offices. Five or ten years the answer regarding your comment was a different one but nowadays we have to consider various devices and environments and the number of user that use dark backgrounds and light text especially on mobile devices increase from day to day. (By the way my web tracking tool tells me that about 8% of my readers use tablets, smartphone users are about 27% and the rest I can’t determine).

    In low light viewing conditions and also for interactive television, or Web kiosk, use:
    … … Light text, thin lines, small shapes in white, yellow or red
    … … Background to be medium-dark to dark in blue, green, red or grey

    In bright conditions, such as brightly lit offices use:
    … … Dark text, thin lines, small shapes in blue or black
    … … Background to be white, pale yellow, pale magenta, pale green or pale blue

    In bright and sunny spaces, try to use:
    … Either
    … … Dark text, wide margin, lines and shapes in blue or black
    … … Background to be white, pale yellow, pale magenta, pale green or pale blue

    … Or (what I most often prefer)
    … … Light text, wide margin, lines and shapes in white, yellow or red
    … … Background to be medium-dark to dark in blue, green, red or grey

    The readability of inverted color schemes aren’t easy – Too much contrast will make everything stand out too much, you should avoid using black text and white background but also white on black - But I am sure there might be exceptions, too.
    Colour has three attributes which determine how people perceive it: hue, lightness and saturation. Hue is the basic perceived colour, essentially the name of the colour, e.g. a scarf could be "red". Lightness is tonal quality, e.g. the scarf could be red but described as "dark red". Saturation is the amount of colour, e.g. the scarf is "very red". As colours become less saturated, they move toward being either black or white.
    Colour schemes which achieve a clear and balanced differentiation in all three attributes provide the best result – but at least it has to support your / your clients character and brand.

    It’s always better to use a good relation in live nothing is black or white. Pages with insufficient contrast or a contrast that is too high will be tiring.
    Nevertheless thanks for your comment and I wish you all the best.
    By the way the color code of my body text is #cccccc and the background #141414 and not #ffffff and #000000 - just for your information :-)
    And that’s a nice plaything for text color and background colors http://www.hgrebdes.com/colour/spectrum/colourvisibility.html

    ReplyDelete

Post a Comment