Actionable Colors Background
It is imperative for users to quickly identify what components on the user interface are actionable. This case study reviews actionable buttons and text recommendations to inform the KP Design community about the most current design trends. To read more about our recommendations, please refer to Actionable Colors Recommendation .
Currently, both KP mobile application and KP.org website use the former KP Actionable Blue (#006BA6) for actionable button and text for their Sign In screens. In late 2018, at the time of completing this case study, KP.org and KP Mobile were using the former KP Actionable Blue (#006BA6) for both their actionable button and text. In 2019, these actionable colors will be changing as KP Mobile will be adopting an KP Brand Center’s updated KP Actionable Blue (#0078B3) for their actionable button.
The current trends of popular personal and workforce applications include gray buttons and text with the occasional blue buttons and text. When the button or text is blue, it is used to indicate an important function and information or used to show what screen the user is on. When two buttons are next to each other, one of the buttons is always a solid button. For the actionable grays, the gray button is slightly darker than the gray text. However, for actionable blues, the blue button is a more muted version of the blue text.
While the shades of blue vary between applications, using blue to indicate action is clearly a common practice. Actionable blue buttons are a more muted version of the blue text in these applications – LinkedIn is the exception (the same blue is used for both actionable buttons and text). For many applications such as Facebook, Skype, Slack, and HipChat, the majority of the actionable colors are on the gray color spectrum. The KP Design Library shows the color gray signifies helper texts or dormant actions. If we introduce a new gray as a call to action component, it may not be clear to the user that it is actionable. But as you can see from the applications we researched, the actionable components are leaning towards the gray color scheme and it is a trend we should explore in the future.
In our initial user testing, we surveyed 12 participants on what actionable blue color they preferred. Almost all but three participants asked to view the screens again because they did not initially notice any color difference. Eight participants preferred the brighter blue (#007BC0) because it stood out more; whereas the remaining four participants had no preference.
Our second iteration tested three actionable blue colors: #006BA6, #007BCO, and #0E77D1 as seen in 1, 2, and 3 respectively. We surveyed 13 participants on HipChat to see which blue they preferred on web and eight participants in-person to see which blue they preferred on mobile. Almost all participants commented that the blues looked very similar – two participants abstained as they were unable to differentiate between the three shades of blue. Most participants preferred #0E77D1 because “it seems to stand out just a bit more on [the] screen, but the difference isn’t that big.” In our in-person mobile user testing – one participant abstained due to all of the shades of blue “looking the same.” Similar to the web survey, most of the mobile participants preferred #0E77D1 because it was “brighter.”
In conclusion, many participants preferred the brighter blue to signify actionable text in our iterations of user testing.
Based on our exploration of actionable colors, please refer to Actionable Colors Recommendation for our recommendation.
Want to learn more? Check out these case studies below:
|Actionable Colors Recommendation
Actionable color recommendations for buttons and colors.
Actionable Item Controls
Best practices for implementing segmented controls and tab bars. Investigating the UI for an item in a “disabled” state.
|Mobile Fonts – System and Custom
Considerations to take when using system or custom fonts.
Exploration of iOS and Android modal designs.