Date post: | 17-Aug-2014 |
Category: |
Design |
Upload: | david-malouf |
View: | 17,289 times |
Download: | 6 times |
Introduction to Interaction DesignInteraction 09 | Vancouver
Dave MaloufProfessor of Interaction DesignSavannah College of Art & Design
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
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
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
SETTING THE SCENE
Interaction 09 | Vancouver 5Introduction to Interaction Design
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
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
The Elements of User Experience
Interaction 09 | Vancouver Introduction to Interaction Design 8
Dan Saffer’s look
Interaction 09 | Vancouver Introduction to Interaction Design 9
Challis Hodge – Breaking down Experience Design
Interaction 09 | Vancouver Introduction to Interaction Design 10
Hodge again – now on role relationships
Interaction 09 | Vancouver Introduction to Interaction Design 11
Nathan Shedroff - What do we do?
Interaction 09 | Vancouver Introduction to Interaction Design 12
Exercise 1Sketch 20min• How would you do
it?• Sketch model
– Task– Process– Make up of
elements
Interaction 09 | Vancouver Introduction to Interaction Design 13
Breaking it down
• Potential• Research• Strategy• Tactics• Telling• Presentation
• Throughout– Evaluation– Narrative– Visualization
Interaction 09 | Vancouver Introduction to Interaction Design 14
Adam
Interaction 09 | Vancouver Introduction to Interaction Design 15
Olivia
Interaction 09 | Vancouver Introduction to Interaction Design 16
Robert
Interaction 09 | Vancouver Introduction to Interaction Design 17
Interaction 09 | Vancouver Introduction to Interaction Design 18
Kyle
Marcus
Interaction 09 | Vancouver Introduction to Interaction Design 19
LET’S TAKE A STEP BACKWe are talking about designing digital products & services, right? So …
Interaction 09 | Vancouver 20Introduction to Interaction Design
QUESTION
What is interactivity?
Interaction 09 | Vancouver Introduction to Interaction Design 21
Another one
• What’s a GOOD interactive product?
Interaction 09 | Vancouver Introduction to Interaction Design 22
Last one
• What’s a good product?
Interaction 09 | Vancouver Introduction to Interaction Design 23
Let’s go WAY back
firmitas, utilitas, venustas-- Vitruvius, “De Architectura”
Interaction 09 | Vancouver Introduction to Interaction Design 24
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
Back to our 1st 2 questions
• What is interactivity?• What is a GOOD interactive product?
Interaction 09 | Vancouver Introduction to Interaction Design 26
Interactivity?
• Well 1st what is an interaction?– Conversation?– Play?– Back & Forth?
Interaction 09 | Vancouver Introduction to Interaction Design 27
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
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
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
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
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
LET’S DEFINE IT FOR REAL
Interaction 09 | Vancouver 33Introduction to Interaction Design
A terse definition
Interaction 09 | Vancouver Introduction to Interaction Design 34
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
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
A great perspective …
Interaction 09 | Vancouver Introduction to Interaction Design 37
Bill Verplank http://billverplank.com/Lecture/
It is a DESIGN discipline
Science
Interaction 09 | Vancouver Introduction to Interaction Design 38
Art
The lab & The data
Interaction 09 | Vancouver 39Introduction to Interaction Design
Beauty for beauty's sake
Interaction 09 | Vancouver 40Introduction to Interaction Design
Can't we all just get a long?
Salvador is a
Interaction 09 | Vancouver 41Introduction to Interaction Design
2008: Year of the SKETCHThere is no *D*esigning without sketching• Multiplicity• Disposability• Associative Thinking
The Designer's Path
Bill Buxton's Sketching UX
Communicating our ideas
Making ideas into things
Creating narratives
There is an aesthetic to interaction
More on THIS later (I hope)
HOW DID WE GET HERE?
Interaction 09 | Vancouver 48Introduction to Interaction Design
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
If only it stayed that simple?
Interaction 09 | Vancouver Introduction to Interaction Design 50
Eco-systems
Interaction 09 | Vancouver Introduction to Interaction Design 51
Social Interactions
Interaction 09 | Vancouver Introduction to Interaction Design 52
Open Data – The “unproduct”
Interaction 09 | Vancouver Introduction to Interaction Design 53
Gestures
Interaction 09 | Vancouver Introduction to Interaction Design 54
Ambient & Ubiquitous & Passive Bio-feedback
Interaction 09 | Vancouver Introduction to Interaction Design 55
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
Marc Rettig’s – goals of the process
Interaction 09 | Vancouver Introduction to Interaction Design 57
Marc Rettig – http://fitassociates.com/
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
Human Factors
Interaction 09 | Vancouver Introduction to Interaction Design 59
Human Computer Interaction
Interaction 09 | Vancouver Introduction to Interaction Design 60
Usability Evaluation
Interaction 09 | Vancouver Introduction to Interaction Design 61
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
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
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
Web 2.0 + iPod increase the need and expectation for IxD
Interaction 09 | Vancouver Introduction to Interaction Design 65
Bringing it all together
Interaction 09 | Vancouver Introduction to Interaction Design 66
QUESTIONS? COMMENTS? THOUGHTS? INSIGHTS?
Interaction 09 | Vancouver 68Introduction to Interaction Design
WELCOME BACK!
Interaction 09 | Vancouver 69Introduction to Interaction Design
DOING INTERACTION DESIGN
Interaction 09 | Vancouver 70Introduction to Interaction Design
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
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
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
Thinking tool
• Clarify• Evaluate• Associate• Build• Deconstruct
Interaction 09 | Vancouver Introduction to Interaction Design 74
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
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
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
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
TellExample
Interaction 09 | Vancouver Introduction to Interaction Design 79
By Scott McCloud for Google Chromehttp://www.google.com/googlebooks/chrome/
TellExamples – a progression• Cooper Drawing Board• Adaptive Path Aurora• Nokia & Cambridge University• Intel & IDEO
Interaction 09 | Vancouver Introduction to Interaction Design 80
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
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
Framing Interactivity• What is listening
& for what?• What is responding
& to whom/what?
Interaction 09 | Vancouver Introduction to Interaction Design 83
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
FramingExample
Interaction 09 | Vancouver Introduction to Interaction Design 85
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
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
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
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
RefineExample
Interaction 09 | Vancouver Introduction to Interaction Design 90
RESEARCH ANYONE?
Interaction 09 | Vancouver 91Introduction to Interaction Design
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
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
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
LET’S TALK ABOUT TOOLSGotta use some tools, right?
Interaction 09 | Vancouver 110Introduction to Interaction Design
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
What you are comfortable with
Interaction 09 | Vancouver Introduction to Interaction Design 112
Don’t be afraid to try things
Interaction 09 | Vancouver Introduction to Interaction Design 113
But you have to pick something
Interaction 09 | Vancouver Introduction to Interaction Design 114
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
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
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
WHAT ELSE DO YOU NEED TO KNOW
Things you have to really explore for yourself
Interaction 09 | Vancouver 118Introduction to Interaction Design
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
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