You are currently viewing a new version of our website. To view the old version click .
MDPIMDPI
Search all articles
Buildings
Download PDF
  • Article
  • Open Access

24 May 2024

Unlocking Brilliance: A Smart Approach to Icon Colour Design Inspired by Universal Design Principles

,
,
,
,
and
1
Tianjin Key Laboratory of Healthy Habitat and Smart Technology, School of Architecture, Tianjin University, Tianjin 300072, China
2
Department of Architecture and Civil Engineering, City University of Hong Kong, Hong Kong 999077, China
3
Darwin College, University of Cambridge, Cambridge CB3 9EU, UK
4
School of Environment and Architectural Art, Tianjin Academy of Fine Arts, Tianjin 300402, China
Buildings2024, 14(6), 1522;https://doi.org/10.3390/buildings14061522
This article belongs to the Special Issue Advancements in Adaptive, Inclusive, and Responsive Buildings
Version Notes
Order Reprints

Abstract

Icons are integral to the signature systems within architectural spaces, serving pivotal roles through human–environment interactions. However, previous icon designs often exhibited a considerable randomness and neglected the needs of visually impaired individuals. To address these issues and to overcome the limitations of the computer-aided design methods, such as most of them focusing only on text design which are not compatible with icons, this study presents an intelligent assistance method named “Universal Colour” for icon colour design based on universal design principles. Such a system enables the rapid generation of icon colour schemes and supports visual and quantitative filtering and comparison during the decision-making process for colour scheme optimization. To assess its usability, fifty-two participants conducted icon colour design experiments using this system, resulting in 87% of the design schemes meeting the universality requirements. The results have demonstrated that Universal Colour has the potential to significantly enhance efficiency and cognitive aspects within the decision-making process for users, regardless of their proficiency in icon design, thereby facilitating the generation of universal icon colour schemes in architectural design.

1. Introduction

According to the World Health Organization (WHO), approximately 217 million individuals worldwide are affected by moderate to severe visual impairments [1]. Despite the critical role icons play in guiding users, providing instructions, and facilitating task completion [2], previous icon designs have often neglected the needs of visually impaired users. This oversight has led to diminished cognitive effectiveness, disrupted workflows, and potential malfunctions [3,4,5]. A clear and concise icon is imperative for ensuring users accurately interpret its meaning and intended function [6]. Consequently, it is essential to integrate universal design principles into icon development, thereby enabling visually impaired individuals to obtain comparable experiences to those of individuals without visual impairments [7,8,9,10].
Universal design aims to accommodate the needs of all users in various situations. Icon design falls under the category of perceptible accessibility design, and the universality of icon design focuses primarily on the following aspects:
(1)
Diverse user groups: Around 4% of the global population have visual impairments, and visual acuity tends to decrease with age, with around half of individuals over the age of 50 experiencing some level of visual decline [1]. Therefore, the universality of visual interface icon design is essential for individuals with visual impairments [11].
(2)
Diverse devices: It is essential to ensure that interactive products can effectively convey information across various devices [12], including older versions or low-performance devices.
(3)
Diverse contexts: It is crucial to design interactive products that remain functional in unfavourable conditions [8], such as under bright sunlight, in transit, or in poorly illuminated environments. Neglecting these real-life scenarios may lead to ineffective communication [13,14].
Signage design elements include shape, size, and layout, and practical design also considers cultural and regional differences, as well as design cognition [15,16,17]. In terms of colour, previous studies have shown that increasing the colour contrast ratio of icons is the most effective way to improve the universality of icons [18,19,20,21,22,23,24,25,26,27,28,29]. However, the colour design of icons also determines the visual aesthetics of the user interface (UI) to a large extent [30]. Therefore, when designing icon colours, designers’ over-pursuit of personalization and aesthetics often results in ignoring the usability of icons and the user experience. Furthermore, icon design is no longer limited to professional designers alone; students and non-professionals also have design needs. However, these individuals often lack sufficient professional knowledge and experience, making it challenging to consider concepts such as colour theory, visual perception, colour psychology, and universality [31,32]. They do not possess the necessary design cognition and struggle to make design decisions, making it difficult for them to engage in icon colour design systematically.
As a result, both professional designers and non-professionals encounter significant design randomness in their cognitive processes and decision-making regarding icon design. This randomness implies losing control over the design and introduces endless possibilities into the design process [33]. To enhance design efficiency and constrain design randomness, computer-aided technology has been introduced into the field of design [34]. In recent years, numerous studies have focused on the decision-making process in design, and have highlighted the impact of domain-specific skills, statistical computation (such as practical probability reasoning), domain knowledge, and cognitive abilities on design randomness [35,36].
There is a significant amount of design randomness involved in icon colour design (Figure 1) [37,38]. Whether designers rely on intuition or engage in thoughtful consideration during icon colour scheme designing, they encounter a substantial amount of incomplete and imprecise information. This lack of cognitive information necessitates using heuristic methods and computer-aided design techniques to compensate for these limitations [39,40,41].
Figure 1. The design process of and icon’s colour scheme [42].
Various computer-aided design tools are available to assist designers in addressing the randomness of icon colour scheme design. Examples include Contrast Checker, Contrast Grid, contrast ratios, Colour Safe, and Adobe Colour (Table 1). However, these computer-aided design methods are often limited in functionality, and most focus only on text design and need to be compatible with icons, such as enhancing the compatibility of an icon’s colour design, increasing the flexibility of scheme selection methods, and expanding the number of colour combinations displayed. This poses challenges, particularly for users without a design background.
Table 1. Platforms for calculating colour contrast ratios and universal design.
This study suggests an intelligent assistance technique for designing icon colour schemes based on universal design principles to overcome the aforementioned restrictions. A design assistance tool called “Universal Colour” is developed based on the World Wide Web Consortium (W3C) colour assessment method. Through the development of the “Universal Colour” tool, it can assist the design and engineering professionals involved in icon colour design by enabling them to achieve a more scientific and efficient process for icon colour design and scheme optimisation, thereby obtaining more reasonable icon colour scheme designs, and, finally, it can contribute to a transparent signature system of the architectural space. Additionally, it enhances the humanisation and accessibility of the environment, fostering the creation of more inclusive and sustainable green buildings.
The rest of the paper is organised as follows: Section 2 introduces the universal principle and an intelligent icon colour design platform based on such a principle, named “Universal Colour”. Section 3 details the experimental design in the platform’s usability testing. Section 4 provides a thorough analysis of the results of the experimental data. Section 5 summarises the evaluations of the usability of “Universal Colour” among different groups based on the data results, and discusses design cognition and decision-making. Section 6 concludes the study and outlines its limitations.

