# Design Criteria for Stimulating Emotions in Web Applications

Giulio Mori, Fabio Paternò, Ferdinando Furci

<figure><img src="image_1.png" /></figure>

## To cite this version:

Giulio Mori, Fabio Paternò, Ferdinando Furci. Design Criteria for Stimulating Emotions in Web Applications. 15th Human-Computer Interaction (INTERACT), Sep 2015, Bamberg, Germany. pp.165-182, 10.1007/978-3-319-22701-6_12. hal-01599646

HAL Id: hal-01599646

https://inria.hal.science/hal-01599646

Submitted on 2 Oct 2017

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_2.png" /></figure>
# Design Criteria for Stimulating Emotions in Web Applications

Giulio Mori, Fabio Paternò, Ferdinando Furci

ISTI - CNR, Via Moruzzi, 1, 57126 Pisa, Italy

{giulio.mori, fabio.patto, ferdinando.furci}@isti.cnr.it

**Abstract.** This work aims to identify the main aspects of Web design responsible for eliciting specific emotions. For this purpose, we performed a user study with 40 participants testing a Web application designed by applying a set of criteria for stimulating various emotions. In particular, we considered six emotions (hate, anxiety, boredom, fun, serenity, love), and for each of them a specific set of design criteria was exploited. The purpose of the study was to reach a better understanding regarding what design techniques are most important to stimulate each emotion. We report on the results obtained and discuss their implications. Such results can inform the development of guidelines for Web applications able to stimulate users' emotions.

**Keywords:** Web guidelines, emotions, affective interfaces, adaptable interfaces.

## 1 Introduction

Emotions have acquired increasing importance in HCI [1, 2, 3]. However, little work has addressed how to take them into account when designing Web applications, which are the most widely used ones. Therefore, Web developers and designers have difficulties in identifying the most relevant design criteria (such as choice of user interface widgets, navigation and interaction style, suitable colours, etc.) that can stimulate specific emotional states. Understanding the effects of certain design criteria is not only important for the awareness of Web designers, but also useful for many Web application domains such as educational environments, telemedicine, online psychological platforms, games, home automation applications, or tools oriented to help people with disabilities or the elderly.

The literature contains various contributions investigating the effects of aesthetics in Web sites [4, 5, 6], what influences users' preferences [7], or analysis of the emotional appeal of hedonic elements in Web sites (such as colour, images, shapes and photographs) [8], but none of these studies provides indications about the effectiveness in stimulating specific emotions of the various aspects of Web design. One study [3] aims to understand the relations between the design factors and emotional dimensions of many evocative homepages. In particular the study identified 13 emotional dimensions (each one based on some adjective provided by the users),
and some main design factors (shape, texture and colour for the background; title, menu and main images for the elements). Unfortunately, even if the study aimed to associate the emotional dimensions with the proposed design factors, as the authors indicate, their study cannot determine which design factors are closely related to which feelings. In addition, the study analyses just only some design factors for the home pages. An approach [2] comparing two different Web sites (differing in content as well as in graphic design, colour schemes, and balance between text versus illustrations) has been proposed to identify the relations between the design elements of Web pages, perceived usability, and emotional responses, but it does not suggest any concrete indication of Web design aspects for stimulating specific emotions. A series of studies [9, 10, 11] show that first impressions of a Web site can affect the appealing judgment before users can consciously notice any details, but they do not go deeper to identify the most important aspects for each specific affective state. Unfortunately, the effects of Web design features on the emotional state is not yet a known field. In fact, Internet is still full of Web sites (implemented also by professional designers) with banners, popups, media or layout and colour complexity, that often elicit unsuitable emotional reactions from visitors [1, 2]. Different interfaces with poor usability can stimulate different negative emotional reactions, just as different usable interfaces can elicit different positive emotional states [12]. This denotes that there is a need to understand more the emotional impact of the various Web design criteria.

In this paper we aim to investigate the effectiveness of some Web design criteria to stimulate a certain emotional state in the user. In order to understand if some aspects of Web design can be more relevant than others to stimulate an emotional reaction, we have designed and implemented a Web application able to adapt the design depending on the chosen emotion (hate, anxiety, boredom, fun, serenity, love). Moreover, we have conducted a user test with 40 users to evaluate the emotional impact of the proposed Web designs and to collect indications about the design criteria perceived by the user as more relevant than others to elicit the selected emotional state.

