Skip to main content
SpringerLink
Log in

Understanding the transitions between web interfaces designed to stimulate specific emotions

  • Long Paper
  • Published:
Universal Access in the Information Society Aims and scope Submit manuscript

Abstract

The main goal of this work is to understand how to obtain effective transitions when changing the Web user interfaces from one that stimulates negative affective states to one eliciting more positive emotions. The objective is to improve User eXperience (UX) and usability during the interaction. The transitions applied during the user interface adaptation seek to avoid undesired user disorientation, which can be a consequence of the change. A user study with 40 participants tested three types of transition solutions on a Web application: immediate (changes are applied abruptly all together), overview (changes are first previewed through a small window) and gradual (changes are progressively displayed directly on the interface). The overview and gradual transitions have been designed in such a way as to consider the design criteria used to stimulate specific emotions through the initial and final Web user interfaces. We report and discuss the results of the user test, which, amongst other findings, confirmed that users prefer the overview and gradual transitions.

This is a preview of subscription content, log in via an institution to check access.

Access this article

Log in via an institution

Price excludes VAT (USA)
Tax calculation will be finalised during checkout.

Instant access to the full article PDF.

Institutional subscriptions

Fig. 1
Fig. 2
Fig. 3
Fig. 4
Fig. 5
Fig. 6
Fig. 7
Fig. 8
Fig. 9
Fig. 10
Fig. 11
Fig. 12

Similar content being viewed by others

