Content uploaded by Hafizah Abdullah Ali
Author content
All content in this area was uploaded by Hafizah Abdullah Ali on Feb 23, 2023
Content may be subject to copyright.
Corresponding Author: Hafizah Abdullah Ali, Politeknik Tuanku Syed Sirajuddin, +60125014371
1
Advanced Journal of Technical and Vocational Education, 5 (3): 01-06, 2021
e-ISSN: 2550-2174
© RMP Publications, 2021
DOI: 10.26666/rmp.ajtve.2021.3.1
Birkhoff’s Aesthetic Measure and Common Aesthetic Values in Digital Design
Hafizah Abdullah Ali1, Husniza Husni2
1
Department of Design and Visual Communication, Politeknik Tuanku Syed Sirajuddin, 02600
Pauh Putra, Malaysia.
hafizahict@gmail.com
2
School of Computing, Universiti Utara Malaysia, 06010 Sintok, Malaysia.
husniza@uum.edu.my
Abstract: This paper reviews the aesthetics of digital design concerning Birkhoff’s Aesthetic Measure, which is
an important aspect that would lead to better usability, visual elements, and perceived user experience. With limited
literature focusing on aesthetics, this paper conducted a systematic literature review to uncover the primary and
standard aesthetics measures that can be used to measure digital design’s ‘appealing-ness.’ The findings revealed
fourteen common aesthetic values using Birkhoff’s Aesthetic Measure that is related to screen and digital design,
which is the scope of this review. These shared values can be used in measuring the aesthetics of any digital artifact,
including a digital graphic novel. From the fourteen, five measures are exciting to be explored further concerning
digital graphic novels as discussed. It is a significant finding to establish a common and standard measure of the
aesthetic in digital design and, therefore, in digital graphic novels.
Keywords: Birkhoff’s aesthetic measure, aesthetic measure, aesthetic, digital design, digital graphic novel.
INTRODUCTION
One way to increase the usability of digital design is by
improving the appearance of interface design [1]. The
research reported here relates to evaluating the aesthetic
value for a digital design using Birkhoff’s Aesthetic
Measure (BAM). The term aesthetic relates to the study
of appearance in art, beauty, and appeal [2][3] they are
seen as an impression that changes with external
circumstances such as age, culture, health, experience
[4][5], as well as emotional appeal [6]. BAM is a
quantitative approach to several aesthetic values
[7][8][9].
In the field of interaction design, aesthetic
considerations are required. This paper looks at
measuring aesthetics in digital work, specifically Digital
Graphic Novel (DGN). How to practice BAM in
measuring the aesthetic, and what are the aesthetic
values in a digital work? Answering these questions is
the aim of this paper and hence the objective is to review
the aesthetics of digital design. We will discuss the
visual aesthetics in the context of DGN design with
respect to BAM.
AESTHETIC MEASURE
Aesthetic measurements, according to Birkhoff [10], are
the relation of order and complexity. He proposed the
Aesthetic Measure in 1928, attempting to quantify
aesthetic by defining it as the ratio of order (O) to
complexity (C), particularly M = O/C, with greater M
denoting higher aesthetic measure.
Using the BAM formula, the aesthetic measure, M from
an information theory point of view, will be measured
[11], in this case, the concepts of O and C in designing
DGN. O will calculate all the components included in
each aesthetic value, such as text, image, panel, and
related features for specific aesthetic value in each
interface. The measure proposed that the more order an
object possesses for a certain complexity level, the
higher its aesthetic measures will be. For a particular
order, an object is considered more aesthetic if it is less
complex. As such, it will provide significant
implications for both DGN researchers and practitioners
in measuring DGN products using BAM.
According to the previous study on aesthetics, we can
refer to a framework by [12] as depicted in Fig 1. He
Hafizah & Husniza / Advanced Journal of Technical and Vocational Education, 5(3) 2021, Pages: 01-06
2
constructed a framework that focuses on the relation
between aesthetics and designing digital work.
Fig 1 General framework related to the aesthetics and
graphical user interface. Source: [12]
Referring to Fig 1 can be seen the elements of aesthetics
or aesthetic features that are disengaged from the
graphical user interface (GUI) in a digital design –
emotions and attitudes, beauty, and pleasurable
experience. While usability, visual aspects, and
perceived user experience hold for aesthetics and GUI
as often demonstrated by best products [13].
METHOD OF STUDY
To achieve the objective of this paper, the Systematic
Literature Review (SLR) is employed. SLR is a method
of analyzing and understanding all available research
relevant to a specific research problem, topic, or
phenomenon [14][15]. SLR provides methodological
advantages and applications for research issues [16].
Hence, the review methodology establishes three
subsequent steps for conducting a systematic literature
review, as presented in Fig 2.
Fig 2 Steps for conducting Systematic Literature
Review
Planning Phase
The first phase begins with the formulation of the
research objectives where the needs for SLR are
identified. Specifying research questions and
developing a review protocol for this research is the best
strategy to accomplish this goal. The following are the
research questions defined before conducting the SLR:
RQ1: What is the practice of Birkhoff Aesthetic
Measure?
RQ2: What are the common aesthetic values using
Birkhoff’s Aesthetic Measure?
Examining BAM’s practice to measure aesthetics for
digital design is significant as we want to select one
measurement that could give empirical evidence to the
aesthetics of a DGN. Therefore, the shared values of
such measures must also be reviewed so we can select
the most relevant ones concerning digital design,
specifically DGN.
Conducting Phase
In the second phase, the process begins with a related
research searching process. It starts with a search of
previous research titles and summarizes the content of
reviews based on specific keywords. Then, the search is
more pitched towards the research question. The
keywords used include "Birkhoff’s aesthetic measure",
"aesthetic measure + digital design", "aesthetic measure
+ screen design", "aesthetic measure + digital design"
and "aesthetic measure". Only 35 sources are chosen
from 97 sources found from online database searches,
and they can be divided into multiple groups using the
screening technique indicated in Fig 3.
Fig 3 Number of papers at the screening process
The selection process is based on two criteria,
namely inclusion and exclusion. The protocol review
criteria to be selected in the primary studies are as shown
in Table 1 based on the research questions.
Table 1 Inclusion and Exclusion Criteria
Inclusion
Exclusion
Conference or journal between
2016-2021.
Conference or
journal before
2016.
Screen design guidelines.
Non-digital
design
guidelines.
Birkhoff’s Aesthetic Measure,
Measure Aesthetic for digital
Aesthetic
measure for
Hafizah & Husniza / Advanced Journal of Technical and Vocational Education, 5(3) 2021, Pages: 01-06
3
design, Measuring Aesthetic
using Birkhoff Aesthetic
Measure.
non-digital
design.
A database has been created to facilitate data
management from selected studies. Many resources are
obtainable through electronic libraries, resulting in a
relevant publication. The search on the following
databases is recorded: ACM Digital Library, IEEE
Xplore, Elsevier Scopus, JSTOR, ResearchGate,
Semantic Scholar, Springer, and Wiley Online Library.
Reporting Phase
In the final phase of the SLR, the study questions are
critically discussed and reported in the next section.
ANALYSIS AND FINDINGS
The final list includes articles published between 2016
and 2021, 28 sources were selected, and seven sources
are regarded as the primary reference due to the use of
theories and research results that were highly accurate
and answered the research questions. The selected
papers are classified based on the specific research
questions. It is important to note that this research still
has significant references within the scope of the most
recent five-year study. Studies leading to the
measurement of aesthetic value using mathematical
measurements, specifically in digital works using BAM,
are limited and yet necessary.
RQ1: What is the practice of Birkhoff Aesthetic
Measure?
According to Birkhoff, the aesthetic measure is
composed of three phases: 1) a preliminary effort of
attention, which is required for the act of perception and
increases proportionally with the complexity (C) of the
aesthetic values; 2) the sense of value or aesthetic
measure (M) that rewards this effort, and 3) the
verification that a specific order characterizes the
aesthetic value.
M = O / C, (C > 0)
Various fields use BAM in assessing aesthetic value. Fig
4 shows the percentage of lots that practice BAM.
Fig 4 Field of studies that use BAM to evaluate
aesthetics
Based on Fig 4, past studies have frequently linked three
areas to aesthetic measurement using BAM:
Industrial/Product Design, Architecture, and Screen and
Digital Design. Screen and Digital Design is the field
with the highest aesthetic value measured using a
mathematical evaluation covering 29%. It shows that
aesthetic measurement using mathematical equations is
still relevant and suitable for screen design for digital
design and, therefore, specifically for DGN.
RQ2: What are the common aesthetic values using
Birkhoff’s Aesthetic Measure?
To investigate the above research questions, 11 studies
were identified, and the common values are presented in
Table 2 according to the reviews on the literature.
Table 2 Common aesthetic value using Birkhoff’s
Aesthetic Measure
Source
Aesthetic
value
Description
[1], [14], [15], [16],
[17], [18], [12],
[19], [20], [21], and
[22]
Measure of
balance
Distribution
of optical
weight in a
picture.
[1], [14], [15], [18],
[12], and [21]
Measure of
equilibrium
Equilibrium
on a screen is
accomplished
through
centering the
layout itself.
The centre of
the form
coincides
with that of
the frame.
[1], [14], [15], [17],
[12], [19], [20],
[21], and [22]
Measure of
symmetry
The screen is
symmetrical
in three
directions:
Hafizah & Husniza / Advanced Journal of Technical and Vocational Education, 5(3) 2021, Pages: 01-06
4
vertical,
horizontal,
and diagonal.
[1], [14], [15], and
[17]
Measure of
sequence
The
arrangement
of objects in
a layout in a
way that
facilitates the
movement of
the eye
through the
information
displayed.
[14]
Measure of
Cohesion
Aspect ratios
promote
cohesion.
[14], [17],[18],
[12], [19], [21], and
[22]
Measure of
Unity
Unity is
achieved by
using similar
sizes, shapes,
or colors for
related
information
and leaving
less space
between
elements of a
screen than
the space left
at the
margins.
[14], [16], and [12]
Measure of
proportion
Aesthetically
pleasing
proportions
should be
considered
for
significant
screen
components,
including
windows and
groups of
data and text.
[14], [17], [18], and
[12]
Measure of
simplicity
Combination
of elements
in a form.
[14], [17], [19], and
[22]
Measure of
density
Character
positions on
the entire
frame
containing
data.
[14]
Measure of
regularity
Standard and
consistently
spaced
horizontal
and vertical
alignment.
[14], [17], and [22]
Measure of
economy
Styles,
displays
techniques,
and colors.
[14]
Measure of
homogeneity
Measure how
evenly the
objects are
distributed
among the
quadrants.
[14] and [17]
Measure of
rhythm
Regular
patterns of
changes in
the elements.
[1], [14], [15], [16],
[18], [12], [19],
[20], and [22]
Measure of
order and
complexity
Order is
written as the
sum of the
design
complexity.
Based on the standard aesthetic measures, this research
drew the list of aesthetic considerations mainly from
existing graphic design principles [23], [24], [25] and
screen design guidelines [26], [27], [28] as the
following. These studies used a standard aesthetic
measure for screen design that was closely related to
digital design. Five aesthetic steps are considered
significant based on the frequency of use for each
aesthetic value in previous studies. Based on 11 primary
pieces of literature, these five measures occurred in
more than half of the studies listed in Table 2.
Measure of balance
Balance is where the use of the image or content on the
screen is in a balanced composition. It can increase the
attractiveness of the user's eyes [21]. To balance the
composition, the positive elements and the negative
spaces must be arranged so that none of the design parts
dominates the other.
Measure of equilibrium
Equilibrium refers to the layout or the arrangement of
the contents on a page. According to Ngo et al. [15],
when the layout is centered, it achieves balance and can
thus be superposed with the frame center.
Hafizah & Husniza / Advanced Journal of Technical and Vocational Education, 5(3) 2021, Pages: 01-06
5
Measure of symmetry
According to Huang et al. [29], symmetry is the exact
form or object correspondence on opposing sides of a
center or axis.
Measure of Unity
Unity is defined as the perception of the whole visual
element in the layout [30]. With unity, the details appear
to belong together, to fit together so perfectly that they
are perceived as one thing. Unity is achieved by using
similar sizes, shapes, or colors for related information
and leaving less space between screen elements than the
margins.
The measure of order and complexity
Order and complexity refer to the layout of the screen's
elements [14], [12]. Hence, the measure of order and
complexity is the total value of all combinations of
aesthetic values.
These five measures are significant for measuring the
aesthetics of a DGN. Based on the result from previous
studies, these five measures are often used as the
importance and primary measures for aesthetic design
for digital screens and can be expanded into DGN
design.
CONCLUSION
This paper presents an SLR study to answer questions
related to aesthetic measures and aesthetic values as
aforementioned. From the SLR conducted, we can say
that BAM is prominently used to measure aesthetics in
the screen and digital design field, apart from other
areas. From the field of study, we have found 14
common aesthetic values related to DGN. These values
are using BAM to measure its aesthetics. This shed some
insights and direction to measure the aesthetics of a
DGN and the elements that should be of concern when
designing and developing the DGN. Nonetheless, it
raises questions as to how these values are measured
using BAM. Therefore, we attempt to select the
elements/values for each aesthetic measure for the DGN
design in future studies. Consequently, they must be
listed in depth to facilitate the calculation of values using
the BAM formula.
REFERENCES
[1] Ngo, D. C. L., & Byrne, J. G. (1998, December).
Aesthetic measures for screen design. In
Proceedings 1998 Australasian Computer-Human
Interaction Conference. OzCHI'98 (Cat. No.
98EX234) (pp. 64-71). IEEE.
[2] Brielmann, A. A., & Pelli, D. G. (2018). Aesthetics.
Current Biology, 28(16), R859-R863.
[3] Arumugam, K., & Ali, R. M. (2019). Buku kanak-
kanak: Analisis unsur Estetika. PENDETA: Journal
of Malay Language, Education and Literature, 10,
151-165.
[4] Brady, B. E. (2019). Aesthetics of the natural
environment. Edinburgh university press.
[5] Keong, L. (2019). The Impact of Virtual Simulation
on Aesthetic Experience in Human Psychology and
Perception.
[6] Liu, P., Wang, K., Yang, K., Chen, H., Zhao, A.,
Xue, Y., & Zhou, L. (2020). An Aesthetic
Measurement Approach for Evaluating Product
Appearance Design. Mathematical Problems in
Engineering, 2020, 1–15.
https://doi.org/10.1155/2020/1791450
[7] Khalili, A., & Bouchachia, H. (2021). An
information theory approach to the aesthetic
assessment of visual patterns. Entropy, 23(2), 153.
[8] Meddahi, K., & Boussora, K. (2021). Aesthetic
Measures of Algiers’ Colonial Facades. Nexus
Network Journal, 1-22.
[9] Johnson, C. G., McCormack, J., Santos, I., &
Romero, J. (2019). Understanding aesthetics and
fitness measures in evolutionary art systems.
Complexity, 2019.
[10] Birkhoff, G. D. (1933). Aesthetic Measure by
George D. Birkhoff.
[11] Beebe-Center, J. G., & Pratt, C. C. (1937). A test of
Birkhoff's aesthetic measure. The Journal of General
Psychology, 17(2), 339-353.
[12] Botermans, C. (2017). Analysis of Graphical User
Interfaces Aesthetics based on Visual Metrics.
Masters Thesis. Université Catholique de Louvain.
[13] Saffer, D. (2010). Designing for interaction:
creating innovative applications and devices. New
Riders.
[14] Ngo, D. C. L., Samsudin, A., & Abdullah, R.
(2000a). Aesthetic measures for assessing graphic
screens. J. Inf. Sci. Eng, 16(1), 97-116.
[15] Ngo, D. C. L., Teo, L. S., & Byrne, J. G. (2000b).
A mathematical theory of interface aesthetics. In
Visual mathematics (Vol. 2, No. 4). Mathematical
Institute SASA.
[16] Cleveland, P. (2008). Aesthetics and complexity in
digital layout systems. Digital Creativity, 19(1), 33-
50.
[17] Altaboli, A., & Lin, Y. (2011, July). Objective and
subjective measures of visual aesthetics of website
interface design: the two sides of the coin. In
International Conference on Human-Computer
Interaction (pp. 35-44). Springer, Berlin,
Heidelberg.
[18] Kurnianto, A. (2013). Analisis Layout Surat Kabar
berdasarkan Prinsip-Prinsip Desain melalui Metode
Estetika Birkhoff. Humaniora, 4(2), 986-994.
Hafizah & Husniza / Advanced Journal of Technical and Vocational Education, 5(3) 2021, Pages: 01-06
6
[19] Khalili, A. M. (2017). On the mathematics of
beauty: beautiful images. arXiv preprint
arXiv:1705.08244.
[20] Van Geert, E., & Wagemans, J. (2020). Order,
complexity, and aesthetic appreciation. Psychology
of aesthetics, creativity, and the arts, 14(2), 135.
[21] Saputro, D. M., & Rito, B. B. R. (2020). Evaluasi
Kualitas Estetika Fasade Bangunan dengan
Pendekatan Birkhoff Aesthetic Measure. Journal of
Appropriate Technology for Community Services,
1(1), 1-5.
[22] Mbenza, P., & Burny, N. (2020, June). Computing
aesthetics of tangible user interfaces. In Companion
Proceedings of the 12th ACM SIGCHI Symposium
on Engineering Interactive Computing Systems (pp.
1-8).
[23] Landa, R. (2018). Graphic design solutions.
Cengage Learning.
[24] Kamaruddin, N., & Sulaiman, S. (2018).
Understanding interface design principles and
elements guidelines: A content analysis of
established scholars. In Proceedings of the Art and
Design International Conference (AnDIC 2016) (pp.
89-100). Springer, Singapore.
[25] Li, Z. (2019). Application research of digital image
technology in graphic design. Journal of Visual
Communication and Image Representation, 65,
102689.
[26] Mayhew, D. J. (1991). Principles and guidelines in
software user interface design. Prentice-Hall, Inc.
[27] Johnson, J. (2020). Designing with the mind in
mind: a simple guide to understanding user interface
design guidelines. Morgan Kaufmann.
[28] Ruiz, J., Serral, E., & Snoeck, M. (2021). Unifying
Functional User Interface Design Principles.
International Journal of Human-Computer
Interaction, 37(1), 47-67.
[29] Huang, Y., Lyu, J., Xue, X., & Peng, K. (2020).
Cognitive basis for the development of aesthetic
preference: Findings from symmetry preference.
PloS one, 15(10), e0239973.
[30] Alsudani, F., & Casey, M. (2009). The effect of
aesthetics on web credibility. People and Computers
XXIII Celebrating People and Technology, 512-519.