Previous work [12] investigated the impact of some Web design criteria to elicit specific emotions independently of the contents and the application domain. For this purpose, a survey and one user test were carried out. The survey involved 57 users and aimed to understand the most recurring emotions during Web interaction and the relative Web features. Each users was asked to propose a certain number (maximum 8) of typical emotions during Web interaction, and then to associate each proposed emotion with specific choices for the main Web design aspects (such as colours, page structures and contents distribution, type of media, navigation & interaction elements, etc.). When the users proposed negative emotions, they also had to suggest a positive counterpart, and finally order them (on the basis of their perception) from the most negative to the most positive. After having filtered (discarding synonyms, emotions with low number of preferences, and emotions having similar Web design characteristics associated), the 219 negative and 219 positive collected emotions became six: *hate, anxiety, boredom, fun, serenity and love*. Hate and love indicate the sense of disliking/liking typical of social environments, anxiety and serenity denote
the emotions during critical/safe operations (e.g. buying using the credit card), while boredom and fun express how the contents are presented to attract the user. These six emotions are probably not exhaustive for the Web, but rather than a further general emotion classification (many are present in literature [13, 14, 15]), we need a basic set of emotions that can be considered typical of Web applications. The six-emotion universal cultural classification proposed by Ekman [13] has not been considered typical for the Web interaction by the users that we recruited. The results of that user study emphasized that different Web designs can stimulate different emotional states on the users. Bad or good usability, although an important factor that can elicit a negative or positive emotional state, is not sufficient to elicit specific emotional reaction. In fact, different unusable/usable interfaces elicited different negative/positive emotions from the users. Positive emotions were perceived important to improve the user experience (at different levels), but also negative emotions were perceived useful in some cases depending on their applications (e.g. educational or learning tools where it is necessary to increase the awareness of children about the difference between good and bad behaviours). Designers need to be aware of the emotional effects of the Web design aspects.

Unfortunately, such previous study [12] did not clarify if some aspects of Web design can be more important than others to stimulate a certain emotional state, so in this work we seek to address this issue. For this purpose, we have designed and implemented a Web application able to adapt its design to the emotional state selected by the user and performed a user test to check the validity of the design criteria applied. Section 2 describes the Web application adapting the design to six emotions, and the applied design criteria for each, while Section 3 reports the user test results and discusses them. Finally, we draw some conclusions and discuss ideas for future work.

## 2 The Design of a Web Application Adapting to Elicit Emotions

