A Meta-Synthesis of Color Application in User Interface Design for Educational Websites

Document Type : Review Article

Authors

• Hadiseh Heidari ¹
• Raheleh Karimian ²
• Yaghoub Norouzi ³

¹ Ph.D Student in Knowledge and Information Science, Alzahra University, Tehran, Iran.

² Ph.D Student in Knowledge and Information Science, Qom University, Qom, Iran.

³ Professor of Knowledge and information science, Qom University, Iran.

10.22067/infosci.2024.86371.1193

Abstract

Introduction: Color is widely regarded as a fundamental component in user interface design, serving as a critical tool for communication and user engagement in websites. Recent advancements in technology have further accelerated the growth of digital education, enabling learners to access a diverse array of services through numerous online platforms, effectively addressing the needs of both students and academics. A thorough exploration of color as a key visual element in user interface design—and its relationship with education—can significantly assist designers in achieving their objectives during the design process. Designing a webpage requires a deep understanding of the target audience's characteristics, emphasizing the importance of employing visually appropriate elements that enhance user comprehension and recognition. This study aims to examine the background, components, and applications of color as a design element in educational website user interfaces. By conducting a comprehensive investigation into existing research on the integration of color within the user interface design of educational websites, this study seeks to offer valuable insights to both scholars and practitioners in the field. The primary objective is to analyze the role of color in educational website user interface design using a meta-synthesis approach.
Methodology: This study utilized a qualitative meta-synthesis approach for data collection, following the seven-stage model proposed by Sandelowski and Barroso (2007). This method involves a systematic review process comprising the following stages: formulation of research questions, systematic literature review, identification and selection of relevant sources, data extraction, analysis and synthesis of findings, quality assessment, and presentation of results. The statistical population included articles and theses focused on the user interface of educational websites. Persian-language documents were selected from the years 1390 to 1402 (Hijri Shamsi calendar), while English-language documents spanned the period from 1984 to 2023. These materials were retrieved from reputable scientific databases, including Scopus, Web of Science, Ganj, Magiran, Noormagz, Elmnet, and Civilica. The study employed specialized keywords relevant to the field, and EndNote software was used to systematically organize the retrieved articles. The researcher conducted a comprehensive review of the studies, removing duplicate entries and categorizing them based on their relevance to the research question. This process involved applying predetermined inclusion criteria and conducting a qualitative assessment of the texts. Initially, bibliographic information, including the title, author, year, topic, and abstract, was entered into EndNote. A thorough review of the titles was then performed to exclude irrelevant works. Out of an initial pool of 184 articles and theses, 27 were selected for in-depth analysis. Thematic content analysis was subsequently employed to code and categorize the findings. Data from each selected article, including the title, author(s), publication year, and research findings, were systematically classified. Codes were then extracted from the articles to facilitate the synthesis and interpretation of the data.
Findings: A review of scientific studies reveals that most research on the use of color in website user interface design has employed experimental, survey-based, systematic, or qualitative methodologies, with questionnaires serving as the predominant data collection tool. An analysis of the literature on color application in the user interfaces of educational websites identified three primary thematic categories and eighteen constituent elements. The main thematic categories were as follows: The Contextualization of Color Implementation: Exploring the integration of color within the user interface design of educational websites; The Application of Color Principles: Investigating the use of color principles in the design of user interfaces for educational websites; The Comprehensive Exploration of Color’s Role: Examining the overall impact of color in the user interface design of educational websites. These categories encompassed concepts such as the application of color across various types of websites, the influence of color on user behavior and perception, and the effect of color on user engagement and the visual appeal of websites.  
Discussion & conclusion: Color is widely recognized as a powerful and influential element in website design, often regarded as one of its most critical aspects. As such, the selection of a website's color palette requires considerable time and research. Colors have the capacity to evoke emotional responses in users, thereby encouraging prolonged engagement with a site. Each color uniquely influences user perception and behavior, and understanding these potential reactions enables designers to effectively convey messages and guide users toward desired actions. The design of user interfaces for educational websites is a fundamental resource for a global audience. By employing appropriate and aesthetically pleasing design principles, these platforms can play a vital role in helping individuals acquire new skills, expand their knowledge, and achieve educational qualifications. To best serve their users, educational websites must adhere to specific practical design considerations. The study revealed that consistent findings regarding the role of color in user interface design are not universally observed across all websites. Consequently, the contextual analysis within the research emphasized areas such as commercial, news, and entertainment websites, which are less frequently explored in relation to this topic. In examining the applications of color, researchers have highlighted its influence on website attractiveness and aesthetic appeal, emphasizing its importance in enhancing the user experience. Studies have also explored the role of color in addressing user needs as perceived by designers, its impact on cognitive processing, its cultural interpretations, and the relationship between color and cultural attention.

