Tools that make us superheroes: A case for embedding behaviour into design

This story starts with me shopping in my local hardware supplies store. I was walking into the store and saw a stack of beer coolers. It was a weird looking beer cooler — it was narrow, with a cricket wicket* attached. What the heck was this thing?

I then realised I was looking at a product that was a collision — or more of a car crash — of behaviour and product. The cricket cooler. It combines a sporting activity with a physical insulated box.

Realising what the product was suddenly gave clarity to something I’d experienced, and something that anyone who makes stuff knows: the best products embed existing behaviour into them, extending existing gestures. That is, the best tools are those that take what you do already, and turn you into a superhero.

*What the heck is a wicket?

For my American friends, think of cricket as baseball with only two bases you run between. And imagine both bases have three poles stuck in them, which a fielder can hit with a ball to count as ‘out’.

Backyard cricket is a common variation in Australia for four-eight family members. It has a set of ‘rules’ which evolved the traditional rules to make it more fun. It’s very popular.

The cooler is the wicket

An additional fact important to this story is that it’s common to use a beer cooler as wickets. An insulated beer cooler is approximately the same area as a set of wickets. It’s robust. And it makes a loud thump when the ball hits it, signalling ‘out’.

Result: A cricket cooler, with compromises

So, building on this tradition, someone had the idea to build cricket wickets into the cooler itself. The box additionally references the rules of backyard cricket. Wherever you go, you’re ready for a game. The problem is, there are many compromises made to the cooler:

• The ‘wickets’ block the lid from opening;
• The cooler is narrow, perhaps to better approximate wicket dimensions, meaning less room for beer, which is a big downside; and
• The whole world doesn’t play cricket (hello America).

A better result: Take out an AirPod, pause music

This is my favourite example of a design that augments with an existing gesture. When you have headphones on, it’s common to remove one temporarily to listen to something or someone. AirPods detect this, and pause audio. If you put an AirPod back in your ear within a minute or so, then playback resumes. The experience is particularly magical when you’re watching video. In this case, the design is a natural extension that doesn’t compromise the core listening experience.

Another example: Auto-formatting

Medium, Google Docs, Evernote and others automatically convert approximations of formatting into the correct ones.

Each have adopted the behaviour of automatically turning a new line that starts with an asterisk into a bullet point. The user writes using plain text, but produces a formatted document. Markdown takes the idea of replacing text with actual formatting much further, reaching beyond what might be intuitive.

Physical tools

A spoon, hammer, fork, pliers, screwdrivers and many other hand tools extend a physical gesture for more precision and power.

Similarly, a basket augments the gesture of grabbing and carrying with your arm hanging down.

Don’t be like Clippit

Clippit was a talking paperclip that interjected itself into your life. It suggested ‘help’ unexpectedly, and often, unhelpfully.

What made Clippit annoying in a way that other tools are not?

• Clippit appeared as a new UI element. This distracted from the existing experience.
• Clippit added steps to the process, rather than removing them.
• Clippit was a personification, which booted up all the parts of your brain that deals with other people.

Good design is invisible

Good behavioural embedding is, at its best, invisible. I think this is why we become blind to it. And so, when we see something we don’t like, our reaction is often ‘things should just stay the same until I do something explicitly.’ But a good tool design is already transparently extending our gestures.

Take mouse acceleration, for example. If you move your mouse fast, the cursor will travel a much greater distance than if you move (the same physical distance) slowly. It’s not simply a faster mapping of the mouse to the screen, it’s a second derivative — your faster hand-speed produces a faster multiplier.

It’s so standard, in fact, that it’s not even presented as an option — at least on the Mac. It’s simply baked in.

(In hardcore gaming it does have some controversy. And it seems there’s some optimization to a pan VS flick mapping.)

Scroll views on mobile devices work similarly. If a scrollable view is already moving, a flick will produce an amplified result.

Both of these mechanisms map to your intention to get somewhere fast.

These are some of my favourite things

I love this stuff. It’s almost a hidden art — there’s no screenshot of glossy buttons for hip designers to boast about on sites like dribble. It’s all about how it works, not looks.

It’s not a ‘delight’ moment, because the user won’t even notice it when done well. They just feel as if they can suddenly go faster, do things with more precision, or are now more knowledgeable and competent.

This article was originally published on Medium. Read the original article.

NOW READ: “It was glorious”: I remote usability tested and here’s everything I learnt