Actionable Item Controls
In 2009, Google tested 40 different link colors on its users to see if the difference in colors would alter the rate of click trough’s on links and buttons. They discovered that blue-ish links encouraged more clicking. Because this has been an active feature across the internet for years, people have now come to expect links and actionable items to be blue.
Another standard that is even more important than the color of actionable items is the deactivation color and link cues such as underlines or segmented controls. These give users a sense of where they are within an app. Underlining and segmented controls neatly side-step the accessibility issues of color, including issues involving users that are completely and partially colorblind.
A segmented control is a linear control made of multiple segments, each segment functioning as a discrete button. They are often used to display different views, similar to buttons, but show a deactivated mode when the user is currently on a selected section. An example is shown below of Apples iTunes app.
Challenge and Solution
Segmented Control
The two screens shown below from the ProductScan iPad app, represent a segmented control with an activated and deactivated state. The teal line under the section titles tell the user what section is currently selected and because the text is a dark grey color rather than the actionable blue color, the user will understand that it is not a tappable item. The tab that has the actionable blue text tells the user that it is an actionable item and if the user wants to view that section they have to tap on the unselected text.
Deactivated Mode
An example on the home page of the ProductScan iPad app shows the importance of an active and deactivated mode with actionable items. The Search fields give the user an option to clear the field by tapping the close icon within the search field. The left screen represents a state in which the user hasn’t inputted text, so there is nothing to clear/delete. Because of this, the close icon is a light grey color. But when the user inputs information into a search field, the close icon turns the actionable blue color. Suggesting to the user, the close icon is active and they have the option to clear their search.
Tab Bar
The ProductScan iPhone app uses a tab bar at the bottom of the screen to toggle between the dashboard and the profile screen. The actionable blue color is used for the text on the tab that can be tapped, while the teal background color is used on the tab that the user is currently viewing. Not only does the text color change based on what screen you are viewing, but so does the background color. This is a way to include users with color blindness by using a stronger color contrast while also achieving ADA compliance.
Want to learn more? Check out these case studies below:
 |
Actionable Colors Background Exploration for actionable colors for buttons and colors. |
 |
Actionable Colors Recommendation Actionable color recommendations for buttons and colors. |
 |
Mobile Fonts – System and Custom Considerations to take when using system or custom fonts. |
 |
Modal Design Exploration of iOS and Android modal designs. |