Next Article in Journal
Non-Linear Analysis of R.C. and P.R.C. Girder Bridges
Previous Article in Journal
Safety in Traffic Management Systems: A Comprehensive Survey
 
 
Font Type:
Arial Georgia Verdana
Font Size:
Aa Aa Aa
Line Spacing:
Column Width:
Background:
Article

Sustainability at Home: The Development of an Efficient Framework for Home Energy-Saving Applications

1
Department of Architecture and Planning, School of Architecture, Art, and Design, King Mongkut’s Institute of Technology Ladkrabang (KMITL), 1 Chalong Krung, Lat Krabang, Bangkok 10520, Thailand
2
Department of Communication Art and Design, School of Architecture, Art, and Design, King Mongkut’s Institute of Technology Ladkrabang (KMITL), 1 Chalong Krung, Lat Krabang, Bangkok 10520, Thailand
*
Author to whom correspondence should be addressed.
Designs 2023, 7(4), 101; https://doi.org/10.3390/designs7040101
Submission received: 18 July 2023 / Revised: 7 August 2023 / Accepted: 9 August 2023 / Published: 16 August 2023

Abstract

:
Energy consumption is increasing due to the rise in the world population, industrialization, and urbanization, particularly in the residential sector, attributed to a lack of user-friendly tools. This study seeks to create a research framework and wireframe for home energy-saving applications. A systematic literature review (SLR) was conducted using the VOSviewer software version 1.6.18 tool to pinpoint the research problems. Three key research problems were identified: Inadequate information presentation for both experts and non-experts, insufficient consideration for middle-aged and elderly users, and difficulties in interpreting graphics or images on the application’s display screens. This qualitative research involved three rounds of co-creation activities with nine experts and nine non-experts to identify major problems and preliminary solutions. As a result, two key issues were addressed from the qualitative data: The problem of area calculation, resolved by simplifying data entry processes, and the issue of material selection within homes, improved by incorporating illustrative images with concise, easily understandable descriptions. The outcome of this research is a framework and wireframe that lays the groundwork for developing user-friendly applications that promote sustainable behaviors in residential energy usage. This research contributes valuable guidelines for developers and stakeholders to create more efficient and user-friendly applications, thus promoting environmental action and sustainable practices in residential settings.

1. Introduction

Worldwide, energy consumption is increasing due to the growth of the world population, industries, and urbanization. From 2017 to 2050, global energy consumption is anticipated to rise by 29.7% [1,2]. According to the United Nations Environment Program (UNEP), residential and commercial buildings consume 60% of worldwide electrical energy, with a growing trend over time [2].
Strategies to reduce energy consumption have been proposed and implemented in the industrial sector by enhancing industrial production, an urgent necessity. However, in the residential sector, the usage and energy demand of residential energy consumption has increased in the last 10 years. Home users lack support and user-friendly tools for measuring their daily activities [3,4].
A number of studies have focused on reducing domestic energy loads, which impact overall energy consumption as the main sustainable issue [5,6,7]. This circumstance necessitates the development of new energy management systems [8]. For example, studies suggest the Internet of Things (IoT) paradigm, which allows heterogeneous objects to communicate and cooperate dynamically [2], the Industrial Internet of Things (IIoT), which connects interconnected devices with computers’ industrial applications, and energy management [9] and AI-Assisted in IoT-based Smart Microgrid [10].
In Thailand, the Department of Alternative Energy Development and Efficiency and the Ministry of Energy collaborated and set up the goal to reduce energy consumption in the residential sector by 15%, which was in line with the 20-year energy conservation plan. As a result, researchers created a computer program called COMET_61 (2018), which tests the benchmark of the energy efficiency of homes in Thailand to help obtain information to verify that home energy consumption was appropriate for the nature of the established benchmark [11]. In the evaluation stage, all three training sessions found a high level of efficiency. However, technicians and general users pointed out the difficulty of using the programs due to the confusing interfaces, point displays, data, and graphics. This was because the computer program was not designed to consider user-centered design principles, resulting in errors and problems. These comments and issues are similar to the following results from the worldwide energy-saving application studies:
  • The presentation of information remains inadequate in terms of providing comprehensive understanding for both experts and non-experts [12,13,14,15].
  • Mobile applications do not adequately consider middle-aged and elderly users [12,13,14,16].
  • Communication through graphics or images on the application’s display screen is difficult for users to understand [12,13,14].
Nevertheless, the issues identified regarding information presentation, user considerations, and communication challenges are not limited to residential settings alone. Some studies share similar problems and report in other contexts, such as workplaces [17] or educational institutions [18], impacting and requiring overall energy efficiency and sustainability efforts. For example, Wang et al. (2021) present the climate change problem with serious information through a VR game called PEAR, increasing user knowledge. Moreover, Tekler et al. (2022) present smart energy management systems for workplaces with seven factors to gain user understanding and motivation through the application SEMS.
Therefore, the aim of this research is to develop a research framework and an application wireframe that meets the needs of users and provides understanding, applying user experience design (UX), user interface design (UI), and user-centered design (UCD) processes to energy consumption applications for residential homes by using the case study that researchers developed of the program COMET_61. To achieve this, this research set targeted users into four groups, covering experts/non-experts and young adults/middle-aged adults, as depicted in Figure 1.
The outcome of this research could be applied to expand the knowledge of user-centered design principles, user experience design (UX), and user interface (UI) in energy-saving applications within other sectors, such as residential homes, workplaces, and educational institutions, which creates effective presentations and user-friendly applications, achieving the final goals of understanding the sustainable issue and reducing energy consumption across various sections.
Moreover, the findings could offer practical solutions, such as simplifying data entry, incorporating illustrative images with concise descriptions, and minimizing cognitive user load by incorporating feedback and engagement through co-creation activities. The research findings, framework, and contributions can be instrumental in achieving energy efficiency, reducing environmental impact, and advancing sustainable practices in residential settings and other areas.

1.1. Research Gaps

This research identifies gaps by exploring the interrelationships among three variables: Applications, UCD, and energy data. This information was derived from the literature review presented in Section 2, covering the period from 2013 to 2022. The search was conducted by pairing two keywords at a time. The results of the data search are presented in Figure 2.
In search results from the pair of variables “application” and “UCD,” researchers discovered several themes. Most of these themes, however, were predominantly related to the following:
Further, when examining the results from the “UCD” and “energy data” pairs, it was found that these variables shared themes such as:
  • Integration of information technology with the public health system (e-Health) [28].
  • Smart homes, building monitoring, and building information modeling [29,30,31,32].
From the “energy data” and “application” pairs, the prevalent themes revolved around:
  • Mobile health and palliative care [33,34].
  • Smart home [35,36,37,38,39].
From this research gap, it can be concluded that the majority of the research from these three variables centers on health and smart homes. However, no research has focused on energy data-related applications applying UCD principles. Therefore, researchers suggest resolving these gaps by applying UX, UI, and UCD principles to design a user-friendly energy-saving home application.

1.2. Background: Computer Program to Test Benchmark of Homes’ Energy Efficiency in Thailand: COMET_61

This program assists in data entry to assess the energy usage of residential buildings according to the appropriate criteria set by the established standards. The energy efficiency standards for newly constructed residential buildings after 2018 can be checked through the architectural design process, specifically by examining the electricity consumption of the air conditioning and lighting systems. The energy efficiency standard for detached houses is 25 kWh/sq. m./yr, while the standard for townhouses and semi-detached houses is 44 kWh/sq. m./yr. Therefore, residential buildings that meet these criteria are categorized as detached houses, townhouses, or semi-detached houses newly constructed after 2018. These standards align with the energy efficiency plan for the years 2015–2036, which aims to achieve a 15% reduction in the total power consumption, including commercial and renewable energy, by 2036 (baseline 2015) (Study for Establishing Energy Efficiency Standards for Residential Buildings, Provincial Electricity Authority, 2018).
The program developed to test the energy efficiency standards of residential buildings in Thailand for 2018 focuses on assessing electricity consumption in two main residential-building categories: Detached houses and townhouses or semi-detached houses. These two types of residential buildings represent approximately 70% of the total residential buildings in the country. The program operates in two modes: An optional mode and a mandatory mode.
In the optional mode, the program provides a simple assessment by allowing the inspector to input information regarding the building envelope and key system data related to air conditioning in the area to be analyzed. The program then compares the input data with reference values and immediately evaluates whether the residential building meets the energy efficiency standards.
To use the calculation system, users must enter room details and materials. The main menus are as follows: (1) The room’s name, (2) the type of area whether it is air-conditioned or non-air-conditioned, (3) the size of the air-conditioned area, (4) number of users, (5) number of lighting equipment, and (6) number of air conditioning equipment. After that, the program will display a summary report of energy consumption in the home to show the calculation results in ‘pass or fail’.
This research article is organized as follows: Section 2: Literature Review, which covers topics such as systematic literature review, user experience (UX) design and user interface (UI) design in applications, UI with energy-saving technology, application development based on user-centered design (UCD) principles, ergonomic design principles, and the creation of a research framework. Section 3: Methods, detailing the qualitative research method used, with specific emphasis on co-creation activities. Section 4: Results, presenting the findings of the co-creation activity—this includes Phase 1, which focuses on UX behavior, and provides a summary of Phase 2 of the co-creation activity. Section 5: Discussion, providing analysis and discussion of the results obtained from the collaborative activity. Section 6: Conclusions, wrapping up the research by emphasizing the importance of energy conservation and sustainable practices in residential homes, highlighting the study’s limitations, and discussing the implications of this research for other sectors.

