Icon Size Research Articles

Research on visual size and visual alignment optimization of icon set design

The industry's relevant guidelines on icon design point out that in the design of icon sets, designers should adjust the size and position of each icon, instead of simply unifying the size and position by icon bounding box, to ensure consistency in visual size and visual alignment. However, existing guidelines provide vague answers on specifically adjusting different icons, leaving designers to rely on subjective experience and intuition for adjustments. To explore the general pattern of visual size and alignment between different icons, we first measured the visual size and alignment of different icons through subjective experiments, analyzed the data to find the influencing factors. Next, we constructed a visual size optimization model composed of these factors and proposed an optimization method based on the reference square. Then, we measured the difference between icons’ visual alignment and bounding box alignment through experiments. Finally, we used expert evaluation to test the model's effectiveness in visual size consistency. We have reached the following conclusions: (1) For icons with the same convex hull, the perceived visual size is consistent; (2) To unify the icon visual size using a reference square as the standard, there are two factors affecting the visual size adjustment: the convex hull area of the icon and the convex hull area outside the bounds of the reference square. (3) The visual size optimization model helps slightly improve the visual alignment consistency of icons. These conclusions and the visual size optimization model contribute to establishing more rigorous icon design standards and developing plugins to enhance the quality and efficiency of icon design.

Optimizing Icon Sizes on In-Vehicle Panels to Minimize Perception Time and Prevent Driving Crashes

Distracted driving increases the risk of driving errors and accidents, and it has become the main factor leading to accidents. Currently, a large amount of information is displayed on in-vehicle panels, which possibly distract drivers’ attention, diverting their gaze from the road. To minimize the negative impact of distracted driving, this study sought to optimize the design of icons presented on vehicle screens. We investigated the effect of icon size, icon position, driving state, and age on drivers’ perception time, driving performance, and subjective evaluations. A total of 42 drivers (26 men and 20 women) between the ages of 22 and 70 years participated in the study, completing a simulated driving task and a secondary visual task. The results demonstrated significant main effects of icon size, driving state, icon position, and interaction effects. Participants spent a longer time perceiving smaller icons on the center control panel in the driving state. As the icon size increases, perception time decreases at a reduced speed. During the static state, perception time leveled out from 44′ while during the driving state, perception time leveled out from 80′. On the instrument panel, perception time leveled out from 60′ while on the center control panel, perception time leveled out from 80′. Subjective evaluations supported behavioral data on the effect of icon size. Our results indicated the importance of strategic design for icons on vehicle screens, which could reduce the visual workload, then reduce the risk of traffic accidents. According to the results, enterprises or designers could target the design of icon size according to different types of in-vehicle panels or screens.

Evaluating user interface of a mobile augmented reality coloring application for children with autism: An eye-tracking investigation

Mobile augmented reality (AR) solutions are increasingly being used to facilitate learning and skills training for children with autism spectrum disorder (ASD). Derived from the fact that mobile AR systems can be embedded with multimedia effects, such as 3D animations, sounds or personalized images, with potential benefits for learning and engagement. Many mobile AR-based applications have been developed over the past decade; however, little is known about how children with autism interact with mobile AR application interface elements, which limits the accessible user interface (UI) design of such applications. In this study, we conducted an eye-tracking experiment to examine how children with autism interact differently with the UI of mobile AR coloring apps compared to typically developing (TD) children. Both quantitative and qualitative data suggest that 1) icons and images were more attractive to ASD children and could facilitate their understanding of the task more effectively; 2) a richer interface makes participants with autism focus more on irrelevant elements; and 3) the size and position of icons affected their speed of information processing. We recommend that UI be designed to suit the characteristics of children with autism. For example, visual stimuli such as icons or images should be meaningful; screen elements need to be simple and clear; background distractions should be avoided; and text also needs to be brief and precise. This study is expected to inspire researchers to provide AR apps with accessible UIs in the future and improve the user experience (UX) of children with autism.

