Skip to main content
SpringerLink
Log in

Application of visual colors in dynamic web page design through affective cognition

  • Published:
Multimedia Tools and Applications Aims and scope Submit manuscript

Abstract

The visual language of a web page reflects its quality and emotion. Compared with static web page designs, dynamic web page designs enable easier reading and is more effective in attracting the attention of users. In this study, web pages were created using programs that applied three dynamic web page creation languages, namely HTML5, JavaScript, and CSS3. Moreover, the most suitable type of dynamic web page design was determined through experiments and analyses on diverse psychological feelings for web page composition and colors. Such experiments and analyses allow web page designers to understand users’ psychological factors more easily for developing the most suitable visual design for dynamic web pages. This study involved three parts: (1) understanding the status of current dynamic web page design, collecting HTML5 dynamic home pages of websites, and conducting experiments and analyses on web page contents; (2) exploring feelings regarding the use of websites and identifying optimized styles of dynamic web page design according to the compositions and dynamic representations of web images; and (3) developing superior color schemes for dynamic web page design and providing a reference for applying colors to dynamic web page design. The research results indicated that the design covered entirely with carousel images when the home page remained static had the best visual effect, followed by the design containing carousel images and 1/10th area of blank space to the left and right sides of the images when the home page remained static. The affective adjective pair with the best fit in the experiments was difficult–convenient, followed by trivial–simple and annoying–favorite. The most popular color for dynamic web pages was dark royal blue (L46.8, A17.8, and B-66.7), followed by dark cyan (L36.2, A-39.9, and B40.8). The results obtained through experiments on dynamic web pages in this study serve as a reference for web designers and researchers to configure the composition and colors of dynamic web page design.

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

Similar content being viewed by others

Data availability

Sources such as research data (data) were completed through questionnaires, Google statistics tables, and SPSS statistical software statistics. If the journal accepts the article, you can get the raw data with the appropriate author.

