interaction 09 introduction to interaction design
DESCRIPTION
Slides from a 1/2 day workshop introducing interaction design.TRANSCRIPT
![Page 1: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/1.jpg)
Introduction to Interaction DesignInteraction 09 | Vancouver
Dave MaloufProfessor of Interaction DesignSavannah College of Art & Design
![Page 2: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/2.jpg)
Workshop Schedule and Content9:00 am – 1:00 pm Before the break: 110min.• Introductions• Setting the scene
– What is IxD?– How does it fit with UX?– History(ies) of IxD
• Open Questions
After the 20min. Break• DOING IxD—a
Framework• Foundation• Tools• Next Steps For You• Open questions
Interaction 09 | Vancouver Introduction to Interaction Design 2
![Page 3: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/3.jpg)
WHO ARE WE?Let’s learn about the people with whom we are spending 4 hours today.
Interaction 09 | Vancouver Introduction to Interaction Design 3
![Page 4: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/4.jpg)
Who are we?
• Name• Company (if any)• Title/role
What do you call yourself @ a party?• What interests you about IxD?
Interaction 09 | Vancouver Introduction to Interaction Design 4
![Page 5: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/5.jpg)
SETTING THE SCENE
Interaction 09 | Vancouver 5Introduction to Interaction Design
![Page 6: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/6.jpg)
What is Interaction Design anyway?• Is it a practice?• A discipline?• What do interaction designers design?• Can do they make anything?• Can they create a “whole” something
alone?• Where does IxD and Information
Architecture fit? And usability? And HCI?
Interaction 09 | Vancouver Introduction to Interaction Design 6
![Page 7: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/7.jpg)
Let’s take a look what other people think?
• Let’s look at a few– Jesse James Garret’s Elements of User
Experience– Dan Saffer’s UX Ven Diagram– Challis Hodge’s – Make up of Experience
Design– Nathan Shedroff’s – Roles of Experience
Design
Interaction 09 | Vancouver Introduction to Interaction Design 7
![Page 8: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/8.jpg)
The Elements of User Experience
Interaction 09 | Vancouver Introduction to Interaction Design 8
![Page 9: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/9.jpg)
Dan Saffer’s look
Interaction 09 | Vancouver Introduction to Interaction Design 9
![Page 10: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/10.jpg)
Challis Hodge – Breaking down Experience Design
Interaction 09 | Vancouver Introduction to Interaction Design 10
![Page 11: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/11.jpg)
Hodge again – now on role relationships
Interaction 09 | Vancouver Introduction to Interaction Design 11
![Page 12: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/12.jpg)
Nathan Shedroff - What do we do?
Interaction 09 | Vancouver Introduction to Interaction Design 12
![Page 13: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/13.jpg)
Exercise 1Sketch 20min• How would you do
it?• Sketch model
– Task– Process– Make up of
elements
Interaction 09 | Vancouver Introduction to Interaction Design 13
![Page 14: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/14.jpg)
Breaking it down
• Potential• Research• Strategy• Tactics• Telling• Presentation
• Throughout– Evaluation– Narrative– Visualization
Interaction 09 | Vancouver Introduction to Interaction Design 14
![Page 15: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/15.jpg)
Adam
Interaction 09 | Vancouver Introduction to Interaction Design 15
![Page 16: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/16.jpg)
Olivia
Interaction 09 | Vancouver Introduction to Interaction Design 16
![Page 17: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/17.jpg)
Robert
Interaction 09 | Vancouver Introduction to Interaction Design 17
![Page 18: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/18.jpg)
Interaction 09 | Vancouver Introduction to Interaction Design 18
Kyle
![Page 19: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/19.jpg)
Marcus
Interaction 09 | Vancouver Introduction to Interaction Design 19
![Page 20: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/20.jpg)
LET’S TAKE A STEP BACKWe are talking about designing digital products & services, right? So …
Interaction 09 | Vancouver 20Introduction to Interaction Design
![Page 21: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/21.jpg)
QUESTION
What is interactivity?
Interaction 09 | Vancouver Introduction to Interaction Design 21
![Page 22: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/22.jpg)
Another one
• What’s a GOOD interactive product?
Interaction 09 | Vancouver Introduction to Interaction Design 22
![Page 23: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/23.jpg)
Last one
• What’s a good product?
Interaction 09 | Vancouver Introduction to Interaction Design 23
![Page 24: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/24.jpg)
Let’s go WAY back
firmitas, utilitas, venustas-- Vitruvius, “De Architectura”
Interaction 09 | Vancouver Introduction to Interaction Design 24
![Page 25: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/25.jpg)
What does this mean?
Mitch Kapor’s take• Firmness: A program should not have
any bugs that inhibit its function. • Commodity: A program should be
suitable for the purposes for which it was intended.
• Delight: The experience of using the program should be pleasurable one.
Interaction 09 | Vancouver Introduction to Interaction Design 25
![Page 26: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/26.jpg)
Back to our 1st 2 questions
• What is interactivity?• What is a GOOD interactive product?
Interaction 09 | Vancouver Introduction to Interaction Design 26
![Page 27: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/27.jpg)
Interactivity?
• Well 1st what is an interaction?– Conversation?– Play?– Back & Forth?
Interaction 09 | Vancouver Introduction to Interaction Design 27
![Page 28: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/28.jpg)
Interactivity?
• Requires 2 or more entities• All entities have the ability to receive
input• All entities have the ability to produce
output• All entities’ output is in direct relationship
to the content of input– Highly interactive systems can provide output
to itself, to create a level of intelligence.
Interaction 09 | Vancouver Introduction to Interaction Design 28
![Page 29: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/29.jpg)
Interactive Product?
• Does it have to have a computer?– Do you have an example of an
interactive product without one?
Interaction 09 | Vancouver Introduction to Interaction Design 29
![Page 30: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/30.jpg)
Interactive Product?
Basics• Listens for requests• Determines ability to
perform request• Does request• Sends results of
request
iPod• User moves click-wheel
to desired location (screen immediately responds to these micro requests by changing the screen)
• System looks for song• System starts song• Music is piped through
headphones and screen changes.
Interaction 09 | Vancouver Introduction to Interaction Design 30
![Page 31: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/31.jpg)
A good interactive product
• Does the job I expect it to when I want it to.• Does the job in a way that I expect it
should• Delights – what’s this?
– Aesthetics: Beauty is not in the eye of the beholder but it is a (cross-)cultural response to elements of presentation
– Engagement: The way a situation/product can draw your focus on it.
– Ego or soul: Elements of the personal that add value by conveying human connection to a greater whole.
Interaction 09 | Vancouver Introduction to Interaction Design 31
![Page 32: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/32.jpg)
Properties of interactive products• They are “used”• They only exist in 4 dimensions
– Interactivity can only take place over time• All series of interactions create a
narrative• There is always a human motivation
for use towards achieving some describable set of motivations & goals.
Interaction 09 | Vancouver Introduction to Interaction Design 32
![Page 33: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/33.jpg)
LET’S DEFINE IT FOR REAL
Interaction 09 | Vancouver 33Introduction to Interaction Design
![Page 34: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/34.jpg)
A terse definition
Interaction 09 | Vancouver Introduction to Interaction Design 34
![Page 35: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/35.jpg)
Interaction Design DefinedAnother try (Robert Reimann)A design discipline dedicated to:
– Defining the behavior of artifacts, environments, and systems (i.e., products)
…and therefore concerned with:– Anticipating how use of the products will
mediate human relationships and affect human understanding
– Guiding the form of products to the extent that it influences/is influenced by their behavior and use
Interaction 09 | Vancouver Introduction to Interaction Design 35
![Page 36: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/36.jpg)
A new “medium”, a new kind of designInteractive digital products require and respond to human input, and change their own content or behavior based on that input. Form, behavior, and content must all be defined.
Traditional design disciplines do not have methods that address complex behavior. Non-design disciplines are not geared toward generating desirable solutions.Interaction 09 | Vancouver Introduction to Interaction Design 36
![Page 37: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/37.jpg)
A great perspective …
Interaction 09 | Vancouver Introduction to Interaction Design 37
Bill Verplank http://billverplank.com/Lecture/
![Page 38: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/38.jpg)
It is a DESIGN discipline
Science
Interaction 09 | Vancouver Introduction to Interaction Design 38
Art
![Page 39: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/39.jpg)
The lab & The data
Interaction 09 | Vancouver 39Introduction to Interaction Design
![Page 40: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/40.jpg)
Beauty for beauty's sake
Interaction 09 | Vancouver 40Introduction to Interaction Design
![Page 41: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/41.jpg)
Can't we all just get a long?
Salvador is a
Interaction 09 | Vancouver 41Introduction to Interaction Design
![Page 42: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/42.jpg)
2008: Year of the SKETCHThere is no *D*esigning without sketching• Multiplicity• Disposability• Associative Thinking
![Page 43: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/43.jpg)
The Designer's Path
Bill Buxton's Sketching UX
![Page 44: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/44.jpg)
Communicating our ideas
![Page 45: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/45.jpg)
Making ideas into things
![Page 46: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/46.jpg)
Creating narratives
![Page 47: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/47.jpg)
There is an aesthetic to interaction
More on THIS later (I hope)
![Page 48: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/48.jpg)
HOW DID WE GET HERE?
Interaction 09 | Vancouver 48Introduction to Interaction Design
![Page 49: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/49.jpg)
In the beginning …
• What is interaction?– The listening and responding between at least 2 entities.– Action by an initiation (passive or active) and a listener’s
reaction, which leads to the initiator’s own reaction– EXAMPLE:
Interaction 09 | Vancouver Introduction to Interaction Design 49
Excess material is removedTo reveal new object
Whack withstone axe
![Page 50: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/50.jpg)
If only it stayed that simple?
Interaction 09 | Vancouver Introduction to Interaction Design 50
![Page 51: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/51.jpg)
Eco-systems
Interaction 09 | Vancouver Introduction to Interaction Design 51
![Page 52: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/52.jpg)
Social Interactions
Interaction 09 | Vancouver Introduction to Interaction Design 52
![Page 53: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/53.jpg)
Open Data – The “unproduct”
Interaction 09 | Vancouver Introduction to Interaction Design 53
![Page 54: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/54.jpg)
Gestures
Interaction 09 | Vancouver Introduction to Interaction Design 54
![Page 55: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/55.jpg)
Ambient & Ubiquitous & Passive Bio-feedback
Interaction 09 | Vancouver Introduction to Interaction Design 55
![Page 56: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/56.jpg)
That was all about mediums …
What about the focus of the designer?What about the practice?Where are we today?
Interaction 09 | Vancouver Introduction to Interaction Design 56
![Page 57: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/57.jpg)
Marc Rettig’s – goals of the process
Interaction 09 | Vancouver Introduction to Interaction Design 57
Marc Rettig – http://fitassociates.com/
![Page 58: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/58.jpg)
Historical view of the focus in terms of practice• Human Factors• Leads to Human Computer Interaction• Leads to Usability Evaluation• Leads to early Interaction Design
– Enter (Design – aesthetics & story telling)• Leads to Social Interaction Design
– Participatory story telling – Designer enables his own loss of control over the system
• Leads to co-designing Interactive Systems– As the data opens up, all control is lost, and the eco-
system’s infrastructure is what is designed, NOT the interfacing points.
– But they still have to be imagined and modeled and exemplified.
Interaction 09 | Vancouver Introduction to Interaction Design 58
![Page 59: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/59.jpg)
Human Factors
Interaction 09 | Vancouver Introduction to Interaction Design 59
![Page 60: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/60.jpg)
Human Computer Interaction
Interaction 09 | Vancouver Introduction to Interaction Design 60
![Page 61: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/61.jpg)
Usability Evaluation
Interaction 09 | Vancouver Introduction to Interaction Design 61
![Page 62: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/62.jpg)
Software Design Manifesto
1991 (and again in 1996)– Mitch Kapor outlines the need for
software to be designed, not just engineered.
– Firmness, commodity and delight
Despite the enormous outward success of personal computers, the daily experience of using computers far too often is still fraught with difficulty, pain, and barriers for most people, which means that the revolution, measured by its original goals, has not as yet succeeded.
Interaction 09 | Vancouver Introduction to Interaction Design 62
![Page 63: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/63.jpg)
2 directions creating a continuum of practice
• N. America remains focused on research & evaluation tools– Cooper, “Tog”, J. Raskin
• Europe takes aim at aesthetics, expressionism, and experimentation.– Gillian Crampton Smith
• Royal College of Art• Interaction Design Institute of Ivrea
Interaction 09 | Vancouver Introduction to Interaction Design 63
![Page 64: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/64.jpg)
System & Experience Design
1998 – Everyone wants to become an Imagineer!
Interaction 09 | Vancouver Introduction to Interaction Design 64
Experience Design takes off as new “brand value”• All touch points inform “the brand”• Story telling• Service Design
![Page 65: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/65.jpg)
Web 2.0 + iPod increase the need and expectation for IxD
Interaction 09 | Vancouver Introduction to Interaction Design 65
![Page 66: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/66.jpg)
Bringing it all together
Interaction 09 | Vancouver Introduction to Interaction Design 66
![Page 67: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/67.jpg)
QUESTIONS? COMMENTS? THOUGHTS? INSIGHTS?
Interaction 09 | Vancouver 68Introduction to Interaction Design
![Page 68: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/68.jpg)
WELCOME BACK!
Interaction 09 | Vancouver 69Introduction to Interaction Design
![Page 69: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/69.jpg)
DOING INTERACTION DESIGN
Interaction 09 | Vancouver 70Introduction to Interaction Design
![Page 70: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/70.jpg)
But now really, what do we DO?• Sketch
– Ideate– Visualize– Communicate– Evaluate
• Tell– Humanize– Situate– Contextualize– Empathize– Connect– Envision
• Frame– Structure– Translate– Prototype
• Refine– No quick catch-all here– Depends on roles– Includes
• Graphic production– Typography– Iconography– Grid layouts
• Transitions• Writing
Interaction 09 | Vancouver Introduction to Interaction Design 71
![Page 71: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/71.jpg)
What’s a sketch
Interaction 09 | Vancouver Introduction to Interaction Design 72
Taken from the notes of J. Spool on BrainSparks Blog of a talk given by Bill Buxton to Boston-SIGCHI. http://www.uie.com/brainsparks/2006/11/16/buxton-on-sketching-and-experience-design/
Sketch PrototypeInvitation AttendanceSuggestion DescriptionQuestion AnswerPropose TestDestructive Constructive
![Page 72: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/72.jpg)
What is a sketch? (Pt. 2)
Interaction 09 | Vancouver Introduction to Interaction Design 73
What do you see here?
Rapid & Rough
Disposable
Multiplicity
Associative (not serial)
Communicate CONCEPTS
![Page 73: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/73.jpg)
Thinking tool
• Clarify• Evaluate• Associate• Build• Deconstruct
Interaction 09 | Vancouver Introduction to Interaction Design 74
![Page 74: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/74.jpg)
Verbs & Modifiers
• Warp• Burn• Stretch• Crease• Shrink• Skew• Scale• Tint
• Highlight• Darken• Add• Subtract• Obscure• Decorate• Minimize• Clarify
Interaction 09 | Vancouver Introduction to Interaction Design 75
![Page 75: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/75.jpg)
Exercise 2Sketching 20min.• Pick any object in the room• Redesign it
– Whatever that means to you• Stretch for over 20 ideas
Interaction 09 | Vancouver Introduction to Interaction Design 76
![Page 76: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/76.jpg)
TellIt is a story• Interaction Design IS storytelling!• How?
– Write a script• Plot • Characters• Dialog• Setting• Audience
– Use comics• Read Understanding Comics
– Create your package or advert
Interaction 09 | Vancouver Introduction to Interaction Design 77
![Page 77: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/77.jpg)
TellKeep it situated• Always focus on human beings• Who are doing something• Someplace specific• For specific reasons• To achieve specific goals
• The interfaces themselves are less important than the tasks, contexts, and goals.
Interaction 09 | Vancouver Introduction to Interaction Design 78
![Page 78: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/78.jpg)
TellExample
Interaction 09 | Vancouver Introduction to Interaction Design 79
By Scott McCloud for Google Chromehttp://www.google.com/googlebooks/chrome/
![Page 79: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/79.jpg)
TellExamples – a progression• Cooper Drawing Board• Adaptive Path Aurora• Nokia & Cambridge University• Intel & IDEO
Interaction 09 | Vancouver Introduction to Interaction Design 80
![Page 80: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/80.jpg)
TellThe Goal• Create a compelling story that is
human situated to place your designs in
• Telling early on also allows for you to find breakdowns in core paths and situations
Interaction 09 | Vancouver Introduction to Interaction Design 81
![Page 81: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/81.jpg)
FramingLanguageDesigning interactions requires you create (or translate) the language:•Nouns
– What are the objects of the system•Verbs
– What actions act on those objects•Modifiers
– What are the properties of nouns and verbs (adjectives & adverbs)
Interaction 09 | Vancouver Introduction to Interaction Design 82
![Page 82: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/82.jpg)
Framing Interactivity• What is listening
& for what?• What is responding
& to whom/what?
Interaction 09 | Vancouver Introduction to Interaction Design 83
![Page 83: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/83.jpg)
FramingLayout & Prototype• Make it real through layout attempts
– Wireframes are more than appropriate here• Make it more real through interactivity
– Prototype interactively• Create a clear hierarchy of navigation, objects,
actions, information, etc.
GOAL• Mold the clay of your craft’s foundations (more
later)• Make it alive for heuristic evaluation• Enable it for truer end-user validation
Interaction 09 | Vancouver Introduction to Interaction Design 84
![Page 84: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/84.jpg)
FramingExample
Interaction 09 | Vancouver Introduction to Interaction Design 85
![Page 85: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/85.jpg)
Exercise 3Framing – 30min.• Groups of 4• Design an online travel system• Tell a story• Using framing to capture key
language & structure• Focus on ONE aspect of travel
(fly, stay, drive)
Interaction 09 | Vancouver Introduction to Interaction Design 86
![Page 86: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/86.jpg)
RefineOverview• It’s time for the details• Get emotional
– Delight– Engage– Create desire or joy
• Be clear(er)• All the states! (micro & macro)
Interaction 09 | Vancouver Introduction to Interaction Design 87
![Page 87: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/87.jpg)
RefineWhat are you doing?• Pixel perfect
– Layout– Type– Iconography– Imagery
• Communicate– Write (your interface, YOUR words)– Metaphor (especially in iconography)
Interaction 09 | Vancouver Introduction to Interaction Design 88
![Page 88: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/88.jpg)
Refinethe kicker• It is during refinement that you also
design the exceptions– Error messaging– Help systems– Alternate flows
Interaction 09 | Vancouver Introduction to Interaction Design 89
![Page 89: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/89.jpg)
RefineExample
Interaction 09 | Vancouver Introduction to Interaction Design 90
![Page 90: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/90.jpg)
RESEARCH ANYONE?
Interaction 09 | Vancouver 91Introduction to Interaction Design
![Page 91: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/91.jpg)
Where’s the research?
• There was definitely research up there on your elements slide, right?
• What is research anyway?– Is all research user-centered?
• Market/Biz?• Technology?• Design?
• Research is outside of IxD though. IxD exists with or without research.
Interaction 09 | Vancouver Introduction to Interaction Design 92
![Page 92: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/92.jpg)
Yes, yes, yes …
• Generative research– Observe
• Contextual Inquiry• Ethnography
– Interview• Probe
– Engage• Create• Think• DiscussParticipatory Design
Interaction 09 | Vancouver Introduction to Interaction Design 93
Janchipchase.com
![Page 93: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/93.jpg)
More on research
• Evaluative– Test (Usability Testing)– Evaluate (Heuristics)
• Nielsen’s Ten Heuristics• Tog’s 1st principles of IxD
– Observe (again!)– Data mine
• Read logs– Site logs– Call center logs
Interaction 09 | Vancouver Introduction to Interaction Design 94
![Page 94: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/94.jpg)
LET’S TALK ABOUT TOOLSGotta use some tools, right?
Interaction 09 | Vancouver 110Introduction to Interaction Design
![Page 95: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/95.jpg)
Tools for different things
• Doing Tools– Drawing– Organizing– Communicating
• Tools for process (AKA Methods)– Research
• Generate Ideas• Evaluate/Validate Ideas
• Tools for memory & learning– Patterns– Knowledge bases or Communities of Practice– Online Libraries– Publications
Interaction 09 | Vancouver Introduction to Interaction Design 111
![Page 96: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/96.jpg)
What you are comfortable with
Interaction 09 | Vancouver Introduction to Interaction Design 112
![Page 97: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/97.jpg)
Don’t be afraid to try things
Interaction 09 | Vancouver Introduction to Interaction Design 113
![Page 98: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/98.jpg)
But you have to pick something
Interaction 09 | Vancouver Introduction to Interaction Design 114
![Page 99: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/99.jpg)
My Tools for Doing
• Ideating– Pen & Paper (analog)
• #1 tool– Clipping
• Evernote• Flow charts & Task flows
– Visio (OmniGraffle)• Modeling
– Visio– Illustrator– Fireworks
• Prototyping– Fireworks
• Hopeful about Flash Catalyst– Flash– Blend
• Communicating– PowerPoint (Keynote)– Videos– Sequential Storyboard
• Illustrator• Comic Life• Other!
– Email– IM– PHONE– MEETINGS– Collaboration Software
• Basecamp• Wikis
• Documenting– MS Word– InDesign
Interaction 09 | Vancouver Introduction to Interaction Design 115
![Page 100: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/100.jpg)
Tools for Process
• Generative Research– Participant Design– Ethnography
• Participant Observation• Contextual Inquiry
– Interviews– Brainstorming– Market Research– Trending
• Modeling Data– Affinity Maps– PersonasTask Flows– Sketch Modeling– Situated Narratives
• Scenarios• Comics• Videos
• Evaluation/Validation– Ethnography (again)– Usability Testing
• Think Aloud– Heurisitic Evaluation– Competitive
Analysis/Comparison
Interaction 09 | Vancouver Introduction to Interaction Design 116
![Page 101: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/101.jpg)
Tools for Memory & Learning
• Patterns– Yahoo Pattern Library– Designing Interfaces– Mobile Patterns– Social Interaction Patterns– Quince– Interaction Patterns– Weil UI Patterns
• Knowledge bases• Wikis
– Interaction-design.org• IxDA Discussion Archive• ACM Digital Library ($)
– Communities• IxDA• IAI• Local CHI/UPA/UX
– Publications• Boxes & Arrows• UX Matters• Interactions• JohnnyHolland.org• Digital-Web
– Blogsphere• Way too many to list
– TWITTER!!!!!
Interaction 09 | Vancouver Introduction to Interaction Design 117
![Page 102: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/102.jpg)
WHAT ELSE DO YOU NEED TO KNOW
Things you have to really explore for yourself
Interaction 09 | Vancouver 118Introduction to Interaction Design
![Page 103: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/103.jpg)
Direct IxD TheoryTopics & Good Sources• HCI
– How does the mind and the computer meet
• Design of Everyday Things• HCI Remixed
• UI Design– How to control visual
elements on a 2D screen• Designing Visual User
Interfaces• Web Form Design
• Evaluation Methods– How to evaluate your
designs• Observing the User
Experience• Usability for the World Wide
Web
• Deeper Interaction Theory– Understanding the design of
behavior within digital products, services and systems
• Designing for Interaction• About Face 3
– Connecting what we do to the history of Interaction Design
• Designing Interactions• Thoughts on Interaction Design• Thoughtful Interaction Design
– Discovery of common solutions to repeated problems (Patterns)
• Designing Interfaces– Information Architecture
• Information Anxiety 2• Information Architecture for the
World Wide Web
Interaction 09 | Vancouver Introduction to Interaction Design 119
![Page 104: Interaction 09 Introduction to Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081412/53f102948d7f72e94b8b4706/html5/thumbnails/104.jpg)
Questions???
David MaloufInteraction DesignSavannah College of Art & Designhttp://davemalouf.com/http://scad.edu/industrial_designhttp://twitter.com/daveixd http://iact.in/ (Students @ SCAD; coming soon)
Interaction 09 | Vancouver 120Introduction to Interaction Design