Chapter 8 User Interface Design 8 User Interface CHAPTER 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 output, input, and security issues. The chapter stresses the importance of user feedback and involvement in all design decisions. INTRODUCTION OBJECTIVES User interface design is the first task in the systems When you finish this chapter, you will be design phase of the SDLC. Designing the interface able to: is extremely important, because everyone wants a system that is easy to learn and use. • Explain the concept of user interface design After discussing user interface evolution, princi- and human-computer interaction, including ples, and design techniques, the chapter describes basic principles of user-centered design output design, input design, and data security • List user interface design guidelines issues. • Describe user interface components, including screen elements and controls • Discuss output design and technology issues • Design effective source documents • Explain input design and technology issues • Discuss guidelines for data entry screen design • Use input masks and validation rules to reduce input errors • Describe output and input controls and security Copyright 2011 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it. Phase 3 Systems Design Introduction 335 CHAPTER INTRODUCTION 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 28, 2011 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 output and input control and security. If you’re ready, here’s a task list to get us started: FIGURE 8-1 Typical user interface design tasks. Copyright 2011 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it. Chapter 8 User Interface Design 336 What Is a User Interace? WHAT IS A USER INTERFACE? To learn more about A user interface (UI) describes how users interact with a computer system, and consists user interface design, of all the hardware, software, screens, menus, functions, output, and features that affect visit the Management Information Systems two-way communications between the user and the computer. CourseMate Web Figure 8-2 suggests an interesting viewpoint that interface designers should keep in site at www. mind: Industry leader IBM believes that the best interfaces are the ones that users do cengagebrain.com, not even notice — they make sense because they do what users expect them to do. navigate to On the Web Links for this chapter, and locate the User Interface Design link. FIGURE 8-2 IBM says that a user interface is what you see, hear, touch, or talk to when you use a computer. Evolution of the User Interface 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 com- mands to the system. That approach worked well with traditional systems that simply transformed input data into structured output. 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, Copyright 2011 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it. Phase 3 Systems Design What Is a User Interace? 337 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. Figure 8-3 compares a traditional, processing-centered information system with a modern, user-centered system. Notice that the IT department, which was the main interface for user information requests, has become a system facilitator that maintains and supports the system for its users. 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 sys- tems design phase. Ergosoft laboratories is one of many firms that offer consulting services and software solutions to help companies develop successful user interfaces, as shown in Figure 8-4 on the next page. User interface design requires an understanding of human-computer interaction and user-centered design principles, which are discussed in the next section. Input and output design topics are covered later in this chapter. Data Information IT Department User Requests System for Information Traditional, Processing-Centered Information System Model Business Internal Users Transactions Data Information IT Department System Customers Suppliers Modern, User-Centered Information System Model FIGURE 8-3 Compare the traditional, processing-centered system at the top of the figure with the modern, user-centered information system at the bottom. Notice the change in the role of the IT department. Copyright 2011 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it. Chapter 8 User Interface Design 338 What Is a User Interace? FIGURE 8-4 Ergosoft laboratories is an example of a firm that offers consulting services and software solutions to help companies develop successful user interfaces. 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-5. HCI concepts apply to everything from PC desktops 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. The human-computer interface started in the 1980s with users typing complex com- mands in 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-2 on page 336, the best user interfaces are “almost transparent — you can see right though the interface to your own work.” 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-6 describes Microsoft’s Redmond labs, where engineers observe volun- FIGURE 8-5 HCI is essential to employee productivity, whether the teers who participate in software usability work is done in a traditional office setting, or on a construction site like studies. the one shown here. Copyright 2011 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it. Phase 3 Systems Design What Is a User Interace? 339 At its Almaden Research Center, IBM conducts usability testing and studies human- computer interaction, as shown in Figure 8-7. According to IBM, its User Sciences & Experience Research (USER) lab focuses on improving ease of use and exploring new ways of using computers. FIGURE 8-6 Microsoft invites people to participate in software usability studies at its labs. FIGURE 8-7 According to IBM, human-computer interaction (HCI) is one of the most extensive research areas at the company. Copyright 2011 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it. Chapter 8 User Interface Design 340 What Is a User Interace? CASE IN POINT 8.1: CASUAL OBSERVER SOFTWARE Casual Observer Software’s main product is a program that monitors and analyzes user key- strokes and mouse clicks to learn more about the way employees use their computer sys- tems. 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-6 on the previous page, where the users being studied in the Redmond labs were willing participants. Then, refer to Chapter 4, Requirements Modeling, page 165, 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? IBM believes that the user interface evolution will lead to computers that truly are consumer products that are simple and natural for the general population to use. This To learn more about will occur, in IBM’s view, because computers will function in a friendlier, more predict- human-computer interaction, visit the able way — much like a telephone or video player. Most important, the interface will be Management based on the perspective of a user rather than a computer engineer, programmer, or sys- Information Systems tems analyst. To understand the magnitude of this shift in thinking, consider the power- CourseMate Web ful statement shown in Figure 8-8, where IBM usability expert Dr. Clare-Marie Karat site at www. cengagebrain. notes that “in this new computer age, the customer is not only right, the customer has com, navigate to rights.” Those rights are listed in Figure 8-9. On the Web Links for this chapter, and locate the Human- Computer Interaction link. FIGURE 8-8 IBM's logic is very simple: The user is the customer, and the customer is always right. Copyright 2011 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it. Phase 3 Systems Design Principles of User-Centered Design 341 User Rights 1. Perspective: The user always is right. If there is a problem with the use of the system, the system is the problem, not the user. 2. Installation: The user has the right to install and uninstall software and hardware systems easily without negative consequences. 3. Compliance: The user has the right to a system that performs exactly as promised. 4. Instruction: The user has the right to easy-to-use instructions (user guides, online or contextual help, and error messages) for understanding and utilizing a system to achieve desired goals and recover efficiently and gracefully from problem situations. 5. Control: The user has the right to be in control of the system and to be able to get the system to respond to a request for attention. 6. Feedback: The user has the right to a systen that provides clear, understandable, and accurate information regarding the task it is performing and the progress toward completion. 7. Dependencies: The user has the right to be informed clearly about all systems requirements for successfully using software or hardware. 8. Scope: The user has the right to know the limits of the system’s capabilities. 9. Assistance: The user has the right to communicate with the technology provider and receive a thoughtful and helpful response when raising concerns. 10. Usability: The user should be the master of software and hardware technology, not vice versa. Products should be natural and intuitive to use. FIGURE 8-9 User rights suggested by IBM’s Dr. Clare-Marie Karat. PRINCIPLES OF USER-CENTERED DESIGN 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 VIDEO The interface designer must understand the underlying business functions and how the LEARNING SESSIONS 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 To learn more about FDDs,visit be to analyze a functional decomposition diagram (FDD). As you learned in Chapter 4, the Management an FDD is a graphical representation of business functions that starts with major func- Information Systems tions, and then breaks them down into several levels of detail. An FDD can provide a CourseMate Web site at www. checklist of user tasks that you must include in the interface design. cengagebrain. com and navigate Maximize Graphical Effectiveness to the Video Learning Sessions Studies show that people learn better visually. The immense popularity of Apple Mac OS for this book. These sessions can help and Microsoft Windows is largely the result of their graphical user interfaces that are you understand key easy to learn and use. A well-designed interface can help users learn a new system rap- concepts, practice idly, and be more productive. Also, in a graphical environment, a user can display and your skills, and check your work. 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 Copyright 2011 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it. Chapter 8 User Interface Design 342 Designing the User Interface machines and devices that provide feedback, such as automobiles, ATM machines, 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 pres- ent 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 soft- ware, 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. Focus on Usability TOOLKIT TIME The user interface should include all tasks, commands, and communications between users The Communication and the information system. The screen in Figure 8-10 shows the main options for a student Tools in Part A of registration system. Each screen option leads to another screen, with more options. The the Systems Analyst’s objective is to offer a reasonable number of choices that a user easily can comprehend. Too Toolkit can help you communicate effec- many options on one screen can confuse a user — but too few options increase the number tively with users. To of submenu levels and complicate the navigation process. Often, an effective strategy is to learn more about present the most common choice as a default, but allow the user to select other options. these tools, turn to Part A of the four- part Toolkit that Invite Feedback follows Chapter 12. 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 high- light 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. 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 princi- ples, a systems analyst can plan, design, and deliver a successful user interface. DESIGNING THE USER INTERFACE It is important to design a user interface that is easy to use, attractive, and efficient. When you create a user interface, you should follow eight basic guide- FIGURE 8-10 The opening screen displays the main options for a student registration system. A user can click an option to see lines. These guidelines also apply to data entry screen lower-level actions and menu choices. design, which is discussed later in this chapter. Copyright 2011 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it. Phase 3 Systems Design Designing the User Interface 343 1. Design a transparent interface. 2. Create an interface that is easy to learn and use. 3. Enhance user productivity. 4. Make it easy for users to obtain help or correct errors. 5. Minimize input data problems. 6. Provide feedback to users. 7. Create an attractive layout and design. 8. Use familiar terms and images. Good user interface design is based on a combination of ergonomics, aesthetics, and interface technology. Ergonomics describes how people work, learn, and interact with computers; aesthetics focuses on how an interface can be made attractive and easy to use; and interface technology provides the operational structure required to carry out the design objectives. As shown in Figure 8-11, Cognetics Corporation offers user inter- face design services. Cognetics stresses that an interface must be effective, efficient, engaging, error tolerant, and easy to learn. The following sections provide examples of the basic user interface design guidelines. As mentioned earlier, many of the specific points also apply to data entry screen design, which is discussed later in this chapter. Design a Transparent Interface • Facilitate the system design objectives, rather than calling attention to the interface. • Create a design that is easy to learn and remember. • Design the interface to improve user efficiency and productivity. • W rite commands, actions, and system responses that are consistent and predictable. • Minimize data entry problems. • Allow users to correct errors easily. • Create a logical and attractive layout. FIGURE 8-11 Cognetics Corporation offers user interface design services and training. Copyright 2011 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.