Much of what we have already said about good form design is transferable to display design and the design of Web sites and Web pages. Once again, the user must remain foremost in the analyst’s thoughts during the design of displays.
There are differences, however, and systems analysts should strive to realize the unique qualities of displays rather than to adopt blindly the conventions of paper forms. One big difference is the constant presence of a cursor on the display, which orients the user to the current data entry position. As data are entered onscreen, the cursor moves one character ahead, pointing the way.
Another major difference among electronic, Web, and static forms is that designers can include context-sensitive user help in any electronic fill-in form. This practice can reduce the need for instructions being shown for each line, thus reducing the clutter of the form and cutting down on calls to Technical Support. Using a Web-based approach also permits the designer to take advantage of hyperlinks, thus ensuring that the forms are filled out correctly by providing users with hyperlinked examples of correctly completed forms.
In this section, we present guidelines for effective display design. They are presented in order to aid the attainment of the overall input design goals of effectiveness, accuracy, ease of use, simplicity, consistency, and attractiveness.
The four guidelines for display design are important but not exhaustive. As noted in the previous chapter “Designing Effective Output“, they include the following:
- Keep the display simple.
- Keep the display presentation consistent.
- Facilitate user movement among display screens and pages.
- Create an attractive and pleasing display.
In the next subsections, we develop each of these guidelines, and we present many design techniques for observing the four guidelines
Keeping the Display Simple
The first guideline for good display design is to keep the display simple. The display should show only that which is necessary for the particular action being undertaken. For the occasional user, 50 percent of the display area should contain useful information.
THREE SCREEN SECTIONS. Display output should be divided into three sections. The top of the screen features a “heading” section. The heading contains titles of software and open files, pull-down menus, and icons that do certain tasks.
The middle section is called the “body” of the display. The body can be used for data entry and is organized from left to right and top to bottom, because people in Western cultures move their eyes on a page in this way. Captions and instructions should be supplied in this section to help the user enter the pertinent data in the right place. Context-sensitive help can also be made available by having the user click the right mouse button in the body section of the display.
The third section of the display is the “comments and instructions” section. This section may display a short menu of commands that remind the user of basics such as how to change pages or functions, save the file, or terminate entry. Inclusion of such basics can make inexperienced users feel infinitely more secure about their ability to complete their task.
Other ways to keep the display simple is to use context-sensitive help, roll-over buttons that reveal more information, and other pop-up windows. Users can minimize or maximize the size of windows as needed. In this way, users start with a simple, well-designed display that they can customize and control through the use of multiple windows. Hyperlinks on a Web-based fill-in form serve a similar purpose.
Keeping the Display Consistent
The second guideline for good display design is to keep the display consistent. If users are working from paper forms, displays should follow what is shown on paper. Displays can be kept consistent by locating information in the same area each time a new display is accessed. Also, information that logically belongs together should be consistently grouped together: Name and address go together, not name and zip code. Although the display should have a natural movement from one region to another, information should not overlap from one group to another. You would not want name and address in one area and zip code in another.
Facilitating Movement
The third guideline for good display design is to make it easy to move from one page to another. The “three-clicks” rule says that users should be able to get to the pages they need within three mouse or keyboard clicks. Web-based forms facilitate movement with the use of hyperlinks to other relevant Web pages. Another common method for movement is to have users feel as if they are physically moving to a new page. This illusion of physical movement among screens can be obtained by scrolling using arrows, context-sensitive pop-up windows, or onscreen dialog.
Designing an Attractive and Pleasing Display
The fourth guideline for good display design is to create an attractive display for the user. If users find displays appealing, they are likely to be more productive, need less supervision, and make fewer errors. Displays should draw users into them and hold their attention. This goal is accomplished with the use of plenty of open area surrounding data entry fields so that the display achieves an uncluttered appearance. You would never crowd a form; similarly, you should never crowd a display. You are far better off using multiple windows or hyperlinks than jamming everything onto one page.
Use logical flows in the plan to your display pages. Organize material to take advantage of the way people conceptualize their work so that they can easily find their way around. With the advent of GUIs, it is possible to make input displays very attractive. By using color or shaded boxes and creating three-dimensional boxes and arrows, you can make forms user-friendly and fun to use. When contemplating the use of different font styles and sizes, ask yourself if they truly assist the user in understanding and approving of the display. If they draw undue attention to the art of display design or if they serve as a distraction, leave them out. Be aware that not all Web pages are viewed identically by different browsers. Test your prototype forms with a variety of combinations to see if users declare preferences for combinations or whether they are distressing to the majority of users. For Web fonts use Verdana or Arial.
Using Icons in Display Design
Icons are pictorial, onscreen representations symbolizing computer actions that users may select using a mouse, keyboard, lightpen, touch screen, or joystick. Icons serve functions similar to those of words and may replace them in many menus, because their meaning is more quickly grasped than words. Mobile devices such as Apple’s iPhone and iPod have popularized the use of icons on touch screens and made this a familiar interface for many business and other users. There are some guidelines for the design of effective icons. Shapes should be readily recognizable so that the user is not required to master a new vocabulary. Numerous icons are already known to most users. Use of standard icons can quickly tap into this reservoir of common meaning. A user may point to a file cabinet, “pull out” a file folder icon, “grab” a piece of paper icon, and “throw” it in the wastebasket icon. By employing standard icons, designers and users all save time.
Icons for a particular application should be limited to approximately 20 recognizable shapes, so that icon vocabulary is not overwhelming and so that a worthwhile coding scheme can still be realized. Use icons consistently throughout applications where they will appear together to ensure continuity and understandability. Generally, icons are worthwhile for users if they are meaningful.
