15

I have a add button (with a green color) in the main level of my web app. This button also appears in other levels of my app. My CEO asked me if it would be a good idea to change the color to a lighter green every time I go deep in the levels. I have the feeling the green color should never change because it is an action button, and it could mislead users. I mean, if an add button is green, it should has the same green in the whole web app.

What do you think?

Improve this question
4
  • Sounds like an XY problem. The CEO has a problem where he wants to show users how deep they are, but expresses it as asking if the button should change colour. I'd ask the CEO if he wants some display for the users to know how deep they are
    – SGR
    Aug 1, 2017 at 12:46
  • What do you mean with XY problem? sorry my english...With a display, do you mean to create a lateral tree or something like that?
    – Alejandro Gómez Naranjo
    Aug 1, 2017 at 12:48
  • 1
    An X-Y problem is one where someone says they have a problem with Y, but really they have a problem with X. Say for example someone asked for help with waterproofing his floor. The reason he needs to waterproof the floor is because he has a hole in his roof and water comes in when it rains, but instead of asking about how to fix the hole he asks how to waterpoof the floor. I think your CEO is asking about changing the button colour (Y) because they have trouble with figuring out which level they're at (X).
    – SGR
    Aug 1, 2017 at 12:50
  • Great! thanks so much for this helpful comments. Regards, A.
    – Alejandro Gómez Naranjo
    Aug 2, 2017 at 9:26

2 Answers 2

Reset to default
24

Keep the color of your action button consistent in your web application.

I like the idea of a lighter color if you go to a deeper level. It's cool.

However... usability comes first.

Users will start to expect the button to have this color after a few uses. Changing the color will confuse the user. Moving to a lighter green can also negatively influence the contrast of your button in comparison to your website (assuming that you have a light background in your web app).

Final note;

Try and look at where the CEO's coming from. Maybe he talked with users or found out something else that's worth looking at. Changing the color is not the way to do it, but something else might be.

Improve this answer
3
  • 4
    Agreed. Sometimes CEO-types don't understand what confusion means, so you can say that users will try to figure out why the colors are changing. And you want them to be doing something other than that on your site, right? ($$ or whatever.)
    – Ken Mohnkern
    Jul 31, 2017 at 12:48
  • 19
    However, is there some other distinction that the CEO is getting at that is worth noting to help the user? Perhaps deeper add buttons need a tooltip or some other help text to indicate how they are different than adding at the top level? I agree that color is not the right way to communicate this, but try to look beyond the CEO's suggestion.
    – J. Dimeo
    Jul 31, 2017 at 13:39
  • 1
    Another usability concern is that lighter colors communicate to me that a button is disabled. If I see a button going from dark to light, that doubly reinforces that impression.
    – SethWhite
    Aug 1, 2017 at 15:27
14

Consistency takes many shapes

You and your boss are advocating for different systems of rules. The question is, which one will align with your users' needs in practice?

  1. Lighter shades to signify navigation level
    The big question is not consistency but why? Do your users need to know they're adding from a deeper level? Does this make any difference to the user's workflow or the resulting item?1

  2. Identical color for identical actions
    This approach takes consistency more literally. Users will quickly understand your meaning. The system you're setting up here is a 1:1 relationship between color and action.

1 If this distinction is important, make sure the experience makes that clear somehow. Button color is too subtle to deliver such a nuanced message.

Option number two works if:

  • You don't have a lot of actions and color variation can be used effectively to differentiate.
  • Your workflows are simple and you don't need to emphasize different actions from view to view.

Color can communicate workflow

Example of consistent button color with unique labels Based on OP's comment: Same color, different labels.

In a more complex environment, it can be useful to use color to emphasize the current workflow's needs. For example:

  • In a list of users, the primary action might be Add.
  • On a work item detail view, it might be Complete.
  • On a customer detail record, it might be Call.

Your system could define green as the primary action color. This enables the user to quickly find the next action on any given view. It also means you won't need as many colors as a 1:1 color to action system requires.

Improve this answer
3
  • hello, that is the question: I have several levels (five) and four button meaning the action "to add" (add time, add new project, add subtask and add an incidence).....I would like to show you an example to try to clarify this, do you know the way to attached a screenshot? Thanks.
    – Alejandro Gómez Naranjo
    Aug 1, 2017 at 6:43
  • You can upload images to Imgur.com and include the link in your question. One of us with higher rep will then embed it for you.
    – plainclothes
    Aug 1, 2017 at 17:11
  • To your point about the button's meaning at each level, it sounds like you just need to clearly label things: Add time, New Project, Add subtask, Add incident.
    – plainclothes
    Aug 1, 2017 at 17:13

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.