Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

uxdesign.cc – User Experience Design — Medium | Sabrina Fonseca
This post is part of the journey of the team at uxdesign.cc on learning more about Diversity and Design — and sharing what they learn along the way.
mul·ti·di·men·sion·al: of or involving several dimensions or aspects; exhibiting many diverse characteristics.
I started thinking about writing about gender diversity in design when I noticed how Facebook, Google+, OkCupid, Tinder and a few others have adapted their registration forms to be more inclusive of trans and gender non-conforming (GNC) people. Why isn’t everyone doing this, I thought? Asking for a person’s gender is a loaded question and there can be many answers to it.
It’s easy for us designers to just slap a gender question that says Male/Female in there — and make it mandatory — because our marketing department needs that data to sell stuff. There are indications that this not only risks losing engagement but also leads to false conclusions based on bad data. The J. Walter Thompson Innovation Group discovered that:
They see gender, sexuality and their own general identity as fluid or different from what was assigned at birth, while the world they interact with often forces them to “make a decision”.
It’s possible that they will identify with one of the options. But when they don’t, it may be a hurtful reminder of how their journey is not reflected in the world.
As a cis woman — someone whose gender was assigned as such at birth and hardly shifted, I didn’t have enough information to write about this. So I did what designers do: I read and read and asked around. I got 5 generous trans and GNC people of various gender identities to anonymously share their experiences and opinions. Their stories revealed that I knew even less than what I thought.
So unfortunately I have neither the silver-bullet solution to the form field problem nor a straightforward answer on how to design one. But I could identify a few best practices based on people’s common attitudes and reactions to some existing interfaces. I hope to open a discussion that helps build towards a better experience for all genders.
Cisgender people, by definition, will not think twice before answering the gender question. They’re a woman or a man, that’s it. It’s easy, it has always been the same, it was never questioned and they don’t think it will change. They socialize it through style and attitudes. They expect others to be able to tell their gender just by looking at them. They may even feel hurt if other people don’t identify them correctly.
Conversely, trans and GNC people have experienced a gender identity shift. Some feel like they’re a different gender from the one they were assigned at birth based on their sexual organs (their sex). Maybe their attitudes, clothes, makeup, hair, nails and other elements of presentation don’t fit the conventions of either traditional gender distinction. They may have changed their bodies, the gender designation in their various forms of ID, their name. Their state of mind on any given day may affect their sense of gender. Maybe it’s a combination of some of the above, or something else. Their trans & GNC status might be a secret, or only some people know, or everyone knows.
They may have identified with several different gender labels as they discovered them. They may also think about pronouns they want other people to use while referring to them. This may not be a journey to a destination, but a path that defines itself as they walk it. They are the ones shaping the path, creating, adopting and combining labels to feel comfort while they explore their feelings, and discarding old ones that may imply unchecked biases. The meaning they give to these labels can also vary.
The gender they’ve been assigned to at birth is none of your business. It’s not what defines them. What matters is what they are now. And even still, they are so much more than just their gender. Everything else about them might be the same as you or anybody else.
So what might they think when they see that super simple gender male/female question? It’s possible that they will identify with one of the options. But when they don’t, it may be a hurtful reminder of how their journey is not reflected in the world.
They will wonder why you need to know. What specific information you are asking about — their gender identity, the gender on their ID, their preferred pronouns to use in communications?
Can they change it later, or will they have to awkwardly talk to someone on the phone to make that change?
Are you monitoring diversity so you can create policies to improve lives of trans & GNC people? Or will they get in trouble if they answer incorrectly because they didn’t find a good label on your form?
Will they be outed somehow? Discriminated against? Threatened?
They may leave the form, the site, or the service. They may have to call customer service to ask exactly what they are supposed to do. They may tell their friends about their bad experience.
Are you monitoring diversity? Creating policies that will benefit them and other trans and GNC folks? Figuring out if they are eligible for benefits? Or is it for marketing and communication purposes? Is it for their doctor, or for their health insurance? Be transparent, explain what exactly you are asking about, and how it will benefit them. Reassure that your organization strives to be inclusive of everyone so they can feel welcome and protected while disclosing their information. As with any form field, if there isn’t a clear benefit to the user, you probably shouldn’t ask about it.
Callen-Lorde patient registration print form provides an explanation to their demographic questions (grey box).
One Medical Group patient registration form. It explains the purpose of the sex field, and offers more gender information as necessary. Since trans & GNC people may wish to use a different name from the one in their health insurance profile, it asks for that as well. 4 out of the 5 people I interviewed used a name different from the one given when they were born.
NYU application form with information overlay. They are clear about what information they need, but not why they need it, and what they ask for is a very sensitive piece of information. I’m sure this is the kind of form that prompts phone calls.
Let users know that information will not be shared with anyone, or allow users to manually control who sees it. Be mindful of who will see any identifying information. Check the privacy policy for your website or service for more information. Anonymise the data as much as you can, to make sure you don’t out them by accident. For example, if the results of a small survey show there’s a trans woman in the tech department, and there’s only one woman there, she has been outed.
Make that field optional as much as you can. This is part of the previous recommendation — the user may know better than you if it’s safe or appropriate to disclose the information based on the context. It may even warm them up to answer the question accurately rather than skipping it.
Coursera Profile. “Prefer not to say” is always good to have. On a side note, the word “Other” may make people feel like an after-thought, particularly when the form doesn’t ask for more detail on what “Other” means.
Instead of gender, consider asking for people’s preferred pronouns, and including the gender-neutral “They/their/theirs” as a singular pronoun. While some perceive this to be bad grammar, it was actually used this way until the Victorian era. “They” was even the word of the year in 2016 and was also adopted in 2015 by the Washington Post style guide and more recently by the AP styleguide. If you’re worried this will confuse your cis audience, explain the question as an attempt at inclusiveness, and include a sample sentence.
If you want to go the extra mile with your audience, particularly if they’re largely trans & GNC, consider adding more gender-neutral options from this list of pronouns.
Facebook also allows people to choose their own pronouns. It includes examples to make the question and the intended use bit clearer. Additionally, it prominently warns users that, unlike gender, this information will be public.
Vimeo used to ask for gender, now it only asks for pronouns. It would only be better if it included sample phrases.
Free-form, optional gender pronoun field on Vox Media job application, including examples. (Spotted by @antimytheme)
Depending on the context, there are several solutions with more or fewer labels. You want to make it as simple as you can, so you don’t overwhelm users with options. Too many options can feel a bit creepy, and people may feel like they will be easily identified/outed to malicious actors if they’re honest.
Short Lists: A simple set of gender options makes it easier to pick something. It may compromise proper segmentation, but it’s the least that should be done if you must ask about gender and want to make it inclusive.
Etsy profile. The free-form text field appears when the Custom option is clicked. This is a good approach because it shows curiosity about users who are trans & gender non-conforming.
Scratch sign up form, for kids to create and share interactive stories. Offering a simple open-ended field allows for self-expression, and users can hover over the ? icon to know how this information will be used. This would only be better if it included a “Prefer not to state” option — even if users don’t want to disclose, they might not feel like lying or writing out “It’s none of your business”. (Spotted by Chad Gowler)
ITV application form has a title field instead of gender. It includes the gender-neutral honorific Mx (pronounced Mix), which is great, but unfortunately it’s mandatory. This approach is a bit outdated, as it differentiates married from single women, but doesn’t do the same for men and non-binary genders.
United Airlines registration form, with no gender-neutral options. One gender non-conforming person I interviewed sometimes chooses Dr. as an honorific, even though they’re not a doctor, because it’s gender-neutral. This approach also implies a dark hierarchy between men, women, married women and people with a professional achievement.
Limited Lists: These lists are more inclusive than a simple Other, and good for the purpose of monitoring diversity. The specific general groupings can be tricky to achieve though. Here’s some feedback I heard from the 5 people I interviewed, which matched what I read in my research:
Trevor Project, an LGBTQ crisis hotline service, asks for gender information before talking to young people in crisis. It asks for gender, transgender status and preferred pronouns separately. This form was criticized by some of my interview subjects for asking questions that might be difficult to answer in a time of crisis, and not offering a “Prefer not to answer” option on gender.
This form design recommended by Practice Makes Progress allows for multiple choices. Many trans women and men don’t use the Trans label because they are not transitioning anymore and don’t want to feel “less than”, hence why this form doesn’t include terms like Trans Man and Trans Woman. But if someone wants to identify as such, they can pick Transgender + Woman or Man, or any other combination. Two Spirit is a Native-American non-binary gender identity — consider where the survey will take place, as there are lots of local trans and GNC labels.
National Center for Transgender Equality — Share Your Story form. It allows people to choose more than one label and include custom ones. Non-Transgender men and women have separate options phrased as such in case they want to share a story about a trans family member.
Complex Interfaces for Self-Expression (Social Media, Dating): You can allow the inclusion of any combination of options the user wants to input. As in the Facebook interface below, the type-ahead interaction is a good option. It solves for a long list that, if just displayed, might either imply a hierarchy or order or make it harder to fill. Letting users pick as many labels as they want is also desirable. Lists like this need some keeping up, as new labels are created while others fall out of favor, and internationalization needs to be considered.
So how are you going to analyze all this data if people can enter so many options? One solution is to create an all-inclusive list in the front-end, and then group those labels according to however you want to organize your segmentation in the back-end. There’s no need to burden Trans & GNC people with choosing from your marketing segmentation.
Facebook American English form. Lots of labels constantly being updated, a type-ahead search that doesn’t imply a hierarchy of genders, ability to enter more than one label, a free text field, privacy controls, ability to change the content whenever the user wants, increasingly localized labels — all make this a pretty inclusive design meant for the purpose of self-expression.
Gender identity labels often lack direct translations and equivalents across languages and regions. Some places may have labels of their own, like Hijra in India and Pakistan, and Two-Spirit used by Native-American tribes. Additionally, languages have different grammatical structures that may be highly gendered (like Spanish and Portuguese), a little gendered but with non-gendered alternatives (like English and German), or mostly not gendered (like Turkish), which affect how you ask about pronouns.
If you don’t know why you’re asking, then you probably don’t need to know the answer. If you can only provide users with options that force them to lie, don’t ask. Make your form simpler and faster to fill for everyone, and just skip the question. If you need gender information for marketing segmentation, consider whether your audience’s attitudes are really different based on gender. Consider also if you need to reevaluate your segments to account for more than just the male/female binary.
Snapchat, the king platform for young people’s fluid and non-permanent expression, does not feel a need to ask for gender. Unfortunately, the same is not true about Facebook and Instagram (the latter which only provides male and female as options).
Gender diversity inclusion is work. It requires thinking, training, researching, testing, testing, testing, iterating, and keeping up with labels. But it’s worth pursuing it as gender fluidity is likely to become a more and more widely accepted concept in our society. Trans & GNC people and their allies want to see organizations take action rather than just say they’re supportive. Accommodating for people’s different choices is part of that. So making a small change like this can be beneficial to your target audience, they will appreciate your effort and desire to listen, even if the first attempt is not perfect.
You may also discover your audience behavior isn’t what you thought.
Thanks to Jimmy Wohl for helping me edit this article. Thanks also to the trans & GNC people who shared their experiences with me, some of which provided valuable feedback to this article.
Meera Balarajan, Michelle Gray and Martin Mitchell did extensive research on how to ask the question of gender when monitoring diversity.
Equality and Human Rights Commission — Research report 75 — Monitoring equality: Developing a gender identity question
To learn more about the issue of name changes in data capture, check out Nova Patch’s presentation “Hello, my name is ______”
See you in the next story.
Designing forms for gender diversity and inclusion was originally published in uxdesign.cc on Medium, where people are continuing the conversation by highlighting and responding to this story.
AI-driven updates, curated by humans and hand-edited for the Prototypr community