Icon identification in context: the changing role of icon characteristics with user experience

OBJECTIVE: This research examined the relative importance of icon characteristics in determining the speed and accuracy of icon identification. BACKGROUND: Studies to date have focused on the role of one or two icon characteristics when users first experience an icon set. This means that little is known about the relative importance of icon characteristics or how the role of icon characteristics might change as users gain experience with icons. METHODS: Thirty participants carried out an icon identification task over a long series of trials to simulate learning through experience. Icon characteristics investigated included semantic distance, concreteness, familiarity, and visual complexity. RESULTS: Icon characteristics were major determinants of performance, accounting for up to 69% of the variance observed in performance. However, the importance of icon characteristics changed with experience: Semantic distance is crucial initially while icon-function relationships are learned, but familiarity is important later because it has lasting effects on access to long-term memory representations. CONCLUSION: These findings suggest that icon concreteness may not be of primary importance when identifying icons and that semantic distance and familiarity may be more important. APPLICATION: Designers need to take into account icon characteristics other than concreteness when creating icons, particularly semantic distance and familiarity. The precise importance of the latter characteristics will vary depending on whether icons are rarely encountered or frequently used.     

The effects of color combinations,luminance contrast,and area ratio on icon visual search performance

The visual search of icons in a digital interface plays an important role in human-computer interaction. In this behavior study about the visual search of graphic symbols, the effects of the color combination, luminance contrast, and icon area ratio were investigated. A total of 28 participants (12 men and 16 women, ages ranging from 20 to 28 years, Mean = 22.4, SD = 1.7) were asked to perform an icon search task. Participants’ icon search accuracy and response times were measured as a function of the following independent variables: three levels of area ratios, four background colors, four foreground colors, and three levels of luminance contrast. The results showed that although there was no significant main effect of luminance contrast on the icon search accuracy, participants responded more quickly to medium luminance contrast than low or high luminance contrast. Similarly, the medium or low area ratio was more conducive to the participants identifying icons. Moreover, a strong interaction was observed between the effects of luminance contrast and icon area ratio. The icon search performance of the high luminance contrast improved significantly as the figure/background area ratio decreased. Icon color combinations also significantly affected visual search performance. White on black, yellow on black, turquoise on black, white on red, yellow on red, and white on purple resulted in better performance than other color combinations. The findings of this study provide useful guidelines for designing more efficient and user-friendly icons and interfaces in the future.     

Is visual content in textual search interfaces beneficial to dyslexic users?

Dyslexia is a learning disability characterised by problems with accurate or fluent word recognition, poor decoding, and poor spelling abilities. Although several studies have addressed dyslexia and Web accessibility, less is known about how dyslexia affects information search. This study investigated whether the inclusion of icons in search user interfaces enhances performance among dyslexics. A total of 21 dyslexics and 21 controls completed 52 search tasks in 4 conditions: icons only, words only, and both icons and words in a grid layout and a list layout, while eye movements were recorded. Dyslexics took significantly longer than controls to locate targets in tasks containing text, but not in the icon-only condition. Dyslexics had longer fixation durations than controls in both icon and text based search arrays, suggesting higher mental load associated with search tasks generally. The addition of words to icon arrays led to faster search times within controls, but not dyslexics. Dyslexics also exhibited more fixations on dual-modality tasks, and longer scanpaths than controls in list layout. Both groups were fastest searching the list layout, with icons and words listed in columns. Results are discussed in terms of the design of accessible search interfaces for dyslexic users, taking into account mental load of dual-modality information display, and the arrangement of search items. Empirical data is provided for the design of accessible search results interfaces for dyslexics.     

Effects of computer icons and figure/background area ratios and color combinations on visual search performance on an LCD monitor

This study investigated the effects of figure/background color combinations, the type of computer icon and the figure/background area ratio on visual search performance on a liquid crystal display (LCD) screen. Participants had to search for the target item in a circle stimulus array, which had a diameter of 20 cm and included one target and 19 distracters. Results showed that these three independent variables significantly affected the visual search performance. The search times for EMAIL and SAVE computer icons were significantly shorter than that for a PRINT computer icon. Visual search performance was better for computer icons with a 90% figure/background area ratio than for a 70% ratio. However, no difference in search time between 90% and 50% ratios or between 70% and 50% ratios was observed. Color combinations also significantly affected the visual search performance and white/yellow and white/blue color combinations for the figure/background resulted in better performance than black/blue and black/yellow combinations. However, no difference in search time was observed for participants with and without esthetic training. The implications of the results are applicable to design icons for the interfacing of computers and communication information.     

