Human-Computer Interaction (HCI) focuses on user-centered design, which leads towards innovative yet user-friendly technologies. This field overlaps with User Experience (UX) Designer and Research. The main difference is the theoretical foundation of HCI, which heavily weighs on psychology, principles, and theories. Color is an essential aspect of art and design; often designers overlook the connotations associated with color. This paper intends to connect the fields of color psychology and HCI, thus explaining how professionals in the field can utilize the advantages of this framework. To study the effects of color within the realm of digital interface design, an experiment was undertaken with the goal of increasing user session time. A hypothesis was derived by assessing demographics, preferences, and trends despite color being traditionally perceived as innately subjective. The data collected from the experiment demonstrated that yellow shades of blue, in combination with a noninvasive color scheme (such as dark mode), can increase the time users spend browsing a webpage.
References
[1]
Adams, F. M., & Osgood, C. E. (1973). A Cross-Cultural Study of the Affective Meanings of Color. JournalofCross-CulturalPsychology,4, 135-156. https://doi.org/10.1177/002202217300400201
[2]
Benyon, D. (2014). DesigningInteractive Systems:A Comprehensive GuidetoHCI,UXand Interaction Design. Pearson.
[3]
Birren, F. (1997). ThePowerofColor:How It Can ReduceFatigue,RelieveMonotony,EnhanceSexuality,andMore. Citadel Press.
[4]
Bleicher, S., & Bleicher, S. (2023). ContemporaryColor: Theory and Use. Routledge. https://doi.org/10.4324/9781003242741
[5]
Coursaris, C. K., & Kripintris, K. (2012). Web Aesthetics and Usability: An Empirical Study of the Effects of White Space. InternationalJournalofE-BusinessResearch,8, 35-53. https://doi.org/10.4018/jebr.2012010103
[6]
Crozier, W. R. (1999). The Meanings of Colour: Preferences among Hues. Pigment&ResinTechnology,28, 6-14. https://doi.org/10.1108/03699429910252315
[7]
Dash, P., & Hu, Y. C. (2021). How Much Battery Does Dark Mode Save? An Accurate OLED Display Power Profiler for Modern Smartphones. In Proceedingsofthe19thAnnualInternationalConferenceonMobileSystems,Applications,andServices (pp. 323-335). ACM. https://doi.org/10.1145/3458864.3467682
[8]
Deubel, P. (2003). An Investigation of Behaviorist and Cognitive Approaches to Instructional Multimedia Design. JournalofEducationalMultimediaandHypermedia,12, 63-90.
Elliot, A. J., & Maier, M. A. (2007). Color and Psychological Functioning. CurrentDirectionsinPsychologicalScience,16, 250-254. https://doi.org/10.1111/j.1467-8721.2007.00514.x
[11]
Elliot, A. J., & Maier, M. A. (2014). Color Psychology: Effects of Perceiving Color on Psychological Functioning in Humans. AnnualReviewofPsychology,65, 95-120. https://doi.org/10.1146/annurev-psych-010213-115035
[12]
Gabriel-Petit, P. (2007). ApplyingColorTheorytoDigitalDisplays. UX Matters. https://www.uxmatters.com/mt/archives/2007/01/applying-color-theory-to-digital-displays.php
[13]
Gorn, G. J., Chattopadhyay, A., Sengupta, J., & Tripathi, S. (2004). Waiting for the Web: How Screen Color Affects Time Perception. JournalofMarketingResearch,41, 215-225. https://doi.org/10.1509/jmkr.41.2.215.28668
[14]
Guilford, J. P., & Smith, P. C. (1959). A System of Color-Preferences. TheAmericanJournalofPsychology,72, 487-502. https://doi.org/10.2307/1419491
[15]
Hemphill, M. (1996). A Note on Adults’ Color-Emotion Associations. TheJournalofGeneticPsychology,157, 275-280. https://doi.org/10.1080/00221325.1996.9914865
[16]
Kim, K., Erickson, A., Lambert, A., Bruder, G., & Welch, G. (2019). Effects of Dark Mode on Visual Fatigue and Acuity in Optical See-Through Head-Mounted Displays. In SymposiumonSpatialUserInteraction (pp. 1-9). ACM. https://doi.org/10.1145/3357251.3357584
[17]
Kondratova, I., & Goldfarb, I. (2007). Color Your Website: Use of Colors on the Web. In N. Aykin (Ed.), Usability and Internationalization. Global and Local User Interfaces (pp. 123-132). Springer. https://doi.org/10.1007/978-3-540-73289-1_16
[18]
Kurt, S., & Osueke, K. K. (2014). The Effects of Color on the Moods of College Students. SageOpen,4, 1-12. https://doi.org/10.1177/2158244014525423
[19]
León-Alberca, T., Renés-Arellano, P., & Aguaded, I. (2024). Digital Marketing and Technology Trends: Systematic Literature Review on Instagram. In D. B. Ibáñez, et al. (Eds.), Communication and Applied Technologies (pp. 309-318). Springer Nature. https://doi.org/10.1007/978-981-99-7210-4_29
[20]
Lynch, P., & Horton, S. (2008). WebStyleGuide:BasicDesignPrinciplesforCreatingWebsites. Web Style Guide. https://webstyleguide.com/
[21]
Mogaji, E., Wirtz, J., Belk, R. W., & Dwivedi, Y. K. (2023). Immersive Time (ImT): Conceptualizing Time Spent in the Metaverse. InternationalJournalofInformationManagement,72, Article ID: 102659. https://doi.org/10.1016/j.ijinfomgt.2023.102659
[22]
Montgomery, A. L., & Faloutsos, C. (2001). Identifying Web Browsing Trends and Patterns. Computer,34, 94-95. https://doi.org/10.1109/2.933515
[23]
Nielsen, J. (2011). HowLongDoUsersStayonWebPages? Nielsen Norman Group. https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/
Pelet, J., & Papadopoulou, P. (2012). The Effect of Colors of E-Commerce Websites on Consumer Mood, Memorization and Buying Intention. EuropeanJournalofInformationSystems,21, 438-467. https://doi.org/10.1057/ejis.2012.17
[26]
Pereira, L., Martins, N., & Brandão, D. (2022). Color Sensitivity in Digital Interfaces Designed for Elderly People. In N. Martins, & D. Brandão (Eds.), Advances in Design and Digital Communication II (pp. 74-85). Springer International Publishing. https://doi.org/10.1007/978-3-030-89735-2_7
[27]
Rath, J. (2017). HowThese23BrandsAreUsingColors in TheirLogostoInfluenceTheirCustomers. Business Insider. https://www.businessinsider.com/these-23-brands-are-using-colors-in-their-logos-to-influence-customers-2017-3
[28]
Richardson, R. T., Drexler, T. L., & Delparte, D. M. (2014). Color and Contrast in E-Learning Design: A Review of the Literature and Recommendations for Instructional Designers and Web Developers. MERLOTJournalofOnlineLearningandTeaching,10, 657-670.
[29]
Rider, R. M. (2010). ColorPsychologyandGraphicDesignApplications. Senior Honors Thesis, Liberty University.
[30]
Sandnes, F. E. (2017). On-Screen Colour Contrast for Visually Impaired Readers. In A. Black, P. Luna, O. Lund, & S. Walker (Eds.), InformationDesign (pp. 421-432). Routledge.
[31]
Sheppard, A. L., & Wolffsohn, J. S. (2018). Digital Eye Strain: Prevalence, Measurement and Amelioration. BMJOpenOphthalmology,3, e000146. https://doi.org/10.1136/bmjophth-2018-000146
[32]
Statista Research Department (2021). DailySocialMediaUsageWorldwide. Statista. https://www.statista.com/statistics/433871/daily-social-media-usageworldwide/
[33]
Valdez, P., & Mehrabian, A. (1994). Effects of Color on Emotions. JournalofExperimentalPsychology:General,123, 394-409. https://doi.org/10.1037/0096-3445.123.4.394
[34]
Van Braam, H. (2021). ColorPsychology. https://www.colorpsychology.org/
[35]
Wadhera, D., & Capaldi-Phillips, E. D. (2014). A Review of Visual Cues Associated with Food on Food Acceptance and Consumption. EatingBehaviors,15, 132-143. https://doi.org/10.1016/j.eatbeh.2013.11.003
[36]
Wallace, R. (2013). Icons—YourBrand’sVisualEssence. Experts. https://www.experts.com/articles/icons-your-brands-visual-essence-by-rob-wallace
[37]
Wang, A., Fang, J., & Chen, C. (2003). Effects of VDT Leading-Display Design on Visual Performance of Users in Handling Static and Dynamic Display Information Dual-Tasks. InternationalJournalofIndustrialErgonomics,32, 93-104. https://doi.org/10.1016/s0169-8141(03)00041-6
[38]
Wright, P., Mosser-Wooley, D., & Wooley, B. (1997). Techniques & Tools for Using Color in Computer Interface Design. XRDS:Crossroads,TheACMMagazineforStudents,3, 3-6. https://doi.org/10.1145/270974.270976
