ArticlePDF Available

An Icon Design Approach Based on Symbolic and Users' Cognitive Psychology


Abstract and Figures

In order to explore the usability and ease of use of icon design, the icon design method based on the combination of semiotics and user cognitive psychology is raised. Based on the principle of matching the icon design knowledge and user knowledge, the icon design process is analyzed from four dimensions, namely the semantic expression of elements, the structure of elements, the interface and cultural context, and the user cognitive characteristics. An icon assistant design system CDIPV1.0 is structured, it can realize knowledge sharing, rapid icon designing, and professional evaluation based on the combination of semiotics and users’ cognitive psychology. The theory is verified through it.
Content may be subject to copyright.
Indonesian Journal of Electrical Engineering and Computer Science
Vol. 4, No. 3, December 2016, pp. 695 ~ 705
DOI: 10.11591/ijeecs.v4.i3.pp695-705 695
Received September 3, 2016; Revised October 25, 2016; Accepted November 10, 2016
An Icon Design Approach Based on Symbolic and
Users' Cognitive Psychology
Sun Qiang*1, Hu Fei2
1School of Technology, University of Glamorgan, Pontypridd, United Kingdom
2Department of Mechanical Engineering, Ecole polytechnique de Montreal, Canada
*Corresponding author, e-mail:
In order to explore the usability and ease of use of icon design, the icon design method based on
the combination of semiotics and user cognitive psychology is raised. Based on the principle of matching
the icon design knowledge and user knowledge, the icon design process is analyzed from four dimensions,
namely the semantic expression of elements, the structure of elements, the interface and cultural context,
and the user cognitive characteristics. An icon assistant design system CDIPV1.0 is structured, it can
realize knowledge sharing, rapid icon designing, and professional evaluation based on the combination of
semiotics and users’ cognitive psychology. The theory is verified through it.
Keywords: computer, interface, icon, design
Copyright © 2016 Institute of Advanced Engineering and Science. All rights reserved.
1. Introduction
Icon is a visual symbol that has symbolic meaning, conveys information and is easy to
recognize and remember. It can be divided into many types. According to the platform it can be
divided into computer icon, mobile phone icon, website icon, game icon. In the same platform it
can be divided into the program icon, toolbar icon and button icon; on the same operating
system it can be divided into system icon and application icon. Icon is an important part of the
graphical interface. It is "a kind of the language used by interface designers that particular
application users can understand [1]. It eliminates the communication barriers between the user
and the computer [2-3]. The icon design requires simplicity, nature, friendliness, convenience
and uniformity. The design concept of “human first” should be reflected. And a perfectly
designed icon [4], allows users to prefer reading [5], and it will be identified and remembered
effectively [6].
A good icon often reflects the certain information of an interface or a producer.
Especially for a commercial interface, you can basically understand the type or content of the
web site. In a network link page full of all kinds of icons, it will be highlighted. When an audience
wants to find a site with specific content in a lot of websites, anicon will have obviously great
advantage that one can easily understand the type and the content of the web site it represents.
In this paper, an icon design method based on a combination of users’ cognitive psychology
and semiotics is raised. The design elements are divided into four dimensions such as the
semantic expression, the composition of the elements, icon usage enviroment and user
cognitive characteristics. Based on the cognitive psychology and symbol theory, icon design
process and user research are recognized and innovated on the integration. It provides a
reference for designers.
2. Related Work
2.1. Icon Design Principles
The basic principle of icon design is to make full use of its the advantages of the icon: it
is more intuitive and more beautiful than text, and to reduce its shortcomings: it is not as
accurate as the expression of text. So the basic principle can be sumed up as following.
ISSN: 2502-4752
IJEECS Vol. 4, No. 3, December 2016 : 695 705
2.1.1. The Principle of Recognition
The principle of recognition is that the graphics of the icon should be able to accurately
express the corresponding operation. That is, when you see an icon, you will understand what it
means. It is the primary principle of icon design.
2.1.2. The Principle of Differences
For instance, there are six icons in a screen. The differences among them should be
recognized at first glance. It is a very important principle in icon design. However, it is the most
easily overlooked principle during the design process. Compared with the text, the superiority of
icon is more intuitive; therefore, its superiority would not exist without this principle.
2.1.3. The Principle of Unified Style and Context
Icon does not exist alone. It plays a role when it placed in the interface. Therefore, when
design an icon, the environment should be considered. For example, whether such an icon is
suitable in such an interface? If the interface is the forest and the earth, you may consider using
stones, wood, or mushrooms, wild flowers as the design elements of the icon.
2.1.4. The Appropriate Fineness and the Number of Elements
The pursuit of visual effect should be based on the satisfaction of other principles, such
as the recognition principle, the discrepancy principle, and the unity principle. The basic
functional requirement should be considered before the higher level of requirements - emotional
needs. The main function of the icon is used to express information; the beauty is the next
persuit. However, the icon designers tend to fall into a misunderstanding, pursuit fine, high light
and texture one-sided. In fact, compared with the fine degree, the change of availability of the
icon is something like the peak of a curve. In the initial stage, the icon availability will increase
with the raise of the fine. However, when reaching a certain degree of precision, the availability
of the icon will tend to decline with the fineness of the icon.
2.1.5. The originality
The originality of icon design must be modest. Because there are a lot of commonly
used icon styles currently, however, the highly easy-used styles are just not so many. The
excessive pursuit of originality and artistic effect may cause the reducing of the easy-using of
the icon that is the so-called beautiful icon with less pacticity. Of course, it depends on the focus
of your product, if you tend to consider emotional design and perfect artistic effect. It does not to
be blamed.
2.2. Research Area of Icon Design
The scholars have achieved much progress in the icon design research. It mainly
displays in three aspects: design research, the research of psychology and symbolic studies, in
which design and psychology research accounted for the majority.
2.2.1. Design and Semiotics Study of Icon Design
At present, the semiotics research of icon design mainly includes three categrates,
namely the semiotics of product design, the semiotics of environmental design and the
semiotics of visual design. [7] In the field of icon design, in order to reduce the cognitive
distance of user and icon, Zhang Tao [8] used the icon algebra theory to optimize icon structure
in the map. Chen Ming-Shi [9] utilized Hierarchical clustering analysis (HCA) to evaluate the
importance of each of the different functional menus and categories. Then they generated five
PDA menuicon interface design alternatives that meet the proposed design guidelines, and
they evaluated each for their respective feasibilities. The evaluation results showed that the
preferred design was option PDA5, a hierarchical and separated menuicon layout style that
featured a two-layer menu structure. Huang Shih-Miao researched the factors affecting the
design of computer icons. He extracted nineteen elements related to icon design from the
principles, criteria and guidelines for GUI design. Results from the principal components
analysis showed that the subjects’ importance ratings for computer icon design elements were
affected by five factors: styling quality, message quality, meaningfulness, locatability, and
metaphor. In addition to comprehensibility and identifiability, the results have found to be
important icon design considerations; styling quality may also be important [10]. Besides the
IJEECS ISSN: 2502-4752
An Icon Design Approach Based on Symbolic and… (Sun Qiang)
quantitative study on the details of the icon, many scholars summarized the icon design
principles through bonding experiments and user qualitative interviews, such as Huang SM [11]
and Huang H [12]. Through questionnaire survey, principal component analysis, semantic
differential method they got the influence factors of icon design, including semantic, familiarity,
form quality, information quality and metaphor etc.And prove them with PDA (personal digital
2.2.2. Cognitive Psychology Research OF Icon Design
The psychology research of icon design mainly aims at the user's cognitive habits,
abstract thinking ability, tacit knowledge, cultural background, etc. Shepard and Anderson
believed that people's memory capacity contains two kinds: memory and recognition. Their
psychological experiments showed that the recognition ability of the human is much stronger
than that of the memory. For example, one can only recall 5or6 words from 600 words they had
seen, however, the words they can identify are almost 540, accounting for about 88% [13].
People’s recognition ability of graphics is much stronger than the recognition ability of
characters.The seventy percent of them can be identified after 10000 paintings had been
seen [14] Kolhoff [15] achieved visualization of non visual documentation by establishing
graphics generation system based on content through metaphor. At the meantime, he verified
the feasibility of metaphor method combined with the user psychology. According to the
research of user cognitive psychology with different cultural background, Sraufer found that if a
larger screen area is occupied with the use of English words, the redundancy of the character of
English vocabulary is about 70%. Therefore, the abbreviations commonly used do not affect
people's understanding. The distribution of visual attention of human on the screen is uneven.
Miller [16] utilized the icon to make the menu more structured, clear, and can meet his "magic
number" 7 ± 2[17] more easily. The literature indicates that the short-term memory capacity of
human visual is 7± 2 information blocks. Each menu item or icon is viewed as a piece of
information. User need to recall the icon menu structure and layers. The experimental results
showed that [18] the menu width is better than depth and the number of layers is not more than
three. The operation of the menu structure has less than three steps. The speed of operation is
accurate and high. The users prefer to use. Through experiments combined with analysis of
variance Passim verified that the rules that icon cognitive and user experience are proportional,
the realistic icon is more easily connected with the function of association, and the using
situation of icon is smaller influence to cognitive. Through experimental investigation [19]
Fleetwood showed that the quantity and quality of icon (according to the color and shape,
namely, the degree of the curvature of the visual features) has relationship to the response time
of the user's visual.
2.2.3. Research on Art and User Participatory of Icon Design
Through inducting and analyzing the evolution and development of interface icons on
various mobile phones with different systems, DuYi discussed the icon form, development trend
of style and design features based on the art. Based on the case study, he studied several
aspects of early users of the phone icons, such as research and analysis, element extraction
[20] style positioning and visual effect. Shieh KK explored the effects of display characteristics
such as target/background color combination, single/simultaneous presentation, and individual
differences by sex, and design specialty on preferences of VDT icon design. The results
indicated black targets (black-on-white, black-on-yellow) and black backgrounds (red-on-black,
yellow-on-black) were the most popular and white targets (white-on-red, white-on-black) and
white backgrounds (blue-on-white, red-on-white) were the second most popular. As for the
chromatic color combinations, yellow-on-blue was the most favored. Subjects rated color
combinations under single presentation higher than those under simultaneous presentation.
Women rated purplish targets and rated purplish and blue backgrounds higher than men.[21]
Donald pointed that the designer's emotional performance in the icon design is a coding
process. The public will have some psychological feelings in the face of a product. It is a kind of
process of decoding or aesthetic psychological induction. Finally, the designers get some clues
and inspiration from the audience's psychological experience and them satisfact the audience's
psychological needs to maximization in the icon [22]. In order to achieve good results in the
literature, medical device graphics interface designers invited doctors, nurses and patients to
participate in the equipment of icon design and interface architecture design. Through the
ISSN: 2502-4752
IJEECS Vol. 4, No. 3, December 2016 : 695 705
experiments, the high usability of the design result is verified. In the interaction design, the
theory that adhere to the "user centered"is often able to obtain excellent results [23]
The above research promoted the development of icon design. Based on these results
these paper expanses the icon design in the following aspects: 1) Research on the matching
relationship between the dealing of icon design elements and the user cognitive characteristics.
The previous icon design research is only on a single aspect such as user psychology, symbol
or design theory. However, icon design is comprehensive practice with many disciplines, its
core is the match between dealing of the various design elements and the user cognitive
characteristics. So it will be the focus of this paper. 2) Analyze the icon by combing with
psychological characteristics of user recognition and semiotics. With the icon design examples,
icon design structure model is get. Based on this model the design method and the step is
proposed.It aides the icon design personnel.
3. The Method of This Paper
3.1. Study on the Cognitive Psychology of Icon
The purpose of using icons is to help users operate. Designing icon stressed on the
understanding of users and in line with the user's way of thinking. It involves a very complex
psychological research. The designer should adopt the investigation method and observe user
operation process based on the knowledge of psychology. Through interviewing, the user's
ideas should be understand in depth. For example, how to view the screen and find icon, how to
understand the icon and how to operate it, in which circumstances user prone to make error,
what characteristics does the users’ learning process have, etc. The designers should also carry
out two aspects, such as written and statistical investigation. The investigation has to consider
the characteristics of the user's operation process and the characteristics of the psychological
factors of the operation. The survey results are summered, the user model is established, and
the user's psychological needs are satisfied with the method. Itis the core of icon design.
In this paper, a kind of icon design method based on a combination of user cognitive
psychology and semiotics is discussed. The icon design interpreted from four dimensions,
namely the design elements of semantic expression, the structure among the elements, cultural
context and the user's cognitive characteristics. Its structure is as shown in Figure 1.
Figure 1. Structure
1) The Semantic Expression of Design Elements The effect semantic elements expression
is the basic condition of the successful completion of creative design. In which the creative
design elements must to have the clear referential function and the rich design connotation.
The creative design elements are capable of producing a mapping between the designers
and the audience. So the audience can think, feel and understand in perception, then he
can understand and accept the designer's design intent. Therefore it needs to be studied
combined with users.
2) The Structure among the Elements It includes the icon element expressing and icon
element structure. This is the composition rules of icon meaning set and cognitive
IJEECS ISSN: 2502-4752
An Icon Design Approach Based on Symbolic and… (Sun Qiang)
combination. Firstly, the space structure and the space proportion of the iconic elements
should be determined; secondly, the expressing form of the icon elements be set(including
the perspective of view, proportion and delicacy); when the icon with multiple elements is
pressed, the structural relationships among the elements should be reasonable arranged.
3) Interface and Cultural Context It includes a graphical environment and user's cultural
background and environment. It can be divided into two aspects. One is cultural customs
that is a mode of life passed on from generation to generation in social life. It is a collective
habit of language, behavior, and psychology, and is normative and binding to the members
of the collection. The other is environmental identity. It refers to a society's various
regulations and restrictions on verbal communication activities. Icon needs to be visually
combined with the overall environmental style of the graphical interface and the
environment of different cultures. It also needs to take into account the shape, size, color,
material, details, command feedback form, etc.
4) The Users’ Cognitive Characteristics Cognitive process is the process of dealing
information. It is the mental activity that reflects the characteristics of the objective things
and the inner connections from the outside to the inside from phenomenon to essence. It is
a very complex process. It consists of human feeling, perception, memory, thinking and
imagination. Attention is an important feature in the psychological activities. It includes the
user's mental model, associative logic and cultural background. Icon design adhers to the
"user centered" design method in the interaction design. The users’ tacit knowledge being
dominanted is helpful to generate the icon design with more pertinence. Thereby the
cognitive distance between the users and the icon is reduced and the cognition accuracy
The commonly used business icon, for example, from four dimensions of the semantic
expression elemennts and structure elements, the cultural context and the user's cognitive
characteristics, the process of design symbols deconstruction is as shown in Figure 2.
Figure 2. Symbols Deconstruction
According to the specific requirements of the function, the main elements of the icon
can realize the function of expressing the specific meaning in the form of singlity or combination.
Based on the determined semantic, each element’s way of dealing and the visual style form a
certain style to apply to the using context. The aesthetic of the designer in this stage plays an
important role. The icon needs to be artistically treated and get a variety of programs. User's
cognitive characteristic thinking mode and culture in the design process plays a constraint effect
on the graphic elements, visual style selection and so on.
ISSN: 2502-4752
IJEECS Vol. 4, No. 3, December 2016 : 695 705
Therefore, icon design should apply from the matching relation between the users’
cognitive characteristics and design elements. It should be considered from four dimensions
such as the design elements of semantic expression, the structure among the elements, cultural
context and the user's cognitive characteristics.
3.2. Icon Design Process Based on Cognitive Psychology and Semiotics
Barreto A B [24] suggested a design application of the icon algebra principle in the icon
semantic dimension.
XY represents the icon design elements scheme, Z is icon design, XY’s semantic a and
b get Z’s semantic c accuratly with various graphics operations, such as combine context,
enhance, mark, Ivert, index. It provides the auxiliary reference for the designer in the actual
operation. But the model has some limitations. Each the combination of elements in the actual
design rarely used in isolation. The designers often use some of them to treat comprehensively.
And what’s more, the considerations of using of context and user psychological characters level
cannot reflect in this approach. Therefore the usability of the design results is also challenged.
Based on of icon design theory user psychological characteristics and design semiotics,
combined with the principle of icon algebra, the icon design program can be expressed as
Icon (SEE , SEC, SCC , SUK)
SEE=SEE1 , SEE2,……,SEEa,
SEC=SEC1 , SEC2,……,SECb,
SCC=SCC1 , SCC2,……,SCCr,
SUK=SUK1 , SUK2,……,SUKs.
In which, SEE indicates element expression set in the element semantic expression
layer, SEC indicates element struction set of element structured composition layer, the SCC
indicates cultural content set in the infacial and cultural context level, SUK indicates user
knowledge set of user cognitive characteristics level. The change of SEEa, SESb, SCCr and SUKs
will cause variations in the Icon that is there are many kinds of design programs in the same
function. According to the principle of icon algebra, the relationship of SEEa , SESb, SCC and SUK
can be expressed as:
In which, a≥1, b≥1. In the icon design process, several SSEs combinate according to
specific constitute rule of SEE. Theoretically, there is no upper limit on the number of SEE,
however, due to the limitation of SEC in practical application, usually 1 a≤4, and SCCr SUKs
depend on the subjective intention of the user. SCCr decides (SEEa, SESb) the visual style, SUKs
indicates knowledge map and effects on SEEa, SEsb and SCCr. Summery, the icon design
processes of the based on semeiology is as shown in Figure 3.
IJEECS ISSN: 2502-4752
An Icon Design Approach Based on Symbolic and… (Sun Qiang)
Figure 3. Processes of the based on Semeiology
The specific process of icon design based on the user's psychological characteristics
and Design Semiotics method is as follows:
1) The Semantic Expression of Element In this level, the appropriate design elements should
be selected according to the user's perception of the specific function.The relationship of
physical mapping or metaphor between design elements and cognitive function should be
ensured. Thus the foundation of icon construction is made.
2) The Element Structure Composition It indicates consideration of the factors of design
elements combination. Firstly, it contains the space layout, the element size and propotion.
Secondly, it contains interspersed relationship among them, and the visual depth. Finally,
the basic structure of an icon program is obtained.
3) Interface and Cultural Context In this level, the equipment type, the resolution requirements,
the overall style of the interface, user background, cultural context and other factors are
considered comprehensively. Give the proper style and the visua rendering to the elements
combination with the basic structure.
4) User's Cognitive Characteristics although, concern and consideration of the user's cognitive
psychological characteristics does not form an independent step in the design, it exists in
the entire process of icon design and is essential. That is fully in all of the above design
step, designer must consider experience, the user's mental model, associative logic,
aesthetic preference. And after determining the overall design scheme, the program should
get psychological acceptance and usability testing in the user. Then it is finalized.
In the whole process, according to certain steps the design continues in 4 dimensions.
Each dimension restricts and affects each other. Similarly, the evaluation of icon design can
also expanse based on design semiotics and user cognition psychology, and analyze layer by
layer. Firstly, from element semantic expression dimension, the function interpretion of the icon
is tested. Secondly, from element structure dimension, the coodination of element proportion,
size, and other details is evaluated. Then evaluate from the perspective of usability and
cognitive psychological acceptance combined with the target user resesrch. With the above four
aspects the final evaluation results of the icon scheme can be obtained. It is different from the
the traditional experimental evaluation method. This method can make the rapid evaluation, so
as to improve the efficiency. It can help designers make rapid optimizational Diego Generation
in the design process of icon.
From the icon design process based on Semiotics and user recognition psychology it
shows that element semantic expression and element structure dimensions determine the basic
structure of the icon scheme, which belongs to the important step of the icon design process.
ISSN: 2502-4752
IJEECS Vol. 4, No. 3, December 2016 : 695 705
4. Application Example
With the technology.NET, we utilize the language Java to establish the prototype
system CDIPV1.0 on the platform of Windows 7 for an icon of CAD. This system is developed
for the icon designers and the system engineers. The purposes are: 1) As a computer aided
icon design tool, it can provide a convenient and professional reference to the icon designers,
reduce the failure rate during the design process, improve the quality of design; 2) For the icon
design has been completed, it can evaluate the matching degree between the structured factors
of icon and the user requirements from the field of the semiotic and user cognitive
psychology.Then it can analyze the availability and ease of use of icon program in essence, and
put forward suggestions for improvement.
4.1. Brief Introduction of CDIPV1.0 System
CDIPV1.0 system is mainly divided into three parts. The first part is the interactive
knowledge base for organization and management of the icon design material data. The others
are the design module based on knowledge base, and the evaluation module based on
semiotics and users’ cognitive psychology. The former establishes of a number of icon
programs, and the latter evaluates these programs and prompts the availability of the best. In
which, data accumulation of the knowledge base is very important. It relates to the matching
efficiency of design knowledge, and then directly affects the quality of the design. As shown in
Figure 4, the whole system services for icon usability tester, system engineer and icon designer.
It is the knowledge base that organize and manage icon design resources, and from an
interactive interface platform that generate and evaluate icons online.
Figure 4. Knowledge Base That Organize and Manage Icon Design Resources
4.1.1. Knowledge Base Module
The knowledge base module is an open database of the icon design elements.The
knowledge base provides platform that require the senior icon designers upload all kinds of
programs, matching creative ideas, graphics, descriptions, dismantling details and evaluations
in the perspective of semiotic and user cognitive psychology. And it adds the labels of the
function, graphics, combination and style in order to search easily. So it can update according to
the factors such as the change of society, different cultural context and style.It can also evaluate
the icons from the dimension of design semiotics and users’ recognition sychology.The
characteristics of the knowledge base is to set up the mapping relationship between the icon
design and user cognition based on tags of icon, graphic elements and icon keywords. It can
aid designer to evaluate the designed icon. After the knowledge base reaches a certain scale,
the user can obtained design reference program through the key word matching. In addition, the
system is open, it allows the icon designer modify icon evaluation results according to the
changes of society and consumer preference. As is shown in Figure 5, it supports icon design.
In this paper, we have invited 30 senior designers to get the initial data of the
knowledge base through the experiements:
1) Creative Ideas: The match between the semantic elements icon and functional
requirements are analyzed from the perspective of elements semantic expression. And the
direction of thinking of icon design will be get.
IJEECS ISSN: 2502-4752
An Icon Design Approach Based on Symbolic and… (Sun Qiang)
2) Content Description and Details Spliting: The structure of the icon is analyzed from the
perspective of the composition of the elements. The tags are added each elements, so that
the search for the match is easier.
3) Deconstruction and Reorganization of the Elements in the Icon: Get a variety of
programs for the same function icon and to form a contrast matrix.
4) Icon Evaluation: Evaluate and score the icon program after considering above factors
As the time goes by, the knowledge base will be continuously updated and rich, thus to
meet the needs of users.
Figure 5. Supports Icon Design
4.1.2 Icon Design Program Module
Icon design program module is based on design knowledge base. It achieves the
visibility of icon element structure with the technology of parametric design, satisfies scheme
generation, combination, display and comparision of several program in the real time. It
enhances the innovative design ability of designing and engineering staff. The user should only
input vocabulary related to icon function in the rapid design module interface of CDIPV1.0
system shown in Figure 6, and then select the different main elements and auxiliary elements
from accessional icon design elements. The system will generate an icon program automatically
in accordance with the predesigned rules; compare with multiple icon reference program and
modificate the program in the real-time. Keywords search function in the icon design program
module involves processing fuzzy reasoning technology.In this paper; the fuzzy reasoning
technology mainly adopts the label matching data in the early. After it upgrade in the late, the
system will utilize the technology that the reasoning module based on the instance simulate the
design process of designer. The core is to utilize the program that has been designed to find the
most suitable solution according to the new demand. The reasoning module algorithm based on
the instance can meet the similar material matching module of the evaluation system, and make
the data pushed by the system more flexible and enlightening.
Figure 6. Design Module Interface of CDIPV1.0 System
ISSN: 2502-4752
IJEECS Vol. 4, No. 3, December 2016 : 695 705
4.1.3. Evaluation Module Based on the Combination of Design Semiotics and User's
Cognitive Psychology
The evaluation module based on the combination of design semiotics and user's
cognitive psychology evaluates the icon by utilizing the icon design examples in the knowledge
base. As is shown in Figure 7, it collects the usability evaluation of each dimension by senior
icon designer. The interface module is facilitating to compare and select optimal program for the
designers. It can also deepen the icon design professional knowledge for engineers.
Figure 7. Evaluation Module
4.2. CDIPV1.0 System Usage Evaluation
According to the software process, IDEASI. 0 system generates a set of basic function
icons. The 30 ordinary users are invited to test the cognition of the set of icons. The test result
showes that the icon design generated from the IDEASI. 0 system has good awareness and
availability as shown in Figure 8 by viewing the visual and cognitive error rate and cognitive
speed of icon as the evaluation criteria.
Figure 8. The Visual and Cognitive Error Rate
The CDIPV1.0 system is a primary theoretical application. In order to promote the
development of the intelligent system, we will optimize the system on the next step. For
example, we will introduce network social platform system, update the knowledge base and the
system as a whole, and promote the intelligent system, etc.
[1] Heim S. The resonant interlace; HCI fomdations for interaction design. Vew York: Addison Wesley.
[2] Lodding K. Iconic interfacing. IEEE Computer Graphics And Applications, 1983; 3(2): 11-2 0
IJEECS ISSN: 2502-4752
An Icon Design Approach Based on Symbolic and… (Sun Qiang)
[3] Wickens CD, Hollands JD. Engineering psychology and human performance. New York: Prentice
Hall. 1999.
[4] Luo Shijian, Zhu Shangshang. User experience and product innovation design. Beijing: China
Machine Press. 2010
[5] Kacmar CJ. Carey JM. Assessing the usability of icons in User interface1991. Behavior and
Information Technology. 1991;10(6):443-457
[6] Weidenbeck S. The use of icons and labels in an end user application program: an empirical study
of learning and retention. Behavior & Information Technology. 1999; 18(2): 68-82
[7] Xu Hengchun. Design Semiotics. Beijing: Tsinghua University Press. 2008.
[8] Zhang Tao, You Xiong, Xu Yun. Design Ior icon in human-computer interfaces. Journal of
Zhengzhou Institute of Surveying and Mapping. 2007; 24(1): 54-56+60.
[9] Chen Ming-Shi Lin, Ming-Chyuan Wang, Chen-Chen Chang, C. Alec Using HCA and TOPSIS
approaches in personal digital assistant menuicon interface design. International Journal of
Industrial Ergonomics.2009; 39(5): 689-702+14p.
[10] Huang Shih-Miao Shieh Kong-King Factors affecting the design of computer icons. International
Journal of Industrial Ergonomics. 2002; 29(4): 211+8p.
[11] Huang SM, Shieh KK, Chi CF. Factors affecting the design of computer icons. International Journal
of Industrial Ergonomics. 2002; 29(4): 211-218.
[12] Huang H, Lai HH. Factors influencing the userbility of icons in the LCD touch screen. Displays.
2008; 29(4): 339-344
[13] Shepard RN. Recognition Memory for Words, Sentencesand Pictures. Journal of Verbal Learning
and Verbal Behavior. 1967; 6: 156-163.
[14] Anderson, JR. Cognitive psychology and its application. New York: W H Freeman and Company.
[15] Kolhoff P, Preub J, Loviscach J. Content-based icons for music files. Computer & Graphics. 2008;
32(5): 550-560
[16] Staufer MJ. Programme for Computer. New York: De Gruyter. 1987.
[17] Miller, GA. The magical number seven, plus or minus two: Some limits on our capacity for
processing information. Psychological Review. 1956; 63: 81-97
[18] Snowbcrry K, Parkinson SR, Sisson N. Computer Display Menus. Ergonomics. 1983; 26: 669-712.
[19] Fleetwood, Michael D/Byrne, Michael D. Modeling iconsearch in ACT-R/PM. Cognitive Systems
Research. 2002; (3): 25-33.
[20] Du Yi, Zhang Linghao. Research on Design Problems of Mobile Phone Icon Based on Semiotics.
Packaging Engineering No.12.2012,06
[21] Shieh KK Ko YH. Effects of display characteristics and individual differences on preferences of VDT
icon design Perceptual and Motor Skills [Percept Mot Skills]. 2005; 100(2): 305-18.
[22] Norman Donald Arthur. The Design of Everyday Things New York: Basic Books. 2002.193
[23] Salman YB, Chen HI, Patterson PE. Icon and user interface design for emergency medical
information systems; a case study. International Journal of Medical Informatics. 2012; 81(1): 29-35.
[24] Barreto AB, Jacko JA, Hugh P. Impact of sptial auditory feedback on the efficiency of iconic human-
computer interfaces under conditions of visual impairment. Computers in Human Behavior. 2007;
23(3): 1211-1231.
... Chun-Heng Ho and Kai-Chun Hou (2015) evaluated mobile application icons based on aesthetics, and the results demonstrated that attractive elements help increase icon appeal [7]. The icon of design elements by Sun Qiang and Hu Fei (2016) summarized, and proposed that the design elements are divided into four dimensions, namely semantic expression, element composition, icon usage environment, and user cognitive characteristics [8]. Meanwhile, the relationship between icons and icons is also studied. ...
... But with the development of science, imagination and processing of sensation, movement, and emotion have also been included in the field of cognition [18]. Sun Qiang and Hu Fei (2016) account that the main purpose of psychological research in icon design is to understand users' cognitive habits, cultural background, abstract thinking ability and tacit knowledge [8]. Research by Ionela Bara, Richard J. Binney, and Richard Ramsey (2021) shows that aesthetic judgment is influenced by the cognitive resources of the brain and that aesthetic judgment varies with different aesthetic objects [21]. ...
Full-text available
Previous research on icons in human-computer interaction has always focused on usability and recognition efficiency, but few kinds of research on user cognition. This research aims to evaluate the relationship between icon aesthetics of different types of apps and user cognition. This study uses three types of App icons in the Huawei app store: text symbol icons, graphic icons, and image icons as examples. Through a questionnaire survey, aesthetic and cognition variables were assessed. The study confirmed that the aesthetic level of graphical icons is high, and the participant’s cognitive results of different icon types are different.
... On the other hand, it fulfils all relevant conditions to make the obligation valid and binding or comply with o ther related law, including the requirement of necessity, proportionality and purpose limitation. The satisfaction should be based on recognition, discrepancy and unity principle [37], which the process of transforming the user implicit knowledge has two primary problems related to organizational structure and the misrepresentational [38]. ...
Full-text available
Various countries have been encouraged to adopt electronic voting because it can reduce operational cost and time spent for tabulation process. In the current research, it has been mentioned several problem arised in term of technical aspects, voters’ trust, machine vulnerabilities and privacy right in which experts argued the election system have been compromised. In short term, the certain faction will try to exploit the system weaknesses for their own benefit, while in the long term, it can create public distrust to the government, which decrease the voters turn out, break the participation willingness and downgrade the quality of voting. Thus, the government should deal with previous issues in the election before adopting electronic approach while at the same time align with voters’ expectation to provide better election in serve citizen through comprehensive analysis. This study provide initial step to analyse the readiness of electronic voting from the social perspective in response to how Indonesia view the initiative to adopt new tech in voting system.
Full-text available
Icons are widely used in mobile applications as visual displays that can assist the acquisition and understanding of information. An icon creates better visual perception with the ability to communicate meaning. Icon design is an approach of designing a graphic icon that can express a specific meaning. Icon design principles and elements are considered as major factors for mobile user interface that would lead to higher icon usability and acceptance of mobile applications. The study is undertaken to conduct a systematic review of published scientific literature on icon design elements for mobile applications. The chosen articles were published between 2014 and 2019, with full text provided and written in the English language. The electronic databases used were Google Scholar, Scopus, ProQuest, and Research Gate. Other sources include secondary data through books and web pages. The search terms used were “mobile icon design”, “mobile icon design principle”, “mobile icon design element” and “apps icon design”. The outcomes of this paper are a comparative study and proposed elements for icon design that will contribute to the field of icon design for mobile application. The proposed elements for icon design consist of recognizable, colour, simple, semantics, familiarity, shape, aesthetic, consistency, uniqueness and concreteness. These proposed elements for icon design can assist designers and researchers in designing icons for mobile application that would improve user experience by enhancing the meaning of icons to users.
Touchscreens are widely used in electronic products. The purpose of this study is to investigate factors influencing the usability of icons in the LCD touchscreens. In this study, subjects had to answer a questionnaire and rate questions on a five-point Likert scale. Twenty evaluation items were collected from relevant interface design guidelines. Thirty subjects participated in this test, including 10 non-experienced users, 10 click-experienced users (PDA users), and 10 touch-experienced users (LCD touchscreen users). Principal component analysis (PCA) was performed with SPSS/ PC as the main statistical test. The PCA results showed that the usability of touch icons was affected by seven factors: touch field, semantics quality, dynamics, hit quality, tactility, color quality, and shape quality. Among these, touch field was rated as being the most important. Finally, the results of correlation analyses indicated that the user experience affected the importance ratings for usability. In particular, the subjects’ ratings exhibited significant differences with regard to the size element (p
This research compared the learning of an application program whose interface was implemented using buttons with text labels, icons, or a fully redundant combination of icons and text labels. The objective was to: 1) evaluate the success of novice computer users in initially learning to use the application and in later use in a delayed session and 2) measure users' attitudes toward the application. Each session was divided into four blocks, and performance in the blocks was measured in terms of correctness of the tasks performed, time to perform tasks, and number of times the help facility was accessed. In addition, at the end of each session the participants' perceptions of the ease of use and usefulness of the software were measured. The results showed that in the first session performance was best on the label-only and icon-label interfaces. Performance on the icon-only interface was much poorer in session 1, particularly in terms of time and help references, but improved in session 2 to the point where it approached the performance on the other interfaces. Retention of skill between the initial and the delayed session was worse for the icon-only interface, but the effect was short-lived. Perceptions of ease of use were consistently better for the icon-label interface than for the other two interfaces. Perceptions of usefulness were higher for the icon-only and icon-label interfaces than for the label-only interface in the first session. Perceptions of usefulness became more positive for the icon-only group in the delayed session, but did not change for the other groups.
This paper presents a methodology and results of an experiment to assess the usability of menu items constructed of text, icons, and text-and-icons. Attributes of menu items are used to form a matrix which can be used to classify menu items for use in certain applications, tasks, or with users of particular experience levels. An experiment was conducted to validate a portion of the attribute matrix. Performance measures were accuracy of selection and time to make a selection. Results suggest that menus constructed of a mixed format (text and icons) result in the fewest number of incorrect selections by users. No significant differences in the time to make a selection were found.
The Ss looked through a series of about 600 stimuli selected at random from an initially larger population. They were then tested for their ability to recognize these “old” stimuli in pairs in which the alternative was always a “new” stimulus selected at random from the stimuli remaining in the original population. Depending upon whether this original population consisted solely of words, sentences, or pictures, median Ss were able correctly to recognize the “old” stimulus in 90, 88, or 98% of the test pairs, respectively. Estimated lower bounds on the informational capacity of human memory considerably exceed previously published estimates.
The purpose of this study was to identify and investigate the main factors involved in the design of computer graphic user interfaces (GUI), commonly known as computer icons. Nineteen elements related to icon design were extracted from the principles, criteria and guidelines for GUI design. Forty-three Taiwanese designers working in computer GUI design were recruited to rate the importance of each design element.Results from the principal components analysis showed that the subjects’ importance ratings for computer icon design elements were affected by five factors: styling quality, message quality, meaningfulness, locatability, and metaphor. In addition to comprehensibility and identifiability, which previous results have found to be important icon design considerations, styling quality may also be important. Analysis of variance of the importance ratings for elements within each factor found that meaningfulness and locatability were more important than styling quality, message quality and metaphor. Finally, the correlation results indicated that neither computer GUI design experience nor the designers’ gender were related to importance ratings for the icon design elements.Relevance to industryAlthough the essential considerations for icon design are comprehensibility and identifiability, the results of this research demonstrate that “style” should also be considered as a factor when creating a computer icon. These research findings could serve as a guide to design computer icons that are appropriate for children's education programs, and that attract people to web sites and make web sites more user-friendly.
Mobile electronic products have recently become very popular because of their portable convenience and versatile functions. The personal digital assistant (PDA) can even access the Internet. However, there is still plenty of room for improvement in the PDA interface. This research proposes a systematic approach to analyze, generate and evaluate a PDA integrated menu–icon interface design for the DigitHub Company based on customer requirements.Hierarchical clustering analysis (HCA) is incorporated with the analytic hierarchy process (AHP) to identify and categorize functional PDA menus and their corresponding icons. We evaluate the importance of each of the different functional menus and categories. We generate five PDA menu–icon interface design alternatives that meet the proposed design guidelines, and we evaluate each for their respective feasibilities. The technique for order preference by similarity to ideal solution (TOPSIS) method is applied to measure the overall operating performance of the five PDA menu–icon interface design alternatives. The evaluation results show that the preferred design is option PDA5, a hierarchical and separated menu–icon layout style that features a two-layer menu structure.We expect that the proposed development procedure for the generation and evaluation of PDA menu–icon design alternatives based on customer requirements will be of interest to interface designers who wish to focus on mobile products.Relevance to industryThis paper proposes an integrated procedure for designing PDA menu–icon interfaces. Our methodology should help in the creation and optimization of screen layouts for mobile phones, global positioning system (GPS) navigation devices, digital cameras and related screen interfaces.
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.