What is the best approach for showing a button hierarchy when there are multiple buttons?

Question

I am working on the UX/UI for a large web application. My question is regarding the button hierarchy. I have done a bunch of research but can't find any good UI examples that deal with this issue.

As you can see from the example above I have a ‘Primary’ CTA and two ‘Secondary’ CTA’s. There is also a ‘Refresh’ icon so that fresh data is pulled in before any action is taken (the refresh will disappear once old system is retired).

I did come across this article which has some good suggestions (http://uxmovement.com/buttons/visual-weight-of-primary-and-secondary-action-buttons/).

I had previously decided to not use a hyperlink for one of these CTA’s as users associate them as taking you somewhere else and not performing an action. They propose that you can use a hyperlink if the action is opposite to the Primary CTA.

The button size is dictated by the baseline grid and tap target size. The bar I am using appears at the top and bottom of all forms throughout the application.

I have designed the modal windows, which have the Primary CTA on the left and secondary on the right.

So, the question is: How do you best handle having multiple CTA’s that are equal in hierarchy? Where should the primary sit in the order.

Is it ok to rely on users clicking the ‘Back’ button in browser if they want to cancel (move away from form)?

Has anyone seen a good example where there are multiple CTA’s in a row?

Answer 1

Here is an example from the Mac OS X user interface that shows a very common button hierarchy that has been the same since 1984 or maybe earlier if it was used on the Lisa. A document has been created but not saved, and then the user has closed the document.

The productive action button “Save” — which is also the default action — is on the right because that implies going forward in left-to-right languages and because it is the last thing you read in the dialog box when reading left-to-right. (In other words, it is at the end of the “paragraph.”) The Cancel button is to the left of the productive action button because it implies going backwards. The destructive action button “Don’t Save” is off by itself because it is meant to be rarely used and only after some consideration by the user.

When I look at your buttons, I want “Complete” to be at right because that would be the final thing I read if I’m reading your interface left-to-right. If I’m going to tap a “Complete” button, I expect it to be the very last thing I do in your interface. I should read the other options, then decide I don’t want those options before tapping “Complete.”

So rather than trying to sort the buttons by hierarchy, you can sort them by readability. Sort them in the order the user should read them.

Answer 2

This is a question that affects the visual design in more ways than one, and probably one that needs to involve other people in the conversation as I'll explain.

When there are branding guidelines in place, it is important for the visual design of the application to adopt or extend those guidelines so you can maintain consistency with brand identity. In this instance, if you have multiple CTA that are equal in hierarchy you might be sacrificing the impact or highlight of a primary palette color. Therefore, you may still need to come up with a secondary action, which might not necessarily be something that needs to be tied to the branding.

When there are digital design guidelines in place, it is important for the look & feel of the application to follow those guidelines so you can maintain consistency of presentation of the content as well as the interactions. In this instance, there may be a colour palette or style for the default selection and another colour for ones with equal hierarchy. Alternatively, you may decide to turn some actions into secondary actions (and tertiary actions etc.). Because this may have impact on the branding and visual design guidelines, you should consult the owners of the guidelines on changes.

When you follow examples you need to actually understand the rationale behind the design decisions, otherwise you may not apply them correctly and consistently for your application designs.

Answer 3

I've had to define CTA buttons versus Primary Action buttons etc in the past and normally I try to think about it based on the primary function of the business i.e. CTAs might drive content or revenue whereas a primary action might be key users actions outside that scope.

Here is an example from a recent project I worked on that might help to explain what I mean (the images are just screen-grabs so may contain some unnecessary headings).

CTA (Call to action):

For user actions that, directly or as part of a flow, drive revenue or content to the site e.g. ‘Upload data’ or ‘Sign up’.

Primary Action:

Primary buttons are main tasks you’d perform but they don’t drive content or revenue e.g. ‘Export data’ or they are the primary action at the end of a form or page e.g. ‘Save’ or ‘Update Account’.

Secondary Action:

Secondary actions are used for other controls within screens e.g. ‘Help’, ‘Settings’ etc. These are not the most important or primary actions in a process or page (i.e. they aren't required to satisfy the primary function of the page) but they are controls/actions and they are typically non-destructive (don’t delete or remove content or end a process).

Tertiary Action:

Tertiary Actions will usually involve destructive or negative/against the flow actions e.g. ‘Cancel’ or ‘Delete Account’. Depending on the severity of the action they should involve a confirmation step before completion e.g. Delete Account > Are you sure? > YES/NO.

Note: Some of the copy here is very specific to the project itself and naturally you should determine criteria on a case-by-case basis, but hopefully this example illustrates one way of defining button hierarchy