2. From the Study of Intelligent Icon Colour Designs to the Digitalization and Intelligent Design Assistant Program

2.1. The Logic of the Intelligent Icon Colour Design Method

The colour designing of icons is characterised by ambiguous initial states, unclear objectives or strategies, and undefined constraints, making it an ill-structured problem. In the process of icon colour design, there are countless paths from design cognition to the manifestation of design randomness and the making of design decisions. Designers continuously balance universality and aesthetics, exploring multiple approaches to make reasonable design decisions, ensuring the usability and practicality of icon colour design solutions.
In the field of design, the opposite of randomness is regularity and repeatability. In icon design, although colour schemes need to consider different interfaces and design requirements, the combinations of colours still follow certain patterns. The colour configuration design of icons primarily involves the background colour and the colour of the main graphic. Universal icon colour design is fundamentally rooted in achieving universality in colour combinations (Figure 2), which includes:
Figure 2. The organization of an intelligent method for icon colour design.
(1)
The comprehensive presentation of a colour scheme: Exhaustively present all possible colour configuration schemes to ensure inclusiveness.
(2)
Universality in icon design: Utilize the calculation method of the colour contrast ratio recommended by Web Content Accessibility Guidelines (WCAG) 2.2 (Equation (1)) [48] in conjunction with quantitative filtering tools to screen colour contrast ratios and meet the requirement of universality.
c o l o r   c o n t r a s t   r a t i o = L 1 + 0.05 L 2 + 0.05
In Equation (1), L1 is the relative luminance of the lighter of the colours, and L2 is the relative luminance of the darker of the colours.
(3)
The visualization of colour information: Visualize colour combinations and the corresponding quantitative data to facilitate designers’ making universally applicable colour schemes.
(4)
Control and randomness in the design process: Exert control over the colour contrast ratio to ensure universality while allowing the designer to meet personalised design requirements.
(5)
Replicable and scalable design methods: Ensure the usability and general applicability of the methods, facilitating their use by diverse groups and their compatibility across multiple platforms and media, making the design methods replicable and scalable.

2.2. Digitalization and Intelligent Design Assistant Program

Based on the calculation method of the colour contrast ratio recommended by the W3C, this paper presents an intelligent design assistant program called Universal Colour, developed using “H Builder X”. Universal Colour transforms the conventional colour design approach based on intuition and experience into a method that incorporates both quantitative analysis and variable visualisation. It enables real-time visualisation, quantitative recording, and comparison during the optimisation and decision-making process of icon colour design. The goal is to provide a digital tool for assisting in icon colour design (Figure 3), offering the following functionalities:
Figure 3. The interface of Universal Colour.
M1: Colour scheme visualisation module
F1: This module includes 3,396 preset colour combinations to present the colour scheme comprehensively. Upon entering the interface, the module displays the icons with preset colour combinations sourced from “ADA ALTERNATIVE” [49] and “CUD Recommended colour Set Guidebook” [50].
F2: The module supports multiple modes of presenting colour combinations, such as the colour contrast ratio, icons, and colour blocks (Figure 4), to meet various purposes and information visualisation requirements.
Figure 4. Multiple modes of presenting colour combinations.
F3: Clicking a generated icon colour scheme in this module will display relevant colour information, including the background colour of the icon, the icon colour, and the contrast ratio between the two, facilitating design decision-making.
M2: Icon and colour element customisation module
F4: Users can upload their own colour data in a HEX format for any custom icon configuration and automatically generate arrangement combinations to display the colour contrast ratio of the icon.
F5: Users can freely upload various types of icons in a PNG format to present the colour scheme of different icon graphics visually.
M3: Quantitative filtering module
F6: Users can set their own filtering conditions for design parameters to ensure universality in their icon design, meeting the differentiated design requirements of different interfaces, media, and user groups.
F7: Universal Colour supports the one-click output of icon colour scheme information, facilitating design decision-making and multi-media presentations (Figure 5).
Figure 5. The output of Universal Colour (the filtering condition is a colour contrast ratio ≥3).
Universal Colour starts with a comprehensive presentation of icon colour schemes, which provides quantitative filtering and diverse presentation modes to assist designers in making more scientific and logical design decisions (Figure 6). By addressing the cognitive limitations and biases inherent in traditional design methods, Universal Colour offers designers a comprehensive display of all potential colour combinations, thereby mitigating the randomness in design cognition and decision-making. Additionally, it incorporates the W3C-recommended calculation method of a colour contrast ratio to filter solutions based on the universality of colour combination configurations, thereby addressing the constraints imposed by design requirements. The functionality of a custom colour input and a custom icon upload caters to the personalised needs of designers.
Figure 6. A flowchart of the icon colour intelligent design method assisted by Universal Colour.

