Meryem Ghatrif
Meryem Ghatrif

Contents

[email protected]

Pensées · Flowers & UX

Flowers did UX before us

User experience is older than screens. Real stories from a door, a cockpit and a kitchen in Provence, the flowers that got there first, and five questions to ask about your own website.

7 min read

You walk up to a glass door, see a handle, and pull. Nothing. You push, a little embarrassed, and glance around to check that nobody saw.

It wasn’t you. Designers call it a Norman door, after Don Norman, author of The Design of Everyday Things. The giveaway is often a sign that says PUSH: a door that needs instructions is already failing.

A door sometimes needs a sign. A flower never does.

A flower wears its signals on its petals, and its visitors read them at a glance: where to land, which way to go, whether a visit is worth it. Its future depends on being read: the visitors who find their way carry the pollen that turns flowers into seeds.

That is user experience, long before anyone named it. Norman coined the term at Apple in 1993, but as early as 1955, the industrial designer Henry Dreyfuss put it plainly: “When the point of contact between the product and the people becomes a point of friction, then the industrial designer has failed.”

A confusing door costs you a second and a blush. A confusing website costs more: a booking that never happens, a form abandoned halfway, a customer who quietly goes elsewhere. User experience, or UX, is the craft of that moment, when a person meets a thing and has to work out what to do.

A path drawn on the petal

Norman gives us two useful words. An affordance is what a thing lets you do; a signifier is what tells you so: a flat plate says push, a handle says pull. In the Interaction Design Foundation’s words, “affordances are possible interactions; signifiers are design properties that announce affordances.” A Norman door has the right affordance and the wrong signifier.

Now kneel down next to a heartsease, the wild pansy that is this site’s flower, and look closer. Fine dark lines run across its lower petals and all lead towards the centre: botanists call them nectar guides. They point to the opening where the nectar waits, in a spur at the base of the lowest petal, and that broad petal doubles as a landing platform. Affordance and signifier, in a single flower.

Some guides aren’t even meant for our eyes. Bees see ultraviolet light, which we can’t, and ultraviolet patterns are widespread among flowers. The petals of a black-eyed Susan look evenly yellow to us; in ultraviolet, their inner halves turn dark, drawing a bullseye around the centre.

In a 2014 study, researchers misted these flowers with sunscreen to hide the pattern. Insect visits collapsed: 5, against 57 for flowers misted with plain water.

Your website works the same way. A button that books a table should look like a button, and the path to what matters most should be as clear as the lines on a petal. Hide the guide, and visitors leave.

Two levers that looked alike

In 1943, a young American psychologist, Alphonse Chapanis, was asked to find out why pilots kept retracting the wheels instead of the flaps after landing. Accident reports had a ready answer, a phrase that turned up more and more often during the war: pilot error.

Chapanis looked closer at the cockpits instead. In the planes involved, the wheel and flap controls sat side by side, as identical toggle switches or nearly identical levers. In one transport plane, where the two controls were apart and worked differently, copilots never made that mistake. The so-called pilot errors, he saw, were design errors built into the cockpit.

The wartime fix was almost comically small: a little rubber wheel on the end of the landing-gear control, a small wedge on the end of the flap control. Pilots could tell them apart by touch, and on the modified planes the wheels stayed down. After the war, shape-coded controls like these were standardised worldwide.

When people keep making the same mistake, look at the design before you blame them. And when two actions have very different consequences, like “Save” and “Delete”, don’t let them look like twins.

The flower that changes its sign

You press the call button for the lift. It lights up, and you stop pressing. When it doesn’t light up, you press again, harder, as if the lift could feel your impatience.

That little light is feedback: an answer that says “I heard you”. Norman counts it among his core principles: respond at once, so people know what happened and what to do next.

The horse chestnut has a version for bees. Each white flower is marked with a patch of yellow, its nectar guide. Once the flower is pollinated, the patch turns red, and nectar and scent production drops sharply or stops. Insects find the red patches unattractive, which presumably spares bees from wasted visits.

The old flowers stay on the tree, though. Botanists suggest this keeps the whole tree looking big and bright from far away, while each patch tells a bee, up close, whether landing is worth it.

That is a lovely model for a shop window or a website: keep the display full, and mark clearly what is no longer available. A sold-out size that stays visible but greyed out saves a click and a disappointment. A form that says “Message sent” saves someone from sending it twice.

Made for one hand, good for many

Sam Farber had just retired from the cookware company he had founded, and he and his wife Betsey, an architect, had gone to Provence to spend time on art and cooking. In their Provençal kitchen, he watched her struggle with an old-fashioned peeler: Betsey had arthritis in her hands. The Cooper Hewitt museum sums up the question that followed: “Why hadn’t these objects evolved to accommodate users, rather than the other way around?”

Farber founded OXO in 1989, working with the New York firm Smart Design. The first Good Grips tools, launched in 1990, had large oval handles, soft non-slip grips, and shapes meant to let the tool do the work rather than the hand. They were made for users of every age and ability, starting with hands like Betsey’s.

Cities know this pattern. One evening in the early 1970s, Michael Pachovas and a few friends, disability activists in Berkeley, California, poured cement into a rough ramp at a curb and rolled off into the night. In 1972, the city installed its first official curb cut.

Built for wheelchairs, curb cuts turned out to serve parents with strollers, workers pushing heavy carts and travellers with suitcases. In 2017, Angela Glover Blackwell called this the “curb-cut effect”. Microsoft’s inclusive design principles say it simply: solve for one, extend to many.

Petals know it as well: most flowers have tiny cone-shaped cells on their petals that give insects grip. When researchers at the University of Cambridge offered bumblebees flowers held flat, the bees didn’t mind whether those cells were there; when the flowers were steep and hard to hold, they learned to choose the grippy ones. A comfort on an easy day becomes a necessity on a hard one: that is the whole case for accessible design.

Look closer

Look back at these stories: a wheel on a landing-gear lever, a peeler shaped for Betsey Farber’s hands, a ramp cut into a Berkeley curb, a petal that gives bees a place to land. Each one is a portrait of the person, or the visitor, it was made for.

Remember the door from the beginning? It was a portrait too: of someone who never watched people walk up to it.

Now look at your own website, shop or service the same way. Whose portrait would a stranger see: your customer’s, or your organisation chart’s?

My garden is my refuge and my lab. From a few steps away, my amaryllis is just a big red and white flower. Up close, fine red lines run along every petal and all lead to its pale heart, like the lines on a heartsease. Nature turns out to be infinite once you look closely. That is why this site has a loupe, and why I believe good design starts with attention, long before anyone opens a screen.

Close-up of a red and white amaryllis: fine red lines on each petal lead to a pale centre, where curved white stamens end in yellow tips.
My amaryllis, up close.

Five questions to take outside

  1. What does it say before anyone reads it? Look at your homepage, shop front or form as a newcomer would. Do the shapes and colours lead to the one thing that matters most?
  2. Where do people keep making the same mistake? Ask whoever answers your phone or your emails. Then fix the design, not the people.
  3. How does it answer back? After a payment, a message or a booking, is there a clear sign that it worked?
  4. Who struggles first? Someone on a small phone in bright sun, someone with tired eyes or sore hands, someone reading in their second language. Design for them, and everyone gains.
  5. Whose portrait is it? Describe, in one sentence, the person your design was made for. If you can’t, start there.

Then take a loupe, or just your attention, and look closely at a flower, a heartsease perhaps. It has been answering these questions for a very long time.

Sources