Microaggressions and Microaffirmations in Product Design

Cool.

Firstly, just want to say Bri and Irith, that was an incredible talk.

Big, shoes to follow.

Awesome.

So I'm going to just start 10 years ago when I was in my first ever UX UI role.

And I was struggling with the design of a little card to go on a dashboard.

I was trying and it was so close, but something just wasn't quite right.

So eventually the creative director came over, looked over my shoulder, presumably after hearing me huffing and puffing for a while, and almost instantly said, Ah, just try nudging that icon a couple of pixels to the left.

Are you kidding me?

A couple of pixels?

I had tried different layouts, I'd tried changing the patterns, changing the hierarchy, the colors, and here he was, like, just move one tiny thing a couple of pixels.

So I did, begrudgingly, and it worked.

It was a really small optical alignment shift, and it sewed the components of the card together and let the eye follow them more naturally.

So I was pretty flummoxed, but I was impressed, and I pocketed that tactic away in my design toolbox, and I've pulled it out many, times over the years.

Okay, so I don't have that card anymore, but let's just imagine it was something really, it was really as simple as this.

Here we've got a card, with a quote from Sasha Constanza-Chock, which says, designers tend to unconsciously default to imagining users whose experiences are similar to their own.

And we've got a small heart icon in the top right corner.

Now, applying that technique that I'd learnt, I might look at this and go, if I just fix that optical alignment by shifting the quote marks out a little bit, it helps the eye to follow it more easily.

And there are many examples of things like this in product design, right?

As product designers, we know that when we increase the line height of our text, it makes it more readable.

If we round the corners on our buttons and our cards, it can make them softer on the eyes and more friendly looking.

And a small amount of movement or animation on an interactive element can give our users a sense of satisfaction.

Now obviously this is simplifying a range of design principles.

But these are just some examples of the way that product designers currently utilize tiny details, sometimes not even consciously, to improve a product.

And as we grow our practice, these techniques become baked into our toolbox.

And if tiny details like optical alignment and border radius can make a significant impact to the way a product looks and feels.

It follows that similarly small, seemingly inconsequential details might also impact whether that product feels safe and inclusive for all of our users.

So that brings us to microaggressions and microaffirmations in product design.

What are those tiny details that either exclude and marginalize or include and represent our users?

So today we're going to consider what these terms mean and the impact that they have on people.

We're going to look at a few examples and then some resources and strategies so that we can be intentional about those small inclusive or exclusive details.

There's not going to be an exhaustive list that you can walk away from because quite frankly I just don't believe there can be one.

So rather we're going to take a deep dive into some of the examples that I've come across either through my own experience or in my journey to become a more inclusive designer.

So let's get into it.

Has anyone heard the term microaggressions before?

Most nods?

Some people haven't?

Cool.

So the term microaggressions was first coined way back in the 1970s by Chester Pierce to describe the subtle everyday ways that black people experience discrimination.

And it has since become a widely adopted term to describe the subtle acts of discrimination that a range of marginalized communities face.

Often these acts are unintentional.

Or the symptom of unconscious bias, but that doesn't make them any less harmful.

So exclusionary behaviors like microaggressions can target race, gender, sexuality, disabilities, socioeconomic status, parental status, body shape, and more.

They can impact anyone, from any background, but people who come from traditionally marginalized groups experience them more.

And because our identities are intersectional, or have many facets to them, some people experience them across a multitude of their identity axes.

And they're essentially based on a really simple, damaging assumption.

Because you are X, you probably are, or are not, Y.

So a really common verbal example of a microaggression might be this one.

No.

Where are you really from?

Ugh.

This is based on an assumption that because somebody looks different or their name sounds different, they're probably not from here.

And microaggressions can also be behavioral.

So they might be expecting a woman in a meeting to take the notes or to fetch the coffee, and they can also show up in a range of products such as the automatic soap dispensers that might not recognize brown or black hands.

These might sound like interruptions, but they have short and long term effects, including stress, PTSD, and burnout.

