Advertisement

Design Criteria for Stimulating Emotions in Web Applications

  • Giulio MoriEmail author
  • Fabio Paternò
  • Ferdinando Furci
Conference paper
Part of the Lecture Notes in Computer Science book series (LNCS, volume 9296)

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 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 [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.
Fig. 1.

A zoomed extract from the Web page stimulating 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.

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.
Fig. 2.

The events page and a miniature of the author page stimulating 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.

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.
Fig. 3.

A zoomed extract from the Web page stimulating 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).

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.
Fig. 4.

The author Web page stimulating fun and a zoomed extract of the navigation elements.

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.

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.
Fig. 5.

A zoomed extract of the TABs, and the author Web page stimulating serenity

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.
Fig. 6.

The Web page stimulating 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 [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 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).

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 1.

Ranking of main Web aspects for the two designs eliciting hate.

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 2.

Ranking of main Web aspects for the two designs eliciting anxiety.

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 3.

Ranking of main Web aspects for the two designs eliciting boredom.

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 4.

Ranking of main Web aspects for the two designs eliciting fun.

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 5.

Ranking of main Web aspects for the two designs eliciting serenity.

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 6.

Ranking of main Web aspects for the two designs eliciting love.

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 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.

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 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.

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. 1.
    Hassenzahl, M.: The thing and i: understanding the relationship between user and product. In: Blythe, M., Overbeeke, K., Monk, A., Wright, P. (eds.) Funology. Human Computer Interaction Series, vol. 3, pp. 31–42. Springer, Dordrecht (2005)CrossRefGoogle Scholar
  2. 2.
    Karlsson, M.: Expressions, emotions, and web site design. CoDesign 3(1), 75–89 (2007)CrossRefGoogle Scholar
  3. 3.
    Kim, J., Lee, J., Choi, D.: Designing emotionally evocative homepages: an empirical study of the quantitative relations between design factors and emotional dimensions. Int. J. Hum Comput. Stud. 56(6), 899–940 (2003)CrossRefzbMATHGoogle Scholar
  4. 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
  5. 5.
    Lindgaard, G., Dudek, C., Sen, D., Sumegi, L., Noonan, P.: An exploration of relations between visual appeal, trustworthiness and perceived usability of homepages. ACM Trans. Comput.-Hum. Interact. 18, 1 (2011)CrossRefGoogle Scholar
  6. 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. 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. 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
  9. 9.
    Lindgaard, G., Fernandes, G., Dudek, C., Brown, J.: Attention web designers: you have 50 milliseconds to make a good first impression! Behav. Inf. Technol. 25(2), 115–126 (2006)CrossRefGoogle Scholar
  10. 10.
    Tractinsky, N., Cokhavi, A., Kirschenbaum, M., Sharfi, T.: Evaluating the consistency of immediate aesthetic perceptions of web pages. Int. J. Hum.-Comput. Stud. 64, 1071–1083 (2006)CrossRefGoogle Scholar
  11. 11.
    Tuch, A.N., Presslaber, E., Stoecklin, M., Opwis, K., Bargas-Avila, J.: The Role of visual complexity and prototypically regarding first impression of web sites: working towards understanding aesthetic judgments. Int. J. Hum. Comput. Stud. 70(11), 794–811 (2012)CrossRefGoogle Scholar
  12. 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
  13. 13.
    Ekman, P., Friesen, W.V.: Constants across cultures in the face and emotions. J. Pers. Soc. Psychol. 17(2), 124–129 (1971)CrossRefGoogle Scholar
  14. 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. 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. 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
  17. 17.
    Cyr, D., Head, M., Larios, H.: Colour appeal in website design within and across cultures: a multi-method evaluation. Int. J. Hum.-Comput. Stud. 68(1–2), 1–21 (2010)CrossRefGoogle Scholar
  18. 18.
    Bonnardel, N., Piolat, A., Le Bigot, L.: The impact of colour on website appeal and users’ cognitive processes. Disp. J. 32(2), 69–80 (2011)CrossRefzbMATHGoogle Scholar
  19. 19.
    Ou, L.C., Luo, M.R., Woodcock, A., Wright, A.: A study of colour emotion and colour preference. Part I: colour emotions for single colours. Color Res. Appl. 29(3), 232–240 (2004)CrossRefGoogle Scholar

Copyright information

© IFIP International Federation for Information Processing 2015

Authors and Affiliations

  1. 1.ISTI – CNRPisaItaly

Personalised recommendations