Delight, speed and satisfaction are rewriting our UX playbooks in finance. While at the bleeding edge of this digital transformation, a modern UX-er has rapidly emerged, changing the rules of the game.
Hard Skills:
Journey Mapping
Research
Visual Design
Soft Skills:
Empathy
Collaboration
Critical Thinking
Strong UX has taken modern banking to the next level
Designing an ecosystem that can scale to deliver multiple connected products is really the ultimate UX/UI case study. Part of that skill-set is the new must-have that is dark mode.
Here is my take on this new visual aesthetic.
Three simple principles that complement each other and form the basis for the individuals experience
MYBANK* Europe – 3.8 million retail banking clients
This case study is based on MYBANK*. As part of a broader digital transformation, I led full-throttle Discovery sessions laying the UX foundations for this region’s third-largest banking group, with total assets at CHF 229 billion;
- 120-person strong team
- 1-2-1 Leapfrog Workshop
- A demanding 3rd party agency
Goals and How-to retool
The goal here is to give back to the design community a mindset for transitioning handcrafted light-mode UI, to the dark side. As this mode has become the new black, UX / UI designers need to re-tool themselves with the skills to set effective palettes, to design in context and to know the rules or at least know how to break them.
Using dark mode as default
Designing with a predominantly dark palette, swapping out light backgrounds, lightning text and icons has more recently become a non-negotiable design requirement with today’s clients. For mobile I get it, all apps should have both light and dark UI — or day and night themes that switch automatically. But what happens when your users are purposely choosing dark mode – all the time?
How dark mode has crept up on us
Early computer systems were always in dark-mode as characters were inverted. The Mac brought WYSIWYG and what we now know as light mode, or ‘printed paper’ mode. This became the default, with designers rarely even thinking about other colour palettes.
Although prevalent in certain digital environments, ‘dials-and-lights’ interfaces (car dashboards spring to mind) have always been dark, controls and readouts follow established dark patterns.
An app with a dark palette consumes as much as 90% less energy, especially with AMOLED screens. For battery saving reasons there is enough justification for your clients to build in design capacity for this mode. Be mindful of your users’ environment, a bright rectangle glaring at them in a dim room is not good.
Most streaming-video services default to dark mode as users do much of their viewing at night. This is why TV have dark bezels – right? Dark backgrounds reduce the overall brightness of the display, so can be used in any lighting condition. A typical dark-mode page is five times less bright than exactly the same content in light mode.
Defining a dark colour palette
Designers have been reducing contrast in light-mode for years.
Black text is rarely black anymore
(and not just disabled text)
Note the emphasis is on contrast. The term colour contrast is misleading. To give context, let’s map out a mini deep-dive on colour theory.
Quick recap on colour theory
- Hue—The spectrum on which a colour appears.
- Saturation—How intense a hue appears.
- Brightness—The amount of black or white that is added to a colour.
To most designers, developers, and product managers—the term colour means the hue part only. Red or green, for example. Contrast implies that contrast relates to hue, but it does not. Contrast indicates the difference in brightness levels of two elements.
Small differences equal low contrast, large differences high contrast – so contrast is a comparison.
Contrast in Dark Mode
When dark-mode palettes are implemented properly, their low overall output should provide extremely high contrast, without anyone on a project team worrying that the display is too harsh.
But you still need to keep the contrast as high as possible, which trips up a lot of designers. Dark-mode design suggestions, guidelines and inspiration sites too often throw away everything we know about colour theory, especially;
- Contrast
- Visibility
- Readability
- Universal design
Don’t start with a black palette
A quick, easy way to start creating a dark palette is to create shades and tints of all your colours.
Keep the hue and saturation, change the brightness.
Colour theory tip
- Shade = adding black to the colour.
- Tint = adding white i.e, pink is a tint of red.
How-to build a powerful dark colour palette
- Choose another dark colour from the palette as a background (or make a shade of one)
- Create shades of all your colours i.e. adding black to the colour.
- Use a number of dark hues for backgrounds making branded elements pop.
- Instead of just using lines or grayscale, use various dark shades of the brand’s principal colour to set-off sections.
- Finally, check contrast in a dark room with real users.
Even Google suggests very dark, highly saturated accent colours, but with lots of very low-contrast, grey backgrounds. Discarding simple lines around card edges and replacing them with dark-grey backgrounds doesn’t solve the contrast argument. Of course, this is just one opinion (albeit the worlds’ largest search company) – white key-lines can work as well.
Grey is not the only fruit!
Hollow icons for available tabs and solid icons for the selected tabs, while not a colour theory issue, is an effective way to differentiate them. Using simple text for tabs, in grey or red is an issue for the colourblind, not acclimated to night or glare.
Bad contrast impairs readability and users become confused when part of the page scrolls, but other parts do not. Contrast and differentiation is not just text and icons but the entire experience.
Conclusions on dark mode UX
Enable iteration by employing a high-impact Design System with global reach
Personalising a gold-standard, multi faceted, flexible Design System, empowering over 220 global organisations, employing a 6 sections, over 500+ components, catering for 3 industry-standard digital platform
From foundational elements like typography, to light and dark colour mode across all tokens, icons and logo, a rich library of icons to container, cover and sheets, to selectors components, drop downs, empty states, models, navigational and informational elements.
Modern UX designers should champion dark mode as the default option for mobile apps. Embracing this trend not only aligns with user preferences but also enhances the app’s visual appeal and overall user experience;
Not just about style
Design choices such as a colour palette have enormous implications around usability and perception.
Design basics
Size, spacing, and contrast in dark-mode are still critical.
Test, test and test again
Don’t forget to test your solution in a real-world environment (i.e a dark room). Try to understand how people would use your product, and make sure you’re designing for their context and their needs.
Pique’d your interest?
This is but part of a selection of design information russellwebbdesign generated for the creative community out there. Please contact me further to discuss how your brand can benefit from the new channel: info@russellwebbdesign.co.uk
If something has peaked your interest. Please leave a comment below.
