15/06/2020
Choosing the color of buttons, their active, inactive and rollover states makes all the difference in creating an intuitive interface for your user. I recently started using a very handy social media scheduling tool called . I love it and highly recommend it! BUT...let's talk about their button colors.
•••
👉🏻Watch the video several times to understand what I'm explaining here. Focus on the Create Post button.
•••
First, what a lovely brand color palette. The light blue of the buttons is calming and easy on the eyes. But past that, the light blue of the buttons need to be adjusted for better readability, accessibility and intuitive interaction.
•••
The inactive state (the state at the *very* beginning of the video, prior to the user interacting with the text area) of this color of blue on the Create Post button is not different enough from the active state (the state *after* the user begins to type in the text area) or the rollover state (the state when the user rolls over the button) to indicate to the user that there is an action.
•••
These three blues need adjusting for better intuitive interactions. Here's what I recommend as possible options:
1. Change the Inactive state to light gray. Users have a mental model (an intuitive understanding based on previous interactions) that light gray means "inactive" or not able to interact with it.
2. Change the Active state of the button to a darker version of this blue to distinguish a difference from the Inactive gray suggested above.
3. OR change the Rollover state to the darker version mentioned above.
For 2 and 3, either way, the colors of the Active and Rollover states need to be different enough that the user can visually see the change.
•••
Bottomline: The light blue is too light. It appears as if it is an Inactive button and may confuse users and cause accessibility issues.
•••
I'd love to hear what you think. Other considerations? I'm all about collaboration and discussion, so let me know how you might handle it!
•••
