Had a bit of a scare this week. If you accidentally type in www.google.com/masp instead of www.google.com/maps, you get this:

Not really what you’d expect from Google.

What is a 404 error page?

A web server shows an error 404 if it is asked for the url of a page that doesn’t exist. Because the page doesn’t exist anymore, for example. Or because the user made a mistake in typing in the url.

A standard 404 error page looks pretty unattractive and isn’t very useful. The best thing you can do is create your own 404 page. On that page you should put your logo, main navigation, the message that the page the user is looking for doesn’t exist anymore, maybe a few suggestions and a search feature.

Practice what you preach?

What makes Google’s lack of a customised 404 error page so strange is the fact that they give tips about how to make your 404 pages more useful on their blog. An oversight? Or strategy?

A big thank you to Elja Trum of Photofacts.nl for pointing this out.

1. Are you registered or aren’t you?

On a website that has registration, the order process usually starts by asking you whether you’re registered or not. Trouble is, people often simply don’t remember.

You can improve that page by wording it a bit more friendly (’Returning customer / First-time buyer’ sounds slightly more human than ‘Registered / Not registered’).

Layout-wise you can also make it easier on the user. By putting the options close together, like Amazon does.

But it’s still an extra page that can create doubt and confusion. A barrier to completing the purchase.

2. Getting registered is a hassle

Getting registered or signing up is an extra step that consists of at least one extra field. Again, you can improve the wording and layout of your form to make it easier on users. But it’s still an extra step.

If you really want to mess with a user’s head, make him choose a user name that can’t be his email address. Laughs all around.

3. What about optional registration?

In some online shops, like Esprit, registration is optional. Slightly better than compulsory registration but you’re still stuck with the whole are you or aren’t you a already a customer question.

Apparently, you can also log in as a registered user at Booking.com. But it’s very unobtrusive. Booking.com doesn’t ask you to register while you’re booking. They just let you get on with it. You can register after you’ve completed booking your room.

It would be interesting to know the percentage of Booking.com customers who register. And how many of those actually log in when they come back.

4. Remembering user names and passwords

We’ve all been there. Am I a customer here or aren’t I? Which email address did I use to sign up? And which password did I pick, or worse, get assigned by the website? What the heck, I’ll just say I’m a new customer. Oh no, now they’re saying my email address belongs to a registered customer. Damn…

If anything, it’s a great way to drive customers to the competition.

You’re probably annoyed when other websites unnecessarily ask you to register or sign up. So why wouldn’t that be annoying on your site?

Why is registration bad for your business?

• Less people actually buy
  Because registration is such a hassle, less people actually complete their purchase.
  Don’t believe us? Read how leaving out registration made this website 300 million dollar extra per year or how it caused an 8,5% rise in online bookings on TUIfly.com (German).
• More support needed
  One of the top questions for the helpdesk of corporate websites where you need to register: I forgot my password.
  In online shops too, there’s a lot of time being wasted resetting user names and sending out forgotten passwords.
  Sure, you can automate and improve all that. But why would wou improve something if it’s easier for everyone if you just leave it out?
• Dirty data
  80% of surfers have more than 1 email address. There’s loads of dirty data in your database anyway. Lots of people will just use their other email address instead of going to the trouble of resetting their password.

What’s the alternative?

This will come as an absolute shock to you. Wait for it. The answer is: no registration.

If Booking.com sells more than 150.000 hotel stays a day without registration, not making people register doesn’t seem like such a bad idea.

Phony justifications of registration

Despite the barrier registration creates for users and the convincing case studies in favor of axing it, there are always people in IT or marketing who claim they ‘need’ customers to register.

They’re lying.

• “Without registration, a customer can’t follow up on his order”
  Sure he can: provide the user with a purchase code on the confirmation page and in the confirmation email you send him, together with a direct url and a customer service phone number.
  Ryanair does that. And I’ve heard they sell quite a bit online.
  In 1 year, Booking.com managed to get 6 million hotel reviews from people who’ve booked with them. Not by making people register. Just by sending them an email with a direct link after their stay.
• “Without registration, repeat customers have to fill out everything all over again”
  If you say it like that, that probably means you’re asking way too much from customers.
  And how many of your customers come back on a regular basis? Because it’s only for them that registration has a small benefit. For all other users, it’s a barrier.
• “Without registration, we can’t track users’ purchasing behaviour”
  Sure you can. Based on their email address (possibly in combination with their offline address) you can track people’s purchasing history. There’s no need for them to register.
  No wait, you’re right. If someone changes email addresses or moves house, you’re probably going to miss some purchasing history. But does that really outweigh the revenue you’re missing out on? Be honest, how often do you use that purchasing history anyway?
• “Without registration, customers will end up in our database twice”
  Registration won’t fix that. And Santa Claus isn’t real either. Grow up.

