The ultimate guide to UI design for men and women
How color is perceived by men and women
Many years ago, when I started my design career with small little steps, I had the opportunity to collaborate with a real estate agency.
My main role was to help the team by designing and developing newsletters, parts of their website, and management software; This made me notice a particularly strange thing: women and men colleagues often argued about colors.
One thing I remember in particular about that job was the Christmas Newsletter, where we had to design and ship a convincing special offer using a nice red background: We’ve changed the red tonality at least five times.
In the beginning, I chose a particularly bright red which was appreciated by most of the male colleagues, while being rejected by every woman in the company. They always said that it was blinding and basically, unusable.
Since this sounded strange to me, I initially thought that my desktop monitor was differently calibrated, and that their small monitors in the office were overpumping red tones…so I went to them to check: nope. Their desktop was fine.
How color is perceived by men and women
Well, I initially thought I had some problems with my eyesight, but when other males positively reviewed that red, I understood that there was something more under the hood.
I started doing some research on that topic, and found out that women are in fact more sensible to color: this explained a lot to me.
As scientific research states, women really do see colors differently than men: girls are more capable of distinguishing tones and also feel colors brighter.
The reason why this happens is extremely interesting: it is believed that during evolution women were gatherers and had to recognize fruits and berries and static things more often than men, who had to concentrate more on fast-moving objects instead of colors.
While it seems that their sensibility to red is the strongest (this explains the berry-gathering idea), the same happened with azure tones: I once decided for a bright azure background, which was even considered dull by males (especially older ones) and, again, blinding from women.
Any way to test this again?
I love testing both myself and people, but testing these kinds of things is pretty hard during quarantine since you have no access to a common display and place, but I decided to do it anyway.
I asked 10 relatives and friends (the more I could..I know it’s not much) to evaluate a couple of colors on different brightness levels on their desktop or mobile phone, trying to find out if there is some real difference.
How I conducted the test:
- Asked to put the display on 50% brightness.
- Look at a list of different shades of increasing brightness of the same hue and tell me when they thought it was too bright/annoying.
- Re-do the test with the average brightness they keep their mobile phone at.
- Asked them in the beginning they had to increase or reduce the brightness to reach 50%.
I also noted what kind of display they used.
The test results…well confirmed the hypothesis and even added some interesting details to it.
On average, men preferred tonalities with around 20 points more on the RGB values than women (for example they preferred 228,0,0 rather than 208,0,0) and some of them couldn’t even distinguish between those shades; on the other hand, women had no problem recognizing differences, and like darker shades.
NOTE: There was no relevant difference on mobile and desktop, but the males unable to distinguish colors were all on mobile (Android-based phone).
Speaking of screen brightness, something interesting happened: when asked to put their brightness at 50%, women increased the value a lot (they all had it set at around 25-30%), while males increased by very few or didn’t change it at all:
women on average seem to keep their phone’s brightness lower, and this confirms the idea that they have more sensibility to both shade difference and brightness.
Tailoring software color for men and women
When working in that real estate agency, the management software was only utilized by women but entirely designed by men; this led to a couple of problems I easily fixed, but which tell us about a few interesting things we can now learn and remember.
One of the most common issues was contrast: while being even more fundamental for men, that piece of software had very low focus-contrast widgets for women too, which led to eye strain after hours and hours of work.
I do not have any original screenshots (they’re also private), but I sketched them again with more or less the same colors here:
The violet-blue color wasn’t chosen randomly: I proposed a list of different UIs to the full team, and I darkened the shade till EVERYONE had no problem seeing: men were again satisfied with “too” bright colors women didn’t like at all.
In my opinion, using white themes is a wrong idea in the first place, but at the time I was only a designer and the development team hadn’t the time to redesign the full software in dark mode; If there’s the possibility, I am pretty sure women’s sight would benefit a lot from using a darker and less aggressive UI.
Exploiting peripheral vision
While women are great at peripheral vision, men are extremely good at central vision.
This has its relevance to how we perceive both color and brightness, so it should change how we design our software.
Having great central vision reduces the need for contrast in the focus area, while peripheral vision is great for perceiving what’s happening near the display’s borders.
How to apply this do design?
Everyone knows that we should always use bright red colors for notification icons, but we can go deeper than this.
Supposing we’re males and designing software mostly used by women, we should always try to give some more size and contrast to small UI parts we focus our eyesight on, since women would strain their eyes more than what men do.
On the other hand, if we know that most of our users are male, we should always give near-border UI parts more saturation and size, since we’re a bit blind over there.
This is why you should always hire both a woman and a man designer!
The problem with micro-motion
Another advantage men have is to easily recognize motion.
A great way to increase the perception of small UI parts is animating them, but beware: women couldn’t be able to see it move, so make it shake a bit more.
UI should wear like a glove
Men and Women differ not only in how their eyes work but also their physical appearance influences how they use UI.
Having different hand sizes is relevant since it will inevitably change their experience using gestures and reaching various parts of UI.
Designing for both men and women should consider the hand reach: a difference of a couple of cms could make an icon being unusable by a woman and slow down any task.
As you can see, for an average woman is harder to reach most of the UI on an iPhone 6 singlehandedly.
While the difference in the thumb length could be small, this difference increases when using more fingers in multiple gestures: designing zooming, enlarging, or other actions should take into account these things especially with larger screens.
In a future where probably touch will become standard, and screens will become larger, we must not forget that our hands will still differ from men to women, and probably not growing that much.
Speaking of “speaking UIs”
Pardon me for this silly pun, but vocal interfaces are becoming more popular every day, especially when Siri and Alexa came out.
As for color, brightness, and sizes, the sound is also perceived differently by men and women; again, we excel in different areas and knowing this could be helpful when designing a perfectly tailored UI.
According to a 2008 study from Johns Hopkins University, men are five and a half times more likely to lose their hearing than women, and women are better listeners to frequencies over 2000hz.
On the other hand, men seem to hear better lower frequencies (between 1000 and 2000hz).
Supposing you’re designing an alarm or some kind of notification, you should consider these ranges because what you can hear couldn’t be heard by someone else.
In general, sound and voice (especially female) work better with women than men for many reasons:
- As compared to a male voice, the female voice is more difficult for males to listen to
- The female voice may be processed by males as “a melody line” or as “background music”
- To increase the likelihood of being heard by a male, a female needs to lower her voice pitch and keep it even (avoid pitch variation), speak louder, and lower inflections at the end of sentences.
We’ve analyzed many parts of User interfaces, from colors, sizes, and even sound.
Let’s see a list of tips you can use when designing for a specific sex or to grant equal accessibility and usability to both at the same time:
- Women prefer darker and softer tones
- Women could experience more fatigue with small text
- Women perceive motion lesser than men and need more movement
- Women have less hand reach and need smaller UIs
- Women do great with speaking UIs but perform less under 2000hz
- Men prefer brighter tones
- Men have perception problems with small peripheral UI
- Men need more contrast and saturation
- Men hear worse and are less susceptible to female voice
As UX and UI designers, we often do user research. We focus on traits like age, social status, and also sex, but being male or female doesn’t change our hobbies or things we like. Perception varies a lot, and designing a pleasant interface could be impossible if we can’t experience what the others are really seeing, listening, or touching.
In a complete design team, you should always have both male and female designers because their simple biology could bring to you issues you’re just unable to perceive in the first place.
Having a single designer is a bad idea, and it’s even worse if we consider these “nuances” that in the long run could make the difference between a good product and a great product. Like a tailor sews different clothing, we could design different UIs based on the user’s sex.
A Jack of all trades UX guy. Mainly interested in human-computer interaction, contemporary sociology and art.