Because a really critical thing to note about microaggressions is that no matter how seemingly small the action is, the effect is cumulative.

So a commonly used expression is death by a thousand paper cuts.

One might sting a little, you might not even notice it, or you'd brush it off.

But a few will start to cause discomfort.

And again over and over, they stack up to significant harm and exclusion.

So much that some folks have called for a change in terminology.

Because there's nothing micro about the impact that a microaggression has on a person.

So the change in terminology here is subtle acts of exclusion, which was coined by Tiffany Jader.

And I'm going to fluctuate between both of these terms through this talk.

So on a brighter note though, Ooh, that color is intense, that's not what it looks like here, sorry folks.

On a brighter note though, a cumulative effect of small acts of inclusion is also possible So micro affirmations are gestures or actions that create a sense of inclusion, belonging, and representation.

So these could be as simple as addressing someone with the correct pronouns, or making eye contact and actively listening, or elevating the voice or celebrating the work of someone in the company who is often overlooked.

Now, typically the concepts of microaggressions and microaffirmations have really focused on interpersonal interaction.

So like those examples, right?

A conversation between colleagues, an action in a meeting room or a question to a partner that a family member brings home.

But we have to consider the fact that when the average person in the Western world is using roughly nine apps a day and spending almost five hours a day on their devices, a large amount of the interactions aren't with real people at all.

But with the products that you and I create.

And so with that in mind, Jennifer Holm, who we will talk a little bit more about later, summarizes why it's really important that we think about this as the people who create products and the ecosystems around them.

We don't want to perpetuate the narrative that many of us grew up with and still experience.

That what makes a human valuable is being a Western male.

So let's dive into some examples.

This is the first example, and I know that this is a very New Zealand specific example.

Sorry, but I start here because this is what really kicked it off.

So in Aotearoa, New Zealand, our indigenous language, my ancestral language, and an official language of our country is Te Reo Māori.

And many iwi or tribes in Te Reo Māori have vowels that have a tohutu or a macron, so the little line over it.

So here we've got a slide that says Kia ora tātou, which means hello everybody, and the A in tātou has a macron.

And we can see that it's broken and it's using a system generated font instead of the font that I put on the rest of the text.

Now, as a Māori woman, oh, and I just want to be clear as well, so these, show up in place names, in our general vocabulary, and also in people's names.

And so it's really great to start seeing more digital products and websites start to adopt Te Reo Māori.

However, when I see a word like this, like that word tātou, where a vowel looks that little bit off from the rest, it signals to me that this organization cared enough to use our language, but not enough to design or test for it.

And I know this seems really obvious, but this is really common in digital products still.

It was only last year, in 2022, That our National Postal Service actually updated their software to allow for macrons in names and addresses when creating a packing slip online.

And there's a really simple remedy, right?

Check your font uses all characters, or your system uses all characters, and if it doesn't, change it.

Test your designs for a range of content.

Often something like that previous slide will slip through the cracks in systems that have a content management system behind them, or user inputted data, or pull in data from an additional source, because that's something that the designer hasn't considered, and it hasn't necessarily been tested through the QA process.

Alright, another very common place that microaggressions can occur is in forms.

Here we've got a select form with some radio buttons that say select your gender, the field is required, and it says male, female, other.

Now this small form field can be very harmful.

Firstly, we need to consider that just the act of asking gender can cause fear or discomfort among many people.

Because for many folks, just revealing their gender can lead to follow on microaggressions or outright danger.

Secondly, requiring a person to select an option that they don't identify with and not allowing them to skip a field can lead to misgendering and feelings of being invisible or misrepresented.

And finally, this might, this form also includes a microaggression known quite literally as othering.

This implies that there are two legitimate genders, male, female, and everything else can just sit in this catchall of other.

In a 2021 survey of non binary participants.

85 percent of those participants said that they often or always feel misrepresented when sharing their gender information online.

One participant said it leaves you feeling invisible, like the system and organization isn't designed to include you.