Keywords

• User Interface. Interactive Environment
• Website Design
• Color Analysis
• Educational Websites

---

References

Bianchi, R. G., & Neris, V. P. D. A. (2015). Which color should I pick? a study on colors and emotions in human-computer interaction. doi:https://doi.org/10.1145/3148456.3148464

Bleicher, S. (2023). Contemporary Color: Theory and Use (r. Edition Ed.): Cengage Learning. doi:https://doi.org/10.4324/9781003242741

Bonnardel, N., Piolat, A., & Le Bigot, L. (2011). The impact of colour on Website appeal and users' cognitive processes. Displays, 32(2), 69-80. doi: https://doi.org/10.1016/j.displa.2010.12.002

Cao, Y. Q., Proctor, R. W., Ding, Y., Duffy, V. G., Zhang, Y., & Zhang, X. F. (2021). Influences of Color Salience and Location of Website Links on User Performance and Affective Experience with a Mobile Web Directory. International Journal of Human-Computer Interaction, 37(6), 547-559. doi: https://doi.org/10.1080/10447318.2020.1838188

Casas, M. C., & Chinoperekweyi, J. (2019). Color psychology and its influence on consumer buying behavior: A case of apparel products. Saudi Journal of Business and Management Studies, 4(5), 441-456. doi: https://doi.org/10.21276/sjbms.2019.4.5.8

Çetin, E., & Özdemir, S. (2013). A Study on an Educational Website's Usability. ProcediaSocial and Behavioral Sciences, 83, 683-688. doi:https://doi.org/10.1016/j.sbspro.2013.06.129

Chan, I. C. C., Law, R., Fong, L. H. N., & Zhong, L. (2021). Website design in tourism and hospitality: A multilevel review. International Journal of Tourism Research, 23(5), 805-815. doi:https://doi.org/10.1002/jtr.2443

Cyr, D. (2008). Modeling web site design across cultures: relationships to trust, satisfaction, and e-loyalty. Journal of management information systems, 47-72. doi:https://doi.org/10.2753/MIS0742-1222240402

Cyr, D., Head, M., & Larios, H. (2010). Colour appeal in website design within and across cultures: A multi-method evaluation. International Journal of Human-Computer Studies, 68(1-2), 1-21. doi: https://doi.org/10.1016/j.ijhcs.2009.08.005

Deng, L., Zhang, Z., Zhou, F., & Liu, R. . (2022). Effects of app icon border form and interface background color saturation on user visual experience and search performance. Advances in Multimedia, 1-12. doi:https://doi.org/10.1155/2022/1166656

Fang, X., Chang, D., & Zhang, Z. . (2022). Effects of Different Interface Color Modes and Textbox Design on Users’ Reading Efficiency and Accuracy. Paper presented at the In 2022 IEEE International Conference on Industrial Engineering and Engineering Management (IEEM), doi:https://doi.org/10.1109/IEEM55944.2022.9989887

Fogg, B. J., Soohoo, C., Danielson, D. R., Marable, L., Stanford, J., & Tauber, E. R. (2003). How do users evaluate the credibility of Web sites? A study with over 2,500 participants. Paper presented at the Proceedings of the 2003 conference on Designing for user experiences. doi: https://doi.org/10.1145/997078.997097

Gallud, J. A., Tesoriero, R., & Penichet, V. M. R. (2011). Distributed User Interfaces: Designing Interfaces for the Distributed Ecosystem: Springer London. https://doi.org/10.1007/978-1-4471-2271-5

Golubović, G., Dedijer, S., Juretić, I., & Đurđević, S. (2022). COMPARATIVE ANALYSIS OF THE INFLUENCE OF COLOUR ON CUSTOMERS’ TRUST TOWARDS WEBSITES IN THE FIELDS OF ONLINE BANKING AND CRYPTOCURRENCY TRADING. doi: https://doi.org/ 10.24867/GRID-2022-p28

Goto, K., Pelet, J. E., & Iizuka, K. (2022) The Effect of Colors Used in E-Commerce Websites: An Analysis of Japanese Consumers. In: Vol. 1582 CCIS (pp. 485-491): Springer Science and Business Media Deutschland GmbH. doi: https://doi.org/10.1007/978-3-031-06391-6_60

Haria, A., Subramanian, A., Asokkumar, N., Poddar, S., & Nayak, J. S. (2017). Hand gesture recognition for human computer interaction. Procedia computer science, 115, 367-374. doi:https://doi.org/10.1016/j.procs.2017.09.092