Is registration always a bad idea?

No, it’s not. For websites that focus purely on online services like online training sites or communites like Facebook a username and password are obviously necessary.

But please, use the email address as the username and don’t get too fussy about password restrictions.

What do you think?

Are we right? Can you think of any benefits to registration that outweigh the negatives? We’d love to hear from you.

Knowing what people search for on your site is very, very interesting.

After all, these people are already on your website. And they’re probably using your search feature because they can’t immediately find what they’re looking for. At least, that’s what we usually notice during user tests.

What do you have to do?

1. Make sure you can analyse the search queries on your website
   Earlier, we talked about how to hook up your own site search to Google Analytics.
   Of course there are other tools out there, but they’re often expensive and quite frankly not as good.
2. Analyse the list of most frequently used search words a couple of times per year
   Take into account spelling and wording variations and group these together. People looking for a ‘gun license’, ‘handgun license’ and ‘gun permit’ are all looking for the same thing. The filters in Google Analytics come in quite handy here.

Typical discoveries when analysing a search feature

• People look for things that appear to be hard to find through the navigation structure
• They look for things that aren’t on your website
• They type in old product names and even your competitors’ product names
• They don’t use the same words you do
• People can’t spell very well… at all

How can you turn that knowledge into a profit?

• Improve the structure of your website and your overview pages
  Bring the top tasks to the fore in your structure or draw attention to them by giving them a prominent place on the homepage and overview pages (also called landing pages, index pages or category pages).
  Rewrite your content where necessary. Make sure you create pages that are easily scannable.
  That way you improve your information architecture and overall website usability.
• Expand your content
  Don’t get me wrong. I’m not saying you should start churning out random content. Far from it. But, after you’ve deleted all the content people aren’t interested in (and there will be loads of it, trust me), you should think about creating content people áre looking for but that you’re not offering yet.
• Connect discontinued products to similar new products
  Don’t disappoint people who type in names of discontinued products or old product names. Tell them which current products correspond to those older products they already know and apparently still want.
  Do the same if people type in your competitors’ product names or product codes. People who do that are most likely not looking for that exact product but just something similar.
• Use the same words as your users or make your search feature smarter
  If your visitors don’t use the same words your website does, you’re the one who needs to change. Or at least expand your vocabulary. You can also make your search feature smarter by hooking it up to a thesaurus with synonyms.
• Take common spelling errors into account
  Depending on your search software (and your budget) you can automatically correct spelling errors or suggest alternatives.
  If you can’t afford to do that, and it turns out 1 out of 4 people use the same miss-spelling for a particular word, put that spelling error in the meta-data of the most relevant page, or use the wrong spelling on the page somewhere.

Examples

• Gun permit on government site
  On a government site, we noticed that ‘gun permit’ (and all its variants) was continually in the top 5 searches. Because guns aren’t exactly a popular topic, it wasn’t deemed very important and was put on the 3rd level of the structure somewhere. But it’s apparently one of the site’s top tasks.

• E-commerce site with unclear delivery information
  Almost the entire top 5 searches on this e-commerce site consisted of things like delivery options, shipping costs, payment methods etc. A clear indication these things needed to be clearer and not just tucked away under a link ‘Terms of sale’.
• Old product names and competitors’ product codes at a cable manufacturer’s site
  On the site of a leading cable manufacturer we noticed large volumes of searches on product codes and product names. Makes sense, right. But when we probed a little deeper, we noticed that a lot of the searches weren’t producing any results. Delving deeper still, it appeared that the product names were old names the cable cmpany didn’t use anymore but apparently the customers still did.
  User research taught us those people weren’t looking for support for the old products, they were simply looking for a replacement. They wanted to re-order the product.
  The solution: tell customers the old product name or code doesn’t exist anymore and show them the new products with similar characteristics.
  The result: an increase in sales.

You might also like:

• How to hook up your own site search to Google Analytics
• Navigation versus search
• Search results: layout tips
• Search = type-in field+ button

• What people use your search feature for says something about your navigation, homepage and overview pages. If those are all perfectly fine, chances are that very few people will use your search feature.
• Insight into what people are searching for on your website. Which words do they use? Do they use other words than the ones you’re using? Are there typical spelling errors lots of visitors make? Are they looking for things that aren’t on your website? Etc.

3 ways to analyse your site search data

1. Your content management system or search software has a built-in tool to analyse the search feature. In that case, you are very lucky. Unless of course it’s a crappy tool.
2. You’re best buds with the IT crowd and they’re more than happy to make you a tool to analyse your search data.
3. You use Google Analytics to analyse your website’s visitor behaviour. If that’s the case, do read on. (If you don’t have Google Analytics yet: make sure you do.)

Can you ‘hook up’ your search feature to Google Analytics?

