How to colour buttons when they have lots of different actions?

edited March 7 in Web Design

Please see the above screenshot of an application I'm working on. We're trying to decide on colours of buttons to make it as clear to the user as possible what the various buttons do.

On this page, there are 8 buttons in total that relate to different areas.

Action Edit Save

Remove Alert Update Alert

Add Note

Undo Save

Does anyone have any suggestions on what the best approach would be colour wise?


  • steveb
    BitterHusk Original™ Järvenpää FinlandPosts: 24,094 edited March 8
    It's an interesting problem. It would be good if there were internationally recognised conventions. Of course everyone alread recognises red means danger and green means go, but it depends also on context.

    In your case, I would suggest using red green and light blue, signifying an action like Edit, something advantageous to do like Save and a neutral choice like Add note.

    Bear in mind some people are colourblind so a difference in shade could be significant.
  • JamesAus
    Thanks for your thoughts Steve, appreciate it.
  • Limbo
    Established Norm Posts: 27,388
    I'd study Google's Material Design. It's about as good a guide as it gets when making UI choices. It's not prescriptive (obiviously what works for them might not for you) but it's a great starting place.

    Then you have UI conventions that are baked into tools like Bootstrap - they have made considered decisions already. So would also help IMO.
  • handcraftedweb
    thought leader Left coastPosts: 6,813 edited March 9
    There are no color conventions for those concepts except for maybe alert=red/yellow/orange (not even sure how universal this is). If you attempt to establish your own conventions (e.g. anything file related = blue) you can easily create more confusion than clarity. I would just make all buttons the same color and rely on text to convey semantics. There's a lot of iconography used to convey semantics these days but that's all retarded. Nothing beats text for semantics. Of course grouping to indicate things like categorization is a good thing.
  • calder12
    Senior Member Posts: 13,496
    ^^ this is what I was thinking honestly. Look at other systems, WP for example has two button colours, one for the buttons they want prominent, ie Publish, then a muted colour for less important or secondary actions.

    The first thing that crossed my mind with your question was I can see creating an ugly mess of colours that have no immediate impact on usability because colour only conveys certain things, as handcrafted mentioned.
  • JamesAus
    Thanks very much guys, really appreciate your solid thoughts.
    I tend to agree with you all around not going overboard on colours and standardising it.
Sign In or Register to comment.
© Copyright 2003 - 2016 - DT by Kooc Media