Interaction 09 Introduction to Interaction Design

Introduction to Interaction Design Interaction 09 | Vancouver Dave Malouf Professor of Interaction Design Savannah College of Art & Design

Workshop Schedule and Content 9: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

WHO ARE WE?
Let’s learn about the people with whom we are spending 4 hours today.

Who are we?
Name
Company (if any)
Title/role What do you call yourself @ a party?
What interests you about IxD?

SETTING THE SCENE Interaction 09 | Vancouver Introduction 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?

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

The Elements of User Experience Interaction 09 | Vancouver Introduction to Interaction Design

Dan Saffer’s look Interaction 09 | Vancouver Introduction to Interaction Design

Challis Hodge – Breaking down Experience Design Interaction 09 | Vancouver Introduction to Interaction Design

Hodge again – now on role relationships Interaction 09 | Vancouver Introduction to Interaction Design

Nathan Shedroff - What do we do? Interaction 09 | Vancouver Introduction to Interaction Design

Exercise 1 Sketch 20min
How would you do it?
Sketch model
Task
Process
Make up of elements

Breaking it down
Potential
Research
Strategy
Tactics
Telling
Presentation
Throughout
Evaluation
Narrative
Visualization

Adam Interaction 09 | Vancouver Introduction to Interaction Design

Olivia Interaction 09 | Vancouver Introduction to Interaction Design

Robert Interaction 09 | Vancouver Introduction to Interaction Design

Kyle Interaction 09 | Vancouver Introduction to Interaction Design

Marcus Interaction 09 | Vancouver Introduction to Interaction Design

LET’S TAKE A STEP BACK
We are talking about designing digital products & services, right? So …

QUESTION
What is interactivity?

Another one
What’s a GOOD interactive product?

Last one
What’s a good product?

Let’s go WAY back
firmitas, utilitas, venustas
-- Vitruvius, “De Architectura”

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.

Back to our 1 st 2 questions
What is interactivity?
What is a GOOD interactive product?

Interactivity?
Well 1 st what is an interaction?
Conversation?
Play?
Back & Forth?

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.

Interactive Product?
Does it have to have a computer?
Do you have an example of an interactive product without one?

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.

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.

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.

LET’S DEFINE IT FOR REAL Interaction 09 | Vancouver Introduction to Interaction Design

A terse definition Interaction 09 | Vancouver Introduction to Interaction Design

Interaction Design Defined Another 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

A new “medium”, a new kind of design
Interactive 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.

A great perspective … Interaction 09 | Vancouver Introduction to Interaction Design Bill Verplank http://billverplank.com/Lecture/

It is a DESIGN discipline
Science
Interaction 09 | Vancouver Introduction to Interaction Design Art

The lab & The data Interaction 09 | Vancouver Introduction to Interaction Design

Beauty for beauty's sake Interaction 09 | Vancouver Introduction to Interaction Design

Can't we all just get a long? Salvador is a Interaction 09 | Vancouver Introduction to Interaction Design

2008: Year of the SKETCH There is no *D*esigning without sketching
Multiplicity
Disposability
Associative Thinking
More on this later

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 Introduction 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 Excess material is removed To reveal new object Whack with stone axe

If only it stayed that simple? Interaction 09 | Vancouver Introduction to Interaction Design

Eco-systems Interaction 09 | Vancouver Introduction to Interaction Design

Social Interactions Interaction 09 | Vancouver Introduction to Interaction Design

Open Data – The “unproduct” Interaction 09 | Vancouver Introduction to Interaction Design

Gestures Interaction 09 | Vancouver Introduction to Interaction Design

Ambient & Ubiquitous & Passive Bio-feedback Interaction 09 | Vancouver Introduction to Interaction Design

That was all about mediums …
What about the focus of the designer?
What about the practice?
Where are we today?

Marc Rettig’s – goals of the process Interaction 09 | Vancouver Introduction to Interaction Design 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.

Human Factors Interaction 09 | Vancouver Introduction to Interaction Design

Human Computer Interaction Interaction 09 | Vancouver Introduction to Interaction Design

Usability Evaluation Interaction 09 | Vancouver Introduction to Interaction Design

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.

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

System & Experience Design
1998 – Everyone wants to become an Imagineer!
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

Bringing it all together Interaction 09 | Vancouver Introduction to Interaction Design

More context
Designers are still primarily educated focused on their current medium of choice and the associated tools.
Interaction Designers are still arguing over definitions.
An immature design discipline, Interaction Design, still does not contribute to design foundation in every design education program.
In practice, those doing Interaction Design, do so as “non-designers”.
Collaboration with visual or industrial designers is weak
Interaction Designers often do not have basic design language education.
The demand for Interaction Design practice is outpacing the numbers of qualified Interaction Designers out there today.

QUESTIONS? COMMENTS? THOUGHTS? INSIGHTS? Interaction 09 | Vancouver Introduction to Interaction Design

WELCOME BACK! Interaction 09 | Vancouver Introduction to Interaction Design

DOING INTERACTION DESIGN Interaction 09 | Vancouver Introduction 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

What’s a sketch Interaction 09 | Vancouver Introduction to Interaction Design 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 Prototype Invitation Attendance Suggestion Description Question Answer Propose Test Destructive Constructive

What is a sketch? (Pt. 2) Interaction 09 | Vancouver Introduction to Interaction Design What do you see here? Rapid & Rough Disposable Multiplicity Associative (not serial) Communicate CONCEPTS