• Enter a search query on your website, for example using the word ‘test’.
• Check whether the url of the search results page scontains your search query. (As shown in the examples below.)
• If it doesn’t, you’re in trouble. Go visit your friends at IT or call your web builder to fix this. That shouldn’t be very hard.

How do you hook up your search feature to Google Analytics?

1. Log in to your Google Analytics account and click on the name of the site of which you want to hook up the search feature. (This step is only necessary if you have more than one website.)
   
2. Click on the link ‘Edit’ on the right side of the page.
   
3. You’re now on the page ‘Profile settings’. Click the link ‘Edit’, in the top right corner of the block called ‘Main Website Profile Information’.
   
4. At the bottom of the page there’s a subheader ‘Site search’. Select the radio button ‘Do Track Site Search’.
   
5. More options will then appear. In the ‘Query Parameter’ field, you need to type in the parameter that’s directly in front of the search query in the url of your search results page. In the example of The Web Usability Blog that’s the letter ‘s’. In the example of Flemish Brabant it’s the letter ‘q’.
   
6. Unless you use faceted search, you’re done.
7. Don’t forget to save your new settings.

How can you check if it works?

• Click on ‘View reports’ in Google Analytics. There’s a navigation on the left now where you click on ‘Content’. After that, click on ‘Site Search’.
• If you see numbers and graphs, you’ve succeeded.
• If you don’t, read the instructions again…

What can you do now you’ve hooked up your search feature to Google Analytics?

If you know what people search for on your site, you can turn that knowledge into a profit. Read all about in our article ‘Analyse your site search to increase ROI‘.

Faceted search helps people to look for things based on criteria that are important for them.

In classic web navigation, the website determines the order of the choices. But this hierarchical structure is too limited for sites with a large product range or information offering. Different people often have different criteria in searching for the same thing.

Example: holiday homes

When I’m looking for a holiday home, a swimming pool is essential. For you it might be that pets are allowed or that it’s no more than 10 miles from a supermarket. All these things are important, but they’re not important for everyone.

The best way to solve this: faceted search. Sure, you could also go for an extremely advanced search feature, but I’d advise against it.

In this article we’ll discuss 4 design aspects of faceted search that are crucial for good usability.

Where do you put faceted search?

• Left is best
  Big sites like Amazon, eBay and Google put faceted search on the left. These sites probably have more visitors than you do. When big, influential sites do things a certain way, that creates a certain pattern of expectation for users. They expect you to do things the same way those big sites do it.Another compelling argument for putting faceted search on the left is that the left half of the page gets more attention than the right half. If you want your filters to be noticed and used, put them on the left. Apple does it too, on their website and in iTunes.

• Second-best: at the top
  You can put faceted search at the top, but it’s not as good as left. Mainly because it pushes everything on the page down. Which means less of your products are visible above the page fold. And even though people definitely scroll, they spend 80% of their time above the page fold.)In the Cnet example on the left, the search filters push the reviews below the page fold. Not good.

• Stay away from the right
  During our own user tests we often see that faceted search on the right side of the page is ignored by about half of the test users. People don’t look at the right side of the page very much, not even when you put the search filters there.

How do you indicate which filters are active?

• In the search filters themselves
  The best way to indicate which search filters are active is by making them stand out visually. Just like you’d do in a standard navigation (read tip 4 of our article on way-finding).Downside: if you have a lot of search filters, it can become difficult for the user to see all the active filters.

  Apple indicates which filters are active in a very clean and clear way. Booking.com looks slightly less refined but it is very clear.

• In a separate area above the search filters
  Probably the way most sites do it now. The advantage is that users get a quick overview of all the active filters. The downside is that the actual search filters get bumped down a little.

• At the top of the page
  Less popular but also possible. Put a sentence ‘x products for your search criteria:’ followed by the active filters. Put a red cross behind each filter to make it clear the user can undo his choice.This is especially handy if you have lots of search filters. Less experienced users understand how this works too.

How to undo a filter choice?

• Add an ‘undo’ x in the active filter
  A very clean-looking way that takes up a minimal amount of screen space.
   
• By adding a link ‘Clear filter’ to every filter category
  It works, but it sounds a bit technical and it’s quite clunky. Downside: it takes up one extra line. In this case it’s also quite unnecessary because it’s a system with check-boxes.
   
• By adding an item ‘All …’ to every filter category
  It’s not the most elegant solution but we’ve seen in user testing this works really well. Downside: it takes up one extra line.

• In the active filters summary
  Simply put a red cross behind every active filter if you put the active filters together at the top of the filter list or at the top of the page.

What if you want to allow more than one active filter within the same category?

• Check whether it’s really beneficial for the user.
• If it is, put checkboxes in front of the filters. That makes it clear users can select more than one item in the same filter category.

If you know any particularly good examples of faceted search, please share them in the comments!

