52
From Ideas to Paper Prototypes: Hands-on Approaches for Early Stage Projects IxDworks Valeria Gasik, Darja Tokranova

IxD Works Miniworkshop: Introduction

Embed Size (px)

Citation preview

Page 1: IxD Works Miniworkshop: Introduction

From Ideas to Paper Prototypes: Hands-on Approaches for Early Stage Projects

IxDworks

Valeria Gasik, Darja Tokranova

Page 2: IxD Works Miniworkshop: Introduction

Valeria GasikM.Sc (HCI)Interaction DesignerFinland

Darja TokranovaM.Sc (HCI)Freelance designerEstonia

Katri TammsaarErasmus academic coordinatorEstonia

Presenting today

Page 3: IxD Works Miniworkshop: Introduction

Today

Page 4: IxD Works Miniworkshop: Introduction

Interaction Design

User-Centered Design

Page 5: IxD Works Miniworkshop: Introduction

Idea UsersContext

Concept1st prototype Reflection

Page 6: IxD Works Miniworkshop: Introduction

Idea UsersContext

Concept1st prototype Reflection

Page 7: IxD Works Miniworkshop: Introduction

We are here

Page 8: IxD Works Miniworkshop: Introduction

We are here Heading here

Page 9: IxD Works Miniworkshop: Introduction

We are here Heading here

Page 10: IxD Works Miniworkshop: Introduction

Goal todayTo find and understand the need and to outline the basic behavior.

Page 11: IxD Works Miniworkshop: Introduction

Need?Goals?Behavior?

Page 12: IxD Works Miniworkshop: Introduction

Interaction designers shape digital things

for people’s use

Page 13: IxD Works Miniworkshop: Introduction

Bret Victor - http://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/

Page 14: IxD Works Miniworkshop: Introduction

Fits the problem poorly

Fits the user poorly

= don’t do this

Page 15: IxD Works Miniworkshop: Introduction

Fits the problem (very) well

Fits the user(very) well

A tool amplifies

capabilities

Page 16: IxD Works Miniworkshop: Introduction

Interaction designers shape digital things

for people’s use

Page 17: IxD Works Miniworkshop: Introduction

Fundamentallydifferent

in their complexity

when somethingis shown here

Page 18: IxD Works Miniworkshop: Introduction

Doing things easily and with pleasure.

Page 19: IxD Works Miniworkshop: Introduction

Useful Usable Desirable

Doing things easily and with pleasure.

User-Centered Design

Product

Page 20: IxD Works Miniworkshop: Introduction

Optimizing design based on how users can, want or need to use a solution.

Behavior

Doing things easily and with pleasure.

Page 21: IxD Works Miniworkshop: Introduction

Somethingin between

Page 22: IxD Works Miniworkshop: Introduction

Need?Goals?Behavior?

Page 23: IxD Works Miniworkshop: Introduction

Vision

Page 24: IxD Works Miniworkshop: Introduction

Reality

Page 25: IxD Works Miniworkshop: Introduction

For whom?Users (≠ segments), sharing

For what purpose?Needs, goals, abilities

What?Idea, concept, prototype, product

How?Brainstorming, designing, evaluating...

Scope?Time, budget, team, effects...

Product’s behavior

User’s behavior

Context

Page 26: IxD Works Miniworkshop: Introduction

Where to start?

Page 27: IxD Works Miniworkshop: Introduction

UCD

Example approaches

Research

PersonasScenariosUse CasesRequirements

Design

ConceptRapid prototypesWireframesInteractive demos

Evaluation

TestingTask analysis FeedbackHeuristics

Page 28: IxD Works Miniworkshop: Introduction

Learning about users, tasks andproduct

Solving key problems through

design

Testing and improving the

product

Research

PersonasScenariosUse CasesRequirements

Design

ConceptPaper prototypesWireframesHi-fi prototypes

Evaluation

TestingTask analysis FeedbackHeuristics

Example approaches

Page 29: IxD Works Miniworkshop: Introduction

Research

PersonasScenariosUse CasesRequirements

Design

ConceptPaper prototypesWireframesHi-fi prototypes

Evaluation

TestingTask analysis FeedbackHeuristics

Example approaches

Page 30: IxD Works Miniworkshop: Introduction

Personas

Page 31: IxD Works Miniworkshop: Introduction

We can’t ask users to be with us all the time, thus we make

informed generalizations.

Zzz.

Page 32: IxD Works Miniworkshop: Introduction

He’s not Bob IRL

Is it logical?

Is it fun?

Bob would not like that because...

Page 33: IxD Works Miniworkshop: Introduction

Persona

• Describes imaginative users archetypes.

• Is based on the real research and observation. • Shows user goals and their behavior patterns• Helps to crack “what” and “why” questions

1-2 personas is usually enough!

Page 34: IxD Works Miniworkshop: Introduction

“Bob”

Page 35: IxD Works Miniworkshop: Introduction

Fake persona

• Stereotype or a caricature• Can’t be backed up• Factoids• Fun is fun, but often useless

Page 36: IxD Works Miniworkshop: Introduction

ResourcesPrimary Secondary

Personal know-howStakeholdersOnline discussionsDomain expertsInformed guessesFeedbackSurveys

Talking to people directly,Observing their behavior

Page 37: IxD Works Miniworkshop: Introduction

What needs are we addressing?Lets make a persona together!

Page 38: IxD Works Miniworkshop: Introduction

