The C.R.A.P. Theory of Graphic Design (Design Better CRAP
with CRAP)
As you create your touch panel layout, there is a graphic design
convention that can help you to measure the overall aesthetic
of your panel. We use the CRAP convention to evaluate a graphic
design. Okay, stop laughing because C.R.A.P. stands for:
Contrast - Repetition - Alignment -
Proximity
If you honestly consider the role of each of these features
in your panels, you will identify mistakes and make your touch
panels more pleasing to the eye and less confusing for the
users. Each of these areas can effect any of the others so
it can be a delicate dance to get it right.
Contrast
Contrast is the difference in visual properties that makes one
object distinguishable from other objects. Size, color, brightness,
shape and texture are all fine examples of type of contrast.
Example: On a television tuner page what is the first thing
a user might want to see? Let's say it is the channel that is
currently being displayed. Would it not be a good idea to make
this text twice the size of all
other text so that it stands out immediately?
Example: Have you ever seen a touch panel with buttons with
a text label color that was too close to the button background
color? This is an example of not enough contrast.
Too little contrast between
button
background color and text (foreground) color. |
Good contrast between button
background color and text (foreground) color.
|
Repetition
Repeating design elements across all of your screens/pages will
create consistency, unify your touch panel design and help to
speed up the users learning curve while increasing their comfort
level with the panel. Because of repetition, your user will
find it easier to know where they are and where they need to
go. Repeating visual elements on a page is a visual trick designers
use to control the user's eye and how their attention moves
down or across the page. Strong, repetitive elements help to
organize the page into visual units. If a piece looks interesting,
it is more likely to be read.
Some elements that you should be repeating are:
Background
colors or images
Button
face colors (in all states of up, down & other)
 Button
text font, color, size, shape, position and capitalization
 Spatial
relationships like always grouping things that do a similar
function together. An example of this would to be always group
your volume up and down buttons together with a volume bar graph.
 Color
palette
 General
text font, color, size, shape, position and capitalization
 Functional
Layout - always repeat the placement of your navigation in the
same place on every page.
Take this web page as an example. We have carefully repeated
the page layout, color scheme bullet images and text decoration
so that you can traverse the large amount of written information
more easily.
Alignment
Placement on the page is crucial. Alignment can effect your
repetition if you aren't careful. Nothing should be placed on
the touch panel screen with out careful consideration of its
alignment with other objects. Because you are working with such
a small area, the users will be able to take in a greater amount
of information if you present it in an organized way. Maintaining
strong horizontal and vertical lines is key to keeping your
touch panel design inviting and easy to understand.
Every
touch panel element (button, label, text, control - whatever)
should have a visual connection with at least one other element
on the screen. Whether it is just on the same vertical or horizontal
line or aligned to the left, you must create hard edges (horizontal
or vertical) for the eye to follow.
Distance
doesn't matter. Two aligned elements can be located across the
screen from each other and the alignment will still be as beneficial
as if they were side by side.
Centering
elements on a touch panel can result in a more formal look but
if overused, it can look very dull and ordinary.
Find
a suitable alignment and repeat it. Do not mix flush left and
flush right alignments. This is confusing to the eye.
The
absence or lack of unified alignments is probably the biggest
cause of
unpleasant-looking touch panels. The amount that an element
is out of alignment can be only a few pixels and the brain will
pick up on it in an instant.
Example of Good Alignment
(Extreme) Example of Poor
Alignment
|
Proximity
Simply stated - place like elements together. When you group
similar elements together, they appear as a cohesive group or
a single visual element. This makes it easier for the eye to
pass over it if it is not needed. Or conversely, to find it
quicker when it is needed.
Place
similar items close together.
If
you group unrelated items together you will only confuse your
users.
When
you have more than three items on a page, it is good to try
to group them into more usable units by placing similar items
closer together or away from others.
Summary
It is important to consider how you use contrast, repetition,
alignment and proximity in your touch panel designs but remember
- in extreme cases - it is okay to break the rules. Try to avoid
fear of white space by leaving some unused area for greater
visual impact. Be bold in your choices but always keep your
users in mind!
In the next chapter we will discuss color and color pallets.
|
Color
Palettes 
