New Sources of Inspiration
for Interaction Designers
Dan Saffer
dan@adaptivepath.com
As you’ll see in a moment, the title for this
talk is really a misnomer. There is nothing
new about these sources of inspiration, they
are only new to us.

Where do we get
inspiration for designs?
the elements of user experience — 29 february 2005 2

New Sources of Inspiration for Interaction Designers 3
Inspiration is a bit like this cartoon, isn’t it.
Somehow, we get it, but we seldom take a
deep look at step two. It’s a bit of a black
box.

WWAD?
New Sources of Inspiration for Interaction Designers 4
Our first instinct is to go to the digital for inspiration, right? What would Apple do? This makes
sense, of course, because other designers have already done the thinking for us! Why wouldn’t we
just steal all their ideas? I mean, Microsoft does this all the time right?

PATTERNS
New Sources of Inspiration for Interaction Designers 5
But maybe you’re more sophisticated than that. You get your patterns from a well-written book!

PATTERN LIBRARIES
New Sources of Inspiration for Interaction Designers 6
Or even better, from a library of patterns. All of this is well and good, of course. There is no harm in
borrowing ideas and it certainly isn’t necessary to reinvent the wheel every time. But sometimes,
sometimes, you need just a little bit more. Something BETTER than what is out there already. And
for that, you need a different pattern library.

THE PATTERN LIBRARY
New Sources of Inspiration for Interaction Designers 7
You need this one. The world should be our pattern library. We need to not immediately turn to the
digital for our inspiration. Instead, we should look at the world around us with fresh eyes. How can
we use the world as our pattern library?
The world is a big place though. Where shall we look? I like looking at other products made by
humans.

New Sources of Inspiration for Interaction Designers 8
Architecture

New Sources of Inspiration for Interaction Designers 9
Film

New Sources of Inspiration for Interaction Designers 10
Machinery

PRODUCTS NOT PROCESS
New Sources of Inspiration for Interaction Designers 11
In this talk, I’m going to look at a teeny tiny fraction of what they have produced, not how the
industries have made the products. There is a lot to learn there, too, but we only have an hour here,
people!

To design means forcing ourselves
to unlearn what we believe we already
know, patiently take apart the
mechanisms behind our reflexes and
to acknowledge the mystery
and stupefying complexity of everyday
gestures like switching off
a light or turning on a tap.
Alain de Botton the elements of user experience — 29 february 2005 12

ARCHITECTURE
the elements of user experience — 29 february 2005 13
Let’s start with architecture.

New Sources of Inspiration for Interaction Designers 14
This is the Winchester Mystery House.
It was built by Sarah Winchester, the widow of gun magnate William Wirt Winchester. Under Sarah
Winchester's guidance, construction on the house continued 24 hours a day, seven days a week, 365 days a
year, until her death 38 years later on September 5, 1922. There are 160 rooms, including 40 bedrooms and
two ballrooms. The house also has 47 fireplaces, 10,000 window panes, 17 chimneys (with evidence of two
others), two basements and three elevators. The cost for such constant building has been estimated at about
US $5.5 million. The mansion is renowned for its size and lack of a master building plan. According to popular
belief, Sarah Winchester thought the house was haunted by the ghosts of individuals killed by Winchester
rifles, and that only continuous construction would appease them.
The Winchester House is everything you don’t want to draw inspiration from. Staircases end in walls. Windows
open to nothing.

New Sources of Inspiration for Interaction Designers 15
But what can we learn from architecture, regular architecture? How can we take the buildings all
around us and make them part of the work we do?

A building must do two things:
it must shelter us and it must
speak to us of the things we find
important and need to be
reminded of.
John Ruskin
the elements of user experience — 29 february 2005 16
Our buildings need to shelter us. That is, they need to be
usable and useful. And they need to speak to us. They need to
be desirable. 1BC Roman architect Vitruvious put it this way.
Buildings should be firmitas, utilitas, venustas - that is, it must
be strong or durable, useful, and beautiful.

New Sources of Inspiration for Interaction Designers 17
This is a modern American floorplan. What can you tell me about this house from it?
Look how space is allocated here. What is the most important room in the house?

New Sources of Inspiration for Interaction Designers 18
Now look at this Victorian floor plan. What is different? What is the house saying to us?

In essence, what works of design and
architecture talk to us about is the
kind of life that would most
appropriately unfold within and
around them...They speak of visions of
happiness.
Alain de Botton
the elements of user experience — 29 february 2005 19
Those two houses weren’t designed that way by
accident. They speak of what the architect’s
regarded as happiness. Family room lifestyle vs.
receiving guests and formal dining with family.

