header thumbnail image

A Guide To Primary & Secondary Action Buttons

June 7, 2019 - Stephan Salt

Website or app forms including dialogue boxes (pop-ups/lightboxes) usually have several options to choose from right?

In most cases, users will see two options and hopefully one of these options will stand out as a ‘primary action’. Normally, this is the action that the user will be tasked to continue or complete a task, whereas the other less utilised action would be the secondary task – allowing the user to either go back or cancel what they are doing

Basic best practice requires knowing how to use the right button to increase conversion rate. In this blog, we will outline how to maximise Call to Action (CTA) buttons and answer the most common questions that designers have, for example, ‘Which button should come first – REGISTER or CANCEL.’

Preventing Form Action Errors

You should try to eliminate errors as much as possible. Users can accidentally select the wrong option.

Here are a few ways to prevent such errors.

Use Visual Weights

Make clear and distinctive differences between options. The button with the strongest visual weight will get more of your users’ attention whereas the one with the lesser value will be less clicked/pushed but still has value.

Visual Weight Example CTA Buttons

Here you are able to see two examples of two primary buttons together and an example of a primary button next to a secondary button that has visual distinctions.

Use Clear and Distinct Labelling

A good dialogue box isn’t just about asking the user to choose which actions they want to perform, it’s also about making the right decision as clear as possible. This practice is very important to increase conversion rates. An explicit label will serve as a guide to the user to make a more distinct choice and give them more confidence in selection.

It’s often easier and better from a user’s perspective to name a button. Use explanations on buttons rather than generic labels such as “OK” or “YES”. Language is a player in this too. Using the right verbs and tense will make the buttons make more sense. This will keep the page clean and allow the user to easily identify their path.

Below is a pop-up window or lightbox (they have so many names – can’t keep up), of what not to do;

Distinct Labeling CTA Buttons Fifteen

Another example of what not to do can be seen in the first pop up box example. The dismissive action text “NO” answers the question but this doesn’t really suggest to the user what will actually happen afterwards. Best practice would suggest that a “CANCEL” and “DISCARD” would be better paired with each other in this instance.

The word Discard clearly indicates the outcome of the decision the user has made or will make.

Discard Example CTA Buttons Fifteen

Positive Primary Call to Actions

As said in my previous blog 5 ways to increase web form conversion, the primary call to action needs to be one of the most prominent things on the page. If you having a validation process, make sure that this call to action is strong on the page even if it’s inactive. The secondary action should have the weakest visual weight because reducing the visual prominence and the risk of accidents.

Below is how Apple OS shows the user how a primary call to action has visual prominence rather than its secondary action.

Positive Primary CTA Example Fifteen

Negative Primary Call to Actions

Giving a button which stands for an irreversible action, such as ‘Replace’ or ‘Delete’  more weighting, can be dangerous. Users often make decisions in a hurry and can accidentally follow the strongest weighting.  You can avoid this by adding more weight to the less permanent option. For example, if the user wants to replace or delete a file a message can pop up allowing the user to consider the action without mistake due to the primary call to action being a lower visual weighting than the secondary call to action.

Negative Primary CTA Button Fifteen

When describing a button as ‘Delete’ or ‘Erase’, the actions required here would need more attention. Something that we’ve all have done is delete something accidentally and found that you couldn’t recover it, which is often the case when the UX/UI isn’t right. Many users do not read the confirmation pop up box/dialogue box and just push the button (in most cases users just scan over the text and choose the one that is most prominent).

From my experience what you need to do is provide a single and very obvious confirmation action (a little more descriptive) where the user can then take the actions without disrupting the accessibility. You can easily do this with a simple colour change too.

Below, LinkedIn is a prime example of ‘What is best practice’. They use a descriptive piece of copy at the top to make the user aware of what is to come along with a negative primary call to action which is clear and precise.

Confirm Negative CTA Button Example Fifteen

Other Forms of Buttons

Disabled Buttons

A disabled button or as I like to call it ‘inactive’ button is quite useful when it comes to letting the user know that the action is possible but not quite ready. This allows the user to know that the call to action is available but at the moment it’s got no context. It allows the user to know they have options.

Disabled CTA Button Example Fifteen

The Discussion is it ‘OK’, ’Cancel’ or ‘Cancel’, ’OK’?

Recently I had a small debate with a colleague about which way round should we display a primary and secondary call to actions should be. The ‘OK’/’Cancel’ button debate is very popular among designers. I have read loads of studies and articles and it actually seems like there isn’t a significant difference in performance just preference. Left to right, right to left, it’s all down to what you prefer.

No matter the conventions, this is one of the most important things you will need to consider when you’re designing a pop-up box. Windows UX differs completely to the Apple UI and Google Guidelines when it comes to the way that buttons are displayed.

The Microsoft guidelines follow an order that would make some designers wince. The order is ‘OK’, ‘No’, ‘Cancel’, which means that ‘Cancel’ is on the right of the ‘OK’ call to action.

In the guidelines of Apple, it says that “A button that initiates an action is furthest to the right. The Cancel button is to the left of this button.” So with that in mind, the user will see that the Cancel call to action button is to the left or the OK button.

Dialogue box example CTA Button Fifteen

One company that really does get me thinking about the right or wrong way is Google. Within their guidelines, it says “The dismissive action of dialogue is always on the left. Dismissive actions return to the user to the previous state. The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialogue.”

Google states it in plain writing whereas the others say it’s intended.

With more people than ever before using Apple and Google combined I feel that the norm is having the Primary call to action button on the right rather than on the left.

However, if you’re designing for one of these platforms then I would suggest that you stick within their guidelines. Regardless of conventions, applying consistent designs across these platforms will allow the user to follow best practice expectations, which in turn would save people time and improves conversions.

If you move away from the standard, you’ll easily cost a user several minutes as they overlook the message and can even misuse the call to action altogether.

Just a brief takeaway:

In most cases, understanding and following the guidance of the platform you’re working with, and knowing the right things to figure out will make for proper directional decisions.

In the case of designing for a web-based app, try and think about which placement will truly work best for your user types. Test the hell out of it and know where your users are dropping off (if any that is).

So to conclude:

Buttons, Call to Actions or CTAs are meant to direct users further down the funnel. That’s why button UX design should always be about recognition and clarity. Don’t make a song and dance about them. Allow the user to make the right decisions quickly. Test, test and test again and make sure that you’re designing the right button in the right place for the right set of users to the right guidelines.

The button plays a crucial role in this conversation and conversion rates.

At Fifteen, we are very familiar with primary and secondary call to actions, and have spent years designing killer websites for our clients. If you need a website designed that will convert

Back to Blog

Let's start something special

Get in touch with Fifteen today to start your project.

Get In Touch
Footer Call to Action