Papahristos et al interact 2005 final

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

An empirical study on the relations between color and emotional dimensions of a

web site

Eleftherios Papachristos, Nikolaos Tselios, Nikolaos Avouris Human-Computer Interaction Group, Electrical and Computer

Eng. Dept., University of Patras, Greece.

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Presentation overview

Color usage in web sites Description of the proposed

method Analysis of the results

obtained Conclusions/ Future work

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Our research goal was…

..to study association of color combinations with emotional and aesthetic values for a web site.

How the users are emotionally stimulated by specific color schemes.

The approach involves application of machine learning techniques on data collected during an empirical study.

The data obtained have been used to train a Bayesian Belief Network which associates a chromatic model to a set of emotional descriptors

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Bayesian Networks

Computational architecture:– Computes posterior probabilities given evidence about

selected nodes– Exploits probabilistic independence for efficient computation– Based on Bayes theorem:

P(A|B)=P(B|A) P(A)/P(B)

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Problems with color usage guidelines

Experiential advice tends to be non-representative, contradictory or even obsolete (Schwier and Misanchuk 1995)

Guidelines are often of little value to novice designers with little experience with color theory and art

Many issues remain untackled by existing guidelines, such the relationship between colors (simultaneous contrast), the optimal number of colors for each case etc.

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Color in web sites

Color can be used for aesthetic and functional reasons.– Shapes a user interface (Smith,1986)– Helps information seeking and organization (Carter 1982, Marcus

1986)

Effective web site design has to communicate well wider values such as – sense of professionalism (Karvonen, 2001), – trust (Nikander and Karvonen,2001) and – Credibility (Danielson,2001)

Strong effect on the visceral level (mostly aesthetics), positively influences the behavioral and reflection level (Norman,2003)

The visual aesthetics of computer interfaces are a strong determinant of users' satisfaction and pleasure (Tractinsky et al., 2000)

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Methodology

Partially inspired from a similar research by Guerin, Park, Yang (1995).

Identify relations between color characteristics and affective, emotional descriptors.

Additionally to this, the process can be applied reversely.

Color scheme descriptors

Emotional descriptors Demographic descriptors

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Empirical study

Forty six (46) participants completed the experiment (35 male, 11 female, aged 21-31), evaluating eight color schemes each.

The emotional dimensions used are compatible with the thirteen emotional dimensions that have been used by Kim et al. (2003).

Most participants were postgraduate and undergraduate students of the Electrical and Computer Engineering Department of University of Patras.

70% of the user had high internet familiarity, 26% average familiarity, 4% low familiarity

The amount of data collected during the study was 46 participants x12 dimensions x8 layouts=4416 evaluations, thus 552 for each test page.

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Emotional Dimensions

PleasantFormalFresh ModernFriendlyAggressive ProfessionalAttractiveCalmingDynamicReliableSophisticated

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Bayesian Belief Networks

– A significant knowledge representation tool– A significant inference representation tool under

conditions of uncertainty Knowledge structure:

– Variables are depicted as nodes– Arcs represent probabilistic dependence between

variables– Conditional probabilities encode the strength of the

dependencies Various advantages:

High classification accuracy The graph nature of the networks facilitates the

knowledge mining process Proliferation of available tools to manipulate obtained

network

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Results

• Conclusions from the BBN are structural and statistical.

• The diagrammatic nature of the BBN• allows recognition of the

relations between the variables of the experiment

• allows us to gain an insight on how a change in the values of one node affects the attributes of other nodes of the network

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Results example

Attribute “Friendly” web page

Dominant color Green

Brightness of dominant color Bright

Saturation of dominant color neutral

Secondary color Grey green

Brightness of secondary color Bright

Saturation of secondary color not saturated

Contrast of brightness between colors high

Contrast between Hues low

Number of colors 4

Color Scheme monochromatic

Dominant color descriptor: 1:Blue, 2:Red, 3:Grey, 4:Green, 5:Purple

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Some more results

Analyzing the BBN structure, lead to a categorization of influence of color factors into 4 levels of importance.

The most important aspect that influences the emotional values perceived by the user seems to be :

the brightness of the dominant color. the brightness level of the secondary color, the

number of colors, contrast between hues, and the type of the secondary color (warm or cold).

Thirdly, the dominant color, the secondary color, color scheme, contrast levels of brightness.

Finally, the saturation of the dominant color, and the type of the dominant color (warm or cold).

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Tools developed

Experimental Tool

Final Tool

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Conclusions

A novel methodology has been presented that proposes the most appropriate web site color scheme for a desired emotional impact.

Significant advantages compared to the most common approach, i.e. applying guidelines for color usage– Elicitation of optimal color schemes for each web site category

(news, e-learning, e-commerce, e-culture, e-government) Reported results cannot be claimed to be of general value

– neither number of subjects– nor the number of the test web pages was sufficient to justify

general conclusions Many of the findings confirm earlier empirical rules on color

and current tendencies in web design

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Future work

Experiment reapplication using a larger and more symmetrical sample

The proposed emotional descriptors can be further evaluated in various web layouts and users and refined accordingly

Explore cultural deviations and their effect on perceived aesthetics

We thank the European Social Fund (ESF), Operational Program for Educational and Vocational Training II (EPEAEK II), and particularly the Program PYTHAGORAS II, for funding the above work.

Thank you!

Visit us at hci.ee.upatras.gr