2. Literature Review

2.1. Systematic Literature Review

The primary objective of this part was to identify issues related to applications in the field of homes and energy through a systematic literature review (SLR) of relevant case studies and research works. To conduct the search, keywords such as “application”, “user experience”, “interface”, and “home/energy” were utilized. ScienceDirect served as the primary database for this study, and the inclusion and exclusion criteria for the search were established based on the information in Table 1.
In the initial search, a total of 515 studies were identified in ScienceDirect with the aforementioned keywords. The researchers then narrowed down the search to include only studies published between 2013 and 2022, resulting in 201 studies. The inclusion criteria were further refined to only include review articles, reducing the total number of studies to 97, as illustrated in Table 2. The identified studies were further categorized by year, as outlined in Table 2 and Figure 3. The most frequently cited studies from the SLR are presented in Table 2.

Word Co-Occurrence Cluster Analysis

In this process, an analysis was conducted of co-occurrence patterns among various elements, such as keywords, publication titles, and main topics, to identify the most prominent topics. As seen in Figure 4 and Figure 5, the results of the analysis indicated that the most prominent keywords were “usability” (15), “user experience” (14), and “user interface” (13). This type of analysis is often used to identify connections and trends between different disciplines and to define the scope of research. The software tool VOSviewer was used to conduct this analysis, which provided an overview of the relationships between the terms based on the number of co-occurring articles.
In the final step, the researchers read all 97 articles, looking at the title, abstract, and keywords in detail and browsing through the full articles. The studies that did not meet the criteria of inclusion in this stage with relevance to the keywords “application”, “user experience”, “user interface”, “energy-saving home”, and “home/smart home/home energy” were removed.

2.2. UX and UI Design in Application

Applications must have what is known as a user interface (UI) to present screen designs (e.g., icons, colors, layout, pictures) and should optimize the UX, which is what users experience while using the application [48]. The UX encompasses the overall feeling and perception users have while interacting with a product, application, system, or service. This encompasses a wide range of factors, such as ease of use, navigation, and relevance of the content displayed [49]. Designers should follow the principles of “why, what, and how” when creating products, as illustrated in Figure 6 [50,51]. However, it is essential to ensure that the product’s central concept remains intact while providing a seamless and smooth experience for users.
The UI is responsible for using design elements such as typography, icons, and images to transform a basic interface into an attractive and easy-to-use one. It is the process of creating a visually appealing layout and graphical user screen that enhances the product’s usability and creates an emotional connection for the end-user [52,53].

2.3. UI with Energy-Saving Technology

Nevertheless, the UI topic, specifically the technical area of energy-saving information representation, is quite limited. It requires not only design and esthetics but also a correct and effective presentation of technical information without confusion. Koskela and Väänänen-Vainio-Mattila (2004) [54] recommend that designers focus on familiar UI for smart home functions to achieve optimal user experience. Users do not want to learn interaction techniques and interfaces from technical manuals. Their research focuses on how different UI solutions for smart homes deal with different types of user activity patterns and presents two main themes: (1) “pattern control”, allowing users to control and set up the planned automation, and (2) “instant control”, which is currently the principle that enables users to control the interaction devices.
Moreover, Tekler et al. (2020) [55] recommend an interface named “energy dashboard”, which presents real-time energy usage feedback in homes and offices. This dashboard’s UI should include an “eco-feedback” menu [56] about reducing energy tips, comparing energy consumption with their neighborhood, and creating sustainable behaviors.
Tekler et al. (2022) [57] also developed a UI for an interactive energy dashboard in smart buildings, allowing users to learn more about their energy consumption through interactive visualizations. The UI of their work starts with “control interface” as the main display with three different menus: (1) “remote control”, enabling users to switch on/off remotely, (2) “presence-based control”, which allows setting specific time intervals for each plug load, and (3) “schedule-based control”, helping to set each plug load on different days.
In addition, regarding how to apply UI with the technology of energy-saving applications, recent studies suggest relating to several technology areas, such as (1) human–machine interaction (HMI), a UI connecting users to a device or system [58], (2) supervisory control and data acquisition, which helps to control and observe applications and systems remotely [59], (3) Internet of Things energy systems—both hardware and software—to remotely monitor energy management [60], and (4) smart grids control, presenting visual data about energy saving with improved reliability and more efficiency [61].
Understanding these specific energy-saving UI aspects is vital for developing effective energy interfaces and technologies with comprehensible and precise information, causing changes in sustainable energy behaviors.
In short, presented in Table 3, UX design is the process of designing and delivering a high level of user satisfaction, ease of use, and a clear sequence of steps to create a positive user experience. The UI connects design concepts, such as placement, images, buttons, and font size. Based on the issues discussed above, such as confusing interfaces and unfriendly experiences, researchers suggest applying these design principles to improve energy-saving home applications.

2.4. Application Development Based on UCD Principles

Pioneered by Norman and Draper, UCD focuses on the importance of understanding users’ needs in every design process, from service to product. The purpose of the system is to serve users and place them at the heart and center of the design [62]. Furthermore, the design team engages with users through research techniques and methods to create a highly user-friendly and accessible product or service [63,64,65,66].
This design process begins with understanding the context of use. Specifying users’ needs leads to solutions for design and evaluation problems, which can be looped back and forth at each step of the process to create the best UX, as shown in Figure 7.

2.5. Ergonomic Design Principles

In addition to addressing the challenges related to information presentation and user understanding in energy-saving applications, it is imperative to consider the ergonomic design of UIs. Ergonomic design principles, including cognitive ergonomics, are vital in optimizing UX, UI, UCD, and cognitive performance [67,68,69].
Guidelines like the International Society of Automation’s (2015) HMI standard (ISA101) emphasize the importance of cognitive ergonomics, which focuses on understanding and enhancing the perceptive processes involved in human–machine interactions [67].
By incorporating cognitive ergonomics principles into the design process, UIs can be tailored to meet the target users’ cognitive abilities, expectations, and limitations. Factors like information organization, visual hierarchy, clarity of communication, and ease of interaction can significantly impact user engagement, efficiency, and satisfaction [69].
While this study focuses primarily on addressing the information representation and user understanding challenges in energy-saving applications, it is essential to acknowledge the significance of ergonomic design principles in enhancing usability and user experience [70]. As a result, energy-saving applications can provide intuitive and user-friendly interfaces that promote efficient energy management and support sustainable practices in residential homes.

2.6. Creating a Research Framework

Considering the three main problems mentioned in the introduction, the researchers propose the framework in Figure 8. First, designers should apply UCD principles since iterative processes range from understanding the usage context to identifying user needs, finding solutions to design problems, and evaluating and repeating stages again. Next, they should adopt UX designs to set up the questions of why, what, and how in the use of energy-saving home applications to create meaningful and smooth experiences for users. Last, applications should adopt UI designs to create attractive UIs and enhance the usability and desirability of products, which involves (1) putting the user in control, (2) reducing the burden of user recognition, and (3) creating a consistent interface.

3. Method

This research employed a qualitative research method through co-creation activities, as illustrated in Figure 9. Co-creation refers to involving users and stakeholders in creating a new service system (Thailand Creative and Design Center 2022) [71] by bringing in experts in architecture, engineering, and related fields, in addition to stakeholders who will offer diverse perspectives, thereby providing a sense of ownership in the resulting design work. The researchers divided the co-creation activities into two phases, as follows:
Phase 1: Issues related to UX design behavior
Phase 2: Issues related to the UX design process
Figure 9. Plan of action for collecting data in collaborative ideation activities.
Figure 9. Plan of action for collecting data in collaborative ideation activities.
Designs 07 00101 g009
This research used purposive sampling of a targeted group of experts in architecture, engineering, UX/UI design, or related fields who had more than 10 years of experience and/or were university professors as well as non-expert groups, each of which consisted of nine individuals who did not meet the above criteria.
From the initial operational plan, the researchers chose the co-creation method to collect data on the factors that cause problems and obstacles in energy-saving home applications because they have experience conducting this program. The activity was divided into two phases to create tools, as discussed below.

3.1. Co-Creation Activity Phase 1: Study the Issue of UX Design Behavior