We designed and implemented a Web application, *Emotional Music System*, where the user can select an emotion and search for one musical author or a band. After the emotion has been selected, the associated Web design criteria (aiming to elicit that emotion) are applied by the system replacing the initial neutral interface (without any particular Web design criteria). Music streams can be exploited through the Spotify (http://www.spotify.com) widgets present in the interface. In particular, we designed two versions implemented through two CSS (*Cascading Style Sheets*) for each emotion: a) **the first version**: applied design criteria similar to those in the previous user test [12], though improved based on the collected results, b) **the second option**: similar to the first version but with different small aspects that resulted controversial regarding their emotional effectiveness in the previous user test (such as colours and visual characteristics, blurred or clear text and dimension of images & videos). The design criteria applied consider the main Web design aspects: colours and visual characteristics, page structures & content distribution, presence and type of
multimedia elements, type of navigation and interaction elements, elements for text insertion. In the following we detail how their applications varied depending on the emotion to elicit.

**Web Interface to Elicit Hate.** The widgets are disposed in a confused layout, adding further obstacles during the user interaction (such as some advertisement pop-ups). In addition, the TAB key has been designed to have an unpredictable behaviour (i.e. for each click of the TAB key the focus goes randomly to one element of the interface), instead of sequential. The contents are distributed in just one long page with totally black background, blurred white text and big blurry black & white images. We used textual elements for navigation and interaction. Figure 1 shows the first design of a zoomed extract of the form from the whole long Web page showing the confusing positioning of the form elements and the blurry black & white text and images/videos. Figure 1 also shows a pop-up introducing further difficulties during the user interaction (appearing randomly when the user clicked on some fields) and forcing the user to intervene actively.

<figure><img src="image_3.png" /><figcaption>**Fig. 1.** A zoomed extract from the Web page stimulating hate</figcaption></figure>
In the *second option design* we removed the visual decorations in the background, and reduced also the dimension of images and videos.

**Web Interface to Elicit Anxiety.** The elements of the Web interface include intermittent light effects, distortion and jerky transformations. The Web pages have been enriched with intermitting de-saturated icons, and the content has been distributed over three pages: the *author* page contains the biography, the audio player, the video, the albums section; the *events* page contains the form to buy the virtual tickets; and the * albums * page presents three Spotify players of three famous albums. The page background is totally black with light effects, blurred text in combination with blurred and small de-saturated images. We have used standard navigation and interaction elements with dynamic effects (distortion and shrinkage). Standard textboxes were used to insert data in the form (such as personal data, number of tickets) and one text area was used to insert special requests. Figure 2 shows an extract of the form of the *event page* and a complete view of the *author* page with light effects, distortion and jerky transformations of the elements. With the goal of creating stress and anxiety, in the *events* Web page, the form tilts when the mouse hovers over that area. In addition, we have added a countdown clock showing the remaining time to complete the data insertion. The clock was simply an element to add pressure to the user.

<figure><img src="image_4.png" /><figcaption>Fig. 2. The events page and a miniature of the author page stimulating anxiety</figcaption></figure>
In the *second option design* we just changed the black background colour and the grey colour of the section area to navy blue. We have also removed the visual decorations in the background.

**Web Interface to Elicit Boredom.** The contents of the interface have been distributed in one long page. We have not included images and videos. The background of the page shows rain drops, while the colour of the area containing the contents is totally grey with blurred text. Accepting the suggestions of the users in the survey, with respect to the other interfaces, we have added more text in the biography and some extra required fields in the form. We have used static elements for navigation and interaction. Standard textboxes have been used to insert data (such as personal data, number of tickets, or special requests). Figure 3 shows an extract of the Web page to elicit boredom.

<figure><img src="image_5.png" /><figcaption>**Fig. 3.** A zoomed extract from the Web page stimulating boredom</figcaption></figure>

In the *second option design* we have substituted the grey colour with silver, and changed the rain background with a foggy one. Considering that in the previous user test, many users said that the blurred text (instead of clear) was probably not so determinant in making the interaction boring (many users considered the blurred text as a nuisance), we have applied clear text.

**Web Interface to Elicit Fun.** The Web interface presents unpredictable animations and dynamic effects of the elements, with the goal of surprising positively and
entertaining the user. The users had suggested that dynamic effects of the areas or
elements should not be excessive in number (avoiding them when useless), and they
should facilitate the user interaction. Thus, we applied the dynamic effects only to the
navigation elements and the biography area (zooming at the passage of the mouse
over). The contents have been distributed in three pages: the *author* page containing
the biography, the audio player, the video, the albums section; the *events* page,
containing the form to buy the virtual tickets, and the * albums * page containing three
Spotify players of three famous albums. We have enriched the pages with graphical
decorations and icons emphasizing each section of each page. The background of the
page shows spring flowers, while the areas present a gradient of yellow (remembering
the light and sun) and the text is colourful (maintaining a readable contrast between
the clear text and the background). We have used dynamic elements of navigation
(rotating and enlarging at the passage of the mouse over). In addition, we have used
dynamic elements of interaction in general (the survey reported dynamic effects as an
important key factor independently of the type of interaction elements used). Standard
textboxes have been used to insert data (such as user personal data, number of tickets,
or special requests).

<figure><img src="image_6.png" /><figcaption>**Fig. 4.** The author Web page stimulating fun and a zoomed extract of the navigation elements.</figcaption></figure>
Figure 4 shows the author page with graphical decorations and the rotation of the *events* link in the navigation bar, in combination with the enlargement of the biography section when the mouse is over that area. In the *events* page containing the form to buy tickets, the fields change their colours to facilitate the interaction when the user clicks on them.

In the *second option design* we have substituted the flowers background with a rainbow background. We have changed yellow and green with orange and fuchsia and the graphical decoration of the frame has been reduced, substituting each border of the interface, with just only some flowers (fuchsia instead of green) in the corners.

**Web Interface to Elicit Serenity.** We have designed this Web interface with the goal of minimizing the user effort during the interaction and maintaining the simplicity of the interface in order to allow users to interact easily.

<figure><img src="image_7.png" /><figcaption>**Fig. 5.** A zoomed extract of the TABs, and the author Web page stimulating serenity</figcaption></figure>

The contents have been distributed in three pages accessible through TABs: the *author* page containing the biography, the audio player, the video, the albums section; the *events* page, containing the form to buy the virtual tickets; and the * albums* page, containing three Spotify players of three famous albums. The elements of the pages
are completely static avoiding that dynamic effects could distract the user. The page background shows an open space panorama, while the colours of the area and text are soft aqua and green. Standard textboxes have been used to insert data (such as personal data, number of tickets), and one text area has been used to insert special requests. Figure 5 shows the *author* page where TAB elements in the top-left area of the interface facilitate the navigation. In the *events* page containing the form to buy tickets, we have reduced the required fields to simplify the user effort. Besides, the credit card field has been split into 4 groups (each 4 digits long) in order to facilitate the reading and the insertion. When the user fills in a group of 4 credit card digits, the system moves the cursor automatically to the next group (corresponding to the next 4 digits). We have added a famous logo for secure transaction, so that the user could feel her/himself safe.

In the *second option design* we have substituted the open space mountain panorama background with a sea view, and blue and teal are the new colours applied.

**Web Interface to Elicit Love.** We have designed this Web interface with the goal of attracting the user to frequently interact and use the interface, through the aesthetic in combination with good usability. The contents have been distributed in one long page. Details have been enriched graphically in order to be more appealing, together with graphical icons emphasizing each section of the page. The background of the page shows indefinite and abstract textures, while the gradient of colours of the area containing the contents are red and pink. Considering the critics of users about the too shocking colours previously tested, we have taken into consideration soft colours. We have applied white text maintaining a readable contrast between the clear text and the red background. We have used smooth dynamic hover effects and graphical for the navigation and interaction elements. We have applied standard textboxes to insert data (such as personal data, number of tickets), and one text area to insert special requests. As the interface should elicit serenity, the form aims to simplify the interaction. In particular, the credit card field has been split into 4 groups, each 4 digit long, to facilitate the reading and insertion and required fields for the user's data have been reduced. Figure 6 shows the Web page to elicit love, in which graphics has been enhanced with graphical enrichments and textures.

In the *second option design*, we have taken into account the received critics about the used colours (red and pink), we have decided to test different warm colours (orange and yellow), substituting also the abstract textures of the background. We have also reduced the dimension of the images and videos.
<figure><img src="image_8.png" /><figcaption>Fig. 6. The Web page stimulating love</figcaption></figure>

## 3 The User Test

The purpose of the user test was to understand whether some aspects of Web design can be more important than others to elicit a specific emotion. We recruited 40 users who had not participated to any of our previous user tests, and were divided into two groups of 20 users each: a) the group A tested only the *first design* for the six emotions, b) the group B tested only the *second option design*. For each emotion, we asked each user to select the main three aspects of Web design that they considered important to elicit that emotional state.