And in order to remove or reduce this particular microaggression, we have some kind of hard questions to ask ourselves.

First , do we need to know their gender?

Why?

If it's not absolutely essential, just don't ask it in the first place.

And if you do need to ask it, then consider for what purpose and create the field accordingly.

Don't just slip into a default.

For example, if you just need to know what your staff should be calling them, or you need to report on the diversity of attendees at an event or the users of your product, you can ask for pronouns instead.

If, for some reason, you do need to ask gender, Then create an inclusive option set.

Tell the user what this information is going to be used for, leave it optional, and still allow space for them to enter their own.

All right, here we've got another example from forms.

I think, like Jo earlier, I've got a lot of things to say about forms.

So here we've got another select, this time in the form of a drop down field.

That says, do you require any assistance?

And there's a range of options from no assistance required, blind passenger with a guide dog, wheelchair, and a few, and, quite comprehensive options to select.

So this is from a New Zealand, product.

And, this is pretty comprehensive, but when we ask someone to only choose one element, we're effectively telling them to just choose part of their identity.

What if a user using this product was both deaf and blind?

How do they prioritize which assistance they will need?

This applies to many identity based questions, so disabilities, ethnicity, tribe, dietary requirements, gender and sexuality.

Don't be afraid for providing many options, but also allowing many answers.

I think here it's worth noting that often as product designers, our aim is to reduce friction.

We hear it all the time, right?

Reduce friction.

Make it simple.

The easier, the better, the less options.

Reducing friction is only a good thing when it's not at the cost of someone's being and belonging.

So speaking of well being and belonging, we're going to look at some microaffirmations now.

So I want to note here that a microaffirmation is not simply the absence of or opposite to a microaggression.

A microaffirmation is an intentional act of inclusion.

So one more form example, bear with me, is this one here, which asks what name should we call you?

This will be used in our product and communication to you.

And this could replace the traditional first name, last name, or even first name field.

So why would we do this?

Asking the field in this way allows our user to share the name that they prefer and that affirms their identity, which isn't necessarily following the first name, last name, tradition.

Additionally, many cultures actually have different structures to their names.

So in some cases, the first name might be a family name rather than the name that they're called by.

Asking the field in this way mitigates the need for our users to try to assume how we're going to be using the information.

Or risk being called by the wrong name.

A side note here, names also need to allow a range of characters.

So if you don't allow apostrophes, macrons, or hyphens in the name, that is a microaggression to the many, people whose names include them.

And we've got a bonus opportunity for micro affirmations here, which is microcopy.

And this applies to anywhere within our products.

We can think about inclusive language right down to the detail of our form labels, of our descriptions, our placeholder text, our tooltips, our button text.

If, for example, we were going to put a placeholder name in here, we could do what we see on a lot of products and put a e.g.

Jane Doe, or we could take a tiny opportunity to put an indigenous name in there.

This next example relates to another facet of, language and products.

So this is an example from one of our products at Drug Foundation, where we provide judgment free harm reduction information to people who use drugs or their loved ones.

And this sits within a drug index, where we display the official name of the substance, which in this case is synthetic cannabinoids, alongside the common, alternatives or synonyms, so Spice, K2, Sinise, Kush, or Kronic.

This means, doing it this way, means that the folks who use our website aren't required to know the official substance of this, sorry, the official name of the substance that they're looking for information on, but they can still find it by easily finding terms that they're familiar with and we still use that official name to avoid confusion between similar substances or nicknames.

The thing to note here is the plain language movement, which has been around for a really long time, including in the UX profession.

The plain language movement tells us that jargon, overly complex description, and acronyms are not inclusive or accessible to all of our users.

And so simple, plain language is best.

Which is true.

Almost always true.

Obviously, there are some exceptions, right?

If you were creating a medtech product and you know that your users are medical professionals who've been in the industry 10 years, you're probably gonna need some jargon.

Which brings to this point, which is that, as well as plain language, using familiar language is an opportunity for micro affirmations.

