AFFECT IN WEB INTERFACE: A
Study of the Impacts of Web
page Visual Complexity and
Order
By: Nesma Sabrah
Introduction



Designing for usability has been one of the primary
foci on HCI.
The affective perspective of user interface design
emphasizes the user’s subjective experience with the
interface.
by nature, human beings are judgmental i.e.
assigning positive or negative valence to the
environment.
Affect linkages
Attitudes
AFFECT
Cognitions
Motivations
Introduction (continued)




Bucy argues that emotional responses determines
which interface people choose to use.
They seek pleasure and enjoyment beyond task
efficiency.
Webpage visual complexity and order are
important design features that affect user’s initial
emotional responses towards a website.
This research investigates web user’s emotional
reactions to different webpage designs with
varying levels of visual complexity and order.
Theoretical Background – The M-R
Model



The M-R model suggests that emotions function to
mediate the effects of environmental stimuli on
behavior.
It assumes that people’s emotions determine what they
do and how they do it and that people respond with
different sets of emotions to different environments
which induces to approach or avoid these environments.
Approach-Avoidance behaviors predicts that user’s
emotional responses affects whether:
they stay within the particular site
 or leave the site and move onto other site.

The Approach-avoidance Behavior

Approach-avoidance behavior is considered
important to this study because:
a user’s behavior reflects the user’s perception of the
quality of the website
 it strongly predicts desired behaviors pertaining to the
measurement of the success of a website such as
customer service, total number of hits, user’s return rate.
 it will lead to more time spent browsing, greater
exploration of products and hence, probability of
purchase.

Complexity and Order
Complexity


Arnheim defines
complexity as “the
multiplicity of the
relationships among parts
of an entity.”
Complexity is related to
the visual richness,
information rate, diversity
and variety of information
in an environment.
Order


Arnheim defines order “as
the degree and kind of
lawfulness governing the
relations among the parts
of an entity.”
Order is the degree of
organization of the
environment in relation to
coherence, congruity,
legibility and clarity that it
exhibits.
Kaplan and Kaplan’s Preference
Framework (1983)


It is a perspective on aesthetic preferences that
explains how visual complexity and order influence
people’s preference of environment.
There are two cognitive processes crucial to human
survival:
Making Sense: Coherence and legibility
 Involvement: having complexity and mystery

Lavie and Tractinsky’s Study

Similarly, user’s perceptions of website aesthetics
consist of two dimensions:
1.
2.

Classic Aesthetics – orderly, clear, clean and
symmetrical design of a website.
Expressive Aesthetics – visual richness, diversity and
complexity.
Both dimensions positively influence feelings of
pleasure and usability.
Emotions
Arousal
• The subjective experience of
energy mobilization for
psychological and motor
activity.
Valence
• It is the subjective feeling of
pleasantness or unpleasantness.
Reversal Theory

Reversal theory proposes two different meta-motivational
states:
Telic State
1.


characterized as goal-oriented in which the ultimate goal is
perceived as essential.
A high level of arousal is experienced as unpleasant and
associated with anxiety since it interferes with the achievement of
the goal.
Paratelic State
2.



Is related to excitement seeking
Characterized as acivity-oriented where the goal of the activity is
not important compared to the ongoing activity.
A high level of arousal is experienced as pleasant whereas low
level is experienced as unpleasant.
Research Model
Relation between visual complexity
and order AND emotional responses.


Complexity (diverse and numerous information) has
been consistently shown to be positively related to
arousal(energy mobilization).
Order (coherence, clarity and diversity) has been
found to bear a negative relationship to arousal
since it requires less energy to comprehend.
Reversal Theory AND Emotional
responses


In a telic state, a webpage with high complexity
and low order (high arousal)will create unpleasant
feelings since it decreases task efficiency and
requires high energy. And vice versa.
In a paratelic state, a webpage with high
complexity and low order would be gratifying and
pleasant as it satisfies the need for a rich,
stimulating experience. And vice versa.
HYPOTHESES (1 AND 2)


H1: The level of webpage order negatively
influences the user’s feeling of arousal.
H2: The level of webpage complexity positively
influences the user’s feeling of arousal.
HYPOTHESES (3 AND 4)

H3: A web user’s meta-motivational state moderates the
effect of webpage order in the user’s feeling of
pleasantness.



H3a: in a telic state, level of order positively influences
pleasantness.
H3b: in a paratelic state, order negatively influences
pleasantness.
H4: A web user’s meta-motivational state moderates the
effect of webpage visual complexity on the user’s feeling of
pleasantness.


H4a: in a telic state, complexity negatively influences
pleasantness.
H4b: in paratelic state, complexity positively influences
pleasantness.
HYPOTHESES (5 AND 6)


H5: A web user’s pleasantness positively influences
the user’s approach tendency toward the website.
H6: A web user’s meta-motivational state moderates
the relationship between the user’s arousal and
approach tendency toward the website.
 H6a:
in a telic state, arousal negatively influences the
user’s approach tendency.
 H6b. In a paratelic state, arousal positively influences
the user’s approach tendency.
Experimental Procedure






12 versions of webpage stimuli (an online gift store’s
homepage)
4 levels of Complexity
3 levels of Order
2 meta-motivational states (Telic or Paratelic)
4(complexity)x 3(order)x 2(metamotvational state) =
24 treatments
20 seconds of examing the webpage followed by a
questionnaire of the participant’s emotional response to
the webpage.
Analysis and Results


After a lot of statistical analysis of result, to a very
large extent all the hypotheses have been
confirmed.
This study applied and largely supported the
hypotheses drawn from prior research on
environmental aesthetics and preference.
THE END!

Thank you!!