Tag Archives: ux

Inline Validation Implemented Badly in Web Forms (Wizard Clear Advantage)

Web forms have come a long way over the last few years, from bland and lifeless labels with input fields barely better than paper forms, to interactive and beautifully designed experiences like huffduffer.  New technologies like inline validation have really helped web forms become far more intuitive and easier to use, providing timely and helpful feedback to users as they move through a form.

Inline validation, when used correctly provides immediate feedback next to the input field showing that the field has been filled out correctly or incorrectly, without the need to press submit and waiting for the error message.  The example below is from audible, having finished typing in the username field and tabbing to the password field, I was informed that my username had already been taken allowing me to immediately select an alternative.  This saves me time and prevents me getting to the end of the form, pressing submit and only then finding out the username was already taken.

Audible do not show the inline validation until after tabbing out of the field

Audible do not show the inline validation until after tabbing out of the field

I am about to go overseas and signed up for a new credit card that provided zero fees when using it abroad, the Wizard Clear Advantage card.  The sign up form used inline validation to verify my password.  However, as soon as I tabbed into the field I was informed that my password “was too short”.  Not surprising seeing as I hadn’t started typing yet!

wizard clear advantage web form implements inline validation badly

wizard clear advantage web form implements inline validation badly

Using new technologies to help improve the user experience on web forms is essential.  However, you have to be very careful to ensure that the implementation is spot on and does not annoy and confuse users with bad and untimely error messages.

You can follow me on twitter

Leave a comment

Filed under User Experience Design

BBC improves interaction design with subtle visual cues

The BBC have been gradually upgrading the design and visual interaction of their pages over the last 12 months.  The latest upgrade is very subtle but is a great improvement to the design and usability of the pages.

Within a deep page of the BBC site if you want to get to the homepage or a high level category, you can access these using the horizontal navigation bar pictured at the top of the page in black below.


BBC inner page

BBC navigation


However, when you hover over the categories the tab is highlighted in grey to visually indicate you can click it.  This is very subtle but a really nice improvement to the design and interaction on the site.


BBC Navigation On Hover

BBC Navigation On Hover


Likewise, on the homepage you have been able to personalise the news modules that appear to suit your preferences for some time.  However, unless you hovered over the header of a particular module (Sport for example) and noticed the 4 way arrow cursor, you would never really know about this great feature.


BBC Homepage

BBC Homepage with news modules


To help draw attention to this, the BBC have added a highlighted box around the area on hover.  This helps draw your attention to it as you scroll around the page and will give you a better visual cue that it can be dragged and dropped to a different position.  Again subtle, but a really big improvement to help aid the interaction and draw attention to the feature.


BBC Homepage On Hover

Visual cues on hover help draw attention to the customisable sections of the BBC homepage



Subtle design cues combined with an excellent implementation of the interaction design can really help deliver an exceptional user experience.

You should follow me on twitter here

Leave a comment

Filed under User Experience Design

Confirmation Pages – “Am I done yet?”


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.


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

If you only know 2 things about how to sell UX….

What are the most important things to know about sales and how to sell UX to your manager?  This is a very tricky question as believe it or not, sales is an extremely complex profession, which takes many years to truly master.  However, if you are a UX professional you probably don’t have years to find your feet in sales and want to know easy to master techniques to help pitch your UX skills to your manager.   So, I have attempted to break it down  into what I believe are the 2 most important things to remember when trying to pitch UX to your manager.

Ask questions

Selling is as much about asking questions as it is about answering them.  To truly understand what the problems being faced by your manager and the business are, you have to ask them questions.  And don’t let them get away with superficial answers.  Really listen to their answers and then ask follow-up questions to get to the bottom of the problem.  Only then will you really be able to frame your solution to the real problems facing your manager and the business.  Asking questions and getting to the root of the problem, is giving you invaluable ammunition to use when you actually go into pitch for budget for UX work.  Finding out the real problems gives you important information you can use to help leverage and convince your manager you can solve them.  You will have a far stronger pitch if you can say; “According to our Sales Director, the lack of sales enquiries coming through the website is causing a 20% drop in revenues per month”.  Use these problems you have discovered to your advantage, as ammunition to help give weight to the solutions you can provide with your UX skills.

Don’t try to sell a feature

This is the biggest mistake anyone (Especially rookie sales reps) make when starting out in their sales career.  They always try to sell a feature to a customer.  “We added inline help messages to the web form”.  You may love your new inline help messages, but the customer or your manager does not care as this is merely a feature and means absolutely nothing to them.  However, if you finish that sentence with “which has or will result in more people completing our check out process and more online orders being processed”.  The customer or your manager suddenly finds this very compelling as that feature has been transformed into a clear benefit to the business.  Create a simple table with the feature you are proposing on the left and the actual benefit to the business on the right.  Then when you are creating your pitch make sure you include the benefit and don’t try to sell a feature.

