Category Archives: User Experience Design

Great book: The Myths of Innovation (Now Updated)

I am currently away taking some time out traveling, which has given me some great time to read.  A great book, The Myths of Innovation which I read some time ago, is now out in paperback with 4 new chapters – It’s gotten fantastic reviews for being fun, inspiring and a great read.  You have to check it out if you work with ideas or hope to someday.

 

Myths of Innovation Scott Berkun

Myths of Innovation with 4 new chapters

 

 

You can get 2 free chapters here

Or just go and buy the whole thing here, you won´t regret it!

You can follow me on twitter.

1 Comment

Filed under User Experience Design

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

 

Conclusion

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

Primary Actions Its Not Hard!

Summary

When designing a web form or landing page, there are usually different paths a user can take through the form or from the landing page.  Usually the typical path a user wants to achieve through a form is completion, so primary actions on these pages are things like “next”, “save” or “continue”.  Secondary actions are things like “Back”.  From a landing page the user probably wants to “Add to cart” or “Buy Now” as the primary action.  Visually distinguishing primary actions to make them obvious should now be common practise thanks to excellent work by Luke Wrobleski in web form design and commonly used design patterns, but why do so many websites continue to get it wrong?

Primary actions on ecommerce sites

I recently saw Paul Robinson, the Marketing and Communications Manager at the ABC present at webtrends.  He talked about some of the AB and multi-variant testing they had undertaken to optimise their landing / product pages on the ABC ecommerce shopping site.  One of the best increases in CTR came from changing the design of the page so that “Buy Now” was the only button on the page.  Other secondary actions, “Add to wishlist” and “Tell a friend”, were turned into links, screenshot below.  This yielded a 10% increase in the click through rate (CTR) on the Buy Now button.  Pretty impressive for such a small change and shows the importance of AB Testing, as well as visually distinguishing the primary action.

ABC Product page call to action

ABC Shop with visually distinguished button as the primary action

As I started to think about my experiences on the web I realised that many sites break this design pattern and make users unnecessarily think about the primary actions on a page.

Don’t make me think!

Compare the above example to my online bank.  When I am submitting a payment this is the screen I am presented with on my iphone and on the standard desktop version.

NAB Online Iphone Banking

Iphone: NAB online banking does not visually distinguish between primary and secondary actions.

Desktop: Primary and secondary actions are visually identical, making it easier to accidentally click the wrong button

Desktop: Primary and secondary actions are visually identical, making it easier to accidentally click the wrong button

Both buttons are identical and I need to read and parse the information before I can confirm which one to click.  I am sure many users have accidentally clicked “Back” or “Cancel” and either been frustrated with their experience, or worse missed payments and been charged a late payment fee if they didn’t realise they had made a mistake.

Gmail is the same, the only indication of the primary action is the bolder text on the button, which I do not think is enough.

gmail primary action not obvious

The primary action of send is not obvious in gmail

It certainly is not hard to visually distinguish between primary and secondary actions using either colour, or by using buttons and text links as the online business directory hotfrog have done below (Note; Author works for Catch who publish HotFrog) .

Hotfrog Add your business primary actions

Visually distinguished primary and secondary actions

I suspect the only reason sites are designed with two identical looking buttons is so they are symmetrical and look visually attractive on the page.  However, it just creates potential problems for users by putting doubt in their mind over which button to click.

Conclusion

Make it obvious and easy for users to know where to go next and don’t make them process unnecessary information.  Remove any ambiguity from your web pages for users by visually distinguishing primary and secondary actions.  It may not only lead to increased CTR on landing pages, but also higher completion rates in web forms and shopping cart processes, as well as happier users.

You should follow me on twitter here

1 Comment

Filed under User Experience Design

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