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).
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?
Stubble/beard, but not too long!
“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!
- Make your menus work with everything
- Make your keys rebindable
- Make your sensitivity adjustable
- Allow simpler control schemes if possible
- Add these features EARLY
Pictured: A baguette controller and banana controllers.
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
- Don’t accelerate when you tween your player’s motion. ESPECIALLY in VR.
- Don’t put moving or distracting backgrounds behind your UI or your text. If you do, allow them to be turned off.
- Don’t put time limits on interactions. If an interaction requires button-mashing, add a toggle to let the player “hold” the button instead.
- Don’t use ableist language.
Pictured: A personified orange using a VR headset and throwing up.
Neurodiversity Dos and Don’ts - The Dos
- Put buttons in places that make sense. Make them look like buttons.
- Tween your UI whenever possible - it helps people keep track of changes
- Test your game for motion sickness, simulation sickness, and epilepsy.
- Make sure head-bob can be turned off and field of view can be changed.
- Make your settings menu navigable with a keyboard AND gamepad.
- Let people turn off screenshake and flashing visual effects.
- Add dyslexic font options if your game is text heavy
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 gameplaymechanics that work best for them, and turn off otherswith 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?
- Allow users to opt-out
- Understand what you’re actually asking—and ask that
- Use radio buttons for gender select
- Only have two options
- Make the question compulsory
- Always have ‘male’ as the default
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.
- Randomise the default character(s)
- Ask what you need to know, not just what everyone else asks
- Provide options for body diversity (e.g. shape, size, characteristics)
- Consider the options you have given your player—who are you including and who are you excluding?
- Make a white, middle-aged, able-bodied man the default
- Restrict options arbitrarily (i.e. clothing or voice due to gender)
- Make assumptions
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
- Colourblindness - BREWER PALETTES
Brewer palettes have been specifically designed to be distinguishable for people with all forms of colour blindness!
- Don’t use colour on its own to convey information.
- Have adjustable UI/text size if possible.
- Check the contrast of your text.Give it a black outline if necessary.
- Have brightness/contrast adjustment in your game.
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
- 79% of players prefer subtitles. If you have voice-over, have subtitles. If you have subtitles, consider letting people change how they look.
- Have separate volume controls SFX, speech and music. If possible, add a mono toggle for people who have difficulty hearing in one ear audio toggle.
- If you have sound cues, have visuals to match.
- Consider TTS if voice-over is too costly.
Moss is going to have a character named “Quill” sign in ASLand that’s SO FREAKING COOL.
Pictured: Quill from Moss, and audio-visual cues in Mark of the Ninja.
- Have a visual cue when someone is talking
- Support text chat as well as voice
- Let people pick if they want to play with others who use voice chat (or not)
- If you don't want to deal with rude language, maybe try limited phrases or emoji based chat instead? It’s been shown to be a good way to foster a less toxic playerbase too!
Pictured: Chat options in Hearthstone and Armello.
- Start thinking about accessibility and inclusivity early
- Always ask questions
- Don’t expect people to consult for free
- Consider why you need information from your player
- Don’t make assumptions based on the information you receive
- If you offend someone, use it as a chance to learn and be better
- Access resources, learn from good examples, and improve yourself
Resources (part 1)
- Web Content Accessibility Guidelines • w3.org/TR/WCAG20/
- WCAG automated testing • wave.webaim.org or tenon.io/testNow.php
- Accessibility Developer Tools • Official Google plugin for Chrome
- Game Accessibility Guidelines • gameaccessibilityguidelines.com
- Polyglot Gamedev Translations • github.com/PolyglotGamedev
- Arabic support for unity plugin • Konash/arabic-support-unity
- Bad "Arabic" in games • NopeNotArabic.tumblr.com
Resources (part 2)
- Colorblindness Simulator • color-blindness.com or coblis-color-blindness-simulator
- Colorblind safe palettes (Brewer Palettes) • colorbrewer2.org or mkweb.bcgsc.ca/brewer
- Info about Dyslexia and fonts • ccd.edu.au/news/articles/2016/dyslexie/index.html
- Todd Harper • chaoticblue.com
- Queerly Represent Me • queerlyrepresent.me
- Rudeism • twitch.tv/rudeism
- #a11y • Digital accessibility hashtag (A - one - one - Y)