New Sources of Inspiration for Interaction Designers 20
What we design is no different, really. I mean, what is the most important thing here?
YOU! What YOU are doing, you narcissist! I bet the Victorians would never have designed Twitter this
way. If they would have designed Twitter at all.

New Sources of Inspiration for Interaction Designers 21
Architecture can also teach us that one size does not fit all, that “Best Practices” are a place to start,
not to end. What is going to work, design-wise, in a church is not going to work for a home or a
grocery store or a restaurant. We need to approach each design problem fresh, looking at the
context, not just the general shape. “Oh, it’s just a webpage.”

New Sources of Inspiration for Interaction Designers 22
Any architect who tells you that the bathroom always needs to be in a certain place in every house is
obviously insane or a control freak. Why do we think any different from “usability gurus”?

Have nothing in your house that you
do not know to be useful, or believe to
be beautiful.
William Morris
the elements of user experience — 29 february 2005 23
I want to speak specifically about my favorite source of
architectural inspiration. Years ago, I spent about 3 years
restoring an Arts & Crafts house, and I still get a lot of inspiration
from that period of architecture and its philosophy, a bit of which
is this from the spiritual leader of the movement, William Morris.

the elements of user experience — 29 february 2005 24
This is the Gamble House in Pasadena. Designed by the architects Greene and Greene in 1908. I
want us to peel back the layers of what we can learn from just one close observation of one piece of
architecture like this.
For starters, the outside of this house tells you it is an unusual house, even for the times. It makes a
statement and look how rich and warm it is, even though it is a large house (especially for the
times). It’s still approachable.

the elements of user experience — 29 february 2005 25
This is the approach to the front door. And here’s what I love about this. Look at the lamp. Not only
is the lamp gorgeous, it performs two functions at once. It illuminates the walkway and shows the
house number as well. It’s multitasking seamlessly. There was no ruining that awesome oak door
with lettering.

the elements of user experience — 29 february 2005 26
How can we combine functions in a logical, beautiful way in our own designs? Look at the Yahoo
menu bar. It shows on it not just where you can go, but also where you’ve been! Without you having
to do anything. It multitasks in an elegant way.

the elements of user experience — 29 february 2005 27
Inside, in the living room is this massive fireplace centerpiece. The lines of the ceiling make it clear,
hey, you are entering a different area here. And then, once inside the fireplace zone, there was an
understanding of how the fireplace area was likely to be used: as a sitting room, so benches were
pre-built into the whole area.

the elements of user experience — 29 february 2005 28
Similarly, in the dining room, you get this amazing set of built-in cabinets for holding china and
silverware. It’s next to where it should be: the dining room table, where it will be used.

the elements of user experience — 29 february 2005 29
Adobe’s CS3 does this same trick really well, I think. It says, here’s this special area over here. And
once you are there, here’s a bunch of stuff you might want to use while you are here. It’s smart
clustering based on activities that occur in the same time frame. It even works like the drawers of
the dining room, doesn’t it?

the elements of user experience — 29 february 2005 30
In the kitchen, you get the almost perfect triangle for working, between the stove, sink, and counter
space. While other parts of the house are optimized for luxury, the kitchen is optimized for
efficiency. You can see even the windows are larger to both let in more light and to let air in and out
easier.

the elements of user experience — 29 february 2005 31
We see this efficiency triangle repeated over and over in our applications and it’s not a bad idea to
replicate it yourself in your applications if it makes sense.

the elements of user experience — 29 february 2005 32
What I so love about the Gamble house, and most Arts & Crafts houses in general is that even the
functional has been made beautiful. Nothing ugly, even like here in the attic, remains. How many of
your designs can you say that about?
Detail of functional straps and wedges that bind Oregon Pine corbels in the third-floor attic.

FILM
the elements of user experience — 29 february 2005 33
Let’s turn our attention to another type of
man-made product: films. Film has one
important element of interaction design that
architecture usually doesn’t: movement.

Visual Effects
and Transitions
the elements of user experience — 29 february 2005 34
There are a lot of pieces to most films, pieces
that can inform or inspire.
True story. Remember the scenes in the Indiana Jones movies when Indy is traveling between cities?

New Sources of Inspiration for Interaction Designers 35
One night, while working on Google Analytics, AP Founder Jeff Veen had a dream about it. He had
been working on how to display the big chart at the top of the Analytics data.

New Sources of Inspiration for Interaction Designers 36
And voila, Indy flying from continent to continent became how the data was displayed in Google
Analytics.
Film also gives us great transitions between scenes--transitions that we can use in our designs
between applications or features or content areas.

