9. Defining Interaction Design
The engineer’s perspective
Bill
Verplank
http://www.ixda.org/resources/bill-verplank-opening-
keynote
Friday, October 19, 12
10. Exercise 1
How many unique
actions can you get out
of a single button?
• Either sketch them out, or
• Write them
5 minutes
Friday, October 19, 12
11. Exercise 1a
Try now with a handle
5 minutes
Friday, October 19, 12
12. Dialog
Product Behavior
Your Reaction
Product Behavior
Friday, October 19, 12
13. Soulless
Goalless
But the beginning
a story
Friday, October 19, 12
14. Leads to theatre
Actors & Audience
Aesthetic & emotional considerations
Friday, October 19, 12
15. Computers
as Theatre
Brenda Laurel
Friday, October 19, 12
16. Dialog
Activity
Emotion
Friday, October 19, 12
17. Exercise 2
Write a script of using
an IM application.
•
App Speech like
human
•
Add Setting, stage
direction & emotion.
Friday, October 19, 12
18. Improvisation
It’s a Jazz Thing!
Friday, October 19, 12
19. Defining Interaction Design
The philosopher’s perspective
“To design the environments
where interactions take place.”
Richard “[To design] how people relate
Buchanan to other people through the
mediating influence of
product(s).”
http://www.ixda.org/resources/richard-buchanan-
keynote
Friday, October 19, 12
20. Exercise 2
• How many different
activities can you think
of to do on a chair?
• How would you
change the design of
the chair based on
those activities.
10 Minutes
Friday, October 19, 12
21. Foundations
What are foundations?
What are they good for?
What are they for Interaction Design?
Friday, October 19, 12
22. What are foundations
Simply put the principles that allow for both a
critical analysis and a platform of studio
education...
... blah blah blah
Friday, October 19, 12
23. Why have foundations?
• Creates a solid base of core theories and crafts
- These can transcend all design disciplines
๏ Art History/Criticism
๏ Color
๏ 2D Design
• Goal is to give broad understanding of theory,
and opportunity to focus on craft before diving
deeper into a chosen discipline.
Friday, October 19, 12
24. Let’s look at another
discipline
• There are 6 elements that every 3D designer
needs to know:
• Line
• Plane (surface)
• Volume (space & form)
• Value (Light & Dark)
• Texture
• Color
Friday, October 19, 12
25. There is also a
progression
• In 3D design you can’t • Primitives include
just jump right in - Rectilinear Volumes
- Curvilinear Volumes
• “Primitives” must be - Rectilinear & Curvilinear
mastered, - Fragments
and in mastering these - Planar constructions
you master craft
- Lines in Space
- Advanced Studies in
Form
๏ Construction
๏ Convexity
๏ Concavity
• Studies in Space
Friday, October 19, 12
26. Elements of Design: Roweena Reed Kostellow and the Structure of Visual Relationships by Gail Greet Hannah
Language for Criticism
Aesthetic criticism ...
Not quantitative evaluation
Friday, October 19, 12
27. Foundations of
Interaction Design
• Time
• Metaphor
• Abstraction
• Motion & Movement
• Negativity (related to “negative [or white]
space”)
Article w/ links to previous written work on Foundations of IxD:
http://johnnyholland.org/2009/03/09/foundations-of-interaction-design-interaction-09-
reprise/
Video of my presentation on the Foundations of Interaction Design @ Interaction 09 |
Vancouver
http://vimeo.com/4500315
Friday, October 19, 12
28. Time
It has many sub-elements
• Duration
• Frequency
• Rhythm
• Delay
Photo credit: Adam Browdowski
Friday, October 19, 12
29. Exercise
Design a chair now in
different ways
thinking about
different elements of
time
5 minutes
Friday, October 19, 12
30. Abstraction
• Level of directness
or interaction
- Command Line
- Voice Command
- Mouse - Point/Click
- Stylus - Tap/Click
- Finger - Tap click
• Movement equals
same direction
response
Friday, October 19, 12
31. Another
example
iPod Click-wheel
Friday, October 19, 12
33. Is this more or less?
Leap Motion
http://youtu.be/_d6KuiuteIA
Friday, October 19, 12
34. Metaphors
“Everything in
computers is a
metaphor”
- Dan Saffer, IA Summit 2005
• Trash can / recycle bin
• Disk
• File / folder
• Shopping
• Even Computer
Friday, October 19, 12
35. A cigar by
any other
name
Analogy helps
expand
understanding and
communicate
meaning
Friday, October 19, 12
36. Skeumorph
Not always
metaphor,
And not bad.
Friday, October 19, 12
37. Movement (motion)
• Pleasing
movements
• Craft of motion
• Intuitive gestures
Friday, October 19, 12
38. Pull to spring
Causes list to check for additions.
Friday, October 19, 12
39. Exercise
Time Management
• Posture: Transient
• Metaphor: Clock/
Calendar
• Abstraction: Direct
• Movements: Choppy
15 min
Friday, October 19, 12
56. Prototype
Gotta experience
it to make it all
work.
Friday, October 19, 12
57. Journey Maps
are our new sitemaps
Friday, October 19, 12
58. Exercise
Time Management
• What changes if this
is a service instead
of an application?
• Create a journey
map expressing this
change
15 min
Friday, October 19, 12
59. Tools
And places to put
them.
Friday, October 19, 12
60. My Secret
Recipe
Here it goes!
Friday, October 19, 12
61. My physical tool kit
• dotted notebook • Posterpaper/pads
• fine point pen • Digital Camera
• Whiteboard • Video Camera
http://whiteyboard.com
• Lighting Set
• Sticky notes
• Big open space
• Cardboard box
• People
• Construction paper
• iPad (or any tablet)
• Stick glue Stylus optional
• Sharpies
Friday, October 19, 12
62. My software tool kit
• Adobe Ideas • Comic Life
• Adobe Proto • iPhoto
• Adobe Collage • iMovie
• Adobe Fireworks • Garageband
• Adobe Dreamweaver • iA Writer
• Omnigraffle or Axure • Keynote
• Adobe Edge • Keynotopia/Keynote
(Code & Animate) Kung Fu
• Adobe Story
Friday, October 19, 12