By: Tuba Ayyubi
May 27 2020

Rooting for gender-inclusive web design

Four people holding a rainbow like flag with clouds and sky in the background


Usually, the restrooms are marked as ‘men/male’ or ‘ladies/female/women at offices, restaurants and other public places. Have you ever imagined yourself being in a state of utter confusion while deciding which restroom to use? No? Well, this is an everyday issue in the life of trans genders and gender-nonconforming people. The sad truth is that they fear harassment and keep running into such unnecessary barriers which makes their life harder. No wonder a report on gender and sexuality by J. Walter Thompson Innovation Group had some staggering revelations to make.

Graph showing the views of Gen Z on trans and diversity


With the world gone digital, web designs are one of the barriers in the life of these people. While filling a form or signing up for something, the options for genders are most likely to be male and female. Rarely, we find websites with either no gender options (when not required) or other preferable options to choose from.

In order to provide the best user experience, you need to understand how the facet of their lives intersects with your website. For that, it becomes important to educate ourselves about the LGBTQ terminologies and issues so that you develop a sense of when and what is appropriate to say or ask. If you want to increase the lifetime value of your customers, you need to make your website more trans-inclusive which will enhance the user experience for everyone.

Getting things right

Using gender inclusive language and designs means writing or speaking in a way that does not discriminate against a particular sex or gender role. Moreover, it promotes gender equality and stands against gender bias.

Designers should not limit the gender options to male and female, and definitely not make it mandatory! In fact, gender should not be asked where it is not needed. And wherever required, the gender options should not be limited.

Key Considerations for gender-inclusive design

Key considerations for gender-inclusive design


Before asking for the gender of a person, make sure you have a good reason behind why you need that information. And when you are sure that it is needed, make sure you give more diverse options to choose from. ‘Prefer to self identify’ or ‘add your own’ are great additional options. 

When people are not identified as male or female, they do not like being referred to as ‘he’ or ‘she’. Hence, you can ask for pronouns, so they can be referred to correctly during their experience with your website or app.

Images representing different body sizes, genders on the websites and ads allow room for representation. You can hire models for photoshoots. If you cannot have your own photoshoot, you can use the trans-inclusive stock photo collection launched by Broadly which is free for wide use.

If you ask needless questions or limit the options for the users to select, you lose value in the eyes of the users. Designers should make sure that they put in options that do not perpetuate gender stereotypes. 

There should also not be any sort of restrictions to make changes. Once, someone creates a web address, username or complete profile, they should be allowed to make changes if required. The users should be made aware that their information will not be shared with anyone. And if there is some kind of information that needs to be shared, let the users know. This will make them feel safe and build trust.

It is important to have a name change process. It is likely that you have one for marriage related name changes already. Create a process that allows anyone to change their names without any legal documents.

Many websites and applications incorporate gender in their designs and products even though the product is gender neutral. Like, clothing, wine or toys etc. Brands should evaluate an alternative and see what else can be done. Several OTT platforms ask for gender while signing up which is not really needed.

 A purple background with Two gender options written on it: Male and Female

Zee 5, an Indian OTT app, while signing up had male and female as the only two options while asking for gender.

 

Snapchat settings page
Snapchat profile setting menu does not ask for gender.

There are a lot of gender options and so it is not possible to use all of them. And even if you want to, you will have to change the control you use. For example, consider this screenshot.

A personal details page of a form with multiple gender options
Source: keepitusable

Conclusion

We all want to be treated with dignity and respect regardless of our gender, religion, or where we come from. So, make sure that these diverse groups feel at home when they visit your website. Eliminating gender inequality is the future of design. 

So tell us, are you ready to ‘trans-form’ your website?