### 3.1 Description of the Tasks and the Questionnaire

We performed a between-subjects test in order to avoid that using both versions of the order could influence the emotional perception. For each emotion, each user had to choose one different author or band and perform three tasks: 1) find the birth date of the author or in case of a band, the date of constitution, 2) select the second song from the third album in the *Most Famous Albums* section, 3) fill in a form to buy some virtual tickets (using the assigned imaginary user profile). The three tasks had
respectively the objectives to try out: 1) text reading, 2) navigation, and 3) interaction with the interface elements and their disposition on the layout.

Users had to fill in an online questionnaire. The questionnaire was composed of four parts, asking the users: PART A) some personal information, PART B) a judgment about the emotional effectiveness of the analysed interface, PART C) to choose the main three aspects of Web design from a proposed list for the current emotion, PART D) some suggestions and comments. PART A had to be filled in before starting the user test, and PART D had to be filled in at the end, while PART B and PART C had to be filled in after having performed the three tasks for each interface aiming at eliciting one of the six emotions.

Each user of both groups (A and B) evaluated the emotional effectiveness of the six designs in random order. The users gave their ratings in a scale from 1 to 5 (where the value 1 indicated that the page was very ineffective to elicit the proposed emotion, while value 5 indicated that the page was very effective, and the value 3 represented the neutrality). Besides, each user had to choose the main three aspects of Web design from a proposed list. The list was composed by every Web design feature applied to each one of the six analysed interfaces. The users did not know the Web design features applied to the current evaluated interface, and the execution of the three tasks had the goal to help them to understand concretely if certain Web design characteristics could be really important to stimulate the specific emotion. In details, the list of all Web design characteristics was structured by couples of opposite features or groups of choices and they have been provided to the users together with their meanings as following: **a) confused layout/ordered layout** (indicates if the elements of the interface are misaligned horizontally and/or vertically or well aligned; see Fig. 1), **b) non-semantic/semantic effects** (indicates if the functionalities triggered by the widgets of the interface can accomplish or not their purpose), **c) stressing/reassuring elements** (indicates if the interface allows the user to perceive some risk factors, such as the sense of losing data and money, providing limited time to complete a task, etc. or on the contrary, if the interface supports the user with continuous feedbacks, famous logos, no deadlines, etc.), **d) excessive/moderate information** (indicates if the interface contains too much text and requires too much data to insert, or if the amount of text and data is a proper trade-off), **e) difficult/easy interaction** (indicates if the interface requires excessive mouse movements to navigate, contains selection widgets with too many choices, elements in difficult position to be reached, obstacles such as popup or windows, etc., or on the contrary, if the position of the elements minimize the effort and movements, contains interactive elements for selection with few choices, no pop-up and no open windows appear, etc.), **f) ugly/appealing aesthetic and graphics** (it is a subjective aspect depending on visual complexity and colourfulness [16]), **g) different/used colours** (indicates if different colours (from the applied) are considered better for the emotional effect, or if the chosen colours are appropriate, **h) blurred/clear text & images/videos** (indicates if the blurred text or multimedia can produce appropriate emotional effect comparing with clear text and multimedia), **i) medium-small/medium-big images/videos** (indicates which dimension of the images/videos can affect the emotional state), **j) black & white, de-saturated, coloured images/videos** (indicates
which type of the images/videos can affect the emotional state), **k) absence/presence of images/videos** (indicates if the multimedia elements should be present or not), **l) one page or many pages** (indicates the number of pages for distributing the contents and the elements), **m) different/used interaction and navigation elements** (indicates if the different elements for interacting or navigate (from the applied) are considered emotionally effective, or if the applied elements are appropriate), **o) text edit or text area** (indicates which way for inserting text is more appropriate for the emotional effect).

