Designing Ethical Interfaces

Mixing the web's accessibility with games' potential for inclusiveness

Presented at Game Connect Asia Pacific 2017: The Ripple Effect.
John Kane (@gritfish) and Alayna Cole (@AlaynaMCole).

Looking for a checklist of our accessibility Dos and Don'ts? You can find one here.

What is accessibility?

It's what you expect: Catering to audiences with diverse needs, and allowing them to engage in games and interfaces!

But it's also more than you expect: These diverse needs are not just physical! Accessibility covers a range of factors, and they’re all important for accommodating diverse audiences.

This GCAP talk was designed to give developers actionable steps for incorporating accessibility into their games from the beginning as well as encourage them to expand their understanding of what is accessibility.

Pictured: Accessibility stock image.

Accessibility and inclusivity is good business

In 2014 Borderlands 2's colourblind consideration was rare enough to be big news.

By 2016, colourblind options were common enough that outlets were apologising for not mentioning that The Witness wasn't accessible.

This change occured in only two years! That's less than the time it takes to make a game.

This is Hue. Hue is a game based entirely around colour. Hue has a symbol-based colourblind mode. They included a single bullet on their presskit about it. Positive press and user reviews from that one accessibility feature made the difference between a "yellow" score and a "green" on Metacritic.

Pictured: Hue screenshot.

Accessibility and inclusivity is good for everyone

14% of the population has some degree of hearing loss but 79% of players use subtitles in games.

Less than 1% of players are one-handed but 30% of players used Uncharted 4's "one-handed" controls.

PikPok game Into The Dead added extra control schemes for a small number of players who physically couldn't tilt their device. 75% of players used them instead.

75% of players also used Mallow Drops’ on-screen buttons over the standard rotation controls

Pictured: Screenshots of Into the Dead and Mallow Drops.

There’s no excuse!

Research shows that underrepresented audiences appreciate being included, and the majority of remaining audiences won’t care either way (and will still buy your game).

Pictured: Life is Strange, Overwatch, Dream Daddy, and Ted Universe.

This is how different fit bodies can look...

Pictured: The bodies of Olympic athletes showing body diversity, even among fit bodies.
Credit: Howard Schatz

So why do all your protagonists look like this?

White
Brown hair
Stubble/beard, but not too long!
Big jaw
Able bodied
“Fit” but all have the same body type
Voiced by Troy Baker or Nolan North

It is a business decision to stand out or be bland. Don’t be bland.

Pictured: A selection of white male brunette protagonists from videogames.

Big guys know where to buy clothes. Stop doing this.

They’re obsessed with food. Their pants don’t fit.

They attack with burps and farts or are sexually explicit as a joke.

They don’t talk, or are portrayed as stupid.

Pictured: Overweight videogame characters that adhere to this stereotype.

Congrats on your totally original character.

Pictured: Barney Gumble from The Simpsons.

There’s been a well dressed chubby guy in games for ages. You might have heard of him...

If he can find pants that fits, so can you.

Pictured: Various images of videogame character, Mario.

Everybody means EVERY body

Saint’s Row 3’s triangle body sliders are some of the best in the business. In Saint’s Row 2, you picked “body shape” rather than “gender” and your voice is chosen separately to how you look. Your pants always fit.

Pictured: Character creation screens from Saint’s Row 2 and Saint’s Row 3.

Please, just think about what you’re saying.

Pictured: An online store with the category 'Fat Girl Costumes', and an arrow pointing to this category, exclaiming WHAT!?

Size isn’t everything.

Body diversity also covers other physical differences.

Pictured: Junkrat from Overwatch (who has a prosthetic leg), Doned from Final Fantasy (who is in a wheelchair), Sir Hammerlock from Borderlands (who has a prosthetic arm), Bentley from Sly Cooper (who is in a wheelchair), and Joker from Mass Effect (who has Vrolik syndrome).

Even if you’re not a multi-platform triple-A title, someone might try and play your game with: Keyboard, Mouse, Gamepad, A baguette, Joystick, Bananas, Trackpad, Touchscreen, Screen readers, or Eye trackers!

So:

Pictured: A baguette controller and banana controllers.
Credit: https://www.twitch.tv/rudeism

Think globally, act early

Use ready-made data like Polyglot to put translations in your game from DAY ONE.

Make sure your text inputs work in languages that aren’t English. It UTF-Ain’t that hard.

NopeNotArabic.tumblr.com - You know those lists of bad Chinese take-out menus? They exist for screwing up other languages too. Don’t be on them.

Far Cry 5 just announced Arabic localisation. Engine support is getting better through plugins and new features.

Pictured: A Pokemon GO username entry screen that does not accept non-English characters. Error message stating, 'Only letters and numbers allowed'.

Act early. I mean really early, before you start coding.

Translation affects your UI! The same word in different languages can be totally different length and break your UI.

Use of imagery can vary wildly between cultures. Imagery used on your site may be offensive. Use spritesheets to make your imagery and icons as easy to swap out as your text.

The best thing you can do is start early, ask people questions AND PAY THEM.

Pictured: A box with text spilling out of it, demonstrating how UI looks when text does not fit within designated space. Text says, 'This doesn't look good, does it?'

ALGORITHMS ARE A BUNCH OF SCUNTHORPES

Algorithms are not as effective as human eyes. Scunthorpe is a place in England that has become synonymous with the problem where algorithms block strings of letters that contain language deemed obscene, based on an issue that occured with AOL preventing residents of Scunthorpe creating accounts in 1996.

Check filters with human eyes where possible, as algorithms can make mistakes!

Let’s talk about brains!

