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 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.
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
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.
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) .
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.
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