I thought I would continue the Call-to-Action theme, but this week we’re gonna talk about buttons. Not links, not menus… buttons. Two of them.
On every site we will have to design buttons to bring attention to important actions like “Submit” or “Next” or “Buy”. These types of actions are called Primary Actions and they need to be obvious and easy.
But there is another type of action which is often forgotten: Secondary Actions. Secondary Actions are things like “Cancel”, “No”, or “Skip”. And they happen a lot.
What is the difference, you say?
Primary Actions are things we want the user to do. Secondary actions are things we don’t want the user to do, but are necessary sometimes.
The key message in this week’s ProTip is that we need to design one button for each type of action. They will be similar, but not the same. Two buttons, then stop. You don’t need any more.
Primary Action buttons should be high-contrast compared to the background, and usually will have a color. A white background could have dark red buttons. A black background could have bright yellow buttons. Colors like orange and red are good in a lot of situations, and in A/B testing red buttons often win for no other reason than the high visibility of the color.
Secondary Action buttons should be the same style of button, but should be low-contrast instead. On a white background you could choose a baby blue or a “shiny white” button. On a black background you could go with dark brown, dark gray, or “shiny black”. The color isn’t as important as the contrast. In some cases you will even see Secondary Actions as a transparent button or just a link instead (like in our Drinkspiration iPad app).
The objective is to make users see the Primary Action first. They will look no further if they want to continue. Believe it or not, more people will do an unwanted action if they see it first. Users are awesome like that.
In eye-tracking and usability studies users actually complete forms slower when you make two different buttons, but they rate the form higher in “user satisfaction”. This is because it makes them pause to decide what they want to click instead of just automatically clicking (and potentially making mistakes).
Don’t rely on the user to automatically pick what you want them to pick. Show them what to pick.
And that is how to design two buttons, and only two buttons for your site. Use them everywhere, use them consistently, and use them with pride. :)
For more on designing “perfect buttons” this was an interesting article: http://www.pitstopmedia.com/sem/perfect-checkout-button.
****
If you liked that ProTip, try: ProTip Tuesday #3: What is a Landing Page?