|
|
|
|
|
|
Lesson#38
|
BEHAVIOR and FORM-6
|
|
|
|
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
363
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
364
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.
365
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.
DIMENSIONAL, TONAL, AND SPATIAL CONTRAST
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.
366
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
contrast.
LAYERING
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.
FIGURE AND GROUND
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.
THE SQUINT TEST
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
367
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. |
|
|
|
|