WhatsApp and dark mode: is it a match?
Becoming a new UX designer you not only have to get comfortable with designing but also with why you are designing. It’s great if something looks nice, but how does it help the user? How accessible are the functions? How easy is the product, device or software to use and how quick it is to learn and recognise?
Through my case studies and Daily UI challenges, I improved on my understanding of UX and taking these accessibility guidelines into my designs. With this is in mind I started to look at apps and websites I use every day and what could potentially be added to improve the usability.
As a user, I LOVE dark mode on most apps. I’m even on record of shrieking when I’ve accidentally switched my Twitter from dark mode to light mode because of the new level of brightness my eyes need to adjust to. There is one app I’m not a fan of being in dark mode and that’s WhatsApp. I don’t like how the text looks, it sometimes feels harder to read, I’m not a fan of the speech bubbles and when someone bolds text I find it hard to identify the difference between bold and non-bold.
I looked at a few other “popular apps” in dark mode. Twitter and Facebook Messenger allow users to switch between dark and light mode regardless of the users phone settings. So it’s either have your phone settings as light mode (which I do not want) or continue to be uncomfortable with WhatsApp’s dark mode (here I am suffering). But surely it couldn’t just be me, right? So I took to Twitter and typed in “WhatsApp dark mode hate” and “WhatsApp dark”, to see if anyone else is in the same boat as me.
Good news, I’m not the only one who hates WhatsApp dark mode. Bad news I’m not the only one who hates WhatsApp dark mode.
Comments from Twitter users:
Twitter didn’t give me the total number in my results, but you can continue to scroll and see the number of WhatsApp users who are not a fan of the app’s dark mode. But it’s not only Twitter users who have found an issue with the design of WhatsApp’s dark mode, but designers also have picked up on the issue too. Nino De Vries did an article about the aesthetics of WhatsApp dark mode and how bad they feel it looks.
It hurts my eyes and it bums me out, especially when I think about how I’ll be stuck staring at this dogshit theme a couple of times per hour every day. WhatsApp is my main mode of communication, and they made it ugly.
“They didn’t put a lot of effort in optimizing it”, he continued. “The contrast of the name colors on the mid-gray bubbles is terrible compared to light mode, where the colorful names sit on a crisp, white bubble. This just isn’t friendly-looking, like light mode is. It’s… muddy.” — TNW’s head of design, Alexander Griffioen
This is a telling statement from the TNW head of design. He has pointed out the contrast which causes an unfriendly visual look compared to how it is on light mode. The call of it not being optimised does add fuel to the rumours of WhatsApp looking to make changes to their dark mode due to user criticism.
WhatsApp are currently testing some new colour changes for dark mode in both the iOS and Android build. — Express
But the dark mode isn’t only a visual annoyance, it also carries some accessibility issues too. As I mentioned before, I found it hard to read and found difficulty with acknowledging if the text had been bolded or not. I wanted to find out if this was my issue, a dark mode issue or both. My research showed me dark mode can cause “halation” which massively impacts how people with astigmatism perceive digital interfaces.
“When you see light text on a dark screen, the edges of it seem to bleed into the black background. This is called the halation effect (via Make Tech Easier) and it reduces ease of reading.” Android Authority
For something I wasn’t completely aware of before, it affects a lot of people.
“In the UK, 47% of patients have astigmatic vision correction needs, with 24% having astigmatism in both eyes and 23% being monocular astigmatic, but toric contact lenses only represent 20% of fits.” Johnson & Johnson Vision
And if Johnson & Johnson isn’t enough, this is directly from the NHS’ website.
Astigmatism means your eye is shaped more like a rugby ball than a football, so light is focused at more than one place in the eye.
This can cause:
• Blurred vision
• Headaches
• Eye strain (you may notice this after concentrating for a long time — on a computer, for example)
Astigmatism normally occurs alongside short sight or long sight.
Sources have proven that dark mode makes astigmatism worse. It affects 47% of UK users and according to Messenger People WhatsApp is the UK’s most popular chat app for both ios and android. This could be causing an issue for users, possibly up to 47% of WhatsApp users. WhatsApp doesn’t use a “true black”, so halation may not be as high as 47%, but the research shows, there is a dislike for WhatsApp’s dark mode for visual and accessibility reasons. White on grey is more user friendly but this may still cause issues for users.
So what could be added to fix this? I propose an option to override the system dark mode and allow users to switch between light and dark mode. Facebook Chat and Twitter allow users to turn dark mode on or off without having to change the theme within their mobile settings.
FBC and Twitter allow both options which increase the accessibility, allowing users to choose the best option for them. What they do well is that they make it easy for users to switch between light and dark mode. The option also saves the preference themed so the user doesn’t have to switch each time they open the app.
Wireframe:
WhatsApp leaves a lot of space between the ‘chat’ menu options and the tab bar. Like on Twitter, I would use a light bulb icon to display a switch between light and dark mode. This will open up a pop-up box which would give users the option to switch between light. and dark mode within the app.
First Prototype
User test results:
With this first prototype, I wanted to test if the bulb worked for users. I was split in-between either going with the bulb or making space between “Chat Backup” and “Archive All Chats” for the dark mode option. I chose the bulb as it was quicker to add, user thumb touch zones and WhatsApp not using that space.
Comments from the user testing
4/4 found an issue with the bulb. My initial design didn’t take into consideration users using both hands, inadvertently blocking the bulb. From the user testing feedback, the light bulb isn’t the clearest indication. Two users covered the bulb and tried to go back, two felt the option should be placed amongst the other options whereas the other tester found the process a little bit confusing. In my opinion, this is a positive for open/remote user testing. As it’s a PANDEMIC my testing was done remotely by me sending out a link to the users. The only instruction I gave, was the bulb is there to switch from dark mode to light mode. I think it is good to give the freedom to see if your design makes sense to a new user. This would be an update and would be new to users, some may not check the updates or even notice the app has updated due to having automatic updates on. The user testing data suggest that the bulb isn’t the most obvious so wouldn’t enhance the user’s journey.
Users suggested adding the dark mode feature under the “Chat Backup” option which aligned with my alternative placement. With this user data, I can make the changes which fit within the menu options.
Learnings from user testing:
- How users hold their phones
- Devices and brightness
- User familiarity with testing
- Identifying the light bulb to switch from dark to light mode
Second Prototype:
- I removed the light bulb
- Added the dark mode option under “Chat Back Up”
- Removing the “light mode” option and only having dark mode and system settings
Conclusion:
The user testing helped me get to a final design which I think would help users who want to switch from dark to light mode similar to what users can do on WhatsApp web and android. This option is available on Facebook Chat and Twitter for ios. Although both are owned by Facebook, WhatsApp and Facebook Chat are 1&2 for messenger apps in the world. WhatsApp leads in users but FBC is predicted to have 2.4 billion users in 2021. The growing number of users and the ability to switch between light and dark mode could entice WhatsApp users to make FBC their main source of messaging.
It was good to test with different users to eliminate my own design biases. Elements of my design which I thought made sense, didn’t to the users. I am a WhatsApp user but the testers didn’t find the bulb useful which is good teaching for me as I develop my UX career.
