SlideShare une entreprise Scribd logo
1  sur  79
Télécharger pour lire hors ligne
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

Contenu connexe

Similaire à New Sources of Inspiration for Interaction Designers

Design Thinking 101 - A Quick Explanation to Ease Your Confusion!
Design Thinking 101 - A Quick Explanation to Ease Your Confusion!Design Thinking 101 - A Quick Explanation to Ease Your Confusion!
Design Thinking 101 - A Quick Explanation to Ease Your Confusion!Alex Denniston
 
The mardarch showcase 2013 2
The mardarch showcase 2013 2The mardarch showcase 2013 2
The mardarch showcase 2013 2ronakbk
 
phoenix.portfolio.2.0
phoenix.portfolio.2.0phoenix.portfolio.2.0
phoenix.portfolio.2.0Phoenix Grey
 
Stendahls Creative Pop Up - A summary
Stendahls Creative Pop Up - A summaryStendahls Creative Pop Up - A summary
Stendahls Creative Pop Up - A summaryChrister Hedberg
 
Developing and Selling your Creative Talents
Developing and Selling your Creative TalentsDeveloping and Selling your Creative Talents
Developing and Selling your Creative TalentsIIBA UK Chapter
 
ROCO Magazine Issue 5 summer
ROCO Magazine Issue 5 summerROCO Magazine Issue 5 summer
ROCO Magazine Issue 5 summerRachael Colton
 
Innovation blueprints#101
Innovation blueprints#101 Innovation blueprints#101
Innovation blueprints#101 Nils vesk
 
Innovation blueprints #101
Innovation blueprints #101 Innovation blueprints #101
Innovation blueprints #101 Nils vesk
 
Design Patterns Story
Design Patterns StoryDesign Patterns Story
Design Patterns StoryArun A
 
ACI design and creativity slides 2019 day1
ACI design and creativity slides 2019 day1ACI design and creativity slides 2019 day1
ACI design and creativity slides 2019 day1R. Sosa
 
Art Up Your Event: 5 Inventive Exhibitions to Spark Your Creativity
Art Up Your Event: 5 Inventive Exhibitions to Spark Your CreativityArt Up Your Event: 5 Inventive Exhibitions to Spark Your Creativity
Art Up Your Event: 5 Inventive Exhibitions to Spark Your CreativityLive Marketing
 
Luminous issue1 june_2008
Luminous issue1 june_2008Luminous issue1 june_2008
Luminous issue1 june_2008David Aloi
 
Check Out The best interior designers In India
Check Out The best interior designers In IndiaCheck Out The best interior designers In India
Check Out The best interior designers In Indiaseetukohlihome1
 

Similaire à New Sources of Inspiration for Interaction Designers (20)

Design Thinking 101 - A Quick Explanation to Ease Your Confusion!
Design Thinking 101 - A Quick Explanation to Ease Your Confusion!Design Thinking 101 - A Quick Explanation to Ease Your Confusion!
Design Thinking 101 - A Quick Explanation to Ease Your Confusion!
 
Smart Design
Smart DesignSmart Design
Smart Design
 
The mardarch showcase 2013 2
The mardarch showcase 2013 2The mardarch showcase 2013 2
The mardarch showcase 2013 2
 
phoenix.portfolio.2.0
phoenix.portfolio.2.0phoenix.portfolio.2.0
phoenix.portfolio.2.0
 
Stendahls Creative Pop Up - A summary
Stendahls Creative Pop Up - A summaryStendahls Creative Pop Up - A summary
Stendahls Creative Pop Up - A summary
 
Thesis Book01_Hasse (2).pdf
Thesis Book01_Hasse (2).pdfThesis Book01_Hasse (2).pdf
Thesis Book01_Hasse (2).pdf
 
Developing and Selling your Creative Talents
Developing and Selling your Creative TalentsDeveloping and Selling your Creative Talents
Developing and Selling your Creative Talents
 
Faiks, Innovative partnerships, creative thinking, and risk taking: The devel...
Faiks, Innovative partnerships, creative thinking, and risk taking: The devel...Faiks, Innovative partnerships, creative thinking, and risk taking: The devel...
Faiks, Innovative partnerships, creative thinking, and risk taking: The devel...
 
ROCO Magazine Issue 5 summer
ROCO Magazine Issue 5 summerROCO Magazine Issue 5 summer
ROCO Magazine Issue 5 summer
 
Innovation blueprints#101
Innovation blueprints#101 Innovation blueprints#101
Innovation blueprints#101
 
Innovation blueprints #101
Innovation blueprints #101 Innovation blueprints #101
Innovation blueprints #101
 
Design Patterns Story
Design Patterns StoryDesign Patterns Story
Design Patterns Story
 
ACI design and creativity slides 2019 day1
ACI design and creativity slides 2019 day1ACI design and creativity slides 2019 day1
ACI design and creativity slides 2019 day1
 
Creativetime
CreativetimeCreativetime
Creativetime
 