## 3.2 Results

The test was carried out by 40 users (average completion time per user was about 45 minutes). For sake of simplicity and lack of space, below we report only the first five more important Web aspects perceived by the two groups for each emotion (avoiding minor aspects with few preferences) so they can be easily comparable.

The participants in group A were 11 females and 9 males, with an average age of 26,95 years (ranging from 22 to 51). Five users had a five-year degree, 1 user had a four-year degree, 11 users had a bachelor's degree, while 3 users had an high school diploma. Users were used to surf the Internet (16 users were connected to the Web every day, and 4 users navigated three times per week). The sample considered both experienced and inexperienced users in Web development (at different levels, 8 users had implemented some Web interfaces, while 12 users had little or no knowledge on Web programming).

The participants in group B were 14 females and 6 males, with an average age of 24,6 years (ranging from 19 to 34). Four users had a five-year degree, 12 users had a bachelor's degree, while 4 users had an high school diploma. Users were used to surf the Internet (15 users were connected to the Web every day, 4 users navigated three times per week, and 1 user used the Web one time every fifteen days). The sample considered both experienced and inexperienced users in Web development (at different levels, 8 users had implemented some Web interfaces, while 12 users had little or no knowledge on Web programming).

*Hate*. The average effectiveness has been evaluated 4.75 by group A with a standard deviation 0.71. The average judgment of group B about the effectiveness of this second option Web design to stimulate hate became 4.65 with a standard deviation 0.67. The ranking of the users' preferences regarding the main factors of the two Web design responsible to elicit hate are reported in Table 1.

<table><caption>**Table 1. Ranking of main Web aspects for the two designs eliciting hate.**</caption><thead><tr><th>Main first design aspects</th><th>N°</th><th>Main second option design aspects</th><th>N°</th></tr></thead><tbody><tr><td>Confused layout</td><td>12</td><td>Confused Layout</td><td>11</td></tr><tr><td>Difficult interaction & navigation</td><td>10</td><td>Blurred text & images/video</td><td>11</td></tr><tr><td>Non-semantic effects</td><td>10</td><td>Difficult interaction and navigation</td><td>9</td></tr><tr><td>Stress factors</td><td>8</td><td>Non-semantic effects</td><td>8</td></tr></tbody></table>
<table><tr><td>Blurred text & images/videos</td><td>7</td><td>Stress factors</td><td>6</td></tr></table>

*Anxiety*. The average effectiveness has been evaluated 4.25 by group A with a standard deviation 1.06. The average judgment of group B about the effectiveness of this second option Web design to stimulate anxiety became 4.3 with a standard deviation 0.73. The ranking of the users' preferences regarding the main factors of the two Web design responsible to elicit anxiety are reported in Table 2.

<table><caption>**Table 2. Ranking of main Web aspects for the two designs eliciting anxiety.**</caption><thead><tr><th>Main first design aspects</th><th>N°</th><th>Main second option design aspects</th><th>N°</th></tr></thead><tbody><tr><td>Stress factors</td><td>14</td><td>Stress factors</td><td>17</td></tr><tr><td>Blurred text & images/videos</td><td>12</td><td>Blurred text & images/video</td><td>9</td></tr><tr><td>Dynamic effects</td><td>10</td><td>Dynamic effects</td><td>9</td></tr><tr><td>Confused layout</td><td>6</td><td>Difficult interaction & navigation</td><td>9</td></tr><tr><td>Difficult interaction & navigation</td><td>4</td><td>Confused layout</td><td>6</td></tr></tbody></table>

*Boredom*. Actually, the average effectiveness has been evaluated 3.65 by group A with a standard deviation 1.18. The average judgment of group B about the effectiveness of this second option Web design to stimulate boredom became 3.5 with a standard deviation 1.19. The ranking of the users' preferences regarding the main factors of the two Web design responsible to elicit boredom are reported in Table 3.

<table><caption>**Table 3. Ranking of main Web aspects for the two designs eliciting boredom.**</caption><thead><tr><th>Main first design aspects</th><th>N°</th><th>Main second option design aspects</th><th>N°</th></tr></thead><tbody><tr><td>Excessive info</td><td>14</td><td>Excessive Info</td><td>10</td></tr><tr><td>No effects (static)</td><td>11</td><td>No Effects (Static)</td><td>10</td></tr><tr><td>Absence of images/videos</td><td>9</td><td>Absence of images/videos</td><td>10</td></tr><tr><td>Difficult interaction & navigation</td><td>4</td><td>Used colours</td><td>5</td></tr><tr><td>Used colours, Unpleasant graphic</td><td>3</td><td>Unpleasant graphic</td><td>4</td></tr></tbody></table>