What user wants to achieve (do-goal)?Why (be-goal)?

What is the current situation?Which frustrations are there at the moment?

Is there only one user or many?Where and when the activity is taking place?Is the need or the activity reoccurring?

Page 39: IxD Works Miniworkshop: Introduction

Example template

Background Bio

Name, (age), (role), occupation, education

Photo(s)Description

E.g. use environment or context, where the problem occurs and current solutions and frustrations.

Goals

• What are the user’s end goals (e.g. “get a car”)

• 1-3 end goals

Mapping

E.g. computer skills, necessity vs fun, quality vs price.

Page 40: IxD Works Miniworkshop: Introduction

Scenarios

Page 41: IxD Works Miniworkshop: Introduction

What is happening?

Page 42: IxD Works Miniworkshop: Introduction

Scenarios• Stories that help understand interactions

• A cheap way to illustrate design solution from user’s (persona’s) point of view

• Tell user’s goals, motivations and actions

• At first – lacks technical jargon

Page 43: IxD Works Miniworkshop: Introduction

Watching a movie

Bob selects a movie, inserts it in the device and sees it begin.

Bob selects a movie and inserts it in the device. Advertisements appear, followed by settings. Bob selects movie to start.

Page 44: IxD Works Miniworkshop: Introduction

Watching a movie

Bob grabs a controller and logs out of another person’s profile. He selects his account and sees various usage options. He opts for a movie application and sees a bookshelf-like selection of various titles. He picks a movie and sees detailed description. With his controller Bob makes the movie to begin.

Page 45: IxD Works Miniworkshop: Introduction

Scenarios• Vary in level of details

• Can be used use cases, user stories, testing...• Great for considering common and alternative

situations as well as accessibility issues

“What should this product do?”“If the user has no wi-fi, then ... “

“...while doing, user is interrupted”

Page 46: IxD Works Miniworkshop: Introduction

Scenarios

• without your solution present-based

• Focus is set on current practices that illustrate ‘state of the art’ and the problem context

• with your solution future-based

• Focus on how problems could be addressed (without diving into much details).

Page 47: IxD Works Miniworkshop: Introduction

Future based

...At the practice, Lisa starts the timer. Right after the

game, she summarizes the score and adds extra training

for two players...

Page 48: IxD Works Miniworkshop: Introduction

How will the new solution work?Lets think of a high-level scenario

Page 49: IxD Works Miniworkshop: Introduction

• In what settings will the product be used?

• Is the persona frequently interrupted?

• With what other products will it be used?

• What primary activities does the persona need to perform to meet her goals?

• What is the expected end result of using the product?

etc.

Page 50: IxD Works Miniworkshop: Introduction

NextFrom scenarios to paper prototypes

Page 51: IxD Works Miniworkshop: Introduction

Resources• Cooper, Alan, Reimann, R & Cronin, D. (2007) About Face 3: The essentials of interaction design. Wiley; ISBN:

0470084111

• Hinton, Andrew. Personas and the Role of Documentation. (2008) http://boxesandarrows.com/personas-and-the-role-of-design-documentation/

• Accessibility in User-Centered Design http://www.uiaccess.com/accessucd/personas.html

• Hassenzahl, M. (2008). User Experience (UX): Towards and experiential perspective on product quality. http://www.researchgate.net/publication/238472807_User_experience_(UX)_Towards_an_experiential_perspective_on_product_quality/file/60b7d51bf4873231da.pdf

• What research methods could I use to create personas? http://ux.stackexchange.com/questions/21891/what-research-methods-can-i-use-to-create-personas

• Personas http://wiki.fluidproject.org/display/fluid/Persona+Categories

• Mike Cohn. http://www.mountaingoatsoftware.com/articles?tag=user%20stories

• Stellman & Green. Building better software. http://www.stellman-greene.com/2009/05/03/requirements-101-user-stories-vs-use-cases/

Page 52: IxD Works Miniworkshop: Introduction

Images

• Men on a bench https://www.flickr.com/photos/scottrsmith/6194527237/sizes/l

• Woman at ATM https://www.flickr.com/photos/betsssssy/435300495/sizes/l

• User Case Map http://www.batimes.com/articles/user-stories-and-use-cases-dont-use-both.html

• Her-movie http://www.jcpe.tv/wp-content/uploads/2014/01/her_xlg.jpg

• Woman screaming http://www.pcrescuewirral.co.uk/uploads/images/mad-pc-user.jpg

• Girl using phone http://timebusinessblog.files.wordpress.com/2012/09/145670133.jpg?w=360&h=240&crop=1

• Obama girls http://media4.onsugar.com/files/2013/05/22/859/n/1922398/1a491e72c356ad1a_159848172.xxxlarge_2x/i/Malia-Sasha-Obama-got-silly-selfie-while-sitting.jpg

• Soccer practice http://whstherebellion.com/wp-content/uploads/2009/09/652346968_afbhm-l.jpg

• Woman on the bench: http://2.bp.blogspot.com/-dyncCTqpICs/T_XBEzgGf_I/AAAAAAAAEg8/MjOgjFJwT2Y/s1600/Blog+July+11th+2012+ABC+Zoom+in.JPG

• Statue http://cbsnews1.cbsistatic.com/hub/i/r/2012/01/20/0b64e26d-a644-11e2-a3f0-029118418759/thumbnail/620x350/5e3ed089979959e4be8a197144e564db/Corporate_Failure.jpg