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 .

Discovery

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.

Facebook

A rare example of Facebook using actionable blue – the blue button is used when there are two buttons next to each other and blue text is used to highlight an uncommon task. The actionable blue text is slightly brighter than the button blue.

Google Trips

Google Trips’ blue button ‘Things to do’ is a muted version of the blue actionable text ‘Create Trip.’

LinkedIn, unlike other applications, uses the same blue for both actionable buttons and text.

Outlook

Outlook’s actionable blue text is slightly brighter in blue than the ‘Add Account’ button.

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.

User Testing

KP Actionable Blue #006BA6

KP Actionable Blue

Another Blue #007BCO

Another Blue

Modified

iOS Sign In Screen

My Doctor Online Screen with KP Actionable Blue button (#006BA6) and KP Actionable blue text (#006BA6).

Recommended

i0S Sign In Screen with brighter actionable text color

My Doctor Online Screen with recommended KP Mobile Actionable Blue button (#0078B3) and MCoE recommended actionable text blue (#0E77D1).

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.

Actionable Blue Colors

Actionable Blues

Web Prototype

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.

Recommendations

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.
	Modal Design Exploration of iOS and Android modal designs.