References

  1. Bànziger, T., Tran, V., Klaus, S.R.: The Geneva emotion wheel. J. Soc. Sci. Inf. 44(4), 23–34 (2005)

    Google Scholar 

  2. Baudisch, P., Tan, D., Collomb, M., Robbins, D., Hinckley, K., Agrawala, M., Zhao, S., Ramos, G.: Phosphor: explaining transitions in the user interface using afterglow effects. In: Proceedings of the Symposium on User Interface Software Technology (UIST 2006), pp. 169–178 (2006). https://doi.org/10.1145/1166253.1166280

  3. Bladh, T., David, C.A., Kljun, M.: The effect of animated transitions on user navigation in 3D tree-maps. In: Proceedings of the Information Visualization (InfoVis 2005), pp. 297–305 (2005). https://doi.org/10.1109/IV.2005.122

  4. Bederson, B., Boltman, A.: Does animation help users build mental maps of spatial information? In: Proceedings of the Information Visualization 1999, pp. 28–35 (1999). https://doi.org/10.1109/INFVIS.1999.801854

  5. Chevalier, F., Dragicevic, P., Bezerianos, A., Fekete, J.-D.: Using text animated transitions to support navigation in document histories. In: Proceedings of the Human Aspects in Computing Systems (CHI 2010), pp. 683–692 (2010). https://doi.org/10.1145/1753326.1753427

  6. 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 2000, pp. 19–24 (2000) 

  7. Cyr, D.: Emotion and web site design. 2014. In: Chapter 40: The Encyclopedia of Human Computer Interaction, Interaction Design Foundation, 2nd edn. http://www.interaction-design.org/encyclopedia/emotion_and_website_design.html

  8. Desmet, P., Hekkert, P.: Framework of product experience. Int. J. Des. 1(1), 57–66 (2007)

    Google Scholar 

  9. Dessart, C.-E., Motti, G.V., Vanderdonckt, J.: Animated transitions between user interface views. In: Proceedings of the International Working Conference on Advanced Visual Interfaces (AVI’2012), pp. 341–348 (2012). https://doi.org/10.1145/2254556.2254623

  10. Dessart, C.-E., Motti, G.V., Vanderdonckt, J.: Showing user interface adaptivity by animated transitions. In: Proceedings of Symposium on Engineering Interactive Computing Systems (EICS 2011), pp. 95–104 (2011). https://doi.org/10.1145/1996461.1996501

  11. Diefenbach, S., Hassenzahl, M.: The dilemma of hedonic—appreciated, but hard to justify. Interact. Comput. 23(5), 461–472 (2001)

    Article  Google Scholar 

  12. Dittmar, A., Forbrig, P.: Some thoughts about the horizontal development of software engineers. In: Proocedings of the 2nd Human-Centered Software Engineering (HCSE 2008), pp. 213–229 (2008). https://doi.org/10.1007/978-3-540-85992-5_19

  13. Dragicevic, P., Bezerianos, A., Javed, W., Elmqvist, N., Fekete, J.-D.: Temporal distortion for animated transitions. In: Proceedings of the Human Factors in Computing Systems (CHI 2011), pp. 2009–2018 (2011). https://doi.org/10.1145/1978942.1979233

  14. Ekman, P., Friesen, W.V.: Constants across cultures in the face and emotions. J. Pers. Soc. Psychol. 17(2), 124–129 (1971)

    Article  Google Scholar 

  15. Forbrig, P.: Continuous software engineering with special emphasis on continuous business-process modeling and human-centered design. In: Proceedings of the 8th International Conference on Subject-oriented Business Process Management (S-BPM 2016), article no 11 (2016). https://doi.org/10.1145/2882879.2882895

  16. Gilbertson, S.: Debunking the myth of the page fold in web design. http://www.webmonkey.com/2009/10/debunking_the_myth_of_the_page_fold_in_web_design/ (2009). Accessed 16 Oct 2009

  17. Gonzalez, C.: Does animation in user interfaces improve decision making? In: Proceedings of the Human Aspects in Computing Systems (CHI 1996), pp. 27–34 (1996). https://doi.org/10.1145/238386.238396

  18. Hartmann, J., Sutcliffe, A., De Angeli, A.: Investigating attractiveness in web user interfaces. In: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI 2007), pp. 387–396 (2007). https://doi.org/10.1145/1240624.1240687

  19. Hassenzahl, M.: The think and i: understanding the relationship between user and product. In: Funology, From Usability to Enjoyment, Human Computer Interaction Series, vol. 3, pp. 31–42. Kluwer Academic Publishers, Norwell (2005)

    Google Scholar 

  20. Heer, J., Robertson, G.: Animated transitions in statistical data graphics. IEEE Trans. Vis. Comput. Graph. 13(6), 1240–1247 (2007)

    Article  Google Scholar 

  21. Hoppenbrouwers, S.: The collaboration perspective on continuous development. In: Joint Proceedings of REFSQ-2018 Workshops, Doctoral Symposium, Live Studies Track, and Poster Trackco-located with the 23rd International Conference on Requirements Engineering: Foundation for Software Quality (REFSQ 2018) (2018)

  22. Huhtala, J., Sarjanoja, A.-H., Mäntyjärvi, J., Isomursu, M., Häkkilä, J.: Animated UI transitions and perception of time: a user study on animated effects on a mobile screen. In: Proceedings of the Human Factors in Computing Systems (CHI’2010), pp. 1339–1342 (2010). https://doi.org/10.1145/1753326.1753527

  23. International Organization for Standardization (ISO): 9241-11.: Ergonomic requirements for office work with visual display terminals (VDTs)—part 11: guidance on usability UU Department Information Technology. http://www.it.uu.se/edu/course/homepage/acsd/vt09/ISO9241part11.pdf (1998)

  24. Karlsson, M.: Expressions, emotions, and website design. CoDesign 3(1), 75–89 (2007)

    Article  MathSciNet  Google Scholar 

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

    Article  Google Scholar 

  26. Kuniavsky, M.: Smart Things: Ubiquitous Computing User Experience Design, 1st edn. Morgan Kaufmann, Burlington (2014)

    Google Scholar 

  27. Lindgaard, G., Fernandes, G., Dudek, C., Judith, B.M.: Attention web designers: you have 50 milliseconds to make a good first impression! Behav. Inf. Technol. 25(2), 115–126 (2006)

    Article  Google Scholar 

  28. McCarthy, C.: To scroll or not to scroll: the age-old question. In: Proceedings Computing and Information Technology Research and Education New Zeland, pp. 198–199 (2013)

  29. Mori, G., Paternò, F., Furci, F.: Design criteria for stimulating emotions in web applications. In: Proceedings of the International Conference on Human-Computer Interaction (INTERACT 2017), pp. 165–182 (2015). https://doi.org/10.1007/978-3-319-22701-6_12

    Chapter  Google Scholar 

  30. Mori, G., Paternó, F., Furci, F.: Design criteria for web applications adapted to emotions. In: Proceedings of the International Conference on Web Engineering (ICWE 2014), pp. 400–409 (2014). https://doi.org/10.1007/978-3-319-08245-5_25

    Google Scholar 

  31. Nielsen, J.: Designing Web Usability: The Practice of Simplicity. New Riders Publishing, Thousand Oaks (2000)

    Google Scholar 

  32. Nielsen, J., Loranger, H.: Prioritizing Web Usability. New Riders Publishing, Thousand Oaks (2006)

    Google Scholar 

  33. Nielsen, J.: Scrolling and Attention. Nielsen Norman Group. http://www.nngroup.com/articles/scrolling-and-attention/ (2010). Accessed 28 Aug 2013

  34. Nielsen, J.: Usability Engineering. Morgan Kaufmann Publishers Inc., San Francisco (1993)

    Book  Google Scholar 

  35. Sanchez, C.A., Wiley, J.: To scroll or not to scroll: scrolling, working memory capacity, and comprehending complex texts. J. Hum. Factors Ergon. Soc. 51(5), 730–738 (2009)

    Article  Google Scholar 

  36. Scherer, K.R.: What are emotions? And how can they be measured? Soc. Sci. Inf. 44(4), 695–729 (2005)

    Article  Google Scholar 

  37. Schwartz, T., Yavilevich, A.: 2006. Unfolding the fold. Web Analytics & Usability Blog website. http://blog.clicktale.com/2006/12/23/unfolding-the-fold (2006). Accessed 29 Aug 2013

  38. Stasko, J.T.: Animation in user interfaces: principles and techniques. In: Bass, L., Dewan, P., (eds.) Trends in Software, Special issue on User Interface Software, pp. 81–101 (1993)

  39. Tuch, A.N., Presslaber, E.E., Stoecklin, M., Opwis, K., Bargas-Avila, J.A.: 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)

    Article  Google Scholar 

  40. User Experience. International Organization for Standardization.: (2010). Ergonomics of human system interaction—part 210: human-centered design for interactive systems (formerly known as 13407). ISO F ± DIS 9241-210: 2010. https://www.iso.org/obp/ui/#iso:std:iso:9241:-210:ed-1:v1:en

  41. Voss, K.E., Spangenberg, E.R., Grohmann, B.: Measuring the hedonic and utilitarian dimensions of consumer attitude. J. Mark. Res. 40(3), 310–320 (2003)

    Article  Google Scholar 

  42. Watson, D., Clark, A.L.: Development and validation of brief measures of positive and negative affect: the PANAS Scales. J. Pers. Soc. Psychol. 54(6), 1063–1070 (1988)

    Article  Google Scholar 

  43. Zheng, X.S., Chakraborty, I., Lin, J.J.W., Rauschenberger, R.: Correlating low-level image statistics with users’ rapid aesthetic and affective judgments of web pages. In: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems CHI (2009), pp. 1–10 (2009). https://doi.org/10.1145/1518701.1518703

