Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely...

75
Interaction Design Chapter 7 May 28th, 2014, 9am-12pm): Prototyping UX - From Sketch to Prototype

Transcript of Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely...

Page 1: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Interaction Design

Chapter 7 May 28th, 2014, 9am-12pm): Prototyping UX - From Sketch to Prototype

Page 2: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

LMU München – Medieninformatik – Alexander Wiethoff + Andreas Butz – Interaction Design – SS2014 2

Recap Day 6:

Page 3: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

3LMU München – Medieninformatik – Alexander Wiethoff + Andreas Butz – Interaction Design – SS2014source: [8]

Page 4: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

ANALYSIS Definition of the system What is the problem?

EVALUATION Possible alternatives What future do we want?

SYNTHESIS Design of final solutions What do we implement?

brief

solution

The designer is an ‘executor’

The designer is a ‘story-teller’

The designer is a ‘problem-scouter’

Jonas, Generative tools, 2001

4LMU München – Medieninformatik – Alexander Wiethoff + Andreas Butz – Interaction Design – SS2014source: [4]

Page 5: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

infrequent users

expert users

frequent users

5LMU München – Medieninformatik – Alexander Wiethoff + Andreas Butz – Interaction Design – SS2014

novice users

Page 6: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

6LMU München – Medieninformatik – Alexander Wiethoff + Andreas Butz – Interaction Design – SS2014

BMW Racing Cockpitimage source © BMW

Page 7: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Different user types and usage frequency will require dedicated solutions.

7LMU München – Medieninformatik – Alexander Wiethoff + Andreas Butz – Interaction Design – SS2014

Page 8: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Summary

• Three main data gathering methods: interviews, questionnaires, observation • Four key issues of data gathering: goals, triangulation, participant relationship,

pilot • Interviews may be structured, semi-structured or unstructured • Observation may be direct or indirect, in the field or in controlled setting • Techniques can be combined depending on study focus, participants, nature of

technique and available resources

8LMU München – Medieninformatik – Alexander Wiethoff + Andreas Butz – Interaction Design – SS2014

CCtsource: [8]

Page 9: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

• Keep your questionnaire short. In fact, the shorter the better. !

• Use simple and direct language. The questions must be clearly understood by the respondent. !• Begin with a few non-threatening and interesting items. !• Place the most important items in the first half of the questionnaire !

• Leave adequate space for respondents to make comments. !

• Perform iterative pre-tests and eliminate or replace questions that are hard to understand or lead to useless / unsatisfying results. !

• Accommodate all answers !Note the difference between interviews and questionnaires!

9LMU München – Medieninformatik – Alexander Wiethoff + Andreas Butz – Interaction Design – SS2014

Summary Creating a Good Questionnaire:

source: [10]

Page 10: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Overview: !

• Intro & Designprocess Phase !

• Values and Levels of Prototyping !• UX Prototyping Techniques

!• Prototyping Case Study !

Page 11: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

User-experience design

Industrial design

Human-computer interaction

Human factors

Usability engineering

User Interface engineering

Communication design

Information architecture

Interaction design

source: [11]

Page 12: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

User Experience Design

Business Design

Technology

UX

©Peter Morvillehttp://semanticstudios.com

Page 13: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

User Experience Design

http://semanticstudios.com©Peter Morville

Page 14: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Getting the right Design and the Design right…

!Bill Buxton - Sketching User Experiences

source: [1]

Page 15: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

User Study Design

• The Purpose of User Studies

• Research Aims: Reliability, Validity and Generalizability

• Research Methods and Experimental Designs

• Ethical Considerations

• HCI-related and practical information for your own studies

• Interpretation of Data and Presentation of Results

http://www.markabull.com/wp-content/uploads/2011/01/stage.jpg

Front Stage

Page 16: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

http://blog.entrepreneurthearts.com/etablog/wp-content/uploads/2010/08/backstage.jpg

Back Stage

Page 17: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

User Interface

Transferring

Coordinating

Storing

Page 18: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Double Diamond

source: [8]

Page 19: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Double Diamond

Why? and How?source: [8]

Page 20: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Double Diamond

What?source: [8]

Page 21: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

We focus on

source: [8]

Page 22: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Overview

Research Innovate Prototype

© A study of the design process - Design Council London source: [8]

Page 23: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Research Innovate Prototype

Tell a story

Make it tangible

Overview

Page 24: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Overview: !

• Intro & Designprocess Phase !

• Values and Levels of Prototyping !• UX Prototyping Techniques !• Prototyping Case Study !

Page 25: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

!For the Designer: !

Exploration Visualisation Feasibly Inspiration Collaboration

For the End User: Effectiveness / Usefulness A change of viewpoint Usability Desirability

For the Producer: Conviction Specification Benchmarking

source: [5]

Page 26: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

It’s really hard to design products by focus groups. A lot of times, people don’t know what they want until you

show it to them. !

Steve Jobs

Page 27: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Fidelity v. Resolution

low resolution low fidelity

high resolution high fidelity

high resolution low fidelity

source: [5]

Page 28: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

High FidelityLow Fidelity

Open Discussion

Prompting Required

Quick and Dirty

Early Validation

Sharp Opinions

Self Explanatory

Deliberate and Refined

Concrete Ideas

source: [5]