New Sources of Inspiration for Interaction Designers 37
This is really poorly done, but just even this crude, the movement does something.
Now watch this iPod commercial. In the device, count how many transitions you see.

New Sources of Inspiration for Interaction Designers 38
If you count the number of transitions on the iPhone itself just in that 30 second demonstration, I
count at least eight different effects, from wipes to dissolves to reductions. It’s the transitions,
almost more than anything else, that gives the iPhone its character.

Sound
the elements of user experience — 29 february 2005 39
It’s not just visual effects we can borrow from movies, but sound as well. Look at what Hitchcock
does in The Birds with sound. Listen to this scene.

New Sources of Inspiration for Interaction Designers 40
There is no soundtrack, is there? Just the awful screeching of the Birds that was actually designed by
Bernard Hermann, who usually did the sountracks to Hitch’s films. And yet it is so effective, isn’t it?
Sound is an under-utilized tool in the interaction designer’s toolbox. And while we seldom want a
terrifying sound like in the birds, we do want that one distinct sound that is going to signify
SOMETHING.

Props and Sets
the elements of user experience — 29 february 2005 41
We can steal moods and visual looks from movies. Science fiction can often work well, like in the
1982 classic Blade Runner.

New Sources of Inspiration for Interaction Designers 42
Almost nothing in films has inspired more attention from interaction designers than Minority
Report.

New Sources of Inspiration for Interaction Designers 43
Minority Report created a buzz about touch screen interfaces that we see playing out now in
everything from the iPhone to kiosks.

New Sources of Inspiration for Interaction Designers 44
Jeff Han with his demo for Perceptive Pixel

Title Sequences
the elements of user experience — 29 february 2005 45
Title sequences can be a great source for
interaction designers. Why? because they are
pieces of information design. They have to
convey (at least) two pieces of information:
mood and credits. Watch title credits for two
important things: timing and movement. How
fast do things move? How do they move, if at
all?
Saul Bass was the legendary title credits guy.

New Sources of Inspiration for Interaction Designers 46
Anatomy of a Murder by Saul Bass

New Sources of Inspiration for Interaction Designers 47
Psycho Titles by Saul Bass

New Sources of Inspiration for Interaction Designers 48
Kyle Cooper’s Seven Titles

New Sources of Inspiration for Interaction Designers 49
Olivier Kuntzel and Florence Deygas for Nexus Productions.
Catch Me if You Can

New Sources of Inspiration for Interaction Designers 50
Why does this all matter? Well, look at Stamen Design’s DiggSwarm.

MECHANICAL OBJECTS
the elements of user experience — 29 february 2005 51
The last type of inspirational products I
want to talk about are mechanical objects.

New Sources of Inspiration for Interaction Designers 52
Why bother looking at mechanical objects? One reason is that we’ve stolen a lot of our digital
controls directly from them: our buttons, our dials and sliders. Another reason is simply because
they have been around and evolved a lot longer than we have. As Henry Petrovski says, Form
Follows Failure, and many of these forms have been around and refined over decades of time. How
many websites or mobile phones can you say that about? When people approach our digital
products, they approach them from having spent decades around these mechanical objects.
perhaps not some of the exotic ones I’m showing here, but others like them.

New Sources of Inspiration for Interaction Designers 53
Besides, many of these mechanical objects can be directly translated into our work. Look at how
much the iPhone’s calculator has a debt to this 1970s Braun calculator.

Don’t replicated Mechanical-Age
artifacts in user interfaces without
Information-Age enhancements.
Alan Cooper
the elements of user experience — 29 february 2005 54
We do, of course, have to listen to what Alan
Cooper in About Face says about borrowing
from analog, mechanical objects.

DASHBOARDS AND CONTROL PANELS
New Sources of Inspiration for Interaction Designers 55
There are obviously, literally billions of mechanical objects in the world. And they are all around us
for inspiration if we only look for them. I want to talk about one type of them today, and that is
dashboards and control panels. Why those?

DASHBOARDS AND CONTROL PANELS
New Sources of Inspiration for Interaction Designers 56
Because we’re always asked to design them! This is a control panel. And so is this and this and this.

The Parts and Types
of Control Panels
the elements of user experience — 29 february 2005 57
There are three kinds of control panels, but each
is made up of the same parts.

DISPLAYS, CONTROLS, LABELS
New Sources of Inspiration for Interaction Designers 58
There are three parts to any good dashboard or control panel: displays that show necessary
information for users to make informed decisions, controls for manipulating the system (whatever it
is), and labels on the controls to explain what they do.
Maytag washing machine.

