0515 UiGathering Talk - Interaction Design by Stanley

School of Informa-on University of Michigan

•  •  •  • 

(Interac-on Design, IxD) ?

The prac-ce of designing interac-ve digital products, environments, systems, and services (by Cooper et al., About Face)

Designing interac-ve products to support people in their everyday and working lives (by Preece et al., Interac.on Design, 2002)

Interac-on design (abbreviated as IxD) deﬁnes the structure and content of communica-on between two or more interac-ve "beings" to understand each other. (by McCullough, Digital Ground, 2004)

? IxD HCI (Human-‐Computer Interac-on) UX (User Experience) UE (Usability Engineering) UI (User Interface) UCD (User-‐Centered Design) HCD (Human-‐Centered Design) IA (Informa-on Architecture)

IxD UX Content Form Informa-on Architects Industrial designers Copywriters Graphic designers Animators Sound designers Behavior Interac-on Designers UX Elements Cooper et al. About Face

Vannevar Bush, As We May Think, 1945 hWp://www.youtube.com/watch?v=c539cK58ees&feature=related

hWp://www.weeplaces.com/sha-‐hwang/

Iden-fy needs/ establish requirement (Re)Design Evaluate Build an interac-ve version Final Product Preece et al. Interac.on Design

> Iden.fy needs/establish requirement Iden-fy needs/ establish requirement Design Requirement Analyzing, Highligh-ng, and Project Ini-a-on Priori-zing Design Design Idea High-‐level goal & design requirement Request Problem ini-a-on User Study (contextual inquiry, interview, diary, etc ) Compara-ve Analysis Interpreta-on (sequence, ﬂow, ar-fact, culture, physical) Persona Analyzing, Highligh-ng, Priori-zing

> Iden.fy needs/establish requirement User Study (contextual inquiry, Interpreta-on (sequence, ﬂow, interview, diary, etc ) ar-fact, culture, physical) Contextual Inquiry Aﬃnity Diagram / coding Interview / Focus group Sequence model Diary Study

> Iden.fy needs/establish requirement Compara-ve Analysis Mee-ng Tool

> Iden.fy needs/establish requirement Analyzing, Highligh-ng, Priori-zing Persona Group

> (Re)Design & Build Prototype Iden-fy needs/ Design requirement & establish ideas requirement Scenario / Storyboard (Re)Design Sketch Prototype Ideate Iterate Build an interac-ve version

> (Re)Design & Build Prototype Scenario / Storyboard hWp://taehok.com/night/?page_id=64

> (Re)Design & Build Prototype Sketch hWp://taehok.com/night/?page_id=64

> (Re)Design & Build Prototype Buxton, Sketching User Experience, 2007

> (Re)Design & Build Prototype Buxton, Sketching User Experience,2007

> (Re)Design & Build Prototype Prototype Prototypes ?

> (Re)Design & Build Prototype Prototype Prototypes as “Filters” (Lim & Stolterman. 2008)

> (Re)Design & Build Prototype Prototype Appearance Data Func-onality Interac-vity Spa-al structure hWp://taehok.com/night/?page_id=64

> (Re)Design & Build Prototype Prototype Role Implementa-on Look and Feel (Houde & Hill , 1997)

> (Re)Design & Build Prototype Prototype ?

> (Re)Design & Build Prototype Prototype hWp://farm3.sta-c.ﬂickr.com/2384/2652071069_745clbb8e_o.jpg hWp://www.iteamnm.com/images/0691_18.jpg

> Evaluate Iden-fy needs/ Design requirement & establish ideas requirement (Re)Design Evaluate Build an interac-ve version

> Evaluate Usability Inspec-on Tes-ng Others Methods Heuris-c Usability Tes-ng GOMS Evalua-on Cogni-ve A/B Tes-ng Wizard of OZ Walkthrough Speed Da-ng Replay

> (Re)Design & Build Prototype Usability Tes-ng Usefulness, Efficiency, Effec-veness, Sa-sfac-on, Accessibility hWp://farm3.sta-c.flickr.com/2384/2652071069_745clbb8e_o.jpg hWp://www.doublejumpmedia.com/wp-‐content/uploads/2009/05/

> (Re)Design & Build Prototype Wizard of Oz Speed Da-ng hWp://farm3.sta-c.ﬂickr.com/2384/2652071069_745clbb8e_o.jpg hWp://www.doublejumpmedia.com/wp-‐content/uploads/2009/05/

> (Re)Design & Build Prototype 1. ” ” 2. 3. 4.

Iden-fy needs/ establish requirement (Re)Design Evaluate Build an interac-ve version Final Product process” ” ? Preece et al. Interac.on Design

“technology as experience” McCarthy & Wright, 2007

Iden-fy needs/ establish requirement (Re)Design Evaluate Build an interac-ve version Final Product

Iden-fy needs/ establish Understand requirement (Re)Design Evaluate Build an interac-ve version Final Product

Case1: Whereabout Clock Symbol of togetherness and connectedness (Sellen et al. 2006)

Case2: SmartHome Feel likes to be a good parent (Davidoﬀ et al. 2007)

: 1. , 2. 3. , , 4. 5.

Iden-fy needs/ establish Understand requirement (Re)Design Evaluate Build an interac-ve version Design Principles Final Product

Gulfs of Evalua-on & Execu-on Inten-ons evalua-on Execu-on Gulf Goals Interface Interface Evalua-on Gulf Physical System by Don Norman

Make use of conven.on!!

What is a browser? What features and func-onality a browser “should” have?

Conceptual Model

Designers’ mental Users’ mental model model Conceptual Model

Gmail Move to Labels ? Designers’ mental model: label Users’ mental model: folder

Signiﬁer

hWp://heroswelcome.com/images/P/Dental-‐mirror-‐1.jpg

hWp://www.dental-‐teeth.com/wp-‐content/uploads/2010/10/dental-‐handpiece.jpg

hWp://www.henkesasswolf.de/uploads/tx_exojavagal/Henke_Dent_2000SA_01.jpg

hWp://chrisocp.ﬁles.wordpress.com/2010/01/hammer3.jpg

“simpler-‐looking does not always translate to simplicity of use” by Don Norman

“complexity is a fact of the word, simplicity is in the mind” by Don Norman

Even simple-‐look things are complex

Social Signiﬁer

Recommender & Reputa-on system

System Feedback

Error Preven.on & Recover

slips Undo Slips

Recover mistakes

Flexibility

Eﬀort Minimiza.on

” ”

Thank you

http://mony.pixnet.net	151
http://uxmap.net	68
http://morethanorequalto.blogspot.com	51
http://soldiers.tumblr.com	40
http://soldiers1.wordpress.com	29
http://acdesignlab.blogspot.com	20
http://www.slideshare.net	7
url_unknown	3
http://webcache.googleusercontent.com	1

0515 UiGathering Talk - Interaction Design by Stanley

by Armuro Chang on May 23, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 370

Statistics

0515 UiGathering Talk - Interaction Design by Stanley — Presentation Transcript