User Unfriendly A Practical Guide to Losing Control

Miriam Suzanne | @mirisuzanne | @oddbird


User Unfriendly A Practical Guide to Losing Control

Open Source Conference — June 20, 2019

OddBird Faces

OddBird Web Consulting

Custom Apps, Design Systems, Refactors…

OddBird siblings (Jonny, Carl, and Miriam) in 1994

Susy is based on Natalie Downe’s CSS Systems

And Nicole Sullivan’s OOCSS

Re-imagined in Sass (I’m now a member of the core team)

I created my GitHub account later that day

Susy is named after a character in my first (Creative Commons) novel

Write Sass unit tests with OddBird’s True

Slide from Olivier Crête of Collabora

OddBird’s Herman design-system site generator

New World Arts 2006 production of “Hello and Goodbye” (Athol Fugard)

Anne Bogart

SITI Company

SITI Company 2017 production of “Hanjo” (Yukio Mishima)

Mary Overlie’s original “Viewpoints” were envisioned for dance

Ensemble Devised Theater

Like Agile™, for Theater

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)

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…?

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?

! 👨

Empathy is Not Enough

Listening > Imagining

Culture Add > Culture Fit

No shit, Ev. From Business Insider

New Republic, August 31, 2017

Real Problems?


Diverese People


Ask Them

“If I had asked people what they wanted, they would have said faster horses.”

Henry Ford John McNeece (kinda)

Users are Experts

Users are Experts

Users are Experts

Users are Experts

Users are Experts

Users are Experts

User Expertise:

  1. End Goals
  2. Existing Solutions
  3. Points of Failure

User Blind Spots:

  1. 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.

Jakob Nielsen

“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

You cannot create results. You can only create conditions in which something might happen.

—Anne Bogart, A Director Prepares

Test & Trust

Bootstrapping vs Plug-and-play


Augmenting Human Intellect

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

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)

Susy is written in Sass, and used in Sass


It Just Works

Steve Jobs, Apple II (1993)

Identical, Easy-to-Use, Low-Cost Appliance

Intuitive” or “Invisible”?

Open” or “Adaptable”?


It Depends

What’s in a Medium?

Affordances & Constraints

Medium With a Mission:

Web for all.

Web on everything.

World Wide Web Consortium, 1989

CERN first website, with line-mode browser simulation

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

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

  1. Color
  2. Form
  3. Line
  4. Shape
  5. Space
  6. Texture
  7. Value

Viewpoints of Theater

  1. Spatial Relationship
  2. Kinesthetic Response
  3. Shape
  4. Gesture
  5. Repetition
  6. Architecture
  7. Tempo
  8. Duration
  9. Topography

Aspects of the Web?

  1. Size
  2. Browser
  3. Operating System
  4. Language
  5. Access Type (visual, audio, etc…)
  6. Interaction Type (mouse, touch, etc…)
  7. … ?

“Experimental” is a Process

hypothesis » test » adjust

Not a reason to make people sit through shitty performance art…

Tight Feedback Loop

Test, Test, Test

Ugly Helps (Isolate Variables)

Use sketches & wireframes to focus on what’s important

Less Theory, More Practice

put options in front of users

Know Where You Are

  1. Define the Seed: What’s the idea, question, or hypothesis?
  2. Explore: Research, gather, and create the materials…
  3. Organize: Outline the structure, or impose one…
  4. Draft: Make something that flows…
  5. 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

[Agile] Cycles

Iterate, Iterate, Iterate

Stay in touch…