🏠

User Unfriendly A Practical Guide to Losing Control

Miriam Suzanne | @mirisuzanne | @oddbird

OddBird

User Unfriendly A Practical Guide to Losing Control

Design 4 Drupal — June 27, 2019

OddBird Faces

OddBird Web Consulting

Custom Apps, Design Systems, Refactors…

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

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

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…

Our Process

Making Things With People

Conditions for Creation

Our Product

Making Things For People

Conditions for Interaction

chapter 1

Making Things For People

Ideas => User Experiences

Performative Turn(s)

Marcel Duchamp Fountain, 1917, photograph by Alfred Stieglitz

a.k.a. R Mutt – sent it to Duchamp several days before he “created” it

The Lone Genius Myth *

Down with that sort of thing!

* 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

->

We Choose The Medium

(and we often mix media)

Theater ==

Dance + Words + Architecture + Lights +…

Web ==

Text + Media + Interactions + Semantics +…

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?

[Drum Roll, Please]

Users Are All Different

experiences, associations, skills, limitations

Don’t take my word for it, trust Ray Charles

No One is an Edge Case

when

Everyone is an Edge Case

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…

Hat tip @GenderTitle

“Othering”, like literally

First Name / Last Name?

(and that name never changes…)

Single “Real” Identity?

(and no code switching ever)

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

New Republic, August 31, 2017

👨 <- Who Benefits?

Empathy is Not Enough

Listening > Imagining

No shit, Ev. From Business Insider

Find

People

and

Ask Them

Ask Different People

Users are Experts

Users are Experts

Users are Experts

Users are Experts

Users are Experts

Users are Experts

Users are Experts

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

—Henry Ford John McNeece (kinda)

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

Jon Tan speaking at An Event Apart

Jon Tan speaking at An Event Apart

Do I want to create work in which everyone feels the same, or everyone feels differently?

—Anne Bogart, A Director Prepares

Know Your Innovation Budget

miriamsuzanne.com (now with a whole new look)

Test & Trust

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

It takes craft to set up the circumstances that are simple and yet contain the ambiguities and the incongruity of human experience.

—Anne Bogart, A Director Prepares

What’s in a Medium?

Web has a Mission:

Web for all.

Web on everything.

—World Wide Web Consortium, 1989

CERN first website, with line-mode browser simulation

The Web is…

Accessible by Design

The Web is…

Contextual by Design

The Web is…

Resilient by Design

The Web is…

Customizable by Design

The Web Model

Is User-Controlled By Design

HTML/CSS are Declarative

Too Many Variables

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)

Affordances & Constraints

Broadly Accessible

Limited Authorial Control

Limited Business Control?

Bootstrapping vs Plug-and-play

Bootstrapping:

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

Plug-and-play:

It Just Works

Steve Jobs, Apple II (1993)

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

“Intuitive” or “Invisible”?

“Open” or “Adaptable”?

¯\_(ツ)_/¯

It Depends

Humane By Design Principles

Twitter thread playing with a tech version of Michael Pollan’s food rules.

chapter 2

Making Things With People

Delegate and Present

balancing solo & group time is essential

Present Context & Tradeoffs

establish yourself as a teammate…

Mind Games Always Backfire

No Lone Genius*

No 10x-ers

* Except for Miriam

<-

->

“Experimental” is a Process

hypothesis » test » adjust

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

[Agile] Cycles

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…

Less Theory, More Practice

put options in front of users

Tight Feedback Loop

Test, Test, Test

Ugly Helps (Isolate Variables)

Use sketches & wireframes to focus on what’s important

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

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

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

Iterate, Iterate, Iterate

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

—Anne Bogart, A Director Prepares

Debby Levinson

Uncertainty Principles

Friday, June 28 @ 1pm

Stay in touch…