Evaluating Visual Consistency of Icon Usage in Across-Devices

Interface icons are often scaled to adapt to different displays in cross-device collaborations. However, adaptive scaling of icons may cause perceptual bias in how icon arrays are visually perceived, which reduces usability and coherent user experience. This article presents an empirical study that evaluates the perceptual bias in the consistency of icon spacing and size caused by adaptive scaling. Then the impact of various visual features of icons (i.e., the border shape, polarity, and composition) on the perceptual bias are investigated. In this study, we found that cross-device scaling of icons causes a perceptual bias in the consistency of icon spacing and size. The shape of the icon border has a significant difference in the perceived spacing of icons, and the bias of the round shape is smaller than that of the square shape. Moreover, changing the icon polarity can affect the perceptual bias of consistency in icon size. These findings are expected to propose scaling recommendations for improving the visual consistency of icon arrays across.

Effect of icon size, icon position and sex on clicking motion when operating smartphones with single hand

Nowadays, increasingly more situations exist where smartphones are operated with one hand, requiring an in-depth understanding of human–computer interaction in single-hand scenarios. 104 volunteers (57 men, 47 women) participated in this study. We aimed to explore thumb movements with the right and left hand on smartphone touchscreens at different icon sizes (50, 80, 110 and 140 rpx) in different operation areas (a 4*7 icon matrix). The results partially conformed to Fitts’ Law. The movement time (MT) significantly increased as the icon size decreased, but this effect was not found over 110 rpx. The MT increased with distance in the vertical direction, but icons with the same horizontal distance had different MTs, indicating that one-handed operation restricted the click on the same side. Additionally, subjects rated 140 rpx better than other sizes, and men clicked faster than women. Suggestions regarding one-handed interface design for different hands of different sexes are provided. Practitioner summary: This study investigated how icon size, position and sex influenced one-thumb click usability on touch-screen mobile phones with different hands of different sexes. The results indicate single-hand operation partially conformed to Fitts’ Law. We suggested the most economical and comfortable size and the fast operation area in one-handed interface design. Abbreviations: MT: movement time; ID: index of difficulty; RPX: responsive pixel; NASA-TLX: task load index of National Aeronautics and Space Administration; ANOVA: analysis of variance.

Research on the generality of icon sizes based on visual attention

AbstractIcon size is one of the key factors affecting the efficiency of information search. The advent of the era of intelligent interaction has made it difficult for icon design to meet the requirements of noncontact, large information volume, and high precision proposed by natural interaction technology in the future. At the same time, with the continuous improvement of display technology, the display resolution has been increased from 720 P to 8 K. Different sizes of display carriers use different resolutions. In order for icons to have efficient recognition at different display resolutions, it is necessary to obtain the best proportional relationship between icon size and display resolution. This paper summarizes the existing relevant research, calculates the ratio of recommended icon size and display resolution as the research variables, and comprehensively evaluates the recommended optimal ratio range of 1:641–1:334 through eye movement, EEG and behavioral response experiments and entropy‐weight TOPSIS method, providing a reference for icon design in various forms of interactive interfaces in the future.

The Impact of Interface Design Element Features on Task Performance in Older Adults: Evidence from Eye-Tracking and EEG Signals.

