You must design the elements of your interface to convey a coherent interface image. An interface image is composed of all the elements on the screen. If your interface does not accurately convey the function of its elements, users will try to create their own context for the tasks. However, their context might not correspond to the functions of your interface.
To develop an application interface that integrates function and design, you must employ visual presentation principles throughout the design process.
Basic design methodology for creating the interface image incorporates two concepts:
Understanding and exploiting the limits and potentials of the operating environment
When making design decisions, be aware of rendering technologies that affect screen resolution, speed, and color and gray-scale support.
Understanding human visual capabilities
You must understand how to visually support the selection and grouping of elements. For example, knowledge of users' visual capabilities will determine how and where you will use patterns and anomalies in icon design.
This section introduces visual design variables. The information presented is abbreviated due to the scope of this book.
The visual design variables available to you comprise the visual “ language” you use to create your application's interface. Some variables, such as texture, have limited availability on today's systems, and are not addressed. However, the variables described can provide a wide variety of elements to create an infinite number of unique visual designs. Visual design variables are:
Color
Shape
Size
Contrast
Anomaly
You can use color in a wide variety of ways due to increasingly sophisticated technology. This section discusses only a few prominent design principles.
The computer display image is formed of pixels radiating light toward the user. As a consequence, such an image covers a wider range of contrasts than reflective images like printed pages and paintings. Computer display images have ranges from black to bright and luminous white. In addition, the color contrasts that are possible are much stronger than in traditional reflective media.
Used judiciously, color contributes greatly to the appeal and usability of an interface. Subtle contrasts are possible, but the misuse of color can have jarring effects. Also, remember that some users may be unable to distinguish colors due to disabilities. For more information about designing for users with visual disabilities, see Chapter 12, “Designing for Accessibility”.
If you do not have a graphic designer available for consultation, consider the following principles for using color:
Think of color in terms of hue, saturation, and value.
Color is three dimensional. The color of a pixel on the screen is specified by three numbers: a level of red, green, and blue (RGB). A more intuitive, useful representation of color uses three defining dimensions: hue, saturation, and value (HSV). Developers often offer HSV versions of their color settings as a standard. The following list provides a brief description of these three dimensions:
| Hue | Along the hue dimension, colors on a color wheel (or in a rainbow) vary from red to orange to yellow to green. | |
| Saturation | Along the saturation dimension, color varies from gray to colorful. A greenish gray and a vivid green have the same hue (green) but different levels of saturation. The greenish gray has a low saturation; it is green ‘watered down’ with gray. | |
| Value | Along the value dimension, colors vary from dark to light. A dark red and a light red (pink) have the same hue (red) but different values (a dark one and a light one). |
Table 9-1 lists HSV principles for designing background and foreground elements.
Table 9-1. Designing with Color
| Element Position | Hue | Saturation | Value |
|---|---|---|---|
| Background elements (background, window client areas) | No restriction | Low | Medium |
| Foreground elements (icons, text) | No restriction | Medium to high | Low and high (higher contrast) |
When designing your application, plan to support a variety of hardware configurations. Take into account whether color is available on the system (that is, black and white and gray-scale design), and the number of colors available on different systems. Design your application so that colors can be viewed in black-and-white or greyscale without a loss of clarity. Remember that the same set of colors may look different depending on video hardware specifications. Always evaluate color palettes with appropriate video hardware when available.
Map the colors of an interface (or any image) into a color space. Such a visualization method helps define color relationships between different categories of interface elements. By establishing color relationships, you control the relative prominence of these elements and offer users interfaces that are more usable and make better use of the rich colors now available on state-of-the-art displays.
When specifying color for an application interface, consider the color resource (the HSV color space, for instance) as a ‘credit’ of color. That is, once you use a color for a certain purpose, do not use it for another purpose. ‘Spend’ your color resources judiciously.
The shape of interface elements can convey meaning. For example, an organic, rounded shape appears more inviting than a pointed shape.
Introducing different shapes provides visual interest and gains attention. Because of today's system implementation techniques, you can incorporate a variety of shapes in icons. Note that selected emphasis can emphasize different icon shapes.
A change in the shape of an element can also convey meaning. For instance, a trash can might change shape to show that it contains trash or a folder icon might open when an object is dragged over it to indicate that the object can be dropped there.
Element size is relative; that is, the terms ‘large’ and ‘ small’ are relative to what you are comparing. Elements in the interface can vary in size depending on different factors, such as meaning. You can also reflect relative status of elements by contrasts in the size of elements, as described in “Contrast”.
When designing your application's interface, keep in mind the various elements that will be required. For example, consider the appearance and size of window icons, the variety of monitors (including size and resolution), and the proportion of elements as they appear on the screen.
You can use color, shape, and size alone or in concert to express the concept of contrast. Contrast ranges far beyond simple opposites, for example, mild or severe, vague or obvious, simple or complex.
Use contrast to differentiate elements. For example, two elements can be similar in some aspects and different in others. Their differences become emphasized when the elements are presented with contrast. In other words, one element might look small by itself, but it might appear large compared to small elements next to it. An element can have a similar shape to the elements around it and can have a contrasting color.
The following list describes contrast in conjunction with other design elements:
Color contrast
Some examples of color contrast would be light and dark, brilliant and dull, and warm and cool. Elements can be the same hue, but have contrasting saturation: one would be light, the other dark. The opposite is true as well; that is, elements can have the same saturation with different hues (light red, light blue, or light green) but still be perceived as a group because they all have the same saturation and value. Pastel elements in an image otherwise dominated by dark, saturated colors could be perceived as a group.
Shape contrast
Contrasting shapes are complicated because you can describe a shape in many ways. Geometric shapes contrast with organic shapes, but two geometric shapes can contrast if one is angular but the other is not. Other common cases of shape contrast include:
Curvilinear or rectilinear
Planar or linear
Mechanical or calligraphic
Symmetrical or asymmetrical
Simple or complex
Abstract or representational
Undistorted or distorted
Size contrast
Contrast of size is straightforward. That is, size contrasts such as big or small forms and long and short lines are familiar concepts and usually easily recognized.
An anomaly is a kind of contrast: the irregular introduced into a regular pattern. If a pattern of any kind is maintained and then broken, an anomaly is created. In other words, there is contrast between anomaly and regularity because regularity is the observation of, and anomaly is the departure from, a certain kind of discipline or pattern. The element might be similar in many aspects to other elements, but an anomaly in one aspect gives it emphasis. Two examples are a set of elements that are all green with one yellow element or a set of rectangle elements with one circle.
In design, use an anomaly only when necessary. It must have a definite purpose, which can be one of the following:
To attract attention
To relieve monotony
To transform or break up regularity
Visual priority refers to the priority of elements, or what elements on the screen appear most important to the user. Because of their visual nature, some elements appear more important than others. The following guidelines ensure that what users perceive as most important is actually what is most important:
Determine what information is important.
User interviews and task analysis enable you to determine what information is important to users, the feedback they need, and the elements they look for.
Determine the best combination of the visual variables to communicate important information.
Visual priority changes as the user interacts with the system and moves from task to task. When an element becomes important to a task, it should become more noticeable than when it is not needed.
You can achieve visual priority with the visual variables described in “Visual Variables”. You can use visual variables alone or together. Table 9-2 shows some of the ways visual variables convey priority:
Table 9-2. Visual Variable Priorities
| Visual Variable | Priority |
|---|---|
| Color | If the background layer of less important elements is composed of neutral, low-contrast colors, adding saturation and contrast to the color of an element elevates it. |
| Shape | In an interface that is full of rectangles, changing the shape or orientation of an element makes it more noticeable and, therefore, more visually important. Also, adding animation to an interface element elevates it to the highest visual priority. |
| Size | The amount of space an element, or many elements of a type of element, occupies can be a size variable. When one type of element occupies more space than others, that type becomes the dominant element type. |
| Contrast | When one element is smaller or different from other elements, it is not necessarily de-emphasized. It can be an anomaly and therefore more apparent. For example, if you have a composition made up of large elements of white, black, and grey, and you incorporate one small dot of red, the eye is attracted to the small red dot because it is an anomaly of both size and color. |
Though much of the interface image for an application is inherited from the operating environment, you can custom design a significant amount of the visual representations. The major visual design tasks include the design of static elements such as window contents, icons, and new controls as well as interactive elements such as visible cues and transitions. For more information about designing these elements, see Chapter 10, “Application Development Principles”.