|
|||||
Human
Computer Interaction
(CS408)
VU
Lecture
38
Lecture
38. Behavior
& Form Part VI
Learning
Goals
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
Designing Look and
Feel
38.1
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
362
Human
Computer Interaction
(CS408)
VU
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
consumer-
oriented
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 first 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
363
Human
Computer Interaction
(CS408)
VU
more
important that interaction designers,
industrial designers, and visual
designers of all
flavors
work closely together to produce
usable products.
Principles of
Visual Interface
Design
38.2
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
over-
embellished
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.
364
Human
Computer Interaction
(CS408)
VU
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
their
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 non-
manipulable
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.
365
Human
Computer Interaction
(CS408)
VU
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
366
Table of Contents:
|
|||||