A good, usable, well-behaved web site gives concise, timely, and polite help.
A good web site behaves like a top-class butler or a concierge in a hotel.
It looks after you, it intelligently anticipates your needs, and it goes out of its way not to make you feel bad.
When everything’s okay, it lets you get on with your business.
When something’s wrong, it offers prompt and positive assistance.
How usable Web Pages should give Appropriate Feedback
When everything’s all right, I want to know:
Designing for when things go wrong
When something goes wrong, I need 3 key things:
If you go to Google, what do you have to do in order to search?
You just type and hit Enter, or click a button.
Two things.
Google helps me succeed quicker by placing the cursor in the search box when the page loads.
It’s a tiny thing, and not particularly intelligent, but it makes a huge difference.
Consider the time difference between Type > Enter, or Move hand to mouse > Move mouse pointer to search box > Click mouse button > Type > Enter.
That could easily take five times as long.
Considering the number of searches I do on Google, that tiny thing probably saves me a minute every week.
Multiply that by the number of people using Google, and you’ve got a lot of benefit!
Example of bad web site behaviour
TheTrainline.com
This is a website that I use at least 2 or 3 times per week.
One reason is that I can actually order train tickets in a couple of minutes.
Another reason is that it reminds me just how bad websites can behave (and how easy it would be to make them behave better).
A few quick design criticisms, while we’re here:
The goal
I went on this site with a single, clearly-defined goal: I wanted to know, “When is the next train from Southend to London?”
Pretty straightforward… you’d think!
I typed in Southend and London, and hit ‘Search’ (‘Get Train Times’), thinking that this would tell me the next few train times.
Attempt 1
The site is complaining that I haven’t told it the exact date I want to travel on.
And to make matters worse, it’s using red text, which means ‘error’, which means it thinks it’s my fault!
I have to enter the date I wish to travel on, as well as the month!
Can’t the server guess the month, if I say I want to travel on the 24th?!
Bizzarely, the comment against the label tells me that I’m supposed to put in a 2-digit year as well.
This goes back to the percentage game: how likely is it that Thetrainline is going to leave me seething because:
Attempt 2
If I happen to enter the correct date, but use backslash () instead of a forward slash (/), it tells me I’ve made an error again.
Notice that it doesn’t tell me how to remedy the error.
As far as I’m concerned, I’ve entered a valid date.
The difference between a backslash and forward slash is the computer’s problem, not mine.
What would a polite, well-meaning butler-like computer do in this situation?
Anyway, I managed to find and fix the ‘error’.
I put in the date, as requested, in the right format.
I don’t have a picture of the site complaining that I entered a valid date, but neglected to say what TIME I wanted to travel.
Remember, all I want to know is when the next train is.
This site makes you enter a time, in both hour AND minutes. You have to choose either 00, 15, 30, or 45 minutes.
I enter a time. It’s 3.10, so I enter 3.00, to make sure I get the next train time.
Attempt 3
“Outward travel must not be in the past”.
The computer’s correct, in a computer way of thinking.
Its job is to sell me train tickets, therefore the tickets must be valid, therefore the journey must be in the future.
But what if I wanted to use the site to check when the last train left?
What if I wanted to see what time the train my friend just caught gets in to its destination?
The site would refuse to oblige me.
And you can’t just put “15″ and leave the minutes blank.
You have to put in the minutes, and the minutes must be in the future.
So if it is now 15:01, how do I find out about the 15:14 train? I can’t.
If I put in 15:00, it will tell me that the time I travel cannot be in the past.
If I put in 15:15 (the nearest other option), it will only retrieve details of trains setting off AFTER 15:15.
In summary
This is a site that behaves like a computer, not like a human being, never mind a friend or a faithful butler.
When there’s a problem, it fails to anticipate what I mean – it can’t think like a person (hasn’t been programmed to).
It would be easy to assume that I always want the next train times, unless I specify otherwise, wouldn’t it?
When there’s a problem, this site tells me, and then leaves me to work out exactly WHAT went wrong, and exactly HOW to remedy it.
Very often, the ways to make a web site help users succeed are simple, quick, and cheap to implement.
If Thetrainline made a few small changes, they would please more people, and they would easily recoup their costs.
A good web site behaves like a top-class butler or a concierge in a hotel.
It looks after you, it intelligently anticipates your needs, and it goes out of its way not to make you feel bad.
When everything’s okay, it lets you get on with your business.
When something’s wrong, it offers prompt and positive assistance.
How usable Web Pages should give Appropriate Feedback
When everything’s all right, I want to know:
- Where I am. I want to know: “Am I in the right place?”. My friendly site says: “Yes, this is where you are, stop here for x, y, z.”
- What I can do here. I want to know: “Can I do my task here, or where?”. My friendly site says: “Here’s how you do it.”
- Where I can go to from here. I want to know: “Am I on the right path to achieve my goal?”. My friendly site shows me the best route to get there.
Designing for when things go wrong
When something goes wrong, I need 3 key things:
- Status, i.e. what the situation is (e.g. “Login failed” / “Unable to send message”)
- Why it happened (e.g. “Password supplied was incorrect” / “The server is offline”)
- What I can do to make it work (e.g. “Re-type your password” / “Try again in 20 minutes” / “Contact helpdesk on xxx”)
If you go to Google, what do you have to do in order to search?
You just type and hit Enter, or click a button.
Two things.
Google helps me succeed quicker by placing the cursor in the search box when the page loads.
It’s a tiny thing, and not particularly intelligent, but it makes a huge difference.
Consider the time difference between Type > Enter, or Move hand to mouse > Move mouse pointer to search box > Click mouse button > Type > Enter.
That could easily take five times as long.
Considering the number of searches I do on Google, that tiny thing probably saves me a minute every week.
Multiply that by the number of people using Google, and you’ve got a lot of benefit!
Example of bad web site behaviour
TheTrainline.com
This is a website that I use at least 2 or 3 times per week.
One reason is that I can actually order train tickets in a couple of minutes.
Another reason is that it reminds me just how bad websites can behave (and how easy it would be to make them behave better).
A few quick design criticisms, while we’re here:
- One good thing is the goal-oriented navigation options on the left hand side: Buy train tickets, Book a hotel etc.
- The inverted tabs at the top are part of this site, but don’t look it because: a) They’re upside down and seem to be attached to something off screen, and b) They sit above the site ID, so appear to be separate to this site.
- The Short Breaks don’t work very effectively as a cross-selling mechanism, because they’re in a floating frame which has a solid top and bottom. At first glance, you only see three plain-looking offers, and the prices don’t jump out. The only thing that tells you there’s more is the scroll bar, but because that’s also floating in the middle of the page, it doesn’t really register.
- The Quick Timetable form in the middle of the page is a complete jumble, with very little logic to the layout. It hints at how bad the site’s attitude is about to become…
- The search target is made up of two elements: Graphic text that reads ‘Get Train Times’, and a (>>) graphic. These should be unified, to show that they’re the same thing, and should preferably have a bevelled edge to make it clear it’s a button and that clicking it will perform a function.
- Even though I’ve saved my regular journey twice on Thetrainline, it never remembers it on the home page, even though it remembers who I am. (It does manage to find my favourite journey if I click on ‘Buy Train Tickets’..)
The goal
I went on this site with a single, clearly-defined goal: I wanted to know, “When is the next train from Southend to London?”
Pretty straightforward… you’d think!
I typed in Southend and London, and hit ‘Search’ (‘Get Train Times’), thinking that this would tell me the next few train times.
Attempt 1
The site is complaining that I haven’t told it the exact date I want to travel on.
And to make matters worse, it’s using red text, which means ‘error’, which means it thinks it’s my fault!
I have to enter the date I wish to travel on, as well as the month!
Can’t the server guess the month, if I say I want to travel on the 24th?!
Bizzarely, the comment against the label tells me that I’m supposed to put in a 2-digit year as well.
This goes back to the percentage game: how likely is it that Thetrainline is going to leave me seething because:
- I wanted to get a ticket for NEXT March, and it found me tickets for THIS March instead, or
- Every time I try to do a quick search, it tells me I have to enter the exact date/month/year?
Attempt 2
If I happen to enter the correct date, but use backslash () instead of a forward slash (/), it tells me I’ve made an error again.
Notice that it doesn’t tell me how to remedy the error.
As far as I’m concerned, I’ve entered a valid date.
The difference between a backslash and forward slash is the computer’s problem, not mine.
What would a polite, well-meaning butler-like computer do in this situation?
Anyway, I managed to find and fix the ‘error’.
I put in the date, as requested, in the right format.
I don’t have a picture of the site complaining that I entered a valid date, but neglected to say what TIME I wanted to travel.
Remember, all I want to know is when the next train is.
This site makes you enter a time, in both hour AND minutes. You have to choose either 00, 15, 30, or 45 minutes.
I enter a time. It’s 3.10, so I enter 3.00, to make sure I get the next train time.
Attempt 3
“Outward travel must not be in the past”.
The computer’s correct, in a computer way of thinking.
Its job is to sell me train tickets, therefore the tickets must be valid, therefore the journey must be in the future.
But what if I wanted to use the site to check when the last train left?
What if I wanted to see what time the train my friend just caught gets in to its destination?
The site would refuse to oblige me.
And you can’t just put “15″ and leave the minutes blank.
You have to put in the minutes, and the minutes must be in the future.
So if it is now 15:01, how do I find out about the 15:14 train? I can’t.
If I put in 15:00, it will tell me that the time I travel cannot be in the past.
If I put in 15:15 (the nearest other option), it will only retrieve details of trains setting off AFTER 15:15.
In summary
This is a site that behaves like a computer, not like a human being, never mind a friend or a faithful butler.
When there’s a problem, it fails to anticipate what I mean – it can’t think like a person (hasn’t been programmed to).
It would be easy to assume that I always want the next train times, unless I specify otherwise, wouldn’t it?
When there’s a problem, this site tells me, and then leaves me to work out exactly WHAT went wrong, and exactly HOW to remedy it.
Very often, the ways to make a web site help users succeed are simple, quick, and cheap to implement.
If Thetrainline made a few small changes, they would please more people, and they would easily recoup their costs.
