AESTHETICS MEASUREMENT

22
MA proposal bySiti Zubaidah Mohd Zain - 1 RESEARCH PROPOSAL FOR MASTER IN COMPUTER SCIENCE Siti Zubaidah Mohd Zain School Of Informatics and Applied Mathematics University Malaysia Terengganu (Umt) Measuring Asthetics For The Most Popular Networking Websites: Facebook

Transcript of AESTHETICS MEASUREMENT

MA proposal bySiti Zubaidah Mohd Zain - 1

RESEARCH PROPOSAL FOR MASTER IN COMPUTER SCIENCE

Siti Zubaidah Mohd Zain

School Of Informatics and Applied MathematicsUniversity Malaysia Terengganu (Umt)

Measuring Asthetics For The Most Popular NetworkingWebsites: Facebook

MA proposal bySiti Zubaidah Mohd Zain - 2

CONTENTS PAGE

1. INTRODUCTION.........................3

1.1 The research problem.............4

1.2 The purpose of the study…………………………..5

1.3 The objectives of the study......5

1.4 Research question(s).............5

2. LITERATURE REVIEW ...................6

3. PROPOSED METHODOLOGY ...............10

4. MY PERSONAL WORK PLAN...............11

5. EXPECTED RESULTS / BENEFITS………………...12

MA proposal bySiti Zubaidah Mohd Zain - 3

References ........................13

CHAPTER 1: INTRODUCTION

1.1 BACKGROUND OF PROJECT

Aesthetics is a word that is not so familiar among public, but it

is the important elements that able to influence or grab people

attention. Aesthetics or also spelled as esthetics is a branch of

philosophy that are dealing with the nature of art, beauty, and

taste. Aesthetics is about dealing with the creation and

appreciation of beauty. Scientifically, aesthetics was defined as

the study of sensory or sensori-emotional values, sometimes

called judgments of sentiment and taste. Based on scholar field,

aesthetics was defined as “critical reflection” on art, culture,

and nature.

MA proposal bySiti Zubaidah Mohd Zain - 4

In Information Technology (IT), aesthetics has focused upon the

study of human-computer interaction and creating user-friendly

devices or websites and software applications. The software

itself has aesthetics dimensions (“software aesthetics”), as do

IT mediated processes and experiences such as computer video

games and virtual reality simulations. A distinct aesthetics in

digital culture is used to judge the appeal of digital

environment such as web browsers, websites, and icons, as well as

visual and aural art produced exclusively with digital

technologies.

Facebook is an online social networking service that founded on

February 4, 2004 by Mark Zuckerberg with his college roommates

and fellow Harvard University Students, Eduardo Saverin, Andrew

McCollum, Dustin Moskovitz and Chris Hughes. Nowadays, Facebook

had become the most popular networking website. It be proved

based on the survey in October 2014 by eBizMBA where Facebook

reached 900,000,000 estimated unique monthly visitors had become

the most popular social networking site among other top fifteen

most popular social networking sites, which are Twitter,

Linkedln, Pinterest, Google Plus+, Tumblr, Instagram, VK, Flickr,

Vine, Meetup, Tagged, Ask.fm, MeetMe, and ClassMates.

Down here is the Figure 1 that showed number of monthly active

Facebook users worldwide from 3rd quarter 2008 to 2nd quarter 2014

(in millions) by Statista: The Statistics Portal. We can see here

MA proposal bySiti Zubaidah Mohd Zain - 5

the increasing value of active users of Facebook in all over the

world. The values keep increasing without a single graph that

shown flat or decreasing values.

Figure 1: Number of Monthly Active Facebook Users Worldwide From 3rd Quarter 2008 to 2nd Quarter

2014 (in Millions) by Statista: The Statistics Portal

This kind of situation, make me willing to study about the

aesthetics of Facebook site because it able to grab the attention

of billions users all around the world. This study seriously

should be done because it can help other people to know the

values of aesthetics for the most popular social networking site

that able to gain people attention and interest, plus make people

all around the world always be more active with it compare to

other social networking sites. This kind of website will help any

kind of business be grown faster and bigger time to time. Just

imagine the economy of any country that able to develop the

website that able to influence people all around the world stick

with it surely will achieve a victory in their economy levels.

MA proposal bySiti Zubaidah Mohd Zain - 6

This research will be executed on how to measure the Facebook

user interface aesthetics values. People will know the objective

value of aesthetics for the most popular networking website

nowadays.

1.2 PROBLEM STATEMENT

Below are the lists of problem statement for this research:

i. The research problem is to measure the value of aesthetic of

