Coding For Diversity - PowerPoint Presentation

Slide1

Coding For Diversity

Stewart Lamb Cromar @tweelearningInteractive Content Manager, LTW, ISG, UoEAttribution-ShareAlike 4.0 International (CC BY-SA 4.0)Slide2

PlayFair Steps

Opportunity to make some innovative moves to address equality and diversity issues

for

ISG staff

One key message is that

‘equality involves everyone’Our success will depend on ensuring that our plans target all groups and include a range of positive actions.More information: http://thinking.is.ed.ac.uk/melissa/2015/08/19/playfair-steps-for-equality-action/

"

Playfair

Steps On the way to the Castle" by Steve

Barnes

[

CC BY-SA 2.0 (http://

creativecommons.org

/licenses/by-

sa

/2.0)], via FlickrSlide3

Overview

Scotland JS conferenceGenderWhen is it ok to ask?When is it not ok?How do you ask about gender?AccessibilityDesigning for diversity helps

everyone

Resources

Further reading

VideosLibraries and toolsPhoto by Stewart Lamb CromarAttribution-ShareAlike

4.0 International (CC BY-SA 4.0

)Slide4

Scotland JS Conference

Organisers said the initiatives undertaken to increase participation from more diverse groups came in direct response to the “overwhelming” number of men in the Scottish software development industry2015 > 2016 statisticsfemale speakers:18% > 50%non-male applications to

speak: 08% > 33%

non-male attendees:15% > 30%

Photo by Stewart Lamb Cromar

Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)Slide5

Preferred Pronouns

@kitationWeb developer. Talks about gender, gaming, software, education. Genderqueer. She/her pronouns.@precisememorySoftware engineer, hopeless nerd. Cofounder @

mergesortnyc

. Memory is brutal because precise. she | they

Copyright © 2016 Twitter. All rights reserved.Slide6

#DZY

Please use #DZY to warn people of possible dizziness inducing linksAnd #SZR for possible seizure inducing linksAnimations in web design can have some rather severe negative side effects for users with vestibular disorders such as vertigo

Copyright © 2016

YouTube.

All rights reserved.Slide7

Chad Gowler

“How to Ask about Gender”One interesting takeaway was that a “title is not a legal required part of name”In addition to Mr, Mrs, Ms., consider adding the gender neutral title MxMx – pronounced ‘mix’anyone can use it

,

not

exclusively a transgender

or non-binary optionDo not use titles to assume genderHaving an ‘other’ option is “othering” and can be perceived as dehumanising

Photo by Stewart Lamb Cromar

Attribution-

ShareAlike

4.0 International (CC BY-SA 4.0

)Slide8

The Gender Spectrum Analyser

ChromosomesSexual characteristics

Expression

Role

Identity

Photo by Stewart Lamb CromarAttribution-ShareAlike 4.0 International (CC BY-SA 4.0)Slide9

Video 1: Chad Gowler

Copyright © 2016 Render 2016. All rights reserved.https://vimeo.com/166790858

00:40

>>>01:46

06:18>>>08:38Slide10

Gender Identities: Umbrella Terms

TransgenderTransgender people are people who have a gender identity, or gender expression, that differs from their assigned sex A trans woman is a transgender person who was assigned male at birth but whose gender identity is that of a woman

A trans

man

is a transgender person who was assigned female at birth but whose gender identity is that of a

manIt may include people who are not exclusively masculine or feminine (people who are genderqueer, e.g. bigender, pangender, genderfluid, or agender)https://en.wikipedia.org/wiki/TransgenderNon-binary

A

catch-all category for gender identities that are not exclusively masculine

or feminine

Also

termed

genderqueer (GQ) or

gender-expansive

https://

en.wikipedia.org/wiki/GenderqueerSlide11

When to ask about gender

When is it ok to ask?Monitoring diversitye.g. censuses

Social

profiles

no

data analysis, just presented on a dating website for exampleHooking into 3rd partiessome APIs might require this informationWhen is it not ok?

Advertising

Twitter

adverts based on interests, gaming is

male

Assuming physical

attributes

assumptions

based on gender)

Refusing services

Tradition

first

name, surname, age, gender,

religion

…Slide12

The question protocol

Who needs it?Audit trailWhat are they using it for?Is it required?What happens if it is filled in with false

data?

What

does it mean for you, them or the

website/app?Slide13

Vimeo: 2012

GenderLet us know so we can call you by the appropriate pronoun.N/AFemaleMaleFeature request from

user Sarah Caitlin

“Gender

Pronouns in Profile

Settings”https://vimeo.com/forums/feature_requests/topic:89009Copyright © 2016 Vimeo.

All rights reserved.Slide14

Vimeo: 2016

PronounHelp us call you by the proper pronoun.FemaleMaleNeutralRather not say

Comparison:

Wording (Gender > Pronoun)

More options (2 > 4)

Different optionsRemoved: N/AAdded: Neutral & Rather Not SayCopyright © 2016 Vimeo. All rights reserved.Slide15

Facebook:

Account creationBirthday

Why