So here it says, understand the vernacular or the, kind of common language of your user base, talk to them without talking down to them, and only a familiar language to some users won't exclude others.

But the reason this one's really interesting is if we're just focused on plain language, we might have missed the opportunity that jargon is actually an important part of a person who uses drugs experience, and a chance for us to make them feel comfortable when browsing the website.

And it also allows us to design the experience in more creative ways.

Here we'd have, an example of what the search looks like on the website.

And if my experience meant that I used the term kronic, I can search for kronic, but still see results for the synonyms, like synthetic cannabinoids.

And importantly, understand why I'm seeing that.

I want to caveat that it's really important when taking this approach to do so from a position of understanding and informed by your audience.

We should not be making assumptions about people's level of understanding.

We should not be stereotyping and we should absolutely not be being condescending or talking down to our audience.

All right, we've got one last but very big opportunity for micro-affirmations.

Which is using imagery that is representative of diverse communities.

This applies to any type of imagery and could be an entire workshop on its own, but we're going to touch on a couple of things.

The reason why I consider using a diverse icon set, a powerful micro affirmation, is that most person avatars tend to look like these.

We've got a screen of mostly grey, either very ambiguous icons, very simplified, or ones that look like the silhouette.

Typically, most of them look like a silhouette of a man, based on shoulders, whatever it might be.

Now, as I mentioned, a micro affirmation isn't just the absence of a micro aggression, so we're going to break this one down a bit.

It's less common these days, but sometimes we do still see icons and avatars.

Like this one, that looked like a man, used to represent all users of a product, which is great if you're a Western man.

But for anybody else, this is a signal that this product wasn't designed with you at the top of their mind.

And that can show up as a microaggression.

So to combat this, we will often see icons and avatars like this instead, right?

Where we've got a simple circle over an arch for shoulders.

And this is great.

We know this represents a person, but it doesn't show anything that excludes or includes certain people.

And some products are also doing more creative ways to combat this challenge, such as using initials if it's an avatar of a user, or images of animals or quirky things like a star with googly eyes.

And again, like that option in the middle, they don't specifically exclude people.

So these aren't microaggressions because they're not explicitly excluding, but they're also not microaffirmations.

They're not doing anything to specifically include someone, nor are they doing anything to challenge the kind of system default.

So therefore, imagine what it might be like to have a diverse icon set.

So you could choose an icon with a hijab, or a hearing aid, or different skin color, or hair color, or attributes that represent your identity.

It turns that icon or that avatar into something that is intentionally inclusive.

And this practice applies to other illustrations too.

So you might have to tell the story of your product or have an onboarding flow.

In her case study, Your Face Here, Jennifer Hom, who was the Head of Illustration at Airbnb, explained why outline sketches or plain illustrations aren't affirmative action for diverse folks.

She said when a person appears as an outlined white space, while their hair and clothing have color, it's easy to assume they're Caucasian.

Because of the systems and history of illustrations of people and power and privilege, when we see a plain illustration, our brain will often infer the features or details that assume it's a societal default.

So we need to actively challenge that default to be actively inclusive.

Meg Grobershaw, who led the illustration redesign at Shopify, found a similar challenge.

She said, we kept drawing people with dark skin, and they just looked like white people with purple skin.

I should note that was, the icon that had purple skin at the, start.

And so both teams set out to redesign their illustration suites.

They realized it's not just enough to change skin color and call it a day.

So they created different face shapes, body types, accessories, hair, clothing, and more to represent this.

And they realized it's not only about the person or the character.

It's about the environment they're in, the activities, the dynamics with other characters.

How do you depict them?

Where and what are they doing?

Flicking through those to keep to time.

So consider the character dynamics and the roles that they're in.

And it's okay to overcorrect.

Here's another quote from Meg, which says, Cool, you have equal representation in your illustrations.

But who is always pointing to the whiteboard?

Alright, and important for any images, whether illustrations or photos, is alt text.