*Fun*. Currently, the average effectiveness has been evaluated by group A 3.33 with a standard deviation 1.08. The average judgment of group B about the effectiveness of this second option Web design to stimulate fun surprisingly improved, now becoming 3.75 with a standard deviation 0.91. The ranking of the users' preferences regarding the main factors of the two Web design responsible to elicit fun are reported in Table 4.

<table><caption>**Table 4. Ranking of main Web aspects for the two designs eliciting fun.**</caption><thead><tr><th>Main first design aspects</th><th>N°</th><th>Main second option design aspects</th><th>N°</th></tr></thead><tbody><tr><td>Appealing graphics & aesthetics</td><td>11</td><td>Dynamic effects</td><td>12</td></tr><tr><td>Dynamic effects</td><td>10</td><td>Appealing graphics & aesthetics</td><td>10</td></tr><tr><td>Colour images/videos</td><td>9</td><td>Colour images/videos</td><td>8</td></tr><tr><td>Ordered layout</td><td>6</td><td>Semantic effects</td><td>8</td></tr></tbody></table>
<table><tr><td>Easy interaction & navigation</td><td>6</td><td>Ordered layout</td><td>7</td></tr></table>

*Serenity.* The average effectiveness has been evaluated by group A 4.2 with a standard deviation 0.61. The average judgment of group B about the effectiveness of this second option Web design to stimulate serenity was 4.0 with a standard deviation 0.72. The ranking of the users' preferences regarding the main factors of the two Web design responsible to elicit serenity are reported in Table 5.

<table><caption>**Table 5. Ranking of main Web aspects for the two designs eliciting serenity.**</caption><thead><tr><th>Main first design aspects</th><th>N°</th><th>Main second option design aspects</th><th>N°</th></tr></thead><tbody><tr><td>Ordered layout</td><td>14</td><td>Ordered layout</td><td>11</td></tr><tr><td>Reassuring elements</td><td>12</td><td>Easy interaction and navigation</td><td>10</td></tr><tr><td>Easy interaction & navigation</td><td>9</td><td>Reassuring elements</td><td>9</td></tr><tr><td>Appealing graphics & aesthetics</td><td>6</td><td>Semantic effects</td><td>7</td></tr><tr><td>Semantic effects, Used colours</td><td>5</td><td>Used colours</td><td>6</td></tr></tbody></table>

*Love.* The users judged the average effectiveness of the interface stimulating love by group A 4.15 with a standard deviation 0.67. The average judgment of group B about the effectiveness of this second option Web design to stimulate love became 3.85 with a standard deviation 1.03. The ranking of the users' preferences regarding the main factors of the two Web design responsible to elicit love are reported in Table 6.

<table><caption>**Table 6. Ranking of main Web aspects for the two designs eliciting love.**</caption><thead><tr><th>Main first design aspects</th><th>N°</th><th>Main second option design aspects</th><th>N°</th></tr></thead><tbody><tr><td>Appealing graphics & aesthetics</td><td>13</td><td>Appealing graphics & aesthetics</td><td>11</td></tr><tr><td>Used colours</td><td>11</td><td>Clear text & images/videos</td><td>9</td></tr><tr><td>Reassuring elements</td><td>7</td><td>Reassuring elements</td><td>8</td></tr><tr><td>Easy interaction & navigation</td><td>6</td><td>Used colours</td><td>6</td></tr><tr><td>Semantic effects</td><td>5</td><td>Easy interaction & navigation</td><td>5</td></tr></tbody></table>

### 3.3 Discussion

Comparing the results of group A and B composed of different users interacting with slightly different designs, we can notice similar indications. In particular, comparing the average judgment for each emotion and the first three main aspects eliciting a specific emotions for group A and B (even if some times in slightly different order) we can find interesting consistent results.

*Hate.* The average judgments about the emotional design impact in the two groups are high effective and similar: 4.75 for group A and 4.65 for group B. This is a clue that the applied characteristics are effective to stimulate hate. In particular, **confused layout, difficult interaction and navigation** are the common main aspects of Web design considered in group A and group B. However, the five common aspects in the first five positions (even if in different order) denote that the **difficulty or obstacles**
**during the interaction are clearly considered predominant to stimulate the emotion hate.** These factors seem to be fundamental for the user to hate the Web interface and leaving it. Dimensions of images and videos do not seem to be relevant.