Thinking tool
Clarify
Evaluate
Associate
Build
Deconstruct

Verbs & Modifiers
Warp
Burn
Stretch
Crease
Shrink
Skew
Scale
Tint
Highlight
Darken
Add
Subtract
Obscure
Decorate
Minimize
Clarify

Exercise 2 Sketching 20min.
Pick any object in the room
Redesign it
Whatever that means to you
Stretch for over 20 ideas

Tell It 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

Tell Keep 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.

Tell Example Interaction 09 | Vancouver Introduction to Interaction Design By Scott McCloud for Google Chrome http://www.google.com/googlebooks/chrome/

Tell Examples – a progression
Cooper Drawing Board
Adaptive Path Aurora
Nokia & Cambridge University
Intel & IDEO

Tell The 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

Framing Language
Designing 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)

Framing Interactivity
What is listening
& for what?
What is responding
& to whom/what?

Framing Layout & 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

Framing Example Interaction 09 | Vancouver Introduction to Interaction Design

Exercise 3 Framing – 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)

Refine Overview
It’s time for the details
Get emotional
Delight
Engage
Create desire or joy
Be clear(er)
All the states! (micro & macro)

Refine What are you doing?
Pixel perfect
Layout
Type
Iconography
Imagery
Communicate
Write (your interface, YOUR words)
Metaphor (especially in iconography)

Refine the kicker
It is during refinement that you also design the exceptions
Error messaging
Help systems
Alternate flows

Refine Example Interaction 09 | Vancouver Introduction to Interaction Design

RESEARCH ANYONE? Interaction 09 | Vancouver Introduction 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.

Yes, yes, yes …
Generative research
Observe
Contextual Inquiry
Ethnography
Interview
Probe
Engage
Create
Think
Discuss
Participatory Design
Interaction 09 | Vancouver Introduction to Interaction Design Janchipchase.com

More on research
Evaluative
Test (Usability Testing)
Evaluate (Heuristics)
Nielsen’s Ten Heuristics
Tog’s 1 st principles of IxD
Observe (again!)
Data mine
Read logs
Site logs
Call center logs

FOUNDATION Interaction 09 | Vancouver Introduction to Interaction Design

What is foundation?
It is a group of core courses that design students start with to build a base in theory & craft. It is usually pretty intense.
Color
Drawing
Graphics
And various craft classes

Another take on Foundation
A group of courses or topics that are “required” for true understanding of what it is your craft as a designer of the discipline you’ve chosen.

Rowena Reed Kostelow
She created the Pratt Industrial Design Program
She also created the Elements of Foundation that the 1 st year of education is based on.
You do learn skills, but in context of theory.
Foundations are specific to the medium

What are IDs Elemental Foundations
Color
Value (light & dark)
Line
Volume (Form & space)
Plane (Surface)
Texture

Does IxD have Foundation?
No
Do we need them?
YES!
Why?

What is the value of foundation
Defines the clay
Gives us a language for what it is we craft
Sets up a parameters for critique

Let’s start the discussion
Here are my early attempts
Time
Metaphor
Abstraction
Movement (a new one for me)
Negativity

Time
Well interactivity exists in time, right?
Duration
Attention, or “posture”
Frequency
How many times in X period
Rhythm
Predictable or syncopated
Delay
In our response
In the system’s response

Abstraction Ok, wait for it!
I can’t tell you what it is, I just have to show you. ;-)
Google Maps
iPod click wheel
Touch
Where is Command Line?

Metaphor
Everything in digital is metaphor
Folder
Trash can
Dock
Even the name computer
Our choice of metaphor dramatically effects the interaction design aesthetics

Metaphor brings meaning
No true affordances in the virtual
Need metaphors to trick the mind

Movement A new one (for me)
This is a new theory of mine
Popularity of gestural interfaces begs a few observations
Yes, abstraction, is part of this b/c Gestures is often about direct manipulation.
Moving feels good
Our choice of motion effects the design

What feels better to use?
Classic up/down
Contemporary up/down

Maybe this is clearer
Up/Down
Knob
Interaction 09 | Vancouver Introduction to Interaction Design Slide & Tap

LET’S TALK ABOUT TOOLS
Gotta use some tools, right?

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

What you are comfortable with Interaction 09 | Vancouver Introduction to Interaction Design

Don’t be afraid to try things Interaction 09 | Vancouver Introduction to Interaction Design

But you have to pick something Interaction 09 | Vancouver Introduction to Interaction Design

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

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

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!!!!!

WHAT ELSE DO YOU NEED TO KNOW
Things you have to really explore for yourself

Direct IxD Theory Topics & 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

Questions??? David Malouf Interaction Design Savannah College of Art & Design http://davemalouf.com/ http://scad.edu/industrial_design http://twitter.com/daveixd http://iact.in/ (Students @ SCAD; coming soon) Interaction 09 | Vancouver Introduction to Interaction Design

https://online.cdu.edu.au	557
http://online.cdu.edu.au	74
http://pablocastillopublicitario5.blogspot.com	71
http://davemalouf.com	32
http://www.slideshare.net	18
https://cdu-staging.blackboard.com	5
http://bytes.fallonhotdish.com	2
http://cursos.itesm.mx	1
http://pinterest.com	1
http://pablocastillopublicitario5.blogspot.com.ar	1

Interaction 09 Introduction to Interaction Design

by David Malouf

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 762

Statistics