Facebook site based on six elements derived from the model of

Ngo, Teo, and Byrne (2002). These six elements were balance,

equilibrium, symmetry, sequence, rhythm, as well as order and

complexity.

ii. To change the subjective results of aesthetics view for

facebook to the objective values.

iii. To measure the 14 elements of web design principles.

MA proposal bySiti Zubaidah Mohd Zain - 7

iv. To find out the aesthetics value for the selected facebook

site interface.

1.3 OBJECTIVE(S)

i. The purpose of the study is to know the value of aesthetics

for the most popular networking websites with the aim to

inform readers with its aesthetics information.

ii. To change the subjective value of Aesthetics to the

objective value of it.

iii. To let people know the value of aesthetics objectively for

the most popular website.

iv. To help individuals to be more specific in making judgment

for liking any website because normally they make judgments

based upon information received from mood, emotion, and

feeling (Zhang, 2009).

v. To give ideas to people in designing the next website by

applying the same level of aesthetics’ objective value.

1.4 SIGNIFICANCE OF THE PROJECT

MA proposal bySiti Zubaidah Mohd Zain - 8

By study the aesthetics of Facebook, we will able to apply the

same concept of aesthetics to the other website in business area

in order to increase the amount of costumer.

1.5 The research questions

To justify the hypothesis and confirm or refute it, the

following research questions were posed:

i) How to measure visual aesthetics of Facebook?

ii) Can the six elements of aesthetics (balance,

equilibrium, symmetry, sequence, rhythm, as well as

order and complexity) of Facebook achieve the closest

value to 1?

1.6 SCOPE OF THE PROJECT

2. LITERATURE REVIEW

Aesthetics Concept

The word “Aesthetics” derives from the Greek language

“aisthetikos” meaning of sense of perception. It is a philosophy

study about aesthetics concentrates on beauty and tastes, which

are sensory values from human senses (Ford, 2009). The evaluation

MA proposal bySiti Zubaidah Mohd Zain - 9

or judgment standard of beauty was referring to the philosophical

breakthrough from arts and nature. Ford (2009) stated a subarea

of theory about the philosophy of art that, “aesthetics involves

ways of seeing and perceiving the world”, it can be used as a

standard measurement of a particular style or design.

The theory takes account not just on an individual object but

also for all the things that are related as a whole, all of its

parts are combined in a way of harmonious, which is what we

called as beautiful (Townsend, 1997). For example, when people

see a painting, they do not feel that each individual objects are

nice but view the painting as a whole. The distribution and

combination of related objects and intelligently chose of colour

constructed a harmonious picture of trees, sky and lakes. Another

example as we take on human, when people comment a girl is

beautiful, is not because she has a beautiful nose or eyes, but

the harmonious of every element on her face provide a confortable

feeling to others (Ch’ng, Simulation of a design environment for

users to incorporate proportioning systems into screen design,

2002). So, the more perfect the features are, a more near to the

standard of aesthetics is.

The Importance of a Good User Interface

Graphical User Interface (GUI) design is the design of software,

system, application, websites and all kinds of electronic devices

or products based on the user’s experience and interaction

MA proposal bySiti Zubaidah Mohd Zain - 10

(Zetie, 1995). The goal of the user interface design is try to

achieve a simple, efficiency and user-friendly interaction, in

terms of provide the user a good balance of usability and fancy

visual sense. The user’s feedback during the developing of user

interface let developers realized that, there is a great

necessary to design and implement a good user interface that not

only helps the user perform tasks efficiently and productivity,

but also stimulate the user’s interests for keeping using the

system (Ch’ng, Simulation of a design environment for users to

incorporate proportioning systems into screen design, 2002).

However, computer systems are different from other systems. For

instance, digital watches or Microwave ovens, they generally have

buttons, digital display or a touchpad which users can interact

them by just press the buttons (Stone et al. 2005). But, for a

computer system, it is the combination of hardware and software

that receive user input and manipulate the system output for

assisting users to achieve certain tasks. So, frankly speaking,

user interface is part of the system and from the user’s view of

computer systems, the use of the interface is always limited and

based on his or her using experience of the user interface (see

Figure 2).

Figure 2: As to users, user interface is part of the computer system (Constantine &

MA proposal bySiti Zubaidah Mohd Zain - 11

Lockwood, 1999)

Nowadays, the advent of graphics pushes user interface to another

stage in the evolution of interface design. Design rules like

grouping and alignments are still remained from the original

concept, elements like stylish layout and simple controls make

user interaction more efficient (Ch’ng, Simulation of a design

environment) for users to incorporate proportioning systems into

