Home » UX & UI

Category: UX & UI

Example slide from inclusive interfaces presentation showing a representation of US racial diversity with icons representing people

Inclusive Interfaces

“The only thing necessary for the triumph of evil is for good men to do nothing.” ― Edmund Burke

UX is not a discipline you may think of when you think of standing up to systemic racism, inequality and bigotry, however UX practitioners are responsible for what exists on the internet. For the experiences that humans and brands have digitally. We hold immense power.

However, racial and gender bias are rampant in interfaces. Language tinged with racism or exclusionary terms abound. Images of racially ambiguous people are used rather than truly diverse casting. We can and must combat this in our work.

What started as a primer on web accessibility turned into a presentation to agency leadership defining what truly inclusive interfaces are and what we as a UX team at FCB were doing to align with the agency’s approach to diverse mass marketing. I’ve summarized the presentation below along with the deck I shared.

I defined inclusive interfaces in 3 dimensions: identity, language and ability.

Identity

Identity is the qualities, beliefs, personality, looks and/or expressions that make a person or group. Interfaces often exclude users of differing identities because designers forget about them.

Think about imagery on a site. We often see straight-size women modeling plus size clothes. Or beauty brands using models who’s skin tones are tan at the deepest. When was the last time you saw a disabled person in an image and didn’t remark on how brave it was for the brand or how rare it is? Images show who your brand thinks their users are before users read a single word.

It’s also important to remember that interactions can reinforce positive and negative perceptions of identity. Are you only providing binary options when asking about gender or biological sex? (And are you asking this when simply asking someone their pronouns would do?)

Interactions can also be subtle in their exclusion. Name fields that don’t validate for names with just 2 letters or names with spaces and special characters aren’t just annoying to a small set of users. They’re exclusionary.

Language

Language can be defined as a system of communication that enables humans to express themselves control objects in their environment and is reflected in the words we choose as well as the languages we make our content available in.

Experts in linguistics have shown us that the language a person speaks reflects their culture and values. Language, identity and culture are deeply intertwined. The interfaces we create should honor this connection. English-only interfaces leave out many potential US users. In some countries, such as Canada, French and English content is required by law, but this is a rarity in inclusivity.

Within the language that we speak, word choice shows our users that we value them (or not). Appropriative terms such as “spirit animal” are ignorant at best and racist at worst. If we are talking about humans who parent children, we should call them parents because if we use binary terms to speak to the group, we leave out those who identify as neither.

Voice interactions and conversational UIs are experiencing rapid adoption rates and language is the most critical component of those. But those assistants fail many users – accuracy rates fall to 35% for users with a southern accent. It’s worse for those with foreign accents speaking English or those with speech impediments. If any user can’t be understood there is still work to be done.

Ability

As a disabled person, this is where my mind has always gone when thinking about inclusivity. Considering physical and cognitive differences when creating an inclusive experience. This is also the one type of inclusivity that is mandated by law in the US.

Did you know that 1 in 4 adults can be considered disabled? Disability can be temporary or permanent and many people who are don’t consider themselves disabled. If you’ve ever sprained an ankle and needed crutches you have been disabled. Disabilities range in severity from color blindness, near sightedness and carpal tunnel to profound mental and physical limitations. Considering screen readers, contrast and alternative navigation tools are easy ways to build inclusive interfaces.

It’s important not to rely just on guidelines such as WCAG as they don’t address all types of disability excluding many potential users. For example, contrast ratios are the one accessibility guideline most UI designers I’ve worked with know but combinations that pass contrast may still be quite inaccessible. The reason? Luminosity. There’s plenty more examples, but the takeaway is clear: designers need to think beyond the rules.

Inclusion is critical for businesses.

Inclusive interfaces are critical for businesses from a reputation and financial standpoint. Inclusive brands reach more buyers and accessible sites aren’t liable for expensive litigation. As UX professionals, it is our obligation to ensure our work includes all users or else it isn’t user experience. It’s some user experience and that SUX.

Explore the presentation below (or open in a new window)

Yoga mat, yoga block and weights to represent the idea of a gym

UX Gym: The skill building exercises we use at FCB to deepen our team’s UX practice

I truly believe that User Experience is a practice. It is both set of skills used habitually and activities that must be done repeatedly to improve. In order to keep that belief central to our team’s ethos ad culture, we gather twice a month to train.

When I came to FCB, Gym was a serious activity and often felt like a burden if it was your turn to share work. I knew that Gym needed a change when I inherited ownership of the meeting a year and a half ago. Despite a minor hiatus due to Covid and working remote, it’s been an ongoing highlight of our weeks.

The premise

Learning from each other allows us to improve our skills in a low-pressure environment while improving team engagement. The activities are designed to be fun & light-hearted. Making empathy maps about Debbie in Montana isn’t as memorable as making one for a T-Rex with a mechanical arm. We make it a safe space for creativity and trying new things by setting the stage as a little ridiculous as we try new things. Above all, it provides time and space for each member of the team to be an expert and share their knowledge.