do I need to provide my date of birth

?

Female or MaleNo explanation givenBinary onlyCopyright © 2016 Facebook. All rights reserved.Slide16

Facebook:

Custom genderAs of June 2014, UK Facebook users can now choose from one of 71 gender

options by

selecting 'custom' in the gender tab of their

profiles

In addition, people who select a custom gender will now have the ability to choose the pronoun they’d like to be referred to publicly — male (he/his), female (she/her) or neutral (they/their)Copyright © 2016 Facebook. All rights reserved.Slide17

Scratch: 2016

Gender optionsMale

Female

Free text

Scratch is developed by the Lifelong Kindergarten Group at the MIT

Media Lab.See http://scratch.mit.eduSlide18

Scratch: 2016

Why do we ask for this info?This helps the Scratch design team understand who is using Scratch, and provides information that helps us broaden participation. This information is not visible on your account, and is only used to describe overall participation.

Scratch is developed by the Lifelong Kindergarten Group at the MIT

Media

Lab.

See http://scratch.mit.eduSlide19

Gender Amender by Anne

DeCusatisFor improving gender options in dropdownsJSON dict mapping words that can describe parts of genders to integers representing their status within an-

ary

framework of

identitiesIt's on GitHub so anyone can contribute – they don't claim to know everything about genderhttps://github.com/anne-decusatis/genderamender

Copyright

©

2015 Anne

DeCusatisSlide20

Data Source –

‘en-US.json’{"?": 3,

"

agender

":

3,"androgyne": 0,"androgynous": 0,"bigender": 3,"butch": 1,

"

cis

": 0

,

"

cisgender

": 0

,

"

decline

to

provide

": -1

,

"

f

to

m

":

2

,

"

female

":

1

,

"

female

to

male

":

2

,

"

femme

": 1

,

"

gender

nonconforming

": 3

,

"

gender

questioning

": 3

,

"

gender

variant

": 3

,

"

genderfluid

": 3

,

"

genderless

": 3

,

"

genderqueer

": 3

,

"

intersex

": 0,"m to f": 1,

"male": 2,"male to female": 1,"man": 2,"neither": 3,"neutrois": 3,"nonbinary": 3,"none": 3,"other": 3,"pangender": 3,"person": 0,"polygender": 3,"prefer not to say": -1,"queer": 0,"questioning": 3,"trans": 0,"trans*": 0,"transfeminine": 1,"transgender": 0,"transmasculine": 2,"transsexual": 0,"two spirit": 3,"woman": 1}

DECLINE = -1NONGENDERED = 0FEMALE = 1MALE = 2NONBINARY = 3

Copyright

©

2015 Anne

DeCusatisSlide21

What Gender Amender is not for

Legal complianceMedical historyAsynchronous responseNo/slow JavaScriptsee

http://

www.yaygender.net/pages/gender.pl

for an example of how this could workSlide22

Implementation: Voicebank

ProjectCopyright © 2016 The University of

Edinburgh.

All

rights reserved.Slide23

Accessibility

‘Technology: The Power and The Promise’By Robin ChristophersonRender Conference 2016https://vimeo.com/165995026

Copyright © 2016 Render 2016. All rights reserved.Slide24

Video 2: Robin

ChristophersonCopyright © 2016 Render 2016. All rights reserved.https://vimeo.com/165995026

02:02

>>>05:02Slide25

Overlap

Reading glasses or sun glare on screen makes you temporarily visually impairedColour contrast and minimum font size importantUoE: Double-A Conformance to Web Content Accessibility Guidelines 1.0

Holding

coffee in one hand makes you motor

impaired

Might be time-constrained alsoSimilarly, small phone and big fingers makes you temporarily motor impairedNeed to be careful with UI (button sizes and layout)Most in-car apps are effectively designed for a blank screen interaction (reliant on motion-sensing or voice-recognition based input e.g. Siri)

Using

a S

mart TV means

no

on-screen

pointer, so effectively a keyboard

user (therefore

need to highlight

active selections)

Designing for diversity helps everyone

Copyright © 2016 Render 2016. All rights reserved.Slide26

Video 3: Robin Christopherson

Copyright © 2016 Render 2016. All rights reserved.https://vimeo.com/16599502624:05

>>>27:20Slide27

Implementation: CAPTCHA

CAPTCHACompletely Automated Public Turing test to tell Computers and Humans ApartLegacy WordPress plugin uses visual identification onlyhttp://whatworksscotland.ac.uk/the-project/contact-us/

Audio demo:

https

://www.google.com/recaptcha/demo

/Copyright © 2016 The University of Edinburgh. All rights reserved. Slide28

Implementation: reCAPTCHA

2.0reCAPTCHA is a CAPTCHA-like system designed to establish that a computer user is human (normally in order to protect websites from bots) and, at the same time, assist in the digitization of booksUpdated:http://interactive-content.is.ed.ac.uk/contact-us/

Copyright © 2016 The University of Edinburgh. All rights reserved. Slide29

Microsoft - Inclusive Design Toolkit

