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.

1. Dezember 2010 00:35
by Henrik Stenbæk
0 Kommentare

Language select best practice

1. Dezember 2010 00:35 by Henrik Stenbæk | 0 Kommentare

Inspired by a discussion I had with a colleague recently (not really recently, more like 6 months ago) about the use of flags to choose language, I have reconciliation to assemble this list of best practice where users could select the language and culture on a website.

 

Ask users to select a culture

From a developer's standpoint, it is not enough that the user to select a language. To format dates, calendar, numbers and the like properly it is necessary to know language and country ("a culture").

 

en-US

en-GB

     
A large number with two decimals

123,321.99

123.321,99

First day of week

Sunday

Monday

Short date format

6/15/2009

15/06/2009

Within the same language exist culture-specific variations. A good (and now classic) example of this is from amazon where the text on the Add to Cart button varies between the  amazon.co.uk and amazon.com site:

image001 image002

 

Countries are not languages

The classic example of a bad “Choose of language” is the cases where a site prompts the user to choose a language from a list that only contains countries.

easportsactive

http://easportsactive.com/home.action has (until recently) this near to this wonderful misunderstood language selection. Entitled "Please Select your Language" invites the user to choose his language and then present a list of nine countries; several of them have more than one official language:

  • Canada has two primary languages: English and French (67.5% speak English only, 13.3% speak French only, and 17.7% speak both)
  • Belgium has two predominant languages: an estimated 59% of the Belgian population speaks Dutch (often colloquially referred to as "Flemish"), and French is spoken by 40% of the population.

 

Don’t display flags only

For many years, the experts recommended that you do not use flags for language selection. This recommendation has also found its way to W3C Working Draft “Authoring Techniques for XHTML & HTML Internationalization: Specifying the language of content 1.0”, Technique 16: Don’t use flags to indicate languages:

Flags represent countries, not languages. There are many countries that use the same language, and numerous countries that have more than one official language.

 

Yet there is a tendency that many sites still chooses to use the flag, this is linked to it may be difficult to scan a long list of countries and that a flag is a familiar and easily recognizable symbol.

When the flag is not used as the only symbol, but is followed by the country name and proper title (“select country”) it may work fine. For countries with multiple languages, these will appear after the country name as on www.tradedoubler.com where this technique work fine (note the two variants of Belgium and Switzerland).

tradedoubler

 

Treat the flag with respect

If you choose to use flags on a website it should be done with due respect to both form and color. Changing the flag can offend people's national sentiment but also actually be prohibited by law. In several western countries it is forbidden by law to scold other nations' flags. In Denmark, the only legal way to dispose of a national flag (Dannebrog) is by burning it while it is banned in Denmark to burn flags of other nations.

Apple.com has a complete overview of how not to treat all the world's flags. Under the heading "Choose your country or region" is a complete list of all the world's mistreated flags.

Apple

Who may, for example recognize the Japanese flag:

Apple_2

I dare not think of what a Muslim like the way the text (the Islamic declaration of faith) in the Saudi Arabia flag is pruned

Apple_1

For some reason it seems to Luxemburg and the Netherlands have the same flag, despite that the two flags are different on both the red and blue color (I think Luxembourg is the correct one).

Apple_3

 

Write the country and/or language name in its native tongue

delta_wrong_2 If a person who speaks only German enters the French version of the Delta Airlines website, it can be difficult to know that Germany is called Allemagne in French – Deutschland would be more correct

 

Language only

If the website does not have culture-specific formatting needs so it may be sufficient to let people choose a language and nothing else. Flickr has a list of languages written in native tongues:

flickr.

 

Language (followred by culture)

Facebook has chosen a solution where they listing language first followed by culture, if present: Français (Canada) and Français (France).

In the same way it’s possible to show both versions of Norwegian and it also opens the possibility to invent new cultures, notice “English (Pirate)” and “English (Upside Down)”, which is only possible due to this construction.

facebook2

 

Multistep culture select

Few websites offer users to select their culture through a multistage process. Pixmania.com is one of them, not graphically pretty :-) And it also assumes that the user knows his country's location on a map

pixmania1

(By the way – what has happened to Cyprus, it disappeared completely behind the "flag")