The activities

The activities can be grouped into 4 categories:

  1. Case studies & recent work,
  2. Peer education,
  3. Mock projects, and
  4. Creativity building.

This gives us a lot of room to “play” creatively and explore the practice of user experience.

1. Case studies / recent work

Every month, we make time for several team members to share something they are working on inside or outside work. These sessions allow us to celebrate success and learn from each other’s challenges. We take 30 minutes each month for a show & tell from 1-2 people.

Something you’re proud of

Show off! Sharing work or passion products that a teammember is proud off spreads excitement about the work and allows the team to celebrate each other. We also learn about our teammates’ lives outside of work when they bring passion projects to share.

A tricky problem you had to solve

Sometimes clients delivery tricky problems or feedback. Or we need to prototype an experience to test and it required learning new skills. Sharing problems and solutions helps the team see how others approached the problem and gain new perspectives.

New technology implementation

Sometimes we get to work in newer technologies such as voice and chat or even bleeding edge tech like NFTs. Team members who work in these spaces share work so that team members without the same opportunity still have a chance to learn how projects involving them work (and so they have an identified resource when it’s their turn to work in these spaces).

2. Peer education

We also recognize the experts among us by teaching each other new skills and exploring ways we can grow our practice and business. Knowledge and expertiese is shared in 2 ways, either as a presentation/talk or as group activities that allow the team to experience the concept or skill.

Presenting

While we’re remote, these can feel a little more rigid and formal, but often topics and skills are shared in a traditional presentation or lecture. A member of our team is currently working on NFTs and will be presenting to the team on what they are, how they work and what opportunities they bring for us as a business. We’ve covered topics as wide ranging as micro interactions, inclusivity, designing audits and global privacy regulations.

Experiential Learning

While lectures and presentations are useful, when concepts can be shared using an experience I’ve found the information sticks better with the team. The experiential part can be group conversations, ways to apply the concept or experiencing the concept. A couple of my favorite experiential learning sessions were a disability simulation and UX Haikus.

Accessibility Simulations

When the team needed a primer on the changes and updates in WCAG 2.1 accessibility guidelines, we had a gym session on the topic. I didn’t want it to be a boring lecture on the nuances of the guidelines, so I designed an experience for the team that simulated a variety of disabilities. The team were randomly assigned a disability – one team member couldn’t use their hands and had to use a head stick, another wore sunglasses slathered in vaseline and yet another had on sound-canceling headphones. They were then given instructions to complete the same task. It highlighted the need for accessibility and gave most of the team their first experience with disability.

an example haiku about the aesthetic usability effect
UX Concept Haikus

Our team has added a fair number of new team members over the past few months, most of them at their first UX job. I wanted an activity that would help reinforce UX concepts in a creative way, that was inspiring and fun. I landed on UX Haikus. The team were given a few minutes with randomly assigned concepts and had to write a haiku that explained or illustrated their assigned concept. It turned into a fun activity that led to

3. Mock projects / deliverables

We often use gym to practice making a variety of design artifacts – it gives us a place to try out new techniques in a low-stakes environment or practice workshop exercises before implementing them. These activities are pretty common practice for UX/design teams, so I try to spice them up (just a bit) to improve engagement and enjoyment.

Superfight users

The card game Superfight has been an endless trove of ridiculous user generation. The characters and attributes randomly drawn from the deck create users such as a t-rex with knives for hands or a boy scout with a pet flying monkey. From there, practicing making artifacts about users that can’t possibly exist lowers inhibitions and makes it easier for team members to chime in and participate.

4. Creativity training

These are some of my favorite activities to facilitate and participate in. It’s our chance to embrace some creative play for the sake of exercising creative muscles. I’ve collected these activities from former bosses, books, conferences and colleagues. They range from pure creative play to a little more practical design problem solving & thinking. We often pair these activities in gym with the work share-outs or a presentation to balance the activities.

There have been hits & misses (especially during the pandemic) but these exercises were hits with the team..

A watermelon emoji, a candy emoji and a hand wave emoji representing the lyrics to "Watermelon Sugar"
Emoji lyrics

Everyone re-wrote lyrics to famous songs in emojis and then the team had to guess the song each person had translated. Everyone had fun while stretching their brains. The exercise worked on visually representing concepts while also showing the limits of replacing words with images on comprehension.

Make the connection

Using a random pair generator, everyone is assigned 2 nouns (Characters, celebrities, places, objects, etc.). They are given 2 minutes to come up with a connection between the 2 objects. This exercise pushes the team to think about familiar objects with a different perspective as well as to look for points of commonality.

The results

The twice a month meetings have helped foster better relationships across 2 distinct UX teams that don’t otherwise interact on a regular basis. The team has been more engaged with their work and I’ve seen my account team apply the new concepts. I’ve also witnessed an increased confidence from my team when tackling new problems.