interaction 09 introduction to interaction design

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.


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


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


Dan Saffer’s look


Challis Hodge – Breaking down Experience Design


Hodge again – now on role relationships


Nathan Shedroff - What do we do?


Exercise 1Sketch 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


Olivia


Robert



Kyle

Marcus


LET’S TAKE A STEP BACKWe 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 1st 2 questions

• What is interactivity?• What is a GOOD interactive product?


Interactivity?

• Well 1st 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


A terse definition


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


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 …


Bill Verplank http://billverplank.com/Lecture/

It is a DESIGN discipline

Science


Art

The lab & The data


Beauty for beauty's sake


Can't we all just get a long?

Salvador is a


2008: Year of the SKETCHThere 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?


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:


Excess material is removedTo reveal new object

Whack withstone axe

If only it stayed that simple?


Eco-systems


Social Interactions


Open Data – The “unproduct”


Gestures


Ambient & Ubiquitous & Passive Bio-feedback


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


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


Human Computer Interaction


Usability Evaluation


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


Bringing it all together


QUESTIONS? COMMENTS? THOUGHTS? INSIGHTS?


WELCOME BACK!


DOING 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


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)


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 2Sketching 20min.• Pick any object in the room• Redesign it

– Whatever that means to you• Stretch for over 20 ideas


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


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.


TellExample


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


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


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)


Framing Interactivity• What is listening

& for what?• What is responding

& to whom/what?


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


FramingExample


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)


RefineOverview• It’s time for the details• Get emotional

– Delight– Engage– Create desire or joy

• Be clear(er)• All the states! (micro & macro)


RefineWhat are you doing?• Pixel perfect

– Layout– Type– Iconography– Imagery

• Communicate– Write (your interface, YOUR words)– Metaphor (especially in iconography)


Refinethe kicker• It is during refinement that you also

design the exceptions– Error messaging– Help systems– Alternate flows


RefineExample


RESEARCH ANYONE?


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• DiscussParticipatory Design


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


LET’S TALK ABOUT TOOLSGotta 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


Don’t be afraid to try things


But you have to pick something


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


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)