Study on the correlation and inhibition of visual marking and industrial icons

As a carrier of complex information, industrial icons play an important role in intelligent manufacturing systems, and the superiority of its visual presentation affects the visual search efficiency of operators. This paper applied the theoretical knowledge of visual marking to the study of industrial icons, and the relationship between the inhibitory mechanism of visual marking and the information characteristic, semantic categories and spatial layout of industrial icons is explored from the inhibition of location, feature, category and spatial structure in visual marking. The experimental results show that: in the aspect of feature inhibition, the 2.5D style inhibits the flat style and the complex icon inhibits the simple icon. In the aspect of category inhibition, the inhibitory degree of four different categories are warning, monitoring, equipment and production in order from high to low. In the aspect of spatial layout inhibition, the regular layout inhibits the chaotic layout and the orderly arrangement inhibits the disorderly arrangement. It is concluded that there is a certain correlation among the industrial icons’ inhibition of feature, category and spatial layout, and the priority of category is higher than that of feature, the spatial layout inhibition is jointly influenced by the inhibition of feature and category, among which category inhibition takes the lead role.     

Using icons to convey medication schedule information

We examined older adult comprehension and memory for medication schedules conveyed by different types of visual icons as well as text. Three icons were compared: a timeline, a pair of 12 h clocks (one for AM and one for PM hours) and a 24 h clock. In Experiment 1, older and younger participants paraphrased and then recalled schedules that were conveyed by the three icons or by text. Text and timeline schedules were paraphrased more accurately than either clock icon. Paraphrase errors suggested that subjects had trouble integrating schedule information across the two 12 h clocks. Analysis of paraphrase times showed that the text schedule was paraphrased most quickly, followed by the timeline, the 24 h clock and the 12 h clock. No differences were found for the accuracy of recalling the icon and text schedules. Experiment 2 examined free and cued recall after limited study time by older adults. Because text superiority in Experiment 1 may have reflected greater familiarity with text than with icons, recall was examined across four trials in Experiment 2. Text was recalled most accurately, followed by the timeline, the 24 h clock and the 12 h clock. Study-test trials did not influence recall. Text schedules may have been generally more effective than the icons because of their greater familiarity. The timeline may have been the most effective icon because it was more compact and familiar than the clock icons used in the study. The findings suggest that including such icons in medication instructions requires training.     

The effects of icon internal characteristics on complex cognition

The interaction between humans and digital interfaces is a complex cognitive process which has a high demand on working memory resources. However, most previous research on icon perception seems to focus only on the influences of an icon's internal characteristics (e.g. visual complexity, concreteness and familiarity) on simple tasks such as visual search and recall tasks. The study reported here applied a math task to simulate the complicated process of human-computer interaction and investigated the effects of icon internal characteristics on the performance of complex cognition. First, we created and filtered 80 novel icons of 4 different types (simple & concrete, simple & abstract, complex & concrete, complex & abstract). Subsequently, participants were required to perform an icon-meaning recall task, during which icon familiarity was manipulated by different exposure frequencies. Finally, after viewing random icon-digit associations, participants' abilities to solve algebraic equations involving icons were tested. The results indicated that participants performed significantly better when the icons were simple, concrete or familiar and these beneficial effects increased as the task became more complex. Additionally, strong evidence was found to show that it was easier to encode and maintain familiar icons and associated information in working memory. The findings of this study provide useful information for the icon design and interface design of human-computer interaction.     

How do app icon color and border shape influence visual search efficiency and user experience? Evidence from an eye-tracking study

