2009 International Conference on Intelligent Human-Machine Systems and Cybernetics
Human-Machine Interface: Design Principles of Visual Information in Human-
Machine Interface Design
GONG Chao
Beijing Institute of Technology
Beijing, China
gongc_0@126.com
Abstract—This paper recapitulated the concept of human
machine interface visualization design, analyzed and
generalized its study contents and the attention-deserving
problems relating to human machine interface
visualization design. It summarized the attribute of
visualizable human machine interface under the
consideration of the visualization study content. Finally,
the paper advanced some principles which should be
observed in visualization design, providing the
visualization design of human machine interface some
bases.
Keywords- human machine interface, visualization,
visual information design
I. INTRODUCTION
As the media of human-machine interaction, the human-
machine interface is the platform for cognition and
communication between human and machine, and it is the
approach for information transmittal. However, critical is it
for the human to recognize and understand the information
in the process of human-machine interaction. Information is
recognized by human’s perception systems, which mainly
contain vision, audition and tactility. Visual perception, as
humans main means in observation and recognization, plays
the most critical function in human-machine interaction.
Therefore, visualization of information in the human-
machine interface becomes especially important.
Visualization of information in human-machine
interaction, to put it simply, is the visualizing design of
human-machine interfaces, that is, to transfer lingual,
programmized and virtual information into recognizable
visual information, including characters, images, colors,
texture and lay-out forms based on the above-mentioned
elements. The visualizing design of human-machine
interface can endow information with vividity and
readability, and express conduct much better through
affordances.[1] In human-machine interaction, visualizing
design of the interfaces directly influences the quality of the
human-machine interfaces.
II. THE STUDY CONTENTS OF HUMAN-MACHINE
INTERFACE VISUALIZATION
978-0-7695-3752-8/09 $25.00 © 2009 IEEE 262
DOI 10.1109/IHMSC.2009.189
A. Cognitive Psychology-based information visualization
study
The process of human-machine interaction is the transfer
and feedback of information, and the exportation and result
of conducts. In order to strengthen the accuracy and
efficiency of information transfer and conduct exportation,
the designer must study the cognitive psychology problems
relating to human-machine interface. Cognitive psychology
studies how human beings get the objective information,
how the information appears and transforms into knowledge
and how it stores the knowledge and how it guides the
consumers’ conducts. Cognitive psychology concerns the
whole process of human’s psychology, from tactility to
consciousness, model cognition, study, skills, forming
concepts, thinking, presentation, memory, language and
sentiments, penetrating all the fields of human conducts.
The basic target of the visualization study on human-
machine interface is to reduce errors, improve the ability of
conduct and enhance the security and comfortableness of
operation in the human-machine interaction, while the
cognitive psychology-based visualization study in human-
machine interface can lay a foundation for that. It requires
the visualizable human-machine interface to meet the
following requirements:
x The visualizable human-machine interface should be
used to provide the consumers specific and
identifiable objects, helping the consumers induce
abstract concepts or principles.
x Taking advantage of the visualizable interface to
demonstrate the hidden contents, and making full
use of distinct and intelligible objects such as
characters, graphics, animation, colors, etc. to
demonstrate principles, formulas and abstract
concepts.
x Using the visualizable human-machine interface
design to stimulate the consumers’ thoughts and
imagination, so as to enhance their participation and
stimulate their desire to study and create.
B. Visualization design-based information visualization
study
Visualization design-based information visualization is
to transform the complex information interface into graphics
through means of art design, that is, to take use of the
computer graphics technology to increase the use of visual
information like colors and shapes in human-machine
interface, bringing to full play the consumers’ potent of
visual perception and thinking, thereby strengthening the
usability of the human-machine interface and improving the
efficiency of information transmittal. Visualization design
includes mainly character design, graphics design, color
design, layout design, etc.
III. THE PROPERTY OF THE VISUALIZABLE HUMAN -
MACHINE INTERFACE
A. Recognition
Recognition, also named as perceptibility, is the basic
feature of the visualizable human-machine interface. The
visualization design of the human-machine interface makes
the contents and the control of the interface more visible and
understandable, enabling the contents to be correctly
interpreted and the control to be used precisely. It guarantees
the information, function and framework to be distinct and
easy to be distinguished, ensuring the difference between the
prospect information and the background information of the
interface, the consistency of each sub-interface and window,
and making sure that the interface responds to the
consumers’ commands and operation in an expected way.
The recognition of visualizable interfaces bridges a wide and
convenient channel between human and machine. The
recognition of the visualizable human-machine interface is
based on the extensive and reasonable application of
characters, graphics, animations and videos in the interface
designs. Meanwhile, the recognition tends to be impacted
and restricted by the display equipment.
B. Interaction
Interaction is an important attribute of the visualizable
human-machine interface, which furnishes the consumers
with active or passive interaction ways. The interaction
possess a certain degree of flexibility, which means the
visualizable interfaces can provide different operation
interfaces and operation modes according to different
consumers or working situations, allowing the consumers to
make allodia choice of interaction ways.[2] The interaction
of the visualizable human-machine interface enables the
consumers to achieve the function and mission according to
their own requirements, whether using menus, forms,
command language, prompting frame, animation, or
operating directly.
C. Maneuverability
Maneuverability means that the relevant elements of the
interface and contents must be operatable. The greatest
benefit it brings is that the consumers can operate in real-life
behaviors through the visual interface. It should be easy and
quick for any consumer to grasp the interface and operation
modes, enabling them to feel that they are carrying out the
mission directly while using the interfaces. The operatable
visual interface can not only complete the function by
263
keyboards and mouse, but also allow the consumers to
control the operation time according to their own interaction
habits, with the support of appropriate navigation and
required contents, helping the consumers avoid inaccurate
operation and providing them the opportunity to correct
errors. The maneuverability of the visualizable human-
machine interface will bring to the consumers higher
efficiency and gratification.
D. Affinity
On one hand, the affinity of the visualizable human-
machine interface means that the human-machine interface
is easy-understandable. No matter how complex the
background working mode or implementation approach of
the interface is, it interacts in a consistent way, helping the
consumers find out the working situation of the system and
predict the conducts and results of the systems.[3] On the
other hand, the affinity of the visualizable human-machine
interface helps the consumers concentrate on their conducts
and the function, leaving less attention to the interfaces.
Then the consumers can work naturally, while the interface,
as a media, should be invisible, instead of becoming the
hindrance of the information communication.
IV. DESIGN PRINCIPLE OF THE INTERFACE INFORMATION
VISUALIZATION
A. Consumers-centered principle
x The visualizable human-machine interface should
take the consumers as its operation subjects,
adapting the consumers in multiply ways.
x The visualization design should base on the
consumers’ prevenient experience, achieving the
compatibility between the consumers and the
interfaces.
x The visualizable human-machine interface should be
consistent with modes which the consumers are
aware of or familiar with.[4]
x The visualization design of the human-machine
interface should be systematic and structured to the
greatest extent, while complexity reduced.
x The visualization design of the human-machine
interface should simplify human’s conducts, and
minimize the operation measures.
B. Visualization design principle
1) The principle of reasonable adoption of visual
elements
Using graphics or other vision-related elements in
human-machine interface visualization design can help the
consumers understand the interface better. This requires the
visual elements used must be compact and generic, and be in
accordance with the consumers’ prevenient experience and
visual habits. A perfect design tends to create combined
visual elements, and form a compact, monolithic and
familiar interface style, as well as enable the consumers to Red Blue
distinguish the visual elements of different conducts.
Red Yellow
2) The principle of avoiding visual disorder Black Purple

