<Previous Lesson

Human Computer Interaction

Next Lesson>



As the aim of this lecture is to introduce you the study of Human Computer
Interaction, so that after studying this you will be able to:

. Understand the Principles of visual interface design

38.1 Designing Look and Feel

The commonly accepted wisdom of the post-Macintosh era is that graphical user
interfaces, or GUIs, are better than character-based user interfaces. However, although
there are certainly GUI programs that dazzle us with their ease of use and their look
and feel, most GUI programs still irritate and annoy us in spite of their graphical
nature. It's easy enough, so it seems, to create a program with a graphical user
interface that has a difficulty-of-use on par with a command-line Unix application.
Why is this the case?
To find an answer to this question, we need to better understand the role of visual
design in the creation of user interfaces.

Visual Art versus Visual Design

Practitioners of visual art and practitioners of visual design share a visual medium.
Each must be skilled and knowledgeable about that medium, but there the similarity ends. The
goal of the artist is to produce an observable artifact that provokes an aesthetic response. Art
is thus a means of self-expression on topics of emotional or intellectual concern to the artist,
and sometimes, to society at large. Few constraints are imposed on the artist; and the more
singular and unique the product of the artist's exertions, the more highly it is valued.
Designers, on the other hand, create artifacts that meet the goals of people other than
themselves. Whereas the concern of contemporary artists is primarily expression of
ideas or emotions, visual designers, as Kevin Mullet and Darrell Sano note in their
excellent book Designing Visual Interfaces (1995), "are concerned with finding the
representation best suited to the communication of some specific information." Visual interface
designers, moreover, are concerned with finding the representation best suited to
communicating the behavior of the software that they are designing. -.

Graphic Design and Visual Interface Design

Design of user interfaces does not entirely exclude aesthetic concerns, but rather it
places such' concerns within the constraints of a functional framework. Visual design in an
interface context thus requires several related skills, depending on the scope of the
interface in question. Any designer working on interfaces needs to understand the basics: color,
typography, form, and composition. However, designers working on interfaces also need some
understanding of interaction the behavior of the software, as well. It is rare to find visual
designers with an even balance of these skills, although both types of visual perspectives are
required for a truly successful interactive design


Graphic design and user interfaces

Graphic design is a discipline that has, until the last twenty years or so, been
dominated by the medium of print, as applied to packaging, advertising, and document
design. Old-school graphic designers are uncomfortable designing in a digital medium and are
unused to dealing with graphics at the pixel level, a requirement for most interface-design
issues. However, a new breed of graphic designers has been trained in digital media and
quite successfully applies the concepts of graphic design to the new, pixilated medium.
Graphic designers typically have a strong understanding of visual principles and a
weaker understanding of concepts surrounding software behavior and interaction over
time. Talented, digitally-fluent graphic designers excel at providing the sort of rich, clean,
visually consistent, aesthetically pleasing, and exciting interfaces we see in Windows XP, Mac OS
X, and some of the more visually sophisticated computer-game interfaces and consumeroriented
applications. These designers excel at creating beautiful and appropriate surfaces of
the interface and are also responsible for the interweaving of corporate branding into
software look and feel. For them, design is fi rst about legibility and readability of
information, then about tone, style, and framework that communicate a brand, and finally
about communicating behavior through affordances.

Visual interface design and visual information design

Visual interface designers share some of the skills of graphic designers, but they focus
more on the organizational aspects of the design and the way in which affordances
communicate behavior to users. Although graphic designers are more adept at defining the
syntax of the visual design— what it looks like — visual interface designers are more
knowledgeable about principles of interaction. Typically, they focus on how to match the
visual structure of the interface to the logical structure of both the user's and the program's
behavior. Visual interface designers are also concerned with communication of program
states to the user and with cognitive issues surrounding user perception of functions (layout,
grids, figure-ground issues, and so on).
Visual information designers fulfill a similar role regarding content and navigation
rather than more interactive functions. Their role is particularly important in Web
design, where content often outweighs function. Their primary focus tends to be on
controlling information hierarchy through the use of visual language. Visual information
designers work closely with information architects, just as visual interface designers work
closely with interaction designers,

Industrial design

