The button with the highest priority is the easiest to identify. It's the action that takes users directly to their goal. If you're unsure of your button's priority, consider which action moves users forward toward their goal and which action moves them back.
In the example, the “Checkout” button has the highest priority because it moves users toward their goal the fastest. It should have the most visual weight and the highest contrast. But it’s not clear which action takes priority: “View Cart” or “Continue Shopping.”
The “View Cart” action takes users to view the items effective list of mobile numbers list they added to their cart, which then takes them to checkout. The “Continue Shopping” action takes users back to product pages further away from the checkout process.
According to this analysis, “View Cart” has a medium priority and “Continue Shopping” has a low priority. The “View Cart” button deserves more visual weight and higher color contrast than the “Continue Shopping” button.
By understanding the user's goal and examining how each action moves users toward it, you can set button priority.
Color is an effective way to indicate high-priority buttons because it stands out from black text and grabs the user's attention. Don't use the same color on buttons as on text. It weakens the button's visual cue and makes it harder to notice.
Importantly, don't use the exact same color for two different buttons or users won't know which one has higher priority. And don't use different colors for each one or you'll confuse users and make them wonder what the colors mean.
Use a different color with the same hue for both buttons, but vary the saturation and brightness for the medium priority button. This makes the medium priority button have a lighter visual weight than the high priority button, so they don't compete visually.
To further improve contrast, you can reverse the polarity of the display. Use light text on a dark background for the primary button and dark on light for the secondary button. This gives the high-priority action a brighter text label and the best possible contrast.
Font weight on buttons
Using the same boldface on each text label gives them equal emphasis. It's best to emphasize each button text label with different font weights to indicate priority when users read them.
Vary the font weights of the text labels so that the high priority button is the boldest. Then make the medium priority button less bold and the low priority button less bold. You'll need to choose a font that offers different font weights to do this.
In the example, the “Checkout” label is bolder and brighter than the rest. The “View Cart” label is in semi-bold, and the “Keep Shopping” label is in medium. As a result, the text labels reflect the visual weight of each action.
Put an icon on the high priority button
The last technique is the icing on the cake that will make your app buttons accessible for colorblind users. Colorblind users will not be able to tell the difference between the visual weight of the buttons. They need something more than just color to serve as a visual cue.
Placing an icon on the high-priority button adds extra emphasis to differentiate it. The icon reinforces the button's signal and ensures that it will attract the most attention. Research on eye tracking has shown that visual elements get more eye fixations than text.
Conclusion
Analyzing how to represent CTA actions in your APP taking into account these 5 techniques will help you evaluate whether the user experience is in line with your conversion expectations. Use these techniques to improve the UX of the CTAs in your mobile APP, you will see a visual difference and, more importantly, a difference in usability.