Dark mode: How accessible design raises the bar
The case study below is based on work I did for the Sprout CRM. Sprout allows business owners to track KPIs for medium-sized enterprises such as employee performance, revenue, and conversions. I chose to design in dark mode, took the design through a long iterative process, and arrived at something I was happy to ship.
Along the way, I realized that my work was delivering users a dark mode feature that about a third of them preferred but not necessarily for reasons of accessibility. The users just liked it better which meant there was no reason not to include it in the final prototype. Such an unexpected turn of events showed me just how important designing with smaller groups in mind can be for everybody.
In other words, by designing with a smaller group in mind, we’d raised the basement on expectations for all users.
Client Brief
Platform: Responsive CRM website and tool
Role: Product designer
Duration: 4 weeks
Challenge: Centering accessibility in design
Outcomes: The lesson that by designing for a specific group with an eye on accessibility designers are raising user standards
Who uses Sprout?
Our users were project managers, business owners, and retail employees either male or female from ages 18–35. We conducted nearly 15 hours of interviews and geared most of that research towards early design concepts in order to gather data on what was appealing and appropriate in a CRM interface. According to our users, the following were things they wanted in a CRM design:
- Clean UI (50%)
- Toned down color palette (66%)
- Easy to read graphics (33%)
- Photos of employees (25%)
Percentage of users based on 15 users
What turns people off?
We also asked the users to tell us about the things they didn’t like. We wanted to hear about these things as much as we wanted to hear about what they liked.
- Corporate feel (75%)
- Saturated colors (66%)
- Arbitrary data (33%)
- Crowded screens (50%)
Percentage of users based on 15 users
How Sprout joined the dark side
With our data in mind, a course of action became clear. These were our core qualitative findings:
- A clean UI was paramount. A crowded or cluttered UI could run the risk of turning users away with a glance before they ever interacted with the website.
- Data needed to be presented in a visually engaging way. We wanted to be creative in the way we presented our data. Along with more traditional bar and donut graphs, we also incorporated gauges, arrows, and other types of visualizations that would draw in users.
- Bright and over-saturated colors had a tendency to push users away. In other words, users wanted interfaces that employed palettes with muted colors and low saturation.
We knew that dark mode was an increasingly popular and accessible design choice, but it was also a design choice that was a somewhat unique take on user findings. The challenge, then, became to convince users that a dark mode design was as clean and scannable as a light mode design, but then we did our research, and we discovered that maybe dark mode wasn’t so accessible after all.
Accessible? Maybe not.
Why not dark mode? According to recent findings, dark mode may create as many accessibility issues as it creates. “[D]ark mode,” writes one designer in this Github article on dark mode accessibility, “could be messing with the user experience of up to 47% of your user base.” This is due to the halation effect on users with astigmatism. (Around 50% of the population has astigmatism according to the Github article.) For clarification’s sake, halation is a blurred effect around words. Dark mode creates this effect in people with astigmatism since they find it “harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the “deformed” lens. With a dark display (black background), the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye.” In other words, people with astigmatism see dark mode interfaces with a slight blur which means their user experience is the exact opposite of accessible.
Why dark mode? Dark mode helps decrease eye strain. “[L]ong-term reading in light mode,” according to this Nielsen Norman comparison of dark mode and light mode, “may be associated with myopia.” In general, the trend of designers thinking about accessibility is headed upward, and dark mode is a big part of that awareness even as the findings about accessibility change how we think about it. Facebook has even rolled out its own dark mode option. However, dark mode may just be trending towards a required feature born out of accessible design.
That preference, in the case of Sprout, was based on ease of use and the way that we got the user experience right overall. Take a look at the data:
- Dark mode was popular with 33.3% of users.
- 100% of users completed our user flows.
- 100% of users found the dark mode screens accessible and readable.
By the final round, the dark mode design earned a 4.5 out of 5 in response to the question, “Would you recommend this service to a friend?” Our dark mode design was 100% user friendly by the time we shipped it. Recognizing that 66.7% of users did not want a dark mode design, we knew we had to include a light mode version, but again this was a nod to preference, not usability or accessibility.
What We Delivered
Progress is always the new normal. We designed a light mode and a dark mode Sprout. We were forward thinking in our design of Sprout, but it was clear users favored more conventional designs. The dark mode design, however, did carry preference for some users. By providing options for those users, we were creating user friendly designs that were geared towards a smaller section of people, we’d actually created a feature that was popular with a wider segment of people than anticipated.
Conclusion: As designing for accessibility becomes more important in the world of UX and product design, thinking in terms of generating options for smaller sets of users is an impactful and expedient way to generate new features and preferences for all users.
Are you a startup, nonprofit, or entrepreneur with a great idea looking for product design help? Tell me your big plans and the challenges you face, and I’ll tell you how I can help. Email me at laythsihan@gmail.com.
Visit my website: https://layth.website/
