Tag Archives: feedback loops

Confirmation Pages – “Am I done yet?”

Summary

Giving easy and obvious feedback to users to tell them if a task they have been completing on your site has been completed, is extremely easy by following simple design patterns.  Yet so many websites continue to fail and keep users asking, “am I done yet?”

Design Pattern 1: Use colour

Colours convey strong and obvious meanings without the need to read or even scan copy.  Green conveys go, success, or completed.  Yellow conveys a warning that you may need to check something.  Red, means that something is seriously wrong!

Even though this is quite an obvious convention, some sites insist on breaking it, making users process and parse unnecessary information and question whether or not they have actually completed a task.  Check out the screenshot below from Australia’s most popular ticketing website, ticketek. Having just updated my personal details using a standard web form and hitting save, the page reloaded with a stark red message.  Instinctively I scrolled and scanned the page to see what I had done wrong, as I associated red with an error so didn’t bother reading the copy, I just wanted to find out which part of the form I had done wrong.  It wasn’t until I actually read the message I realised that this was their somehwat deceiving confirmation message.

ticketek confirmation message

Using red makes it visually unclear that the task has been completed successfully

Design Pattern 2: Use an icon

If a picture can say a 1000 words, then so can a well used icon.  If a user has successfully completed a task, a simple tick icon will make it immediately obvious to them.  Similarly, if they have done something wrong, a red cross or yellow triangle warning icon will help draw their attention to any copy around this that they may need to read.

Linkedin does this really well, without even reading the copy I am given excellent visual feedback using icons and colour, about my actions and immediately understand whether or not I need to check the information I have entered.

Linkedin confirmation message

Linkedin uses icons and colour to clearly convey meaning to users

Linkedin error message

Linkedin provides clear visual feedback using colour and icons when something needs checking

Design Pattern 3: Send means send

Don’t add in unnecessary and unexpected steps to work flows, which break obvious conventions.  Once a user has filled out a form and hits send, then unless they have unwittingly not filled out part of the form, the message should send.  This may seem very obvious, but sites still add in confusing and unexpected actions.

This example from the largest home loan lender in the UK, Nationwide is extremely poor and will definitely be causing them problems in their customer service department due to unsent messages and subsequent angry customers.  Within the secure account area of their website, I filled out a contact form and hit send.  A completely new page loaded and I logged out.  I didn’t receive any response to my message for 2 weeks, so followed up with another (very disgruntled) message.  This time when I hit send I read the confirmation page and rather than actually sending my message, the page offered “useful articles which may help answer my query”.  But if they didn’t help then hit “confirm” (Again!!) to actually send the message.

Nationwide Building Society Message

By not following conventions and requiring an additional action to send a message, Nationwide is confusing users.

Offering FAQs and resources to help customers and reduce the volume of emails into customer service is fine.  But this implementation is extremely poor and will only increase the number of annoyed customers whose original message was not actually sent.

Conclusion

Follow simple design patterns and don’t break with obvious conventions when designing your site.  Provide clear and obvious visual  feedback to users on their actions and do not leave them questioning if they are done.

You should follow me on twitter

Leave a comment

Filed under User Experience Design