New Sources of Inspiration for Interaction Designers

Dan [email protected]

New Sources of Inspiration for Interaction Designers

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.

mailto:[email protected]

mailto:[email protected]

the elements of user experience — 29 february 2005 2

Where do we get inspiration for designs?

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?

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

But maybe you’re more sophisticated than that. You get your patterns from a well-written book!


PATTERN LIBRARIES

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

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.


Architecture


Film


Machinery


PRODUCTS NOT PROCESS

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


ARCHITECTURE

Let’s start with architecture.


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.


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

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.


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?


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

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.


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.


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


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

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.


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.


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.


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.


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.


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.


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?


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.


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.


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

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

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?


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.


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.


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.


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

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.


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

We can steal moods and visual looks from movies. Science fiction can often work well, like in the 1982 classic Blade Runner.


Almost nothing in films has inspired more attention from interaction designers than Minority Report.


Minority Report created a buzz about touch screen interfaces that we see playing out now in everything from the iPhone to kiosks.


Jeff Han with his demo for Perceptive Pixel


Title Sequences

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.


Anatomy of a Murder by Saul Bass


Psycho Titles by Saul Bass


Kyle Cooper’s Seven Titles


Olivier Kuntzel and Florence Deygas for Nexus Productions.

Catch Me if You Can


Why does this all matter? Well, look at Stamen Design’s DiggSwarm.


MECHANICAL OBJECTS

The last type of inspirational products I want to talk about are mechanical objects.


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.


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

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

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

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

There are three kinds of control panels, but each is made up of the same parts.


DISPLAYS, CONTROLS, LABELS

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

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.


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

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

This type of real estate allotment can be used for kiosks very effectively, for instance.


DIRECT MANIPULATION CONSOLES

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.


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

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

Like we did with film, you can break apart mechanical objects to see what can be be inspiring about them.


TOYS

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

1951 Hudson Hornet


LABELS SHOULD CONNECT TO CONTROLS

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

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)

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

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

Of course, not all mechanical objects are well designed, and those can be instructive as well.


DON’T LABEL THE LABELS

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”

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.



This needs no comment.



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

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