User Unfriendly A Practical Guide to Losing Control
User Unfriendly A Practical Guide to Losing Control
Open Source Conference — June 20, 2019
Three children at a table – playing Magic, The Gathering
OddBird siblings (Jonny, Carl, and Miriam) in 1994
Mozilla, SRAM, ORCAS
Susy
Susy scribbled out
slides showing grid diagrams and calculations, above a picture and bio of Natalie Downe
Susy is based on Natalie Downe’s CSS Systems
A grid of colorful nested boxes with lorem-ipsum text, titled ‘Complicated Nesting AG test’
And Nicole Sullivan’s OOCSS
Sass
Re-imagined in Sass (I’m now a member of the core team)
First git commit of Susy on GitHub, credited to Carl Meyer
I created my GitHub account later that day
Into The Green Green Mud, a novel with pictures
Susy is named after a character in my first (Creative Commons) novel
Screenshot of the Oddbird True website
Write Sass unit tests with OddBird’s True
Writing documentation slide from Olivier
Slide from Olivier Crête of Collabora
OddBird’s Herman design-system site generator
A young man is collapsed on the ground, wrapped in cardboard and surrounded by packing peanuts. His face is hidden, as he cups his sisters hand between his. She seems frustrated, sittting next to him.
New World Arts 2006 production of “Hello and Goodbye” (Athol Fugard)
Anne Bogart
SITI Company
A woman is collapsed on the ground, surrounded by confetti or torn paper. A man next to her leans in, holding a clear briefcase.
SITI Company 2017 production of “Hanjo” (Yukio Mishima)
Anne Bogart’s Viewpoints book cover
Mary Overlie’s original “Viewpoints” were envisioned for dance
Ensemble Devised Theater
Like Agile™, for Theater…
You cannot create results. You can only create conditions in which something might happen.
Anne Bogart, A Director Prepares
Making Theater / Making Software
Making Things For People
Audience / Users / Developers
Making Things With People
Team / Open Source Community
Talk about People
and how we make things for/with each other
Open Source Model
Rejects the Lone Genius Myth *
Rejects Authorial Control *
* Except for Miriam who came up with all of this on her own without any outside influence at all, because she’s sooooooo smart and absolutely in control.
Lone Genius
<-
Lone Genius
->
chapter 1
Making Things For People
Ideas => User Experiences
Performative Turn(s)
Text editor with English and Spanish drafts of my novel
Shuffling the sidesaddle cards
Teacup Gorilla at Larimer Lounge
2016 True West Award in Theater
screenshot of web page markdown, templates, and output html
screenshot of web page markup
screenshot of web page without CSS
screenshot of web page with CSS
miriamsuzanne.com (now with a whole new look)
Looks pretty cool, but having the menu and the text rotated like that just makes them super difficult to read…
—Dude, Online
¯\_(ツ)_/¯
What is User Friendly?
And what’s the opposite…?
Solve real problems. For real people. Using software when it’s the best option.
Twitter thread playing with a tech version of Michael Pollan’s food rules.
Real People
A Queer Theory Primer…
“Strange” or “Peculiar”
1800’s: becomes a (sexual) insult
1980’s/90’s: Reclaimed
A big tent movement
“We’re all the same”
We’re All Different
…but our struggles & identities intersect…
“We’re normal too”
“Normal” is Suspect
Who Defines it? Who Benefits?
“Normal” points to a power-imbalance…
Under an increasing pressure to monetize the data they store, Facebook looks for ways to limit difference across the site.
—Ben Grosser, How the Technological Design of Facebook Homogenizes Identity and Limits Personal Representation
Single “Real” Identity?
First Name / Last Name?
Male / Female / Other?
! 👨
Masculine emojis
Feminine emojis
Various people emojis
Empathy is Not Enough
Listening > Imagining
Culture Add > Culture Fit
A Twitter cofounder says a more diverse team would have addressed abuse earlier. Science says he’s probably right.
No shit, Ev. From Business Insider
Turns Out Algorithms Are Racist
New Republic, August 31, 2017
Real Problems?
Find
Diverese People
and
Ask Them
“If I had asked people what they wanted, they would have said faster horses.”
—
Henry FordJohn McNeece (kinda)
Users are Experts
Users are Experts
Users are Experts
Users are Experts
Users are Experts
Users are Experts
User Expertise:
- End Goals
- Existing Solutions
- Points of Failure
User Blind Spots:
- Interface Design
Ask about Problems, not Solutions
works with art feedback as well…
Always Ask Why
look for the root causes…
Analyze Patterns
common pain-points, related issues, etc…
Recognize Personal Bias
When the Problem is in Act V, The Solution is Often in Act I
Set Meaningful Goals
click-through rates are not universal success
Know Your Innovation Budget
Users spend most of their time on other sites. This means that users prefer your website to work the same way as all the other sites they already know.
Wireframe with top logo and navigation,
a hero image that says we're unique,
and three columns featuring large icons.
“All Websites Look The Same” from NoVolume
Do I want to create work in which everyone feels the same, or everyone feels differently?
—Anne Bogart, A Director Prepares
100s of mobile Devices
No!
You cannot create results. You can only create conditions in which something might happen.”
—Anne Bogart, A Director Prepares
Shuffling the sidesaddle cards
Test & Trust
Bootstrapping vs Plug-and-play
Bootstrapping:
Augmenting Human Intellect
Douglas Engelbart demos modern computing
Douglas Engelbart, The Mother of All Demos (1968) | the mouse, hypertext, view switching, networked computers, early GUI
Providing the means for users to create better tools.
Users are Experts
Users are Experts
Users are Experts
Users are Experts
Users are Experts
Users are Experts
Susy
No Susy
Any barrier that exists between the user and some part of the system will eventually be a barrier to creative expression.
—“Design Principles Behind Smalltalk” (Byte 1981)
Sass
Susy is written in Sass, and used in Sass
Plug-and-play:
It Just Works
Steve Jobs sitting cross-legged hugging an early Mac
Steve Jobs, Apple II (1993)
Identical, Easy-to-Use, Low-Cost Appliance
All iPhones
“Intuitive” or “Invisible”?
chart of common touch gestures
“Open” or “Adaptable”?
Raspberry Pi Kit vs Tablet
¯\_(ツ)_/¯
It Depends
What’s in a Medium?
Affordances & Constraints
Medium With a Mission:
Web for all.
Web on everything.
—World Wide Web Consortium, 1989
Old IBM desktop
Screenshot of first world wide website
CERN first website, with line-mode browser simulation
Desktops
All iPhones
Several tablets
100s of mobile Devices
Lineup of smart watches
The Web is…
Contextual by Design
The Web is…
Resilient by Design
The Web is…
Customizable by Design
The fact we can control a paper page is really a limitation of that medium.
—John Allsopp, A Dao of Web Design (April 07, 2000)
Why HTML/CSS are Declarative
Too Many Variables
The Web Model
Is User-Controlled By Design
chapter 2
Making Things With People
Creativity isn’t magic. It happens by applying ordinary tools of thought to existing materials.
—Kirby Ferguson, Everything is a Remix
copy, transform, combine
Kirby Ferguson, Everything is a Remix
No Lone Genius*
* Except for Miriam
<-
->
¯\_(ツ)_/¯
You cannot create results. You can only create conditions in which something might happen.”
—Anne Bogart, A Director Prepares
Present Context & Tradeoffs
establish yourself as a teammate…
Mind Games Always Backfire
Encourage Playfulness
“Spark & Slip”
Question Your Assumptions
Consider The Opposite
Use All The Tools
Unison, Harmony, & Dissonance
Look at Different Angles
Elements of Design
- Color
- Form
- Line
- Shape
- Space
- Texture
- Value
Viewpoints of Theater
- Spatial Relationship
- Kinesthetic Response
- Shape
- Gesture
- Repetition
- Architecture
- Tempo
- Duration
- Topography
Aspects of the Web?
- Size
- Browser
- Operating System
- Language
- Access Type (visual, audio, etc…)
- Interaction Type (mouse, touch, etc…)
- … ?
“Experimental” is a Process
hypothesis » test » adjust
Not a reason to make people sit through shitty performance art…
Riding Sidesaddle*
Tight Feedback Loop
Test, Test, Test
Ugly Helps (Isolate Variables)
Use sketches & wireframes to focus on what’s important
UX sketch
UX wireframes with colors/fonts removed
Clickable wireframes
Less Theory, More Practice
put options in front of users
Know Where You Are
- Define the Seed: What’s the idea, question, or hypothesis?
- Explore: Research, gather, and create the materials…
- Organize: Outline the structure, or impose one…
- Draft: Make something that flows…
- Revise: Consider, critique, and edit as needed…
We need to be in the open mode when we’re pondering a problem, but once we come up with a solution, we must then switch to the closed mode to implement it.
—John Cleese