3. Methodology of Experiment Design

In this research, a total of 52 participants were employed to explore how Universal Colour can contribute to icon design. These participants were recruited through posters and social media platforms. Based on their design backgrounds, the 52 participants were categorised into three groups including 13 general users who had no design experience but had relevant design requirements, 21 design students with some design experience and knowledge, and 18 professional designers with extensive design expertise. Before the experiment began, participants were informed about the operational procedures and the overall flow of the experiment, and they were allowed to familiarise themselves with the experimental operations. The experiment was divided into two modules. In Module One, participants were asked to colour nine icons using any method of their choice. In Module Two, participants were required to use Universal Colour to assist in the colour design of the same nine icons. The experiment was conducted using the Figma platform, and the entire process was recorded via audio and video for documentation purposes. Additionally, a questionnaire survey was administered to participants based on the Software Usability Scale (SUS) [44] and usability factors to gather feedback. Furthermore, the universality of all design schemes was assessed using the Web Content Accessibility Guidelines (WCAG) version 2.2 standards [48].

4. Results

4.1. SUS Questionnaire Results

Based on the SUS questionnaire data from 52 participants, the SUS score for Universal Colour was 72.6, with a usability score of 74.3 and a learnability score of 65.9. According to the study by Bangor (2009) [51], Universal Colour achieved a grade of C, indicating an ACCEPTABLE level of usability with a percentile rank of 65 [52], meaning it performed better than 65% of products in terms of usability.

4.2. The Evaluation of Usability Factors for Both Methods

Based on the questionnaire data from all participants, a Z-test was conducted to evaluate the usability factors. The results showed significant differences (p < 0.05) between the scores of traditional methods and those of Universal Colour for factors such as learnability (Z = −6.061), design efficiency (Z = −6.489), colour scheme accuracy (Z = −5.307), pleasantness (Z = −3.218), scientificity (Z = −6.494), universality (Z = −5.720), design autonomy (Z = −4.221), and replicability (Z = −7.926). By analysing the mean differences of each factor, it could be concluded that for all user groups (Table 2), Universal Colour performed significantly better than traditional methods in terms of learnability, design efficiency, colour accuracy, pleasantness, scientificity, universality, and replicability in icon colour design. However, Universal Colour showed lower design autonomy compared to traditional methods, suggesting that it might limit users’ initiative and creativity in certain situations.
Table 2. The Z-test results for all user groups’ ratings of the usability factors for Universal Colour and traditional methods.
Further, the questionnaire data from the three groups were analysed separately. Due to the small sample size, the Z-test method was no longer applicable. Thus, the T-test was introduced and the homogeneity of variances was examined through a joint hypothesis test (F-test). The results showed that the data obtained from the questionnaire fulfilled the requirements of the T-test.
For the general users’ group (Table 3), the results revealed that Universal Colour showed statistically higher performance in terms of learnability, design efficiency, colour accuracy, scientificity, universality, and replicability. However, its design autonomy was significantly lower compared to that of the traditional methods. There were no significant differences in terms of relearning difficulty, user enjoyment, and aesthetic evaluation elements.
Table 3. The T-test results for the general user group’s ratings of the usability factors for Universal Colour and traditional methods.
Similarly, for the student users’ group (Table 4), Universal Colour showed significantly higher performance than the traditional methods in terms of learnability, design efficiency, colour accuracy, user enjoyment, scientificity, universality, and replicability. There were no significant differences in terms of their relearning difficulty, aesthetics, and design autonomy evaluation elements.
Table 4. The T-test results for the student group’s ratings of the usability factors for Universal Colour and traditional methods.
For designer users (Table 5), Universal Colour exhibited significantly higher performance in terms of learnability, design efficiency, colour accuracy, scientificity, and universality. There were no significant differences in terms of relearning difficulty, aesthetics, and design autonomy evaluation elements. However, the replicability did not pass the homogeneity of variances test, indicating that designers perceived there to be low replicability for the traditional methods, with a mean score of only 4.28 and small score differences. In contrast, most designers considered Universal Colour to have high replicability, with a mean score of 8.33 and significant score differences.
Table 5. The T-test results for the designer group’s ratings of the usability factors for Universal Colour and traditional methods.
In terms of the usability of Universal Colour, different user groups exhibited variations in their evaluations across various aspects (Figure 7). Overall, users from all groups rated aspects such as learnability, design efficiency, colour accuracy, scientificity, universality, and replicability relatively high. However, they provided relatively lower ratings for aspects such as relearning difficulty, aesthetics, and design autonomy. Among the user groups, general users scored the highest in terms of learnability, design efficiency, accuracy, scientificity, and universality. Student users rated user enjoyment, aesthetics, relearning difficulty, design autonomy, and replicability the highest. On the other hand, designer users scored the lowest in terms of learnability, user enjoyment, scientificity, universality, aesthetics, and design autonomy. Regarding the usability elements of Universal Colour, general users and students rated them higher, while designers rated them relatively lower.
Figure 7. The ratings of the usability elements of Universal Colour by all user groups.
In the comparison of the usability ratings between Universal Colour and traditional methods, as indicated by the difference scores (Figure 8), Universal Colour outperformed traditional methods in most evaluation elements. Particularly, it received better scores in design efficiency, relearning difficulty, user enjoyment, and replicability. All user groups showed relatively small differences in ratings for learnability, design efficiency, and replicability, suggesting that these advantages were relatively consistent across groups. When examining the differences in ratings between Universal Colour and traditional methods across all user groups, it could be observed that general users and students rated Universal Colour higher.
Figure 8. The differences in usability ratings between Universal Colour and traditional methods.
Moreover, Universal Colour provided the greatest assistance to general users in terms of its design efficiency, eliminating the need for relearning, and aesthetics, followed by its assistance to student users, while designer users perceived it to provide less assistance in these aspects. Universal Colour shows the greatest improvement for student users in terms of accuracy, enjoyment, scientificity, universality, and replicability. It demonstrates the highest enhancement for designer users in terms of learnability and usability. However, Universal Colour fell short compared to traditional methods in terms of design autonomy, with the ranking being student users > designer users > general users.

