Color theme considerations for mobile
Summarize
Summary of Color theme considerations for mobile
This guide helps ServiceNow customers use color effectively in mobile applications to enhance user experience. Proper color use aids navigation, highlights important information, and supports accessibility by improving readability and user focus.
Show less
Key Features
- Consistent color usage: Use consistent colors across the app, associating specific colors with related tasks or workflows to help users quickly recognize applets (e.g., blue for incidents, green for work orders).
- Limited color palette: Use two to three colors to keep designs clean and accessible.
- Contrast and accessibility: Ensure high contrast between text and background to meet WCAG 2.0 standards (minimum 3:1 contrast ratio), supporting users with low vision or color blindness.
- Highlighting focus areas: Use high contrast, complementary colors to draw user attention to key application areas.
Color Variables and Configuration
- Next Experience requirement: Color variables only apply when the Next Experience is enabled; otherwise, they are ignored.
- UX Theme Properties table: Colors for variables come from the UX Theme Properties [sysuxthemeproperty] table.
- Additive properties: Existing hard-coded color properties remain functional if color variables are not configured.
- Override behavior: When enabled, color variables override hard-coded colors if a variable value is found; otherwise, the fallback HEX color property is used.
- Naming conventions: Color variables use a standard naming convention by adding a "Variable" suffix to existing color properties (e.g., BackgroundColorVariable corresponds to BackgroundColor).
- Component support: Color variables can be applied across various mobile components such as UI rules, icon sections, map icons, card view templates, buttons, and input descriptions.
Practical Benefits
By following these guidelines, ServiceNow customers can create mobile apps that are visually coherent, accessible, and user-friendly. Leveraging color variables with the Next Experience enables dynamic theming, simplifying maintenance and improving the overall user interface consistency.
Learn how to use color in your mobile applications to improve user experience. Using the right colors for your environment can help guide your users through your app and quickly identify important information.
Using color
Keep consistency in your color decisions throughout the app. Associating specific tasks or workflows with colors helps users know when they’re in not in the right place. Consider using the same, or similar colors for related applets. For example, selecting blue for your incident-related applets and green for work order applets can help your users get to related tasks quickly.
Avoid using too many colors. Simple designs of two to three colors results in a cleaner, more accessible layout.
Color can be used to provide contrast for greater readability. In areas where text appears, ensure that your text and background have a high level of contrast to accommodate both low vision and colorblind users. Web Content Accessibility Guidelines (WCAG) 2.0 compliance requires a contrast ratio of at least 3:1. There are several tools online available to help with gauging color contrast.
High contrast, complementary colors can guide your user’s focus. Use these colors to highlight areas of your applications that need your user’s attention.
General guidelines for color variables
- Next Experience must be enabled
- Color variables only take effect when Next Experience is enabled. Otherwise, color variables are ignored
- Colors available for variables are on the UX Theme Properties table
Color variables use colors defined on the UX Theme Properties [sys_ux_theme_property] table.
- Color variables are additive properties
- Existing color properties (using hard-coded colors) continue to work if the new color variables aren't configured. However, color properties can't dynamically change the color of elements based on the theme.
- Color variables override color properties
- Color variables override the corresponding non-variable color properties if Next Experience is enabled and the color variable value is found.
- Color properties are used if a variable is not found or has no value
- Color variable will not override if the variable is empty or the color variable value is not found. In these cases, the color property (HEX) is used.
- Color variables use a naming convention
- The naming convention of color variables is to add a
Variablesuffix to existing color properties. - Configure both hex and color variables
Color variable support by component
Use these links to learn how to use color variables to change theming in your mobile components.