Usability, MVC, ASP.NET

17. June 2014 00:49
by Henrik Stenbæk
0 Comments

Bad checkout usability still exist

17. June 2014 00:49 by Henrik Stenbæk | 0 Comments

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.

20. December 2013 15:59
by Henrik Stenbæk
0 Comments

How to search for a part of a picture on google

20. December 2013 15:59 by Henrik Stenbæk | 0 Comments

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. December 2013 13:39
by Henrik Stenbæk
0 Comments

More than one year with Mønter Købes

17. December 2013 13:39 by Henrik Stenbæk | 0 Comments

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

UPDATE:

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:

https://www.google.dk/?gws_rd=cr&ei=CEmwUtbvA6jw4gSQmoHoBw#q=site:www.onesoft.dk+indekset&safe=off

11. October 2012 09:25
by Henrik Stenbæk
0 Comments

My ongoing C#, .net, MVC tools list

11. October 2012 09:25 by Henrik Stenbæk | 0 Comments

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

Infrastructure

Logging

http://www.beefycode.com/post/Log4Net-Tutorial-pt-8-Lossy-Logging.aspx

ServiceBus

http://masstransit-project.com/

Serialization

http://code.google.com/p/protobuf-net/

 

Indexing

http://ifdefined.com/blog/post/Full-Text-Search-in-ASPNET-using-LuceneNET.aspx

Domain specific

Events

http://mikehadlow.blogspot.com/2010/09/separation-of-concerns-with-domain.html

http://code.google.com/p/sutekishop/

http://dddsamplenet.codeplex.com/SourceControl/changeset/view/48934#777714

Scheduler

http://blog.devscrum.net/2011/10/scheduling-tasks-within-an-asp-net-mvc-site-with-quartz-net/

http://stackoverflow.com/questions/6597210/mvc-3-with-quartz-net

Mappers

http://emitmapper.codeplex.com/

http://code.google.com/p/dapper-dot-net/

Pdf

http://sourceforge.net/projects/itextsharp/

 

http://www.mikesdotnetting.com/Article/80/Create-PDFs-in-ASP.NET-getting-started-with-iTextSharp

http://www.codeproject.com/Articles/66948/Rendering-PDF-views-in-ASP-MVC-using-iTextSharp

Web UI specific

Time Entry

http://keith-wood.name/timeEntry.html

Date entry

http://keith-wood.name/dateEntry.html

Favicon maker

http://tools.dynamicdrive.com/favicon/

Countdown

http://keith-wood.name/countdown.html

WYSIWYG

http://code.google.com/p/markdownsharp/

MVC specific

404 handling

http://stackoverflow.com/a/2577095/142014

http://alistapart.com/articles/perfect404/

Profiling

http://code.google.com/p/mvc-mini-profiler/ http://miniprofiler.com/

Css and javacript include

http://clientdependency.codeplex.com/

 

http://getcassette.net/

http://requestreduce.org/

 

Development workbench

Regex tester / help

http://regexhero.net/tester/

 

Email – sending/receiving under development

http://smtp4dev.codeplex.com/ 

http://papercut.codeplex.com/

Screenshot tool

Windows start "Snipping tool"

Windows star "PSR" (http://www.hanselman.com/blog/HelpYourUsersRecordAndReportBugsWithTheProblemStepsRecorder.aspx)

 Image to base64 converter

http://webcodertools.com/imagetobase64converter