Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise...
-
Upload
harriet-hunt -
Category
Documents
-
view
216 -
download
0
Transcript of Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise...
![Page 1: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/1.jpg)
Exploring the Effects of Different Levels of FormExploring the Effects of Different Levels of Formality (Beautification) on the Design Processality (Beautification) on the Design Process
Exploring the Effects of Different Levels of FormExploring the Effects of Different Levels of Formality (Beautification) on the Design Processality (Beautification) on the Design Process
Louise Yeung (MSc student - Psychology)Louise Yeung (MSc student - Psychology)Supervisors: Dr Brenda Lobb, Supervisors: Dr Brenda Lobb,
Dr Beryl Plimmer, Dr Beryl Plimmer, Dr Douglas Elliffe Dr Douglas Elliffe
![Page 2: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/2.jpg)
Overview:
• Background • Purpose of study• Experimental Design• Results• Future research areas • Questions..
![Page 3: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/3.jpg)
Design research
Design Activities– Sketching is important in design
(Goel, 1990; Goldschmidt, 1991) especially in early stages in design process (Do, 2005; Lim, et al., 2004)
– Transfer from paper prototypes (Sketches) to the computer
BUT…
![Page 4: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/4.jpg)
During Transfer...
• Clumsy• Error-Prone• Unproductive• Inefficient….
![Page 5: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/5.jpg)
Informal Sketch-based tools
• Increasing research and development – e.g. PDA, digital whiteboards…
Inkit (on-going project since 2002)
• Increase of demand and usage by designers (Pomm & Werlen, 2004)
• Many advantages of sketch-base (informal) design tools:
• “Getting the best of two worlds” • “Bridges the gap”
![Page 6: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/6.jpg)
“Beautification”
• Challenge = the need to “beautify” sketched content (Plimmer & Apperley,
2003; Plimmer & Grundy, 2005)
• Beautification = process of tidying a hand-drawn diagram (Sketch) into a more ‘formal looking’ diagram
![Page 7: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/7.jpg)
Interaction difference…
hand-drawn (informal) VS computer-rendered (formal)
• Research: more functional changes and comments if working with a hand-drawn diagram rather than a formal (computerized) diagram
(Bailey and Konstan, 2003; Black, 1990; Goel, 1995; Plimmer and Apperley, 2002)
• What happens in between when a diagram is more or less formal?
• design decisions, cognition, perception?
![Page 8: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/8.jpg)
Purpose of my study
1) To explore the different types and levels of beautification (formality)
2) To evaluate the effects of levels of beautification (formality) on how people interact with the design
Research question: Does the level of formality of a prototype design affect the number (and quality) of changes designers make during iterative design?
![Page 9: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/9.jpg)
Method• Participants: 14 female, 16 male • Experiment design: within-subject design• IV: Levels of formality - 5 Levels (5 conditions)
• Latin Square design to counterbalance• S1S1 1 2 3 4 51 2 3 4 5• S2S2 2 3 4 5 1 2 3 4 5 1 • S3S3 3 4 5 1 2 3 4 5 1 2 • S4S4 4 5 1 2 3 4 5 1 2 3 • S5S5 5 1 2 3 4…etc5 1 2 3 4…etc
• S1 5 4 3 2 1S1 5 4 3 2 1• S2 4 3 2 1 5 S2 4 3 2 1 5 • S3 3 2 1 5 4S3 3 2 1 5 4• S4 2 1 5 4 3S4 2 1 5 4 3• S5 1 5 4 3 2…etcS5 1 5 4 3 2…etc
Conditions Formality level Medium
1 Low formality (totally hand-drawn) Paper (and pen)
2 Low formality (totally hand-drawn Tablet PC
3 Medium low Tablet PC
4 Medium high Tablet PC
5 High formality ([totally] computer-rendered) Tablet PC
![Page 10: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/10.jpg)
5 conditions – 5 designs
• Given 5 equivalent designs of web (HTML) forms in terms of:– 1) the purpose of the forms – requiring users to
fill in personal information– 2) order of elements in the design– 3) the balance of types of element– 4) the number of elements in each design (i.e.
total of 58).– 5) each design had 23 ‘mistakes’ (according to
design guidelines) for participants to ‘correct’
![Page 11: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/11.jpg)
Method
• Taxonomy of beautification
Hand drawn form ------------continuum ----------- Computer-generated form
VARIABLES
Smoothness (objects, lines or characters) rough
Smoothed, formal
Size Variable Exact, standardised
Alignment, verticalInexact Exact,
standardised
Alignment, horizontalInexact Exact,
standardisedSpacing, vertical (between objects) irregular
Exact, standardised
Spacing, horizontal irregular
Exact, standardised
![Page 12: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/12.jpg)
(A)
(B)
(C)
Horizontal AlignmentHorizontal Alignment
Vertical AlignmentVertical Alignment
(A) (B)
Snap to gridSnap to grid
![Page 13: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/13.jpg)
(A) (B)
(C) (D)
Shape standardizationShape standardization
![Page 14: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/14.jpg)
Fully Hand-DrawnFully Hand-Drawn 33.33% smoothed33.33% smoothed
66.66% smoothed66.66% smoothed Fully smoothed (Straight Lines)Fully smoothed (Straight Lines)
![Page 15: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/15.jpg)
Low formality Medium-low formality
![Page 16: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/16.jpg)
Medium-high formality
High formality
![Page 17: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/17.jpg)
• Dependent variable: Number of changes made (Total functional changes & Quality functional
changes & expected functional changes)
• Preliminary results:– One-way repeated measures ANOVA– Significant Main effect (formality)– Significant Linear trend– Pair-wise comparisons showed some interesting
differences:
VS
VS
– Group differences: Design experience
LOW formality (Tablet PC)
LOW formality (Paper & pen)
LOW formality (Tablet PC)
HIGH formality (Tablet PC)
![Page 18: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/18.jpg)
Mean Expected functional changes made across levels of Mean Expected functional changes made across levels of formalityformality
0
2
4
6
8
10
12
14
16
18
20
22
Low formality(paper)
Low formality Medium-lowformality
Medium-highformality
High formality
Levels of formality
Me
an
Ex
pe
cte
d C
ha
ng
es
![Page 19: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/19.jpg)
Mean Expected functional changes across Levels of Formality Mean Expected functional changes across Levels of Formality according to design experience: none/non-CS/SE & CS/SEaccording to design experience: none/non-CS/SE & CS/SE
0
2
4
6
8
10
12
14
16
Lowformality(paper)
Lowformality
Medium-lowformality
Medium-highformality
Highformality
Levels of formality
Me
an
exp
ect
ed
ch
an
ge
s
None to some (non-CS/SE)design experience
CS/SE design experience
![Page 20: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/20.jpg)
Future research
• Exploring more dimensions and levels of formality (i.e. aspects of beautification)– E.g. color (combination?), look-and-feel..etc
• Exploring the effects of beautification at different stages in the design process– e.g. early vs refinement– design-decisions
• At different levels of beautification:– Novice vs Expert designers – Individual vs group decision making in the
design process at different stages– Evaluation of different levels of beautification
for different groups of people e.g. ?– Pen and Paper VS Tablet PC
![Page 21: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/21.jpg)
Implications
• Software development– Types of beautification at different stages
• Improvements in the design process– Increase in efficiency (motivation?) – More time for other design activities
– Practical Real world situations e.g. client presentation - photoshop is commonly used.
• However, during early stages…
Suggestions/Questions?Suggestions/Questions?
![Page 22: Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.](https://reader035.fdocuments.us/reader035/viewer/2022062517/56649f145503460f94c29abe/html5/thumbnails/22.jpg)
References
• Goldschmidt, G. (1991). The dialectics of sketching. Creativity Research Journal, 2(2), 123–143.
• Goel, V. (1995). Sketches of Thought. MIT Press: Cambridge, MA• Lim, et al. (2004). A study of sketching behaviour to support free-
form surface modelling from on-line sketching. Design Studies, 25(4), 393-413.
• Do, Y.E. (2005). Design sketches and sketch design tools. Knowledge-Based Systems, 18(8), 383-405.
• Plimmer, B. E., & Apperley, M. (2004). Interacting with Sketched Interface Designs: An evaluation study. Proceedings of SigChi, Vienna, 1337-1340.
• Plimmer, B. E., & Grundy, J. (2005). Beautifying sketching-based design tool content: issues and experiences. Proceedings of AUIC2005, Newcastle.
• Pomm, C., & Werlen, S. (2004). Smooth Morphing of Handwritten Text, Proceedings of AVI 04, Gallipoli, 328-335.