When appropriate, and in the case of a photo, when consented to, describing the identity of the characters in your alt text allows people who interact with those images through the alt rather than in the visual image also experience that representation.

So here we've got an example from Harbin Girma who said that she is so used to blind people saying that they thought she was white.

Because image descriptions never said otherwise.

And she says, don't leave room for harmful assumptions.

And I want to share one more micro affirmation example on this topic, right back from 2015, which is when Slack launched the Add to Slack button.

This was their launch graphic.

And it's a cartoon hand holding the Add to Slack button, surrounded by logos of their integrations.

And the hand is brown.

And this was so unusual in 2015 that the response was massive.

And Diogenes Brito, who was responsible for that, ended up writing an incredible article, which I recommend you all read.

And this was just one of the tweets in the article, which says, It may not mean much to y'all, but it signifies people of colour work at Slack, making visual decisions that are seen by millions.

Visuals matter, specifically around product users and what a technologist looks like.

Seeing a brown hand is huge.

And Slack is serious about elevating people of colour, not just through press releases, but through business decisions.

This content is going to be on a lot of blogs, posts, and shared to a global audience.

So there's quite a few examples and quite a lot of information to take in.

So where to from here?

The way I see it, there are two approaches.

First, identify and minimize potential microaggressions or acts of exclusion in our products.

And, look for opportunities to employ, intentionally employ microaffirmations, or ways to include our users.

And if we come back to that initial idea, what are those small strategies like optical alignment that we can employ?

Based on the examples that I've shown, here are just a few.

We can consider font choices and where and how text is inputted.

We can avoid using other in form fields and provide more options in open fields instead.

Only have required form fields when absolutely necessary.

And allow multiple options to be selected in any identity field.

Ask questions about the person, not just to fulfill a data obligation.

Use familiar language, and consider that language down to the level of tiny microcopy.

And use diverse identity attributes in your illustrations and imagery, including the alt text.

And this all sits within a bigger picture, of why this happens in the first place.

And we're really briefly going to touch on this.

So here's a quote from Sasha Constanza-Chock, the author of Design Justice.

She says, more often than not, biases and exclusions in design systems occur not because of malicious coding, but failing to account for unmarked users.

The best way to avoid microaggressions is to be aware of our unconscious bias.

Which is easy to say, but it's really, hard to do.

Right there in the name.

So how can we start to prevent blind spots?

Here are just a couple of ways.

Hire, promote, and recognize diverse folks in our teams.

And test and co design with diverse users.

Have peer reviews, ensure somebody else looks at your work and questions your decisions, and ask why of other people's decisions too.

Learn about bias and its various shapes and forms.

Learn about confirmation bias, survivorship bias, and understand your decision frame.

And how it affects your process.

And review that design process, and your research process, and the way that you engage users.

Bri and Irith touched on an incredible amount of research to consider in that, in this piece.

But for example, if you're user testing, are you user testing in a way that people who use assistive technologies can also participate, which is different from accessibility testing.

Are you doing so at a time when solo parents or people who do shift work can still attend?

It's these micro and macro elements of our process that affect our ability to either combat and find microaggressions before they get into our products, or find opportunities to embed micro affirmations.

So had Diogenes Brito not worked at Slack and not made the decision to make this hand brown, this would have been just another tweet about yet another feature rather than a subtle but powerful way for Slack to include a large amount of their user base.

And in his reflection, Diogenes said this, These small choices matter, so make them whenever you can.

People will notice, and they'll feel good.

Things will be better.

So to wrap it up with that, I have just a couple of resources, which I'll put on the slides here, but I will also share the slides, afterwards.

These are just some of the incredible sources on this topic.

And this talk stands on the shoulders of many amazing people who work in this space.

Again, this is just some of them.

If you want to give them a follow or find out more about their work, and some of them are also in the stands here today.

And if you have any more questions or want to chat about this further with me, I would love to, but if like me, approaching people scares the daylights out of you, then you can also contact me through these channels.

Ngā mihi nui.

Thank you so much.