Icon color and icon border shape are two key factors that affect search efficiency and user experience but have previously been studied separately. This study aimed to ascertain their separate and combined effects on smartphone interfaces. We conducted an experiment using eye tracking in addition to performance and experience measures to understand the effects of app icon color and border shape on visual efficiency and user experience. The results identified both features as essential attributes with interactive effects in the process of searching app icons on a smartphone interface. The study confirmed that varied colors across icons and a rounded square border shape helped to improve search efficiency, decrease cognitive effort, and lead to a more positive user experience.Relevance to industryUsers of smartphones are often confronted with the problem of selecting a single app from a great number of apps. Visual design of app icons plays a key role in influencing visual search efficiency and user experience. The results of this study have implications for designing app icons on the interface of smartphones to improve search efficiency and elicit positive user experience.     

Investigation of Icon Design and Touchable Area for Effective Smart Phone Controls

As the full‐touch screen is being implemented in more smart phones, controllability of touch icons need to be considered. Previous research focused on recommendations for absolute key size. However, the size of tactual input on touch interface is not precisely equal to the icon size. This study aims to determine the suitable touchable area to improve touch accuracy. In addition, there was an investigation into the effect of layout (3 × 4, 4 × 5, 5 × 6, and 6 × 8) and icon ratio (0.5, 0.7, and 0.9). To achieve these goals, 40 participants performed a set of serial tasks on the smart phone. Results revealed that the layout and icon ratio were statistically significant on the user response: input offset, hit rate, task completion time, and preference. The 3 × 4 and 4 × 5 layouts were shown to have better performance. The icon ratio of 0.9 was shown to have greater preference. Furthermore, the hit rate (proportion of correct input) of touchable area was estimated through the bivariate normal distribution of input offset. The hit rate could vary, depending on the size of touchable area, which is a rectangle that yields a specific hit rate. A derivation procedure of the touchable area was proposed to guarantee the desirable hit rate. Meanwhile, the locations of the central region indicated a pattern of vertical touch and showed better performance. The users felt more difficulty when approaching the edge of the frame. The results of this study could be used in the design of touch interfaces for mobile devices.     

EvIcon: Designing High-Usability Icon with Human-in-the-loop Exploration and IconCLIP

Interface icons are prevalent in various digital applications. Due to limited time and budgets, many designers rely on informal evaluation, which often results in poor usability icons. In this paper, we propose a unique human-in-the-loop framework that allows our target users, that is novice and professional user interface (UI) designers, to improve the usability of interface icons efficiently. We formulate several usability criteria into a perceptual usability function and enable users to iteratively revise an icon set with an interactive design tool, EvIcon. We take a large-scale pre-trained joint image-text embedding (CLIP) and fine-tune it to embed icon visuals with icon tags in the same embedding space (IconCLIP). During the revision process, our design tool provides two types of instant perceptual usability feedback. First, we provide perceptual usability feedback modelled by deep learning models trained on IconCLIP embeddings and crowdsourced perceptual ratings. Second, we use the embedding space of IconCLIP to assist users in improving icons' visual distinguishability among icons within the user-prepared icon set. To provide the perceptual prediction, we compiled IconCEPT10K, the first large-scale dataset of perceptual usability ratings over 10,000 interface icons, by conducting a crowdsourcing study. We demonstrated that our framework could benefit UI designers' interface icon revision process with a wide range of professional experience. Moreover, the interface icons designed using our framework achieved better semantic distance and familiarity, verified by an additional online user study.     

Impact of spatial auditory feedback on the efficiency of iconic human–computer interfaces under conditions of visual impairment

This paper investigates the addition of spatial auditory feedback as a tool to assist people with visual impairments in the use of computers, specifically in tasks involving iconic visual search. In this augmented interface, unique sounds were mapped to visual icons on the screen. As the screen cursor traversed the screen, the user heard sounds of nearby icons, spatially, according to the relative position of each icon with respect to the screen cursor. A software prototype of the design was developed to evaluate the performance of users in the search of icons within the proposed interface. Experiments were conducted with simulated visual impairments on volunteer participants to evaluate if the addition of spatial auditory feedback makes the interface more accessible to users with impaired vision. Results demonstrated that spatialization of icon sounds provides additional remote navigational information to users, enabling new strategies for task completion. Directions for future research are discussed and prioritized.     

A Taxonomy of Representation Strategies in Iconic Communication