You might also like:

• 4 product comparison best practices
• Product overview do’s and don’ts

Letting people know which site they’re on and where they are on that site is pretty basic usability stuff, but that doesn’t mean it isn’t important.

1. Logo and company name in top left corner

Put your logo in the top left corner. If your logo doesn’t contain your company name, put your name directly underneath the logo. Do this on every page. That way, people immediately know whose website they’re on.

Don’t think putting your logo on the right side will make you special. Sure, you’ll be different, but not in a way people appreciate. You’re just making it harder for them to know which website they’re on.

Ogilvy puts its logo in the bottom right corner. Because that’s not where people expect it to be, it will take them longer to see it.

Not mentioning your name or logo at all is of course not the greatest idea either.

Without a logo or name in the top left corner, it’s not easy for visitors to know they’re on the website of the Museum for Industrial Archeology and Textile (MIAT) in Ghent.

2. Breadcrumb

A great way to let users know where they are on your website, is via a breadcrumb. A breadcrumb shows you where you are on a website by visualizing the site’s hierarchy, from the homepage to the current page.

You can find more details on what a good breadcrumb looks like in our article ‘Breadcrumb: 7 tips’.

3. Clearly visible page title

A page title has to stand out. Use a larger font size and perhaps even a different colour than your regular text colour.

Put the page title always in the same, clearly visible place: at the top of the content part of the page, left-aligned.

Use the same term as the one you use in your menu, or at least start the page title in the same way. Inconsistencies can be confusing.

The Belgian province Flemish Brabant puts the page title or header where it should be: at the top left of the page’s content part, in a larger font size and different colour than the regular text.

4. Navigation: active item in a different colour

Navigation plays a very important part in telling people where they are on a website.

An easy way to show users what main and sub-category of the navigation they’re in is putting the active category in a different (background) colour.

On the site of Amnesty International it’s very clear which main and sub-category of the navigation the user is in.

5. Title tag

Another small but not unimportant element that can help users determine where they are on a website is the title tag.

But thanks to our ‘8 tips for the perfect title tag‘ you already know everything about that.

The overview pages on the website of Antwerp art campus deSingel give the user an overview of, well, not very much. Except for a truly huge page title (if you’ve ever seen a bigger one, please let me know) there’s not a lot to see really.

Ah, but there’s a tiny link ‘Topical exhibitons’ just visible above the page fold! Yes, there is. Go ahead and click it. Nothing happens.

If you want to see the current architecture exhibitions, you’re going to have to scroll down.

Now there’s nothing wrong with scrolling, but on a page like this the current exhibition(s) should at least be partly visible above the page fold.

Why use up all that space for one creatively hyphenated word?

Thank you, Jan Seurinck for pointing this one out.

And the advanced search feature on Iha.com doesn’t make it any easier.

Then again, maybe it’s handy if you’re looking for a lakeside cottage in the mountains with a private swimming pool and sauna. Around the corner from an 18 hole golf course.

Maybe.

A client recently asked me: “Navigation, isn’t that a bit old hat? I mean, this is the time of Google. Doesn’t everybody just search?”

No, they don’t. Good navigation and good links are vital for the success of a website. A search feature is an added bonus, sure. But if you have one, it has to be as good as Google or even better.

Less than 5% uses the search feature

Google might be insanely popular but that doesn’t mean the search feature on your website is too.

On the contrary.

When we do visitor behaviour analysis (read: Google Analytics) we often see that the search feature is rarely used by more than 5% of a site’s total number of visitors. On our blogs the number of searchers is even lower: around 1,5%. On the website of a Flemish province we’re working for it’s just below 5%.

Things we know about search

During user tests we see the following happen time and time again:

• Most people only use the search feature after they’ve tried the navigation or the content links. Search is seen as the last resort.
• If people are looking for something very specific, like a product they know the name of, they’re be more inclined to search.
• Programmers and engineers use the search feature more often than ‘normal people’.

What if more than 5% of your visitors uses the search feature?

If the number of visitors that use your search feature is higher than 5%, that might be an indication that all is not well on your website.

Check whether your navigation is clear to your visitors. Do they understand the words you’re using? Do your overview pages contain the right links?

It’s also worthwhile to check on which page people start searching. And to see what it is about that page that might cause them to do that.

These rules obviously don’t apply to job sites, real estate sites, etc. where people basically come to search.

5 reasons to encourage people to browse rather than search

1. Most people aren’t very good at searching
   It’s quite shocking to see how bad some people are at formulating a good search query. Often they use words that are either too general, way too specific or just plain wrong.
2. Different words
   People often use different words than the website uses. They type in ‘night school’ for example, when the site talks about ‘lifelong learning’. There’s nothing wrong with that, but it usually doesn’t deliver great results.