Page 29: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Less Details

Focus on core interactions

Quick and Dirty

Early Validation

More Details

Focus on the whole

Deliberate and Refined

Concrete Ideas

Low Resolution High Resolution

source: [5]

Page 30: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

1st Iteration low-res/low-fi

Page 31: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

4th Iteration high-res/high-fi

Page 32: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

80/20 rule

http://www.swissknifeshop.com/media/catalog/product/cache/1/image/5e06319eda06f020e43594a9c230972d/v/m/vm_53831--91_sol_front_ax1000.jpg source: [7]

Page 33: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

!A principle for setting priorities: users will use 20% of the features of your product 80% of the time. Focus the majority of your design and development effort (80%) on the most important 20% of the product.

source: [7]

Page 34: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Overview: !

• Intro & Designprocess Phase !

• Values and Levels of Prototyping !• UX Prototyping Techniques !• Prototyping Case Study !

Page 35: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Paper-prototyping

Page 36: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to create products/screen based applications that meets the user's expectations and needs. !It is throwaway prototyping and involves creating rough, even hand sketched, drawings of an interface to use as prototypes, or models, of a design.

What is it?

Page 37: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Paper prototyping started in the mid 1980s and then became popular in the mid 1990s when companies such as IBM, Honeywell, Microsoft, and others started using the technique in developing their products.

History

Page 38: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Paper prototype of a typical form-filling screen Paper prototype of a tabs-based design

Typical set-up of the usability laboratory for a test session with a paper prototype

User test of a low-fidelity paper prototype of a website

photo credits © NN Group

Page 39: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

User test of a high-fidelity paper prototype of a homepage.User test of a device-based interaction

Testing hardware user interfaces: mockup of a kiosk.

photo credits © NN Group

Page 40: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

http://www.balsamiq.com/products/mockups

Page 41: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Source: YouTube

Page 42: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Video-prototypingImage Source: CIIDhttp://2.bp.blogspot.com/-CBtuuif7rZ4/U0MBJkCUfgI/AAAAAAAAEi4/fYp1bJOcdVY/s1600/Canon+XF205+left+side+view.jpg

Page 43: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

www.ciid.dk 11.04.2008Intro

Acting out the Scenario

Page 44: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

www.ciid.dk 11.04.2008Intro

Quick Kiosk Mock-up

Page 45: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Sketching with Hardwarephoto credits © alexander wiethoff

Page 46: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

bx 24 picbasic stamp basic atom

higher level lower level

Assembly

Page 47: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

http://upload.wikimedia.org/wikipedia/commons/3/3d/RaspberryPi.jpg http://www.onlymine.de/wp-content/uploads/arduino-nano-board-z.jpg

Atmel AT Mega 328 Raspberry PI

Page 48: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Thermistor PIR SensorBend Sensor

photo credits © wikimedia

Page 49: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Magnet SwitchForce Sensor Potentiometer

photo credits © wikimedia

Page 50: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Touch QT Sensor

photo credits © wikimedia

Ultrasound SensorDistance IR Sensor

Page 51: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

photo credits © alexander wiethoff

Page 52: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

photo credits © alexander wiethoff

Page 53: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Quick video overviewphoto credits © alexander wiethoff

Page 54: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

video© alexander wiethoff

Page 55: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Overview: !

• Intro & Designprocess Phase !

• Values and Levels of Prototyping !• UX Prototyping Techniques !• Prototyping Case Study !

Page 56: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Some Examples from a school

called Copenhagen Institute of Interaction

Design (CIID)

Page 57: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

Some Examples from a school

called Copenhagen Institute of Interaction

Design (CIID)

Page 58: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

2 Weeks 2 Weeks

Phase 1 User Research

Field Research

Phase 2 Analysis and Concept Generation

Phase 4 Usability Testing

Phase 5 Implementation

Desk Research

Phase 3 Prototyping

Concepts

Prototyping

LO Fidelity HI Fidelity

Final Prototype

Page 59: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASESIDII 59

Page 60: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASESIDII 60

Page 61: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASESIDII 61

Page 62: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASESIDII 62

Page 63: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASESIDII 63

Page 64: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASESIDII 64

Page 65: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASESIDII 65

Page 66: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASESIDII 66

Page 67: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASESIDII 67

Page 68: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASESIDII 68

Page 69: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASES 69

Page 70: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASES 70

Page 71: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASES 71

Page 72: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASES 72

Page 73: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASES 73

Page 74: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

CASES 74

Thanks for your attention !

Page 75: Interaction Design - LMU Medieninformatik 7 Prototyping UX.pdf · Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to

References (books) !Bill moggridge: designing interactions Publisher: The MIT Press; 1 edition (October 1, 2007) ISBN-10: 0262134748 Bill buxton: sketching the user experience Publisher: Morgan Kaufmann (March 30, 2007) ISBN-10: 0123740371 Don norman: the design of everyday things Publisher: Basic Books (September 17, 2002) ISBN-10: 0465067107 Kevin mullet: designing visual interfaces

Publisher: Prentice Hall PTR (December 15, 1994) ISBN-10: 0133033899 !!!!!!links: www.ciid.dk www.arduino.cc http://www.useit.com/papers/guerrilla_hci.html !