1.0 interaction design what is...

43
1.0 INTERACTION DESIGN WHAT IS IT? PRINCIPLES OF INTERACTION DESIGN | SUMMER 2014

Upload: others

Post on 08-Jul-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

1.0 interaction design

what is it?

PrinciPLes oF interaction design | sUMMer 2014

Page 2: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

deFinition

Interaction design is the design of interactive products and systems to support the way people communicate and interact in their everyday lives.

Page 3: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

it takes a viLLage

Interaction design is an umbrella term for all aspects of what is being designed:

Interface DesignSoftware DesignProduct DesignUser Experience DesignWeb Design

Page 4: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

#hoListic

We view interaction design as fundamental to all disciplines, fields, and approaches that are concerned with researching and designing interactive products and systems for people.

Page 5: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

designisM #1

NothiNg is useful if we doN’t kNow how to use it.

Page 6: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

what’s the Point?

Interaction design exists because people need an intuitive system to help learn, perform tasks, and navigate through new and existing content, technology and spaces.

Ultimately... we aim to improve communication between people and technology.

Page 7: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

interactive ProdUcts

Smart phones / handheld devicesToys / gamesRemotesHousehold technologyMobile applications / softwareWebsitesRobotics

Page 8: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 9: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

interactive systeMs

Airport / mall kiosksRestaurants / storesExhibition graphicsSignage / wayfinding / navigationTheme parks

Page 10: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 11: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

User-centered design (Ucd)

User-centered design is a philosophy and a process in which the needs, wants and limitations of end users of a product or system are given extensive attention at each stage of the design process.

Who is this product for?Why would they use it?How will they use it?

Page 12: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

UsabiLity

Ensuring that interactive products are easy to learn, effective to use, and enjoyable from the user’s perspective.

UsabiLity goaLs

effectiveefficientsafeutilitylearnabilitymemorability

Page 13: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 14: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 15: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

UX goaLs

satisfyingenjoyableengagingentertainingmotivatingchallengingrewardinghelpful

User eXPerience (UX)

The user experience is about how people feel about a product and their pleasure and satisfaction when using it.

Page 16: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 17: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 18: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 19: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 20: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

case stUdy ikea

Page 21: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 22: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 23: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 24: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 25: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

interaction tyPes

There are four main types of interactions. Understanding which interaction type to use helps designers choose which interface and behaviors to implement.

Page 26: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

instrUcting

tell timeprint a fileremindersword processing

conversing

search enginesbankingticket bookinghelp centers / help chat

ManiPULating

toys / gameszoomingmoving selectingshrinking

eXPLoring

virtual tourslocation-detection technology

Page 27: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

designisM #2

good desigN reduces the Negative aspects while eNhaNciNg the positive oNes.

Page 28: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

dieter raMs 10 PrinciPLes oF good design

innovativeusefulbeautifulunderstandableunobtrusivehonestlong-lastingthorough / detailedenvironmentally friendlysimple

Page 29: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

good

simpleeasyclear

minimaleffective

value

bad

complicateddifficult

confusingcluttereduseless

worthless

Page 30: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 31: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

revoLUtionary or evoLUtionary

Not all products and systems need to be new and original.

Research will determine whether or not you need a revolutionary concept or an evolutionary redesign of the current model.

Page 32: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 33: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 34: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

graPhic design

Designer Audience

Page 35: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

interaction design

Researcher Designer Developer/Engineer

User

Experience

Page 36: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

interaction design teaM

Keyword = team

The design of new products and systems is never done by one person. They are created by teams formed by people from many disciplines.

Page 37: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport
Page 38: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

hUMan Factors / research

UX Researcher (UX)Human factors (HF)PsychologySociology

design

Visual DesignProduct DesignIndustrial DesignEnvironmentalInformation DesignAnimation/motion

engineering

Computer ScienceEngineeringHuman-Computer Interaction (HCI)Information Architecture (IA)

bUsiness

MarketingProduct DevelopmentContent Writer

Page 39: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

deveLoPMent cycLe waterFaLL

reqUireMents

design

bUiLd

testing

Maintainance

Page 40: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

deveLoPMent cycLe iterative

ideas code

data

Learn Faster MeasUre Faster

bUiLd Faster

Page 41: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

agiLe

BuildiNgReplace high-level

design with frequent redesign.

iterative and increMentaL

coLLaborative

adaPtive PLanning

Lean

learNiNgEverything not

adding value to the customer is waste.

redUces cost

MiniMUM viabLe ProdUct

qUick LaUnch

Page 42: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

Process

Phase 1: research and reqUireMents

Define problem, content gathering, user research

Phase 2: ProdUct deveLoPMent and design

Brainstorming, content integration, design and system development

Phase 3: bUiLd and iMPLeMentation

Visual design, programming, refine product

Phase 4: testing and evaLUation

Usability testing, revisions and bug fixes

Page 43: 1.0 interaction design what is it?faculty.wwu.edu/schadeb/dsgn390/website/images/1.0_InteractionDe… · Mobile applications / software Websites Robotics. interactive systeMs Airport

designisM #3

the ultimate iNspiratioN is the deadliNe. – noLan bUshneLL (kong, atari, chUck e. cheese)