In 2001 the World Health Organization redefined disability as “a mismatch in interaction between the features of a person’s body and the features of the environment in which they live.” As designers, our work can create or remove these mismatches in interaction.Microsoft developed a toolkit to show how human diversity can create better design constraints. And how to connect seemingly niche solutions to broader markets.Reuse is permitted under CC BY-NC-ND

https://www.microsoft.com/en-us/design/practice#toolkit

© Microsoft

2016 Licensed

under Creative CommonsAttribution- NonCommercial-NoDerivatives

(CC BY-NC-ND)Slide30

Activity: Human-to-Computer Role-Play

Phase: ‘Get Oriented’Equip yourself with the information you need to get startedThis stage introduces empathetic problem solving and research, and the basics of inclusive designActivity PurposeTo shed light on the potential shortcomings of

human-to-computer interactions

© Microsoft

2016 Licensed

under Creative CommonsAttribution- NonCommercial-NoDerivatives (CC BY-NC-ND)Slide31

Emotional Intelligence in Design

How Design Grows UpBy Beth Dean, Facebookhttps://medium.com/facebook-design/emotional-intelligence-in-design-abcd1555b3e7#.ut5r2t9v0

“Try

your best and then try a little

harder.

Without mindfulness, products might only be rude, but they might also affect someone’s health, their support systems, or their very livelihood. A good friend once told me that to be an adult is to be aware. It’s time for design to become an adult. As product and service design collide, designers are responsible for understanding every ripple of our work.”Slide32

Leo: Age 10

For most of his life, Leo has lived as a girl, but this summer he began to speak openly about his sense that that gender identity wasn't quite rightWith research help for his parents, he's decided he is non-binary, though for the moment he dresses as a boy and has taken a male namef

eels more boy than girl

prefers male pronoun ‘He’

tried using ‘

Ze’ and ‘They’ but might revisit these options laterAudio clip:http://www.bbc.co.uk/programmes/p0483lnc00:46 >> 04:5722:51 >> 23:20

Copyright © 2016 BBC. All rights reserved.Slide33

Resources: Further Reading

Nonbinary StatsThe blog for the annual survey of nonbinary, genderqueer, gender-variant and gender-nonconforming humans worldwidehttp://nonbinarystats.tumblr.comThe Nonbinary

Inclusion Project

A grassroots organisation fighting for the inclusion and recognition of

nonbinary

people in law, media and everyday life within the UKhttp://nonbinary.co.ukAll About TransPositively changing how the media understands and portrays transgender people. Stories, media interactions, resources and supporthttp://www.allabouttrans.org.uk‘Emotional Intelligence in Design - How Design Grows Up’By Beth Dean, Facebookhttps://medium.com/facebook-design/emotional-intelligence-in-design-abcd1555b3e7#.ut5r2t9v0

'The (frustrating) User Experience of defining your own ethnicity’

By

Fabricio

Teixeira

https://uxdesign.cc/the-frustrating-user-experience-of-defining-your-own-ethnicity-50b0edc87a6e#.ddrhp93kk

”Software conference focuses on gender diversity”

By Kevin Scott, The Herald

http://m.heraldscotland.com/business/14617288.Software_conference_focuses_on_gender_diversity/Slide34

Resources: Videos

‘Technology - The Power and The Promise’ by Robin Christophersonhttps://vimeo.com/165995026‘How to ask about gender’ by Chad Gowler

https://vimeo.com/166790858

‘

Infinite

Canvas 6: Vestibular Disorders and Accessible Animation’ by Rachel Nabors and Greg Tarnoffhttps://www.youtube.com/watch?v=QhnIZh0xwk0

"I'm not a boy or a girl. I'm both

.”

A

ten-year-old talks about being gender

non-binary

Interview with Jennifer

Tracey

http://

www.bbc.co.uk/programmes/p0483lncSlide35

Resources: Libraries and tools

’Motion Detector’ a JavaScript library designed to give the user control over animationshttps://github.com/gtarnoff/omrijs‘Gender Amender’ for

improving gender options in dropdowns

https

://

github.com/anne-decusatis/genderamenderColour Contrast AnalyserMac & Windows free downloadhttps://www.paciellogroup.com/resources/contrastanalyser/

Copyright

©

2015 Anne

DeCusatisSlide36

Resources: eBooks

Compassionate Design‘Design for Real Life’ by Sara Wachter-Boettcher and Eric Meyer‘Designing for Emotion’ by

Aarron

Walter

https://abookapart.com/collections/compassionate-design© Copyright 2016, A Book Apart, LLCSlide37

Thank You

Resources suggested by:Greg Giltrow-Tyler DeveloperApplications

Division, ISG,

UoE

Peter

PrattSenior Analyst DeveloperApplications Division, ISG, UoEMarissa WuWeb Interfaces ManagerLTW Division, ISG, UoELicensing:Copyright © Stewart Lamb Cromar, University of Edinburgh 2016 CC BY-SA

4.0

Attribution-

ShareAlike

4.0

International

https://creativecommons.org/licenses/by-sa/4.0

/