1. Interaction
Design Master
Studio
Dave Malouf @daveixd
Friday, October 19, 12

2. Friday, October 19, 12

3. Dave Malouf
@daveixd
http://davemalouf.com
Friday, October 19, 12

4. Peer Loft:
@peerloft
Amplifying Creativity
TM
Friday, October 19, 12

5. Dave Malouf Design
Helping organizations integrate holistic design for rapid
and smarter creativity.
Friday, October 19, 12

6. Who are you?
Friday, October 19, 12

7. What you are in for:
• Lots of theory
• Lots of opportunities to apply that theory
• Hopefully some interesting discussion
Friday, October 19, 12

8. This is Interaction Design
Friday, October 19, 12

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

32. Direct
Manipulation
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

40. Questions?
Comments?
Friday, October 19, 12

41. Know your media
We have many and they are unconventional
Friday, October 19, 12

42. Pixels
Composition
Layout
Type
Negative Space
Friday, October 19, 12

43. Servos
Actuators
Sensors
LEDs are good
too!
Friday, October 19, 12

44. keyboard
mouse
trackpad
touchscreen
remote control
game controller
no controller
Friday, October 19, 12

45. Language
metaphor
frames
poetics
rhetoric
narrative
Friday, October 19, 12

46. People
cognition
behavior
culture
Friday, October 19, 12

47. Tinkering
Nearness by Touch & BERG
https://vimeo.com/6588461
Friday, October 19, 12

48. Exercise
Time Management
• Change your media
• Change your actors
• New materials
TINKER
15 min
Friday, October 19, 12

49. Would you like some ...
We will have our personal information
everywhere
Friday, October 19, 12

50. What’s needed?
What’s there?
• Bandwidth
• Platforms
• Operators
• Hardware
Friday, October 19, 12

51. Is this our future?
Glass everywhere?
http://youtu.be/6Cf7IL_eZ38
Friday, October 19, 12

52. It’s a services world
• Intangible
• Not consumed
• People + Products
Friday, October 19, 12

53. What do we have today?
Friday, October 19, 12

54. Paths tell our stories
Constantly changing micro contexts
Friday, October 19, 12

55. Improvisation
Back to Jazz
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

63. Structure of Story
Friday, October 19, 12

64. Comics
are our new sitemaps
Friday, October 19, 12

65. Stories help by
• Situating the
context
• Humanizing
personas
• Designing against
scenarios
Friday, October 19, 12

66. One of my fave examples
Commuter Buddy
https://vimeo.com/3056252
Friday, October 19, 12

67. Exercise
Time Management
Tell me a compelling
story.
Yes, I expect a guitar score in the
background.
30 min
Friday, October 19, 12

68. Questions? Comments?
Friday, October 19, 12

69. Dave Malouf
@daveixd
G+ dave.ixd
Dave Malouf Design
Peer Loft - @peerloft
Friday, October 19, 12