3. Spelling errors are very common
   You wouldn’t believe the amount of ’sandels’ and ’sandles’ being offered on eBay when actually what these people are trying to sell are ’sandals’.
4. Most search features aren’t very good
   Most search features, especially the ones that come with a CMS, aren’t very good. The way of searching the data, ordering the results, accounting for spelling mistakes, … it’s all a bit depressing.
5. People who browse see more and buy more
   People who use the search feature look at less other pages after they’ve found what they’re looking for than people who browse. On e-commerce sites the shopping carts of browsers are fuller than those of searchers.

   On the other hand, searchers often have a higher conversion rate than browsers. That’s pretty logical, given that people who use the search feature know what they want and are often looking for something specific. And so not an argument in favour of just pushing any and every visitor towards the search feature.

Which brings us to the interesting subject of hooking up your website’s search feature to your Google Analytics account. Because there’s loads of interesting information to be found there. But we’ll talk more about that later.

Meanwhile, you might want to check out these articles

• Search = type-in field + button
• Layout tips for search results

As soon as your chosen user name contains certain, shall we say ‘improper’, letter combinations Lego delicately points this out to you. And then forces you to choose a different user name.

It’s good to be careful. Just don’t be too careful.

And ahem, Lego… if you’re really that worried about your squeaky clean image, maybe you should pick a figure with a less suggestively crooked smile. Just sayin’.

Many thanks to Anthony Bosschem of Youreca, who put us on to this beauty.

What do you mean, this route is not available?
Has the road gone missing?
Was it destroyed by an earthquake?
A tsunami?
Has it been temporarily moved to a parallell universe?
Help!

Related articles

• Gender error
• 7 tips for user-friendly error messages

10 years ago I thought so. More specifically: I thought I knew everything.

Surely my usability expertise, my deep knowledge of information architecture would be enough to find and solve all the usability issues on every possible website?

Without research you can never truly know your users

10 years of user testing have made me a bit more modest. Okay, a lot more modest. Expert knowledge alone is not enough.

Does that mean I’m not a good usability expert? Hell no. I think I know more about web usability and information architecture than anyone else in Belgium. (Non-Belgian readers, please suppress that giggle.) Actually, that’s a lie: Els knows more about it than I do. See, I told you I was modest.

And still, despite all of our combined expertise, we often say things like ‘That depends’, ‘We’ll have to ask your customers that’ or ‘We’ll have to test that’.

Usability rules are not stone tablets

A lot of web designers and programmers resent those answers. They like it when everything is fixed. That makes it nice and easy.

Admittedly, Jakob Nielsen’s rules, the interface pattern libraries you see all around and even the usability tips we write on this blog, sometimes suggest it’s all black and white, clear-cut.

Wake up call: it isn’t. Usability isn’t that thing you read about in books. To fully understand usability, you have to see real users in action.

There are lots of rules and often those rules are right. But sometimes they’re also flexible, open for interpretation. Quite often the things that we as experts thought might cause problems end up not troubling users at all, while the things we thought wouldn’t be too much of a problem cause half of the test users to trip up.

Is that because we’re stupid? Because we’re not really experts after all?

I don’t think so. And our customers, who gave us a client satisfaction score of 100% in our latest audit in 2009, obviously don’t think so either.

Content and structure are determined by your visitors

When it comes to your site’s information structure and your content, the rules don’t really help you much. They get more than a little vague.

A few examples:

• Use words that your visitors understand for your menu labels
• Put the 3 to 5 things that matter most to your visitors above the page-fold on a detail page
• Start every page and every paragraph with the most important information you’ve got

While these rules are all true, they’re also very theoretical. Which words do your visitors understand? What exactly are those 3 to 5 most important things according to your visitors?

Pretentious

In all modesty, we think web builders or information architects who claim they don’t need to involve real users because ‘they know what’s best’ are pretty pretentious.

Sure, those web builders’ and information architects’ common sense will probably keep their customers safe from all too big disasters. But is that really good enough?

User research gets you facts

Are you really so all-knowing that you know what people exactly want to know about a hotel, an airconditioing unit and an oil-free compressor? And a forklift, a handbag and a car loan?

Really? Wow, you must be making around 10.000 euro/hour. Congratulations!

In all fairness, nobody knows those things. The only way to find out what your visitors really want is by doing user research. That doesn’t have to be ridiculously expensive. You can do some of it yourself. A good online survey and interviews with potential or existing customers will already point you in the right direction.

Facts trump opinions

One of the biggest advantages of user research is that it gets you facts. The case for the information structure you present to your client is a whole lot stronger if you can base your decisions on facts rather than just your own opninion. Data from logfile analysis, survey results, user test videos – those are things that make compelling arguments, not your opinion.

Gathering facts is the main reason why we push clients to include user research in their project. Agreed, it costs a bit more when you’re doing it, but it sure saves time on meetings full of endless discussions based on nothing more than opinions.