4.3. The Evaluation of the Universality and Design Time of the Colour Scheme

The 936 icon colour schemes generated by 52 participants using two methods were classified into three categories based on the colour contrast ratio levels: a colour contrast ratio ≥ 3 (minimum requirement specified in ISO-9241-3 and ANSI-HFES-100-1988), a colour contrast ratio ≥ 4.5 (for individuals with moderate visual impairments), and a contrast ratio ≥ 7 (for individuals with low vision). The WCAG 2.2 [44] was used to assess the universality of the schemes, as shown in Table 6.
Table 6. The percentage of icons that meet the criteria for universality designed using Universal Colour and the traditional method.
The results indicated that, across all colour contrast ratio levels, a higher proportion of schemes generated using the Universal Colour method met the universality requirements, especially when the colour contrast ratio was ≥7. When no specific colour contrast ratio requirements were provided to the participants, few designers actively considered the universality of the icon colour schemes. However, a relatively high proportion of design schemes generated using the Universal Colour method still met the needs of users with low vision (contrast ≥ 7).
Therefore, Universal Colour showed a significant improvement in efficiency and effectiveness compared to traditional methods. The average time duration required for participants to design an icon is detailed in Table 7. Across all user groups, designs incorporating a high colour contrast ratio typically necessitated more time. Compared to traditional methods, Universal Colour markedly decreased the time needed for designing. Under traditional methods, professional designers typically spent more time creating high-contrast icons than students and general users, reflecting their need for more refined designs to meet professional standards. In contrast, with the Universal Colour method, the time disparity between students and general users in designing high-contrast icons was minimal, whereas general users demonstrated an opposite trend. These findings suggest that both designers and students could more effectively leverage the benefits of the Universal Colour method, thereby enhancing the efficiency and effectiveness of producing icons with high colour contrast ratios. Consequently, Universal Colour represents a substantial improvement over traditional methods in terms of both efficiency and effectiveness.
Table 7. The average time required for participants to design an icon colour scheme (min).

5. Discussion

5.1. Discussion of Experimental Results

The usability of Universal Colour is 74.3, reaching the Acceptable level. For all user groups, Universal Colour outperformed traditional methods in terms of learnability, design efficiency, colour accuracy, user enjoyment, scientificity, universality, and replicability. However, its score was lower than that of traditional methods in terms of design autonomy. Specifically, general users and student groups gave higher ratings to Universal Colour, while the ratings from designer groups were slightly lower. This could be due to the fact that general users and students tend to prefer more intuitive and understandable design tools and methods. On the other hand, professional designers prioritise design autonomy and aesthetics, relying more on their own experience and subjective judgment for colour schemes rather than predefined rules. Overall, all participants believed that Universal Colour improved the usability and universality of icon colour design and performed well across different user groups.
Using Universal Colour enabled users to design icons with certain colour contrast ratio requirements in a shorter time, particularly in completing high-contrast design requirements. For all user groups, as the colour contrast ratio requirement increased, the design time also increased. This was because that higher colour contrast ratio required more time to adjust the colour schemes to ensure that they met the requirements of universality and aesthetics. In fact, creating icon colour schemes that are both universal and aesthetical requires designers to possess comprehensive expertise, extensive experience, flexible design thinking, as well as effective communication and collaboration skills. Among all user groups, general users who used traditional methods took the longest time to design high-contrast icon colour schemes. This was attributed to their limited understanding of design cognition, methods, and universality in icon colour design, leading to the need for more time and effort to produce more rational icon colour schemes.