My Dorm Room With Style
My Dorm Room With StyleMy Dorm Room With Style
My Dorm Room With Style
 
Art Up Your Event: 5 Inventive Exhibitions to Spark Your Creativity
Art Up Your Event: 5 Inventive Exhibitions to Spark Your CreativityArt Up Your Event: 5 Inventive Exhibitions to Spark Your Creativity
Art Up Your Event: 5 Inventive Exhibitions to Spark Your Creativity
 
J. Sebastian Pinotti personal portfolio
J. Sebastian Pinotti personal portfolioJ. Sebastian Pinotti personal portfolio
J. Sebastian Pinotti personal portfolio
 
Luminous issue1 june_2008
Luminous issue1 june_2008Luminous issue1 june_2008
Luminous issue1 june_2008
 
Portfolio
PortfolioPortfolio
Portfolio
 
Check Out The best interior designers In India
Check Out The best interior designers In IndiaCheck Out The best interior designers In India
Check Out The best interior designers In India
 

Plus de Dan Saffer

Practical Creativity
Practical CreativityPractical Creativity
Practical CreativityDan Saffer
 
Microinteractions
MicrointeractionsMicrointeractions
MicrointeractionsDan Saffer
 
Using Microinteractions to get from Prototype to Product
Using Microinteractions to get from Prototype to ProductUsing Microinteractions to get from Prototype to Product
Using Microinteractions to get from Prototype to ProductDan Saffer
 
The New Era of (Non-) Discoverability
The New Era of (Non-) DiscoverabilityThe New Era of (Non-) Discoverability
The New Era of (Non-) DiscoverabilityDan Saffer
 
The Complexity of Simplicity
The Complexity of SimplicityThe Complexity of Simplicity
The Complexity of SimplicityDan Saffer
 
Design in the Post-PC Era
Design in the Post-PC EraDesign in the Post-PC Era
Design in the Post-PC EraDan Saffer
 
Designing for (and with) New Technology
Designing for (and with) New TechnologyDesigning for (and with) New Technology
Designing for (and with) New TechnologyDan Saffer
 
What User-Centered Design is Good For
What User-Centered Design is Good ForWhat User-Centered Design is Good For
What User-Centered Design is Good ForDan Saffer
 
6000 Years of Device Design
6000 Years of Device Design6000 Years of Device Design
6000 Years of Device DesignDan Saffer
 
How to Lie with Design Strategy
How to Lie with Design StrategyHow to Lie with Design Strategy
How to Lie with Design StrategyDan Saffer
 
Tap is the New Click
Tap is the New ClickTap is the New Click
Tap is the New ClickDan Saffer
 
Ideation and Design Principles Workshop
Ideation and Design Principles WorkshopIdeation and Design Principles Workshop
Ideation and Design Principles WorkshopDan Saffer
 
Designing from the Inside-Out: Behaviour as the Engine of Product Design
Designing from the Inside-Out: Behaviour as the Engine of Product DesignDesigning from the Inside-Out: Behaviour as the Engine of Product Design
Designing from the Inside-Out: Behaviour as the Engine of Product DesignDan Saffer
 
Designing Smart and Clever Applications
Designing Smart and Clever ApplicationsDesigning Smart and Clever Applications
Designing Smart and Clever ApplicationsDan Saffer
 
Carpe Diem: Attention, Awareness, and Interaction Design 2009
Carpe Diem: Attention, Awareness, and Interaction Design 2009Carpe Diem: Attention, Awareness, and Interaction Design 2009
Carpe Diem: Attention, Awareness, and Interaction Design 2009Dan Saffer
 
Interaction as a Material
Interaction as a MaterialInteraction as a Material
Interaction as a MaterialDan Saffer
 
Making Good Design Decisions
Making Good Design DecisionsMaking Good Design Decisions
Making Good Design DecisionsDan Saffer
 
Gaming the Web: Using the Structure of Games to Design Better Web Apps
Gaming the Web: Using the Structure of Games to Design Better Web AppsGaming the Web: Using the Structure of Games to Design Better Web Apps
Gaming the Web: Using the Structure of Games to Design Better Web AppsDan Saffer
 
The Role of Metaphor in Interaction Design
The Role of Metaphor in Interaction DesignThe Role of Metaphor in Interaction Design
The Role of Metaphor in Interaction DesignDan Saffer
 
How to Lie with Design Research
How to Lie with Design ResearchHow to Lie with Design Research
How to Lie with Design ResearchDan Saffer
 

Plus de Dan Saffer (20)

Practical Creativity
Practical CreativityPractical Creativity
Practical Creativity
 
Microinteractions
MicrointeractionsMicrointeractions
Microinteractions
 
Using Microinteractions to get from Prototype to Product
Using Microinteractions to get from Prototype to ProductUsing Microinteractions to get from Prototype to Product
Using Microinteractions to get from Prototype to Product
 