References

  1. Alexandra T, Melissa G, Frans F (2020) The effect of packaging color and health claims on product attitude and buying intention. Int J Environ Res Publ Health 17:1991. https://doi.org/10.3390/ijerph17061991

    Article  Google Scholar 

  2. Andrey K (2018) Large-scale holistic approach to Web block classification: assembling the jigsaws of a Web page puzzle. World Wide Web 22:1999-2015. https://doi.org/10.1007/s11280-018-0634-6

  3. Azman SA (2020) Color in packaging / Shahrul Azmeer Azman. J Art Des (REKA) 2:17–19

    Google Scholar 

  4. Berlyne DE (1971) Information, uncertainty, redundancy, aesthetics and psychobiology. Meredith Corporation, New York

    Google Scholar 

  5. Birnbaum,Chapter MH (2000) Decision making in the lab and on the web. In: Birnbaum MH (eds) Psychological Experiments on the Internet. Academic, Cambridge, pp 3-34. https://doi.org/10.1016/B978-012099980-4/50002-2

  6. Bodrunova SS, Yakunin AV (2017) U-index: An Eye-Tracking-Tested Checklist on Webpage Aesthetics for University Web Spaces in Russia and the USA. In: Marcus A, Wang W (eds) Design, User Experience, and Usability: Theory, Methodology, and Management. DUXU 2017, vol 10288. Springer, Cham. https://doi.org/10.1007/978-3-319-58634-2_17

  7. Bonnardel N, Piolat A, Le Bigot L (2011) The impact of colour on website appeal and users’ cognitive processes. Displays 32:69–80. https://doi.org/10.1016/j.displa.2010.12.002

    Article  Google Scholar 

  8. Calvo RA, Mello SD (2010) Affect detection: an interdisciplinary review of models, methods, and their applications. IEEE Trans Affect Comput 1:18–37

    Article  Google Scholar 

  9. Carrion B, Onorati T, Díaz P, Triga V (2019) A taxonomy generation tool for semantic visual analysis of large corpus of documents. Multimed Tools Appl 78:32919–32937. https://doi.org/10.1007/s11042-019-07880-y

    Article  Google Scholar 

  10. Demir Ü (2020) Investigation of color-emotion associations of the university students. Color Res Appl 45(5):871–884. https://doi.org/10.1002/col.22522

    Article  MathSciNet  Google Scholar 

  11. Deng L (2006) Beyond usability: affect in web browsing. Unpublished doctoral dissertation, Texas A&M University, Texas

  12. Derefeldt G, Swartling T (1995) Colour concept retrieval by free colour naming: identification of up to 30 colours without training. Displays 16:69–77. https://doi.org/10.1016/0141-938/2895/991176-3

    Article  Google Scholar 

  13. Eroglu SA, Machleit KA, Davis LM (2003) Empirical testing of a model of online store atmospherics and shopper responses. Psychol Market 20:139–150. https://doi.org/10.1002/mar.10064

    Article  Google Scholar 

  14. Fabien C (2011) Timesheets.js: when SMIL meets HTML5 and CSS3.DocEng ‘11: Proceedings of the 11th ACM Symposium on Document Engineering, pp 43–52, https://doi.org/10.1145/2034691.2034700

  15. Furche T, Gottlob G, Grasso G, Gunes O, Guo X, Kravchenko A, Orsi G, Schallhart C, Sellers AJ, Wang C (2012) DIADEM: domain-centric, intelligent, automated data extraction methodology. WWW '12 Companion: Proceedings of the 21st International Conference on World Wide Web p 267

  16. Gasparini F, Giltri M, Bandini S (2020) Discriminating affective state intensity using physiological responses. Multimed Tools Appl 79:35845–35865. https://doi.org/10.1007/s11042-020-09114-y10/1272641872095375360

    Article  Google Scholar 

  17. Guan S, Lin Y (2002) A study of generating the web design system based on the Kansei engineering process. J Des 7:59–74

    Google Scholar 

  18. Hashemi M (2020) Web page classification: a survey of perspectives, gaps, and future directions. Multimed Tools Appl 79:11921–11945

    Article  Google Scholar 

  19. Hu R, Yan Z, Ding W, Yang LT (2020) A survey on data provenance in IoT. World Wide Web 23:1441–1463

    Article  Google Scholar 

  20. Iman Dianat P, Adeli MA, Jafarabadi MA Karimi (2019) User-centred web design, usability and user satisfaction. The case of online banking websites in Iran. Appl Ergon 81:102892

  21. Jennings M (2000) Theory and models for creating engaging and immersive ecommerce websites. In: Special Interest Group on Computer Personnel Research Annual Conference. ACM Press, New York

  22. Jeong SH, Lee KP (2005) Extraction of user’s representative emotions expressed white using a product. J Korean Soc Des Sci 18:69–80

    Google Scholar 

  23. Kallio T (2003) Why we choose the more attractive looking objects: somatic markers and somaesthetics in user experience. In: Proceedings of the 2003 International Conference on Designing Pleasurable Products and Interfaces. ACM Press, New York

  24. Kang J, Choi J (2008) Block classification of a Web page by using a combination of multiple classifiers. In: Fourth International Conference on Networked Computing and Advanced Information Management

  25. Kesler Tanner N, Johnson JA, Landay (2019) CHI ‘19: Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems. 528, 1-12

  26. Kovač A, Kovačević D, Bota J, Brozović M (2019) Consumers’ preferences for visual elements on chocolate packaging. J Graph Eng Des 10:13–18. https://doi.org/10.24867/JGED-2019-1-013

    Article  Google Scholar 

  27. Krishnan A, Deepak P, Sayan R, Sameep M (2018) Leveraging semantic resources in diversified query expansion. World Wide Web 21:1041–1067. https://doi.org/10.1007/s11280-018-0634-6

    Article  Google Scholar 

  28. Kuo L, Chang T, Lai C-C( (2021) Visual effect and color matching of dynamic image webpage design. Color Res Appl 2021:1–11. https://doi.org/10.1002/col.22662

  29. Lin H (2014) Red-colored products enhance the attractiveness of women. Displays 35:202–205. https://doi.org/10.1016/j.displa.2014.05.009

    Article  Google Scholar 

  30. Liu Y (2000) The aesthetics and the ethic dimensions of human factors and design. Ergonomics 46:1293–1305

    Article  Google Scholar 

  31. Ma Y, Guangrong D (2020) Application of computer image processing technology in Web Design. 2020 2nd International Conference on Information Technology and Computer Application (ITCA), 125-127. https://doi.org/10.1109/ITCA52113.2020.00033

  32. Majumdar A, Shrivastava A, Lee S, Anderson P, Parikh D, Batra D (2020) Improving Vision-and-Language Navigation with Image-Text Pairs from the Web. In: Vedaldi A, Bischof H, Brox T, Frahm JM (eds) Computer Vision – ECCV 2020. ECCV 2020, vol 12351. Springer, Cham. https://doi.org/10.1007/978-3-030-58539-6_16

  33. Mikkonen T, Taivalsaari A (2008) Web applications- spaghetti code for the 21st century. In: 6th International Conference in Software, Engineering, Research, Management and Applications (SERA’08), pp 319-328

  34. Musiał K, Kazienko P (2013) Social networks on the Internet. World Wide Web 16:31–72

    Article  Google Scholar 

  35. Nathalie B, Annie P, Ludovic Le B (2011) The impact of colour on website appeal and users’ cognitive processes. Displays 32:60–82. https://doi.org/10.1016/j.displa.2010.12.002

    Article  Google Scholar 

  36. Nielsen J (1993) Usability engineering. Academic, Cambridge, p 224

  37. Norman DA (2000) Design psychology-user-centered, safe and easy-to-use design principles of daily necessities (translation by Cho Y.). Yuanliu Publishing, Taipei

    Google Scholar 

  38. Nusrat JS, Ang LM, Kah P, Rahaman DMM, Zia T (2020) Multimodal big data affective analytics: a comprehensive survey using text, audio, visual and physiological signals. J Network Comput Appl 149:102447. https://doi.org/10.1016/j.jnca.2019.102447

    Article  Google Scholar 

  39. Oliva A, Mack ML, Shrestha M, Peeper A (2004) Identifying the perceptual dimensions of visual complexity of scenes. In: Paper Presented at the 26th Annual Meeting of the Cognitive Science Society, Chicago

  40. Pak A, Paroubek P (2010) Twitter as a corpus for sentiment analysis and opinionmining. In: Proceedings of the Seventh Conference on International Language Resources and Evaluation, pp 1320-1326

  41. Pan Y, He F, Yu H (2020) Learning social representations with deep autoencoder for recommender system. World Wide Web 23:2259–2279. https://doi.org/10.1007/s11280-020-00793-z

    Article  Google Scholar 

  42. Pollet TV, Costello J, Groeneboom L, Peperkoorn LS, Wu J (2019) Dored objects enhance sexual attractiveness? No evidence from two large replications. Displays 56:23–29. https://doi.org/10.1016/j.displa.2018.10.008

    Article  Google Scholar 

  43. Poria S, Cambria E, Howard N, Huang GB, Hussain A (2016) Fusing audio, visual and textual clues for sentiment analysis from multimodal content. Neurocomputing 174:50–59. https://doi.org/10.1016/j.neucom.2015.01.095

    Article  Google Scholar 

  44. Rinaldi AM, Russo C (2020) Using a multimedia semantic graph for web document visualization and arization. Multimed Tools Appl. https://doi.org/10.1007/s11042-020-09761-1

    Article  Google Scholar 

  45. Rodriguez-Gil L, Orduña P, García-Zubia J, López-de-Ipiña D (2018) Interactive live-streaming technologies and approaches for web-based applications. Multimed Tools Appl 77:6471–6502. https://doi.org/10.1007/s11042-017-4556-6

    Article  Google Scholar 

  46. Rubens PM (1986) A reader’s view of text and graphics: implications for transactional text. J Techn Writ Commun 16:73–86

    Article  Google Scholar 

  47. Saragih JM, Lucey S, Cohn JF (2009) Face alignment through subspace constrainedmean-shifts. In: 2009 IEEE 12th International Conference on Computer Vision. IEEE, pp 1034-1041

  48. Schubert TW, Murteira C, Collins EC, Lopes D (2013) ScriptingRT: a software library for collecting response latencies in online studies of cognition. PLoS ONE 8:e67769. https://doi.org/10.1371/journal.pone.0067769

    Article  Google Scholar 

  49. Speriosu M, Sudan N, Upadhyay S, Baldridge J (2011) Twitter polarity classification with label propagation over lexical links and the follower graph. In: Proceedings of the Conference on Empirical Methods in Natural Language Processing, pp 53-56

  50. Sutcliffe A (2003) Multimedia user interface design. In: Sears A, Jacko JA (eds) Human-computer interaction handbook-fundamentals, evolving technologies and emerging applications. CRC Press, Boca Raton, pp 35–51

  51. Tractinsky N, Cokhavi A, Kirschenbaum M (2004) Using ratings and response latencies to evaluate the consistency of immediate aesthetic perceptions of web pages. In: Proceedings of the Third Annual Workshop on HCI Research in MIS. Washington, DC, pp 1-5

  52. Tractinsky N, Cokhavi A, Kirschenbaum M, Sharfi T (2006) Evaluating the consistency of immediate aesthetic perception of web pages. Int J Hum Comput Stud 64:1071–1083. https://doi.org/10.1016/j.ijhcs.2006.06.009

    Article  Google Scholar 

  53. Tsou MH et al (2017) Building a Real-Time Geo-Targeted Event Observation (Geo) viewer for disaster management and situation awareness. In: Peterson M et al (eds) Advances in Cartography and GIScience. ICACI 2017. Lecture Notes in Geoinformation and Cartography. Springer, Cham. https://doi.org/10.1007/978-3-319-57336-6_7

  54. Vuorimaa P, Laine M, Litvinova E, Shestakov D (2016) Leveraging declarative languages in web application development. World Wide Web 19:519–543

    Article  Google Scholar 

  55. Wischenbart M, Firmenich S, Rossi G et al (2021) Engaging end-user driven recommender systems: personalization through web augmentation. Multimed Tools Appl 80:6785–6809. https://doi.org/10.1007/s11042-020-09803-8

    Article  Google Scholar 

  56. Wu Y, He F, Zhang D, Li X (2018) Service-oriented feature-based data exchange for cloud-based design and manufacturing. IEEE Trans Serv Comput 11:341–353. https://doi.org/10.1109/TSC.2015.2501981

    Article  Google Scholar 

  57. Yu H, He F, Pan Y (2020) A scalable region-based level set method using adaptive bilateral filter for noisy image segmentation. Multimed Tools Appl 79:5743–5765. https://doi.org/10.1007/s11042-019-08493-1

    Article  Google Scholar 

Download references

Funding

Sanming University.

Research Foundation for Advanced Talents, Grant Number: 21YG02S. Supported by Fujian Province Science, Grant Number: FJ2021B190.

Author information

Authors and Affiliations

  1. Department of Product Design, Sanming University, Sanming, Fujian, China

    Lungwen Kuo

  2. Department of Education, Tzu Chi Academy, Cupertino, CA, USA

    Tsuiyueh Chang

  3. Department of Industrial Design, Tatung University, Taipei, Taiwan

    Chih-Chun Lai

Authors
  1. Lungwen Kuo
    View author publications

    You can also search for this author in PubMed Google Scholar

  2. Tsuiyueh Chang
    View author publications

    You can also search for this author in PubMed Google Scholar

  3. Chih-Chun Lai
    View author publications

    You can also search for this author in PubMed Google Scholar

Contributions

Although this study adopted dynamic web pages on tourist landscape in the experiments, the experimental results provide a theoretical and practical reference for the selection of appropriate colors and design styles for tourism websites and web pages of other product types. This research acts as a reference for web design researchers and website designers.

Corresponding author

Correspondence to Tsuiyueh Chang.

Ethics declarations

Conflicts of interest/Competing interests

There are no conflicts of interest in the content of this article.

Additional information

Publisher’s Note

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

Rights and permissions

Reprints and permissions

About this article

Check for updates. Verify currency and authenticity via CrossMark

Cite this article

Kuo, L., Chang, T. & Lai, CC. Application of visual colors in dynamic web page design through affective cognition. Multimed Tools Appl 81, 4435–4454 (2022). https://doi.org/10.1007/s11042-021-11732-z

Download citation

  • Received:

  • Revised:

  • Accepted:

  • Published:

  • Issue Date:

  • DOI: https://doi.org/10.1007/s11042-021-11732-z

Keywords

Search

Navigation