This phase began by collecting preliminary program usage data from participating groups through analysis using the fishbone diagram tool, which shows the relationship between all problems and causes. It is a chart that resembles a fish, comprising a fish head, bone structure, central axis, and fishbones. The problem is indicated with the head of the fish, the main cause of the problem is marked with an arrow entering the central axis, and the possible sub-causes that may cause the problem are marked with arrows pointing to the main cause. Data on selecting problem-solving strategies based on the principle of interface design with users (i.e., the UI) were collected in the form of a morphological chart structure for use in creating problem-solving ideas. The researchers allowed participants to freely express their opinions.

3.2. Co-Creation Activity Phase 2: Study the Issue of the UX Design Process

The researchers developed a design framework in the form of a diagram to present the problem-solving strategies resulting from the sub-project’s conclusions from Phase 1 using PowerPoint 2019 software. They also created a wireframe design concept in the first step in the design process, which included basic images or black-and-white sketches and diagrams of web application designs using Figma 2023 software, a design tool for UX/UI designers. Participants began reviewing the design framework and wireframe designs for the energy-saving home application monitoring the UX. The researchers allowed participants to freely express their opinions.

4. Results

The researchers divided the activity into two phases, with data collection divided into two groups: Expert and non-expert.

4.1. Results of the Co-Creation Activity: Phase 1 Focused on UX Behavior

The researchers divided the data collected from the activity into two parts: (1) Analysis of problems that arose after using the program and (2) a presentation of ideas for solving problems related to UX behavior, which were studied after the participants tried the program. The results of the data collection are summarized below.

4.1.1. Results of Problem Data Collection Using the Fishbone Diagram from the Two Activity Groups

The fishbone diagram tool was used to analyze and demonstrate the relationship between problems and their causes. The problems and the sub-causes that contributed to those problems were identified. The researchers summarized the problems found on each page of both groups (red = expert group, green = non-expert group) in Figure 10.
The results of the problem data collection from Application Page 1 are as shown in Figure 11, and the top three problems were found to be (1) unclear font colors that made rounded letters hard to read, (2) unclear text with difficult-to-read fonts, and (3) screen layouts with various components positioned in a way that strained the eyes.
The top three concerns are summarized by the problem data gathering on application pages (presented in Appendix A):
Application Page 2: (1) The one color used for writing, which makes it boring and difficult to read, (2) the problem of giving too much information, and (3) the discrepancy between the information and the presentation because of the overuse of technical words.
Application Page 3: (1) Difficulties viewing small-sized interface elements, (2) confusion between clickable and input fields, and (3) the need to input a large amount of detailed information, which can be challenging to users.
Application Page 4: (1) Unclear and hard-to-read text, (2) difficult-to-find clickable buttons, and (3) unattractive background colors and other components that did not make the system appealing to use.
Application Pages 5, 7, and 9: (1) Unclear and difficult-to-read text, (2) excessive amounts of presented data that made it appear cramped, and (3) unnecessary use of images that did not enhance understanding when not properly explained.
Application Pages 6, 8, and 10: (1) Difficulties understanding the layout and arrangement of different components on the screen, (2) unclear and difficult-to-read text, and (3) unappealing background colors and other components that did not entice users to use the application.
Application Pages 11 and 12: (1) Difficulties navigating and placing elements on the screen, (2) unclear and hard-to-read text, and (3) the position of input fields that made clickable and non-clickable areas indistinguishable.
Application Page 13: (1) Presenting data that lacked a summarized result, (2) difficulties understanding the system’s criteria for passing or failing the evaluation process, and (3) image presentation that did not change according to the calculation, making it difficult to distinguish between the final step and the end of the evaluation.
After testing the sample program, the problems were ranked and converted in percentage presented in Figure 12 as follows: Unclear and difficult-to-read text (5), Difficulties placing different screen parts (4), Presenting too much data per screen (3), Usability issues (3), Unclear font colors (2), Difficulties distinguishing input and non-input fields (2), Unattractive backgrounds and components (2), Image presentation problems (2), and Inconsistent and poorly presented data (1), respectively.

4.1.2. Results of Data Collection on Solution Selection According to the Established Goals Using Morphological Charts

The two groups of participants (experts and non-experts) used the morphological charts tool, and the activity of generating joint problem-solving ideas was carried out. The problem and the problem-solving methods were discussed one by one, and the participants selected the desired solution paths. The researchers summarized the results of the problem-solving approaches that both groups desired as follows.
The result of data collection on the selection of problem-solving approaches on Application Page 1 (Figure 13).
The results of the selected solutions for problem-solving that were identified by both groups were summarized by the researchers. The table below shows the most frequently chosen solutions on Application Page 1 (Table 4).
The most commonly identified solutions to the problem presented in Section 1 are: Placing the buttons in the center of the screen, the enhancement of the logo and the text below for clearer visibility, the modification the font color to improve legibility, the development of a new layout for visual components, the addition of the program name and provide a concise objective statement, and adjust the image perspective used in the presentation, respectively.
The result of data collection on the selection of problem-solving approaches on Application Page 2 (Figure 14).
The researchers summarized the results of data collection and the selection of problem-solving strategies from both groups together. The most selected items found on Application Page 2 are shown in Table 5.
The most frequently selected solutions for problem-solving together on Application Page 2 are the use of infographics or images instead of text and the use of easy-to-understand communication.
The result of data collection on the selection of problem-solving approaches on Application Page 3 (Figure 15).
In Table 6, the common solutions found for the problems on Application Page 3 are presented.
The selected problem-solving approaches that were found most frequently on Application Page 3 are: The pop-up explanations to clarify meanings, the adjustment of font size and color, the adjustment of the position of various parts of the screen to respond to expansion, relocation of the position of the input fields located in the center. The adjustment of the house image to match the selected house type, and the description of a separate page indicating what data need to be prepared before use.
The result of data collection on the selection of problem-solving approaches on Application Page 4 (Figure 16).
The researchers were able to summarize the results of data collection and selection of problem-solving approaches from both groups and found the most selected solutions on Application Page 4, as shown in the following Table 7.
The most common solutions identified to address the issues based on the collaborative selection of methods on Application Page 4 are: The change in the font size and color to be complementary, modification of the background color to be more appealing, the adjustment of the positioning of various elements on the screen, and the alignment of the visual elements consistently with the previous pages.
The result of data collection on the selection of problem-solving approaches on Application Pages 5, 7, and 9 (Figure 17).
The researchers summarized the results of the data collection and selection of problem-solving methods from both groups together and found that the most selected options on Application Pages 5, 7, and 9 are as shown in Table 8.
The most frequently selected solutions for problem-solving from both groups that were found on Application Pages 5, 7, and 9 are: The use of a step-by-step approach for the user to check each item rather than displaying all at once, the use of 3D images and allow clicking on the image instead of using buttons, with added highlighting to indicate where the user clicked, adjusting the font color to a complementary pair of colors, adjusting the background color to be in the same tone, make the layout of various screen components responsive to user zooming, providing pop-up explanations for terms or items, respectively.
The result of data collection on the selection of problem-solving approaches on Application Pages 6, 8, and 10 (Figure 18).
The researchers summarized the results of the collected data and selected solutions from both groups, finding the most commonly selected options on Application Pages 6, 8, and 10, which are shown in Table 9.
The most commonly selected solutions for problem-solving found on Application Pages 6, 8, and 10 are: Collaboration of the private sector and using the company’s material templates (with pictures), removal of unnecessary text, the design of clickable areas to be distinctive and clear, and having pop-ups to show more information, respectively.
The result of data collection on the selection of problem-solving approaches on Application Pages 11 and 12 (Figure 19).
The most common solutions on Application Pages 11 and 12 are shown in Table 10.
The most commonly selected solutions to the problems identified from both groups found on Application Pages 11 and 12 are: The use of the 3D images and clickable areas instead of button selection, with highlighted indicators for the clicked areas, the adjustment of the font color to complementary pairs, the removal of unnecessary words, such as “standard value” and “existing value”, addition of user manuals, and addition of options for selecting the type/quantity and perform the selection by clicking, respectively.
The result of data collection on the selection of problem-solving approaches on Application Page 13 (Figure 20).
The most common solutions for Application Page 13 are presented in Table 11.
The most commonly selected solutions for problem-solving found on Application Pages 13 are: The addition of a summary page of calculation results showing whether it passed or not, the change of the color of the font, removal of unnecessary words, such as “standard value” and “current value”, the addition of indicator bars to show which parts passed or not, the addition of additional page of solutions on how to pass all, respectively.
From the collaborative activity to study issues related to UX design behavior of the program, the researchers summarized the data collection and design approaches to solve user problems that were in line with user requirements. It was found that both the expert and non-expert groups had a similar direction in problem-solving: To make the system user-friendly and attractive, ensuring continuity of use. The non-expert group was able to calculate the energy value despite not knowing the formulae or having the expertise of the other group. This led to the second co-creation activity in the issue of the UX design process for the next application.