Related articles

• Webdesign process: is the customer king?
• Information architecture: the basics

What do you think?

Are we right or are we right? Feel free to disagree.

If you’re offering 2 or more similar products or services, people should be able to compare them easily.

It’s the vendor’s job to help people pick the product that suits their needs best. That’s what people expect, offline as well as online.

We’ve written about this before in ‘4 product comparison best practices’.

Don’ts

Hide the differences

A typical problem in product comparisons is that differences between products aren’t immediately apparent.

First Choice Power is a good example of a site that doesn’t tell people what the difference is between products but makes them look for it.

What’s the difference between Simply Better Price Plan 24 and Simply Better Price Plan? The description is pretty much identical.

On closer inspection I can tell the first one’s a 24 month plan and the other one’s a 12 month plan. They both promise a ‘guaranteed low price’. Is it the same price for the 24 month plan as for the 12 month plan? I have no idea.

Inconsistent order

Comparing products is only handy when the comparable characteristics are nicely lined up.

Nuon obviously thinks that would be making it too easy. That’s why they put “(Up to) £ 100 annual Direct Debit discount” respectively 1st, 2^nd and 2^nd. So you can look for it, instead of just see it.

No prices

You’ve probably noticed in the previous examples that companies like talking about price without actually telling customers what their product costs.

While that’s pretty creative, it’s not what people want. People want to know how much something costs. So tell them. Price plays an important in a customer’s decision making process. The more open you are about price, the easier it is to convince people to buy your product.

Fluffy copywriting

Web writers should not be paid by the word. Good web writing is brief and concise.

Describing your products in long, flowery sentences is not a good way to go.

Vertical

Keep scrolling to a a minimum to make comparing easy. Put similar products next to one another instead of underneath one another.

Belgacom lines up its products vertically. The comparable characteristics of the various products are never visible at the same time, which makes it harder to compare.

AGL makes it even more difficult. Not only do they list their products vertically, they only show the product details of one product at a time, at mouse-over. Not the greatest strategy if you want to make comparing your products easy.

Good examples

Tables

A table with 1 line per characteristic is the easiest way to compare products. If you can do this for your products, do it. Surfers love it. It’s clear, it’s easy. Combell understands.

Visual emphasis

The more expensive the product, the more room it gets at Combell. The expensive products also have a higher star rating. Visual tricks like that really work. Or are you intuitively attracted to the sad little one-star product? I didn’t think so.

Highlight the popular product

If you want to play into people’s herd instincts, it’s a good idea to highlight the ‘most popular’ product. The example below is from Shopify.

More explanation in a tooltip

At Basecamp they take it one step further. Not only do they highlight the most popular solution, there’s a tooltip with extra information on the various features. (Pity they only have a tooltip with extra info for the most popular solution.)

Most expensive product first

A/B-tests show that putting the most expensive product first does wonders for your revenue. Basecamp gets it right in that respect as well.

Blocks

If a table isn’t ideal for your products or if you think it’s too boring (trust me, it isn’t) you can always go for product blocks.

Telenet shows a fairly good example of these product blocks. The important product characteristics (price, speed, volume) stand out and are easy to compare. Still, a table would be even better.

And now for a totally unbiased example from a company that offers usability services. Product blocks with the characteristics in the same order in each block, to make comparing easy.

Photographers know that the eye gaze direction of the person in a picture dictates the eye gaze direction of the person who’s looking at the picture. It’s in just about every book on photography ever published.

What does this mean for your website?

If you use pictures of people on your website, make sure they’re looking at something you want your visitors to look at as well.

Pictures of people looking straight into the camera bounce the viewer’s gaze right back. Sure, they draw people’s attention. But that in itself really doesn’t do anything for you, does it? Unless of course you prefer people to look at the pictures on your site rather than the ‘Buy now’ button. If that’s how you roll, be my guest.

Example 1: hair product ad

Most people instinctively prefer the bottom picture. It looks more natural than the slightly contrived sideways glance in the top picture. The heatmap however tells a different story. The top picture directs the viewer’s gaze to the brand name on the product. Hmm… which picture should I use in my campaign? That’s a no-brainer really, isn’t it?

Example 2: cute baby

If the baby looks straight ahead, people mainly focus on the baby’s face (”What a cutie!”). The text on the right doesn’t really get a lot of attention.

If the baby looks at the text, the visitors’ eye gaze pattern changes. The text gets a lot more attention. And so does the brand name in the bottom right…

For people who aren’t familiar with heatmaps: what you see is the result of eyetracking research that follows the eye gaze of people. The red zones indicate areas that were looked at by 80 to 100% of people. In this case, the research was done with 106 people by the Australian UsableWorld.

Example 3: banner with or without headshot?

