The internet has become an integral part of people’s lives. However, any digital activity results in energy consumption and greenhouse gas emissions, which are the prime drivers of global warming and climate change. The environmental cost calls for the practice of sustainable web design or green human-computer interaction. While there is substantial research on ways to reduce the energy consumption of the back-end information systems, such as data centers, few studies focus on the front-end information systems, such as web design. This study aims to analyze the impact of web design on energy consumption by conducting a case study on an institutional website. A set of major web tracking and performance metrics tools will be adopted to collect data upon web hosting, performance optimization, web design, and user experience. Descriptive analysis of the data will help generate actionable insights into environmentally friendly user interface design strategies for digital devices

Ilica, Beliz

Yu, Fei

English

Illinois Digital Environment for Access to Learning and Scholarship Repository

Sustainable User Interface Generation for Digital Devices: A Case Study Abstract. The internet has become an integral part of people’s lives. However, any digital activity results in energy consumption and greenhouse gas emissions, which are the prime drivers of global warming and climate change. The environmental cost calls for the practice of sustainable web design or green human-computer interaction. While there is substantial research on ways to reduce the energy consumption of the back-end information systems, such as data centers, few studies focus on the front-end information systems, such as web design. This study aims to analyze the impact of web design on energy consumption by conducting a case study on an institutional website. A set of major web tracking and performance metrics tools will be adopted to collect data upon web hosting, performance optimization, web design, and user expe-rience. Descriptive analysis of the data will help generate actionable insights into environmentally friendly user interface design strategies for digital devices. Keywords: Sustainability, User Interface Design, Web Design. 1 Introduction The internet has dramatically transformed the way how people provide and consume information. However, while making information communication faster, easier, and more accessible, our digital life produces CO2 gas emissions and consumes energy that can negatively impact the environment and exacerbate global climate change [1]. Today, with approximately 5 billion internet users, 2 billion websites, and 9 billion traffic, the internet has consumed nearly 4 million megawatt-hours of electricity and produced 3 million tons of CO2 emissions [2]. To prevent these numbers from going up every minute, it is critical to design and develop green web presences that reduce carbon emission and energy consumption.   To prevent the internet from becoming a principal global warming agent, web de-signers and developers have started to promote a sustainable web design approach lately [3], which is to design digital user interfaces with principal concern on their capability of reducing carbon emissions and energy consumption. Therefore, in this proposed study, we will investigate the sustainability design practices of a selected institutional website to achieve the following goals:  1) To determine how web design shall be evaluated for sustainability  2) To assess the role of digital elements and aspects of a user interface in devel-oping a sustainable web presence  2 3) To generate strategies for sustainable user interface design on digital devices. 2 Literature Review Overall, previous studies investigated websites’ hardware, software, and network for energy-saving purposes. At the hardware level, studies ranged from reducing the en-ergy consumption of processors [4,5] to implementing energy-efficient storage sys-tems to reduce the power consumption of hard drive disks [6]. At the software level, several studies investigated the role of HTTP requests in web power consumption and suggested reducing the number of HTTP requests or the size of web components to save energy. Particularly, optimizing stylesheets and script files of a webpage to save energy was a highly recommended approach by previous research [7]. In addition, some researchers presented a framework to measure the energy used by mobile devic-es when rendering web pages [8] and investigated the reasons for slow web perfor-mance for mobile devices. Their findings revealed that images had most of the energy needed to render web pages and suggested optimizing images and scripts for less storage size, faster rendering, and better web performance [9]. Furthermore, research-ers conducted comparative studies on the energy efficiency of different web browsers [10], and analyzed the benefits of proxy services in energy saving [11]. One study observed the role of sustainability in web design and recommended alternative design options for the back-end information system on energy-saving [12]. Two other studies even proposed frameworks for calculating the energy consumption of a website and explored the impact of energy-saving display modifications on perceived ease of use, quality, and performance [13, 14]. At the network level, researchers proposed system algorithms to reduce energy consumption in cloud computing [15] and explored ways to leverage renewable energy in data centers [16]. Other studies explored the negative impact of internet traffic on our environment [17] and how social networks and search engines produced gas emissions [18].  Despite intensive research on the energy-centric aspect of web usage at the hard-ware, software, and network levels, there is a lack of focus on the impact of web user interface design on the environment. Existing literature proposed four indicators in-volved in sustainable web design: green hosting, search engine optimization, perfor-mance optimization, and design and user experience [19]. Among these four indica-tors, using a green hosting service that is powered through renewable resources and optimizing website performance for search engines are the most impactful ways to reduce the energy consumption of a website [19]. However, even the most micro-level change of web elements can significantly impact the environment in the long term. One study found that the web components such as text and multimedia content, colors, fonts, layout, structure, and interactivity design can significantly affect the webpage’s total weight - the size of all files used to create the page [20]. With an emphasis on these individual components, web designers can contribute to a sustaina-ble web design with fewer carbon emissions.  3 Therefore, this study will fill in this gap by investigating the four sustainability in-dicators, particularly the role of web optimization and user interface design compo-nents to assess their impact on energy consumption.  3 METHODOLOGY             We will conduct a case study by examining the sustainability of a selected institution-al website using relevant tools and metrics to determine energy consumption.   3.1   Setting  The School of Library and Information Science (SILS) at the University of North Carolina (UNC) at Chapel Hill is an educational organization that celebrated the 90th anniversary of its establishment this year [21]. SILS relies highly on Web technology and consumes significant amounts of data and energy for its day-to-day operations as an information school. With nearly 400 students, staff, faculty, and many visitors who visit the website frequently, the SILS website is presumably a high-traffic site, result-ing in energy consumption and gas emissions. In order to reduce the impact of SILS's digital presence on our environment, it is essential to take action with a sustainability plan. SILS can reduce its digital carbon footprint and energy consumption by imple-menting recommendations from this study. In addition, the findings of this study can also apply to other similar schools on campus. Ultimately, the impact of all UNC websites on the environment can be minimized considerably. 3.2  Data Tools We will adopt the following tools that have been used in previous studies to collect data on the site's web performance, content type and size, speed, user traffic, and screen time:  Google Page Speed Insights: is a Google's tool for evaluating webpage speed, deter-mining each web page's loading time and comparing the data with the average of all the pages that Google analyzes. Previous studies used this tool to assess websites' speed and web performance before implementing optimization techniques [22]. We will use it to examine which SILS webpages take longer than other pages to load and require more power. This Google tool also provides separate performance scores for mobile devices vs. PCs [23].    Pingdom: is a widely used speed testing tool analyzing how quickly web pages load. It uses a global network of testing centers to determine a site's speed in more than 70 regions [24]. In addition, Pingdom provides insights on server response times, host-ing, rendering and interaction times, content size by domain, and opportunities for improving page performance. One of the most important features of Pingdom is to break down the site based on content types and size and reveal which content compo-4 nent takes up the most storage size and consumes the most energy. Several studies used Pingdom to identify performance factors of websites and utilized the results to optimize the web components and minimize the code [25,26,27].  Google Analytics: provides statistics and essential website usage analytics for search engine optimization. Particularly, website performance tracking and visitor highlights are helpful metrics for performance optimization. Additionally, website traffic and screen time data [28] will help determine the overall energy consumption of a web-site. Previous studies have utilized this tool to evaluate the overall usability of e-commerce and food composition sites [29,30] or to reveal how visitors interacted with a library website, including the most visited pages and the screen time of each page [31].  Drupal: The SILS website uses Drupal to manage its content. The user interface and layout of the website are created mainly by customizing existing Drupal themes. Therefore, we will use Drupal to investigate the theme files and understand the rea-soning behind the site’s current layout.  3.3  Data Measures To assess environmental sustainability, we will consider the total energy consumption and CO2 gas emissions of the website and its components. Total energy consumption will be calculated based on the electricity that SILS website uses for data centers, transmission networks, and end-user devices. As shown in Table 1, the data we aim to collect will focus on two levels (i.e., network and software) and four measures (i.e., hosting, search engine optimization, performance optimization, web design, and user interface design). The data will be collected to explore the site's web performance, content type and size, speed, user traffic, and screen time.    Table 1. Overview of data measures Level Data Measures                     Metrics                Tool                 Software  Performance Op-timization  • Page speed • Content size (media, text, graphics in kB) • Code size (JavaScript, CSS) • Number of HTTP requests • Google Page Speed Insights • Pingdom • Google Analytics Search Engine Optimization  • Findability • Content Quality (links) • Google Analytics                Network Web Design & User Interface Design • Size and energy consumption of the design assets (color, font, layout in kB) • Code minification (CSS, JavaScript) • Media content roles (images, • Drupal • Pingdom 5 videos) Hosting • Green hosting • Pingdom    3.4 Data Analysis This study will analyze the collected data quantitatively using Microsoft Excel. De-scriptive statistics will be provided for each of the data measures. Sustainable web design strategies and recommendations will be generated based on the results.  4 CONCLUSION This study states the importance of web design in environmentally sustainable web presences and provides insights on sustainability measures in network and software levels. We aim to analyze the impact of web design on total energy consumption by conducting a case study on an institutional website. We will investigate sustainability indicators such as web hosting, performance optimization, and particularly web de-sign and user experience and utilize multiple web performance and tracking tools to analyze the impact of each indicator on the overall energy consumption of the site. Descriptive data analysis will help generate actionable insights into environmentally friendly user interface design strategies for digital devices.   References  1. Our Digital Carbon Footprint, https://en.reset.org/knowledge/our-digital-carbon-footprint-whats-the-environmental-impact-online-world-12302019, last accessed 10/10/2021 2. Internet Live Stats, https://www.internetlivestats.com/, last accessed 9/25/2021 3. Sustainable Web Manifesto, https://www.sustainablewebmanifesto.com/, last accessed 10/10/2021 4. Naveh, A., Rotem, E., Mendelson, A., Gochman, S., Chabukswar, R., Krishnan, K., Kumar, A.: Power and thermal management in the intel core duo processor. Intel Tech-nology Journal 10(2) (2006) 5. T. D. Burd and R. W. Brodersen, "Energy efficient CMOS microprocessor design," Proceedings of the Twenty-Eighth Annual Hawaii International Conference on System Sciences, 1995, pp. 288-297 vol.1, doi: 10.1109/HICSS.1995.375385. 6 6. E. Oliech and Xiaojun Ruan, "Survey on energy-efficient hard drive disks," 2017 Inter-national Conference on Computing, Networking and Communications (ICNC), 2017, pp. 929-931, doi: 10.1109/ICCNC.2017.7876257. 7. Ünlü, H., & Yesilada, Y. (2018). Energy Efficient Mobile Web via Scripts & Stylesheets Based Transcoding. 8. Thiagarajan, N., Aggarwal, G., Nicoara, A., Boneh, D., & Singh, J. P. (2012). Who killed my battery? Analyzing mobile browser energy consumption. Proceedings of the 21st international conference on World Wide Web  - WWW ’12 (pp. 41–50). Presented at the the 21st international conference, New York, New York, USA: ACM Press. 9. Zakas, N. C. (2013). The evolution of web development for mobile devices. Communi-cations of the ACM, 56(4), 42–48. 10. J. de Macedo, J. Aloísio, N. Gonçalves, R. Pereira and J. Saraiva, "Energy Wars - Chrome vs. Firefox: Which browser is more energy efficient?," 2020 35th IEEE/ACM International Conference on Automated Software Engineering Workshops (ASEW), 2020, pp. 159-165, doi: 10.1145/3417113.3423000. 11. Yu, B., Wang, L., & Manner, J. (2010, December). Energy-efficient web access on mobile devices. In 2010 IEEE/ACM Int'l Conference on Green Computing and Com-munications & Int'l Conference on Cyber, Physical and Social Computing (pp. 442-447). IEEE. 12. Willis, M., Hanna, J., Encinas, E., & Auger, J. (2020). Low power web: legacy design and the path to sustainable net futures. Extended Abstracts of the 2020 CHI Conference on Human Factors in Computing Systems (pp. 1–14). Presented at the CHI ’20: CHI Conference on Human Factors in Computing Systems, New York, NY, USA: ACM. 13. Boukema, A. (2017). Calculating the Energy Consumption of a Website. 14. Harter, T., Vroegindeweij, S., Geelhoed, E., Manahan, M., & Ranganathan, P. (2004). Energy-aware user interfaces: An evaluation of user acceptance. Proceedings of the 2004 conference on Human factors in computing systems  - CHI ’04 (pp. 199–206). Presented at the the 2004 conference, New York, New York, USA: ACM Press. 15. Y. Goyal, M. S. Arya and S. Nagpal, "Energy efficient hybrid policy in green cloud computing," 2015 International Conference on Green Computing and Internet of Things (ICGCIoT), 2015, pp. 1065-1069, doi: 10.1109/ICGCIoT.2015.7380621. 16. W. Deng, F. Liu, H. Jin, B. Li and D. Li, "Harnessing renewable energy in cloud data-centers: opportunities and challenges," in IEEE Network, vol. 28, no. 1, pp. 48-55, Jan-uary-February 2014, doi: 10.1109/MNET.2014.6724106. 17. Morley, J., Widdicks, K., & Hazas, M. (2018). Digitalisation, energy and data demand: The impact of Internet traffic on overall and peak electricity consumption. Energy Re-search & Social Science, 38, 128–137. 18. Pandikumar, S., P. Kabilan, S., & Amalraj, L. (2012). Green IT: A study and analysis of environmental impact of social networks and search engines. International Journal of Control and Automation, 60(6), 17–22. 19. Frick, T. (2016). Designing for sustainability: a guide to building greener digital prod-ucts and services. " O'Reilly Media, Inc.". 20. Lawrence, D., & Tavakol, S. (2007). Balanced Website Design. London: Springer London. 21. SILS Homepage, https://sils.unc.edu/, last accessed 10/1/2021 22. Pushkar, O., Hrabovskyi, Y., & Gordyeyev, A. (2020). Development of a Method for Optimizing the Site Loading Speed. Eastern-European Journal of Enterprise Technol-ogies, 6(2), 108. 7 23. Google Page Speed Insights, https://developers.google.com/speed/pagespeed/insights/, last accessed 10/3/2021 24. Pingdom, https://www.pingdom.com/, last accessed 10/1/2021 25. Asmaran, M. (2016). Quantitative & Qualitative Evaluation of Three Search Engines (Google, Yahoo, and Bing). American Scientific Research Journal for Engineering, Technology, and Sciences (ASRJETS), 26(2), 97-106. 26. S. Gopinath, V. Senthooran, N. Lojenaa and T. Kartheeswaran, "Usability and accessi-bility analysis of selected government websites in Sri Lanka," 2016 IEEE Region 10 Symposium (TENSYMP), 2016, pp. 394-398, doi: 10.1109/TENCONSpring.2016.7519439.Harper, S., & Yesilada, Y. (Eds.). (2008). Web accessibility: a foundation for research. Springer Science & Business Media. 27. Król, K. (2020). Comparative analysis of selected online tools for JavaScript code min-ification. A case study of a map application. Geomatics, Landmanagement and Land-scape. 28. Google Analytics, https://support.google.com/analytics/answer/7421425?hl=en&ref_topic=3544907, last accessed 10/3/2021 29. Hasan, L., Morris, A., & Probets, S. (2009, July). Using Google Analytics to evaluate the usability of e-commerce sites. In International Conference on Human Centered De-sign (pp. 697-706). Springer, Berlin, Heidelberg. 30. Pakkala, H., Presser, K., & Christensen, T. (2012). Using Google Analytics to measure visitor statistics: The case of food composition websites. International Journal of In-formation Management, 32(6), 504-512. 31. Fang, W. (2007). Using Google Analytics for improving library website content and design: A case study. Library philosophy and practice, 9(2), 22.   

Sustainable user interface generation for digital devices: A case study

https://www.ideals.illinois.edu/bitstream/2142/113736/1/ilica_et_al_abstract.pdf

Sustainable user interface generation for digital devices: A case study

Abstract

Similar works

Full text

Available Versions

Illinois Digital Environment for Access to Learning and Scholarship Repository