4.2. Summary of Co-Creation Activity: Phase 2

The researchers divided the data collected from the co-creation activity into two parts: The results of developing the framework design and the wireframe design. The main objective was to create designs that could be used by certain user personas, with a focus on non-expert groups.

4.2.1. Analysis Results and Framework Development

The activity of presenting the framework, which was derived from the data collected in the first phase of the activity, showed the scope of the system in each topic, specifying subtopics in each part. The researchers summarized the considerations of both groups in the framework below (Figure 21).
The framework proposed by the researchers added three new parts that were not present in the original program in addition to the old framework, making a total of five parts. The added parts included:
A configuration section, which included theme, language, and font size. The group of experts and non-experts did not have any additional issues in this section.
An about section, which explained the background of the standard energy performance criteria for residential homes and specifications, including calculation methods. The group of experts provided additional comments in the contact section, suggesting future contact with standard setters, application developers, or related agencies directly in case of any discrepancies or questions, as well as a clear division of the contact department. Meanwhile, the non-expert group only required a single contact channel to reduce confusion or usage difficulty.
A summary section, where the evaluation results were summarized, and the calculators recorded the summary results. Neither the expert nor non-expert groups had any additional issues in this section.
Except for future recommendations that they would like to see, there were no additional comments or suggestions for improvements to the researchers’ proposed five parts.

4.2.2. Analysis Results and User Experience Development in Wireframe Design

The results of the co-creation activity in the first wireframe design UX development were included for improvement according to the problem-solving guidelines selected by both the expert and non-expert groups. The researchers designed with Figma, a tool for designing websites, applications, logos, and more. The researchers provided wireframes to the participants prior to the event for them to try on computers or smartphones via a web link to identify any additional issues for improvement during the activity.
The researchers presented the development of the UX in wireframe design to both expert and non-expert groups topic by topic according to the framework development guidelines. The results of the evaluation showed that the non-expert group had difficulty understanding or using two sections related to homes or calculations.
Part 1: Entering home area data
In this section, users had to enter data, which posed a problem for non-expert users, who were unable to calculate or use it. Part of this was the calculation of the total area of the house and the specific area that was air-conditioned. If the space where the area was measured was not a square or rectangle, users were unable to calculate it. For example, the area of a room that was shaped like an L had to be divided into two rectangles.
Part 2: Calculating electricity usage in residential buildings
In this section, users had to select the five components of the house that affected the calculation of electricity usage in residential buildings: The roof, openings, and windows (only for air conditioning), solid walls, lighting systems, and air conditioning systems. This posed a problem for non-expert users, who did not have the specific knowledge of the different materials that the expert group had, making it difficult to decide which material to choose. For example, the material used in the current house may not have matched any of the options in the application, which could have resulted in inaccurate calculations or failure to meet energy efficiency standards for residential buildings.
Considering the activity of collaborative thinking in Phase 2, where the issues related to the Figma program design process were studied, the main objective was to design the user personas for those who would be able to use it. The focus was on non-expert users, and it was found that this group wanted to reduce the complexity and confusion of material selection. They saw the application as a preliminary screening process before experts calculated the details.

5. Discussion

From the research results of the collaborative activity, it was found that only the group of experts was able to understand the purpose of the electricity consumption calculation application. Problems that arose included difficulties calculating the area of the house, lack of knowledge of the type of material used in construction, and the inability to read the energy values of lighting or air conditioning systems. These issues affect the calculation of energy efficiency standards for the home. If users cannot input data correctly, it may result in inaccurate calculations. This is consistent with the research findings of the two main issues, particularly the presentation of information, which was unable to provide understanding for both experts and non-experts [12,14,15,63,64,66].
In addition to usability issues, problems were found with the UI that stemmed from flaws in the UX research on the design of the first-generation calculation program. This involved graphic communication, icons, colors, illustrations, and typography, all of which were elements of the application’s screen display that were difficult for users to understand. This is also consistent with the research findings [12,13,14].
In brief, the results are similar to those of previous studies on these issues: User-friendly interfaces, considering factors such as color, typography, layout, and responsiveness [12,13,14], usability issues and user understanding and interaction [63,64], design flaws to enhance user comprehension and engagement [12,14], clear and understandable content, especially for non-expert users [15,63,64], identifying users’ needs and preferences through research gaps [12,13,15].
By studying the problem until a solution was found, a joint approach was developed for designing home- and energy-related applications as follows.
  • Problem—unclear and difficult-to-read text and unclear colors (font, background, and components)
Solution—the screen must be able to adjust responsively according to the zoom level, including utilizing colors based on the principles of complementary color design as well as what is suitable for the vision needs of the users’ age range, such as warm tones for middle-aged or elderly people.
2.
Problem—difficulties placing different screen parts and distinguishing input and non-input fields.
Solution—the arrangement of the reading order should follow the eye’s path, such as from left to right and from top to bottom. In order to reduce confusion in the sequence, it should not return to the previous path, and it should create a visual contrast, using thick border lines around the cells and making clickable buttons solid and without borders.
3.
Problem—usability issues.
Solution—the content should be easy to understand at a basic level, such as providing simple demonstrations for the area calculation and selecting building materials based on pictures.
4.
Problem—user experience issues:
Solution—as presented in Table 12 and Table 13.

6. Conclusions

This research addressed the need for energy conservation and sustainable practices in residential homes, with the scope and focus on sustainable issues and reducing energy consumption. The article proposed a collaborative design framework including expert and non-expert groups to solve problems. First, the study tackled key problems, including the inadequate presentation of information, lack of consideration for diverse user groups, and difficulties in understanding graphical communication. Next, it applied an SLR and word co-occurrence cluster analysis using the VOSviewer software to analyze shared problems and identify prominent topics, such as usability, UX, and UI. The study found that the mobile application did not consider users’ needs, especially for middle-aged and elderly users, resulting in communication difficulties with its display screen.
To respond to the aim of this research (to develop a research framework and an application wireframe that meet the needs and understanding of users), the researchers proposed a research framework (Figure 8), a diagram (Figure 21), and a wireframe (Figure 22) for future prototype development.
The implications of this research extend beyond residential homes and can be applied to various areas. Some potential areas where this research can have implications include the following: (1) Workplaces: Designing UIs that address employees’ needs and preferences can facilitate effective energy management in office buildings, factories, and other work environments. (2) Educational Institutions: It could provide students, teachers, and staff with user-friendly interfaces that promote energy-conscious behaviors. (3) Public Spaces, such as parks, transportation hubs, and community centers: UIs in these contexts can provide real-time information and interactive features that promote sustainable energy use and raise awareness among the general public.
Regarding the study’s limitation, further studies should consider expanding the number of participants to validate the findings and enhance the generalizability of the research. Diversifying the non-expert design group is also crucial to obtain a broader perspective and ensure that the designed UIs cater to a wide range of user backgrounds and preferences (e.g., occupations, ages, and lifestyles).
Moreover, future study issues are suggested as follows: (1) Collaboration and interdisciplinary research from different disciplines, such as art, design, architecture, science, ICT, and engineering. This can lead to innovative home energy applications, (2) stakeholder engagement involving end-users, industry professionals, and policymakers in the research process. This enables researchers to gain insights into real-world needs and ensures the relevance and applicability of their findings, (3) long-term monitoring and evaluation, which allows researchers to assess the long-term effectiveness and sustainability of their interventions and identify areas for further improvement.
By considering the application of this research in such areas and beyond, the findings can have significant implications for promoting sustainable practices, enhancing energy efficiency, and mitigating environmental impact in various settings.

Author Contributions

Conceptualization, S.T. and K.K.; Review and analysis, S.T. and K.K.; writing-original draft preparation, S.T. and K.K.; All authors have read and agreed to the published version of the manuscript.

Funding

This research was supported by School of Architecture, Art, and Design, KMITL.

Institutional Review Board Statement

Not applicable.

Informed Consent Statement

Not applicable.

Data Availability Statement

Not applicable.

Conflicts of Interest

The authors declare no conflict of interest.

Appendix A

Summary of the data collection for the identified problems, Application Page 2 (red is for experts, green for non-experts).
Designs 07 00101 g0a1
Summary of data collection for the identified problems, Application Page 3 (red is for experts, green for non-experts).
Designs 07 00101 g0a2
Summary of data collection for the identified problems, Application Page 4 (red is for experts, green for non-experts).
Designs 07 00101 g0a3
Summary of data collection for the identified problems, Application Pages 5, 7, and 9 (red is for experts, green for non-experts).
Designs 07 00101 g0a4
Summary of data collection for the identified problems, Application Pages 6, 8, and 10 (red is for experts, green for non-experts).
Designs 07 00101 g0a5
Summary of data collection for the identified problems, Application Pages 11 and 12 (red is for experts, green for non-experts).
Designs 07 00101 g0a6
Summary of data collection for the identified problems, Application Page 13 (red is for experts, green for non-experts).
Designs 07 00101 g0a7