You can follow me on twitter here.

More resources:

How UX can get the budget they want

Pitching UX for the first time

Selling what we do (from Johnny Holland)

Leave a comment

Filed under Pitching UX

Pitching UX for the first time


Confidently pitching the importance of UX to your manager for the first time can definitely be tricky.  Just like approaching strangers in a bar, it can be nerve wracking, exciting, fearful, you may have read lots of books on one liners and can mostly come across like you know what you are doing, but its always an unknown experience.  However, when pitching you can practice your pitch, refine it using colleagues and friends, without the fear of rejection to really make sure you create an impact when you pitch for the first time.

Practice the art of seduction

On a first date, is your partner going to be more impressed if you never stop talking about yourself, or seem interested in them, ask questions and actually listen?  Pitching and sales is very much the same.  The image of sales people is often tarnished by the rude, brash, sales rep who just won’t stop talking about their product.  This is not good sales practice and a good sales person will always ask questions about your business before trying to sell you a product to fix a problem they probably have no idea about.

Prior to your pitch you have to ask questions of your manager, those who report to your manager and anyone else relevant in your organisation who will be at the pitch (customer service are usually a great starting point as they bear the brunt of poor website design).  Find out what the key problems facing the business are? Are sales up, down, or flat?  Does your manager have a problem with the current website?  If so what is it and why?  Is he aware that “x” is currently causing a problem?  You have to then actively listen, which is very different to listening.  When you actively listen you ask questions depending on the response given.  So if you hear that sales are flat, you should ask if any possible causes have been identified.  If they have, what are they?  Leads have dipped from the website?  The GFC causing problems in the marketplace?  A competitor has recently launched a better product?  By actively listening and asking pertinent questions you will usually be able to get to a root cause of the problem, which you will hopefully be able to fix by improving the design of your website.

Everyone needs a good wingman/woman

Once you have a platform to work from, start meeting with key members who will be at your pitch informally, take them for a coffee.  For example, if the customer service manager has said that they have seen an increase in complaints directly due to a problem with the website, resulting in extra overtime, which has subsequently increased costs, find out what has caused that issue, engage them and then leave them in no uncertain terms that the solution you are proposing will help ease these problems.

Have sales leads dipped on the website?  If so, speak to the sales director, find out what impact this has had on sales?  Do leads via the website have a higher conversion rate than cold calling?  If you could deliver “x” % more leads, what affect would that have on revenue?  Whatever the problem is, find an angle where you can make a difference, but get key people on your side prior to the meeting.  You need to have allies in the room, just like you need a good wingman/woman when approaching a pair of strangers in a bar.

Flirting – practice makes perfect

Once you understand the problems and have worked out a good angle toapproach the pitch from, practice in front of the mirror, to your friends, colleagues, wife, husband, and anyone who will listen.  Good sales people and presenters are not naturally born with the gift of how to pitch and present.  It takes practice, much like refining your flirting techniques over time.  You know when a bad one liner doesn’t work, so you wouldn’ t use it again, right?  So whilst practising your presentation flow, if something doesn’t work or feel right, you know not to use it during your pitch.  When the time comes to actually pitch, it should not be the first time you have gone through the material.  It should be the 5th time, at least.  This isn’t to make you word perfect, but so that you know the material and understand the flow of the presentation.  Read Scott Berkuns book, confessions of a public speaker to find out more about how to prepare for public speaking and pitching.

Getting to first base

Once you have worked out an angle to approach the pitch from having questioned key members of the team,  now you need to work out a way to deliver your message and solution in a compelling manner that will really hit the mark with your manager.  This often does not involve pulling together a big pitch.  Sometimes it can be a 5 minute hard hitting off the cuff chat, check out my posts on pitching UX creatively and getting sign off in 60 seconds to find out more.  You have to decide what will work best within your organisation.

If it’s a full on pitch your boss wants though, you must follow some tried and true sales techniques when structuring your pitch:

  • Set the scene – show the problems currently afflicting your site (From your questioning of managers).
  • Show the impact of those problems on the business in real terms.  I.e. less sales leads are coming in therefore revenue is down X %.  Break it down for your manager.
  • Get positive reinforcement abd buy in from your allies in the crowd that the above are true.  Don’t be afraid to ask them to confirm the impact and potential upside.
  • Once you have everyone in agreement on the problems, confidently tell them you can fix these in X weeks, with a cost of X.  The solution will drive an estimated X % more sales leads, therefore X more in real revenue.  Again, break it down in real terms for your manager.
  • Keep it simple, don’t use jargon or big words for the sake of it.  ‘Inline contextual help” means nothing to your manager and will only alienate him and make him feel stupid.  Keep it simple and to the point, focus on the real benefits of your solution to the business, not the features you will apply to get there.

