Tag Archives: web forms

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

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