A Tool-Supported Approach to Adapt Web User Interfaces Considering the Emotional State of the User


The field of Human-Computer Interaction aims at developing computational systems that place the user at the center of the their development, so he/she can have the best experience when interact with the final solution. When it was acknowledged that emotions affect the relation of the individual with what surrounds him/her, scholars began to measure these emotions based on instruments that had been developed over the years. It should be emphasized that emotions can be seen as a composition of five components – physiological reactions, subjective feeling, motor expression, cognitive appraisals and behavioural tendencies. It is believed, therefore, that evaluating more than one component could bring results with greater correctness. Although some studies already measure the user’s emotional state to promote the adaptation of user interfaces and promote a better interaction experience, few worry about leading the user to achieve a desired emotional state. This work presents a new version of UIFlex [10], UIFlex 2.0. The previous version is presented as a Google Chrome plugin and it is responsible for providing interface adaptations to improve the accessibility of web pages. To do so, authors created rules of adaptation in JSON (JavaScript Object Notation) format that “injected” code into the web pages. The new proposed version brings together two major changes: (1) the architecture of the solution, which is now based on the MAPE-K model (Monitor-Analyse-Plan-Execute over a shared Knowledge) [20]; (2) new user interface adaptation rules in order to provide color change in it according to theoretical studies published previously. Finally, a double blind experiment was conducted with 44 users in which two tasks were proposed – reading and transcript – on pages with the plugin enabled. Participants of the experimental group had access to UIFlex 2.0 as participants of the control group used UIFlex 3.0, which did not perform any adaptation. Both groups had the majority of participants reaching the desired emotional state – as can be seen in the generated incidence graphs. In addition, the Chi-Square statistical test was applied, which denied the alternative hypothesis. Thus, it is suggested that new rules be developed so that there are a greater number of changes to interface elements.

Palavras-chave: emotion, adaptation, MAPE-K


Tatiana Silva de Alencar. 2014. Who Am I? uma arquitetura para a coleta, modelagem e oferta de perfis de usuários para a computação ubíqua. (2014).

Renata Germano Bianchi. 2016. Studies on emotional aspects in the design of user interfaces. Master’s thesis. Universidade Federal de São Carlos.

Renata Germano Bianchi and Vânia Paula de Almeida Neris. 2015. Which color should i pick? a study on colors and emotions in human-computer interaction. In Proceedings of the 14th Brazilian Symposium on Human Factors in Computing Systems. 1–10.

Danilo Camargo Bueno and Luciana Martinez Zaina. 2017. HyMobWeb: A hybrid adaptation of context-sensitive Web interfaces with multimodality support in mobile devices. Journal on Interactive Systems 8, 2 (2017).

Romulo Fagundes Cantanhede and CE Silva. 2014. Uma proposta de sistema de IoT para monitoramento de ambiente hospitalar. Anais da VII Escola de Computação e suas Aplicações-Epoca (2014).

Henrique Castello Branco Lopes Cardoso. 2019. Human/Machine Interaction design in Cyber-physical production systems. Master’s thesis. Universisdade do Porto.

Dianne Cyr. 2013. The Encyclopedia of Human-Computer Interaction. Human Computer Interaction-emotion and website design (2013).

Rosana Cordovil da Silva and Renato José Sassi. 2019. Evolução da computação autonômica e adoção do modelo MAPE-K: uma pesquisa bibliográfica. Evolução da computação autonômica e adoção do modelo MAPE-K: uma pesquisa bibliográfica (2019), 1–388.

Tatiana Silva de Alencar and Vânia Paula de Almeida Neris. 2014. Towards design guidelines for software applications that collect user data for ubicomp. In Proceedings of the 13th Brazilian Symposium on Human Factors in Computing Systems. 246–254.

Mailson de Queiroz Proença and Vânia Paula de Almeida Neris. 2017. UIFlex: a meta-design solution for the web. In Proceedings of the XVI Brazilian Symposium on Human Factors in Computing Systems. 1–10.

Isaque E De Souza. 2019. Classificação de sinais fisiológicos para inferência do estado emocional de usuários. Master’s thesis. Universidade Federal de São Carlos (UFSCar).

Michela Donati, Giulio Mori, and Fabio Paternò. 2020. Understanding the transitions between web interfaces designed to stimulate specific emotions. Universal Access in the Information Society 19, 2 (2020), 391–407.

Ralf Dörner, Stefan Göbel, Wolfgang Effelsberg, and Josef Wiemeyer. 2016. Serious games. Springer.

Lior Fink and Daniele Papismedov. 2022. On the Same Page? What Users Benefit from a Desktop View on Mobile Devices. Information Systems Research (2022).

Julián Andrés Galindo, Sophie Dupuy-Chessa, and Éric Céret. 2017. Toward a UI adaptation approach driven by user emotions. In ACHI’2017 - The Tenth International Conference on Advances in Computer-Human Interactions. 12–17.

Alan Hevner and Samir Chatterjee. 2010. Design science research in information systems. In Design research in information systems. Springer, 9–22.

Terri L Holtze. 2006. The web designer’s guide to color research. Internet reference services quarterly 11, 1 (2006), 87–101.

