Yclick.it - A Blog Exploring Persuasive Website Design

Emphasise the Next Step in Your Navigation

Last week we looked at a particular example of how contrast can be used to emphasise particular elements. Today we are going to look at a few more examples that I have come across.

Colour, Underline & Exclamation

desc

Lighthouse is an online service for issue tracking. In their navigation, they have emphasised their ‘Signup’ call to action by putting it in a contrasting colour - dark blue to the rest of the navigation’s white text. They have underlined it in white and they’ve added an exclamation!

Size, Order & Raquo Character

desc

Icebrrg is a tool to help you create and manage internet forms. The
navigation is split in two - normal links above the horizon line and more product focussed ones below. I love the way the iceburg is heading for the horizon line! The latter navigation is given more contrast and larger type. The call to action is emphasised with a raquo character (») on the right.

Order & Exclamation

desc

Expression Engine is a content management system. They are using just an exclamation mark and placement at the end of the list to emphasise their ‘Buy Now’ call to action. There’s an in-depth article on its redesign by web designer Jesse Bennett-Chamberlain if you’re interested.

Testing with Google Website Optimizer

All four of the examples above use very simple changes to emphasise the call to action: change of colour, exclamation characters or the addition of the raquo character. These are the sort of changes that can be tested in Google’s new Website Optimizer. This new tool allows you to easily test how variations in page elements affect your conversion rate. We’re looking forward to getting our teeth into it over the next few weeks.

Grok Dot Com have some excellent material to get you started with the Optimizer »

(Thanks to Tim for the Lighthouse link…)

Post Information

Written by Thomas Holmes and posted on Friday, 6th April, 2007.

Categories

Technorati Tags

Bookmark this article

 digg:Emphasise the Next Step in Your Navigation  del.icio.us:Emphasise the Next Step in Your Navigation  reddit:Emphasise the Next Step in Your Navigation  blogmarks:Emphasise the Next Step in Your Navigation  Y!:Emphasise the Next Step in Your Navigation  magnolia:Emphasise the Next Step in Your Navigation

Leave a Comment

(required)

(required)