Graduate
Category: Engineering
Degree Level: PhD
Abstract ID# 70
Effects of Unity of Form on Visual Aesthetics of Website Design
Ahamed Altaboli and Yingzi Lin
Abstract
Method
Results and Conclusions
Analysis of Variance Results
Unity of form represents the extent to which visual objects on
A two- factor within subject design was utilized with the two
Analysis of results showed that both factors (number of objects and
the screen are related in size. High levels of unity of form can be
parameters as the main factors. Each of the two factors was tested
number of different sizes) have statistically significant effects on
achieved by using objects with similar sizes on the screen and/or
at two levels (high and low). Four different designs of a webpage
perceived visual aesthetics. Designs with lower levels of both
by reducing number of objects on the screen. Findings of earlier
were prepared to represent the four experimental conditions. All
observational studies suggested that unity of form has significant
four designs have identical styles (colors, fonts ...etc); only visual
effects on perceived visual aesthetics of website design in the
elements related to the two factors were manipulated. Symmetry in
case of highly symmetrical designs. The purpose of this study is
to verify these findings. This study was conducted to
systematically test effects of number of objects and number of
different sizes of objects on perceived visual aesthetics of
all the four designs was kept at higher levels.
User perception of visual aesthetics was measured using the
VisAWI (Visual Aesthetics of Website Inventory) questionnaire
(Moshagen and Thielsch, 2010). The instrument is based on four
Element
F
P-value
Objects
7.51
0.008
Sizes within Objects
0.38
0.682
factors were perceived as having better visual aesthetics. However,
Participants
9.96
< 0.001
these effects weren't consistent over all the four parts of the
Objects
1.38
0.24
Sizes within Objects
0.63
0.54
effect of number of objects was only significant on the simplicity
Participants
15.65
< 0.001
facet and on the overall perceived aesthetics (total questionnaire
Objects
0.66
0.42
score of all facets). Effect of number of different sizes was only
Sizes within Objects
0.26
0.77
significant on the craftsmanship facet, only at the higher level of
Participants
25.59
< 0.001
number of objects.
Objects
0.60
0.44
Sizes within Objects
3.87
0.025
questionnaire (representing the facets of visual aesthetics). The
Case
Simplicity
Diversity
Colorfulness
website design under the condition of high level of symmetry.
interrelated facets of perceived visual aesthetics of websites:
Results showed that both factors have significant effects on
simplicity, diversity, colorfulness, and craftsmanship. Responses
designs with low levels of symmetry. This step would be necessary
Participants
10.69
< 0.001
perceived visual aesthetics. Designs with less number of objects
were gathered on-line from 25 participants (Average age 41.5
to completely confirm the results.
Objects
5.01
0.028
and less number of sizes induced higher levels of perceived
years, standard deviation 16.4 years, 13 males and 12 females).
Sizes within Objects
1.66
0.196
Participants
27.35
< 0.001
visual aesthetics
The next step should be to repeat the experiment in the case of
Total
5
4.5
4.31
4.38
4.08
Introduction
4.03
3.94
4
3.95
3.88
3.94
3.85
3.71
3.7
3.5
3.37
3.78 3.74
3.57
3.48
3.3 3.28
In a previous study (Altaboli and Lin, 2011b), correlation
3
analysis was used to compare objective layout-based measures of
2.5
1
2
3
4
Simplicity
visual aesthetics with subjective questionnaire-based measures
1
2
3
Diversity
4
1
2
3
Colorfulness
4
1
2
3
Craftsmanship
4
1
2
3
Total
(a) per design
5
objects, and number of different sizes of objects were included in
Design 1
Design 2
the test. Results showed significant correlations between the three
No of objects = 6 (high)
No of objects = 6 (high)
measures and the subjective questionnaire-based measures.
4.5
4.34
4.01
4
No of different sizes = 3 (high)
3.99
3.91
No of different sizes = 5 (low)
3.81
3.59
3.5
3.33
Findings also suggested that this high correlation between unity
3.65
3.5
3.2
3
of form and perceived aesthetics only occurs at high levels of
2.5
6
16
Simplicity
symmetry. The main purpose of the current study is to further
6
16
Diversity
6
16
Colorfulness
6
16
Craftsmanship
6
Total
(b) per no of objects
verify these findings.
4.18
3.95
4
unity of form on perceived visual aesthetics of website interface
3.73
3.54
Specifically, the study aims at systematically study effects of
number of objects and number of different sizes of objects on
3.5
Design 3
Design 4
No of objects = 16 (low)
No of objects = 16 (low)
No of different sizes = 3 (high)
No of different sizes = 11 (low)
Ahamed Altaboli, PhD candidate.
Mechanical and Industrial Engineering
Department
E-mail: [email protected]
2.5
Simplicity
Diversity
Colorfulness
Craftsmanship
(c) per questionnaire scale
Screen shot of the four designs of the webpage
Authors Contact Information
3.26
3
perceived aesthetics of website design under the condition of high
symmetry.
16
4
Altaboli, A., and Lin, Y., 2011a. Investigating Effects of Screen Layout Elements on
Interface and Screen Design Aesthetics. Advances in Human-Computer Interaction,
vol. 2011, Article ID 659758, 10 pages, 2011. doi:10.1155/2011/659758.
Altaboli, A. and Lin, Y. 2011b. Objective and subjective measures of visual aesthetics of
website interface design: the two sides of the coin. In Proceedings of the 14th
international Conference on Human-Computer interaction: Design and Development
Approaches - Volume Part I (Orlando, FL, July 09 - 14, 2011). J. A. Jacko, Ed.
Springer-Verlag, Berlin, Heidelberg, 35-44.
Bauerly, M. and Liu, Y. 2008. Effects of Symmetry and Number of Compositional
Elements on Interface and Design Aesthetics. Int. J. Human-Computer Studies, 24: 3,
275 - 287.
Lai, C., Chen, P., Shih, S., Liu, Y., Hong, J. 2010. Computational models and
experimental investigations of effects of balance and symmetry on the aesthetics of
text-overlaid images, Int. J. Human-Computer Studies. 68, 41–56.
Moshagen, M. and Thielsch, M. T. 2010. Facets of visual aesthetics. Int. J. Hum.Comput. Stud. 68, 10 (October 2010), 689-709.
Tuch, A., Bargas-Avila, J., and Opwis, K. 2010. Symmetry and Aesthetics in Website
Design: It's a man's Business. Computers in Human Behavior, 26(2010), 1831-1837
4.5
The goal is to test the hypothesis of findings significant effects of
design in case of designs with high levels of vertical symmetry.
Selected References
3.28
3.11
for 42 webpages. The layout-based measures of unity, number of
Craftsmanship
Summary of average scores
Total
Yingzi Lin, Professor.
Mechanical and Industrial Engineering
Department
Office: 357 Snell Engineering Center
Phone: (617) 373-8610
Fax: (617) 373-2921
E-mail: [email protected]
Intelligent Human-Machine Systems
(IHMS) Laboratory
Director: Prof. Yingzi Lin.
306 Snell Engineering Center
Mechanical and Industrial Engineering Department
334 Snell Engineering Center
Northeastern University
360 Huntington Avenue
Boston, MA 02115 USA