The C.R.A.P. Theory of Graphic Design (Design better touch panels 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 1 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 2 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 (forground) color.
Too little contrast between button background color and text (foreground) color.
Good contrast between buttonbackground 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 Background colors or images
Button face colors (in all states of up, down & other) Button face colors (in all states of up, down & other)
Button text font, color, size, shape, position and capitalization Button text font, color, size, shape, position and capitalization
Spatial relationships like always grouping things that do a similar function together. 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 Color palette
General text font, color, size, shape, position and capitalization 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 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. 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. 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. 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 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 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
Example of Good Alignment


(Extreme) Example of Poor 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. Place similar items close together.
If you group unrelated items together you will only confuse your users. 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 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.

Graphic Design for Touch Panels - Color PalettesColor Palettes