Hawlitschek, F., Jansen, L. E., Lux, E., Teubner, T., & Weinhardt, C. (2016, Jan 05-08). Colors and Trust: The Influence of User Interface Design on Trust and Reciprocity. Paper presented at the 49th Hawaii International Conference on System Sciences (HICSS), Koloa, HI. doi: https://doi.org/10.1109/hicss.2016.80

Jo, M. S., Wang, L., & Chen, Z. (2023). A Comparative Study on the Cultural Difference of Users’ Preference of Library Website Interface Design Between Korea and the United States. Paper presented at the In International Conference on Human-Computer Interaction. doi: https://doi.org/202302281753223638

Kaczmarek-Gajewska, W., & McDonnell, M. (2021). Effect of website colour saturation on trustworthiness and visual appeal impressions. 16th International Conference on Interfaces and Human Computer Interaction - Duration: 20 Jul 2022. Lisbon, Portugal . 69-76. https://www-scopuscom.ezproxy.udes.edu.co/record/display.uri?eid=2s2.085117526531&origin=resultslist&sort=plff&src=s&sid=12668295347423c77f48da444a0c2c1&sot=a&sdt=a&s=

Karami, Z. (2020). Investigating the effect of color on websites selling sports goods for Iranian buyers' sense of satisfaction and trust. (Masters), Tabriz, Islamic Art University of Tabriz. https://ganj.irandoc.ac.ir/#/articles/c8b39a54ee605f5c34e13c7da2a95759. [In Persian]

