New Sources of Inspiration for Interaction Designers

Slide 1: 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.

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

Slide 3: 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.

Slide 4: 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?

Slide 5: 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!

Slide 6: 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.

Slide 7: 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.

Slide 8: New Sources of Inspiration for Interaction Designers 8 Architecture

Slide 9: New Sources of Inspiration for Interaction Designers 9 Film

Slide 10: New Sources of Inspiration for Interaction Designers 10 Machinery

Slide 11: 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!

Slide 12: 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

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

Slide 14: 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.

Slide 15: 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?

Slide 16: 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.

Slide 17: 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?

Slide 18: 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?

Slide 19: 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.

Slide 20: 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.

Slide 21: 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.”

Slide 22: 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”?

Slide 23: 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.

Slide 24: 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.

Slide 25: 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.

Slide 26: 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.

Slide 27: 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.

Slide 28: 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.

Slide 29: 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?

Slide 30: 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.

Slide 31: 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.

Slide 32: 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.

Slide 33: 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.

Slide 34: 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?

Slide 35: 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.

Slide 36: 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.

Slide 37: 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.

Slide 38: 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.

Slide 39: 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.

Slide 40: 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.

Slide 41: 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.

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

Slide 43: 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.

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

Slide 45: 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.

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

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

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

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

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

Slide 51: 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.

Slide 52: 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.

Slide 53: 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.

Slide 54: 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.

Slide 55: 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?

Slide 56: 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.

Slide 57: 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.

Slide 58: 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.

Slide 59: “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.

Slide 60: 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.”

Slide 61: 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.

Slide 62: 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.

Slide 63: 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.

Slide 64: 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.

Slide 65: 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.

Slide 66: 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.

Slide 67: 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.

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

Slide 69: 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.

Slide 70: 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.

Slide 71: 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.

Slide 72: 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.

Slide 73: 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.

Slide 74: 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!

Slide 75: 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.

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

Slide 77: 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.

Slide 78: 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.

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