Comparative Study of Aesthetic Theories in Gui Design

Comparative Study of Aesthetic theories in GUI Design

Syed Asim Ali, Syeda Arfaa Jamal, Ali Shan Khawaja, Armaghan Wahid Asghar

Faculty of Computer Science, Institute of Business Administration, Karachi, Sindh 74400, Pakistan

Abstract:  The idea and inspiration for this project was drawn from a thesis by Siqi Fu of Lahti University of Applied Sciences, titled “User interface design by applying theories of Aesthetics”. We took the combination of classical aesthetic theories and modern GUI characteristics, and put it to the ‘first impression’ test. Upon completion of the assignment we put these laws and theories in the order of their importance to a general user.

Index Terms—Aesthetic theories, GUI, design, comparative study.

1. Introduction

T

echnology is becoming more and more important in our everyday lives. We find ourselves using digital devices for both productivity and leisure [1]. It is making our lives easier by helping us perform certain task more swiftly and efficiently. The point to consider is how has technology been able to achieve such an important rank in our daily lives. The way the information is presented on the digital device is found to be more important towards its utility than the content itself, however the importance of the content and services cannot be completely undermined, but the design and presentation of the software plays a vital role in gaining our attention as users, and proving an enjoyable user experience while using software on digital devices [2].

1. Inspiration

The first thing that we notice whenever we use a new software is the way it looks. The GUI of the software interface is its first impression. In psychology, a first impression is the event when one person first encounters another person and forms a mental image of that person [3]. According to research, it takes only one-tenth of a second to make this judgment. In this research, we have utilized the psychology’s first impression principle and applied it to the aesthetic theories to infer which laws are immediately noticed and contribute towards an aesthetic design and which do not.

1. Aesthetic theories under modern GUI characteristics

The theories summarized by [4] are as follows:

1. Screen Layout

• Golden section
• Dynamic symmetry

Golden section is a ratio which is approximately around 1.618 and it makes the symmetry of the product look good.

Dynamic symmetry is a proportioning principal for natural design.

1. Distribution of elements

• The Gestalt laws

These are seven laws or also called “Law of Simplicity”, which show that designs are perceived in its most simple form. The seven laws are elaborated in research findings.

1. Color theories

• Color harmony
• Goethe’s color theories

Color harmony emphasis on selecting that combination of color that is pleasing to the human eye.

Goethe’s color theory actually talks about the importance and usage of white space and dark backgrounds.

1. Problem Statement

To understand which of the laws are actually important based on empirical evidence. Which of the laws get overlooked by the people when they visually interact with user interface designs during their ‘first impression phase’.

1. Research Methodology

We developed customized pictures which incorporated slight differences, with picture one obeying the law and the other not obeying it.

We utilized the google forms [5] to circulate the survey to different individuals within IBA and outside to get a quantitate as well as a qualitative feedback on each of the pictures.

As part of the qualitative survey, after the results were obtained we asked a sample of the survey population to explain as so why they choose the options that they did. Based on these explanations we have developed conclusions.  

1. Research Findings

We presented the research survey to 50 unique individuals. The survey involved 29 female participants and 21 male participants.

1. Law of Proximity

[pic 1]

The right picture uses the law by placing the elements of similar nature, that is the content is close to each other, while the left picture ignores this property.[pic 2][pic 3]

The survey suggests the approximately 60% of the people notice and prefer the page obeying the law of proximity.

[pic 4]

Law of Proximity is important, but we have observed that people favored symmetry more in the tabular form. Also, we noticed that sometimes white spaces are not your friend, because they represent a sense of emptiness in your design.[pic 5]

1. Color Theory

Figure 1: Color Theory Sample

[pic 6]

We discovered that an average of 77% of users preferred strong color contrast plus good color harmony and setting. Colors need to be well-adjusted within itself and also distributed on a page in a way that it looks balanced.[pic 7]

1. Law of Prägnanz

Figure 2 Prägnanz Figure

[pic 8]

It identifies that white color is a driving force of your attention or sight. Through our research, we noticed approximately 62% percent of the people actually gave more preference to this law but it actually depends on particular task as this law is more relevant when navigating a map but people will not bother that much if you pay a less attention to it while designing buttons of your web.

1. Law of Closure

Figure 3 Closure Law

[pic 9]

The law of closure utilizes the fact that humans have an inner     need to view objects as a whole. The human mind subconsciously completes an incomplete picture because it gives the mind a sense of accomplishment and involvement. Using this law can help attract attention to your webpage, but if not used right, it can put off the user. 85% of people went for option B. When asked why, they said that both were quite interesting, but option B took less effort to read.[pic 10]