Karimi, A. (2019). Assessing the aesthetics aspects of web design. (Master's thesis), Art University of Tehran, Tehran. https://ganj.irandoc.ac.ir/#/articles/da2dba40a802be89fbfac677b9c305b1. [In Persian]

Khaleghi, N. (2006). The most important general criteria for a desirable user interface. Library and Information Sciences, 9(3), 85-94. https://sid.ir/paper/431571/fa .[In Persian]

Khuong, T. T., Nhi, P. Y., Nhan, D. T., Thuan, N. H., & Acm. (2018, Feb 02-04). Colour, Trust, Satisfaction, and E-loyalty: The Vietnamese Experience of Website Design. Paper presented at the 2nd International Conference on Machine Learning and Soft Computing (ICMLSC), Vietnam. doi: https://doi.org/10.1145/3184066.3184070

Manzoor, M., Hussain, W., Ahmed, A., & Iqbal, M. J. (2012). The importance of higher education website and its usability. International Journal of Basic and Applied Sciences, 1(2), 150-163. doi: https://doi.org/10.14419/ijbas.v1i2.73

Marcus, A., Cowan, W. B., & Smith, W. (1989). Color in user interface design: Functionality and aesthetics.doi: https://doi.org/10.1145/67449.67455

Medjden, S., Ahmed, N., Lataifeh, M. (2020). Adaptive user interface design and analysis using emotion recognition through facial expressions and body posture from an RGB-D sensor. PLOS ONE, 15(7):e0235908. doi: https://doi.org/10.1371/journal.pone.0235908

Meier, B. J. (1988). ACE: A color expert system for user interface design. doi: https://doi.org/ 10.1145/62402.62424

Miketić, N., Pinćjer, I., Milić Keresteš, N., & Bošnjaković, G. (2023). Search Performance and Aesthetics: Harmonious Colours and Grouping for a Better User Interface. Tehnicki Vjesnik, 30(2), 506-513. doi: https://doi.org/10.17559/TV-20220622140433

Mohammadian, N. (2021). Relationship between Preferred Colors of Online Users on Websites and Their Cultural Features. 7th International Conference on Web Research (ICWR). 19-20 May 2021. Iran, Tehran. doi: https://doi.org/10.1109/ICWR51868.2021.9443142

Mohammadian, N., Noorbehbahani, F., & Ieee. (2017, Apr 19-20). Analyzing Users' Preferred Color On Websites Based On Demographic Features. Paper presented at the 3rd International Conference on Web Research (ICWR), Tehran, IRAN. doi:https://doi.org/10.1109/ICWR.2017.7959320

Pastushenko O, H. J., Hruska T. . (2019). Evaluation of user interface design metrics using generator of ̌ realistic-looking dashboard samples. Expert Systems, 38(5), 1-19. doi:https://doi.org/10.1111/exsy.12434

Pelet, J. E., Conway, C. M., Papadopoulou, P., & Limayem, M. (2013) Chromatic scales on our eyes: How user trust in a website can be altered by color via emotion. In: Vol. 205 AISC (pp. 111-121): Springer Verlag. doi: https://doi.org/ 10.1007/978-3-642-37317-6_10

Puji, A. A., & Engraini, V. (2021). Perancangan User Interface Website E-Commerce Pada Usaha Kuliner Menggunakan User Centered Design. Jurnal CoSciTech (Computer Science and Information Technology), 2(1), 1-8. doi:https://doi.org/10.37859/coscitech.v2i1.2196

Reayatsanathi, F. (2015). Analysis of the perceived characteristics of color in the design of the user interface of corporate websites. (master's thesis), Science and Culture of Tehran University. https://ganj.irandoc.ac.ir/#/articles/17ed9a198f7ba51ebd74eecd9ac94933. [In Persian]

Sadeghi, N. (2021). Color in the user interface design of educational and entertainment websites for children. (Master's Thesis), Art University of Tehran.https://ganj.irandoc.ac.ir/#/articles/f5e383cda22e4369b52f8b52db18f1e4. [In Persian]

Sandelowski, M., & Barroso, J. (2006). Handbook for synthesizing qualitative research: springer publishing company. doi:https://doi.org/10.46743/2160-3715/2009.2820

Schwarz, M. W., Beatty, J. C., Cowan, W. B., & Gentleman, J. F. (1984). TOWARDS AN EFFECTIVE USER INTERFACE FOR INTERACTIVE COLOUR MANIPULATION.doi:https://doi.org/10.20380/GI1984.33

Seckler, M., Opwis, K. & Tuch, A. N. (2015). Linking objective design factors with subjective aesthetics: an experimental study on how structure and color of websites affect the facets of users’ visual aesthetic perception. Computers in Human Behavior, 49, 375-389. doi:https://doi.org/10.1016/j.chb.2015.02.056

Shen, Z., Xue, C., Li, J., & Zhou, X. . (2015). Effect of icon density and color contrast on users’ visual perception in human computer interaction. Paper presented at the In Engineering Psychology and Cognitive Ergonomics: 12th International Conference. doi:https://doi.org/10.1007/978-3-319-20373-7_7

Tham, D. S. Y., Sowden, P. T., Grandison, A., Franklin, A., Lee, A. K. W., Ng, M., ... & Zhao, J. . (2020). A systematic investigation of conceptual color associations. Journal of Experimental Psychology, 149(7), 1311. doi: https://doi.org/10.1037/xge0000703

Thowfeek, M. H., & Salam, M. N. A. (2014). Students’ Assessment on the Usability of E-leaming Websites. Procedia-Social and Behavioral Sciences, 141, 916-922. doi: https://doi.org/10.1016/j.sbspro.2014.05.160

Vitols, G., Arhipova, I., Hirata, Y., & Ikarts, I. (2015). Colour Extraction and Analysis Solution for Design of Cross-cultural Websites. Paper presented at the Conference on ICTE in Regional Development, Valmiera, LATVIA. doi:https://doi.org/10.1016/j.procs.2015.12.374

Vitols, G. Arhipova, I. Hirata, Y. (2012). Cultural preference identification for cross-cultural website design. ICEIS 2012 - Proceedings of the 14th International Conference on Enterprise Information Systems, 3 HCI(EA/-), 99–102. https://www.scopus.com/inward/record.uri?eid=2s2.084865712602&partnerID=40&md5=44e101bc328d4ab98d97ef7768c1d6c7

Vu, K. P. L., Proctor, R. W., & Hung, Y. H. (2021). Website design and evaluation. Handbook of human factors and ergonomics, 1016-1036. doi: https://doi.org/10.1002/9781119636113.ch39

Wright, O. (2006). The origin and nature of perceptual colour categories: University of Surrey (United Kingdom). https://www.proquest.com/openview/75ba5ce2fe3ceb83dae8abfc72951950

Wu, Z., Xue, C., Zhu, Y., Zhai, B., & Zhang, C. . (2020). Shopping Website Accessibility Study Based on Users’ Mental Models. In Intelligent Human Systems Integration 2020: Proceedings of the 3rd International Conference on Intelligent Human Systems Integration. doi: https://doi.org/10.1007/978-3-030-39512-4_118

Xiaoxiao, B., & Wenming, L. (2018). Research on the application of color semantics in the human-computer interaction design of smartphones. doi: https://doi.org/10.1051/matecconf/201817604001

Zerehsaz, M., and Fattahi, R. . (2005). Basic considerations in the design of the user interface of computer systems and databases. libraranship and Information Organization Studies, 17(2), 251-268. https://sid.ir/paper/465274/fa. [In Persian]

Zhou, J., Miao, X., He, F., & Miao, Y. (2022). Effects of Font Style and Font Color in News on User Cognitive Load in Intelligent User Interfaces. IEEE Access, 10, 10719-10730. doi:https://doi.org/10.1109/ACCESS.2022.3151915