A presentation at Web Unleashed in in Toronto, ON, Canada by Andréa Crofts
@A N DRE AC ROFTS • IN CLU S IV E IN P U TS Inclusive Inputs A formative lesson in inclusivity for the web’s most beloved UI pattern.
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS BECA ME A DEVE LOPER REAL IZE D MY TRU E LOVE ( DESIGN) FOLLOW ED MY HEART HackerYou TWG League
@A N DRE AC ROFTS • INC LUSIVE INPUTS She/Her/Hers Hand-Letterer Product Design Leader Community Builder Abuser of Expletives Recovering Front-End Dev
@A N DRE AC ROFTS • INC LUSIVE INPUTS Software Developers and Designers are basically digital urban planners.
@A N DRE AC ROFTS • INC LUSIVE INPUTS We have a big impact on digital neighbourhoods.
@A N DRE AC ROFTS • INC LUSIVE INPUTS And a responsibility to make them safe and inclusive for all.
@A N DRE AC ROFTS • INC LUSIVE INPUTS It’s our responsibility to design spaces where everyone is welcome.
@A N DRE AC ROFTS • INC LUSIVE INPUTS Let’s take inclusion from theory to practice.
@A N DRE AC ROFTS • IN CLU S IV E IN P U TS TO DAY’S AGENDA 01 An informative history Hello. 02 Universal Form Design 03 Best-In-Class Examples 04 Key Takeaways
@A N DRE AC ROFTS • INC LUSIVE INPUTS PART O NE An Informative History
@A N DRE AC ROFTS • INC LUSIVE INPUTS CHA RLES BABBAGE The Father of Forms
@A N DRE AC ROFTS • INC LUSIVE INPUTS Since the beginning, forms have been about efficiency.
@A N DRE AC ROFTS • INC LUSIVE INPUTS …but, at the cost of humanity.
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS WHY AR E FORMS SO IMP ORTAN T? Poor usability could cost someone their mobility, or even their citizenship.
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS WHY AR E FORMS SO IMP ORTAN T? It could cost someone thousands of dollars in out-of-pocket insurance expenses.
@A N DRE AC ROFTS • INC LUSIVE INPUTS LET ’S BE HONEST Insurance pretty much sucks.
@A N DRE AC ROFTS • INC LUSIVE INPUTS “Anything to do with health insurance is generally terrible.” - MOST PEOPL E Note: They’re not saying this about League !
@A N DRE AC ROFTS • INC LUSIVE INPUTS Insurance is a formative time when people consider their identity.
@A N DRE AC ROFTS • INC LUSIVE INPUTS PART T WO Universal Form Design
@A N DRE AC ROFTS • INC LUSIVE INPUTS Diversity is a fact Inclusion is a choice - JU STIN TR U DE AU Prime Minister of Canada "
@A N DRE AC ROFTS • INC LUSIVE INPUTS Spectrums vs. Binaries
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS WE B ACC ESSIB ILIT Y The inclusive practice of removing barriers that prevent interaction with or access to websites Source: Wikipedia
@A N DRE AC ROFTS • INC LUSIVE INPUTS Think of something you’ve been struggling with your whole life.
@A N DRE AC ROFTS • INC LUSIVE INPUTS …something unresolved, yet it defines who you are.
@A N DRE AC ROFTS • INC LUSIVE INPUTS Now, imagine you’re filling out a form, and you come face to face with that struggle.
@A N DRE AC ROFTS • INC LUSIVE INPUTS How does that make you feel?
@A N DRE AC ROFTS • INC LUSIVE INPUTS What lived experiences are flashing before your eyes?
@A N DRE AC ROFTS • INC LUSIVE INPUTS Forms are a powerful reminder of identity.
@A N DRE AC ROFTS • INC LUSIVE INPUTS The gender you identify with is not a valid option.
@A N DRE AC ROFTS • INC LUSIVE INPUTS How do you embody a category of experience that many people don’t even believe exists? ALEX VERMAN Source: Them
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS How do you make sense of your body and how it’s changing when all available narratives feel too gendered to apply? ALEX VERMAN Source: Them
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS GOVER NMENT AC TION On May 4, Ontario, Canada resident Joshua M. Ferguson was issued the province’s first nonbinary birth certificate. Source: NBC News
@A N DRE AC ROFTS • INC LUSIVE INPUTS TH E R ESE A RC H E RS Enter, two CISgendered women. #$
@A N DRE AC ROFTS • INC LUSIVE INPUTS Female Male Transgender Transgender Man Transgender Woman Gender Non-Conforming
Non-Binary Agender Genderqueer Queer Intersex Two Spirit He/She/Them/Ze/Zir
@A N DRE AC ROFTS • INC LUSIVE INPUTS 12 WE TALKED TO Research Participants across a spectrum of identities and sexual orientations. *I’ve removed all identifiable characteristics to protect participants’ confidentiality. Photos are for illustrative purposes only, and are not photos of our real participants.
@A N DRE AC ROFTS • INC LUSIVE INPUTS “As people on the fringes, we can tell when we weren’t considered.” - A N ON Y MOU S Queer Participant
@A N DRE AC ROFTS • INC LUSIVE INPUTS “Some companies approach this very thoughtfully, some are pretty ignorant, and others try but miss the mark.” - SEVE RA L PA RTIC IPA N TS
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS SP OIL E R A L E RT: We tried, but missed the mark.
@A N DRE AC ROFTS • INC LUSIVE INPUTS CULPRIT 1 o f 5 Gender
@A N DRE AC ROFTS • INC LUSIVE INPUTS USER FEE DBACK “The fact that it’s an add-on makes it feel like there’s a primary path for the general public and a separate path for us.”
@A N DRE AC ROFTS • INC LUSIVE INPUTS USER FEE DBACK “The fact that our society often doesn’t look beyond male or female doesn’t mean the way we identify is invalid. It just means that society isn’t able to read us properly.”
@A N DRE AC ROFTS • INC LUSIVE INPUTS USER FEE DBACK “It’s important to not position different sexual orientations and identities as an “other” but as one option among many different categories.”
@A N DRE AC ROFTS • INC LUSIVE INPUTS USER FEE DBACK “It’s important to provide a multi-select option to select the multiple ways that one might identify. For example, someone could be transgender, and a woman.”
@A N DRE AC ROFTS • INC LUSIVE INPUTS USER FEE DBACK “I take some kind of perverse pleasure from using the ‘prefer not to say’ option. It’s messing up their data collection and I don’t care because they didn’t consider me.”
@A N DRE AC ROFTS • INC LUSIVE INPUTS USER FEE DBACK “Having a list of identities creates a perennial problem because you’re always going to be missing something. I like when I can add more details myself.”
@A N DRE AC ROFTS • INC LUSIVE INPUTS USER FEE DBACK “Having a list of identities creates a perennial problem because you’re always going to be missing something. I like when I can add more details myself.”
@A N DRE AC ROFTS • INC LUSIVE INPUTS Sex = Gender
@A N DRE AC ROFTS • INC LUSIVE INPUTS USER FEE DBACK “From my knowledge of queer and trans theory, gender is performative. It’s not just about how you feel inside, it’s about how you make your way in the world.”
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS FORM FI EL DS FO R M F I EL DS Basic % Best ⭐
@A N DRE AC ROFTS • INC LUSIVE INPUTS CULPRIT 2 o f 5 Citizenship
@A N DRE AC ROFTS • INC LUSIVE INPUTS USER FE E DBACK “It really bothers me when the options in citizenship inputs are simply ‘yes’ or ‘no.’ It creates a dichotomy of citizens vs. Noncitizens.” - Recent Immigrant to Canada
@A N DRE AC ROFTS • INC LUSIVE INPUTS CULPRIT 3 o f 5 Form Fields
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS Stefania Espinosa De Los Moneteros Victor Wolfeschlegelsteinhausenbergerdorff Christopher Mudiappahpillai Dharmendra kumar shah Pablo Diego José Francisco de Paula Juan Dharmendra kumar shah Pablo Diego José Francisco de Paula Juan िनरन्तरान्धकािरत-िदगन्तर-िपपासायास-पिथक-लोकान् Suigyōmatsu Unraimatsu Fūraimatsu
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS
@A N DRE AC ROFTS • INC LUSIVE INPUTS CULPRIT 4 o f 5 Custom Fields
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS
@A N DRE AC ROFTS • INC LUSIVE INPUTS CULPRIT 5 o f 5 Security Questions
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS
@A N DRE AC ROFTS • I N C LUS I V E IN P U TS FORM FI E LDS FO R M F I EL DS Basic % Best ⭐
@A N DRE AC ROFTS • INC LUSIVE INPUTS PART FO UR Key Takeaways
@A N DRE AC ROFTS • INC LUSIVE INPUTS CHECK YO’ SE LF Do we even need to collect this information?
@A N DRE AC ROFTS • INC LUSIVE INPUTS
@A N DRE AC ROFTS • INC LUSIVE INPUTS TA L K TO PEOPL E Inclusion is work, but it simply requires regular conversations.
@A N DRE AC ROFTS • INC LUSIVE INPUTS QA YOU R OW N SH IT Test your inputs with a variety of cross-cultural names.
@A N DRE AC ROFTS • INC LUSIVE INPUTS BE REA L Explain why you need to know.
@A N DRE AC ROFTS • I N C LUS I V E FOR M S Thank you! @andreacrofts acrofts@league.com andreacrofts.com/inclusive-inputs
@A N DRE AC ROFTS • I N C LUS I V E FOR M S Questions? No opinions, please ! @andreacrofts acrofts@league.com andreacrofts.com/inclusive-inputs
What if form inputs were representative of our modern society, and operated in spectrums rather than binaries? It’s time we re-think this age-old input pattern.
As developers, product designers, and digital creators of all kinds, we’re making products for people across the globe. This scope of influence is vast and expansive; geographically and socially. It’s time we get a formative lesson in inclusive form design; we need to make sure we’re not excluding swaths of our the population in a traditional form’s narrow view of identity.
The following resources were mentioned during the presentation or are useful additional information.
A blog by Condé Nast, featuring LQBTQ+ voices
for free. You
can too.