Although it is beyond the scope of this book to discuss industrial design issues in any
depth, as interactive appliances and handheld devices become widespread, industrial design
is playing an ever-growing role in the creation of new interactive products. Much like the
difference in skills between graphic designers and visual interface and information designers,
there is a similar split among the ranks of industrial designers. Some are more adept
at the creation of arresting and appropriate shapes and skins of objects, whereas
others' talents lie more in the logical and ergonomic mapping of physical controls in a
manner that matches user behaviors and communicates device behaviors. As more physical
artifacts become software-enabled and sport sophisticated visual displays, it will become

more important that interaction designers, industrial designers, and visual designers of all
flavors work closely together to produce usable products.

38.2 Principles of Visual Interface Design

The human brain is a superb pattern-processing computer, making sense of the dense
quantities of visual information that bombard us everywhere we look. Our brains manage this
chaotic input by discerning visual patterns and establishing a system of priorities for the things
we see which in turn allows us to make conscious sense of the visual world. The ability of the
brain's visual system to assemble portions of our visual field into patterns based on visual
cues is what allows us to process visual information so quickly and efficiently. Visual interface
design must take advantage of our innate visual processing capabilities to help programs
communicate their behavior and function to users.
There are some important principles that can help make your visual interface as easy and
pleasurable to use as possible. Kevin Mullet and Darrell Sano (1995) provide a superb detailed
analysis of these principles; we will summarize some of the most important visual interface
design concepts here.
Visual interfaces should:

. Avoid visual noise and clutter

. Use contrast, similarity, and layering to distinguish and organize elements

. Provide visual structure and flow at each level of organization

. Use cohesive, consistent, and contextually appropriate imagery

. Integrate style and function comprehensively and purposefully
We discuss each of these principles in more detail in the following sections

Avoid visual noise and clutter

Visual noise in interfaces is the result of superfluous visual elements that distract from
those visual elements that directly communicate software function and behavior.
Imagine trying to hold a conversation in an exceptionally crowded and loud
restaurant. It can become impossible to communicate if the atmosphere is too noisy.
The same is true for user interfaces. Visual noise can take the form of overembellished
and unnecessarily dimensional elements, overuse of rules and other
visual elements to separate controls, insufficient use of white space between controls,
and inappropriate or overuse of color, texture, and typography.
Cluttered interfaces attempt to provide an excess of functionality in a constrained
space, resulting in controls that visually interfere with each other. Visually baroque,
jumbled, or overcrowded screens raise the cognitive load for the user and hamper the
speed and accuracy of user attempts at navigation.
In general, interfaces — non-entertainment interfaces, in particular — should use
simple geometric forms, minimal contours, and less-saturated colors. Typography
should not vary widely in an interface: Typically one or two typefaces in a few sizes
are sufficient. When multiple, similar design elements {controls, panes, windows) are
required for similar or related logical purpose, they should be quite similar in visual
attributes such as shape, size, texture, color, weight, orientation, spacing, and
alignment. Elements intended to stand out should be visually contrasted with any
regularized elements.

Good visual interfaces, like any good visual design, are visually efficient. They make
the best use out of the minimal set of visual and functional elements. A popular technique
used by graphic designers is to experiment with the removal of individual elements in order
to test their contribution to the clarity of the intended message.
Pilot and poet Antoine de Saint Exupery once expressed, "Perfection is attained not when
there is no longer anything to add, but when there is no longer anything to take away.” As
you create your interfaces, you should constantly be looking to simplify visually. The
more useful work a visual element can accomplish, while retaining clarity, the better. As
Albert Einstein suggested, things should be as simple as possible, but no simpler
Another related concept is that of leverage, using elements in an interface for multiple,
related purposes. A good example is a visual symbol that communicates the type of an
object in a list, which when clicked on also opens a properties dialog for that object
type. The interface could include a separate control for launching the properties display,
but the economical and logical solution is to combine it with the type marker. In
general, interaction designers, not visual designers, are best suited to tackle the
assignment of multiple functions to visual elements. Such mapping of elements requires
significant insight into the behavior of users in context, the behavior of the software,
and programming issues.

Use contrast and layering to distinguish and organize elements

