10

I'm currently designing a CRM which includes a lot of forms and modules. I have been struggling to decide the colour rule for the buttons especially having to incorporate branding colour into the palette.

enter image description here

Current Scenario

Context: Form to register New Student

Blue

  • Usage: Main button

  • Example: 'Submit' button to submit the form

  • Issue: Blue seems more natural colour for the main button and links so I select it as the main button

Teal (Brand colour)

  • Usage: Secondary button

  • Example: 'Upload student image' & 'Add Subject' button

  • Issue: Since blue stands out more than teal I have selected teal as the secondary button, but the secondary button appears more often than the main button.

White

  • Usage: to pair with the main button
  • Example: 'Save as draft' button

How do I create a rule as to when to use the colours or is it better to just use 2 colours(teal and white)? However, there are many buttons and links in the CRM, so I feel that having 3 colours can help distinguish them better. What are your thoughts?

Improve this question
2
  • 1
    The difference between the two secondary button types has to be learned and should really help users getting around the app, otherwise they become just blue and white buttons that are randomly used. It is a valid option only if you're sure that the extra learning curve pays off. Besides color, give different button types also something else that distinguishes them so everyone can benefit from it.
    – jazZRo
    Dec 9, 2020 at 11:04
  • This is closer to a rant, but I find the whole notion of "primary" and "secondary" actions kind of harmful. Whatever the user is actually trying to do at any given time is their "primary" action. I feel like most of what we call "primary" actions are closer to "finalize" actions, i.e. "submit" finalizes the input, and is given emphasis as a result, "upload image" doesn't finalize any changes, so it's "secondary". I suppose a 3rd option would be "informational" buttons, that don't do anything but bring up more information.
    – Harrison Paine
    Dec 11, 2020 at 15:19

3 Answers 3

Reset to default
28

Don't rely on color to differentiate between hierarchy of action types.

Your current system relies on a single shape, with tone as the differentiating factor. This doesn't account for color blindness, screens with poor color, contrast issues and low resolution.

What you're trying to do is to teach users about the importance levels (or consequences) of actions in the application.

Try using shape as a factor of differentiation. Material design solves this by using 3 types, from high emphasis to low.

enter image description here

Contained: Use this type of button once per view. Creation of a new entity, submitting a form.

Outline: Can be used for sub-tasks: uploading an image, changing a setting.

Text: Can be used for 'learn more' or actions you want to deemphasize.

Improve this answer
2
  • If the Text type is meant for deemphasizing, why do alert dialogs on android generally use the flat button look for their action buttons?
    – yitzih
    Dec 9, 2020 at 20:51
  • 2
    Never mind, its answered on another page Dialogs use text buttons because the absence of a container helps unify the action with the dialog text. Align text buttons to the right edge for left-to-right scripts. material.io/components/buttons#text-button
    – yitzih
    Dec 9, 2020 at 21:02
9

I think you need to decide on just 2 types of buttons here to start with.

  1. A primary button which would be a prominent color
  2. A secondary button which would be a more subtle color

Most UIs would essentially have 1 main action which the primary button would be. Any other action could be a secondary or smaller button.

When choosing colors also consider how this would impact users who have color blindness.

Improve this answer
2
  • 3
    I agree with this answer - the blue and teal are too close together to convey meaningful information about their role to a user, and would probably be hard to distinguish for people with blue/green colorblindness. I'd use teal for primary since it's your brand color, and white for secondary.
    – Izquierdo
    Dec 9, 2020 at 15:50
  • There's of course the exception of buttons which need to present some form of danger (usually delete, but in some cases actions that will have consequences like publishing, triggering a process, a payment...), which are traditionally red.
    – jcaron
    Dec 11, 2020 at 13:22
1

Building on @Mike M's answer, who added shape in order to differentiate better than color alone, positioning obviously also matters.

Your Upload student image button could very well be positioned next to a default avatar, positioned within the form. Visit your own profile on a social media platform such as Instagram to see this in action.

Similarly, Add subject could be positioned in the education, or subject section.

This way, users don't even have to read the label, see the color or shape of the button. The primary button is at the bottom, to the right. Always. (*For left-to-right languages.)

If you want to change something like a profile image or subject, you have to go to that section to see the current values anyway, so users will definitely see buttons there. Use non-obstructive buttons, like the Text one Mike posted from Material design.

Improve this answer

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