Chapter 3 - User Centered Design & Prototypes · Chapter 3 - User Centered Design & Prototypes •...

H. Hussmann (LMU): Learning in Computer Science, Chapter 3

Chapter 3 - User Centered Design & Prototypes• User Centered Design (UCD)

– Understanding – Design – Envisionment – Evaluation – Iterative Design – Implementation

• Sketches • Prototypes

– Resolution, Fidelity, Scope – Wizard of Oz Prototypes – Paper Prototypes – Video Prototypes

1SlideBased on Material by A. Butz & A. Krüger

User-Centered Designaccording to Dix et al. and Benyon (2010)

Design (according to Dix et al., 2004) = Achieve goals under consideration of constraints

envision understandevaluate

design

Problem Solution

Alternatives

User-Centered Designaccording to Don Norman

3SlideBased on Material by A. Butz & A. Krügera b

envision understandevaluate

design

Problem Solution

Alternatives

Group Exercise!• Form groups of 3-5 persons!

– Within each group, try to fulfill the following two tasks:

• Task 1: – Name as many concrete experiences in private or professional life,

where you have already used an approach similar to the double-diamond idea – or where you think in afterthought it would have been applicable

– Result: List of situations in keywords, as many as possible

• Task 2: – Which tools and techniques do you know to support the steps of

• envisioning • understanding • designing • evaluating?

– Result: List of keywords4SlideBased on Material by A. Butz & A. Krüger

Understanding

6SlideBased on Material by A. Butz & A. Krügerhttp://conceptdevelopmentlmu.wordpress.com

H. Hussmann (LMU): Learning in Computer Science, Chapter 3 7SlideBased on Material by A. Butz & A. Krüger

Conceptual Design

8SlideBased on Material by A. Butz & A. Krügerhttp://vimeo.com/39162548

Questions• What do you think was the meaning of the colors of the

sticky notes? • How much time should be spent on such conceptual design

activities? • How can we assess the quality of the result of

conceptual design?

Concrete or Physical Design

10SlideBased on Material by A. Butz & A. Krügerhttp://conceptdevelopmentlmu.wordpress.com

H. Hussmann (LMU): Learning in Computer Science, Chapter 3 12SlideBased on Material by A. Butz & A. Krügerhttp://vimeo.com/39464389

Evaluation

http://01.edu-cdn.com/files/static/wiley/9780471419204/CONTROLLED_EXPERIMENTS_01.GIF

www.xperienceconsulting.com

Iterative Design

(re)Design

ImplementationEvaluation

Question: Can anybody explain what thebuzzword "agile" actually means?

Implementation• During the process only prototypes have been developed • Source code of prototypes usually is not re-usable

– this is intentional! See chapter on prototyping…

• Final implementation brings on new challenges – Scalability – Platform diversity – Error tolerance – Commercialization – …others? discussion…

http://fergusonvalues.com/wp-content/uploads/2012/03/From-Idea-to-Implementation2-300x262.jpg

Proof Sketch in Mathematics

Leslie Lamport: How to Write a Proof, Digital Equipment Corporation 1993

http://research.microsoft.com/en-us/um/people/lamport/pubs/lamport-how-to-write.pdf

Sketch in Patent Application

United States Patent Application 20100081477

Motorola, Inc.

PORTABLE DEVICE DISPLAY PRESENTING TWO AND THREE DIMENSIONAL IMAGES

Properties of Sketches• Quick • Timely • Inexpensive • Disposable • Plentiful • Clear vocabulary • Distinct gesture • Minimal detail • Appropriate degree of refinement • Suggest and explore rather than confirm • Ambiguity

• User Centered Design (UCD) – Understanding – Design – Envisionment – Evaluation – Iterative Design – Implementation

Chapter 3 - User Centered Design & Prototypes

Resolution and Fidelity• Houde, Stephanie und Charles Hill: What Do Prototypes Prototype? In: Helander, M., T. Landauer und P. Prabhu

(Eds): Handbook of Human- Computer Interaction. Elsevier Science B.V., Amsterdam, 2. Auflage, 1997.

