Page 1
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
Page 2
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
User-Centered Designaccording to Dix et al. and Benyon (2010)
2SlideBased on Material by A. Butz & A. Krüger
Design (according to Dix et al., 2004) = Achieve goals under consideration of constraints
a b
envision understandevaluate
design
Problem Solution
Alternatives
time
Page 3
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
User-Centered Designaccording to Don Norman
3SlideBased on Material by A. Butz & A. Krügera b
envision understandevaluate
design
Problem Solution
Alternatives
time
Page 4
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
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
Page 5
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
5SlideBased on Material by A. Butz & A. Krüger
Page 6
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
Understanding
6SlideBased on Material by A. Butz & A. Krügerhttp://conceptdevelopmentlmu.wordpress.com
Page 7
H. Hussmann (LMU): Learning in Computer Science, Chapter 3 7SlideBased on Material by A. Butz & A. Krüger
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
Page 8
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
Conceptual Design
8SlideBased on Material by A. Butz & A. Krügerhttp://vimeo.com/39162548
Page 9
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
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?
9SlideBased on Material by A. Butz & A. Krüger
Page 10
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
Concrete or Physical Design
10SlideBased on Material by A. Butz & A. Krügerhttp://conceptdevelopmentlmu.wordpress.com
Page 11
H. Hussmann (LMU): Learning in Computer Science, Chapter 3 11SlideBased on Material by A. Butz & A. Krüger
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
Page 12
H. Hussmann (LMU): Learning in Computer Science, Chapter 3 12SlideBased on Material by A. Butz & A. Krügerhttp://vimeo.com/39464389
Page 13
H. Hussmann (LMU): Learning in Computer Science, Chapter 3 13SlideBased on Material by A. Butz & A. Krüger
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
Page 14
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
Evaluation
14SlideBased on Material by A. Butz & A. Krüger
http://01.edu-cdn.com/files/static/wiley/9780471419204/CONTROLLED_EXPERIMENTS_01.GIF
www.xperienceconsulting.com
Page 15
H. Hussmann (LMU): Learning in Computer Science, Chapter 3 15SlideBased on Material by A. Butz & A. Krüger
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
Page 16
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
Iterative Design
16SlideBased on Material by A. Butz & A. Krüger
(re)Design
ImplementationEvaluation
Question: Can anybody explain what thebuzzword "agile" actually means?
Page 17
H. Hussmann (LMU): Learning in Computer Science, Chapter 3 17SlideBased on Material by A. Butz & A. Krüger
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
Page 18
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
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…
18SlideBased on Material by A. Butz & A. Krüger
http://fergusonvalues.com/wp-content/uploads/2012/03/From-Idea-to-Implementation2-300x262.jpg
Page 19
H. Hussmann (LMU): Learning in Computer Science, Chapter 3 19SlideBased on Material by A. Butz & A. Krüger
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
Page 20
H. Hussmann (LMU): Learning in Computer Science, Chapter 3 20SlideBased on Material by A. Butz & A. Krüger
Page 21
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
Proof Sketch in Mathematics
21SlideBased on Material by A. Butz & A. Krüger
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
Page 22
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
Sketch in Patent Application
22SlideBased on Material by A. Butz & A. Krüger
United States Patent Application 20100081477
Motorola, Inc.
PORTABLE DEVICE DISPLAY PRESENTING TWO AND THREE DIMENSIONAL IMAGES
Page 23
H. Hussmann (LMU): Learning in Computer Science, Chapter 3 23SlideBased on Material by A. Butz & A. Krüger
Page 24
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
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
24SlideBased on Material by A. Butz & A. Krüger
Page 25
H. Hussmann (LMU): Learning in Computer Science, Chapter 3 25SlideBased on Material by A. Butz & A. Krüger
• User Centered Design (UCD) – Understanding – Design – Envisionment – Evaluation – Iterative Design – Implementation
• Sketches • Prototypes
– Resolution, Fidelity, Scope – Wizard of Oz Prototypes – Paper Prototypes – Video Prototypes
Chapter 3 - User Centered Design & Prototypes
Page 26
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
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)
26SlideBased on Material by A. Butz & A. Krüger
Page 27
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
Horizontal Prototypes
27SlideBased on Material by A. Butz & A. Krüger
home page
subpage 3subpage 2 subpage 4
detail 3detail 2 detail 4
function 3function 2 function 4
page 3page 2page 1 page 4 page 5
… …
…
…
…
…
Page 28
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
Vertikal Prototypes
28SlideBased on Material by A. Butz & A. Krüger
home page
subpage 3subpage 2 subpage 4
detail 3detail 2 detail 4
function 3function 2 function 4
page 3page 2page 1 page 4 page 5
… …
…
…
…
…
Page 29
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
Wizard of Oz Prototypes
29SlideBased on Material by A. Butz & A. Krüger
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
Page 30
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
Wizard of Oz Prototype Example
30SlideBased on Material by A. Butz & A. Krüger
Östergren/Juhlin, Stockholm University: Soundpryer, 2002-2008 http://mobility.dsv.su.se/projects/soundpryer/
Page 31
H. Hussmann (LMU): Learning in Computer Science, Chapter 3 31SlideBased on Material by A. Butz & A. Krüger
• User Centered Design (UCD) – Understanding – Design – Envisionment – Evaluation – Iterative Design – Implementation
• Sketches • Prototypes
– Resolution, Fidelity, Scope – Wizard of Oz Prototypes – Paper Prototypes – Video Prototypes
Chapter 3 - User Centered Design & Prototypes
Page 32
H. Hussmann (LMU): Learning in Computer Science, Chapter 3 32SlideBased on Material by A. Butz & A. Krüger
https://www.youtube.com/watch?v=9wQkLthhHKA
Page 33
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
Paper Prototype of an Email Application
33SlideBased on Material by A. Butz & A. Krüger
www.youtube.com/watch?v=GrV2SZuRPv0
Page 34
H. Hussmann (LMU): Learning in Computer Science, Chapter 3 34SlideBased on Material by A. Butz & A. Krüger
Page 35
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
POP App (Prototyping on Paper)
35SlideBased on Material by A. Butz & A. Krüger
https://popapp.in
Page 36
H. Hussmann (LMU): Learning in Computer Science, Chapter 3
Rapid Prototyping & Wireframing Tools• Software to create interface prototypes (“mockups”) • Many systems available, examples: Axure, Balsamiq
36SlideBased on Material by A. Butz & A. Krüger
www.axure.com
Page 37
H. Hussmann (LMU): Learning in Computer Science, Chapter 3 37SlideBased on Material by A. Butz & A. Krüger
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
Page 38
H. Hussmann (LMU): Learning in Computer Science, Chapter 3 38SlideBased on Material by A. Butz & A. Krüger
http://www.asktog.com/starfire/
Sun Microsystems: "Starfire" 1992 ->>> 2004