New Sources of Inspiration for Interaction Designers

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 ﬁrst 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 ﬁreplaces, 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 riﬂes, 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 ﬁrmitas, 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 ﬂoorplan. 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 ﬂoor 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 ﬁt 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 speciﬁcally 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-ﬂoor attic.

FILM the elements of user experience — 29 february 2005 33 Let’s turn our attention to another type of man-made product: ﬁlms. 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 ﬁlms, 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 ﬂying 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 ﬁlms. 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 ﬁction can often work well, like in the 1982 classic Blade Runner.

New Sources of Inspiration for Interaction Designers 42 Almost nothing in ﬁlms 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 reﬁned 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 ﬁlm, 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 deﬁnitely 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

http://www.odannyboy.com	915
http://www.adaptivepath.com	607
http://ucd.blox.pl	67
http://www.slideshare.net	25
http://viacamp.blogspot.com	9
http://translate.googleusercontent.com	7
http://kathryngough.com	5
http://www.etudoounada.com.br	5
http://webcache.googleusercontent.com	2
http://209.85.135.104	1
http://localhost	1
http://www.hanrss.com	1
http://209.85.175.104	1
http://ccoe309.tumblr.com	1
http://ccoe-embodied.tumblr.com	1
http://blog.markerstudio.com	1
http://static.slideshare.net	1
http://hiddenhouse.tumblr.com	1

New Sources of Inspiration for Interaction Designers

by Dan Saffer on Feb 11, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

18 Embeds 1,651

Statistics

New Sources of Inspiration for Interaction Designers — Presentation Transcript