“INVISIBLE STATE” DASHBOARDS
New Sources of Inspiration for Interaction Designers
The allocation of those three items varies by the type of device it is. For mechanical objects like the
washing machine, about half the space is given over to displays. Why? Because in order to control
this, you have to have a good idea of what the current state of the system is, and that isn’t apparent
by just looking at it.

New Sources of Inspiration for Interaction Designers 60
This is true for many systems that users are expected to know. Think about your car, for instance.
You also see this a lot with so called “executive dashboards.”

INFREQUENT-USE CONTROL PANELS
New Sources of Inspiration for Interaction Designers
With systems users aren’t supposed to know, we often see the reverse is true: instructions and
controls are the majority of the real estate. In this example, even the display initially acts as a label.

DIRECT MANIPULATION
New Sources of Inspiration for Interaction Designers 62
This type of real estate allotment can be used for kiosks very effectively, for instance.

DIRECT MANIPULATION CONSOLES
New Sources of Inspiration for Interaction Designers 63
Another type of control panel, which is usually for direct manipulation, does away with displays all
together, because you can see the status right in front of you in the object you are manipulating
from afar. In this case, push the giant lever forward and the crane moves that way.

New Sources of Inspiration for Interaction Designers 64
This is basically all the browser is, right? Just a set of controls at the top to do direct manipulation of
what is right in front of you.

FORM AND LAYOUT
New Sources of Inspiration for Interaction Designers 65
You can use consoles and control panels to inspire shape and form. This Vespa dashboard’s eye-
like shape would be great to emulate digitally.

Learning from Elements
the elements of user experience — 29 february 2005 66
Like we did with film, you can break apart
mechanical objects to see what can be be
inspiring about them.

TOYS
New Sources of Inspiration for Interaction Designers 67
Toys are great objects for inspiration. With only a little decrease in size, this could be a neat form
factor for a mobile device.

TYPOGRAPHY
New Sources of Inspiration for Interaction Designers 68
1951 Hudson Hornet

LABELS SHOULD CONNECT TO CONTROLS
New Sources of Inspiration for Interaction Designers 69
There are lots of great basic lessons mechanical objects can teach us. Look at how nicely the labels
here are connected to snap points on the dials.

ICONS ARE HARD
New Sources of Inspiration for Interaction Designers 70
I love these icons, but it definitely took me a moment to understand them. Of course, this is a
device meant to be learned and used frequently.

ICONS ARE GOOD (IN SOME CASES)
New Sources of Inspiration for Interaction Designers 71
Now these icons rule. There isn’t a single word on this instruction sheet, but everything, even
difficult concepts are clear. Rabbit and Turtle for fast/slow? Genius.

MAKE CLEVER CONTROLS
New Sources of Inspiration for Interaction Designers 72
Check out this Toronto Parking Payment machine. I love the Maximum Time button, since that is
probably what many people want. It’s clever: the designers realized that was what most people did
and designed the console that way so you don’t have to tinker with the time button.

What Not to Do
the elements of user experience — 29 february 2005 73
Of course, not all mechanical objects are well designed, and those can be instructive
as well.

DON’T LABEL THE LABELS
New Sources of Inspiration for Interaction Designers 74
Compare that to this bad payment machine. If your labels need signs pointing to them saying, read
this label, chances are, it isn’t very well-designed. If it is important, design it with visual
prominence!

REMIND US OF THE “BASICS”
New Sources of Inspiration for Interaction Designers 75
This is a ticket purchase machine for MUNI. Again with the Start Here! What does
the button marked with the handicapped icon do? And the repeat button? And the
numbers below each of the buttons? And the unused buttons? And the numbers
below the buttons? What a mess.

REMIND US OF THE “BASICS”
New Sources of Inspiration for Interaction Designers 76
This needs no comment.

REMIND US OF THE “BASICS”
New Sources of Inspiration for Interaction Designers 77
Nor does this one.
We’ve come to the end of this talk, but I hope I’ve given you even a small taste of what is out there
if we’ll just look for it. The next time that you are staring at a blank screen, waiting for inspiration
to come, look away from the screen! Take a walk outside or even just around your office or your
house.

THE PATTERN LIBRARY
New Sources of Inspiration for Interaction Designers 78
We can learn so much from the other products made by humans, if we’ll only take the time to
observe and do it. We can use the world as our pattern library, and create inspired new interaction
designs.

THANK YOU VERY MUCH.
http://www.noideasbutinthings.com/ixd
the elements of user experience — 29 february 2005 79