Icon-based human-computer interaction

doi:10.1016/S0020-7373(86)80007-4

International Journal of Man-Machine Studies

Volume 24, Issue 6, June 1986, Pages 519-543

https://doi.org/10.1016/S0020-7373(86)80007-4 Get rights and content

Abstract

This paper is concerned with the use of icons in human-computer interaction (HCI). Icons are pictographic representations of data or processes within a computer system, which have been used to replace commands and menus as the means by which the computer supports a dialogue with the end-user. They have been applied principally to graphics-based interfaces to operating systems, networks and document-processing software.

The paper attempts to provide a more systematic treatment of icon interfaces than has hitherto been made, and to create a classification which it is hoped will be of use to the dialogue designer. The characteristics, advantages and disadvantages of icon-based dialogues are described. Metaphors, design alternatives, display structures and implementation factors are discussed, and there is a summary of some icon design guidelines drawn from a variety of sources. Some mention is also made of attempts by researchers to measure the effectiveness of icon designs empirically.

References (34)

D.T. Gittins et al.
An icon-driven, end-user interface to UNIX
International Journal of Man-Machine Studies
(1984)
R.B. Allen
Technical correspondence
Communications of the ACM
(1985)
J. Arnstein
S.K. Card et al.
J.P. Caron et al.
Evaluating pictograms using semantic differential and classification techniques
Ergonomics
(1980)
J.M. Carroll et al.
Metaphor and the cognitive representation of computer systems
IEEE Transactions on Systems, Man & Cybernetics
(1982)
R.S. Easterby
The perception of symbols for machine displays
Ergonomics
(1970)
Information design: the design and evaluation of signs and printed material
U. Eco
A Theory of Semiotics
(1975)
M. Friedell et al.
Context-sensitive, grapic presentation of information
ACM Computer Graphics
(1982)

S.J. Gibbs

An object-oriented office data model

F. Halasz et al.

Analogy considered harmful

K. Hemenway

Psychological issues in the use of icons in command menus

W.H. Huggins et al.

M. Kilman

Programming icons. PI and logo-programming icons

University of Edinburgh Department of A.I., Research Papers Nos. 229, 242

(1984)

B.G. Knapp et al.

Information highlighting on complex displays

Cited by (130)

How do app icon color and border shape influence visual search efficiency and user experience? Evidence from an eye-tracking study
2021, International Journal of Industrial Ergonomics
Citation Excerpt :
The limited display size of smartphones has driven the development of icon-based interfaces (Hsieh, 2017). An app icon is commonly referred to as a pictographic symbol designed to be used on a graphics-based interface to present an app (Gittins, 1986). When users look at the interface of their smartphones to open an app, the first thing they have to do is to find the right app icon.
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.
Users 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.
The effects of icon internal characteristics on complex cognition
2020, International Journal of Industrial Ergonomics
Citation Excerpt :
Complex icons (for example, Fig. 1b and Fig. 1d) contain many more lines, letters and shapes than simple icons (for example, Fig. 1a and c). A considerable number of studies have demonstrated that simple icons can be identified more easily and reducing the complexity of icons can effectively improve visual search performance (Gittins, 1986; Horton, 1994; Garcia et al., 1994; McDougall et al., 2000). In addition, icon concreteness refers to the extent to which an icon depicts the objects, materials, animals or people in the real world.
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.
Preference ranking test for different icon design formats for smart living room and bathroom functions
2019, Applied Ergonomics
Citation Excerpt :
To carry out these functions, the user interface device for the intelligent building can be customized using a touch panel that allows the users to operate the system easily. For a touch panel interface, icons which represent data or processes within a computer system have been used to replace commands and menus as the means of dialogue between the computer and the end-user (Gittins, 1986). Since icons are compact and international (language) in conveying information, well-designed icons can reduce translation, simplify learning, improve intelligibility of text, and give products an international look (Horton, 1994, 1996).
The current study illustrates the icon design process for 20 functions for a smart living room and smart bathroom of a commercial smart building control system. For each function name, seven icon formats (image-related, concept-related, semi-abstract, arbitrary, word, abbreviation, and combined) were developed by 30 graduate students and compared with a preference ranking test by another 13 executive MBA students. The results indicated that the combined, image-related, concept-related, semi-abstract, word, and abbreviation each had nine, four, three, two, one and one function names ranked as the most preferred format, respectively. Since all the design formats except the arbitrary format were ranked as the most preferred at least once, it is worthwhile to generate seven icon formats for a given function and chose the most preferred based on the ranking test result. The participatory design and ranking test evaluation approach can be applied for the design and evaluation of visual icons in other application contexts.
An icon that everyone wants to click: How perceived aesthetic qualities predict app icon successfulness
2019, International Journal of Human Computer Studies
Mobile app markets have been touted as fastest growing marketplaces in the world. Every day thousands of apps are published to join millions of others on app stores. The competition for top grossing apps and market visibility is fierce. The way an app is visually represented can greatly contribute to the amount of attention an icon receives and to its consequent commercial performance. Therefore, the icon of the app is of crucial importance as it is the first point of contact with the potential user/customer amidst the flood of information. Those apps that fail to arouse attention through their icons danger their commercial performance in the market where consumers browse past hundreds of icons daily. Using semantic differential scale (22 adjective pairs), we investigate the relationship between consumer perceptions of app icons and icon successfulness, measured by 1) overall evaluation of the icon, 2) willingness to click the icon, 3) willingness to download the imagined app and, 4) willingness to purchase the app. The study design was a vignette study with random participant (n = 569) assignment to evaluate 4 icons (n = 2276) from a total of pre-selected 68 game app icons across 4 categories (concrete, abstract, character and text). Results show that consumers are more likely to interact with app icons that are aesthetically pleasing and convey good quality. Particularly, app icons that are perceived unique, realistic and stimulating lead to more clicks, downloads and purchases.
Padlock, the Universal Security Symbol? - Exploring Symbols and Metaphors for Privacy and Security
2023, ACM International Conference Proceeding Series
A Quest?!: The Secret Life of Gameworld Punctuation
2023, Proceedings of the ACM on Human-Computer Interaction

View all citing articles on Scopus

^†: Present address: R & D Division, Singer Link-Miles Ltd, Flight Simulation Division, Technical Development Dept 032, Lancing, Sussex BN158UE.

View full text

Icon-based human-computer interaction

Abstract

International Journal of Man-Machine Studies

Technical correspondence

Communications of the ACM

Evaluating pictograms using semantic differential and classification techniques

Ergonomics

Metaphor and the cognitive representation of computer systems

IEEE Transactions on Systems, Man & Cybernetics

The perception of symbols for machine displays

Ergonomics

Information design: the design and evaluation of signs and printed material

A Theory of Semiotics

Context-sensitive, grapic presentation of information