The New Era of (Non-) Discoverability
The New Era of (Non-) DiscoverabilityThe New Era of (Non-) Discoverability
The New Era of (Non-) Discoverability
 
The Complexity of Simplicity
The Complexity of SimplicityThe Complexity of Simplicity
The Complexity of Simplicity
 
Design in the Post-PC Era
Design in the Post-PC EraDesign in the Post-PC Era
Design in the Post-PC Era
 
Designing for (and with) New Technology
Designing for (and with) New TechnologyDesigning for (and with) New Technology
Designing for (and with) New Technology
 
What User-Centered Design is Good For
What User-Centered Design is Good ForWhat User-Centered Design is Good For
What User-Centered Design is Good For
 
6000 Years of Device Design
6000 Years of Device Design6000 Years of Device Design
6000 Years of Device Design
 
How to Lie with Design Strategy
How to Lie with Design StrategyHow to Lie with Design Strategy
How to Lie with Design Strategy
 
Tap is the New Click
Tap is the New ClickTap is the New Click
Tap is the New Click
 
Ideation and Design Principles Workshop
Ideation and Design Principles WorkshopIdeation and Design Principles Workshop
Ideation and Design Principles Workshop
 
Designing from the Inside-Out: Behaviour as the Engine of Product Design
Designing from the Inside-Out: Behaviour as the Engine of Product DesignDesigning from the Inside-Out: Behaviour as the Engine of Product Design
Designing from the Inside-Out: Behaviour as the Engine of Product Design
 
Designing Smart and Clever Applications
Designing Smart and Clever ApplicationsDesigning Smart and Clever Applications
Designing Smart and Clever Applications
 
Carpe Diem: Attention, Awareness, and Interaction Design 2009
Carpe Diem: Attention, Awareness, and Interaction Design 2009Carpe Diem: Attention, Awareness, and Interaction Design 2009
Carpe Diem: Attention, Awareness, and Interaction Design 2009
 
Interaction as a Material
Interaction as a MaterialInteraction as a Material
Interaction as a Material
 
Making Good Design Decisions
Making Good Design DecisionsMaking Good Design Decisions
Making Good Design Decisions
 
Gaming the Web: Using the Structure of Games to Design Better Web Apps
Gaming the Web: Using the Structure of Games to Design Better Web AppsGaming the Web: Using the Structure of Games to Design Better Web Apps
Gaming the Web: Using the Structure of Games to Design Better Web Apps
 
The Role of Metaphor in Interaction Design
The Role of Metaphor in Interaction DesignThe Role of Metaphor in Interaction Design
The Role of Metaphor in Interaction Design
 
How to Lie with Design Research
How to Lie with Design ResearchHow to Lie with Design Research
How to Lie with Design Research
 

Dernier

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 

Dernier (19)

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 

New Sources of Inspiration for Interaction Designers

  • 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.
  • 2. Where do we get inspiration for designs? the elements of user experience — 29 february 2005 2
  • 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.
  • 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?
  • 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!
  • 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.
  • 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.
  • 8. New Sources of Inspiration for Interaction Designers 8 Architecture
  • 9. New Sources of Inspiration for Interaction Designers 9 Film
  • 10. New Sources of Inspiration for Interaction Designers 10 Machinery
  • 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!
  • 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
  • 13. ARCHITECTURE the elements of user experience — 29 february 2005 13 Let’s start with architecture.
  • 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.
  • 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?
  • 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.
  • 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?
  • 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?
  • 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.
  • 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.
  • 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.”
  • 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”?
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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?
  • 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.
  • 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.
  • 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.
  • 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.
  • 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?
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 42. New Sources of Inspiration for Interaction Designers 42 Almost nothing in films has inspired more attention from interaction designers than Minority Report.
  • 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.
  • 44. New Sources of Inspiration for Interaction Designers 44 Jeff Han with his demo for Perceptive Pixel
  • 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.
  • 46. New Sources of Inspiration for Interaction Designers 46 Anatomy of a Murder by Saul Bass
  • 47. New Sources of Inspiration for Interaction Designers 47 Psycho Titles by Saul Bass
  • 48. New Sources of Inspiration for Interaction Designers 48 Kyle Cooper’s Seven Titles
  • 49. New Sources of Inspiration for Interaction Designers 49 Olivier Kuntzel and Florence Deygas for Nexus Productions. Catch Me if You Can
  • 50. New Sources of Inspiration for Interaction Designers 50 Why does this all matter? Well, look at Stamen Design’s DiggSwarm.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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?
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.”
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 68. TYPOGRAPHY New Sources of Inspiration for Interaction Designers 68 1951 Hudson Hornet
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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!
  • 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.
  • 76. REMIND US OF THE “BASICS” New Sources of Inspiration for Interaction Designers 76 This needs no comment.
  • 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.
  • 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.
  • 79. THANK YOU VERY MUCH. http://www.noideasbutinthings.com/ixd the elements of user experience — 29 february 2005 79