References

  1. Linda, C. International Energy Outlook 2018 (IEO2018); US Energy Information Administration (EIA): Washington, DC, USA, 2018; Volume 2018, p. 21. [Google Scholar]
  2. Marche, C.; Nitti, M. IoT for the users: Thermal comfort and cost saving. In Proceedings of the ACM MobiHoc Workshop on Pervasive Systems in the IoT Era, Catania, Italy, 2 July 2019; pp. 55–60. [Google Scholar] [CrossRef]
  3. Ahmed, M.M.; Qays, M.O.; Abu-Siada, A.; Muyeen, S.M.; Hossain, M.L. Cost-effective design of IoT-based smart household distribution system. Designs 2021, 5, 55. [Google Scholar] [CrossRef]
  4. Barbato, A.; Borsani, L.; Capone, A.; Melzi, S. Home Energy Saving through a User Profiling System Based on Wireless Sensors. In Proceedings of the First ACM Workshop on Embedded Sensing Systems for Energy-Efficiency in Buildings 2009; Association for Computing Machinery: New York, NY, USA, 2009. [Google Scholar] [CrossRef]
  5. Aldrich, F.K. Smart Homes: Past, Present and Future. In Inside the Smart Home; Springer: London, UK, 2003; pp. 17–39. [Google Scholar] [CrossRef]
  6. Balta-Ozkan, N.; Boteler, B.; Amerighi, O. European smart home market development: Public views on technical and economic aspects across the United Kingdom, Germany and Italy. Energy Res. Soc. Sci. 2014, 3, 65–77. [Google Scholar] [CrossRef]
  7. Fakhar, M.Z.; Yalcin, E.; Bilge, A. A survey of smart home energy conservation techniques. Expert Syst. Appl. 2022, 213, 118974. [Google Scholar] [CrossRef]
  8. Haq, I.U.; Ullah, A.; Khan, S.U.; Khan, N.; Lee, M.Y.; Rho, S.; Baik, S.W. Sequential Learning-Based Energy Consumption Prediction Model for Residential and Commercial Sectors. Mathematics 2021, 9, 605. [Google Scholar] [CrossRef]
  9. Jannu, S.; Dara, S.; Thuppari, C.; Vidyarthi, A.; Gupta, D. An Advanced Energy Management and Harvesting System for Network Lifetime for Industrial IoT in Smart Cities. IEEE Internet Things J. 2023, 1. [Google Scholar] [CrossRef]
  10. Khan, N.; Khan, S.U.; Ullah, F.U.M.; Lee, M.Y.; Baik, S.W. AI-Assisted Hybrid Appr Approach for Energy Management in IoT-based Smart Microgrid. IEEE Internet Things J. 2023. [Google Scholar] [CrossRef]
  11. Wongmahasiri, R. Study Project to Prepare Energy Efficiency Benchmarks for Residential Homes; 2018. Available online: http://e-lib.dede.go.th/mm-data/BibA11428.pdf (accessed on 7 March 2022).
  12. Hui, T.K.; Sherratt, R.S.; Sánchez, D.D. Major requirements for building Smart Homes in Smart Cities based on Internet of Things technologies. Futur. Gener. Comput. Syst. 2017, 76, 358–369. [Google Scholar] [CrossRef]
  13. Kruusimagi, M.; Sharples, S.; Robinson, D. Living with an autonomous spatiotemporal home heating system: Exploration of the user experiences (UX) through a longitudinal technology intervention-based mixed-methods approach. Appl. Ergon. 2017, 65, 286–308. [Google Scholar] [CrossRef]
  14. Escanillan-Galera, K.M.P.; Vilela-Malabanan, C.M. Evaluating on User Experience and User Interface (UX/UI) of EnerTrApp a Mobile Web Energy Monitoring System. Procedia Comput. Sci. 2019, 161, 1225–1232. [Google Scholar] [CrossRef]
  15. Moniruzzaman, M.; Khezr, S.; Yassine, A.; Benlamri, R. Blockchain for smart homes: Review of current trends and research challenges. Comput. Electr. Eng. 2020, 83, 106585. [Google Scholar] [CrossRef]
  16. Lim, C.-K. Research on Indoor Spatial Behavior Perception IoT Smart System for Solitary Elderly at Home. Designs 2022, 6, 75. [Google Scholar] [CrossRef]
  17. Tekler, Z.D.; Low, R.; Blessing, L. User perceptions on the adoption of smart energy management systems in the workplace: Design and policy implications. Energy Res. Soc. Sci. 2022, 88, 102505. [Google Scholar] [CrossRef]
  18. Wang, K.; Tekler, Z.D.; Cheah, L.; Herremans, D.; Blessing, L. Evaluating the Effectiveness of an Augmented Reality Game Promoting Environmental Action. Sustainability 2021, 13, 13912. [Google Scholar] [CrossRef]
  19. Carr, E.C.; Babione, J.N.; Marshall, D. Translating research into practice through user-centered design: An application for osteoarthritis healthcare planning. Int. J. Med. Inform. 2017, 104, 31–37. [Google Scholar] [CrossRef] [PubMed]
  20. Georgsson, M.; Staggers, N.; Årsand, E.; Kushniruk, A. Employing a user-centered cognitive walkthrough to evaluate a mHealth diabetes self-management application: A case study and beginning method validation. J. Biomed. Inform. 2019, 91, 103110. [Google Scholar] [CrossRef]
  21. Marien, S.; Legrand, D.; Ramdoyal, R.; Nsenga, J.; Ospina, G.; Ramon, V.; Spinewine, A. A User-Centered design and usability testing of a web-based medication reconciliation application integrated in an eHealth network. Int. J. Med. Inform. 2019, 126, 138–146. [Google Scholar] [CrossRef]
  22. Cosar, E.; Singh, A.; Njeze, O.; Zheng, K.; Jariwala, S. Conducting Patient and Provider Participatory Design Sessions to Create a User-Centered Mobile Application for Adults with Asthma. J. Allergy Clin. Immunol. 2020, 145, AB210. [Google Scholar] [CrossRef]
  23. Flood, M.; Ennis, M.; Ludlow, A.; Sweeney, F.F.; Holton, A.; Morgan, S.; Clarke, C.; Carroll, P.; Mellon, L.; Boland, F.; et al. Research methods from human-centered design: Potential applications in pharmacy and health services research. Res. Soc. Adm. Pharm. 2021, 17, 2036–2043. [Google Scholar] [CrossRef]
  24. Manghisi, V.M.; Uva, A.E.; Fiorentino, M.; Gattullo, M.; Boccaccio, A.; Monno, G. Enhancing user engagement through the user centric design of a mid-air gesture-based interface for the navigation of virtual-tours in cultural heritage expositions. J. Cult. Heritage 2018, 32, 186–197. [Google Scholar] [CrossRef]
  25. Llema, C.F.; Vilela-Malabanan, C.M. Design and Development of MLERWS: A User-Centered Mobile Application for English Reading and Writing Skills. Procedia Comput. Sci. 2019, 161, 1002–1010. [Google Scholar] [CrossRef]
  26. Garcia-Font, V. SocialBlock: An architecture for decentralized user-centric data management applications for communications in smart cities. J. Parallel Distrib. Comput. 2020, 145, 13–23. [Google Scholar] [CrossRef]
  27. Frederico, C.S.; Pereira, A.L.S.; Marte, C.L.; Yoshioka, L.R. Mobile application for bus operations controlled by passengers: A user experience design project (UX). Case Stud. Transp. Policy 2021, 9, 172–180. [Google Scholar] [CrossRef]
  28. Calvillo-Arbizu, J.; Roa-Romero, L.M.; Estudillo-Valderrama, M.A.; Salgueira-Lazo, M.; Aresté-Fosalba, N.; Del-Castillo-Rodríguez, N.L.; González-Cabrera, F.; Marrero-Robayna, S.; López-De-La-Manzana, V.; Román-Martínez, I. User-centred design for developing e-Health system for renal patients at home (AppNephro). Int. J. Med. Inform. 2019, 125, 47–54. [Google Scholar] [CrossRef] [PubMed]
  29. Ji, W.; Chan, E.H. Between users, functions, and evaluations: Exploring the social acceptance of smart energy homes in China. Energy Res. Soc. Sci. 2020, 69, 101637. [Google Scholar] [CrossRef]
  30. Santin, O.G.; Grave, A.; Jiang, S.; Tweed, C.; Mohammadi, M. Monitoring the performance of a Passivhaus care home: Lessons for user-centric design. J. Build. Eng. 2021, 43, 102565. [Google Scholar] [CrossRef]
  31. Stopps, H.; Huchuk, B.; Touchie, M.F.; O’Brien, W. Is anyone home? A critical review of occupant-centric smart HVAC controls implementations in residential buildings. Build. Environ. 2020, 187, 107369. [Google Scholar] [CrossRef]
  32. Salehabadi, Z.M.; Ruparathna, R. User-centric sustainability assessment of single family detached homes (SFDH): A BIM-based methodological framework. J. Build. Eng. 2022, 50, 104139. [Google Scholar] [CrossRef]
  33. Hamm, J.; Money, A.; Atwal, A. Guidetomeasure-OT: A mobile 3D application to improve the accuracy, consistency, and efficiency of clinician-led home-based falls-risk assessments. Int. J. Med. Inform. 2019, 129, 349–365. [Google Scholar] [CrossRef]
  34. Harding, R.; Carrasco, J.M.; Serrano-Pons, J.; Lemaire, J.; Namisango, E.; Luyirika, E.; Immanuel, T.; Paleri, A.K.; Mathews, L.; Chifamba, D.; et al. Design and Evaluation of a Novel Mobile Phone Application to Improve Palliative Home-Care in Resource-Limited Settings. J. Pain Symptom Manag. 2021, 62, 1–9. [Google Scholar] [CrossRef]
  35. Al-Ali, A.; Zualkernan, I.A.; Rashid, M.; Gupta, R.; Alikarar, M. A smart home energy management system using IoT and big data analytics approach. IEEE Trans. Consum. Electron. 2017, 63, 426–434. [Google Scholar] [CrossRef]
  36. Sultan, M.; Ahmed, K.N. SLASH: Self-learning and adaptive smart home framework by integrating IoT with big data analytics. In Proceedings of the 2017 Computing Conference, London, UK, 18–20 July 2017; pp. 530–538. [Google Scholar] [CrossRef]
  37. Challa, M.L.; Soujanya, K. Secured smart mobile app for smart home environment. Mater. Today Proc. 2020, 37, 2109–2113. [Google Scholar] [CrossRef]
  38. Georgia, D.; Evangelia, F.; Georgios, C.; Christos, M.; Thomas, K. Evaluation of end user requirements for Smart Home applications and services based on a decision support system. Internet Things 2021, 16, 100431. [Google Scholar] [CrossRef]
  39. Alkatheiri, M.S.; Chauhdary, S.H.; Alqarni, M.A. Seamless security apprise method for improving the reliability of sustainable energy-based smart home applications. Sustain. Energy Technol. Assess. 2021, 45, 101219. [Google Scholar] [CrossRef]
  40. Pal, D.; Vanijja, V. Perceived Usability Evaluation of Microsoft Teams as an Online Learning Platform during COVID-19 Using System Usability Scale and Technology Acceptance Model in India. Child. Youth Serv. Rev. 2020, 119, 105535. [Google Scholar] [CrossRef]
  41. Shen, C.; Min, C.; Wang, C. Analyzing the Trend of O2O Commerce by Bilingual Text Mining on Social Media. Comput. Hum. Behav. 2019, 101, 474–483. [Google Scholar] [CrossRef]
  42. Zein, S.; Salleh, N.; Grundy, J. A Systematic Mapping Study of Mobile Application Testing Techniques. J. Syst. Softw. 2016, 117, 334–356. [Google Scholar] [CrossRef]
  43. Aheleroff, S.; Xu, X.; Zhong, R.Y.; Lu, Y. Digital Twin as a Service (DTaaS) in Industry 4.0: An Architecture Reference Model. Adv. Eng. Inform. 2021, 47, 101225. [Google Scholar] [CrossRef]
  44. Kontogianni, A.; Alepis, E. Smart Tourism: State of the Art and Literature Review for the Last Six Years. Array 2020, 6, 100020. [Google Scholar] [CrossRef]
  45. Hasan, M.R.; Jha, A.K.; Liu, Y. Excessive Use of Online Video Streaming Services: Impact of Recommender System Use, Psychological Factors, and Motives. Computers in Human Behavior 2018, 80, 220–228. [Google Scholar] [CrossRef]
  46. Masood, M.; Thigambaram, M. The Usability of Mobile Applications for Pre-Schoolers. Procedia-Soc. Behav. Sci. 2015, 197, 1818–1826. [Google Scholar] [CrossRef]
  47. Rieger, C.; Majchrzak, T.A. Towards the Definitive Evaluation Framework for Cross-Platform App Development Approaches. J. Syst. Softw. 2019, 153, 175–199. [Google Scholar] [CrossRef]
  48. Jenifer, T. Designing Interfaces: Patterns for Effective Interaction Design; O’Reilly Media, Inc.: Sebastopol, CA, USA, 2010. [Google Scholar]
  49. What is User Experience (UX) Design? Available online: https://maze.co/blog/ui-vs-ux/#what-is-ux-design (accessed on 12 June 2022).
  50. KISS (Keep It Simple, Stupid). Available online: https://www.interaction-design.org/literature/article/kiss-keep-it-simple-stupid-a-design-principle (accessed on 12 June 2022).
  51. Design Principles. Available online: https://www.interaction-design.org/literature/topics/design-principles (accessed on 12 June 2022).
  52. What Is UI Design. Available online: https://maze.co/blog/ui-vs-ux/#what-is-ui-design (accessed on 12 June 2022).
  53. Kasemsarn, K. Creating a Cultural Youth Tourism eBook Guidelines with Four Design Factors. Int. J. Vis. Des. 2022, 16, 31–51. [Google Scholar] [CrossRef]
  54. Koskela, T.; Väänänen-Vainio-Mattila, K. Evolution towards smart home environments: Empirical evaluation of three user interfaces. Pers. Ubiquitous Comput. 2004, 8, 234–240. [Google Scholar] [CrossRef]
  55. Tekler, Z.D.; Low, R.; Zhou, Y.; Yuen, C.; Blessing, L.; Spanos, C. Near-real-time plug load identification using low-frequency power data in office spaces: Experiments and applications. Appl. Energy 2020, 275, 115391. [Google Scholar] [CrossRef]
  56. Yun, R.; Aziz, A.; Lasternas, B.; Zhang, C.; Loftness, V.; Scupelli, P.; Mo, Y.; Zhao, J.; Wilberforce, N. The Design and Evaluation of Intelligent Energy Dashboard for Sustainability in the Workplace. In Design, User Experience, and Usability: User Experience Design for Everyday Life Applications and Services; Springer: Cham, Switzerland, 2014; pp. 605–615. [Google Scholar] [CrossRef]
  57. Tekler, Z.D.; Low, R.; Yuen, C.; Blessing, L. Plug-Mate: An IoT-Based Occupancy-Driven Plug Load Management System in Smart Buildings. Build. Environ. 2022, 223, 109472. [Google Scholar] [CrossRef]
  58. Krupitzer, C.; Müller, S.; Lesch, V.; Züfle, M.; Edinger, J.; Lemken, A.; Schäfer, D.; Kounev, S.; Becker, C. A Survey on Human Machine Interaction in Industry 4.0. arXiv 2020, arXiv:2002.01025. [Google Scholar] [CrossRef]
  59. Akhtar, T.; Rehman, A.U.; Jamil, M.; Gilani, S.O. Impact of an Energy Monitoring System on the Energy Efficiency of an Automobile Factory: A Case Study. Energies 2020, 13, 2577. [Google Scholar] [CrossRef]
  60. González, I.; Calderón, A.J.; Folgado, F.J. IoT real time system for monitoring lithium-ion battery long-term operation in microgrids. J. Energy Storage 2022, 51, 104596. [Google Scholar] [CrossRef]
  61. Sanchez-Hidalgo, M.-A.; Cano, M.-D. A survey on visual data representation for smart grids control and monitoring. Sustain. Energy Grids Netw. 2018, 16, 351–369. [Google Scholar] [CrossRef]
  62. Norman, D.A. Cognitive Engineering. In User Centered System Design; Taylor & Francis: Abingdon, UK, 1986; pp. 31–62. [Google Scholar] [CrossRef]
  63. Kasemsarn, K.; Mungkornwong, K.; Patcharawit, K.; Sumthumpruek, A. What Information Content Do Students Want from a Postgraduate Design Course Website?: A Case Study Applied to User-Centered Design. Int. J. Vis. Des. 2023, 17, 17–41. [Google Scholar] [CrossRef]
  64. Kasemsarn, K.; Harrison, D.; Nickpour, F. Applying Inclusive Design and Digital Storytelling to Facilitate Cultural Tourism: A Review and Initial Framework. Heritage 2023, 6, 1411–1428. [Google Scholar] [CrossRef]
  65. Rodriguez, M.M.; Casper, G.; Brennan, P.F. Patient-centered design. The potential of user-centered design in personal health records. J. AHIMA 2007, 78, 44–46. [Google Scholar]
  66. Ritter, F.E.; Baxter, G.D.; Churchill, E.F. Foundations for Designing User-Centered Systems; Springer: London, UK, 2014. [Google Scholar] [CrossRef]
  67. Caiza, G.; Nuñez, A.; Garcia, C.A.; Garcia, M.V. Human Machine Interfaces Based on Open Source Web-Platform and OPC UA. Procedia Manuf. 2020, 42, 307–314. [Google Scholar] [CrossRef]
  68. Nimmo, I. Introduction, How HMI Has Been Evolving. In Sensemaking in Safety Critical and Complex Situations; CRC Press: Boca Raton, FL, USA, 2021; pp. 1–12. [Google Scholar] [CrossRef]
  69. Scapin, D.L.; Bastien, J.M.C. Ergonomic criteria for evaluating the ergonomic quality of interactive systems. Behav. Inf. Technol. 1997, 16, 220–231. [Google Scholar] [CrossRef]
  70. Bastien, J.M.C.; Scapin, D.L. Evaluating a user interface with ergonomic criteria. Int. J. Hum.-Comput. Interact. 1995, 7, 105–121. [Google Scholar] [CrossRef]
  71. Thailand Creative & Design Center. Service Design Process. 2022. Available online: https://tcdc.groov.asia/method/co-creation-full.html (accessed on 23 January 2023).