It is crucial that the interface design of mobile apps be age-appropriate at this stage of global aging, as the new epidemic has resulted in a higher sense of isolation among older persons. In this study, four typical senior social service mobile applications were chosen to give older persons the ability to complete user login duties. The participants were 16 older adults (7 men and 9 women) aged 55 to 76. Both objective and subjective data, including task completion time, gaze length, pupil diameter changes, EEG wave amplitude changes, and subjective sensations of older persons, were gathered using a combination of eye-movement and EEG signal approaches. The program was created to investigate the effects of interface design aspects on older people’s task performance, including interface layout, interface color, information density, icon size and position, etc. The study’s findings revealed that when the user task completion time and average fixation duration were shorter, the line of sight was more equally distributed, the visual focus was closer to the login button, and the average EEG amplitude of the user changed more, the older adults performed better. The palace layout had a more positive effect on job completion among older individuals when it came to interface layout. In terms of interface color, colored (contrasting) colors should serve to highlight the interface’s essential information points while they can be removed. In terms of interface information density, a low-density level interface design can simplify and lower the cognitive load of task execution for older people. The first level of icons in the interface and their position in the visual center of the interface is the best interface design for older persons in terms of icon size and position. The results of this study have theoretical ramifications for a thorough understanding of the factors influencing older people’s task performance, practical ramifications for the design of older people-centered interfaces, and they contribute to our understanding of the characteristics of older people’s interface interaction behavior.

Adapting mobile map application designs to map use context: a review and call for action on potential future research themes

ABSTRACT The increased use of mobile maps in our highly mobile digital culture has resulted in a large variety of map users and map use situations. For mobile map applications that engage a broad user base and feature diverging map usage contexts, one-size-fits-all map interface designs might result in significant usability tradeoffs. To respond to this challenge, changing the map design based on map use context attributes, such as increasing icon sizes for people with impaired vision or using the user’s position to highlight information on the map are only a few of the many ways mobile map applications can be designed and adapted to respond to the needs of users and their map use situations. However, there remains a clear need for research on the intersections between map use contexts and mobile map application design and adaptation. Therefore, this article reviews and synthesizes literature on map use context research and design adaptation of mobile map applications. To push forward efforts in these areas, we propose future research themes and approaches. We first evaluate options for modeling map use context, which plays a significant part in map adaptations for detecting relevant context attributes on which to base adaptation decisions. We then consider dynamic possibilities to assess the usability of these adaptations by reviewing the HEART framework. We conclude by offering ways to move the suggested approaches from concepts closer to practice.

Designing Combinations of Pictogram and Text Size for Icons: Effects of Text Size, Pictogram Size, and Familiarity on Older Adults' Visual Search Performance.

This study aimed to determine suitable combinations of text and pictogram sizes for older adults and investigated the visual prioritization of pictogram versus text. Icons have become an indispensable part of application (app) design. Pictogram size and text size of icons influence the usability of apps, especially by aged users. However, few studies have investigated the influences of different pictogram and text size combinations on readability, legibility, and visual search performance for older adults. This study used eye-tracking technology to investigate the effects of different pictogram and text size combinations as well as familiarity on readability, legibility, and visual search performance for older adults. A 3 (pictogram size) × 3 (text size) × 2 (familiarity) repeated-measures experimental design was used. The results of this study suggest that pictogram size and text size significantly affect visual search performance and that familiarity moderates the effect of text size on distribution of fixation duration proportion for text and pictograms. Large pictogram and text sizes improved the readability and legibility of icons for older adults. Furthermore, the older adults fixated the area of text prior to pictograms when the pictogram size was larger than 72 × 72 px (1.38° × 1.38°) in the visual search task. The results of this study suggest using different combinations of pictogram and text sizes for older adults under different scenarios. The findings of this study act as practical support for designers and developers of mobile apps for older adults.

Evaluasi Usability Dan Perbaikan Desain Antarmuka Aplikasi Info Pdam Tirta Satria Menggunakan Metode Use Questionnare

PERUMDA Tirta Satria is a regional public company engaged in the distribution of water in Banyumas Regency. PERUMDA Tirta Satria has a mobile application called Info PDAM Banyumas. The number of complaints experienced by users while using Info PDAM Banyumas application is the main reason to test the usability of this application. The usability testing method used in this study uses the USE Questionnaire. The results of the usability level obtained from the test are 70.85% which fall into the Eligible or Good category. From the results obtained after the evaluation, it shows that there are usability problems found in the application, such as unclear text, a stiff and unattractive interface, disproportionately large icon sizes, uninformative help menus, and problems when the user make customer complaints because of the unclear flow. To answer the problems that exist in this study, researcher made improvement recommendations for the interface by using Google Material Design as the basis.