The excellent site Which Test Won recently showed this example. Which banner got the biggest conversion rate?

You chose the banner without the headshot? Excellent choice. It got 65% more sign-ups than the other one.

Does that mean pictures of people don’t work in banners? That’s a going a bit too far. Look where the banner guy is looking. Wrong place. It would have been interesting to see a test with a version where the guy in the headshot looks at the call to action button…

Conclusion

Having people look straight into camera works fine for family snaps but not if you want to put the pictures on your website.

What else is important if you use pictures of people?

• Use real people. Eerily perfect models with teeth whiter than the driven snow raise suspicion rather than confidence.
• Avoid the clichés. “We’re an IT-company. Let’s use pictures of nerdy guys behind computers.” Actually, let’s not.
• Don’t forget to link the picture to your product or the message you want to convey.

1. Page fold: myth or reality
   A hot topic if ever there was one. Is the page fold a myth? Do or don’t people scroll? Everything you’ve always wanted to know about the page fold and page length.
    
2. Stop the presses – we’ve got a new website!
   Don’t bore people with messages about your new website. It’s not just inappropriate, it could cost you customers.
    
3. Screen resolution statistics and tips
   Which screen resolutions do people in Belgium use to surf the web? And what does that mean for your website’s layout?
    
4. 48% of visitors on e-commerce websites don’t buy due to lack of usability
   iPerceptions’ research shows that 48% of the people on e-commerce websites doesn’t buy due to lack of usability. Even worse: 38,5% of the people who visit a website with the intention to buy, don’t succeed in doing so.
    
5. 13 quotes that show the customer isn’t ready for a good website
   Sometimes a client says something that makes it clear to us usability professionals that they are simply not ready for a good website. 13 quotes that make our blood boil. Also read a lot: 14 quotes and explanations
    
6. User-friendly error messages: 7 tips
   A lot of websites make usability mistakes on their form pages. And that costs visitors. On a form page that’s extra painful because if you lose a visitor there, you loose a very valuable visitor. A visitor who’s willing to make the effort to get in touch with you or perhaps even to order something. 7 tips for user-friendly error messages.
    
7. 11 tips to turn your visitors into customers
   My colleague Karl Gilis’s presentation with 11 tips to turn your website visitors into customers. Lots of eye-opening examples. Warning: you may not always like what you see. But it is the truth.
    
8. Google Maps: cases from travel websites
   Google Maps is great. But only if you use it well. People seem to put stuff on Google Maps pretty much without thinking about it. We show some good and bad examples from travel websites.
    
9. Gender error
   According to Citroën I’m suffering from a ‘gender error’. Should I panic? Wear more make-up maybe? Stuff some of those silicon chicken cutlets down my bra? None of the above. It seems I simply forgot to tell them whether I am a MR, MISS or MRS. Phew.
    
10. Browser statistics
    Which browsers and operating systems do people use to surf your website in Belgium? Is Firefox catching up with Internet Explorer? Is Chrome as popular with housewives as it is with geeks? And what about the Mac guys and girls? Are they going to take over the world at last?

Everybody who shops on the web compares. They don’t just compare products from different vendors, but also different products from the same vendor.

This comparison behaviour goes for visitors of both b2c and b2b websites.

Allow users to compare

Comparing is a top task so make sure it’s easy to do on your website.

If you make it hard to compare your products, there’s a good chance your website visitors will not become customers.

What do your visitors expect?

• Main characteristics of the product or service on the product page, pereferably as a bulleted list.
• An overview of the similarities and differences of comparable products on 1 page. It’s really annoying if you have to get out pen and paper to write down product characteristics and then look for the differences between the products.

What do you need in order to compare?

• Clearly differentiated products or services. If you’re not sure what the difference is between product A and B, how is your customer supposed to know?
• If you want to compare products in a meaningful way, you need to know what the deciding factors are for your customers. Seems easy, right? Wrong. In about half of the projects we do, the company doesn’t know what their customers deciding criteria are.

What if you don’t meet these criteria?

• Make sure you do!

The choice is simple: adapt or lose customers.

Less than 10 products or services to compare?

Basic principle: all on 1 page

A search feature or wizard is not needed here. Your users probably aren’t rocket scientists but they aren’t idiots either.

Option 1: table

• Users love this. If it’s in any way possible, try this.
• Recent tests show that putting the most expensive products first is the most effective.

Top row: good examples by Shopify en Combell, lowest to highest price. Basecamp (bottom row) does slightly better: from highest to lowest price and with extra information on mouse-over.

Option 2: separate blocks

• Clear heading.
• Main characteristics in bullets, preferably in such a way that it’s easy to compare the different products or services (a.o. by the same order and approach).
• Price.
• Each block should be clickable in its entirety.
• Line up blocks horizontally whenever possible. That creates a better overview.

The blocks on the Telenet website offer a pretty good overview.