Markus C Huebscher and Julie A McCann. 2008. A survey of autonomic computing—degrees, models, and applications. ACM Computing Surveys (CSUR) 40, 3 (2008), 1–28.

Nan Jiang, Xinyu Feng, Hui Liu, and Juan Liu. 2008. Emotional design of web page. In 2008 9th International Conference on Computer-Aided Industrial Design and Conceptual Design. IEEE, 91–95.

Jeffrey Kephart, J Kephart, D Chess, Craig Boutilier, Rajarshi Das, Jeffrey O Kephart, and William E Walsh. 2003. An architectural blueprint for autonomic computing. IBM White paper (2003), 2–10.

Talia Lavie and Joachim Meyer. 2010. Benefits and costs of adaptive user interfaces. International Journal of Human-Computer Studies 68, 8 (2010), 508–524.

Youn-kyung Lim, Justin Donaldson, Heekyoung Jung, Breanne Kunz, David Royer, Shruti Ramalingam, Sindhia Thirumaran, and Erik Stolterman. 2008. Emotional experience and interaction design. In Affect and emotion in human-computer interaction. Springer, 116–129.

Nikolaos Makris and MCJD van Eekelen. 2016. Creating adaptable and adaptive user interface implementations in model driven developed software.

Marco Manca, Fabio Paternò, Carmen Santoro, and Lucio Davide Spano. 2013. Generation of multi-device adaptive multimodal web applications. In International Conference on Mobile Web and Information Systems. Springer, 218–232.

Giulio Mori, Fabio Paternò, and Ferdinando Furci. 2015. Design criteria for stimulating emotions in web applications. In IFIP Conference on Human-Computer Interaction. Springer, 165–182.

Donald A Norman. 2004. Emotional design: Why we love (or hate) everyday things. Basic Civitas Books.

Donald A Norman and Andrew Ortony. 2003. Designers and users: Two perspectives on emotion and design. In Symposium on foundations of interaction design. 1–13.

Nilanka Rathnayake, Dulani Meedeniya, Indika Perera, and Anuradha Welivita. 2019. A framework for adaptive user interface generation based on user behavioural patterns. In 2019 Moratuwa Engineering Research Conference (MERCon). IEEE, 698–703.

Wellison Raul Mariz SANTOS. 2020. Adaptação de aplicações baseadas em microsserviços usando aprendizagem de máquina. Master’s thesis. Universidade Federal de Pernambuco.

Klaus R Scherer. 2001. Appraisal processes in emotion: theory, method, research. Appraisal considered as a process of multilevel sequential checking 4, 4 (2001), 92–120.

Klaus R Scherer. 2004. Feelings integrate the central representation of appraisal-driven response organization in emotion. In Feelings and emotions: The Amsterdam symposium. 136–157.

Klaus R Scherer. 2005. What are emotions? And how can they be measured?Social science information 44, 4 (2005), 695–729.

Klaus R Scherer 1984. On the nature and function of emotion: A component process approach. Approaches to emotion 2293, 317 (1984), 31.

Lasse Schölkopf, Maria-Magdalena Wolf, Veronika Hutmann, and Frank Diermeyer. 2021. Conception, Development and First Evaluation of a Context-Adaptive User Interface for Commercial Vehicles. In 13th International Conference on Automotive User Interfaces and Interactive Vehicular Applications. 21–25.

Kwang-Kyu Seo, Sangwon Lee, Byung Do Chung, and Changsoon Park. 2015. Users’ emotional valence, arousal, and engagement based on perceived usability and aesthetics for web sites. International Journal of Human-Computer Interaction 31, 1 (2015), 72–87.

Letícia G Zacano da Silva, Patrícia Deud Guimarães, Luciana Oliveira de Souza Gomes, and Vânia Paula de Almeida Neris. 2020. A comparative study of users’ subjective feeling collection instruments. In Proceedings of the 19th Brazilian Symposium on Human Factors in Computing Systems. 1–10.

Christian Sonnenberg. 2020. Mobile media usability: Evaluation of methods for adaptation and user engagement. Journal of Media Management and Entrepreneurship (JMME) 2, 1 (2020), 86–107.

Rogério Aparecido Campanari Xavier. 2013. Uma abordagem híbrida para a avaliação da experiência emocional de usuários. Master’s thesis. Universidade Federal de São Carlos.

Rogério Aparecido Campanari Xavier and Vânia Paula de Almeida Neris. 2012. A Hybrid Evaluation Approach for the Emotional State of Information Systems Users. In ICEIS (3). 45–53.

Le Zhang, Qing-Xing Qu, Wen-Yu Chao, and Vincent G Duffy. 2020. Investigating the combination of adaptive uis and adaptable uis for improving usability and user performance of complex uis. International Journal of Human–Computer Interaction 36, 1 (2020), 82–94.
DEUD GUIMARÃES, Patrícia; DE ALMEIDA NERIS, Vânia Paula. A Tool-Supported Approach to Adapt Web User Interfaces Considering the Emotional State of the User. In: SIMPÓSIO BRASILEIRO SOBRE FATORES HUMANOS EM SISTEMAS COMPUTACIONAIS (IHC), 22. , 2023, Maceió/AL. Anais [...]. Porto Alegre: Sociedade Brasileira de Computação, 2023 .