5

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.

form1

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?

  • I like this question and voted it up. However, I'm not sure those CTAs are of equal hierarchy. Furthermore, it's quite obvious not even you consider it as equal. But of course, there might be more that we're not aware of, so you might want to expand on WHY are these CTA of equal hierarchy level – Devin Mar 17 '16 at 23:45
  • Thanks @Devin. I spoke with the stakeholders again and you are correct. The 'Cancel Activity' CTA should be more prominent than 'Not required'. The 'Cancel Activity' removes the 'Activity' from your list. So it might be sensible to change the button name to 'Remove activity' or 'Delete activity. – nikw Mar 18 '16 at 0:37
  • Your other question about relying on users to use the back button belongs to another question and you should – Michael Lai Mar 18 '16 at 0:45
2

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.

enter image description here

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.

  • This is a nice answer as well. Playing devil's advocate, I can tell you Microsoft uses the opposite approach, therefore it all comes down to design guidelines, just like Michael correctly states – Devin Mar 18 '16 at 1:30
  • Thanks @Simon White. I have taken onboard your suggestion and now have the primary CTA on the right. – nikw Mar 23 '16 at 22:53
1

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.

  • Very nice answer – Devin Mar 18 '16 at 1:29
  • @Devin Thanks. When you have to cross swords with the marketing and comms team as often as I had to in the past (note that I have seldom won those battles), you learn to design so that the battles can be fought on more favourable fronts :D – Michael Lai Mar 18 '16 at 2:56
  • I fight those fights every day and have been doing it for almost 20 years, so I know what you're talking about ;) – Devin Mar 18 '16 at 15:13
  • Great answer. The colour has been dictated by the digital style guide. After a couple of rounds with the stakeholders all 'Tertiary' actions have been placed together in a dropdown titled 'More actions'. This has allowed 'Save' to be a secondary CTA and 'Complete' the primary CTA in a fixed location on all forms across the site. – nikw Mar 23 '16 at 23:00
  • @nikw It's great to hear about design decisions that are derived from a consultative manner where all the stakeholders are satisfied with the outcome. Of course, this will also have implications for future design patterns and decisions, but hopefully you can use the same approach to tackle similar design challenges. – Michael Lai Mar 23 '16 at 23:56
1

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

enter image description here

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

enter image description here

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

enter image description here

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.

enter image description here

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.