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


I didn’t know anything about, 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 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:


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”:


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:


“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:


“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:


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


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?”:


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 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.


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

20. Dezember 2013 15:59
by Henrik Stenbæk
0 Kommentare

How to search for a part of a picture on google

20. Dezember 2013 15:59 by Henrik Stenbæk | 0 Kommentare

A friend of a friend of mine asked, "Is there some photo-savvy who can help me to find out where you can buy this photograph of three children sitting together? Has been looking everywhere :)" - obviously a joke.

The primary subject is "commented out" in this picture but the photograph of the three children is still visible.

Anyway, here's the solution:

Make a copy of the big picture and open it in your favorite image editing program. Select the part that you want to use for searching



Save the image part to file.


Go to Google image search and upload the small image as search




Se the actual search here 

17. Dezember 2013 13:39
by Henrik Stenbæk
0 Kommentare

More than one year with Mønter Købes

17. Dezember 2013 13:39 by Henrik Stenbæk | 0 Kommentare

This is just a post to announce that mønter købes has been online for more that one year now and that the domain is doing well.

Denne tekst er ikke meningen den skal med i indekset

And as well to test the new off and on settings for html :-)


this post was intended to investigate whether <!--googleoff: index--> and <!--googleon: index--> tags is working on google and the answer is that it is only working for Google Search Appliance not for google bot index crawling:

11. Oktober 2012 09:25
by Henrik Stenbæk
0 Kommentare

My ongoing C#, .net, MVC tools list

11. Oktober 2012 09:25 by Henrik Stenbæk | 0 Kommentare

This isn’t really a blog post. 

This is a list of tools and best practices I've collected over time. The list is my own personal list which I so far maintained in a word document. Gradually it has become difficult to keep track of the PC that has the latest and most updated version. Therefore, I have decided to put the list up here where it is planned that I will continuously maintain it.

The list is not final and the tools that are on the list are those that I at the time have evaluated best met my projects needs. There are other tools that might meet your needs better :-)







Domain specific





Web UI specific

Time Entry

Date entry

Favicon maker



MVC specific

404 handling


Css and javacript include


Development workbench

Regex tester / help


Email – sending/receiving under development

Screenshot tool

Windows start "Snipping tool"

Windows star "PSR" (

 Image to base64 converter