Download references

Acknowledgements

We thank Luca Bastiani (IFC-CNR of Pisa) for his support in statistical analysis.

Author information

Authors and Affiliations

  1. ISTI-CNR, Pisa, Italy

    Michela Donati, Giulio Mori & Fabio Paternò

Authors
  1. Michela Donati
    View author publications

    You can also search for this author in PubMed Google Scholar

  2. Giulio Mori
    View author publications

    You can also search for this author in PubMed Google Scholar

  3. Fabio Paternò
    View author publications

    You can also search for this author in PubMed Google Scholar

Corresponding author

Correspondence to Giulio Mori.

Additional information

Publisher’s Note

Springer Nature remains neutral with regard to jurisdictional claims in published maps and institutional affiliations.

Appendix

Appendix

The experience with many people involved in the user tests of previous studies [29, 30] has convinced us to use a specific questionnaire, instead of making use of standard questionnaire such as the system usability scale (SUS), the user experience questionnaire (UEQ). Considering the users had to evaluate three different versions of Web transitions and answering other questions related to other aspects (such as personal information, evaluations of some specific characteristics, suggestions, etc.), instead of filling in additional long questionnaires for each transition version to extract ratings for its usability (through i.e. the SUS), its User Experience (through i.e. the UEQ) or its work needed load (through i.e. the NASA-TLX), we preferred to lighten the effort of each participant with a preliminary explanation on the aspects we wanted to investigate.

Phase 1: Conversational explanations with user

This phase has the goal to clarify with simple words which aspects and characteristics the user has to evaluate during the interaction, in particular paying attention to two main issues:

Features A (characteristics typical of usability): if Web design changes are not disorienting after the transformation, if the new interface is maintained ease and intuitive to use, if the user perceives continuity of interaction with the new interface after the transformation;

Features B (all characteristics typical of User Experience): if the user perceives the new interface as more attractive after the transformation, if the continuity of interaction during and after the transformation is pleasant, if the new interface makes the user feel confident or at ease.

Users received a paper with these indications so they could have clear in mind the goals of their evaluations.

Phase 2: User test

Phase 3: Questionnaire

Personal information (Section 1 of the Questionnaire)

figure a

Evaluation of transitions (Section 2 of the Questionnaire)

figure b

Suggestions for improvements (Section 3 of the Questionnaire)

figure c

Rights and permissions

Reprints and permissions

About this article

Check for updates. Verify currency and authenticity via CrossMark

Cite this article

Donati, M., Mori, G. & Paternò, F. Understanding the transitions between web interfaces designed to stimulate specific emotions. Univ Access Inf Soc 19, 391–407 (2020). https://doi.org/10.1007/s10209-019-00649-y

Download citation

  • Published:

  • Issue Date:

  • DOI: https://doi.org/10.1007/s10209-019-00649-y

Keywords

Search

Navigation