screen design involved:

1. User

2. Interface

3. Underlying hardware,

4. software, interaction

5. devices

6. User input

7. System output

User Interface Design in Aesthetics

User interface design in Aesthetics introduces aesthetic theories

from three aspects of web interface design, which are the screen

layout of website, the distribution of elements (includes

buttons, text, textbox and so on) and the use of colour on the

MA proposal bySiti Zubaidah Mohd Zain - 12

web pages. The selected GUI design principles from aesthetic

theories are listed as follow:

1. Golden section

2. Dynamic symmetry

3. The Gestalt laws

4. Colour harmony

5. Goethe’s colour theories

Facebook Phenomenon

Recent statistics (2010) provided by Facebook reveal 50 percent

of their active users log-in everyday, and 35 millions use the

status feature to update their profiles daily (Hepburn, 2010). In

the context of Facebook, 60 million status updates are posted

each day (Hepburn, 2010). The uniform format of all Facebook

profiles challenges users to be more expressive and strategic to

distinguish their identity. Facebook is also familiar with the

ability of easy to use. More recently, social networkers have

been quicker to join Facebook, as the site increased their United

States user base from 42 to 103 million in 2009 alone (Corbett,

2010).

MA proposal bySiti Zubaidah Mohd Zain - 13

Measuring Aesthetics

The aesthetics value of Facebook will be measure using Matlab

Software based on six elements derived from model Ngo, Teo, and

Byrne (2002). These six elements were balance, equilibrium,

symmetry, sequence, rhythm, as well as order and complexity.

Table 1 showed the explanations of terms used and the formulae

used for aesthetics measurements.

1. Balance

Balance=1−|BalanceVer|+|BalanceHor|

2∈ [0,1]

Balance=1−|BalanceVer|+|BalanceHor|

2∈ [0,1]

Balance in screen design was achievedby providing an equal weight of screenelements, left and right, top, andbottom.

2. Equilibrium

Equilibrium=1−|Equilibriumx|+|Equilibriumy|

2∈ [0,1 ]

Equilibrium on a screen wasaccomplished through centering thelayout itself.

Equilibrium=1−|Equilibriumx|+|Equilibriumy|

2∈ [0,1 ]

3. Symmetry

Symmetry=1−|SymmetryVer|+|SymmetryHor|+|SymmetryRad|

3∈ [0,1 ]

Symmetry was axial duplication where a

4. Sequence

Sequence=1−∑

j=UL,UR,≪,LR|qj−vj|

8 ∈ [0,1 ]

Sequence in design referred to the

MA proposal bySiti Zubaidah Mohd Zain - 14

unit on one side of the centerline wasexactly replicated on the other side.There were three types of symmetry,which were vertical symmetry,horizontal symmetry, and radialsymmetry.

arrangement of objects in a layoutin a way that facilitated themovement of the eye through theinformation displayed.

5. Rhythm

Rhythm=1−|Rhythmx|+|Rhythmy|+|RhythmArea|

3∈ [0,1 ]

Rhythm was accomplished throughvariation of arrangement, dimension,number, and form of the elements. Theextent to which rhythm was introducedinto a group of elements depends onthe complexity.

6. Order and Complexity

OrderComplexity=∑i

5Mi5

∈ [0,1 ]

The measure of order was written asthe sum of the above measures for alayout. The opposite pole on thecontinuum was complexity. The scalecreated might also be considered asa scale of complexity, with extremecomplexity at one end and minimalcomplexity (order) at the other.

Table 1: Aesthetic Measures

3. THE PROPOSED METHODOLOGY

The literature review was chosen as a research method for the

first phases that shown in Table 2, as the field is rather new

and based on literature not well known or used by the industry

yet. Doing this literature review gives a better opportunity to

establish subject background and learn from other researchers.

MA proposal bySiti Zubaidah Mohd Zain - 15

Furthermore, viewing and understanding all the literature review

will help to understand the related main topic faster and

accurately. Each researcher will have their own point of view

that will give much more new ideas in elaborating this new

research.

Research

Process

Research

Questions

Research Methods Objectives

Phase 1 What is theconcept ofaesthetics thatbe applied to awebsite interfacedesign?

Literature

review

To explore thetheories and theoutcome of thepreviousresearch.

Phase 2 What are theelements existfor measuring theaesthetics valuefor the Facebookinterface design?

Literature

review

Collecting allthe detailed dataabout the sixelements ofaesthetics.

Phase 3 What are thevalues of all sixelements ofaesthetics?

Measure each ofthe aestheticselements valueby using theMatlab software.