You can follow me on twitter

1 Comment

Filed under Pitching UX

Getting sign off on a UX project in less than 60 seconds


Too often CEO’s or senior managers are too busy, or don’t see value in attending hours long usability sessions.  There are many tips and tricks to get them there, providing food, drinks, bribery, but often times it just isn’t feasible.  The truth is you don’t necessarily need them to be at these sessions to make them truly appreciate the value of your work.  Instead you can still create a high impact impression by extracting the most valuable, high impact clips from your usability sessions and instantly proving the major problems of your website.

Usability testing sessions

Watching anyone either continually fail or continually ease through a usability testing session can become a little tedious.  Watching multiple users can be even more tedious and time-consuming for even the most seasoned UX professional, let alone a senior manager who doesn’t really understand the process.  The danger could be that after one session or an hour with not much happening they decide to leave the recording session altogether with a poor impression of the day.  So why do we continue to try to make our managers attend long sessions that have the potential to hinder and not help our cause to get our managers attention?  If a manager sits in a session where the user has performed well and leaves, what will be their honest impression of the final bill for the day / weeks / months worth of work?  Will they understand the true ROI of the session? Perhaps not, and perhaps your chance of getting further budget has been fatally harmed.

Create impact

Many user testing participants have issues at the same section of a session.  Usually you will get at least one of these participants who will completely melt down at the same part of the session.  These moments can often be punctuated with the odd expletive, “sh*t, f*ck”, or a classic one liner like “Are you sure your website is not broken?”, or if you are lucky both “Your website is f*cked cos that is correct address and postcode combination”.  You absolutely have to use these moments to your advantage to create a high impact presentation in under 5 minutes.

Pick apart the video logs of your tests and find the moment where a user completely fails a task, or utters some kind of rant about your website and use your editing software to condense that moment into a short clip, between 5 and 60 seconds.

Once you have done this, put the clip into a 3 page slide deck, with the clip being on the second page.  On the first page use a few small bullet points to set the scene to lead into the clip you have made.  Then do whatever you have to do to get 5 minutes of your manager’s time.  I do not mean set a meeting, but try to catch them when they are in their office and have the deck ready to go on a USB stick.  Tell them you only want 5 minutes and then you will leave them alone, but that what you want to show them has serious ramifications for the business.

On slide 3 break down the true impact this problem is having to the business in real terms.  Use language and terms your manager will understand and emphasise the true potential cost that leaving this problem is having to the business.  Check out my post on how UX can get the budget they want, for more help on this.

Use this wisely

It is important to use this technique wisely and don’t choose clips where you have not seen a pattern of users having problems on the same section of the test.  You have to stay true to your principals and do not want to be selling a problem to your manager which is a complete edge case.  However, if you do see a pattern, use the worst clips to help you get sign off for projects in less than 60 seconds and create high impact presentations that will make your manager sit up and listen to the true value you can give to the business.

You can follow me on twitter

Update: This method can also work well if you do not have budget for a project, but already know there is a major problem on the site.  Go guerilla, test 5 users out of hours without working up a plan, or methodology, just in a quick session and then use the footage to help you get sign off for the project.


Filed under Pitching UX

Pitching UX creatively


Sometimes it isn’t necessary to put together full presentations, pitches or mock up examples of what you propose to change on a website to get sign off to a project.  By thinking a little laterally you can affect your managers opinion using simple props and visuals that can create a big impact in a matter of seconds.

An example

Having tried for a long time to convince my manager to allow me to standardise all of our web link interactions (We had 5 different styles…) so they were consistently underlined, using some of the best research and most respected websites as examples, I was at my wits end.  I was staring idly at a black and white print out of one of our web pages, when I happened on my last throw of the dice.

I took a black and white print out of our major competitor (Who underlined links) and a print out of our website, which had links with no underlines.  I walked into my managers office unannounced, placed our competitors print out in front of him and asked a simple question; “If you wanted to click somewhere on this screen, where would you click?”  After looking at me a little vaguely, and with a little prompting, he immediately pointed out the underlined links, one by one.  I asked him why, his response, “They are underlined”.  I placed the print out of our web page in front of him and asked the same question, he didn’t even answer, just looked at me, laughed and said “Ok, I get it, you made your point, change the links I wouldn’t have a clue where to click on our page”.

Get creative

Effectively pitching and communicating your ideas is a key skill of any UX professional.  Communicating efficiently doesn’t always have to mean putting together a long, slick presentation or comps to effectively convey your ideas.  Sometimes it can be as simple as 2 pieces of paper, but can really carry a punch.  If you are struggling to get your ideas across, take a step back and try to think of the problem from another angle and come up with a simple way of getting your message across.


Filed under Pitching UX