User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
We have a site that has themed colors, depending on which product you are using. The user can easily toggle between products, so the theme makes it clearer which product they are on.
Should Submit buttons be themed as well (we end up with a red submit button if we theme it) or should the submit and cancel button colors be consistent across products?
Thanks
The consistency of the design is not done by the choice of colors or its quantity, but by the design itself. The color is just one more component within the design guidelines.
If you define color variability in the design guidelines as a design component, the color change in the buttons can be an element of manifestation of this variable, provided that the shape of the buttons is sufficiently personal and recognizable.
A clear and extreme example of the use of different colors in design is the Carrefour supermarket logo. Although one of the basic canons in corporate image is the consistency of unique and representative colors, when Carrefour presented its new design in 2009, it did so with a considerable number of gradients to be used in its different communication needs.
Page from the Carrefour Brand Book
I think the problem is not the color of the buttons in relation to the theme of each product but the color of the buttons in relation to the design guidelines of your website.
This design guidelines can define that all the buttons must keep the same color or vary according to the theme, both options are valid.
I would always encourage doing the same thing in the same way. If your product has submit buttons, then they should look and behave the same throughout.
This lowers cognitive load because users don’t have to second guess what does what or spend time learning that your interface looks different depending on the product.
That's something your organisation may understand but I wouldn't thrust it upon your users. Why risk it? It just gets in the way of users clicking the button.
The question I'd look to answer is: what has user research shown you that has led to you wanting to colour buttons differently across products?
I am guessing that research hasn't shown you need it and therefore you may be trying to solve a problem that doesn't exist.
It is easy to jump into an answer in this case because it seems very obvious that buttons with the same function/feature should look the same. However, the user's mental model is not always to look for the same words/label on the button, but the goal and purpose of what they are doing.
I think the best way to resolve this question is to go back to the original design rationales or design system and consider the impact of the decision. The reason is that 'consistency' is something measured against a particular standard or criteria, and currently you are trying to maintain consistency of product feature (or user action) in your design. However, there are other standards such as consistency of design for primary or secondary call-to-actions/button and this may cause a conflict.
Hence, the best approach is to go back to the 'UX folks' and ask them about the different design rationales or design system that they have come up with and how these conflicts can be managed/resolved.