Clicking on the Switzerland flag on the map, shows a popup asking the user to select one of the 3 languages used in Switzerland

pixmania2

On the site the currency is default to CHF and the site still offers me to switch to one of the 2 other languages relevant for Switzerland.

pixmania3

The selected country and language is then shown in the address:

  • pixmania.com/ch/de/home.html
  • pixmania.com/ch/fr/home.html
  • pixmania.com/ch/it/home.html

 

Automatic culture selection

if the website uses Automatic culture selection: be polite and tell it to the user and give the opportunity to change back. Youtube automatically sets the user's language at the first visit ,from your browser's preferred language and shows a brief message about the choices made.

youtube

 

 

 

 

Suggestions instead of automatic selection

AlaTest suggests user to visit another domain (culture) version when the browser settings for preferred culture is not matched with the website culture.

alatest

No language

Finally consider if you need to have language selection at all.

Some sites don’t offer the user to select any language, if they have sites in different countries it’s possible to select the country and then gives the default and only language available for that country.

Amazon

amazon.com is an example of a side who don’t have language versions of their national sites. On the US site users is able to select Canada and are then getting the Canadian site in English.

2. April 2008 21:00
by Henrik Stenbæk
1 Kommentare

Option selection with instant AJAX availability information

2. April 2008 21:00 by Henrik Stenbæk | 1 Kommentare

I just stumbled upon http://www.webtogs.co.uk/ an AJAX enabled e-commerce site with a wonderful balance between AJAX, usability and design.

One of the well balanced functions is when the user need to select color and size - sold out "combinations" is showed instantly as well as the estimated delivery.

Notice - the cursor delay when moving over the buttons is due to the screen capture software - when browsing the site without screen capture there is no delay.

Watch the video or check it out yourself on http://www.webtogs.co.uk/.

6. August 2007 22:36
by Henrik Stenbæk
0 Kommentare

buyersvine.com - search usability disaster

6. August 2007 22:36 by Henrik Stenbæk | 0 Kommentare

I was thinking if it could be of any interest to post this at all, but now I’m doing it anyway.
When I was surfing for great AJAX usability experience, I ran into buyersvine.com where the search usability has ended up in a total disaster.

Buyersvine.com has created a drag and drop search function, I’m not sure if it’s right to call it AJAX, it’s more a DHTML implementation; but no matter what technology it is: it’s a classic example of a “because-it-is-technically-possible" misunderstanding.
On the search page they ask people to drag and drop search terms (called "search tags") from several lists to a collection of search fields. It not easy to do, especially not if one need to scroll the page at the same time.
One have a lot of search options to choose from, covering everything from the reasonable "Wine by Type" and "Wine by Price" to the more uncommon "Wine by Day" (what about a wine special usable for Wednesdays??), "Wine by Sport" not to mention the "Wine by Profession" (I never realised before that some wines are especially suitable for professors and others for poets).

What isn’t obvious is that the search is combined with 'and' between the search fields: if one selects the price range 50-70 and 70-90, the search shows up empty – because no wine cost both 50 AND 70 USD. At the same time: there are no results for at lot of the suggested "search tags" e.g. on the day tested the site didn’t have any wine in several of the suggested price ranges.

This search could have a huge usability improvement if they:
• Remove the drag and drop functionality
• Indicated next to the search tags how many results one can expect (e.g. "$150-170 (0)")
• Make users select the tags by checkboxes (when multiple can be selected) and radiobuttons where only one selection makes sense (for "Wine by Price", "Wine by Region" etc.)

A great example that less is more

See the video or try it out yourself on http://buyersvine.com/Tags

11. Juli 2007 08:18
by Henrik Stenbæk
3 Kommentare

Advanced search filter with instant AJAX feedback

11. Juli 2007 08:18 by Henrik Stenbæk | 3 Kommentare

Cofman.com has this great search filter for finding available holiday homes.

Instead of making people fill out a lot of search criteria, click the ‘GO!’ button and then have the result: we don’t have anything meeting your search criteria. Cofman give the user an instant response “{0} meets all your requirements”. But Cofman doesn’t stop here, they also provide another result “{1} houses meets nearly all your requirements” giving the user with a lot of preferences a second chance to find a house.

See it for yourself. Watch the video or go the cofman.com homepage.