The Competency in Using Smartphones of the Homebound Older Adult

Smartphones are widely accessed by all genders, ages, and statuses with the increasing use rate of older adults. When people grow up to older adults, they meet physical declines such as blurred vision, tremor in hands, and arms, slowness of movement, or postural of a humpback. These age-related conditions affect how they live and use the smartphone. However, some seldom go out for older adults' activities due to their physical impairment and diseases. They might have lower competencies than normal older adults. In this article, the test was conducted on 26 homebound older adults. The current investigation was concerned with their competencies of vision, hearing, touching, and memorizing to find appropriate average results for them. We found the scores value regarding font size, color contrast, icon size, a touching point on each button on the screen, keyboard's size, scrolling area, etc., which they can perform effectively on the smartphone. The main findings render a significant and unique contribution to the design community to use it as a guideline or standard for every designer who wants to design assisted technology by using a touch screen interface for home-bound older adults to conveniently access and efficiently use. Further, it also helps to improve the quality of life among older adults.

Evaluation of Effective Cognition for the QGIS Processing Modeler

This article presents an evaluation of the QGIS Processing Modeler from the point of view of effective cognition. The QGIS Processing Modeler uses visual programming language for workflow design. The functionalities of the visual component and the visual vocabulary (set of symbols and line connectors) are both important. The form of symbols affects how workflow diagrams may be understood. The article discusses the results of assessing the Processing Modeler’s visual vocabulary in QGIS according to the Physics of Notations theory. The article evaluates visual vocabularies from the older QGIS 2.x and newer 3.x versions. The paper identifies serious design flaws in the Processing Modeler. Applying the Physics of Notations theory resulted in certain practical recommendations, such as changing the fill colour of symbols, increasing the size and variety of inner icons, removing functional icons, and using a straight connector line instead of a curved line. Another recommendation was to provide a supplemental preview window for the entire model in order to improve user navigation in huge models. Objective eye-tracking measurements validated some results of the evaluation using the Physics of Notations. The respondents read workflows to solve different tasks and their gazes were tracked. Evaluation of the eye-tracking metrics revealed the respondents’ reading patterns of the diagram. Evaluation using both Physics of Notation theory and eye-tracking measurements inspired recommendations for improving visual notation. A set of recommendations for users is also given, which can be applied easily in practice using a contemporary visual notation.

Icon Size Effect on Selection Speed and Accuracy

Icon Size Effect on Selection Speed and Accuracy

스마트폰 아이콘의 크기와 테두리 형태가 시각적 인지 효율성에 미치는 영향에 관한 연구

스마트폰 아이콘의 크기와 테두리 형태가 시각적 인지 효율성에 미치는 영향에 관한 연구

Design and evaluation of military geographical intelligence system: An ergonomics case study

Rapid developments in detection technology led to the extensive use of new military geographical intelligence systems (GIS). These systems were developed to support military tactical and strategic operation by data collection, processing, analysis, and distribution. This paper reports a case study of ergonomic intervention on the design of GIS. In particular, effects of icon type, icon size, and map background clutter are discussed. This design was specifically used to enhance surveillance performance in the use of interface. Twelve participants carried out a visual search task using the mock GIS. The best surveillance performance was obtained in an interface with large icons and topography not displayed (TND) map background clutter. The results recommended an improved GIS interface design and help interface designers to create efficient and comfortable interfaces for the reduction workload of surveillance radar operators.

Effects of icon size and location on speed and accuracy of SGD access