Visual disorder of the visualizable human-machine Black Blue

interface owes to redundant visual elements, which disperse Gray Green
the consumers’ attention, and interfere with them in Red Purple
concentrating on the visual elements of effectual function
Green Red
and conducts. Therefore the visualization design of human-
machine interface should minimize the adoption of visual Purple Black
elements, while keep in accordance with the consumers’
requirements like using simple geometric shapes, least
silhouettes and least saturated colors. The relevant contents 4) Space-coordination principle
and functions in the interface should adopt similar visual
The coordination of the interface space requires a
disposure, while the prominence-expected elements should
division of the interface function area of the visualizable
be in sharp contrast with other elements visually. Finer
interface according to reasonable and appropriate
visual interfaces are of high efficiency and ruliness, just like
dimensions, entirely planning and designing the visual
the visual designs.
elements such as texture, color, size, etc. and integrating the
3) The principle of the main elements and backgrounds interface’s semantic designs, so as to provide the consumers
distinguishable a integrated and consuming feeling of the unique style.
Appropriate blanks, which make the interface less crowded
People tend to take the luminous visual elements as and bring comfortableness to the consumers, should be left
the main ones, while the murk ones backgrounds. A around the visual elements in the interface, on the page
successful design must completely combine the main visual edges and between paragraphs, graphics and titles.
elements and the backgrounds, for the location errors or
imbalance of the two may lead to the emphasis of 5) The principle of reasonable adoption of colors
backgrounds. Successful visualizable interface designs have Colors are important elements that guide the
balanced ratio and vision on images and backgrounds, the consumers’ conducts and influence their mentality in the
main visual elements usually locating in the center of the visualizable human-machine interface. Appropriate adoption
backgrounds. The main elements and background can also of colors can help the consumers find the information and
be effective to distinguish through a reasonable color match, complete difficult missions. Designers should pay attention
check this on the following table. to the symbolic and cultural meanings of different colors, as
well as the possible psychological hints, combining colors
TABLE I. EASY TO DISTINGUISH COLLOCATION OF COLOR with other elements of the visual language, such as symbols,
diagrams, texts, etc. in the visualization design of the
Background Color Main color human-machine interface. Opportune application of colors
Black Yellow can emphasize important information, attract attention,
Yellow Black enhance the speed of navigation and browsing, demonstrate
the relation between contents, and increase the consumers’
Black White
trust and satisfaction. Different color gives us different
Purple Yellow feeling, check this on the following table.
Purple White
TABLE III. PSYCHOLOGICAL REACTION ABOUT COLOR
Blue White
Green White
Color Psychological reaction
Yellow Green
Red Excited, enthusiastic, brilliant, dangerous …
Yellow Blue
Orange Moderate, pleasure, bright, irritability …
White Black
Yellow Warmth, harvest, hope, cheerfulness, commonness …
TABLE II. DIFFICULT TO DISTINGUISH COLLOCATION OF COLOR Green Vitality, growth, hope, fresh …
Blue Equability, calm, far-reaching, cold, mind …
Background Color Main color
Purple Noble, luxurious, elegant, mysterious …
Yellow White
Black Dignified, solid, heavy, terrorist …
White Yellow
White Immaculacy, holiness, lustration, pure, crisp, true …

