Design vs Art Blog

This is a longer than usual article. I wanted to present you a better usability example, so I decided to publish one long article for Wednesday and Thursday.

Designing a good checkout process is worth, if it is not easy customers might get confuse and leave without buying anything. This is dangerous. Some key points for a good checkout process design:

- A checkout process should be simple

- You should avoid distractions (like flashy advertisement that could drive customers to other pages)

- Checkout button should be highly visible

- Your checkout process is probably a secure one, make the user notice that, e.g. placing a secure connection notice, that gives a feeling of trust

- Shipping and total price should be clear

- The process should be short, potentially only 4-5 steps; coming from the shopping cart the process should include shipping, billing, summary and a confirmation.

I would like to analyze the beginning of the checkout process. Here I present 4 websites with some examples you shouldn’t do. This is not an extended website review but I would like to point out some usability problems I have found. 

The NFL Shop is great because it has a lot of products, the shopping cart is unfortunately not well design. Notice here the great amount of information surrounding what is important for the user, it also has too many red flashy buttons that don’t let users notice what is the important stuff. Recommended products are almost falling into the shopping cart, creating even more confusion (maybe a separating line or box would make same order).   

The Subside Sports checkout process begins with a huge usability problem, all the important buttons are placed at the bottom of the shopping cart. On the example there is only one item in it, but if you have more, the "Place Order" button will be hidden under the fold. A lot of users might never find that important button.  

Big Soccer is performing a horrible example, this guys don’t know about the existence of usability tests (or common sense?). After I added a t-shirt, the shopping cart was shown empty and I got an error message telling me that the t-shirt was not available. I additionally got an error saying that the system was not able to determine the quantity I wanted to order. So, this guys display on the catalog products that they don’t actually have and the user notice it after adding the product to the shopping cart. This what we call bad user experience. 

Skate America is also doing something bad. When I added a pair of snickers to the shopping cart, a t-shirt was automatically added for me. How nice, right? Well, actually not. Trust is also something you can communicate through a good design and adding products automatically to the shopping cart is not going in that direction. This is probably a marketing decision but interaction designers and usability experts (if they do have any) should warn about this kind of obscure tactics, trust is something highly desirable in online websites.  

Popularity: 19% [?]

Location bread crumbs tell users where they are, they give orientation and provide links to easily go back to an already visited page. What are location bread crumbs? A good design example I found was at Alexa.com.

Alexa’s approach is a very good one that improves the overall website usability. Nothing weird, they stick to the standard. This bread crumbs are an ordered collection of visited pages, they are separated by ‘ > ‘ and every word is a link. These give orientation to users and a way to go back to others sections. I was surprise seeing that was difficult to find good design examples to put into this article.

Overstock, the online outlet, includes check boxes into the bread crumbs. Horrible solution, please don’t do it.

AllPosters.com, the poster store, developed bread crumbs that look like a windows directory tree. This is a developer structure that not always represent users’ mental model. This option works most of the times, I guess, but I would not use it.

IKEA.com does not have bread crumbs at all. As a user, if you navigate to a product, for example a sofa, you will notice how useful bread crumbs could be.

Popularity: 16% [?]