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
[email protected]

Abstract—This paper recapitulated the concept of human

A. Cognitive Psychology-based information visualization
machine interface visualization design, analyzed and
study
generalized its study contents and the attention-deserving
problems relating to human machine interface The process of human-machine interaction is the transfer
visualization design. It summarized the attribute of and feedback of information, and the exportation and result
visualizable human machine interface under the of conducts. In order to strengthen the accuracy and
consideration of the visualization study content. Finally, efficiency of information transfer and conduct exportation,
the paper advanced some principles which should be the designer must study the cognitive psychology problems
observed in visualization design, providing the relating to human-machine interface. Cognitive psychology
visualization design of human machine interface some studies how human beings get the objective information,
bases. how the information appears and transforms into knowledge
and how it stores the knowledge and how it guides the
Keywords- human machine interface, visualization, consumers’ conducts. Cognitive psychology concerns the
visual information design whole process of human’s psychology, from tactility to
consciousness, model cognition, study, skills, forming
I. INTRODUCTION concepts, thinking, presentation, memory, language and
sentiments, penetrating all the fields of human conducts.
As the media of human-machine interaction, the human- The basic target of the visualization study on human-
machine interface is the platform for cognition and machine interface is to reduce errors, improve the ability of
communication between human and machine, and it is the conduct and enhance the security and comfortableness of
approach for information transmittal. However, critical is it operation in the human-machine interaction, while the
for the human to recognize and understand the information cognitive psychology-based visualization study in human-
in the process of human-machine interaction. Information is machine interface can lay a foundation for that. It requires
recognized by human’s perception systems, which mainly the visualizable human-machine interface to meet the
contain vision, audition and tactility. Visual perception, as following requirements:
humans main means in observation and recognization, plays x The visualizable human-machine interface should be
the most critical function in human-machine interaction. used to provide the consumers specific and
Therefore, visualization of information in the human- identifiable objects, helping the consumers induce
machine interface becomes especially important. abstract concepts or principles.
Visualization of information in human-machine x Taking advantage of the visualizable interface to
interaction, to put it simply, is the visualizing design of demonstrate the hidden contents, and making full
human-machine interfaces, that is, to transfer lingual, use of distinct and intelligible objects such as
programmized and virtual information into recognizable characters, graphics, animation, colors, etc. to
visual information, including characters, images, colors, demonstrate principles, formulas and abstract
texture and lay-out forms based on the above-mentioned concepts.
elements. The visualizing design of human-machine x Using the visualizable human-machine interface
interface can endow information with vividity and design to stimulate the consumers’ thoughts and
readability, and express conduct much better through imagination, so as to enhance their participation and
affordances.[1] In human-machine interaction, visualizing stimulate their desire to study and create.
design of the interfaces directly influences the quality of the B. Visualization design-based information visualization
human-machine interfaces. study
II. THE STUDY CONTENTS OF HUMAN-MACHINE Visualization design-based information visualization is
INTERFACE VISUALIZATION 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

978-0-7695-3752-8/09 $25.00 © 2009 IEEE 262

DOI 10.1109/IHMSC.2009.189
information like colors and shapes in human-machine keyboards and mouse, but also allow the consumers to
interface, bringing to full play the consumers’ potent of control the operation time according to their own interaction
visual perception and thinking, thereby strengthening the habits, with the support of appropriate navigation and
usability of the human-machine interface and improving the required contents, helping the consumers avoid inaccurate
efficiency of information transmittal. Visualization design operation and providing them the opportunity to correct
includes mainly character design, graphics design, color errors. The maneuverability of the visualizable human-
design, layout design, etc. machine interface will bring to the consumers higher
efficiency and gratification.
III. THE PROPERTY OF THE VISUALIZABLE HUMAN -
MACHINE INTERFACE D. Affinity
On one hand, the affinity of the visualizable human-
A. Recognition machine interface means that the human-machine interface
Recognition, also named as perceptibility, is the basic is easy-understandable. No matter how complex the
feature of the visualizable human-machine interface. The background working mode or implementation approach of
visualization design of the human-machine interface makes the interface is, it interacts in a consistent way, helping the
the contents and the control of the interface more visible and consumers find out the working situation of the system and
understandable, enabling the contents to be correctly predict the conducts and results of the systems.[3] On the
interpreted and the control to be used precisely. It guarantees other hand, the affinity of the visualizable human-machine
the information, function and framework to be distinct and interface helps the consumers concentrate on their conducts
easy to be distinguished, ensuring the difference between the and the function, leaving less attention to the interfaces.
prospect information and the background information of the Then the consumers can work naturally, while the interface,
interface, the consistency of each sub-interface and window, as a media, should be invisible, instead of becoming the
and making sure that the interface responds to the hindrance of the information communication.
consumers’ commands and operation in an expected way.
The recognition of visualizable interfaces bridges a wide and IV. DESIGN PRINCIPLE OF THE INTERFACE INFORMATION
VISUALIZATION
convenient channel between human and machine. The
recognition of the visualizable human-machine interface is
A. Consumers-centered principle
based on the extensive and reasonable application of
characters, graphics, animations and videos in the interface x The visualizable human-machine interface should
designs. Meanwhile, the recognition tends to be impacted take the consumers as its operation subjects,
and restricted by the display equipment. adapting the consumers in multiply ways.
x The visualization design should base on the
B. Interaction consumers’ prevenient experience, achieving the
Interaction is an important attribute of the visualizable compatibility between the consumers and the
human-machine interface, which furnishes the consumers interfaces.
with active or passive interaction ways. The interaction x The visualizable human-machine interface should be
possess a certain degree of flexibility, which means the consistent with modes which the consumers are
visualizable interfaces can provide different operation aware of or familiar with.[4]
interfaces and operation modes according to different x The visualization design of the human-machine
consumers or working situations, allowing the consumers to interface should be systematic and structured to the
make allodia choice of interaction ways.[2] The interaction greatest extent, while complexity reduced.
of the visualizable human-machine interface enables the x The visualization design of the human-machine
consumers to achieve the function and mission according to interface should simplify human’s conducts, and
minimize the operation measures.
their own requirements, whether using menus, forms,
command language, prompting frame, animation, or B. Visualization design principle
operating directly.
1) The principle of reasonable adoption of visual
C. Maneuverability elements
Maneuverability means that the relevant elements of the
interface and contents must be operatable. The greatest Using graphics or other vision-related elements in
benefit it brings is that the consumers can operate in real-life human-machine interface visualization design can help the
behaviors through the visual interface. It should be easy and consumers understand the interface better. This requires the
quick for any consumer to grasp the interface and operation visual elements used must be compact and generic, and be in
modes, enabling them to feel that they are carrying out the accordance with the consumers’ prevenient experience and
mission directly while using the interfaces. The operatable visual habits. A perfect design tends to create combined
visual interface can not only complete the function by visual elements, and form a compact, monolithic and

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

265