(Translation) How the contrasting color of the button guides the user's actions

   Have you ever clicked a button by mistake?When faced with modal windows, users can easily click the wrong button if not properly guided.Many modal windows push the user to make a decision without making the distinction between different actions clear.
   Significantly different button colors guide the user to the appropriate action.The lack of clear guidance not only confuses users, delays operation time, but may also lead to user misoperation.

Positive, neutral, and negative actions

  Each button will perform the following three types of actions:
  1. Positive action: change message, send message or add message;
  2. Neutral action: noMake any changes or let the user return to the screen (such as a cancel button);
  3. Negative actions: delete messages, reset messages, or block messages.
  modal windows are usually combined with the above types of operations.In order for users to be able to distinguish between different actions, the color of the button should reflect what it does.

Front action should have the highest contrasting color

  Modal windows are most commonly used for frontal operations.Give the highest contrast color for positive actions, and set the neutral action near it or the lowest contrast color for negative actions, so that users know what action to perform to complete the task.

   For the highest color contrast, set the background color of the front action buttons to a cool color and the text to white.Cool colors such as blue, green, and purple are soothing to the eyes and sit further back in the visual space.White text is easier to navigate and the content stands out more than black text.
   Neutral action or negative action buttons near positive action buttons should not use a background color, otherwise the color contrast will be too similar.Instead, neutral-action or negative-action buttons should only have borders so the button blends in with the background and doesn't distract the user.

When a negative action has the highest contrasting color

   Negative action buttons should not use a higher contrasting color than positive action buttons.Positive operation buttons are used more frequently and safer, and users cannot mistake negative operations as positive ones.But if there are only negative and neutral action buttons in the modal window, the negative action should have the highest contrasting color.

   In this case, the background color of the negative action button should be set to a warm color.Warm colors such as red, orange, and yellow stimulate the eyes and take them forward in the visual space.When users see a negative action button, they know they need to think twice before clicking the button.

Neutral actions should have minimal contrasting colors

   modal windows will not only have neutral actions, but are usually used in conjunction with positive actions or negative actions.Neutral action buttons should have minimal contrasting colors so they don't distract users.

   button is enough to indicate that it is a neutral action without filling the background color so that it does not compete with the positive or negative action buttons for user attention.
   Do not set the border and text of neutral action buttons to light gray, otherwise they will be mistaken for disabled buttons.Neutral action buttons still have to be distinct from the background, making them visible and activatable.

Concluding Remarks

   Positive actions, neutral actions and negative actions can coexist if the colors are contrasted.The more obvious the contrast, the quicker the user can perform the action.Color plays an important role in a user interface, not only in terms of aesthetics, but also in guiding the user to perform an action.

Original address: https://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/