Why we moved away from primary, secondary and tertiary buttons
Evolving Our Button Styles to an Emphasis Model
Introduction
As product designers, we often grapple with the challenge of ensuring our interfaces are both intuitive and aligned with the evolving aesthetics of our brand. Digital products have relied on a “primary to tertiary” button style paradigm, which classifies buttons based on their level of importance from primary, secondary, to tertiary. However, for brands that use colour playfully like Carwow, this method holds us back. Here, I explain why shifting to a button style that focuses on emphasis rather than hierarchy unlocked better usage of our new brand style.
The Limitations of Primary to Tertiary Paradigms
1. Predictability in User Experience:
The primary to tertiary system, while structured, assumes that all users interpret visual cues in a uniform way. This system uses colour, contrast, and saturation to denote the importance of actions, which can become less effective against varied background colours. For example, a brand colour primary button pops on a light background but might clash or disappear on a coloured, dark or vivid background (such as photography or gradients).
2. Inflexibility with Brand Identity:
Static button styles can contradict a brand’s identity if the brand uses multiple colours as part of it’s visual language. When backgrounds change, the visual effectiveness and the communicative value of buttons should adapt. Rigid button styles simply fail to adjust to these shifts, leading to a visual mismatch and a disjointed user experience.
3. Visual Monotony:
Repetitive use of specific colours for all interfaces under the primary to tertiary system can lead products feeling stale and uninspiring. This is particularly limiting for Carwow as we aim to be vibrant, playful and momentus. We want to reflect the brand’s energy and vibrancy adequately.
Why Switch to an Emphasis-Based Button Style?
1. Enhanced Visual Hierarchy:
An emphasis-based approach prioritises content and context over colour uniformity. It allows designers to use a variety of styles that better fit the changing backgrounds and maintain visual interest whilst remaining consistent in their approach. This approach adapts to the visual context provided by the background colour, maintaining legibility and prominence of buttons through contrast and luminance adjustments.
2. Improved User Engagement:
Buttons styled for emphasis are designed to attract the user’s attention naturally, guiding them towards the desired action without relying solely on colour precedence. This not only improves accessibility but also enhances user engagement through clearer, more prominent calls-to-action.
3. Flexibility in Design:
Emphasis styling accommodates more flexibility and creativity in design. It allows the button colours to be a part of the brand’s story, changing dynamically to fit the narrative of the particular context or user interface. This results in a more cohesive and aligned visual experience that resonates with the dynamic nature of the brand.
4. Accessibility and Compliance:
Designing with emphasis, especially on contrast and size rather than colour alone, aligns better with accessibility standards. This method ensures that interfaces are usable by everyone, including users with visual impairments, thereby enhancing the overall user experience and compliance with legal standards.
What did we do?
We had a failing podium system where the secondary and tertiary buttons were indistinguishable from each other. Along with our new brand identity, came the introduction of multiple background treatments that our primary “blue” button only excelled on lighter versions.
We now had to contend with:
- Image backgrounds
- Bright blue, red and green backgrounds
- Off-white backgrounds
- Black backgrounds.
To combat this, we embarked on switching to an emphasis style.
Now, we have 3 core styles. Filled for high emphasis, outline for medium emphasis actions and sheer for low emphasis actions.
We switch the colour of these depending on the background colour, as follows:
* indicates a the default choice for a single button
Summary of Implementing an Emphasis-Based Design System
1. Establish Clear Guidelines:
Develop comprehensive guidelines that define how buttons should adapt to different backgrounds. Include rules for contrast ratios, minimum sizes, and padding, as well as colour usage that complements or contrasts with the different backgrounds effectively.
2. Use Semantic Meaning:
Assign semantic meaning to buttons based on the action they perform rather than their level in a hierarchy. For instance, main actions might always be using a high-emphasis filled button, but the colour associated can vary depending on the background and context to maintain visibility and emphasis.
3. Explain usage:
Ensure that you have clarity around the usage so that Designers and Developers can understand the importance of emphasis over hierarchy and are continually updated on the design system. Consistency is key and you should aspire to maintain standards across all designs.
Switching from a “primary to tertiary” to an emphasis-based button style paradigm marks a significant shift towards more adaptive, engaging, and inclusive design practices. It not only respects the dynamic use of colour in a brand’s identity but also enhances the user interface by making it more accessible and visually coherent. As brands continue to evolve, so too should our approaches to design, ensuring we create products that are not only flexible and beautiful but also intuitive and inclusive for all users.