There are two needs addressed by providing contrast in the elements of an interface.
The first is to provide visual contrast between active, manipulable elements of the
interface, and passive, non-manipulable visual elements. The second is to provide
contrast between different logical sets of active elements to better communicate thei r
distinct functions. Unintentional or ambiguous use of contrast should be avoided, as user
confusion almost certainly results. Proper use of contrast wi l l result in visual patterns
that users register and remember, allowing them to orient themselves much more
rapidly. Contrast also provides a gross means of indicating the most or least important
elements in an interface's visual hierarchy. In other words, contrast is a tool for the
communication of function and behavior.


The manipulable controls of an interface should visually stand out from nonmanipulable
regions. Use of pseudo-3D to give the feel of a manual affordance is perhaps the
most effective form of contrast for controls. Typically, buttons and other items to be clicked
or dragged are given a raised look, whereas data entry areas like text fields are given
indented looks. These techniques provide dimensional contrast.
In addition to the dimensionality of affordance, hue, saturation, or value (brightness)
can be varied to distinguish controls from the background or to group controls logically.
When using such tonal contrast, you should in most cases vary along a single "axis" — hue
or saturation or value, but not all at once. Also, be aware that contrasting by hue runs the risk
of disenfranchising individuals with color perception problems; saturation or brightness is
probably a safer alternative. In grayscale displays, tonal contrast by value is the only choice the
designer has. Depending on the context, tonal contrast of either the controls, of the
background area the controls rest on, or of both may be appropriate.

Spatial contrast is another way of making logical distinctions between controls and data entry
areas. By positioning related elements together spatially, you help make clear to the
user what tasks relate to each other. Good grouping by position takes into account the
order of tasks and subtasks and how the eye scans the screen (left to right in most Western
countries, and generally from top to bottom), which we discuss more in a following
section. Shape is also an important form of contrast: Check boxes, for example, are
square, whereas radio buttons are round — a design decision not made by accident.
Another type of spatial contrast is orientation: up, down, left, right, and the angles in between.
Icons on the Mac and in Windows provide subtle orientation cues: Document icons are more
vertical, folders more horizontal, and application icons, at least on the original Mac, had a
diagonal component. Contrast of size is also useful, particularly in the display of quantitative
information, as it easily invites comparison. We talk more about information design later in
this chapter. Contrast in size is also useful when considering the relative sizes of titles and
labels, as well as the relative sizes of modular regions of an interface grid. Size, in
these cases, can relate to broadness of scope, to importance, and to frequency of use.
Again, as with tonal contrast, sticking to a single "axis" of variation is best with spatial


Interfaces can be organized by layering visual cues in individual elements or in the background
on which the active elements rest. Several visual attributes control the perception of layers.
Color affects perception of layering: Dark, cool, desaturated colors recede, whereas light,
warm, saturated colors advance. Size also affects layering: Large elements advance whereas
small elements tend to recede. Positionally overlapping elements are perhaps the most
straightforward examples of visual layering.
To layer elements effectively, you must use a minimum amount of contrast to maintain close
similarity between the items you wish to associate in a layer on the screen. After you have
decided what the groups are and how to best communicate about them visually, you can begin
to adjust the contrast of the groups to make them more or less prominent in the display,
according to their importance in context. Maximize differences between layers, but minimize
differences between items within a layer.


One side effect of the way humans visually perceive patterns is the tension between
the figure, the visual elements that should be the focus of the users attention, and the
ground, the background context upon which the figure appears. People tend to perceive light
objects as the figure and dark objects as the ground. Figure and ground need to be integrated in a
successful design: Poorly positioned and scaled figure elements may end up emphasizing the
ground. Well-integrated designs feature figure and ground that are about equal in their scale
and visual weight and in which the figure is centered on the ground.


A good way to help ensure that a visual interface design employs contrast effectively
is to use what graphic designers refer to as the squint test. Close one eye and squint at the
screen with the other eye in order to see which elements pop out and which are fuzzy,
which items seem to group together, and whether figure or ground seem dominant. Other

tests include viewing the design through a mirror (the mirror test) and looking at the design
upside down to uncover imbalances in the design. Changing your perspective can often uncover
previously undetected issues in layout and composition.

<Previous Lesson

Human Computer Interaction

Next Lesson>


Lesson Plan


Go to Top

Next Lesson
Previous Lesson
Lesson Plan
Go to Top