Predicting whether the intended audience will be able to recognize the meaning of an icon or pictograph is not an easy task. Many icon recognition studies have been conducted in the past. However, their findings cannot be generalized to other icons that were not included in the study, which, we argue, is their main limitation. In this paper, we propose a comprehensive taxonomy of icons that is intended to enable the generalization of the findings of recognition studies. To accomplish this, we analyzed a sample of more than eight hundred icons according to three axes: lexical category, semantic category, and representation strategy. Three basic representation strategies were identified: visual similarity; semantic association; and arbitrary convention. These representation strategies are in agreement with the strategies identified in previous taxonomies. However, a greater number of subcategories of these strategies were identified. Our results also indicate that the lexical and semantic attributes of a concept influence the choice of representation strategy.     

基于因子分析法的图标设计评价方法

现有的图标设计评价方法大多基于审美评价或可用性而展开,缺少对图标间的关 系及设计因素的研究。为此,提出了一种基于因子分析法的界面图标设计评价方法,通过选取 图标设计中的6 个设计元变量,对其展开意象评价统计并建立均值矩阵,使用因子分析法对其 进行计算分析及评价。最终将图标设计的影响因子提取为图标外形和图标内部两个主要因子, 从而方便研究人员评价系列图标设计中各图标之间的关系和各构成要素的相互作用。该方法具 有可靠性,评价结果与现有系列图标设计的视觉表现及其市场表现相符,并得出图标外形因子 对于图标设计效果的影响作用大于图标内部因子这一主要观点。     

Effects of smartphone icon background shapes and figure/background area ratios on visual search performance and user preferences

Smartphones are becoming increasingly popular, users are provided with various interface styles with different designed icons. Icon, as an important competent of user interface, is regarded to be more efficient and pleasurable. However, compared with desktop computers, fewer design principles on smartphone icon were proposed. This paper investigated the effects of icon background shape and the figure/background area ratio on visual search performance and user preference. Icon figures combined with six different geometric background shapes and five different figure/background area ratios were studied on three different screens in experiments with 40 subjects. The results of an analysis of variance (ANOVA) showed that these two independent variables (background shape and figure/background area ratio) significantly affected the visual search performance and user preference. On 3.5-in (1 in=0.025 4 m) and 4.0-in displays, unified backgroundwould be optimal, shapes such as square, circle and transitions between them (e.g., rounded square, squircle, etc.) are recommended because backgrounds in these shapes yield a better search time performance and subjective satisfaction for ease of use, search and visual preference. A 60% figure/background area ratio is the most appropriate for smartphone icon design on the 3.5-in screen, while a 50% area ratio could be a suggestion for both relatively optimized search performance and user preference on 4.0-in. In terms of the 4.7-in, icon figure is used directly for its better performance and preference compared with icons with background.     

Communicating content: development and evaluation of icons for academic document triage through visualisation and perception

This work seeks to identify key features and characteristics for the design of icons that can support the tasks of information seekers in academic document triage interfaces. Such icons are meant to act as visual links to the specific elements or sections in an academic document. We suggest that icons in triage interfaces are better able to communicate information, provide feedback and enable faster user interactions than text, particularly in mobile-based interfaces. Through investigation of visualisation and perception processes, we are able to propose five primary icon categories, the two most dominant being iconic and symbolic: iconic representations mostly apply to graphically and spatially distinct document elements (i.e. Title, Abstract, Tables and Figures), externalising the elements’ surface propositions. Symbolic representations are largely associated with elements of greater semantic value (Introduction, Conclusion, Full text and Author), drawing upon the elements’ deep propositions.     

Layout attributes and recall

The spatial arrangement of elements such as icons in a computer interface may influence learning the interface. However, the effects of layout organization on users' information processing is relatively little studied so far. The three experiments of this paper examined two attributes of layouts: spatial grouping by proximity and semantic coherence. Learning was assessed by tasks in which 30 participants recalled icon-like items' labels, locations, or both as a series of study-recall trials. The results show that layout organization interacts with task demands. Semantic organization improves recall of labels, and spatial grouping supports recall of locations. When both labels and locations are learned concurrently, the best recall performance is associated with a simultaneously grouped and semantically coherent layout. However, semantic and spatial organization may interact unexpectedly on learning. The findings are discussed from the viewpoint of information chunking in memory processes and interface design.     