5.2. Randomness and Control in Design Cognition and Decision-Making

The balance between spontaneity and control in design is a dynamic relationship. The spontaneity and control in the design process are not mutually exclusive but require appropriate trade-offs and adjustments at different stages. Designers often find it challenging to relinquish design autonomy as they seek to express unique styles and creativity. Consequently, some users might feel that their design autonomy was limited when using Universal Colour. However, creative and personalised design styles may present certain challenges and risks, such as the possibility that the design outcomes may not meet the universality requirements of users. Therefore, designers need to guide and control the design process through rational thinking and analysis to ensure that the design achieves the intended goals and desired effects. The accessible Universal Colour involves a conditional selection within a standard range of contrast, primarily focusing on whether the colour contrast meets the specified standard values, while also satisfying certain aesthetic requirements. Traditional design models rely on designers’ experience, predominantly using trial and error. Through continuous experimentation and iteration, designers achieve colour choices that are both rational and purposeful. The accessible colour design platform is more advantageous as it not only meets the criteria for accessible colours but also provides designers with a broader range of options that adhere to the colour contrast range, further refining choices that align with the overall design intent and aesthetic demands. From a design resolution perspective, this actually liberates the creativity of designers, offering them an expanded range of choices and progressively narrowing this range as the design evolves, allowing for more precise decision-making. Design itself does not have an absolute optimal solution, but rather satisfactory solutions. From the standpoint of optimising design methods and processes, Universal Colour digitalises and visualises colour, enhancing the scientific nature and visibility of the selection process.
In this study, we investigated the randomness and control in design cognition and decision-making through the problem of universal icon colour design. On the one hand, with the use of Universal Colour, the colour scheme could be quantitatively selected, enhancing the controllability and universality of the design. On the other hand, Universal Colour supports user customisation by uploading colours and icons, offering users design autonomy and randomness. Thus, this approach improves the design cognition and decision-making of all user groups in the dynamic balance between spontaneity and control in universal icon colour design (Figure 9). User interviews and experimental results validated the feasibility of this method, demonstrating its effectiveness across all user groups, particularly in facilitating design cognition and decision-making for non-professional users.
Figure 9. The randomness and control in traditional methods and Universal Design.
At present, it has obtained two Chinese national invention patents and has been used in more than 10 projects, including the 2022 Beijing Winter Olympics (Figure 10). As a web-based service, the platform significantly enhances the efficiency of environmental information communication, while simultaneously strengthening the accessibility of living environments and accommodating the needs of diverse groups. Furthermore, the most prominent feature of the platform is the incorporation of intelligent design tools and quantified design standards, which serve to boost the production efficiency of the design industry.
Figure 10. The application of Universal Colour in the National Speed Skating Oval of the 2022 Beijing Paralympics (National Speed Skating Oval: 2 Lincui Road, Chaoyang District, Beijing, China).
In the future, intelligent algorithms should be integrated to enhance the cohesion between interaction and programming. This methodology will be applied in real-world scenarios, facilitating a more scientific and efficient process for selecting colour schemes for spatial icons. This technique is versatile, suitable not only for assessing icon styles, text fonts, and diverse colour arrays but also for conducting quality inspections of icon colour matching.
Furthermore, the application of this approach can be broadened to include industrial products, architectural facades, and book printing, among other fields. Through such broad applications, additional case studies can be utilised to refine decision-making processes related to colour configuration.
Additionally, fostering collaborations among governments, technology firms, and nonprofit organisations is crucial for promoting the universal design of colour schemes. Such partnerships are expected to aid in the standardisation and widespread adoption of colour designs, thereby more effectively addressing the diverse needs of various industries.

6. Conclusions, Recommendations and Future Prospects

Icon design has become a hot topic of human–computer interaction interfaces. Building upon the concept of universal design, this study proposed an intelligent assistance method, named Universal Colour, for icon colour scheme design to assist users in reducing colour configuration errors and ensuring readability and universality in icon colour schemes. As a universally accessible and open method for universal icon colour design, Universal Colour enhances people’s design proficiency, enabling electronic products to better serve diverse user groups and enhance their information interaction experiences.
However, this study had certain limitations.
(1)
Although a unified platform was used, the experiment’s results may still be affected by objective factors such as device and network variations, leading to potential errors. Future research should include a comparison of the efficiency among different computer-assisted icon design platforms.
(2)
Due to the differences in educational backgrounds and design experiences, the traditional methods adopted by all user groups in Experiment Module One varied, generally characterised by low design efficiency, difficulty in quantification, and lengthy duration. However, over 95% of users found Universal Colour to be straightforward and easy to use.
(3)
This study focused solely on the issue of icon colour design and did not consider compatibility with the interface or other aspects. In fact, icon colour design is a highly complex task that requires targeted designs to meet diverse user needs. Therefore, further refinement is necessary for the Universal Colour design method and software platform. Additionally, the discussion on the randomness and control in design cognition and decision-making in this paper was based solely on the case of icon colour design. Future research on this topic will require more quantitative data and case studies for support.