• Resolution = Volume of representation of final system in prototype (e.g. only one screen vs. complete system)

• Fidelity = Similarity of details in prototype implementation to final system (e.g. drawing sketch vs. photorealistic rendering)

Horizontal Prototypes

home page

subpage 3subpage 2 subpage 4

detail 3detail 2 detail 4

function 3function 2 function 4

page 2page 1 page 4 page 5

… …

Vertikal Prototypes

home page

subpage 3subpage 2 subpage 4

detail 3detail 2 detail 4

function 3function 2 function 4

page 2page 1 page 4 page 5

… …

Wizard of Oz Prototypes

http://dailycapitalist.com/wp-content/uploads/2012/07/Wizard-of-Oz.jpg

http://2.bp.blogspot.com/_QJDOQQGmSDU/TKwCEkgJscI/AAAAAAAADxY/LlNhk8BF4pQ/s1600/wizard_of_oz_1092_wizard.jpg

Wizard of Oz Prototype Example

Östergren/Juhlin, Stockholm University: Soundpryer, 2002-2008 http://mobility.dsv.su.se/projects/soundpryer/

• User Centered Design (UCD) – Understanding – Design – Envisionment – Evaluation – Iterative Design – Implementation

Chapter 3 - User Centered Design & Prototypes

https://www.youtube.com/watch?v=9wQkLthhHKA

Paper Prototype of an Email Application

www.youtube.com/watch?v=GrV2SZuRPv0

POP App (Prototyping on Paper)

https://popapp.in

Rapid Prototyping & Wireframing Tools• Software to create interface prototypes (“mockups”) • Many systems available, examples: Axure, Balsamiq

www.axure.com

http://www.asktog.com/starfire/

Sun Microsystems: "Starfire" 1992 ->>> 2004

Chapter 3 - User Centered Design & Prototypes · Chapter 3 - User Centered Design & Prototypes •...

Documents

Transcript of Chapter 3 - User Centered Design & Prototypes · Chapter 3 - User Centered Design & Prototypes •...

Conversion centered design

Using evidence-centered design to support assessment ... · Using Evidence-Centered Design to Support Assessment, Design, ... Centered Design to Support Assessment, Design, ... an

USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Customer Centered Product Development – MVPs, Functional Prototypes and Agile Development

Infill Design Toolkit: Prototypes

CLASSIFYING PHYSICAL MODELS AND PROTOTYPES IN THE DESIGN … · of the design process. KEYWORDS: models, model making, prototyping, prototypes, design process 1. INTRODUCTION designers

Design and Engineering Module-5: Product Centered Design and User Centered Design

User Centered Design And Prototypingpages.cpsc.ucalgary.ca/.../notes/acrobat/userCenteredDesignPrototy… · User-Centered Design and prototyping 3 James Tam Low Fidelity Prototypes

User-Centered Design and Human-Centered … MBA.pdf1 USER-CENTERED DESIGN AND DESIGN-CENTERED BUSINESS SCHOOLS David Dunne Joseph L. Rotman School of Managament University of Toronto

Prototypes Low-fidelity prototypes design.org/encyclopedia/contextual_design.html Heim, Chapter 5.3 Lecture 9 Physical Design.

Task-Centered User Interface Design who are the users? what are the tasks? plagiarize! iterative design –rough descriptions, mock-ups, prototypes test.

Rosedale design prototypes - research

Activity centered design

Design, Ideation, and Prototyping · Design, Ideation, and Prototyping Why User Centered Design is important How Prototyping helps User Centered Design System Centered Design . System

Security-Centered Design

Experience centered design

Sample work wireframes, prototypes and design documentsmalakumar.com/.../12/MalaKumar_SampleWireframes-1.pdf · Sample work wireframes, prototypes and design documents Welcome to

Constructing Insanity: Jurors’ Prototypes, Attitudes, and ...risk-resilience.berkeley.edu/sites/default/files/...Nevertheless, jurors with Mental State Centered prototypes were more

User Centered Design

User-centered design through learner-centered instruction