Design Criteria for Stimulating Emotions in Web Applications
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.
KeywordsWeb guidelines Emotions Affective interfaces Adaptable interfaces
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 , or analysis of the emotional appeal of hedonic elements in Web sites (such as colour, images, shapes and photographs) , but none of these studies provides indications about the effectiveness in stimulating specific emotions of the various aspects of Web design. One study  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  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 . 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  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  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  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 Sect. 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 , 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.
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.
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.
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).
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.
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.
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.
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 our previous user test, 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 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 ), (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).
The test was carried out by 40 users (average completion time per user was about 45 min). 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).
Ranking of main Web aspects for the two designs eliciting hate.
Ranking of main Web aspects for the two designs eliciting anxiety.
Ranking of main Web aspects for the two designs eliciting boredom.
Ranking of main Web aspects for the two designs eliciting fun.
Ranking of main Web aspects for the two designs eliciting serenity.
Ranking of main Web aspects for the two designs eliciting love.
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.
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 it 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.
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 it 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.
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.
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.
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).
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.
- 4.Hartmann, J., Sutcliffe, A., De Angeli, A.: Investigating attractiveness in web user interfaces. In: Proceedings of the CHI 2007. ACM Press (2007)Google Scholar
- 6.Zheng, X., Chakraborty, I., Lin, J., Rauschenberger, R.: Correlating low-level image statistics with users’ rapid aesthetic and affective judgments of web pages. In: Proceedings of the CHI (2009)Google Scholar
- 7.De Angeli, A., Sutcliffe, A., Hartmann, J.: Interaction, usability and aesthetics: what influences users’ preferences? In: Proceedings of the DIS 2006, pp. 271–280, ACM Press (2006)Google Scholar
- 8.Cyr, D.: Emotion and web site design. In: Soegaard, M., Dam, R.F. (eds.) The Encyclopedia of Human Computer Interaction, 2nd edn., (Chapter 40), Interaction Design Foundation. http://www.interaction-design.org/encyclopedia/emotion_and_website_design.html
- 12.Mori, G., Paternó, F., Furci, F.: Design criteria for web applications adapted to emotions. In: Casteleyn, S., Rossi, G., Winckler, M. (eds.) ICWE 2014. LNCS, vol. 8541, pp. 400–409. Springer, Heidelberg (2014)Google Scholar
- 14.Bànziger, T., Tran, V., Scherer, K.R.: The Geneva emotion wheel. J. Soc. Sci. Inf. 44(4), 23–34 (2005)Google Scholar
- 15.Cowie R., Douglas-Cowie E., Savvidou S, McMahon E.: ‘FEELTRACE’: an instrument for recording perceived emotion in real time. In: Proceedings of the ISCA workshop on Speech and Emotion pp. 19–24 (2000)Google Scholar
- 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 of the CHI 2013, pp. 2049–2058 (2013)Google Scholar