5

The following colors, generally, mean the following:

  • Positive: Green.
  • Negative: Red. (though negative and positive are reversed in China)
  • Warning: Yellow.
  • Neutral: Gray.

Now, what if I made a website with a red theme, and my primary button color is red. How would I display negative buttons to the user? For example, a delete or no button? I'd think that I might display it in red, with cancel being neutral, but that would confuse them if all the links and primary buttons are in red.

The color scheme I'm using is from http://flatuicolors.com/

Improve this question
1
  • 1
    In app I've worked on, we have primary and secondary buttons. The secondary button (light grey button with orange text) is just the inverse of the primary (orange button with white text). This isn't really an answer to your question, but perhaps this will help your brainstorming.
    – maxathousand
    Jun 21, 2016 at 15:24

2 Answers 2

Reset to default
4

Use a different shade or hue of red/green/yellow/neutral, and use it consistently for your positive/negative/warnings/neutral. Also use iconography along with the colors to enforce the message. For example, use a light red with 1px border along with an "!" icon on all error messages. Ensure that you do not use your primary website color in any messages or UI that is similar to your positive/negative/warnings/neutral UI.

Improve this answer
2

You can also try playing with typography with some pictogram. That might help in this case. I had a similar issue in one of my project and it worked.

Different kind of animations (shake, wobble, rubber band etc.) are also helpful. For example in case of a hard alert, a shaky animation will serve the issue. That will not only attract the eye, but also indicate something wrong is happening (if such animation is not present already in the interface) by breaking the flow.

Improve this answer
5
  • This needs a lot of testing because a lot of users HATE this functionality, including myself. I cannot for the life of me remember what website it was but a while back I went to a website where I entered the wrong user name or password and the gosh darn thing took the entire <div id="login">..</div> and shook the entire div left and right for like 5 seconds and came to a rest and asked me to re-enter this info. I hated it!
    – JonH
    Jun 21, 2016 at 18:45
  • I'm not telling to take this entire div alignment left or right. Here what we are discussing about is alerts above the divs.
    – bagaria
    Jun 21, 2016 at 18:55
  • Right but you mentioned movement, shake, wobble, etc. Please note I am not saying you are right or wrong, I'm just stating this type of working (movement needs a lot of user testing).
    – JonH
    Jun 21, 2016 at 18:56
  • Yes, for the alerts only. Sorry I forgot to mention it specifically.
    – bagaria
    Jun 21, 2016 at 18:57
  • @JonH You're thinking of the WordPress backend user login, haha. It shakes when you type in the wrong credentials. Thank you all for your answers. They're very helpful.
    – yaserso
    Jun 22, 2016 at 2:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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