***Anxiety.*** The average judgments about the emotional impact of the designs in the two groups are still high effective and similar: 4.25 for group A and 4.3 for group B. This is a clue that the applied characteristics are effective to stimulate anxiety. In particular, **stress factors**, **blurred text and images/videos**, and **dynamic effects** are the common main aspects of Web design considered in group A and B. The two groups show five common aspects (even if with slight different number of the user's preferences). Looking at the gap of number of user's preferences, **the stress factors** and **dynamic transformation of the elements are the predominant keys to stimulate anxiety**. The presence of some aspects hindering the interaction, typical of hate, such as blurred text & images or difficult interaction and navigation, in close positions in the scale indicate that there is not a clear distinction between these two emotions.

***Boredom.*** The average judgments about the emotional impact of the designs in the two groups are similar and a little bit over the neutrality: 3.65 for group A and 3.5 for group B. The judgments have decreased comparing to the previous user test, where the average judgment was 4.16 with a standard deviation 0.88. The reason of this lower evaluation is justified by the fact that the first assigned task was not particularly appropriate. In fact, we asked the birth date of the author or the date of constitution of the band, but this information was at very beginning of the text, saving the user to read it entirely. The fact that the user is forced to manage too much information as input (i.e. filling a form) or as output (i.e. reading text) is a clue of becoming bored. Long text seems to be more relevant than blurred or clear text. This is shown also by the fact that the **excessive information**, together with the **absence of dynamic effect** and **absence of images or videos** (in the first three positions) are considered important in both groups A and B. These three aspects indicate that **the presence of too much information without a way of distraction, such as image or videos or dynamic effects, are considered causes of boring**. Considering that there is an important gap in terms of number of preferences after these aspects, this denotes that the other characteristics are considered secondary.

***Fun.*** The average evaluation of the emotional impact of the designs in the two groups are a little bit different: 3.33 for group A and 3.75 (quite high) for group B. The average judgment of the design in group A (where we applied just only useful animations to facilitate the interaction) is similar to the previous user test (average 3.32 with a standard deviation 1.21). On the contrary, the average judgment for group B (where we maintained the same dynamic effects of group A, but we reduced also the graphics decorations) is improved. This denotes that useful dynamic effects for the interaction and proper graphic and aesthetics have considerable importance to stimulate fun, so finding a suitable compromise can be important. **Appealing graphics and aesthetics, dynamic effects and colour images & videos** are considered the main aspects for both group A and B to elicit fun. Looking at the other aspects in different order in Table 4, we notice characteristics (such as ordered layout, easy interaction & navigation and semantic effects) facilitating the interaction.
Obviously, an interface difficult to use cannot stimulate fun, but the results denote that a usable interface is not sufficient, an some extra factors such as unexpected reactions are important. From our research **this emotion is the more critical and difficult comparing with the others because it requires a suitable mix and compromise of different factors**, such as unusual graphics, dynamic effects or animation, and appealing colours.

*Serenity*. The average evaluation of the emotional impact of the designs in the two groups are high and similar: 4.2 for group A and 4.0 for group B. The high and rather homogeneous judgment indicates that the applied characteristics are effective to stimulate serenity. In particular, **ordered layout**, **reassuring elements** and **easy interaction and navigation** are common characteristics to the group A and group B, as an indication of important aspects to stimulate serenity. Looking at the results, **the stimulation of serenity requires minimization of the user's effort and his/her reassurance** (with known logos or elements reducing the fear and risk of losing something).

*Love*. The average judgments of the emotional impact of the designs in the two groups are rather over the neutrality: 4.15 for group A and 3.85 for group B. They are both better than the previous user test where the average judgment was 3.64 with a standard deviation 1.06. The differences of the two groups can indicate that colours have also a certain influence. The **appealing graphics and aesthetics** and **the reassuring elements** are considered important factors to stimulate love, involving the user to use the interface again many times. Looking at the other common aspects in Table 6 of groups A and B, easy interaction and navigation denote that **a good usability is an important factor to stimulate love, but they should be mixed properly with an appealing graphics/aesthetic, and reassuring elements.** Dimensions of images and videos do not seem to be relevant.

There are many studies about the effects of the colours and emotions [16, 17, 18, 19]. However, after this analysis, the fact that the two user groups did not consider the colours as a principal factor of Web design for stimulating a specific emotion, but they rather indicated interaction factors as more important, is not trivial at all. In fact, excluding love emotion where colours seem to have a certain influence, they are not perceived from the users as an important factor of Web design to stimulate a particular emotion (at least for the six emotions we have analysed). We cannot say in this phase that colours have not at all an emotional impact on the user, but colours do not seem to be perceived fundamental as other characteristics of Web design. The interactive Web features perceived by the users as fundamental to elicit each emotional state are intuitive and this is a positive aspect, even if a deeper statistical analysis with larger samples is necessary. In addition, the closer emotions present common design aspects, but with different percentage of perceived importance. This indicates that the emotions are complex and there is not a well definite distinction between similar (but not equal) emotional states.
## 4 Conclusions and Future Work

The goal of this work has been to understand whether some particular factors of Web design are responsible to stimulate a specific emotional state on the users. The collected results are consistent and encouraging, and provide useful indications about the main aspects of Web design, even if further investigation is necessary. The fact that colours are not perceived as a main aspect to elicit emotions is not trivial, and we plan to perform different user tests with wider samples of users for further statistical verifications. We are also considering for the future implementation of the next user tests, to exploit various physiological sensors in order to monitor the emotional changes according to the Web design changes during the interactions. In addition, we are thinking to introduce the support of an eye-tracker to investigate the emotional effects of the elements disposed in different positions, and a neuro-headset measuring the EEG signal to detect when users are focused and concentrated. We plan to involve professional Web designers to learn more about the potential impact of the identified criteria.

The final goal of this research aims to formalize a set of guidelines to design Web applications able to elicit a particular emotional state of the user during the interaction. As a further step, we plan to investigate the design of Web applications capable to monitor and take into account the current emotional state of the user, adapting the Web design to stimulate more positive emotions, for a better user experience.

## References

1. Hassenzahl, M.: The Think and I: Understanding the relationship between user and product. Funology Human Computer Interaction Series, 3, 31-42 (2005).

2. Karlsson, M.: Expressions, Emotions, and Web site design. CoDesign, 3, 1, 75-89 (2007).

3. Kim, J. Lee, J., Choi, D.: Designing Emotionally Evocative Homepages: An Empirical Study of the Quantitative Relations Between Design Factors and Emotional Dimensions. International Journal of Human-Computer Studies, 56, 6, 899-940 (2003).

4. Hartmann, J., Sutcliffe, A., De Angeli, A.: Investigating Attractiveness in Web User Interfaces. In: Proc. CHI 2007, ACM Press (2007).

5. Lindgaard, G., Dudek, C., Sen, D., Sumegi, L., and Noonan, P.: An Exploration of Relations Between Visual Appeal, Trustworthiness and Perceived Usability of Homepages. ACM Transactions on Computer-Human Interaction 18, 1 (2011).

6. Zheng, X., Chakraborty, I., Lin, J., and Rauschenberger, R.: Correlating Low-level Image Statistics with Users' Rapid Aesthetic and Affective Judgments of Web Pages. In Proc. CHI (2009).

7. De Angeli, A., Sutcliffe, A., Hartmann, J.: Interaction, usability and aesthetics: what influences users' preferences? In: Proc. DIS 2006, pp. 271-280, ACM Press (2006).

8. Cyr, D.: Emotion and Web site Design. The Encyclopedia of Human Computer Interaction 2nd Ed, (Chapter 40), Interaction Design Foundation, http://www.interaction-design.org/encyclopedia/emotion_and_website design.html
9. Lindgaard, G., Fernandes, G., Dudek, C., and Brown, J.: Attention Web Designers: You Have 50 Milliseconds to Make a Good First Impression! *Behaviour & Information Technology* 25, 2, 115–126 (2006).

10. Tractinsky, N., Cokhavi, A., Kirschenbaum, M., and Sharfi, T.: Evaluating the Consistency of Immediate Aesthetic Perceptions of Web Pages. *Int. Journal of Human-Computer Studies* 64 (2006)

11. Tuch, A. N., Presslaber, E., Stoecklin, M., Opwis, K., and Bargas-Avila, J.: The Role of Visual Complexity and Prototypically Regarding First Impression of Web sites: Working Towards Understanding Aesthetic Judgments. *International Journal of Human-Computer Studies* 70, 11, 794–811 (2012)

12. Mori, G., Paternò, F., Furci, F.: Design Criteria for Web Applications Adapted to Emotions. In: ICWE 2014. LNCS Vol. 8541, pp. 400-409, Springer (2014)

13. Ekman, P., & Friesen, W.V.: Constants across cultures in the face and emotions. *Journal of Personality and Social Psychology*, 17, 2, 124–129 (1971).

14. Bänziger T., Tran V., Scherer K.R.: The Geneva emotion wheel, *Journal, Social Science Information*, 44, 4, 23-34 (2005)

15. Cowie R., Douglas-Cowie E., Savvidou S, McMahon E.: Feeltrace: an instrument for recording perceived emotion in real time. In: Speech and Emotion 2000. In: *Proceedings of the ISCA workshop*, pp. 19-24, (2000)

16. Reinecke K., Yeh T., Miratrix L., Mardiko R., Zhao Y., Liu J., Gajos K. Z.: Predicting Users' First Impressions of Web site Aesthetics With a Quantification of Perceived Visual Complexity and Colorfulness. In: *Proceedings CHI'13*, pp. 2049-2058. (2013)

17. Cyr D., Head M., Larios H.: Colour appeal in website design within and across cultures: A multi-method evaluation. *Int. Journal of Human-Computer Studies* 68, 1,2, 1–21 (2010)

18. Bonnardel N., Piolat A., Le Bigot L.: The impact of colour on Website appeal and users' cognitive processes. *Displays Journal* 32, 2, 69–80 (2011)

19. Li-Chen Ou, Ronnier Luo M., Woodcock A.: Wrigh A.t, *A Study of Colour Emotion and Colour Preference. Part I: Colour Emotions for Single Colours*. *Color Research & Application* 29, 3, 232–240 (2004)