lecture 7 physical design
DESCRIPTION
Prototypes Low-fidelity prototypes http:// www.interaction-design.org/encyclopedia/contextual_design.html Heim, Chapter 5.3. Lecture 7 Physical Design. Learning objectives. To appreciate the value of prototyping (especially paper prototyping) to the design process - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/1.jpg)
PrototypesLow-fidelity prototypes
http://www.interaction-design.org/encyclopedia/contextual_design.html Heim, Chapter 5.3
Lecture 9Physical Design
![Page 2: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/2.jpg)
Learning objectives
• To appreciate the value of prototyping (especially paper prototyping) to the design process
• To be aware of the different types and options in prototyping and be able to choose the most appropriate ones for specific design problems
• To be able to develop useful prototypes for eliciting user feedback
1-2
![Page 3: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/3.jpg)
Physical Design
• The physical design involves:• What it will look like• What components it will require• How the screens will be laid out
• We use the following tools during this phase:• Low-fidelity prototypes• Evaluations• Wireframes• Functional prototypes
1-3
![Page 4: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/4.jpg)
Physical Design - Low-fidelity prototypes
• Nielsen distinguishes between two types of prototypes • Horizontal
• Full breadth of functions in the design, but probably at the cost of detail• Vertical
• Drill down on one area of the design• This is key if one area is particularly novel and is critical to the success of
the design
1-4
![Page 5: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/5.jpg)
Physical Design - Low-fidelity prototypes
• The three main criteria for low-fidelity prototypes:• Easy and inexpensive to make.• Flexible enough to be constantly changed and rearranged.• Complete enough to yield useful feedback about specific
design questions.
1-5
![Page 6: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/6.jpg)
Physical Design - Low-fidelity prototypes
People are more comfortable criticizing paper prototypes
• You will have to make some decisions before you begin:• What feedback do you need at this point in the design process?• How much of the design should you prototype?• Should you cover all of the areas but without great detail (breadth vs.
depth)?• Should you cover one area in great detail?
• These questions will help you to define the scope of the prototype and focus on what you want to accomplish
1-6
![Page 7: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/7.jpg)
How to make a low-fi prototype
• Pen, paper, coloured pencils, scissors, cellotape …..• Just like primary school • Phone interface for airline booking
7
![Page 8: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/8.jpg)
8
![Page 9: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/9.jpg)
Post-its in paper prototypes
• As if they were invented for the task!• Can layer them to show pop-ups or other dialogue progression• Can stick them on top
to revise a screen• Cut into strips for
pulldown menus
1-9
![Page 10: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/10.jpg)
Make a device
• Use the cornflakes box, a hunk of polystyrene ……• Paint/ draw on the controls• Stick on junk• Use buttons to represent dials
10
Nancy Frishberg, Prototyping with
junk, Interactions,2006, V13:1 pp
21 – 23, ACM
![Page 11: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/11.jpg)
Half-time entertainment
• Wizard of Oz/Cognitive walkthrough with paper prototype
• https://www.youtube.com/watch?v=GrV2SZuRPv0
1-11
![Page 12: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/12.jpg)
Using the lo-fi prototype
• Ideal to have one person act as ‘the computer’ and operate the prototype in response to user actions
• Another person can focus on interacting with the user/subject and taking notes(or a 3rd person for notes ifavailable)
• Can modify the prototypeon-the-fly in response touser feedback
• Particular advantage ofpaper here!
1-12
![Page 13: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/13.jpg)
Physical Design - Low-fidelity prototypes
• Advantages of paper prototypes:• They can be used early and often.• They are inexpensive and easy to create.• They make design ideas visual.• No special knowledge is required; all team members can
create them.
• Disadvantage of paper prototypes:• They are not interactive.• They cannot be used to calculate response timings.• They do not deal with interface issues such as color or font
size.1-13
![Page 14: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/14.jpg)
What happens as you ‘tidy’ a prototype?
Yeung, L., B. Plimmer, B. Lobb, and D. Elliffe, Effect of Fidelity in
Diagram Presentation in HCI 2008, D. England, Editor. 2008, BCS:
Liverpool. p. 35-45.
http://www.bcs.org/upload/pdf/ewic_hc08_v1_paper4.pdf
![Page 15: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/15.jpg)
Electronic prototypes• If you still want it quick and easy but want more
interactivity than paper• And/or you’re still not convinced to use paper• Or you have to email the prototype to the user and do the
session remotely by Skype!• PowerPoint is good
• Slideshow is a reasonable metaphor for sequence of screens• Can insert action buttons or hyperlinks to traverse between
slides in non-linear fashion to simulate an application• Moving in the direction of a ‘functional prototype’
• Can get fine control of graphics and layout
1-15
![Page 16: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/16.jpg)
Computer-based ‘paper prototyping’• Balsamiq.com
• I used for a fairly large commercial project
• Not really a fan • Much slower than paper• Too higher fidelity to be a sketch,
but not real --- ‘no mans land’.
1-16
![Page 17: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/17.jpg)
Prototypes and data• You need to put
realistic data elements on your prototype screens
• Distracting to users if the data don’t make sense with respect to important aspects of the application
1-17
![Page 18: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/18.jpg)
What happened with various levels of tidying? • Number of changes • Enjoyment
0
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
Low formality(paper)
Low formality Medium-lowformality
Medium-highformality
High formality
Levels of formality
Tota
l cha
nges
Mean total change
3.37(sd = 1.35)
4.2(sd= 1.35)
3.17(sd = 1.15)
2.53(sd = 0.90)
1.7(sd = 1.02)
0
0.5
1
1.5
2
2.5
3
3.5
4
4.5
High formality Medium-highformality
Medium-lowformality
Low formality Low formality(paper)
Levels of formality
Mea
n ra
nk
![Page 19: Lecture 7 Physical Design](https://reader036.vdocuments.site/reader036/viewer/2022081503/56816643550346895dd9b555/html5/thumbnails/19.jpg)
Summary
• Low-fidelity prototypes are a powerful tool for physical design• Users are inclined to criticize informal (esp. paper) prototypes more
than formal prototypes• I.e. you learn the most when showing users paper prototypes!
1-19