CHAPTER 8 User Interface Design
Chapter 8 is the first of three chapters in the systems design phase of the SDLC. This chapter explains how to design an effective user interface, and how to handle data security and control issues. The chapter stresses the importance of user feedback and involvement in all design decisions.
OBJECTIVES
When you finish this chapter, you will be able to :
· Explain the concept of user interface design and human-computer interaction, including basic principles of user-centered design
· Explain how experienced interface designers perform their tasks
· Describe rules for successful interface design
· Discuss input and output technology issues
· Design effective source documents and forms
· Explain printed output guidelines
· Describe output and input controls and security
· Explain modular design and prototyping techniques
INTRODUCTION
User interface design is the first task in the systems design phase of the SDLC. Designing the interface is extremely important because everyone wants a system that is easy to learn and use.
After discussing the user interface, human-computer interaction, and interface design rules, the chapter describes output, data security and control issues, prototyping, and the next steps in the systems design process.
PREVIEW CASE: Mountain View College Bookstore
Background: Wendy Lee, manager of college services at Mountain View College, wants a new information system that will improve efficiency and customer service at the three college bookstores.
In this part of the case, Tina Allen (systems analyst) and David Conroe (student intern) are talking about user interface design issues.
Participants:
Tina and David
Location:
Mountain View College Cafeteria, Monday afternoon, November 25, 2013
Project status:
Tina and David have examined development strategies for the new bookstore system. After performing cost-benefit analysis, they recommended in-house development of the new bookstore system. Now they are ready to begin the systems design phase by working on user interface design for the new system.
Discussion topics:
User interface design concepts and principles
Tina:
Hi, David. Ready to start work on user interface design?
David:
Sure. Will we start with output because it’s important to users?
Tina:
Output is very important, but the most important issue for users is the interface itself. For example, is it easy to learn? Is it easy to work with? We’ll try to design everything — output, input, and all the other elements — from a user’s point of view.
David:
How do we do that?
Tina:
Well, many sources of information about effective design concepts and principles are available. We’ll study those, and then ask our own users for their input and suggestions.
David:
What about input and data entry?
Tina:
Good question, You’ve heard the old saying, “garbage in, garbage out.” User interface principles apply to user input generally, but repetitive data entry deserves special attention. We need to create screen forms that are logical and easy to understand, as well as input masks and data entry validation rules. We also need to review any source documents that will be filled in manually.
David:
Anything else?
Tina:
Yes. The bookstore system probably will have some confidential data regarding budgets and markup policies, so we’ll have to consider security and control issues. If you’re ready, here’s a task list to get us started:
FIGURE 8-1 Typical user interface design tasks.
© Cengage Learning 2014
SYSTEMS DESIGN PHASE OVERVIEW
Because the components of a system are interdependent, the design phase is not a series of clearly defined steps. Although you might start in one area, you could find yourself working with several different elements at the same time. For example, a decision to change a report format might require changes in data design or input screens. Your design checklist will include the user interface, input and output procedures, data design, and system architecture. At the end of this phase, you will prepare a systems design specification and deliver a presentation to management.
The goal of systems design is to build a system that is effective, reliable, and maintainable.
· A system is reliable if it handles input errors, processing errors, hardware failures, or human mistakes. A good design will anticipate errors, detect them as early as possible, make it easy to correct them, and prevent them from damaging the system itself.
· A system is maintainable if it is flexible, scalable, and easily modified. Changes might be needed to correct problems, adapt to user requirements, or take advantage of new technology.
· A system is effective if it supports business requirements and meets user needs.
Although each project is different, the following basic principles usually apply.
Will It Succeed?
A system might have advanced technology and powerful features, but the real test is whether users like it and feel that it meets their needs. Here are some suggestions for successful design:
· Think like a user. Carefully examine any point where users provide input or receive output. The user interface must be easy to learn. Input processes should be easy to follow, intuitive, and forgiving of errors. Predesigned output should be attractive and easy to understand, with an appropriate level of detail.
· Anticipate future needs. Consider a parts inventory database that contains a one-character field for category, such as electrical, mechanical, or hydraulic. The design works well, but what if the company decides to break these overall groups down into more specific segments? A better design would anticipate possible expansion to two or more characters. For example, in 1999, there was widespread concern about what was called the Y2K issue because many older programs used only two characters to store the year, and might not recognize the start of a new century.
· Provide flexibility. Suppose that a user wants a screen display of all customer balances that exceed $5,000 in an accounts receivable system. How should you design that feature? The program could be coded to check customer balances against a fixed value of 5000, which is a simple solution for both the programmer and the user because no extra keystrokes are required to produce the display. However, that approach is inflexible. A better approach would be to let the user enter the amount. Or you could start with a default value that displays automatically. Users can press ENTER to accept the value, or type in another value. Often the best design strategy is to offer several alternatives, so users can decide what will work best for them.
· Manage data effectively. In addition to its effect on users, data management impacts company efficiency, productivity, and security. To reduce input errors, the system should enter and verify data as soon as possible, and each data item should have a specific type, such as alphabetic, numeric, or alphanumeric, and a range of acceptable values.
It is important to collect input data as close to its source as possible. For instance, using barcode scanners rather than manual forms on a warehouse freight dock, or having salespeople use tablets to record orders rather than filling in source documents. The easiest, most accurate, and least expensive data input strategy is automated data capture, such as the RFID scanner shown in Figure 8-2 .
In an efficient design, data is entered only once. For example, if input data for a payroll system also is needed for a human resources system, you can either design an interface to transfer data automatically, or create a central data storage area that both systems can access. In Chapter 9 , you will learn about normalization, which is a set of rules that can help you avoid data design problems. A secure system also includes audit trails that can log every instance of data entry and changes. For example, the system should record when a customer’s credit limit was set, by whom, and any other information necessary to construct the history of a transaction.
FIGURE 8-2 Automated data entry methods, such as the RFID scanner shown above, reduce input errors and improve employee productivity.
Courtesy of Intermec Technologies
CHAPTER OVERVIEW
Traditionally, a chapter on user interface design started with a discussion of output because output is what users touched, viewed, and needed to do their jobs. Today, the entire focus has shifted, for several important reasons:
· Users can design their own output. System designers are more aware of user needs and desires. A system can maintain data integrity and still allow users to view, sort, filter, and examine data in any way that helps them do their jobs. Years ago, the MIS department made those choices and users had little or no say in the matter. Today, successful applications are designed quite differently — the system developer identifies user needs, and then creates a design that will satisfy users and meet corporate requirements.
· Centralized IT departments no longer produce reams of printed reports. Those reports, called greenbar reports because of their appearance, often gathered dust while sitting on top of file cabinets. While a few examples might persist, the overwhelming trend has been to customer-designed output. The customer might be an individual user, or a community of users, such as a department. As Chapter 4 pointed out, the IT team must understand user requirements before creating a solution. That also was the message in the Dilbert cartoon on page 129 .
· The user interface itself has evolved into a two-way channel, with powerful output capability, and most user information needs can be met with screen-generated data, which a user can print, view, or save. Well into the 1980s and beyond, a user interface was a blank character-based screen, which might or might not offer menu choices. If a user entered a command improperly, the system responded with an error message, which frustrated users and stifled productivity. Many hardware-centric vendors did not understand the importance of the user interface and its implications.
Apple was a pioneer in user interface development, introducing the graphical user interface (GUI) , complete with mouse and screen icons, in the early 1980s. At that point, not many companies were ready for this concept. When software giant Microsoft finally jumped on the GUI bandwagon with its Windows® operating system, the corporate doors swung open, and everyone from managers on down said “How did we ever do without this?”
The user interface will continue to evolve, and it is difficult to predict the future. Advanced technology will support the evolution, but the real driving force will be user empowerment, which results in employee satisfaction, increased productivity, and bottom-line savings for a company.
WHAT IS A USER INTERFACE?
A user interface (UI) describes how users interact with a computer system, and consists of all the hardware, software, screens, menus, functions, output, and features that affect two-way communications between the user and the computer. The UI is the key to usability , which includes user satisfaction, support for business functions, and system effectiveness.
Figure 8-3 suggests an interesting viewpoint that interface designers should keep in mind: Industry leader IBM believes that the best interfaces are the ones that users do not even notice — they make sense because they do what users expect them to do.
When developing older systems, analysts typically designed all the printed and screen output first, then worked on the inputs necessary to produce the results. Often, the user interface mainly consisted of process-control screens that allowed the user to send commands to the system. That approach worked well with traditional systems that simply transformed input data into structured output.
FIGURE 8-3 According to IBM, the best user interfaces are the ones you don’t really notice.
© IBM Corporation 1994, 2012
As information management evolved from centralized data processing to dynamic, enterprise-wide systems, the primary focus also shifted — from the IT department to the users themselves. The IT group became a supplier of information technology, rather than a supplier of information. Today, the main focus is on users within and outside the company, how they communicate with the information system, and how the system supports the firm’s business operations.
In a user-centered system, the distinction blurs between input, output, and the interface itself. Most users work with a varied mix of input, screen output, and data queries as they perform their day-to-day job functions. Because all those tasks require interaction with the computer system, the user interface is a vital element in the systems design phase.
User interface design requires an understanding of human-computer interaction and user-centered design principles, which are discussed in the next section.
Human-Computer Interaction
A user interface is based on basic principles of human-computer interaction. Human-computer interaction (HCI) describes the relationship between computers and people who use them to perform their jobs, like the worker shown in Figure 8-4 . HCI concepts apply to everything from smartphones to global networks. In its broadest sense, a user interface includes all the communications and instructions necessary to enter input to the system and to obtain output in the form of screen displays or printed reports.
Early user interfaces involved users typing complex commands on a keyboard, which displayed as green text on a black screen. Then came the graphical user interface (GUI), which was a huge improvement because it used icons, graphical objects, and pointing devices. Today, designers strive to translate user behavior, needs, and desires into an interface that users don’t really notice. As IBM points out in Figure 8-3 , the best user interfaces are “almost transparent— you can see right though the interface to your own work.” In other words, a transparent interface does not distract the user and calls no attention to itself.
As a systems analyst, you will design user interfaces for in-house-developed software and customize interfaces for various commercial packages and user productivity applications. Your main objective is to create a user-friendly design that is easy to learn and use.
Industry leaders Microsoft and IBM both devote considerable resources to user interface research. Figure 8-5 on the next page describes Microsoft’s Redmond labs, where engineers observe volunteers who participate in software usability studies. Notice that the site invites visitors to watch an interesting video about Microsoft User Research.
Because HCI has a major impact on user productivity, it gets lots of attention — especially where multi-million dollar issues are concerned. For example, consider the article by Elizabeth Gardner in Health Data Management, which is shown in Figure 8-6 on the next page. The title tells the story, which involves government incentives for medical providers who use the new electronic health records (EHRs) . However, many physicians feel that EHR software is difficult to use and does not meet their needs.
FIGURE 8-4 HCI is essential to employee productivity, whether the work is done in a traditional office setting, or on a construction site like the one shown here.
© Goodluz/Shutterstock.com
FIGURE 8-5 Microsoft engineers observe volunteers who participate in usability studies. Notice the invitation to watch a video about Microsoft User Research.
Screenshots used with permission from Microsoft.
FIGURE 8-6 Software usability has a major impact on the medical profession, and not everyone is happy about it.
© 2012 Health Data Management and SourceMedia, Inc.
In her article, Ms. Gardner points out that physicians often multi task, answering a question about one patient while writing a prescription for another, and EHR software was not designed around that type of workflow.
The article also mentions Dr. Scott Finley, who consults on usability issues for the U.S. Department of Veterans’ Affairs and other agencies. Dr. Finley says that EHRs were designed to do a good job of gathering structured analytical data, but that approach does not promote usability. Dr. Finley says, “The data capture process needs to be judged on its own merits. It’s easier to make it hard than to make it easy.” Perhaps all systems analysts and UI designers should reflect on the implications of his comment.
CASE IN POINT 8.1: CASUAL OBSERVER SOFTWARE
Casual Observer Software’s main product is a program that monitors and analyzes user keystrokes and mouse clicks to learn more about the way employees use their computer systems. The problem is that some users feel this is an unwarranted intrusion into their privacy, and they prefer not to be observed. Some even fear that the data would be used for other reasons, including performance appraisal. You are a consultant who has been hired by a client firm that is trying to decide whether or not to use this software.
Before you advise the client, go back and review the Microsoft usability lab shown in Figure 8-5 , where the users being studied in the Redmond labs were willing participants. Then, refer to Chapter 4 , Requirements Modeling, page 155 , and consider the Hawthorne Effect, which suggests that employees might behave differently when they know they are being observed. Finally, think about the ethical issues that might be involved in this situation. What will you advise your client, and why?
SEVEN HABITS OF SUCCESSFUL INTERFACE DESIGNERS
Although IT professionals have different views about interface design, most would agree that good design depends on seven basic principles, which are described in the following sections.
Understand the Business
The interface designer must understand the underlying business functions and how the system supports individual, departmental, and enterprise goals. The overall objective is to design an interface that helps users to perform their jobs. A good starting point might be to analyze a functional decomposition diagram (FDD). As you learned in Chapter 4 , an FDD is a graphical representation of business functions that starts with major functions, and then breaks them down into several levels of detail. An FDD can provide a checklist of user tasks that you must include in the interface design.
Maximize Graphical Effectiveness
Studies show that people learn better visually. The immense popularity of Apple Mac OS and Microsoft Windows is largely the result of their graphical user interfaces that are easy to learn and use. A well-designed interface can help users learn a new system rapidly and be more productive. Also, in a graphical environment, a user can display and work with multiple windows on a single screen and transfer data between programs. If the interface supports data entry, it must follow the guidelines for data entry screen design that are discussed later in this chapter.
Think Like a User
A systems analyst should understand user experience, knowledge, and skill levels. If a wide range of capability exists, the interface should be flexible enough to accommodate novices as well as experienced users.
To develop a user-centered interface, the designer must learn to think like a user and see the system through a user’s eyes. The interface should use terms and metaphors that are familiar to users. Users are likely to have real-world experience with many other machines and devices that provide feedback, such as automobiles, ATMs, and microwave ovens. Based on that experience, users will expect useful, understandable feedback from a computer system.
Use Models and Prototypes
From a user’s viewpoint, the interface is the most critical part of the system design because it is where he or she interacts with the system — perhaps for many hours each day. It is essential to construct models and prototypes for user approval. An interface designer should obtain as much feedback as possible, as early as possible. You can present initial screen designs to users in the form of a storyboard , which is a sketch that shows the general screen layout and design. The storyboard can be created with software or drawn freehand. Users must test all aspects of the interface design and provide feedback to the designers. User input can be obtained in interviews, via questionnaires, and by observation. Interface designers also can obtain data, called usability metrics , by using software that can record and measure user interaction with the system.
TOOLKIT TIME
The Communication Tools in Part A of the Systems Analyst’s Toolkit can help you communicate effectively with users. To learn more about these tools, turn to Part A of the four-part Toolkit that follows Chapter 12 .
Focus on Usability
The user interface should include all tasks, commands, and communications between users and the information system. The opening screen should show the main options ( Figure 8-7 is an illustration). Each screen option leads to another screen, with more options. The objective is to offer a reasonable number of choices that a user easily can comprehend. Too many options on one screen can confuse a user — but too few options increase the number of submenu levels and complicate the navigation process. Often, an effective strategy is to present the most common choice as a default but allow the user to select other options.
Invite Feedback
Even after the system is operational, it is important to monitor system usage and solicit user suggestions. You can determine if system features are being used as intended by observing and surveying users. Sometimes, full-scale operations highlight problems that were not apparent when the prototype was tested. Based on user feedback, Help screens might need revision and design changes to allow the system to reach its full potential.
FIGURE 8-7 The opening screen displays the main options for a student registration system. A user can click an option to see lower-level actions and menu choices.
© Cengage Learning 2014
Document Everything
You should document all screen designs for later use by programmers. If you are using a CASE tool or screen generator, number the screen designs and save them in a hierarchy similar to a menu tree. User-approved sketches and storyboards also can be used to document the user interface.
By applying basic user-centered design principles, a systems analyst can plan, design, and deliver a successful user interface.
A HANDBOOK FOR USER INTERFACE DESIGN
What follows is a set of suggestions for user interface design, based on the author’s experience and observation. There is some overlap because many of the main rules share common elements.
Although there is no standard approach to interface design, these rules will get you started. Perhaps the most important rule is that you don’t have to follow all of these recommendations — the best interface is the one that works best for your users.
RULE 1: Create an Interface That Is Easy to Learn and Use
1.1 Focus on system design objectives, rather than calling attention to the interface.
1.2 Create a design that is easy to understand and remember. Maintain a common design in all modules of the interface, including the use of color, screen placements, fonts, and the overall “look and feel.”
1.3 Provide commands, actions, and system responses that are consistent and predictable.
1.4 Allow users to correct errors easily.
1.5 Clearly label all controls, buttons, and icons.
1.6 Select familiar images that users can understand, and provide on-screen instructions that are logical, concise, and clear. For example, the top screen in Figure 8-8 shows four control buttons, but none of them has an obvious meaning. In the bottom screen, the first five messages provide little or no information. The last message is the only one that is easy to understand.
1.7 Show all commands in a list of menu items, but dim any commands that are not available to the user.
1.8 Make it easy to navigate or return to any level in the menu structure.
RULE 2: Enhance User Productivity
The interface is where a user interacts with the system, so it can have a dramatic effect on productivity. If the interface empowers a user and enables him or her to handle more complex tasks, the user becomes more productive. Conversely, if the interface is difficult to work with, productivity declines.
FIGURE 8-8 In the example at the top, the icons do not have a clear message. In the Help text examples at the bottom, only one message is understandable. The others would frustrate and annoy most users.
© Cengage Learning 2014
2.1 Organize tasks, commands, and functions in groups that resemble actual business operations. You should group functions and submenu items in a multilevel menu hierarchy, or tree, that is logical and reflects how users typically perform the tasks. Figure 8-9 shows an example of a menu hierarchy for an order tracking system.
2.2 Create alphabetical menu lists or place the selections used frequently at the top of the menu list. No universally accepted approach to menu item placement exists. The best strategy is to design a prototype and obtain feedback from users. Some applications even allow menus to show recently used commands first. Some users like that feature, but others find it distracting. The best approach is to offer a choice, and let users decide.
2.3 Provide shortcuts for experienced users so they can avoid multiple menu levels. You can create shortcuts using hot keys that allow a user to press the Alt key + the underlined letter of a command.
2.4 Use default values if the majority of values in a field are the same. For example, if 90% of the firm’s customers live in Albuquerque, use Albuquerque as the default value in the City field.
2.5 Use a duplicate value function that enables users to insert the value from the same field in the previous record, but allow users to turn this feature on or off as they prefer.
2.6 Provide a fast-find feature that displays a list of possible values as soon as users enter the first few letters.
2.7 If available, consider a natural language feature that allows users to type commands or requests in normal text phrases. For example, many applications allow users to request Help by typing a question into a dialog box. The software then uses natural language technology to retrieve a list of topics that match the request. Natural language technology is used in speech recognition systems, text-to-speech synthesizers, automated voice response systems, Web search engines, text editors, and language instruction materials.
RULE 3: Provide Users with Help and Feedback
This is one of the most important rules because it has a high impact on users. Never allow Help to slow a user down. Instead, make Help easy to find, but not around when you users don’t need it.
FIGURE 8-9 This menu hierarchy shows tasks, commands, and functions organized into logical groups and sequences. The structure resembles a functional decomposition diagram (FDD), which is a model of business functions and processes.
© Cengage Learning 2014
FIGURE 8-10 The main Help screen for a student registration system.
© Cengage Learning 2014
FIGURE 8-11 A context-sensitive dialog box displays if a user requests help while entering data into the ADVISOR ASSIGNED field. Clicking the Close button returns the user to the task.
© Cengage Learning 2014
3.1 Ensure that help is always available on demand. Help screens should provide information about menu choices, procedures, shortcuts, and errors.
3.2 Provide user-selected help and context-sensitive help. User-selected help displays information when the user requests it. By making appropriate choices through the menus and submenus, the user eventually reaches a screen with the desired information. Figure 8-10 shows the main Help screen for the student registration system. Context-sensitive help offers assistance for the task in progress. Figure 8-11 shows a Help dialog box that is displayed if a user requests help while entering data into the ADVISOR ASSIGNED field. Clicking the Close button returns the user to the current task.
3.3 Provide a direct route for users to return to the point from where help was requested. Title every help screen to identify the topic, and keep help text simple and concise. Insert blank lines between paragraphs to make Help easier to read, and provide examples where appropriate.
3.4 Include contact information, such as a telephone extension or e-mail address if a department or help desk is responsible for assisting users.
3.5 Require user confirmation before data deletion (Are you sure?) and provide a method of recovering data that is deleted inadvertently. Build in safeguards that prevent critical data from being changed or erased.
3.6 Provide an Undo key or a menu choice that allows the user to eradicate the results of the most recent command or action.
3.7 When a user-entered command contains an error, highlight the erroneous part and allow the user to make the correction without retyping the entire command.
3.8 Use hypertext links to assist users as they navigate help topics.
3.9 Display messages at a logical place on the screen, and be consistent.
3.10 Alert users to lengthy processing times or delays. Give users an on-screen progress report, especially if the delay is lengthy.
3.11 Allow messages to remain on the screen long enough for users to read them. In some cases, the screen should display messages until the user takes some action.
3.12 Let the user know whether the task or operation was successful or not. For example, use messages such as Update completed, All transactions have been posted, or The ID Number was not found.
3.13 Provide a text explanation if you use an icon or image on a control button. This helps the user to identify the control button when moving the mouse pointer over the icon or image.
3.14 Use messages that are specific, understandable, and professional. Avoid messages that are cute, cryptic, or vague, such as: ERROR — You have entered an unacceptable value, or Error DE-4-16. Better examples are:
• Enter a number from 1 (low) to 5 (high)
• Customer number must be numeric
• Please re-enter a numeric value
• Call the Accounting Department, Ext. 239 for assistance
RULE 4: Create an Attractive Layout and Design
This is a subjective area because reasonable people can differ on what is attractive. You should consider color, layout, and ease of use. You might create some screen mock-ups and menu trees and try them out on users to get their input. If in doubt, err on the side of doing a bit less. Although you might love blinking messages, they might not be the best choice for your interface design. Also try to avoid too many fonts, styles, and sizes, which can be distracting. Each separate style should communicate something — a different level of detail, another topic, mandatory versus optional actions, and so on.
4.1 Use appropriate colors to highlight different areas of the screen; avoid gaudy and bright colors.
4.2 Use special effects sparingly. For example, animation and sound might be effective in some situations, but too many special effects can be distracting and annoying to a user, especially if he or she must view them repeatedly.
4.3 Use hyperlinks that allow users to navigate to related topics.
4.4 Group related objects and information. Visualize the screen the way a user will see it, and simulate the tasks that the user will perform.
4.5 Screen density is important. Keep screen displays uncluttered, with enough white space to create an attractive, readable design.
4.6 Display titles, messages, and instructions in a consistent manner and in the same general locations on all screens.
4.7 Use consistent terminology. For example, do not use the terms delete, cancel, and erase to indicate the same action. Similarly, the same sound always should signal the same event.
4.8 Ensure that commands always will have the same effect. For example, if the BACK control button returns a user to the prior screen, the BACK command always should perform that function throughout the application.
4.9 Ensure that similar mouse actions will produce the same results throughout the application. The results of pointing, clicking, and double-clicking should be consistent and predictable.
4.10 When the user enters data that completely fills the field, do not move automatically to the next field. Instead, require the user to confirm the entry by pressing the Enter key or Tab key at the end of every fill-in field.
4.11 Remember that users are accustomed to a pattern of red = stop, yellow = caution, and green = go. Stick to that pattern and use it when appropriate to reinforce on-screen instructions.
4.12 Provide a keystroke alternative for each menu command, with easy-to-remember letters, such as File, Exit, and Help.
4.13 Use familiar commands if possible, such as Cut, Copy, and Paste.
4.14 Provide a Windows look and feel in your interface design if users are familiar with Windows-based applications.
4.15 Avoid complex terms and technical jargon; instead, select terms that come from everyday business processes and the vocabulary of a typical user.
RULE 5: Enhance the Interface
A designer can include many features, such as menu bars, toolbars, dialog boxes, text boxes, toggle buttons, list boxes, scroll bars, drop-down list boxes, option buttons, check boxes, command buttons, and calendar controls, among others. Screen design requires a sense of aesthetics as well as technical skills. You should obtain user feedback early and often as the design process continues.
5.1 The opening screen is especially important because it introduces the application and allows users to view the primary options. The starting point can be a switchboard with well-placed command buttons that allow users to navigate the system. Figure 8-12 shows the switchboard and a data entry screen for a project management system. Notice the drop-down list box that allows users to enter a status code by clicking a selection.
FIGURE 8-12 An example of a switchboard and data entry screen for a project management system.
© Cengage Learning 2014
5.2 Use a command button to initiate an action such as printing a form or requesting help. For example, when a user clicks the Find Student command button in Figure 8-13 , a dialog box opens with instructions.
5.3 If you are using a software package, check to see if it allows you to create customized menu bars and toolbars. If so, consider these options.
5.4 Add a shortcut feature that lets a user select a menu command either by clicking the desired choice or by pressing the Alt key + the underlined letter. Some forms also use a toolbar that contains icons or buttons that represent shortcuts for executing common commands.
5.5 If variable input data is needed, provide a dialog box that explains what is required.
5.6 A toggle button makes it easy to show on or off status — clicking the toggle button switches to the other state.
5.7 Use list boxes that display the available choices. If the list does not fit in the box, a scroll bar allows the user to move through the available choices. Also, be sure to provide another way to enter data that does not align with a specific list choice.
5.8 Use an option button , or radio button , to control user choices. For example, if the user can select only one option, display a suitable message (Choose one item), but if there is no restriction, display a different message (Choose all that apply). Use a black dot to show selected options.
FIGURE 8-13 A data entry screen for the student registration system. This screen uses several design features that are described in the text. When a user clicks the Find Student command button, a dialog box is displayed with instructions.
© Cengage Learning 2014
5.9 If you use check boxes to select one or more choices from a group, show the choices with a checkmark or an X.
5.10 When dates must be entered, use a calendar control that allows the user to select a date that the system will use as a field value.
RULE 6: Focus on Data Entry Screens
Data entry is especially important because it is in the job description of so many users.
6.1 Whenever possible, use a data entry method called form filling , where a blank form that duplicates or resembles the source document is completed on the screen.
6.2 Restrict user access to screen locations where data is entered. For example, when the screen in Figure 8-14 appears, the system should position the insertion point in the first data entry location. After the operator enters a Customer ID, the insertion point should move automatically to the entry location for the next field (Item). A user should be able to position the insertion point only in places where data is entered on the form.
6.3 Provide a way to leave the data entry screen at any time without entering the current record. This feature is not available in the screen shown in Figure 8-14 , but is provided in the enhanced version of the same screen shown in Figure 8-15 on the next page. Notice that the new version has command buttons that provide flexibility and allow the user to perform various functions. For example, clicking the Cancel Order button cancels the current order and moves the insertion point back to the beginning of the form.
6.4 Provide a descriptive caption for every field, and show the user where to enter the data and the required or maximum field size. Typically, white boxes show the location and length of each field. Other methods used to indicate field locations are video highlighting, underscores, special symbols, or a combination of these features.
FIGURE 8-14 In this data screen for customer orders, the system generates an order number and logs the current date and time. The user enters a customer ID. If the entry is valid, the system displays the customer name so the user can verify it. The user then enters the item and quantity. Note that the description, price, extended price, total price, sales tax, and grand total are retrieved automatically or calculated by the system.
© Cengage Learning 2014
FIGURE 8-15 This is an enhanced version of the data entry screen shown in Figure 8-14 .The new version has command buttons that allow the user to perform various functions.
© Cengage Learning 2014
6.5 Provide a means for users to move among fields on the form in a standard order or in any order they choose. For example, when a user opens the form shown in Figure 8-15 , the insertion point automatically will be in the first field. After the user fills in each field and confirms the entry, the insertion point moves to the next field, in a predetermined order. In a graphical user interface (GUI), the user can override the standard field order and select field locations using the mouse or arrow keys.
6.6 Allow users to add, change, delete, and view records. Figure 8-15 helps users enter orders, find items, and find customers. After the user enters a customer code, the form displays current values for all appropriate fields. Then the operator can view the data, make changes, enter the order, or cancel the order. Messages such as: Apply these changes? (Y/N) or Delete this record? (Y/N) should require users to confirm the actions. Highlighting the letter N as a default response will avoid problems if the user presses the Enter key by mistake.
6.7 Design the screen form layout to match the layout of the source document. If the source document fields start at the top of the form and run down in a column, the input screen should use the same design.
6.8 Display a sample format if a user must enter values in a field in a specific format. For example, provide an on-screen instruction to let users know that the date format is MMDDYY, and provide an example if the user must enter separators, such as slashes.
6.9 In addition to the sample format in the preceding rule, it might be better to use an input mask , which is a template or pattern that restricts data entry and prevents errors. Microsoft Access provides standard input masks for fields such as dates, telephone numbers, postal codes, and Social Security numbers. In addition, you can create custom input masks, as shown in Figure 8-16 . Notice that a mask can have a specific format. For example, if a user enters text in lowercase letters, the input mask >L??????????? will capitalize the first letter automatically.
FIGURE 8-16 Microsoft Access 2010 provides various input masks for dates, phone numbers, and postal codes, among others. In addition, it is easy to create a custom mask using the characters shown here.
Screenshots used with permission from Microsoft.
6.10 Require an ending keystroke for every field. Pressing the Enter key or the Tab key should signify the end of a field entry. Avoid a design that moves automatically to the next item when the field is full. The latter approach requires an ending keystroke only when the data entered is less than the maximum field length. It is confusing to use two different data entry procedures.
6.11 Do not require users to type leading zeroes for numeric fields. For example, if a three-digit project number is 045, the operator should be able to type 45 instead of 045 before pressing the Enter key. An exception to that rule might occur when entering a date, where a leading zero is needed to identify single-digit months or days, such as 06-04-2013.
6.12 Do not require users to type trailing zeroes for numbers that include decimals. For example, when a user types a value of 98, the system should interpret the value as 98.00 if the field has been formatted to include numbers with two decimal places. The decimal point is needed only to indicate nonzero decimal places, such as 98.76.
6.13 Display default values so operators can press the Enter key to accept the suggested value. If the default value is not appropriate, the operator can change it.
6.14 Use a default value when a field value will be constant for successive records or throughout the data entry session. For example, if records are input in order by date, the date used in the first transaction should be used as the default date until a new date is entered, at which time the new date becomes the default value.
6.15 Display a list of acceptable values for fields, and provide meaningful error messages if the user enters an unacceptable value. An even better method, which was described under Rule 5: Enhance the Interface, is to provide a drop-down list box containing acceptable values that allows the user to select a value by clicking.
6.16 Provide users with an opportunity to confirm the accuracy of input data before entering it by displaying a message such as, Add this record? (Y/N). A positive response (Y) adds the record, clears the entry fields, and positions the insertion point in the first field so the user can input another record. If the response is negative (N), the current record is not added and the user can correct the errors.CHAPTER 8 User Interface Design
Chapter 8 is the first of three chapters in the systems design phase of the SDLC. This chapter explains how to design an effective user interface, and how to handle data security and control issues. The chapter stresses the importance of user feedback and involvement in all design decisions.
OBJECTIVES
When you finish this chapter, you will be able to :
· Explain the concept of user interface design and human-computer interaction, including basic principles of user-centered design
· Explain how experienced interface designers perform their tasks
· Describe rules for successful interface design
· Discuss input and output technology issues
· Design effective source documents and forms
· Explain printed output guidelines
· Describe output and input controls and security
· Explain modular design and prototyping techniques
INTRODUCTION
User interface design is the first task in the systems design phase of the SDLC. Designing the interface is extremely important because everyone wants a system that is easy to learn and use.
After discussing the user interface, human-computer interaction, and interface design rules, the chapter describes output, data security and control issues, prototyping, and the next steps in the systems design process.
PREVIEW CASE: Mountain View College Bookstore
Background: Wendy Lee, manager of college services at Mountain View College, wants a new information system that will improve efficiency and customer service at the three college bookstores.
In this part of the case, Tina Allen (systems analyst) and David Conroe (student intern) are talking about user interface design issues.
Participants:
Tina and David
Location:
Mountain View College Cafeteria, Monday afternoon, November 25, 2013
Project status:
Tina and David have examined development strategies for the new bookstore system. After performing cost-benefit analysis, they recommended in-house development of the new bookstore system. Now they are ready to begin the systems design phase by working on user interface design for the new system.
Discussion topics:
User interface design concepts and principles
Tina:
Hi, David. Ready to start work on user interface design?
David:
Sure. Will we start with output because it’s important to users?
Tina:
Output is very important, but the most important issue for users is the interface itself. For example, is it easy to learn? Is it easy to work with? We’ll try to design everything — output, input, and all the other elements — from a user’s point of view.
David:
How do we do that?
Tina:
Well, many sources of information about effective design concepts and principles are available. We’ll study those, and then ask our own users for their input and suggestions.
David:
What about input and data entry?
Tina:
Good question, You’ve heard the old saying, “garbage in, garbage out.” User interface principles apply to user input generally, but repetitive data entry deserves special attention. We need to create screen forms that are logical and easy to understand, as well as input masks and data entry validation rules. We also need to review any source documents that will be filled in manually.
David:
Anything else?
Tina:
Yes. The bookstore system probably will have some confidential data regarding budgets and markup policies, so we’ll have to consider security and control issues. If you’re ready, here’s a task list to get us started:
FIGURE 8-1 Typical user interface design tasks.
© Cengage Learning 2014
SYSTEMS DESIGN PHASE OVERVIEW
Because the components of a system are interdependent, the design phase is not a series of clearly defined steps. Although you might start in one area, you could find yourself working with several different elements at the same time. For example, a decision to change a report format might require changes in data design or input screens. Your design checklist will include the user interface, input and output procedures, data design, and system architecture. At the end of this phase, you will prepare a systems design specification and deliver a presentation to management.
The goal of systems design is to build a system that is effective, reliable, and maintainable.
· A system is reliable if it handles input errors, processing errors, hardware failures, or human mistakes. A good design will anticipate errors, detect them as early as possible, make it easy to correct them, and prevent them from damaging the system itself.
· A system is maintainable if it is flexible, scalable, and easily modified. Changes might be needed to correct problems, adapt to user requirements, or take advantage of new technology.
· A system is effective if it supports business requirements and meets user needs.
Although each project is different, the following basic principles usually apply.
Will It Succeed?
A system might have advanced technology and powerful features, but the real test is whether users like it and feel that it meets their needs. Here are some suggestions for successful design:
· Think like a user. Carefully examine any point where users provide input or receive output. The user interface must be easy to learn. Input processes should be easy to follow, intuitive, and forgiving of errors. Predesigned output should be attractive and easy to understand, with an appropriate level of detail.
· Anticipate future needs. Consider a parts inventory database that contains a one-character field for category, such as electrical, mechanical, or hydraulic. The design works well, but what if the company decides to break these overall groups down into more specific segments? A better design would anticipate possible expansion to two or more characters. For example, in 1999, there was widespread concern about what was called the Y2K issue because many older programs used only two characters to store the year, and might not recognize the start of a new century.
· Provide flexibility. Suppose that a user wants a screen display of all customer balances that exceed $5,000 in an accounts receivable system. How should you design that feature? The program could be coded to check customer balances against a fixed value of 5000, which is a simple solution for both the programmer and the user because no extra keystrokes are required to produce the display. However, that approach is inflexible. A better approach would be to let the user enter the amount. Or you could start with a default value that displays automatically. Users can press ENTER to accept the value, or type in another value. Often the best design strategy is to offer several alternatives, so users can decide what will work best for them.
· Manage data effectively. In addition to its effect on users, data management impacts company efficiency, productivity, and security. To reduce input errors, the system should enter and verify data as soon as possible, and each data item should have a specific type, such as alphabetic, numeric, or alphanumeric, and a range of acceptable values.
It is important to collect input data as close to its source as possible. For instance, using barcode scanners rather than manual forms on a warehouse freight dock, or having salespeople use tablets to record orders rather than filling in source documents. The easiest, most accurate, and least expensive data input strategy is automated data capture, such as the RFID scanner shown in Figure 8-2 .
In an efficient design, data is entered only once. For example, if input data for a payroll system also is needed for a human resources system, you can either design an interface to transfer data automatically, or create a central data storage area that both systems can access. In Chapter 9 , you will learn about normalization, which is a set of rules that can help you avoid data design problems. A secure system also includes audit trails that can log every instance of data entry and changes. For example, the system should record when a customer’s credit limit was set, by whom, and any other information necessary to construct the history of a transaction.
FIGURE 8-2 Automated data entry methods, such as the RFID scanner shown above, reduce input errors and improve employee productivity.
Courtesy of Intermec Technologies
CHAPTER OVERVIEW
Traditionally, a chapter on user interface design started with a discussion of output because output is what users touched, viewed, and needed to do their jobs. Today, the entire focus has shifted, for several important reasons:
· Users can design their own output. System designers are more aware of user needs and desires. A system can maintain data integrity and still allow users to view, sort, filter, and examine data in any way that helps them do their jobs. Years ago, the MIS department made those choices and users had little or no say in the matter. Today, successful applications are designed quite differently — the system developer identifies user needs, and then creates a design that will satisfy users and meet corporate requirements.
· Centralized IT departments no longer produce reams of printed reports. Those reports, called greenbar reports because of their appearance, often gathered dust while sitting on top of file cabinets. While a few examples might persist, the overwhelming trend has been to customer-designed output. The customer might be an individual user, or a community of users, such as a department. As Chapter 4 pointed out, the IT team must understand user requirements before creating a solution. That also was the message in the Dilbert cartoon on page 129 .
· The user interface itself has evolved into a two-way channel, with powerful output capability, and most user information needs can be met with screen-generated data, which a user can print, view, or save. Well into the 1980s and beyond, a user interface was a blank character-based screen, which might or might not offer menu choices. If a user entered a command improperly, the system responded with an error message, which frustrated users and stifled productivity. Many hardware-centric vendors did not understand the importance of the user interface and its implications.
Apple was a pioneer in user interface development, introducing the graphical user interface (GUI) , complete with mouse and screen icons, in the early 1980s. At that point, not many companies were ready for this concept. When software giant Microsoft finally jumped on the GUI bandwagon with its Windows® operating system, the corporate doors swung open, and everyone from managers on down said “How did we ever do without this?”
The user interface will continue to evolve, and it is difficult to predict the future. Advanced technology will support the evolution, but the real driving force will be user empowerment, which results in employee satisfaction, increased productivity, and bottom-line savings for a company.
WHAT IS A USER INTERFACE?
A user interface (UI) describes how users interact with a computer system, and consists of all the hardware, software, screens, menus, functions, output, and features that affect two-way communications between the user and the computer. The UI is the key to usability , which includes user satisfaction, support for business functions, and system effectiveness.
Figure 8-3 suggests an interesting viewpoint that interface designers should keep in mind: Industry leader IBM believes that the best interfaces are the ones that users do not even notice — they make sense because they do what users expect them to do.
When developing older systems, analysts typically designed all the printed and screen output first, then worked on the inputs necessary to produce the results. Often, the user interface mainly consisted of process-control screens that allowed the user to send commands to the system. That approach worked well with traditional systems that simply transformed input data into structured output.
FIGURE 8-3 According to IBM, the best user interfaces are the ones you don’t really notice.
© IBM Corporation 1994, 2012
As information management evolved from centralized data processing to dynamic, enterprise-wide systems, the primary focus also shifted — from the IT department to the users themselves. The IT group became a supplier of information technology, rather than a supplier of information. Today, the main focus is on users within and outside the company, how they communicate with the information system, and how the system supports the firm’s business operations.
In a user-centered system, the distinction blurs between input, output, and the interface itself. Most users work with a varied mix of input, screen output, and data queries as they perform their day-to-day job functions. Because all those tasks require interaction with the computer system, the user interface is a vital element in the systems design phase.
User interface design requires an understanding of human-computer interaction and user-centered design principles, which are discussed in the next section.
Human-Computer Interaction
A user interface is based on basic principles of human-computer interaction. Human-computer interaction (HCI) describes the relationship between computers and people who use them to perform their jobs, like the worker shown in Figure 8-4 . HCI concepts apply to everything from smartphones to global networks. In its broadest sense, a user interface includes all the communications and instructions necessary to enter input to the system and to obtain output in the form of screen displays or printed reports.
Early user interfaces involved users typing complex commands on a keyboard, which displayed as green text on a black screen. Then came the graphical user interface (GUI), which was a huge improvement because it used icons, graphical objects, and pointing devices. Today, designers strive to translate user behavior, needs, and desires into an interface that users don’t really notice. As IBM points out in Figure 8-3 , the best user interfaces are “almost transparent— you can see right though the interface to your own work.” In other words, a transparent interface does not distract the user and calls no attention to itself.
As a systems analyst, you will design user interfaces for in-house-developed software and customize interfaces for various commercial packages and user productivity applications. Your main objective is to create a user-friendly design that is easy to learn and use.
Industry leaders Microsoft and IBM both devote considerable resources to user interface research. Figure 8-5 on the next page describes Microsoft’s Redmond labs, where engineers observe volunteers who participate in software usability studies. Notice that the site invites visitors to watch an interesting video about Microsoft User Research.
Because HCI has a major impact on user productivity, it gets lots of attention — especially where multi-million dollar issues are concerned. For example, consider the article by Elizabeth Gardner in Health Data Management, which is shown in Figure 8-6 on the next page. The title tells the story, which involves government incentives for medical providers who use the new electronic health records (EHRs) . However, many physicians feel that EHR software is difficult to use and does not meet their needs.
FIGURE 8-4 HCI is essential to employee productivity, whether the work is done in a traditional office setting, or on a construction site like the one shown here.
© Goodluz/Shutterstock.com
FIGURE 8-5 Microsoft engineers observe volunteers who participate in usability studies. Notice the invitation to watch a video about Microsoft User Research.
Screenshots used with permission from Microsoft.
FIGURE 8-6 Software usability has a major impact on the medical profession, and not everyone is happy about it.
© 2012 Health Data Management and SourceMedia, Inc.
In her article, Ms. Gardner points out that physicians often multi task, answering a question about one patient while writing a prescription for another, and EHR software was not designed around that type of workflow.
The article also mentions Dr. Scott Finley, who consults on usability issues for the U.S. Department of Veterans’ Affairs and other agencies. Dr. Finley says that EHRs were designed to do a good job of gathering structured analytical data, but that approach does not promote usability. Dr. Finley says, “The data capture process needs to be judged on its own merits. It’s easier to make it hard than to make it easy.” Perhaps all systems analysts and UI designers should reflect on the implications of his comment.
CASE IN POINT 8.1: CASUAL OBSERVER SOFTWARE
Casual Observer Software’s main product is a program that monitors and analyzes user keystrokes and mouse clicks to learn more about the way employees use their computer systems. The problem is that some users feel this is an unwarranted intrusion into their privacy, and they prefer not to be observed. Some even fear that the data would be used for other reasons, including performance appraisal. You are a consultant who has been hired by a client firm that is trying to decide whether or not to use this software.
Before you advise the client, go back and review the Microsoft usability lab shown in Figure 8-5 , where the users being studied in the Redmond labs were willing participants. Then, refer to Chapter 4 , Requirements Modeling, page 155 , and consider the Hawthorne Effect, which suggests that employees might behave differently when they know they are being observed. Finally, think about the ethical issues that might be involved in this situation. What will you advise your client, and why?
SEVEN HABITS OF SUCCESSFUL INTERFACE DESIGNERS
Although IT professionals have different views about interface design, most would agree that good design depends on seven basic principles, which are described in the following sections.
Understand the Business
The interface designer must understand the underlying business functions and how the system supports individual, departmental, and enterprise goals. The overall objective is to design an interface that helps users to perform their jobs. A good starting point might be to analyze a functional decomposition diagram (FDD). As you learned in Chapter 4 , an FDD is a graphical representation of business functions that starts with major functions, and then breaks them down into several levels of detail. An FDD can provide a checklist of user tasks that you must include in the interface design.
Maximize Graphical Effectiveness
Studies show that people learn better visually. The immense popularity of Apple Mac OS and Microsoft Windows is largely the result of their graphical user interfaces that are easy to learn and use. A well-designed interface can help users learn a new system rapidly and be more productive. Also, in a graphical environment, a user can display and work with multiple windows on a single screen and transfer data between programs. If the interface supports data entry, it must follow the guidelines for data entry screen design that are discussed later in this chapter.
Think Like a User
A systems analyst should understand user experience, knowledge, and skill levels. If a wide range of capability exists, the interface should be flexible enough to accommodate novices as well as experienced users.
To develop a user-centered interface, the designer must learn to think like a user and see the system through a user’s eyes. The interface should use terms and metaphors that are familiar to users. Users are likely to have real-world experience with many other machines and devices that provide feedback, such as automobiles, ATMs, and microwave ovens. Based on that experience, users will expect useful, understandable feedback from a computer system.
Use Models and Prototypes
From a user’s viewpoint, the interface is the most critical part of the system design because it is where he or she interacts with the system — perhaps for many hours each day. It is essential to construct models and prototypes for user approval. An interface designer should obtain as much feedback as possible, as early as possible. You can present initial screen designs to users in the form of a storyboard , which is a sketch that shows the general screen layout and design. The storyboard can be created with software or drawn freehand. Users must test all aspects of the interface design and provide feedback to the designers. User input can be obtained in interviews, via questionnaires, and by observation. Interface designers also can obtain data, called usability metrics , by using software that can record and measure user interaction with the system.
TOOLKIT TIME
The Communication Tools in Part A of the Systems Analyst’s Toolkit can help you communicate effectively with users. To learn more about these tools, turn to Part A of the four-part Toolkit that follows Chapter 12 .
Focus on Usability
The user interface should include all tasks, commands, and communications between users and the information system. The opening screen should show the main options ( Figure 8-7 is an illustration). Each screen option leads to another screen, with more options. The objective is to offer a reasonable number of choices that a user easily can comprehend. Too many options on one screen can confuse a user — but too few options increase the number of submenu levels and complicate the navigation process. Often, an effective strategy is to present the most common choice as a default but allow the user to select other options.
Invite Feedback
Even after the system is operational, it is important to monitor system usage and solicit user suggestions. You can determine if system features are being used as intended by observing and surveying users. Sometimes, full-scale operations highlight problems that were not apparent when the prototype was tested. Based on user feedback, Help screens might need revision and design changes to allow the system to reach its full potential.
FIGURE 8-7 The opening screen displays the main options for a student registration system. A user can click an option to see lower-level actions and menu choices.
© Cengage Learning 2014
Document Everything
You should document all screen designs for later use by programmers. If you are using a CASE tool or screen generator, number the screen designs and save them in a hierarchy similar to a menu tree. User-approved sketches and storyboards also can be used to document the user interface.
By applying basic user-centered design principles, a systems analyst can plan, design, and deliver a successful user interface.
A HANDBOOK FOR USER INTERFACE DESIGN
What follows is a set of suggestions for user interface design, based on the author’s experience and observation. There is some overlap because many of the main rules share common elements.
Although there is no standard approach to interface design, these rules will get you started. Perhaps the most important rule is that you don’t have to follow all of these recommendations — the best interface is the one that works best for your users.
RULE 1: Create an Interface That Is Easy to Learn and Use
1.1 Focus on system design objectives, rather than calling attention to the interface.
1.2 Create a design that is easy to understand and remember. Maintain a common design in all modules of the interface, including the use of color, screen placements, fonts, and the overall “look and feel.”
1.3 Provide commands, actions, and system responses that are consistent and predictable.
1.4 Allow users to correct errors easily.
1.5 Clearly label all controls, buttons, and icons.
1.6 Select familiar images that users can understand, and provide on-screen instructions that are logical, concise, and clear. For example, the top screen in Figure 8-8 shows four control buttons, but none of them has an obvious meaning. In the bottom screen, the first five messages provide little or no information. The last message is the only one that is easy to understand.
1.7 Show all commands in a list of menu items, but dim any commands that are not available to the user.
1.8 Make it easy to navigate or return to any level in the menu structure.
RULE 2: Enhance User Productivity
The interface is where a user interacts with the system, so it can have a dramatic effect on productivity. If the interface empowers a user and enables him or her to handle more complex tasks, the user becomes more productive. Conversely, if the interface is difficult to work with, productivity declines.
FIGURE 8-8 In the example at the top, the icons do not have a clear message. In the Help text examples at the bottom, only one message is understandable. The others would frustrate and annoy most users.
© Cengage Learning 2014
2.1 Organize tasks, commands, and functions in groups that resemble actual business operations. You should group functions and submenu items in a multilevel menu hierarchy, or tree, that is logical and reflects how users typically perform the tasks. Figure 8-9 shows an example of a menu hierarchy for an order tracking system.
2.2 Create alphabetical menu lists or place the selections used frequently at the top of the menu list. No universally accepted approach to menu item placement exists. The best strategy is to design a prototype and obtain feedback from users. Some applications even allow menus to show recently used commands first. Some users like that feature, but others find it distracting. The best approach is to offer a choice, and let users decide.
2.3 Provide shortcuts for experienced users so they can avoid multiple menu levels. You can create shortcuts using hot keys that allow a user to press the Alt key + the underlined letter of a command.
2.4 Use default values if the majority of values in a field are the same. For example, if 90% of the firm’s customers live in Albuquerque, use Albuquerque as the default value in the City field.
2.5 Use a duplicate value function that enables users to insert the value from the same field in the previous record, but allow users to turn this feature on or off as they prefer.
2.6 Provide a fast-find feature that displays a list of possible values as soon as users enter the first few letters.
2.7 If available, consider a natural language feature that allows users to type commands or requests in normal text phrases. For example, many applications allow users to request Help by typing a question into a dialog box. The software then uses natural language technology to retrieve a list of topics that match the request. Natural language technology is used in speech recognition systems, text-to-speech synthesizers, automated voice response systems, Web search engines, text editors, and language instruction materials.
RULE 3: Provide Users with Help and Feedback
This is one of the most important rules because it has a high impact on users. Never allow Help to slow a user down. Instead, make Help easy to find, but not around when you users don’t need it.
FIGURE 8-9 This menu hierarchy shows tasks, commands, and functions organized into logical groups and sequences. The structure resembles a functional decomposition diagram (FDD), which is a model of business functions and processes.
© Cengage Learning 2014
FIGURE 8-10 The main Help screen for a student registration system.
© Cengage Learning 2014
FIGURE 8-11 A context-sensitive dialog box displays if a user requests help while entering data into the ADVISOR ASSIGNED field. Clicking the Close button returns the user to the task.
© Cengage Learning 2014
3.1 Ensure that help is always available on demand. Help screens should provide information about menu choices, procedures, shortcuts, and errors.
3.2 Provide user-selected help and context-sensitive help. User-selected help displays information when the user requests it. By making appropriate choices through the menus and submenus, the user eventually reaches a screen with the desired information. Figure 8-10 shows the main Help screen for the student registration system. Context-sensitive help offers assistance for the task in progress. Figure 8-11 shows a Help dialog box that is displayed if a user requests help while entering data into the ADVISOR ASSIGNED field. Clicking the Close button returns the user to the current task.
3.3 Provide a direct route for users to return to the point from where help was requested. Title every help screen to identify the topic, and keep help text simple and concise. Insert blank lines between paragraphs to make Help easier to read, and provide examples where appropriate.
3.4 Include contact information, such as a telephone extension or e-mail address if a department or help desk is responsible for assisting users.
3.5 Require user confirmation before data deletion (Are you sure?) and provide a method of recovering data that is deleted inadvertently. Build in safeguards that prevent critical data from being changed or erased.
3.6 Provide an Undo key or a menu choice that allows the user to eradicate the results of the most recent command or action.
3.7 When a user-entered command contains an error, highlight the erroneous part and allow the user to make the correction without retyping the entire command.
3.8 Use hypertext links to assist users as they navigate help topics.
3.9 Display messages at a logical place on the screen, and be consistent.
3.10 Alert users to lengthy processing times or delays. Give users an on-screen progress report, especially if the delay is lengthy.
3.11 Allow messages to remain on the screen long enough for users to read them. In some cases, the screen should display messages until the user takes some action.
3.12 Let the user know whether the task or operation was successful or not. For example, use messages such as Update completed, All transactions have been posted, or The ID Number was not found.
3.13 Provide a text explanation if you use an icon or image on a control button. This helps the user to identify the control button when moving the mouse pointer over the icon or image.
3.14 Use messages that are specific, understandable, and professional. Avoid messages that are cute, cryptic, or vague, such as: ERROR — You have entered an unacceptable value, or Error DE-4-16. Better examples are:
• Enter a number from 1 (low) to 5 (high)
• Customer number must be numeric
• Please re-enter a numeric value
• Call the Accounting Department, Ext. 239 for assistance
RULE 4: Create an Attractive Layout and Design
This is a subjective area because reasonable people can differ on what is attractive. You should consider color, layout, and ease of use. You might create some screen mock-ups and menu trees and try them out on users to get their input. If in doubt, err on the side of doing a bit less. Although you might love blinking messages, they might not be the best choice for your interface design. Also try to avoid too many fonts, styles, and sizes, which can be distracting. Each separate style should communicate something — a different level of detail, another topic, mandatory versus optional actions, and so on.
4.1 Use appropriate colors to highlight different areas of the screen; avoid gaudy and bright colors.
4.2 Use special effects sparingly. For example, animation and sound might be effective in some situations, but too many special effects can be distracting and annoying to a user, especially if he or she must view them repeatedly.
4.3 Use hyperlinks that allow users to navigate to related topics.
4.4 Group related objects and information. Visualize the screen the way a user will see it, and simulate the tasks that the user will perform.
4.5 Screen density is important. Keep screen displays uncluttered, with enough white space to create an attractive, readable design.
4.6 Display titles, messages, and instructions in a consistent manner and in the same general locations on all screens.
4.7 Use consistent terminology. For example, do not use the terms delete, cancel, and erase to indicate the same action. Similarly, the same sound always should signal the same event.
4.8 Ensure that commands always will have the same effect. For example, if the BACK control button returns a user to the prior screen, the BACK command always should perform that function throughout the application.
4.9 Ensure that similar mouse actions will produce the same results throughout the application. The results of pointing, clicking, and double-clicking should be consistent and predictable.
4.10 When the user enters data that completely fills the field, do not move automatically to the next field. Instead, require the user to confirm the entry by pressing the Enter key or Tab key at the end of every fill-in field.
4.11 Remember that users are accustomed to a pattern of red = stop, yellow = caution, and green = go. Stick to that pattern and use it when appropriate to reinforce on-screen instructions.
4.12 Provide a keystroke alternative for each menu command, with easy-to-remember letters, such as File, Exit, and Help.
4.13 Use familiar commands if possible, such as Cut, Copy, and Paste.
4.14 Provide a Windows look and feel in your interface design if users are familiar with Windows-based applications.
4.15 Avoid complex terms and technical jargon; instead, select terms that come from everyday business processes and the vocabulary of a typical user.
RULE 5: Enhance the Interface
A designer can include many features, such as menu bars, toolbars, dialog boxes, text boxes, toggle buttons, list boxes, scroll bars, drop-down list boxes, option buttons, check boxes, command buttons, and calendar controls, among others. Screen design requires a sense of aesthetics as well as technical skills. You should obtain user feedback early and often as the design process continues.
5.1 The opening screen is especially important because it introduces the application and allows users to view the primary options. The starting point can be a switchboard with well-placed command buttons that allow users to navigate the system. Figure 8-12 shows the switchboard and a data entry screen for a project management system. Notice the drop-down list box that allows users to enter a status code by clicking a selection.
FIGURE 8-12 An example of a switchboard and data entry screen for a project management system.
© Cengage Learning 2014
5.2 Use a command button to initiate an action such as printing a form or requesting help. For example, when a user clicks the Find Student command button in Figure 8-13 , a dialog box opens with instructions.
5.3 If you are using a software package, check to see if it allows you to create customized menu bars and toolbars. If so, consider these options.
5.4 Add a shortcut feature that lets a user select a menu command either by clicking the desired choice or by pressing the Alt key + the underlined letter. Some forms also use a toolbar that contains icons or buttons that represent shortcuts for executing common commands.
5.5 If variable input data is needed, provide a dialog box that explains what is required.
5.6 A toggle button makes it easy to show on or off status — clicking the toggle button switches to the other state.
5.7 Use list boxes that display the available choices. If the list does not fit in the box, a scroll bar allows the user to move through the available choices. Also, be sure to provide another way to enter data that does not align with a specific list choice.
5.8 Use an option button , or radio button , to control user choices. For example, if the user can select only one option, display a suitable message (Choose one item), but if there is no restriction, display a different message (Choose all that apply). Use a black dot to show selected options.
FIGURE 8-13 A data entry screen for the student registration system. This screen uses several design features that are described in the text. When a user clicks the Find Student command button, a dialog box is displayed with instructions.
© Cengage Learning 2014
5.9 If you use check boxes to select one or more choices from a group, show the choices with a checkmark or an X.
5.10 When dates must be entered, use a calendar control that allows the user to select a date that the system will use as a field value.
RULE 6: Focus on Data Entry Screens
Data entry is especially important because it is in the job description of so many users.
6.1 Whenever possible, use a data entry method called form filling , where a blank form that duplicates or resembles the source document is completed on the screen.
6.2 Restrict user access to screen locations where data is entered. For example, when the screen in Figure 8-14 appears, the system should position the insertion point in the first data entry location. After the operator enters a Customer ID, the insertion point should move automatically to the entry location for the next field (Item). A user should be able to position the insertion point only in places where data is entered on the form.
6.3 Provide a way to leave the data entry screen at any time without entering the current record. This feature is not available in the screen shown in Figure 8-14 , but is provided in the enhanced version of the same screen shown in Figure 8-15 on the next page. Notice that the new version has command buttons that provide flexibility and allow the user to perform various functions. For example, clicking the Cancel Order button cancels the current order and moves the insertion point back to the beginning of the form.
6.4 Provide a descriptive caption for every field, and show the user where to enter the data and the required or maximum field size. Typically, white boxes show the location and length of each field. Other methods used to indicate field locations are video highlighting, underscores, special symbols, or a combination of these features.
FIGURE 8-14 In this data screen for customer orders, the system generates an order number and logs the current date and time. The user enters a customer ID. If the entry is valid, the system displays the customer name so the user can verify it. The user then enters the item and quantity. Note that the description, price, extended price, total price, sales tax, and grand total are retrieved automatically or calculated by the system.
© Cengage Learning 2014
FIGURE 8-15 This is an enhanced version of the data entry screen shown in Figure 8-14 .The new version has command buttons that allow the user to perform various functions.
© Cengage Learning 2014
6.5 Provide a means for users to move among fields on the form in a standard order or in any order they choose. For example, when a user opens the form shown in Figure 8-15 , the insertion point automatically will be in the first field. After the user fills in each field and confirms the entry, the insertion point moves to the next field, in a predetermined order. In a graphical user interface (GUI), the user can override the standard field order and select field locations using the mouse or arrow keys.
6.6 Allow users to add, change, delete, and view records. Figure 8-15 helps users enter orders, find items, and find customers. After the user enters a customer code, the form displays current values for all appropriate fields. Then the operator can view the data, make changes, enter the order, or cancel the order. Messages such as: Apply these changes? (Y/N) or Delete this record? (Y/N) should require users to confirm the actions. Highlighting the letter N as a default response will avoid problems if the user presses the Enter key by mistake.
6.7 Design the screen form layout to match the layout of the source document. If the source document fields start at the top of the form and run down in a column, the input screen should use the same design.
6.8 Display a sample format if a user must enter values in a field in a specific format. For example, provide an on-screen instruction to let users know that the date format is MMDDYY, and provide an example if the user must enter separators, such as slashes.
6.9 In addition to the sample format in the preceding rule, it might be better to use an input mask , which is a template or pattern that restricts data entry and prevents errors. Microsoft Access provides standard input masks for fields such as dates, telephone numbers, postal codes, and Social Security numbers. In addition, you can create custom input masks, as shown in Figure 8-16 . Notice that a mask can have a specific format. For example, if a user enters text in lowercase letters, the input mask >L??????????? will capitalize the first letter automatically.
FIGURE 8-16 Microsoft Access 2010 provides various input masks for dates, phone numbers, and postal codes, among others. In addition, it is easy to create a custom mask using the characters shown here.
Screenshots used with permission from Microsoft.
6.10 Require an ending keystroke for every field. Pressing the Enter key or the Tab key should signify the end of a field entry. Avoid a design that moves automatically to the next item when the field is full. The latter approach requires an ending keystroke only when the data entered is less than the maximum field length. It is confusing to use two different data entry procedures.
6.11 Do not require users to type leading zeroes for numeric fields. For example, if a three-digit project number is 045, the operator should be able to type 45 instead of 045 before pressing the Enter key. An exception to that rule might occur when entering a date, where a leading zero is needed to identify single-digit months or days, such as 06-04-2013.
6.12 Do not require users to type trailing zeroes for numbers that include decimals. For example, when a user types a value of 98, the system should interpret the value as 98.00 if the field has been formatted to include numbers with two decimal places. The decimal point is needed only to indicate nonzero decimal places, such as 98.76.
6.13 Display default values so operators can press the Enter key to accept the suggested value. If the default value is not appropriate, the operator can change it.
6.14 Use a default value when a field value will be constant for successive records or throughout the data entry session. For example, if records are input in order by date, the date used in the first transaction should be used as the default date until a new date is entered, at which time the new date becomes the default value.
6.15 Display a list of acceptable values for fields, and provide meaningful error messages if the user enters an unacceptable value. An even better method, which was described under Rule 5: Enhance the Interface, is to provide a drop-down list box containing acceptable values that allows the user to select a value by clicking.
6.16 Provide users with an opportunity to confirm the accuracy of input data before entering it by displaying a message such as, Add this record? (Y/N). A positive response (Y) adds the record, clears the entry fields, and positions the insertion point in the first field so the user can input another record. If the response is negative (N), the current record is not added and the user can correct the errors.