Section 12.8. Emphasis and Focus


12.8. Emphasis and Focus

Position, size, and contrast guide the user's attention. The most important items should be toward the middle, larger, and with higher contrast. Supporting items in list form are placed along the left margin. Related information can be at the top or bottom.

These are not hard and fast rules but they make sense. It is a design that people already understand if they use the Web. It evolved as a common design in web pages because it works.

Figure 12-15 shows an application main display.

Figure 12-15. Putting the emphasis on the most important item


The real message is the chart and it is the largest item on the display.

If the user only looks at the display for five seconds what will they see? Perhaps all they need to know is if further addition is required. Place the most important answers prominently in the display.

12.8.1. Metaphor

Everyone understands a report, a flow diagram, or a web page. If you stick with an approach that your users already know your application will be easier to use.

It is best to avoid a new and different approach unless you are sure that its meaning is clear.

In Chapter 8's application I put a summary at the top of a report sheet (see Figure 12-11). This is a little unusual. You normally expect to see totals at the bottom, and this placement, while reasonable, has to be explained. In this case it might be better to put the summary on a different sheet.

12.8.2. Fonts

If the user notices the font, you are using the wrong one. Pick one that is easy to read and stick with it. You can create all the separation and emphasis you will ever need without changing font.

We recognize common words by shape as well as letters. In Figure 12-16 there are two buttons with the same caption.

Figure 12-16. Two buttons with the same message


The words and the message are common, and the shape of the words helps make the button on the left easier to read. Using all-caps hides the shape of the words and increases the chance that the user will misunderstand the message or overlook something.

12.8.3. Colors

Color can add interest and make an application more understandable. But it can also confuse, cause eye strain, and distract. When content is based on color alone it can disappear when a screen is printed, and some users will have trouble distinguishing between colors. In most cases a simple black, white, and gray scheme works fine.

The visible spectrum runs from red to violet and the color in the middle is green. Since green is in the middle of the visible range, it is the easiest color to see. This makes green a safe background color. If fine details are displayed using colors far apart in the spectrum it can be impossible for the eye to focus on both at the same time. Placing red and violet details close together is a good way to give users a headache.

You can increase the visibility of your display and reduce the risk of eye strain by using a light green background. The color scheme of old-fashioned green bar reports was based on this, and it still works.

The eye is better at seeing differences in light and dark than in color. So, no matter what color combination you use, keep the contrast between background and content high.

12.8.4. Background Interaction

Sometimes the background can compete with content on a display. In Figure 12-17 the background interacts with the circles, and creates a triangle.

This is just an optical trick, but it shows how the relationship between the content and the background can confuse things.

Figure 12-17. An example of background interaction


Contrast between content and background is good, but high contrast between the non-content parts of a display can be a problem. In Figure 12-18 we see two versions of a daily menu.

Figure 12-18. Daily menu in two formats


The format on the left is simple and easy to read. The contrast between the white background and the black letters could not be more effective.

On the right things are not so good. Black and white are both used as background colors. The contrast within the background is the same as the contrast between letters and the background. This is confusing to the eye. In this case, contrast reverses direction. It starts by going light to dark then fakes the viewer out by going dark to light.

Even in button design it is better to keep contrast moving in one direction. In Figure 12-19 the menu is reformatted as buttons.

Even though the contrast in the buttons is lower, it is still easier to read.

Another example is the obscuring box shown in Figure 12-20.

Background space can make a big difference. Boxes reverse contrast, but allowing enough background space inside the box eliminates the problem. In the top box the lack of background space inside the box brings the box and the text into conflict. The reverse in contrast confuses the eyes and is difficult to read.

The lower box has enough space to keep the relationships clear.

Figure 12-19. Daily menu as buttons


Figure 12-20. Hiding text in a box


Reversing the direction of contrast can be effective in headings or to distinguish between areas in a display. But it does not work with content items being viewed together in small spaces.



Analyzing Business Data with Excel
Analyzing Business Data with Excel
ISBN: 0596100736
EAN: 2147483647
Year: 2006
Pages: 101
Authors: Gerald Knight

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net