Figure 1. The main user persona groups of the application.
Figure 1. The main user persona groups of the application.
Designs 07 00101 g001
Figure 2. Visualization of the research gap in this study represented through the interconnection of all three variables (Source: Researchers).
Figure 2. Visualization of the research gap in this study represented through the interconnection of all three variables (Source: Researchers).
Designs 07 00101 g002
Figure 3. Distribution of articles by year.
Figure 3. Distribution of articles by year.
Designs 07 00101 g003
Figure 4. Keywords most frequently used in Co-Occurrence Cluster Analysis.
Figure 4. Keywords most frequently used in Co-Occurrence Cluster Analysis.
Designs 07 00101 g004
Figure 5. Co-occurrence of words in word segments from VOSviewer (grouped clusters by the same color).
Figure 5. Co-occurrence of words in word segments from VOSviewer (grouped clusters by the same color).
Designs 07 00101 g005
Figure 6. Why, What, and How principle (Source: Interaction Design Foundation 2019).
Figure 6. Why, What, and How principle (Source: Interaction Design Foundation 2019).
Designs 07 00101 g006
Figure 7. UCD process (Source: Interaction Design Foundation 2019).
Figure 7. UCD process (Source: Interaction Design Foundation 2019).
Designs 07 00101 g007
Figure 8. A framework for creating energy-saving home applications.
Figure 8. A framework for creating energy-saving home applications.
Designs 07 00101 g008
Figure 10. Example fishbone diagram, Application Page 1 (red is for experts, green for non-experts). (Source: Collection data in collaborative ideation activities).
Figure 10. Example fishbone diagram, Application Page 1 (red is for experts, green for non-experts). (Source: Collection data in collaborative ideation activities).
Designs 07 00101 g010
Figure 11. Example summary of the data collection for the identified problems, Application Page 1 (red is for experts, green for non-experts).
Figure 11. Example summary of the data collection for the identified problems, Application Page 1 (red is for experts, green for non-experts).
Designs 07 00101 g011
Figure 12. Problems after testing the sample program.
Figure 12. Problems after testing the sample program.
Designs 07 00101 g012
Figure 13. Results of the data collection on selected solutions for both groups, Application Page 1 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Figure 13. Results of the data collection on selected solutions for both groups, Application Page 1 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Designs 07 00101 g013
Figure 14. Results of the data collection on selected solutions for both groups, Application Page 2 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Figure 14. Results of the data collection on selected solutions for both groups, Application Page 2 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Designs 07 00101 g014
Figure 15. Results of the data collection on selected solutions for both groups, Application Page 3 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Figure 15. Results of the data collection on selected solutions for both groups, Application Page 3 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Designs 07 00101 g015
Figure 16. Results of the data collection on selected solutions for both groups, Application Page 4 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Figure 16. Results of the data collection on selected solutions for both groups, Application Page 4 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Designs 07 00101 g016
Figure 17. Results of the data collection on selected solutions for both groups, Application Pages 5, 7, and 9 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Figure 17. Results of the data collection on selected solutions for both groups, Application Pages 5, 7, and 9 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Designs 07 00101 g017
Figure 18. Results of the data collection on selected solutions for both groups, Application Pages 6, 8, and 10 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Figure 18. Results of the data collection on selected solutions for both groups, Application Pages 6, 8, and 10 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Designs 07 00101 g018
Figure 19. Results of the data collection on selected solutions for both groups, Application Pages 11 and 12 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Figure 19. Results of the data collection on selected solutions for both groups, Application Pages 11 and 12 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Designs 07 00101 g019
Figure 20. Results of the data collection on selected solutions for both groups, Application Page 13 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Figure 20. Results of the data collection on selected solutions for both groups, Application Page 13 (numbers means the amount of participants choosing type 1, 2 or 3) (presented in Appendix A).
Designs 07 00101 g020
Figure 21. The proposed framework.
Figure 21. The proposed framework.
Designs 07 00101 g021
Figure 22. The wireframe diagram of the application presented in the activity organization and the identified problems (in the red area, number 1 represents the problem of calculation, number 2 represents the problem of material).
Figure 22. The wireframe diagram of the application presented in the activity organization and the identified problems (in the red area, number 1 represents the problem of calculation, number 2 represents the problem of material).
Designs 07 00101 g022
Table 1. Criteria for inclusion and exclusion.
Table 1. Criteria for inclusion and exclusion.
InclusionExclusion
DatabaseIndexed in ScienceDirect
LanguagePublications in EnglishPublication in a language other than English
Types of publicationArticle or reviewBooks, book chapters, conference reports, proceedings papers
YearPublication within the period of 2013–2022
KeywordsKeywords “application”, “user experience”, “user interface”, “home/smart home/home energy”
Table 2. The 10 most frequently mentioned literary.
Table 2. The 10 most frequently mentioned literary.
NoAuthorsTitleYearJournalTotal Citations
1Terence K. L. Hui, R. Simon Sherratt, Daniel Díaz Sánchez
[12]
Major requirements for building smart homes in smart cities based on the Internet of Things technologies2017Future Generation Computer Systems327
2Debajyoti Pal, Vajirasak Vanijja
[40]
Perceived usability evaluation of Microsoft Teams as an online learning platform during COVID-19 using system usability scale and technology acceptance model in India2020Children and Youth Services Review212
3Chien-wen Shen, Min Chen, Chiao-chen Wang
[41]
Analyzing the trend of O2O commerce by bilingual text mining on social media2019Computers in Human Behavior157
4Samer Zein, Norsaremah Salleh, John Grundy
[42]
A systematic mapping study of mobile application testing techniques2016Journal of Systems and Software154
5Shohin Aheleroff, Xun Xua, Ray Y. Zhong, Yuqian Lu
[43]
Digital Twin-as-a-Service (DTaaS) in Industry 4.0: An architecture reference model2021Advanced Engineering Informatics152
6Aristea Kontogianni, Efthimios Alepis
[44]
Smart tourism: State of the art and literature review for the last six years2020Array111
7Md Rajibul Hasan, Ashish Kumar Jha, Yi Liu
[45]
Excessive use of online video streaming services: Impact of recommender system use, psychological factors, and motives2018Computers in Human Behavior97
8Mona Masood, Menaga Thigambaram
[46]
The usability of mobile applications for preschoolers2015Procedia—Social and Behavioral Sciences80
9Md. Moniruzzaman, Seyednima Khezr, Abdulsalam Yassine, Rachid Benlamrib
[15]
Blockchain for smart homes: Review of current trends and research challenges2020Computers and Electrical Engineering58
10Christoph Rieger, Tim A. Majchrzak
[47]
Towards the definitive evaluation framework for cross-platform app development approaches2019Journal of Systems and Software55
Table 3. Comparison of the differences between the UX and UI.
Table 3. Comparison of the differences between the UX and UI.
UX DesignerUI Designer
Design areasInteraction designVisual design
CharacteristicsCharts the user pathwayChooses color and typography
PlanningPlans information architecturePlans visual aesthetic
ExpertiseExpert in wireframes, prototypes, and researchExpert in mockups, graphics, and layouts
Table 4. Summary of the results of collecting data for selecting solutions to identified problems on Application Page 1 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Table 4. Summary of the results of collecting data for selecting solutions to identified problems on Application Page 1 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Solution ApproachType 1Type 2Type 3
Target Usage
1Usability (ease of use)Reposition buttons in the center of the screenSpecify the objectives and information to prepare before useRedesign
2Text (clear)Update the font to a more contemporary styleRefine the logo and sharpen the name at the bottomModify the background color
3The color of the text (appropriate contrast)Make adjustments to the color scheme for clarity
4Background color and other componentsModify the background colorDesign a new visual elementModify the visual element
5Amount of information presented on each screenPlace the logo at the bottom of the pageSpecify the objectivesMake the letters easier to read
6Positioning of components on the screenMove [Login] to a more visible location.Increase the size of letters Incorporate an additional symbol
7Position of the input fields (clear and appropriate)
8Illustration (easy to understand and appropriate)Change the image to be relevant to the contentAdjust the perspective of the image used for illustration
9Consistency of information with presentationAdd the name of the programAdd a concise and clear objective
Table 5. Summary of the results of collecting data for selecting solutions to identified problems on Application Page 2 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Table 5. Summary of the results of collecting data for selecting solutions to identified problems on Application Page 2 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Solution ApproachType 1Type 2Type 3
Target Usage
1Usability (simple)Use infographic/image instead of textChange fontNew word space
2Text (clear)Use infographic/image instead of textUse symbols—divide list instead of narratives
3Letter color (appropriate)
4Background color and other components (appropriate)
5The amount of information presented on each screen (appropriate)Use infographic/image instead of text
6Position of the different parts of the screen (appropriate)
7The location of the field (clear and appropriate)
8Illustration (easy to understand and appropriate)
9Consistency of information with presentation (appropriate)Use communicative words that are easy to understandInfographic/image instead of text
Table 6. Summary of the results of collecting data for selecting solutions to identified problems on Application Page 3 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Table 6. Summary of the results of collecting data for selecting solutions to identified problems on Application Page 3 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Solution ApproachType 1Type 2Type 3
Target Usage
1Usability (simple)Separate one topic per pageDrop-down listPop-up for explanation
2Text (clear)Drop-down listChange fontEnlarged
3Letter color (appropriate)ChangedDarken the backgroundRedesigned
4Background color and other components (appropriate)Darken the color or
reduce the use of greens
Design different buttonsRedesigned
5The amount of information presented on each screen (appropriate).
6Position of the different parts of the screen (appropriate)CenteredInclude picturesUse responsive design
7The location of the field (clear and appropriate)Clear distinction between the fieldsCenteredRedesigned
8Images (easy to understand and appropriate)RemovedAlignedChanged
9Consistency of information with presentation (appropriate)Separate page to inform the user what to includeOptions to fill in the field
Table 7. Summary of the results of collecting data for selecting solutions to identified problems on Application Page 4 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Table 7. Summary of the results of collecting data for selecting solutions to identified problems on Application Page 4 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Solution ApproachType 1Type 2Type 3
Target Usage
1Usability (simple)Changed sizeAligned button to center/rightSelected user info
2Text (clear)Changed font styleEnlarged fontChanged content
3Letter color (appropriate)Changed complimentary colorDifferentiated
4Background color and other components (appropriate)Changed colorsChanged content
5The amount of information presented on each screen (appropriate)
6Position of the different parts of the screen (appropriate)RecomposedNo explanation text
7The location of the field (clear and appropriate)
8Images (easy to understand and appropriate)RemovedKept the theme of the image the same as the previous pageRedesigned
9Consistency of information with presentation (appropriate)RemovedRedesigned
Table 8. Summary of the results of collecting data for selecting solutions to identified problems on Application Pages 5, 7, and 9 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Table 8. Summary of the results of collecting data for selecting solutions to identified problems on Application Pages 5, 7, and 9 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Solution ApproachType 1Type 2Type 3
Target Usage
1Usability (simple)Used 3D button imageUsers needed to pass through each topic at a timePop-up with further explanation
2Text (clear)Changed fontsUsed 3D button imageIncluded more explanatory text
3Letter color (appropriate)Changed to complementary colorUsed black only
4Background color and other components (appropriate)Removed standard componentsKept the same tonesChanged border color
5The amount of information presented on each screen (appropriate)Used 3D button imageIncluded market information
6Position of the different parts of the screen (appropriate)Used responsive designUsed separator for each topicIncluded more instruction
7The location of the field (clear and appropriate)Used separator for each topicUsed 3D button imageEnlarged important section of the text
8Images (easy to understand and appropriate)Highlighted important part of the imagesHighlighted clickable areasDisplayed dimension when resizing
9Consistency of information with presentation (appropriate)Used pop-up with more explanation
Table 9. Summary of the results of data collection for selected solutions to identified problems on Application Pages 6, 8, and 10 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Table 9. Summary of the results of data collection for selected solutions to identified problems on Application Pages 6, 8, and 10 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Solution ApproachType 1Type 2Type 3
Target Usage
1Usability (simple)Used company templateIncluded search buttonUsed infographic instead of text
2Text (clear)Removed unnecessary textChanged font
3Letter color (appropriate)Used complementary colorsChanged clickable areas
4Background color and other components (appropriate)
5The amount of information presented on each screen (appropriate)
6Position of the different parts of the screen (appropriate)
7The location of the field (clear and appropriate)Highlighted clickable areasReordered the fields
8Images (easy to understand and appropriate)
9Consistency of information with presentation (appropriate)Included pop-up with more informationUsed company templateUsed infographics instead of text
Table 10. Summary of the results of data collection for selected solutions to identified problems on Application Pages 11 and 12 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Table 10. Summary of the results of data collection for selected solutions to identified problems on Application Pages 11 and 12 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Solution ApproachType 1Type 2Type 3
Target Usage
1Usability (simple)Used company templatesUsed 3D button imagesIncluded pop-up to show more information
2Text (clear)Changed fontUsed 3D button imagesIncluded more instruction
3Letter color (appropriate)Changed to other complementary colorsUsed black only
4Background color and other components (appropriate)Removed standard componentsUsed the same toneChanged border color
5The amount of information presented on each screen (appropriate)Used 3D button imagesIncludes the option to show information
6Position the different parts of the screen (appropriate)Used responsive designUsed separator for each topicIncluded more instruction
7The location of the field (clear and appropriate)Used a separator for each topicUsed 3D button imageEnlarged important part of the field
8Images (easy to understand and appropriate)Highlighted important portionHighlighted clickable areas
9Consistency of information with presentation (appropriate)Included more optionsUsed pop-up to show more informationUsed company templates
Table 11. Summary of the results of data collection for selected solutions to identified problems on Application Page 13 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Table 11. Summary of the results of data collection for selected solutions to identified problems on Application Page 13 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).
Solution ApproachType 1Type 2Type 3
Target Usage
1Usability (simple)Included additional pages to inform the resultUsed 3D image
2Text (clear)Changed font
3Letter color (appropriate)Used other complementary colorsUsed black only
4Background color and other components (appropriate)Removed standard/known components
5The amount of information presented on each screen (appropriate)
6Position of the different parts of the screen (appropriate)
7The location of the field (clear and appropriate)
8Images (easy to understand and appropriate)Changed the image of the house according to the textIncluded result indicator for each sectionHighlighted clickable areas
9Consistency of information with presentation (appropriate)Included an additional page on how to pass
Table 12. Problem and user experience solution related to area calculation.
Table 12. Problem and user experience solution related to area calculation.
User Experience
Pre-InterventionPost-Intervention
Designs 07 00101 i001Designs 07 00101 i002
Users are required to calculate the area
and input the result into the designated
input field.
We attempted to reduce the complexity of the process by allowing users to enter only the width and length measurements in the data entry fields. However, we have encountered additional issues where the calculated area may not apply to non-rectangular shapes or irregular patterns.
Table 13. Problem related to selecting the materials used inside the house.
Table 13. Problem related to selecting the materials used inside the house.
User Experience
Pre-InterventionPost-Intervention
Designs 07 00101 i003Designs 07 00101 i004
Users must select specific materials to use
from the details or the specific names of
those materials.
The materials will be presented with images and pop-ups containing detailed information about each material. However, there are additional issues. Materials can have multiple layers overlapping each other, and it becomes difficult to select each layer individually. Even with the use of images, users who are not experts may not be able to distinguish between or understand them.
Disclaimer/Publisher’s Note: The statements, opinions and data contained in all publications are solely those of the individual author(s) and contributor(s) and not of MDPI and/or the editor(s). MDPI and/or the editor(s) disclaim responsibility for any injury to people or property resulting from any ideas, methods, instructions or products referred to in the content.

Share and Cite

MDPI and ACS Style

Tongsubanan, S.; Kasemsarn, K. Sustainability at Home: The Development of an Efficient Framework for Home Energy-Saving Applications. Designs 2023, 7, 101. https://doi.org/10.3390/designs7040101

AMA Style

Tongsubanan S, Kasemsarn K. Sustainability at Home: The Development of an Efficient Framework for Home Energy-Saving Applications. Designs. 2023; 7(4):101. https://doi.org/10.3390/designs7040101

Chicago/Turabian Style

Tongsubanan, Sarunporn, and Kittichai Kasemsarn. 2023. "Sustainability at Home: The Development of an Efficient Framework for Home Energy-Saving Applications" Designs 7, no. 4: 101. https://doi.org/10.3390/designs7040101

Article Metrics

Back to TopTop