264
 Grey Simple, light, soft …
6) The principle of reasonable layout
Taking in use of correct layout principles can lead to
reasonable division and permutation of the disorder objects,
which ensures the design of a well-structured visualizable
human-machine interface, guaranteeing the recognition and
understanding of information. In their designs, the designers
should lay elements of similar function and features together,
arrange the gap-shaped visual elements overall, the objects
in small areas as single visual elements, the symmetric and
ring-shaped regions as a whole, and similar-shaped choice
boxes in vertical direction, etc.
C. Emotional principle
The interface design should meet the users’ basic
emotional needs through orderly arranging, accepting and
rejecting various visual elements, such as directness,
understandability, excitement, funniness, etc. Not only that,
the design should also meet the users’ individual emotional
needs and a higher level of emotional needs, such as rational
thinking, challenge, exploration, etc. Through prettifying
visions, designers should give pacification to users from the
emotional level, which will help improve users’ cognitive
efficiency and strengthen the usability of interface.[5]
D. Principle of assist through multiple-ways
As the development of science and technology and the
improvement of tactile and auditory technology, the future
interface should combine the visual, auditory and tactile
design according to different needs. The tactile and auditory
design can express a moved feeling beyond vision.[6] Based
265
on this idea, the human-machine interface design should
form a new idea that vision is first and auditory sense and
tactile sense are second, meeting the users’ cognitive needs
from different angles and comprehensive experience, thus
strengthen the usability of interface.
V. CONCLUSION
The visualization study of human-machine interface
plays a decisive role in the human-machine interacts,
predominating the application of the human-machine
interact products. The clarity and readability of the
information communication and the maneuverability and
convenience in application, require the designers to carry out
the visualization design of human-machine interface, with
the guide of humane concept and foundation of cognitive
psychology and visual design methods, which leads to the
consumers-centered, reassuring, comfortable and
consumers-satisfied human-machine interfaces.
REFERENCES
[1] Alan Cooper The Way of Running Interaction Design, China:
Electronics Industy, 2003.
[2] Murray R. Little, Human-Computer Interaction (3rd edition),
Englewood Cliffs: Prentice Hall, 2003.
[3] Nicu Sebe, Computer Vision in Human-computer Interaction,
Germany: Springer, 2005.
[4] Alan Cooper, Robert Reimann, The Essentials of Interaction Design,
China: Electronics Industy, 2005.
[5] Donald A.Norman, Emotional Design, China: Electronics Industy,
2006.
[6] Donald A.Norman, The Design of Everyday Things, China: Citic,
2003.