Usability, MVC, ASP.NET

17. Juni 2014 00:49
by Henrik Stenbæk
0 Kommentare

Bad checkout usability still exist

17. Juni 2014 00:49 by Henrik Stenbæk | 0 Kommentare

I had one of those “Wow, this is really bad!” usability experience today. They don’t happen that often anymore, especially not on e-commerce sites which have established UX patterns as most sites follow.

It all started out on LinkedIn where Avensia, an e-commerce software solution provider I’m following, has posted an update about going live with a makeover for a website called kjell.com

CropperCapture[54]

I didn’t know anything about kjell.com, but from the thumbnail picture I could see that they have en suitcase weight on sale 61% off. “I want one of those” I thought and headed over to the website hoping that I wasn’t too late for this great offer. Lucky me the offer was still there, right on the front page.

From there I found myself in an involuntary “think aloud test” – ok, not that loud, except that the following thoughts, I will now share with you, actually happened “aloud within my head”.

Take the challenge. Before you read any further, please take this challenge: Please go to the kjell.com website and try yourself, if you can checkout any piece of goods. Then come back and tell me if I’m totally wrong about the following experience.

The bad checkout experience

I added the suitcase weight to my basket, easy and without any problems. Then I headed over to the basket and wanted to start the checkout process:

CropperCapture[55]

No: “continue to checkout” button?

Here the “think aloud” started to happen: “Maybe this is not an e-commerce site”

My eye caught the “select store” link in the upper right corner, “Maybe this is one of those ‘order online and pick up in store’ web sites”:

CropperCapture[56]

I clicked the link and a huge list of stores showed up, “They sure got a lot of physical stores” – I tried to find one on the list near Denmark (Malmø or Lund) but gave up and ended up selecting a random store.

Still no “continue to checkout” button showed up, then I spotted the [my shopping lists], [save as shopping list] and [print] buttons:

CropperCapture[57]

“Maybe this is one of those ‘create a shopping list online, print it out and save time when you go to the physical store’”. Too bad I really wanted one of those, but I accepted the fact and was about to leave the site when my attention was caught by the basket line:

CropperCapture[59]

“In stock online” it says, as well as in stock at the store in the city “Motala” that I eventually selected from the list of stores. “If they have an online stock this got to be an e-commerce site”

So I restarted my search for the checkout process and scrolled down the page, passing the upsale items:

CropperCapture[60]

Came by some kind of login form, laughed a little about the “Do you need help?” section to the right, “sure I need help”

CropperCapture[61]

And then I came to a greyed-out area “could look like some kind of checkout elements”, “This is the check out form, but why is it locked?”:

CropperCapture[62]

Then I scrolled up and down and up… and then I thought “WOW, this is bad”. It turned out (from what I believe): one need to register to get the checkout form unlocked, I didn’t want to register, I don’t even know if they will ship to Denmark. Why will I have to create an account to find out if they will ship to Denmark? I won’t. So I left the site, a bit annoyed, I actually still wanted the suitcase weight.

Stick to conventions and do usability testing

When developing e-commerce web sites there are two primary considerations:

  • Stick to conventions
  • Do usability testing

Stick to conventions

What do the others e-commerce sites do? Follow them! It’s not in your basket or checkout usability that you want to stand out. Think about it as a physical store: They are all following a similar pattern; you always know where to look for the cashier, when you are ready to pay. If you want to set up a physical store, you don’t want the cashier to skate around on rollerblades and make the customers play “Where's Waldo?” to pay. Neither do you want to stand out in your web shop.

Not sure about the conventions? Find somewhere to read about them. Baymard Institute has done a terrific job in the “E-Commerce Checkout Usability” report. “A usability benchmark of 100 e-commerce sites ranked by checkout usability performance”, the price for this report including access to the online database with 975 annotated screenshots, is only 150 USD. Is it a lot of money? How many abandoned shopping carts with suitcase weight will it take to pay it back?

The best thing about the Baymard report is that it’s based on real people think aloud tests. And that the next thing you need to do yourself:

Do usability testing!

It’s easy and it’s cheap, no excuses for not doing it. Everyone can do hallway usability testing.

Hallway usability testing is where you grab the next person that passes by in the hallway and ask them to navigate your design. You don’t need more than maximum 5 persons to test you site – too many? One is better than none.

Take your findings seriously. If your test person gets stuck in your checkout flow, it’s not the test person who is wrong! You have to think about this like the old motto “the customer is always right” – the test person is your potential website user.

Take your findings seriously

Based on my involuntary testing of kjell.com one small thing could have changed a lot.

The main problem was me being unable to find the checkout form: This could be fixed by putting a simple anchor link “continue to checkout” above the fold.

CropperCapture[68]

OK, a “continue to checkout” couldn't have saved it entirely, they also need to make it optional to create an account.