Author Contributions

Conceptualization, E.Z. and W.Z.; methodology, E.Z. and Z.Y.; software, E.Z. and Z.M.; validation, E.Z. and Z.Y.; formal analysis, E.Z. and Z.M.; investigation, Z.Y. and Y.X.; resources, W.Z. and Y.X.; data curation, E.Z. and F.C.; writing—original draft preparation, E.Z. and Z.Y.; writing—review and editing, Z.Y., W.Z. and F.C.; visualisation, E.Z. and Z.M.; supervision, W.Z.; project administration, W.Z.; funding acquisition, W.Z. All authors have read and agreed to the published version of the manuscript.

Funding

This research was sponsored by the National Natural Science Foundation of China (Research on colour design theory and method of barrier-free environment in elderly care facilities, No. 51808382) and the National Natural Science Foundation of Tianjin (Research on the colour design method of barrier-free universal signage of elderly care facilities, No. 20JCQNJC01930).

Data Availability Statement

The data that support the findings of this study are available from the corresponding author upon reasonable request.

Conflicts of Interest

The authors declare no conflicts of interest.

Abbreviations

WHOWorld Health Organization
UIUser Interface
W3CWorld Wide Web Consortium
WCAGWeb Content Accessibility Guidelines
ADAAlternative Distribution Alliance
CUDColour Universal Design
SUSSoftware Usability Scale
ISOInternational Organization for Standardization
ANSIAmerican National Standards Institute
HFESHuman Factors and Ergonomics Society

