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

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.

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.

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.

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.

Thx Anonymous WriterI 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

… 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

Popular Posts

Most of our
projects are complex and multifaceted or they change emphasis during their
‘life-time’ or both. These products and services are overwhelmed with
expectations, needs, must-haves and nice-to-haves. They also have to cover,
serve, support and take into account many supply channels, communication
channels and communication chains. There are so many users and these users most
often have more than just one responsibility (users often have more than just
one responsibility or role – most people have different roles. For each
individual there will be many roles and each person adopts a different role
depending on the circumstances, see http://boxesandarrows.com/view/ux-design-planning for more). There are many
tools out there used to target and bring light into the ”unknown”. With this
article I’d like to introduce you to one of my favorite tools – the swim…

ART asks and inspires - DESIGN answers and motivates
Asking and inspiring vs answering and motivating is for my point of view the difference of art and design.
And it’s again and again the thing I have to tell upcoming designers or often experienced one. Yes as designer we have the freedom to do many things – to go various ways – but we have a clear aim: “helping people”.

To help someone you have to be understandable and meaningful. Understandability and meaningfulness is possibly the most important issue to be considered while judging the goodness of a design. And if we talk about design I am talking about visual appearance and content.

On the one hand beauty is subjective, and that makes our world so diverse. On the other hand it follows rules which we all learned as we grow up. To design something there are some rules and guidance we have to have in mind and should stick to. Yes for sure you can break rules and often it’s good and useful to do it but you should know what you bre…

I am pretty sure almost everybody had already thought about how cool it might be to walk into a store, taking all the goods you need, and then just leaving the store and making the checkout without having to do any transactions and standing in the line – well Amazon is calling it “just walk out technology” – or better to remember Amazon Go
Amazon Go is coming early 2017 – the location of the first store will be at 2131 7th Ave, Seattle, Washington.

Test users have already testing the store. Amazon is outlining currently the basic details, but I don’t have the full picture and process yet.

Amazon tells it will be fairly simple for the customer. The customer only walk into the store, scans and get recognized by his mobile device. A cart will be created automatically and the customer can collect his goods – that easy.

We all know the ideas of Walmart in the US and Globus and Metro in Germany – they used an actual cart and a scanner. They used either a bar code scanner or RFID scanner. …