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?