Mock-ups in design af Lars Bo Larsen, AAU
-
Upload
infinit-innovationsnetvaerket-for-it -
Category
Technology
-
view
249 -
download
2
description
Transcript of Mock-ups in design af Lars Bo Larsen, AAU
![Page 1: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/1.jpg)
Mock-ups in Design
Infinit Interessegruppemøde
CSC Scandihealth 20/1 2011Lars Bo Larsen
![Page 2: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/2.jpg)
Outline
Different kinds of prototyping
low fidelity (aka mock-ups / paper prototypes)
high fidelity
A few examples
Can results on Mock-ups be trusted?
Litterature and references
p.2
![Page 3: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/3.jpg)
What to prototype?
Technical issues
Work flow, task design
Screen layouts and information display
Difficult, controversial, critical areas
p.3
![Page 4: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/4.jpg)
Using prototypes in conceptual design
Allow evaluation of emerging ideas
Low-fidelity prototypes used early on, high-fidelity
prototypes used later
Prototypes are used for testing, but are also
excellent for communicating ideas!
p.4
![Page 5: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/5.jpg)
Simulating wall-screen interaction
A Lo-Fi prototype for air-traffic controllers
p.5
![Page 6: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/6.jpg)
The Washing Machine
Redesign of controls
to focus on the clothes
to be washed rather
than programming the
settings of the
washing machine
p.6(thanks to grp. ST855a + ST857c 2008)
![Page 7: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/7.jpg)
The Washing Machine
Redesign of controls
to focus on the clothes
to be washed rather
than programming the
settings of the
washing machine
p.7
![Page 8: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/8.jpg)
The Washing Machine
p.8
Tilbage
Duge
Håndklæder
Karklude
Sengelinned
Sokker
Træningstøj
Undertøj
Viskestykker
Badetøj
Cowboy-tøj
Bukser
Lingeri
Nylonstrømper
Sko
Overtøj
Fint tøj
Tørklæder
Nederdele
Uld
VÆLG TØJTYPER
Videre
![Page 9: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/9.jpg)
Hi-fidelity or Lo-fidelity, Paper or Computer?- Choosing attributes when testing web prototypes
Experiment and slides by:
Miriam Walker
Leila Takayama
Professor James Landay
Group for User Interface
Research
University of California Berkeley
http://dub.washington.edu:2007/projects/fidelity/pubs/Walker_HFES_2002.pdf
![Page 10: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/10.jpg)
Making early stage prototypes
10
Paper Medium
Computer
Medium
Low-fidelity
High-
fidelity
Sketched with
paper and
pens
Scanned in
paper pages
Printed
screens
Coded in
HTML
![Page 11: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/11.jpg)
Low-Fidelity Prototype
11
![Page 13: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/13.jpg)
Quantitative Analysis of Results
1270 comments and 169 issues
Low-fidelity vs High-fidelity
No significant differences in number of comments or issues
Paper vs. computer
Average of 5 more comments about computer prototype (Wilcoxon
signed ranks test, p = 0.015)
Issues – no significant differences
No differences in severity of issues found
No differences in scope of issues
Only 10% of comments mentioned aesthetics
13
![Page 14: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/14.jpg)
Usefulness of Paper Prototyping
In a survey 172
usability professionals
were asked the
question: “What is the
importance of paper
prototyping to your
work”?
p.14
Usefulness of Paper Prototyping
Useless:
0%
Marginal
15%
Useful
55%
Essential
30%
From ”Paper Prototyping” by C. Snyder
![Page 15: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/15.jpg)
Video:
Jakob Nielsen and Don Norman’s company the ”Nielsen
Norman group” (NN/g http://www.nngroup.com/) has
produced the video:
”Paper Prototyping: A How-To Video”
p.15
![Page 16: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/16.jpg)
Book:
Carolyn Snyder:
“Paper Prototyping: The Fast
and Easy Way to Design and
Refine User Interfaces"
(Interactive Technologies)
http://www.paperprototyping.com
p.16
![Page 17: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/17.jpg)
Projektsamarbejder
Infinit støtter (mindre) projektsamarbejder mellem
medlemmerne – institutioner og firmaer
Budget op til et par 100.000 kr
Kan lede til større satsninger
Udspringer af interessegrupperne
Eksempel på projektforslag:
Synkronisere smart-phone/Ipad/tablet med TV via lydsignalet
for at præsentere relevant information tidsmæssigt afstemt
med TV udsendelser. Under overvejelse – partnere indtil nu:
AAU og DR-medier, andre meget velkomne.
Diskutere ideer og interesser i grupperne
Vi skal melde forventninger ind i februar
p.17
![Page 18: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/18.jpg)
Studentersamarbejder
Forårssemestret starter første februar – ideer og forslag til
projekter – inkl. specialer er velkomne
God måde at skabe kontakt og få belyst ideer og problemstillinger
Civilingeniør Produkt og Design Psykologi (PDP)
Civilingeniør Intelligente Multimedier
Datalogi
Informatik
Praktikmuligheder for PDP-studerende til efteråret.
Efteråret 2010: To aftaler. Huge Lawn og Migatronic
Efteråret 2011:
p.18
![Page 19: Mock-ups in design af Lars Bo Larsen, AAU](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b3b1fd4a79597f5f8b4626/html5/thumbnails/19.jpg)
p.19