References

  1. World Health Organization. World Report on Vision; World Health Organisation: Geneva, Switzerland, 2019.
  2. Lindberg, T.; Näsänen, R. The effect of icon spacing and size on the speed of icon processing in the human visual system. Displays 2003, 24, 111–120. [Google Scholar] [CrossRef]
  3. Liu, H.; Wang, W.; Liu, Y.; Song, F.; Wang, S.; Guo, H. Study on the Differences of Icon Cognition of Graphical Interface for Age-Friendly Design. J. Gerontol. Soc. Work 2023, 66, 662–679. [Google Scholar] [CrossRef] [PubMed]
  4. Wu, J.; Jiao, D.; Lu, C.; Li, C.; Huang, X.; Weng, S. How Do Older Adults Process Icons in Visual Search Tasks? The Combined Effects of Icon Type and Cognitive Aging. IJERPH 2022, 19, 4525. [Google Scholar] [CrossRef] [PubMed]
  5. Zhou, C.; Yuan, F.; Huang, T.; Zhang, Y.; Kaner, J. The Impact of Interface Design Element Features on Task Performance in Older Adults: Evidence from Eye-Tracking and EEG Signals. IJERPH 2022, 19, 9251. [Google Scholar] [CrossRef] [PubMed]
  6. Bühler, D.; Hemmert, F.; Hurtienne, J. Universal and intuitive? Scientific guidelines for icon design. In Proceedings of the MuC’20: Mensch und Computer, Magdeburg, Germany, 6–9 September 2020; ACM: New York, NY, USA, 2020; pp. 91–103. [Google Scholar] [CrossRef]
  7. Cao, Y.; Ding, Y.; Deng, Y.; Zhang, X. Effects of Mobile Application Icon Complexity and Border on College Students’ Cognition. In Advances in Affective and Pleasurable Design; Fukuda, S., Ed.; Springer: Berlin/Heidelberg, Germany, 2020; pp. 273–279. [Google Scholar] [CrossRef]
  8. Arditi, A. Rethinking ADA signage standards for low-vision accessibility. J. Vis. 2017, 17, 8. [Google Scholar] [CrossRef] [PubMed]
  9. Adeyemo, O.; Jeter, P.E.; Rozanski, C. Living with ultra-low vision: An inventory of self-reported visually guided activities by individuals with profound visual impairment. Transl. Vis. Sci. Technol. 2017, 6, 10. [Google Scholar] [CrossRef] [PubMed]
  10. Giudice, N.A.; Legge, G.E. Blind navigation and the role of technology. In The Engineering Handbook of Smart Technology for Aging, Disability, and Independence; John Wiley & Sons: Hoboken, NJ, USA, 2008; pp. 479–500. [Google Scholar]
  11. Lin, H.; Hsieh, Y.-C.; Wu, F.-G. A study on the relationships between different presentation modes of graphical icons and users’ attention. Comput. Hum. Behav. 2016, 63, 218–228. [Google Scholar] [CrossRef]
  12. Chiu, C.-J.; Hu, Y.-H.; Lin, D.-C.; Chang, F.-Y.; Chang, C.-S.; Lai, C.-F. The attitudes, impact, and learning needs of older adults using apps on touchscreen mobile devices: Results from a pilot study. Comput. Hum. Behav. 2016, 63, 189–197. [Google Scholar] [CrossRef]
  13. Ho, H.-H.; Tzeng, S.-Y. Using the Kano model to analyze the user interface needs of middle-aged and older adults in mobile reading. Comput. Hum. Behav. Rep. 2021, 3, 100074. [Google Scholar] [CrossRef]
  14. Shi, Y.; Zhang, Y.; Wang, T.; Li, C.; Yuan, S. The Effects of Ambient Illumination, Color Combination, Sign Height, and Observation Angle on the Legibility of Wayfinding Signs in Metro Stations. Sustainability 2020, 12, 4133. [Google Scholar] [CrossRef]
  15. Weisman, G.D. Way-Finding in the Built Environment: A Study in Architectural Legibility; ProQuest: Ann Arbor, MI, USA, 1981. [Google Scholar]
  16. Arthur, P.; Passini, R. Wayfinding: People, Signs, and Architecture; McGraw-Hill Book Co.: New York, NY, USA, 1992. [Google Scholar]
  17. American National Standards Institute (ANSI) and Illuminating Engineering Society (IES). Lighting and the Visual Environment for Senior Living (ANSI/IES RP-28-16); Illuminating Engineering Society of North America: New York, NY, USA, 2016; pp. 1–87. Available online: https://webstore.ansi.org/preview-pages/IESNA/preview_ANSI+IES+RP-28-16.pdf (accessed on 26 March 2023).
  18. Shieh, K.-K.; Lin, C.-C. Effects of screen type, ambient illumination, and color combination on VDT visual performance and subjective preference. Int. J. Ind. Erg. 2000, 26, 527–536. [Google Scholar] [CrossRef]
  19. Shen, Z.; Zhang, L.; Li, R.; Hou, J.; Liu, C.; Hu, W. The effects of color combinations, luminance contrast, and area ratio on icon visual search performance. Displays 2021, 67, 101999. [Google Scholar] [CrossRef]
  20. Cao, Y.; Qu, Q.; Duffy, V.G.; Ding, Y. Attention for Web Directory Advertisements: A Top-Down or Bottom-Up Process? Int. J. Hum.-Comput. Interact. 2019, 35, 89–98. [Google Scholar] [CrossRef]
  21. Hu, B.; Ning, X. Cervical spine biomechanics and task performance during touchscreen computer operations. Int. J. Ind. Ergon. 2016, 56, 41–50. [Google Scholar] [CrossRef]
  22. Shen, Z.; Xue, C.; Li, J.; Zhou, X. Effect of Icon Density and Color Contrast on Users’ Visual Perception in Human Computer Interaction. In Engineering Psychology and Cognitive Ergonomics; Harris, D., Ed.; Springer International Publishing: Cham, Switzerland, 2015; pp. 66–76. [Google Scholar] [CrossRef]
  23. Liu, W.; Cao, Y.; Proctor, R.W. How do app icon color and border shape influence visual search efficiency and user experience? Evidence from an eye-tracking study. Int. J. Ind. Ergon. 2021, 84, 103160. [Google Scholar] [CrossRef]
  24. Yeh, Y.-Y.; Lee, D.-S.; Ko, Y.-H. Color combination and exposure time on legibility and EEG response of icon presented on visual display terminal. Displays 2013, 34, 33–38. [Google Scholar] [CrossRef]
  25. Deng, L.; Zhang, Z.; Zhou, F.; Liu, R. Effects of App Icon Border Form and Interface Background Color Saturation on User Visual Experience and Search Performance. Adv. Multimed. 2022, 2022, 1166656. [Google Scholar] [CrossRef]
  26. Zhang, M.; Gong, Y.; Deng, R.; Zhang, S. The effect of color coding and layout coding on users’ visual search on mobile map navigation icons. Front. Psychol. 2022, 13, 1040533. [Google Scholar] [CrossRef]
  27. Yu, N.; Ouyang, Z. Effects of background colour, polarity, and saturation on digital icon status recognition and visual search performance. Ergonomics 2023, 67, 433–445. [Google Scholar] [CrossRef] [PubMed]
  28. Michalski, R.; Grobelny, J. The role of colour preattentive processing in human–computer interaction task efficiency: A preliminary study. Int. J. Ind. Ergon. 2008, 38, 321–332. [Google Scholar] [CrossRef]
  29. Hu, K.; Xu, Z.; Wang, X.; Wang, Y.; Li, H.; Zhang, Y. Research on Street Color Environment Perception Based on CEP-KASS Framework. Buildings 2023, 13, 2649. [Google Scholar] [CrossRef]
  30. Jylhä, H.; Hamari, J. An icon that everyone wants to click: How perceived aesthetic qualities predict app icon successfulness. Int. J. Hum.-Comput. Stud. 2019, 130, 73–85. [Google Scholar] [CrossRef]
  31. Kim, H.; Lee, H. Cognitive Activity-Based Design Methodology for Novice Visual Communication Designers. Int. J. Art. Des. Educ. 2016, 35, 196–212. [Google Scholar] [CrossRef]
  32. Lawson, B. The Design Student’s Journey: Understanding How Designers Think; Routledge: London, UK, 2018. [Google Scholar]
  33. Lee, J.H.; Ostwald, M.J. The relationship between divergent thinking and ideation in the conceptual design process. Des. Stud. 2022, 79, 101089. [Google Scholar] [CrossRef]
  34. Raina, A.; Cagan, J.; McComb, C. Transferring Design Strategies from Human to Computer and Across Design Problems. J. Mech. Des. 2019, 141, 114501. [Google Scholar] [CrossRef]
  35. Cokely, E.T.; Feltz, A.; Ghazal, S.; Allan, J.N.; Petrova, D.; Garcia-Retamero, R. Decision making skill: From intelligence to numeracy and expertise. Cambridge handbook of expertise and expert performance. In Cambridge Handbook of Expertise and Expert Performance, 2nd ed.; Ericsson, K.A., Hoffman, R.R., Kozbelt, A., Williams, A.M., Eds.; Cambridge University Press: New York, NY, USA, 2018; pp. 476–505. [Google Scholar]
  36. Borovcnik, M.; Kapadia, R. Modelling in Probability and Statistics: Key Ideas and Innovative Examples. In Real-World Problems for Secondary School Mathematics Students: Case Studies; Springer: Berlin/Heidelberg, Germany, 2011; pp. 1–43. [Google Scholar] [CrossRef]
  37. Gonçalves, M.; Cardoso, C.; Badke-Schaub, P. Inspiration choices that matter: The selection of external stimuli during ideation. Des. Sci. 2016, 2, e10. [Google Scholar] [CrossRef]
  38. De Vries, J.P.; Hooge, I.T.C.; Wertheim, A.H.; Verstraten, F.A.J. Background, an important factor in visual search. Vis. Res. 2013, 86, 128–138. [Google Scholar] [CrossRef] [PubMed]
  39. Borovcnik, M.; Kapadia, R. Reasoning with Risk: Teaching Probability and Risk as Twin Concepts. In Teaching and Learning Stochastics: Advances in Probability Education Researc; Batanero, C., Chernoff, E.J., Eds.; Springer International Publishing: Cham, Switzerland, 2018; pp. 3–22. [Google Scholar] [CrossRef]
  40. Lee, C. Information Processing and Moral Problem Solving. Comput. Econ. 2021, 57, 911–922. [Google Scholar] [CrossRef]
  41. Dinar, M.; Shah, J.J.; Cagan, J.; Leifer, L.; Linsey, J.; Smith, S.M.; Hernandez, N.V. Empirical Studies of Designer Thinking: Past, Present, and Future. J. Mech. Des. 2015, 137, 021101. [Google Scholar] [CrossRef]
  42. Chan, C.S. Design Cognition: Cognitive Science in Design; China Architecture and Building Press: Beijing, China, 2008. [Google Scholar]
  43. WebAIM Contrast Checker. Web Accessibility in Mind. Available online: https://webaim.org/resources/contrastchecker/?fcolor=9999FF&bcolor=303030 (accessed on 26 March 2023).
  44. Contrast Grid. Eightshapes. Available online: https://contrast-grid.eightshapes.com/ (accessed on 26 March 2023).
  45. Contrast Ratio. Siegemedia. Available online: https://contrast-ratio.com/ (accessed on 26 March 2023).
  46. Donielle, B.; Adrian, R. Color Safe. Available online: http://colorsafe.co/ (accessed on 26 March 2023).
  47. Adobe Color. Adobe. Available online: https://color.adobe.com/create/color-contrast-analyzer (accessed on 26 March 2023).
  48. Web Content Accessibility Guidelines Advisory Committee. Web Content Accessibility Guidelines (WCAG) 2.2. Available online: https://www.w3.org/TR/WCAG22/#sotd (accessed on 23 July 2023).
  49. US Department of Justice. ADA Standards for Accessible Design. Available online: http://www.ada.gov/regs2010/2010ADAStandards (accessed on 20 March 2024).
  50. Color Universal Design Recommendation Color Set Production Committee. Model Color Palette for Color Universal Design Guide Book, 2nd ed.; DIC Color Design Co., Ltd.: Tokyo, Japan, 2018. (In Japanese) [Google Scholar]
  51. Bangor, A. Determining What Individual SUS Scores Mean: Adding an Adjective Rating Scale. J. Usability Stud. 2009, 4, 114–123. [Google Scholar]
  52. Sauro, J. Quantifying the User Experience: Practical Statistics for User Research; Morgan Kaufmann Publishers Inc.: San Mateo, CA, USA, 2012. [Google Scholar]
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.

Article Metrics

Citations

Article Access Statistics

Journal Statistics
Multiple requests from the same IP address are counted as one view.
Download PDF
A Comparative Study of Traditional Village Renewal Characteristics Driven by Different Entities from the Perspective of Place-Making
Previous
Numerical Simulation on Aftershock Fragility of Low-Ductility RC Frames under Different Mainshock-Induced Damage Conditions
Next