Cognitive Strategies for the Visual Search of Hierarchical Computer Displays

This article investigates the cognitive strategies that people use to search computer displays. Several different visual layouts are examined: unlabeled layouts that contain multiple groups of items but no group headings, labeled layouts in which items are grouped and each group has a useful heading, and a target-only layout that contains just one item. A number of plausible strategies were proposed for each layout. Each strategy was programmed into the EPIC cognitive architecture, producing models that simulate the human visual-perceptual, oculomotor, and cognitive processing required for the task. The models generate search time predictions. For unlabeled layouts, the mean layout search times are predicted by a purely random search strategy, and the more detailed positional search times are predicted by a noisy systematic strategy. The labeled layout search times are predicted by a hierarchical strategy in which first the group labels are systematically searched, and then the contents of the target group. The target-only layout search times are predicted by a strategy in which the eyes move directly to the sudden appearance of the target. The models demonstrate that human visual search performance can be explained largely in terms of the cognitive strategy that is used to coordinate the relevant perceptual and motor processes, a clear and useful visual hierarchy triggers a fundamentally different visual search strategy and effectively gives the user greater control over the visual navigation, and cognitive strategies will be an important component of a predictive visual search tool. The models provide insights pertaining to the visual-perceptual and oculomotor processes involved in visual search and contribute to the science base needed for predictive interface analysis.     

Study on semantic-entity relevance of industrial icons and generation of metaphor design

The intelligent transformation of the manufacturing industry is accompanied by the visualization of industrial information, and the semantic expression of industrial icons plays a crucial role in improving operators' cognitive performance. Taking the production process of a battery production line as the research object, we studied the semantics-entity relevance of industrial icons based on the concepts of “signifier” and “signified” in metaphorical cognition as well as “topic” and “vehicle.” On this basis, we designed the icons of eight process stations (precleaning, diffusion, coating, screen printing, power testing, etc.) of the battery production line using the metaphor design method. The experimental results show that the icons complying with the law of semantic cognition have high search efficiency. It is concluded that the industrial icons should be designed according to the relevance between functional semantics and entity specific to each production process and that applying such carefully designed industrial icons to industrial information visualization will effectively improve the cognitive performance of operators.     

Layout attributes and recall

The spatial arrangement of elements such as icons in a computer interface may influence learning the interface. However, the effects of layout organization on users' information processing is relatively little studied so far. The three experiments of this paper examined two attributes of layouts: spatial grouping by proximity and semantic coherence. Learning was assessed by tasks in which 30 participants recalled icon-like items' labels, locations, or both as a series of study-recall trials. The results show that layout organization interacts with task demands. Semantic organization improves recall of labels, and spatial grouping supports recall of locations. When both labels and locations are learned concurrently, the best recall performance is associated with a simultaneously grouped and semantically coherent layout. However, semantic and spatial organization may interact unexpectedly on learning. The findings are discussed from the viewpoint of information chunking in memory processes and interface design.     

Visual search strategies and eye movements when searching Chinese character screens

Most visual search studies have been restricted to alphanumeric stimulus materials. Research related to scanning patterns of Chinese characters is sparse. This study is an attempt to understand the differences and similarities in visual search of Chinese characters having a varying degree of complexity among Hong Kong Chinese, Mainland Chinese and Chinese reading non-Chinese people. Eighteen participants were tested on Chinese character screens with three layouts (row, column, and uniform separation) and two word complexities (high and low). The 18 participants comprised six Hong Kong Chinese, six Mainland Chinese and six non-native Chinese readers. Performance data and eye movement data were recorded. The percent correct and search time were the two performance measures. A new measure, called HV-ratio was developed to characterize eye movements. The results show that Hong Kong Chinese use predominantly horizontal search patterns while the Mainland Chinese change their search pattern depending on the layout presented. Non-native Chinese readers, on the other hand, do not seem to show any preference on scanning strategy for a given layout. Word complexity did not show any significant effect on search time. Potential reasons for these differences and design implications are discussed.