Increasing speed and accuracy of communication via a speech-generating device (SGD) is an important clinical goal in augmentative and alternative communication (AAC). The current study, conducted with adults without disabilities using a within-subject experimental design, compared the effects of two different SGD trainings on speed and accuracy of locating words via an SGD interface. During size-centered training, participants were introduced to six large icons that completely filled an SGD screen. During location-centered training, participants were introduced to six small icons on a 40-location screen where other icons were hidden. After the training, participants were asked to find the trained items on a 40-location screen with all 40 icons visible. Accuracy and speed of response were analyzed, and the study found that participants located targets faster and more accurately following location-centered training vs. following size-centered training. If similar effects are found with individuals with complex communication needs, clinicians should consider implementing SGD grid designs that facilitate location-centered learning.

Cervical spine biomechanics and task performance during touchscreen computer operations

The effects of different touchscreen interface designs on operators' task performance and cervical spine biomechanics were investigated in the current study. Fifteen male participants performed “Whac-a-Mole” type of visual target pinpointing tasks on a touchscreen monitor with different display sizes, icon sizes, icon colors and task difficulties. Participants' task performance, cervical spine biomechanics and upper extremity muscle activities were recorded and compared. Results demonstrated that an oversized desktop touchscreen monitor and small icons generated negative impacts on participants’ task performance and biomechanical measurements. Lighter icon color and more difficult task requirement generated worse task performance but had limited impact on cervical spine biomechanics. In addition, when using an oversized touchscreen monitor, the impacts of icon size and task difficulty seem to be magnified. Our results demonstrated that a more human-oriented interface design could help improve task performance and reduce neck and upper extremity injuries while operating touchscreen monitors. Relevance to industryIn this study we investigated how a number of different design factors could influence task performance as well as cervical spine biomechanics when using touchscreen monitors. Knowledge gained from the current study could help the design of future applications that involve finger touching operations on touchscreen monitors.

Effects of Touch Screen Interface Parameters on User Task Performance

The influence of different touch screen interface design features on user experience and operators’ task performance was investigated in the current study. Eight participants performed different tasks on a touchscreen monitor with varied interface settings while their performance was recorded and compared. Results demonstrated that an oversized desktop touchscreen monitor could generate negative impacts on users’ performance. Smaller icon size also decreased task performance by increasing total response time. In addition, icon color also influenced users’ performance. Results of the current study provide useful data for new approaches to design improvements which will enhance human performance and users’ experience.

Theory-Based Design and Development of a Socially Connected, Gamified Mobile App for Men About Breastfeeding (Milk Man).

BackgroundDespite evidence of the benefits of breastfeeding, <15% of Australian babies are exclusively breastfed to the recommended 6 months. The support of the father is one of the most important factors in breastfeeding success, and targeting breastfeeding interventions to the father has been a successful strategy in previous research. Mobile technology offers unique opportunities to engage and reach populations to enhance health literacy and healthy behavior.ObjectiveThe objective of our study was to use previous research, formative evaluation, and behavior change theory to develop the first evidence-based breastfeeding app targeted at men. We designed the app to provide men with social support and information aiming to increase the support men can offer their breastfeeding partners.MethodsWe used social cognitive theory to design and develop the Milk Man app through stages of formative research, testing, and iteration. We held focus groups with new and expectant fathers (n=18), as well as health professionals (n=16), and used qualitative data to inform the design and development of the app. We tested a prototype with fathers (n=4) via a think-aloud study and the completion of the Mobile Application Rating Scale (MARS).ResultsFathers and health professionals provided input through the focus groups that informed the app development. The think-aloud walkthroughs identified 6 areas of functionality and usability to be addressed, including the addition of a tutorial, increased size of text and icons, and greater personalization. Testers rated the app highly, and the average MARS score for the app was 4.3 out of 5.ConclusionsTo our knowledge, Milk Man is the first breastfeeding app targeted specifically at men. The development of Milk Man followed a best practice approach, including the involvement of a multidisciplinary team and grounding in behavior change theory. It tested well with end users during development. Milk Man is currently being trialed as part of the Parent Infant Feeding Initiative (ACTRN12614000605695).

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

AbstractAs 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.