More than 10 products or services?

Facets

All products on 1 page with faceted search on the left.

2 good examples of refining results by faceted search: Bol.com (left) en Booking.com (right)

7 things to keep in mind about faceted search

1. Put the faceted search on the left. You can put it on the right, but less people will notice it. You can put it at the top of the page as well, but that will push the actual results down and that’s not ideal.
2. Limit facets to the main product characteristics. Don’t cram every detail in there.
3. Take your customers’ view on what the product’s main characteristics are. Remember: what you think, doesn’t matter. It’s all about your customers.
4. Make selecting and deselecting the facets easy.
5. It should be impossible for users to make a selection that delivers zero results.
6. In many cases, it’s helpful if the user can order the results list (alphabetically, by price, by size, …).
7. If there are more than 20 products in your list, it’s best to go for numbered results pages (cfr. Google).

Detailed comparison

A more detailed comparison, that sums up all characteristics of comparable products in a table can be very handy for certain products.

More on product comparison

• Trends in pricing tables
• 50 examples of pricing tables
• Best practices for faceted product search
• The basics of information architecture

Other options?

Have you seen other good examples? Maybe you came up with one yourself? Feel free to leave a link to it in the reactions or send us an email.

Want to know more about how to make good home pages, overview pages and detail pages?
Join us at one of our usability workshops.

This is what Google would look like if the average web manager, marketing manager, advertising guru or CEO had a say in it. (Granted, it’d look more polished and glitzy but the content wouldn’t differ so much.)

How did we come to this conclusion? Crank up your speakers and watch the 3 minute video with commentary by my lovely colleague Karl Gilis. You’ll never look at your own homepage the same way again…

Credit where credit is due

All the credit for this example goes to Gerry McGovern who shows a similar version in his seminars.

If you haven’t already, subscribe to Gerry McGovern’s weekly newsletter. You’ll love it.

What do you use Google for?

Ask 100 people this question and I guarantee you that at least 99 answers will contain the word ’search’.

A small group of people will also talk about things like Gmail and Google Maps.

An even smaller group will talk about Google Adwords, AdSense, Analytics etc. The stuff that only web professionals really know about.

Top task: search

Because search is the absolute top task people visit Google for, the new Google homepage focuses on it for the full 100%.

Strange?
Not at all. Search is what 99% of people visit Google for. Give people what they want.

Less important tasks: less prominent on the homepage

If you move your mouse over the screen, you get to see more. The other important tasks, like Gmail and Maps are at the top. Below the search are the things Google actually earns money with: the advertising programs and the business solutions.

A bold move?
Not really. Though it is true most people lack the courage to do this on their own website.

Google puts the stuf that generates revenue in the background. Most CEOs and web managers are afraid to do that. But at Google, they realise it’s not the advertising programs that generate the revenue, it’s the millions of people who ‘google’ every day. Why do they google every day? Because the website is so deliciously simple.

How do you identify your website’s top tasks?

We can help you on your way with user research.
That way, you can base your website on facts instead of opinions or feelings.

Related articles

• What would Google look like if you had made it?
• Focus: the basis of every good web page
• Page fold: myth or reality?

Possible answers

• Couches
• Couches and chairs
• Anything you can park your behind in ™
• Furniture in general
• HR publications

The right answer

HR publications. That was easy, right?

What have we learned today?

• Think before you drink
• Don’t drink when you’re designing a web page
• Only use images that help the user

If you liked this article, you should also read

• Deciding when graphics will help (and when they won’t)
• Can you pick the right picture?
• No more smiling faces

Have you seen something silly or wonderful (or wonderfully silly) on a website? Let us know. Use our contact form or just mail us.

Case study presented at 2009’s SIGCHI.be conference. SIGCHI.be is the Belgian chapter of SIGCHI, the premier international society for professionals, academics and students who are interested in human-computer interaction.

What’s the presentation about?

• 3x more visitors
• What makes UiTinVlaanderen.be so much better than Cultuurweb?
• Do the community features play an important part in the site’s success? 
• How did user tests improve the search feature and results?

Usability Awards 2009: 2 times silver for UiTinVlaanderen.be

At the Usability Awards 2009 the new and improved UiTinVlaanderen.be came 2nd in the category ‘Most user-friendly government or non-profit website’. But UiTinVlaanderen.be wasn’t only a jury favourite. The site also came 2nd in the public vote.

Strong points of UiTinVlaanderen.be according to the jury

• Phenomenal amount of events
• Task-oriented homepage and main navigation
• Handy search filters
• Good integration of social media and web 2.0 features

Weak points of UiTinVlaanderen.be according to the jury

• Content and copywriting isn’t always the greatest
• Doubles of events
• The search filters could be more streamlined
• Too many events without images, making you dislike the omnipresent ’Uit’-logo