Pictured: A cake featuring the text, 'We can't all be neurotypical, Karen' written in icing.

Where would you click to log in?

Pictured: Screenshot of the Spotify login page with the various buttons blocked out.

It should be obvious!

Pictured: Screenshot of the Spotify login page with the login button (small, and at the bottom of the page) surrounded by a pink square with 'It was here!' text beside it.

Neurodiversity Dos and Don’ts - The Don’ts

Pictured: A personified orange using a VR headset and throwing up.

Neurodiversity Dos and Don’ts - The Dos

Some news about everyone’s favourite font

Pictured: Text demostrating the difference between a game's font and the dyslexic-friendly font that is frequently used in videogames.

Pictured: A comparison showing how a game's font might look with larger letter spacing, which research has shown is as accessible for people with dyslexia as the standard dyslexic-friendly font.

The GOOD nes

Support for this is coming to game engines! Using TextMesh Pro in Unity gives you a lot more control, and let you build your own toggles!

In HTML game engines, these are already part of CSS so they should be easy to add.

Pictured: The Unity TextMesh Pro editor.

The more the merrier

Adding accessibility features makes your game more accessible for EVERYONE. This includes difficulty. The more ways you can give someone to play your game, the more potential players you have.

Nier: Automata allows players to pick the set of gameplay mechanics that work best for them, and turn off others with options like auto-dodge, auto-shoot and auto-heal.

Pictured: Screenshot from NieR: Automata.

Gender and sexuality

Sex? Gender? Sexuality? What am I actually asking? These are not the same thing and often you don’t even need to know!

What do I really need to know? Am I making assumptions based on selection? Pronouns? Titles? Appearance? Clothing options?

How can I ask for the information I actually need?

What are you actually asking?

Pictured: Read Only Memories as an example of offering players diverse pronoun options and Sunless Sea as an example of offering players diverse titles to select from, including gender neutral titles.

These developers are asking the player exactly what they need to know for the game, rather than asking about gender and making assumptions based on the selection.

Pictured: Pokemon Sun / Moon offering the players an appearance selection and both Animal Crossing and Pokemon Super Mystery Dungeon asking the player if a character is 'cute' or 'cool'.

Both of these selections are not what they seem: they are asking about gender... for some reason.

Pictured: LongStory asking players for their preferred appearance and pronouns, and The Sims 4 asking players about specific mechanics: whether a character has a masculine or feminine frame; whether they have masculine or feminine clothing preferences; whether they can become pregnant, get others pregnant, or neither; and whether or not they can use the toilet standing.

But what if I do need to know?

Do:

Don’t:

Pictured: Two examples of binary gender selection, with male and female as the only options. Arrows point at these examples with the text 'This is the worst. Don't do this.'

Pictured: Examples of ample sexuality (13) and gender (22) options provided by OKCupid, and based on user contributions. Screenshot of the 'Contribute to this project' textbox: 'Language and words evolve just as the people who use them do. Help us add your perspective and share with the world what terms of identification mean to you.'

The Australian Bureau of Statistics suggests asking ‘Male’, ‘Female’, and ‘Other (please specify)’. The Australian LGBTI National Health Alliance recommends ‘Another gender’. Don't literally 'other' your users. Just don't.

Quote from Queerly Represent Me's gender accessibility resource:

Often places have started using an ‘Other’ category, literally just ‘Other’. I appreciate the effort, I do, but I also dislike it. I already feel pretty othered because of other things in the world with regards to my gender and I don’t much like the implication of, “Hey, here are the standard options and uh, whatever you are I guess.” I know it’s well meaning, but anyway, that’s how I feel ... I would definitely prefer ‘Gender Diverse’ to just, ‘Other’.
– Charlie Francis Cassidy

Pictured: 2016 Australian census results showing the number of individuals who selected 'other' as their gender in the census. Younger demographics (20-29) are more likely to select 'other' than older demographics.

How does a web interface translate to games?

AKA: How do we make good character creators?

Pictured: The default screen in Fallout 4's character creator, with an arrow pointing at the image and text stating, 'This is the worst. Don't do this.'

Fallout 4 is a visual example of a binary gender selection screen. The default character is white and male, and the default secondary character is white and female. Heterosexuality and able-bodiedness is forced and unavoidable.

Character creators

Do:

Don’t:

Pictured: A photograph of eight men who look eerily similar to one another.

What do people care about in character creators?

Pictured: Statistics from Queerly Represent Me's DiGRA paper about representation in character creators.

A Dreamy Character Creator

Dream Daddy:A Dad Dating Simulator …only asks you what it needs to know!

Pictured: Screenshots from Dream Daddy including an image of their character creator where a player has selected the 'athletic binder bod'.

Dream Daddy allows players to make decisions about their player-character's gender, past relationship, and daughter by only asking the specific questions it needs the answer to, and without making assumptions.

Brewing a better colour palette

Brewer palettes have been specifically designed to be distinguishable for people with all forms of colour blindness!

Pictured: Examples of Brewer palettes and the symbol-based colour blindness solution used in Hue.

They're good colours, Brent.

Pictured: A selection of hundreds of Brewer palettes for colour-blindness accessibility.

Louder for the people in the back

Moss is going to have a character named “Quill” sign in ASL and that’s SO FREAKING COOL.

Pictured: Quill from Moss, and audio-visual cues in Mark of the Ninja.

Audio On-line

Pictured: Chat options in Hearthstone and Armello.

Takeaways

Resources (part 1)

Resources (part 2)

Questions

If you have any questions, feel free to get in touch with us on Twitter! John Kane (@gritfish) and Alayna Cole (@AlaynaMCole).


Published
2017/11/01