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

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

WHO ARE WE? Let’s learn about the people with whom we are spending 4 hours today. Interaction 09 | Vancouver Introduction to Interaction Design

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? Interaction 09 | Vancouver Introduction to Interaction Design

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? Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 … Interaction 09 | Vancouver Introduction to Interaction Design

We are talking about designing digital products & services, right? So …

QUESTION What is interactivity? Interaction 09 | Vancouver Introduction to Interaction Design

What is interactivity?

Another one What’s a GOOD interactive product? Interaction 09 | Vancouver Introduction to Interaction Design

What’s a GOOD interactive product?

Last one What’s a good product? Interaction 09 | Vancouver Introduction to Interaction Design

What’s a good product?

Let’s go WAY back firmitas, utilitas, venustas -- Vitruvius, “De Architectura” Interaction 09 | Vancouver Introduction to Interaction Design

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. Interaction 09 | Vancouver Introduction to Interaction Design

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? Interaction 09 | Vancouver Introduction to Interaction Design

What is interactivity?

What is a GOOD interactive product?

Interactivity? Well 1 st what is an interaction? Conversation? Play? Back & Forth? Interaction 09 | Vancouver Introduction to Interaction Design

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. Interaction 09 | Vancouver Introduction to Interaction Design

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? Interaction 09 | Vancouver Introduction to Interaction Design

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. Interaction 09 | Vancouver Introduction to Interaction Design

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. Interaction 09 | Vancouver Introduction to Interaction Design

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. Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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. Interaction 09 | Vancouver Introduction to Interaction 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

Science

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

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

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:

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? Interaction 09 | Vancouver Introduction to Interaction Design

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. Interaction 09 | Vancouver Introduction to Interaction Design

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. Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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! Interaction 09 | Vancouver Introduction to Interaction Design Experience Design takes off as new “brand value” All touch points inform “the brand” Story telling Service 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. Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

Clarify

Evaluate

Associate

Build

Deconstruct

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

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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. Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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) Interaction 09 | Vancouver Introduction to Interaction Design

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? Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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) Interaction 09 | Vancouver Introduction to Interaction Design

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) Interaction 09 | Vancouver Introduction to Interaction Design

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) Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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. Interaction 09 | Vancouver Introduction to Interaction Design

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

Generative research

Observe

Contextual Inquiry

Ethnography

Interview

Probe

Engage

Create

Think

Discuss

Participatory Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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. Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

Color

Value (light & dark)

Line

Volume (Form & space)

Plane (Surface)

Texture

Does IxD have Foundation? No Do we need them? YES! Why? Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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? Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

Classic up/down

Contemporary up/down

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

Up/Down

Knob

LET’S TALK ABOUT TOOLS Gotta use some tools, right? Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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!!!!! Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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 Interaction 09 | Vancouver Introduction to Interaction Design

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