nElements may be grouped or associated together (or disassociated).Before designing a topic layout, you should analyze the information and decide what is the best method for presenting the information. To lay out screen elements effectively, you must understand the structure of the information. Screen design involves using visual properties such as space, position, and size to communicate structural relations.
There are three principal relations between information elements that you can convey by using visual organization:
nElements may be grouped or associated together (or disassociated).
For example, a caption associated with a specific picture.
nElements may be sequenced or ordered.
For example, a series of numbered steps.
nElements may be assigned a relative importance.
For example, a title in comparison with the rest of the topic.
To help you clarify these structural relationships when considering the layout of a Help topic, try the following exercise. Become a user, stand back from the screen, and ask questions such as:
nWhich items are of the same kind?
nWhich items are functionally related?
nWhich comparisons are easy to make? Which are harder?
nAre there items that can be linked together?
nIn what order should the various elements be presented?
nDoes the order agree with the information presented?
nWhich are the most important items?
nWhat information is least dominant? Most dominant?
nIs there a hierarchy of importance?
nWhat information stands out most clearly?
nDo the important structures come across clearly?
nCan I tell a simple story that summarizes the information?
nHow could the display mislead users?
Make a list of the kinds of information on the screen, going from the visually most dominant to the least dominant. Now consider whether this order makes sense given the message being put across. If necessary, change the order or emphasis of elements in the topic. Then redesign the topic to convey this new structure.
One of the most important aspects of screen design is visual grouping. Visual grouping refers to factors that cause some parts of an image to be seen as related. In visual terms, users are more likely to see parts that are similar in some way as related to each other than parts that are dissimilar.
An example of how visual grouping is applied to topic design is in the use of white space. Generally you should include more white space around a group of related items rather than between each item. The white space surrounding the items will help clarify the group structure of the information.
Visual similarity includes these factors:
nSize
nType style or shape
nSpacing
nAlignment
nColor
nBrightness
In contrast, visual separation is based on a dissimilarity of these factors.
Determining the order of information in a topic depends on the message you want to convey. Usually, this order is a straightforward sequence from top to bottom, but it may involve more complex movements. In fact, you can influence how users read the information by the way you order items in your topic layout. Guiding a user’s eye to the most important information is one of the key objectives you have in screen design.
When first looking at a topic, users generally scan the whole layout to get an overall impression. After that, users tend to focus on elements that have emphasis. The following list summarizes these tendencies. Keep in mind that these are “tendencies” and not absolutes:
nUsers tend to scan to the left and upward.
nUsers tend to scan in a clockwise direction.
nUsers prefer horizontal scanning to vertical scanning.
nInstructions, cues, and important information should appear at crucial points in the order.
When deciding where to place information in the order, keep in mind that screen areas have this order of importance: left is more significant than right, top is more significant than bottom.
nTell the story visually.
Place items in the topic so that the information “tells the story visually.” But take care not to let primary elements appear in too many places, or the topic may begin to look chaotic and confuse users.
Very little information exists in which all the elements have exactly the same importance, and there is no visual hierarchy. More commonly, information has a definite hierarchy of importance, in which some elements receive more emphasis than others. This is especially true in instructional materials like Help.
The effectiveness of the various means of emphasis derives from their perceptual qualities. Visual emphasis relies to a large degree on the effects of contrast. If one item is larger than the rest, it stands out. But if all but one of the elements are large, then the single small element is the most prominent.
There are many ways to create emphasis; the important thing is to set up a consistent visual hierarchy in your Help topics by determining which elements to emphasize and to what degree. These principles can help you do that:
nVisually emphasize the most important items in a topic.
This will direct the attention of the user toward what matters most. For example, using a topic title in a larger type size and placing it at the top emphasizes it over the rest of the information in the topic.
nCapitalize on visual conventions and expectations.
Emphasis is influenced by what is usual. For example, because most Western people read from left to right and from top to bottom, information placed at the top left receives more emphasis than information at the bottom or right part of the Help window.
nMake an element different from the elements surrounding it.
The number of elements and each element’s position in the topic affect how it is perceived in the visual hierarchy and what you must do to give it more emphasis. For example, a word buried in the middle of the topic requires more emphasis to bring it out than a heading at the beginning of a paragraph.
nBe careful not to overuse emphasis.
Too much emphasis—or too many words emphasized in too many ways—can create the opposite effect from the one intended. Instead of getting the message, the user may simply ignore it. Also, if you try to emphasize too much, you may make everything roughly equivalent and lose all emphasis.
There are a number of techniques for making visual distinctions between elements and emphasizing those of particular importance:
nA different typeface or type style, such as bold or italic, is the most common way to highlight words and phrases.
nType size can be used to distinguish and emphasize headings—the larger the size, the greater the importance.
nCapitals can be used for special words and computer terminology, such as filenames, but should not be used for body text.
nSpace can be used to separate items—the greater the distance between items, the greater the distinction.
nIndenting can be used to indicate subordinate information.
nSubheadings not only separate items but also summarize their content.
nColor is a very powerful means for distinguishing and highlighting elements; however, it should be used with care.
nReverse video is very distinctive. However, because it is used in most applications to indicate items that have been selected, it may be confusing if it has a different meaning in the Help file.
Certain forms of emphasis are especially powerful—color, for example—and should, therefore, be used with particular care. Try to establish a hierarchy of importance using these techniques, and then employ that hierarchy consistently throughout the Help file.
Consistency is fundamental to effective screen design. It contributes to usability in a number of ways—it facilitates learning, lessens the number of errors users make, and helps users develop an accurate model of the system. Of course, it is rarely possible to be completely consistent within a Help file, so you will often have to determine your priorities and make tradeoffs accordingly. For example, you should not be rigidly consistent if the decision results in an awkward design, when an inconsistent design would achieve the goal more efficiently.
The following guidelines can help you with consistency:
nIf an element is functionally different, make it look different.
For example, because they clearly have different functions in Help, jump and pop-up hot spots are differentiated by the type of underlining that they display in the hot-spot text.
nUse topic elements consistently throughout the Help file.
The learning process is facilitated if the user can easily grasp the relationships between elements within the system. This can only occur if you use consistent terminology, provide consistent behavior for controls, and so on. For example, if users are to choose a blue circle that indicates that a tip is available, consistent use would mean that the blue circle always provides a tip and that no other cue would provide the same tip.
nWhen consistency isn’t possible within the entire system, try to be consistent within a smaller domain.
For example, if a certain information category, such as step-by-step procedures, requires you to vary from some principle established elsewhere in the Help file, at least be sure to use the feature consistently within all the topics of that category.
nTry to be consistent with features and expectations derived from other related systems and applications.
If there are large inconsistencies between related systems, the user’s ability to generalize from one to another is reduced. It may also cause them to make more errors because they may assume that actions taken in one application have the same effect in other, related applications. Therefore, if your Help file deviates from Windows or Windows-based applications, users may find it particularly difficult to use and learn. For example, users expect to be able to click grey, 3D buttons, so don’t include buttons in your Help file unless they have a similar function.
nIf a topic or action is used inconsistently, provide some instruction or warning to users.
For example, if screen shots of the interface are not normally hot, and you include one that is, tell users that this particular graphic includes hot spots.
In any image, some parts tend to be seen in the foreground and some in the background. In a graphical user interface, active and inactive windows create the illusion of foreground and background. For that reason, you can use windows to separate different kinds of information, especially where you want to create content that is somewhat independent from the main Help window.
When placing information in Help windows, use the following guidelines:
nPlace subordinate information in pop-up windows.
Because pop-up windows are displayed temporarily (until the user takes any action), they create less separation between the information in them and in the main Help window. That makes them ideal for displaying subordinate and supplementary information.
nPlace independent information in secondary windows.
Secondary windows share many of the same characteristics as the main Help window. For one thing, they can be displayed or dismissed independently of the main window. That makes them ideal for holding information that is tangential to the content in the main Help window. However, because secondary windows can exist with or without the main window, they should only be used when the information displayed in them is truly independent from the content in the main Help window.
nIf you use secondary windows, consider carefully the size and relationship they have to the main Help window.
Users will likely have other windows open besides Help windows. Too many windows on the screen at one time can confuse and disorient users. There is considerable usability data indicating that user performance deteriorates as the screen image becomes more complex. Users have a harder time finding the information they want, and they make more errors. In general, try to limit the amount of space that additional secondary windows occupy to less than 25 percent of the active screen area.
White space is the designer’s canvas. It is the area in which you display your message. It also creates the information boundaries that users rely on to recognize the message. White space includes both negative and positive values—negative space is the background, or the part we seem not to see; positive space is the foreground space that lies at the center of attention and dominates.
In online designs, space is two-dimensional, even though many elements simulate a three-dimensional space. Two dimensions have only length and width, but you can use certain techniques to create the impression of depth and volume.
Learning how to use white space is one of the most important aspects of screen design. The key to using white space depends on its ability to group and separate elements into recognizable symbols and images. An easy way to understand this principle is to consider spacing in type. Normal spacing in type allows our eye to recognize the symbols (letters) that form understandable words, as in this example:
GO OUT TONIGHT
If we remove the normal white space between letters, we cannot easily understand the symbols as a message:
GOOUTTONIGHT
In the same way, the proper use of white space in your topic layout will help users recognize and understand the message. To create a good lay out, make sure that all topic elements—topic title, text paragraphs, pictures, white space—create understandable images. A topic will look crowded and cluttered if too many elements occupy the space and prevent closure; it will look open if the space is balanced and generous.
Margins are the blank areas surrounding the information in a topic. In normal screen design, you have four margins to consider: top, bottom, left, and right. There isn’t much you can do about the right and bottom margins in Help, so the left and top margins should be your primary concern:
nLeft margin—with overlapping windows on the screen, text from one window can become confused with information in another window because there is only a thin dividing line (window border) separating the two. This can make the screen look unnecessarily cramped and cluttered. An ample left margin helps separate Help text and graphics from information in other windows.
nTop margin—the Help window has three horizontal layers above the information that also attract the user’s attention. To prevent Help menus and controls from overwhelming the display and distracting users, create a generous top margin.
nBalance—try to achieve a balance between margins. In other words, if you increase the left margin, increase the top margin proportionately. That way the information won’t appear crowded into one area of the screen.
nConsistency—when creating custom left and top margins, employ them consistently throughout the Help file. Otherwise, topic elements will appear to “jump around” on the screen as users move from one topic to the next.