To find out thevalues for allsix elements ofFacebook siteaesthetics.

What is the valueof aesthetics foreach of Facebooksite?

Find the valueof aestheticsfor each site bytotal up all thevalues of sixelements foreach site andthen divide itby 6.

To find out thevalue ofaesthetics foreach site. If thevalues are nearto the 1 then itsgood. If thevalues are nearto the 0 then itsmean theinterface is bad.

Table 2: Research Methods

MA proposal bySiti Zubaidah Mohd Zain - 16

4. MY PERSONAL WORK PLAN

Down here is my personal work plan in order to complete this

study. It started in October 2014 and will be end in December

2014. For the presentation date, I believe it will be announce

soon.

STEPS IN THE RESEARCH PLAN DEADLINE FOR COMPLETION

Submission of the proposal 19 October 2014

Design of research plan 22 October 2014

Literature review 23 October 2014

Select the Facebook site that willbe measure their aesthetics value.

5 November 2014

Measure the six elements ofaesthetics value one site by onesite using MatLab software.

6 November 2014

Find out the aesthetics value fromthe six elements of each site.

7 December 2014

MA proposal bySiti Zubaidah Mohd Zain - 17

Analyze all the data. 10 December 2014

Report up findings 18 December 2014

Presentation of final research To be announceTable 3: The schedule in completing this thesis

5.0 EXPECTED RESULTS / BENEFITS

1) People will know how to measure the aesthetics values

of the most popular social networking website,

Facebook.

2) People will know the aesthetics values of the most

popular social networking website, Facebook.

MA proposal bySiti Zubaidah Mohd Zain - 18

3) People will understand how to apply the aesthetics

concept to their website in order to grab users’

attention in all around the world.

References

MA proposal bySiti Zubaidah Mohd Zain - 19

Maarja Pajusalu. (2012). The Evaluation of User Interface Aesthetics.

Thesis by Institute of Informatics,Tallinn University.

Helen C. Purchase, John Hamer, Adrian Jamieson, Oran RyanPh.D. (2011).

Investigating

objective measures of web page aesthetics and usability.

Journal by University of Glasgow, University of Auckland.

Katharina Reinecke, Tom Yeh, Luke Miratrix, Rahmatri Mardiko, Yuechecn

Zhao, Jenny Liu,

Krzysztof Z. Gajos. (2013). Predicting Users’ First Impressions of

Website Aesthetics with a Quantification of Perceived Visual

Complexity and Colorfulness.

Journal by Harvard University, University of Colorado at Boulder, University of

Maryland.

Siqi Fu. (2012). User Interface Design By Applying Theories Of

Aesthetics.

Thesis by Lahti University of Applied Sciences.

MA proposal bySiti Zubaidah Mohd Zain - 20

Paul A. Fishwick. (2008). Software Aesthetics: From Text and Diagrams

to Interactive Spaces.

Thesis by University of Florida.

Khiet P. Truong, David A. Van Leeuwen, and Mark A. Neerincx. (2007).

Unobtrusive

Multimodal Emotion Detection in Adaptive Interfaces: Speech

and Facial Expressions.

Journal by TNO Human Factors, Dept. of Human Interfaces.

Jessica Lee Pugh. (2010). A Qualitative Study of the Facebook Social

Network: The Desire to

Influence, Associate, and Construct A Representative and Ideal Identity.

Thesis by California State University, 2010.

Stephanie Ashley. (2012). Exploring Facebook As An Online Support

Group For Smoking

Cessation.

Thesis by Colorado State University.

Rianne C. Farrugia. (2013). Facebook and Relationships: A Study

MA proposal bySiti Zubaidah Mohd Zain - 21

of How Social Media Use is

Affecting Long-Term Relationships.

Thesis by College of Liberal Arts.

Lindsey L. Smith. (2010). The Antecedents Of Changing Facebook

Content For Employment:

An Application Of The Theory Of Reasoned Action.

Journal by Colorado State University.

Tomas Staudek. Computer-Aided Aesthetics Evaluation of Visual

Patterns.

Journal by ISAMA, The International Society of the Arts, Mathematics, and

Architecture.

Tey Meng Kar, Jasni Mohd Zain, and Goh Ying Soon. (2010).

Measuring Aesthetics of

Mandarin Learning Web Pages: Are Users’ Perceptions Congruent

with the Measured Values of Aesthetics-Measurement Application

(AMA).

MA proposal bySiti Zubaidah Mohd Zain - 22

Journal by University Malaysia Pahang (UMP) and UiTM Terengganu.