Systems Analysis and Design, 13th Edition Chapter 7: User Interface Design PDF

Systems Analysis and Design, 13 th Edition Chapter 7: User Interface Design Scott Tilley, Syst...

Systems Analysis and Design, 13 th Edition Chapter 7: User Interface Design Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 1  Chapter Objectives (1 of 2) By the end of this chapter, you should be able to: 1. Explain user interfaces. 2. Explain the concept of human-computer interaction. 3. Summarize the seven habits of successful interface designers. 4. Summarize the 10 guidelines for user interface design. 5. Design effective source documents and forms. Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 2  Chapter Objectives (2 of 2) By the end of this chapter, you should be able to (continued): 6. Explain report design techniques for printed output. 7. Discuss output and input technology issues. 8. Describe output and input security and control issues. 9. Explain emerging user interface trends. Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 3  User Interfaces A user interface (UI) describes how users interact with a computer system and consists of all features that affect two-way communications between the user and the computer − It is key to usability, including user satisfaction, support for business functions, and system effectiveness Apple pioneered UI development by introducing the graphical user interface (GUI) In a user-centered system, most users work with a varied mix of input, screen output, and data queries as they perform day-to-day job functions Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 4  Human-Computer Interaction Human-computer interaction (HCI) describes the relationship between computers and those who use them to perform their jobs − HCI includes all communications and instructions to enter input and obtain output in the form of screen displays or printed reports A transparent user interface does not distract the user and calls no attention to itself HCI significantly impacts user productivity Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 5  Seven Habits of Successful Interface Designers (1 of 4) Understand the Business − The interface designer must understand the underlying business functions and how the system supports goals Maximize Graphical Effectiveness − A well-designed interface enables a user to quickly learn and adapt to a new system Think Like a User − The designer must see system from the user’s perspective Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 6  Seven Habits of Successful Interface Designers (2 of 4) Use Models and Prototypes − Designers can present initial screen designs to users in the form of a storyboard − Using software to record and measure user interactions provides usability metrics data Focus on Usability − The primary goal is to create an interface that is intuitive and easy to navigate, ensuring users can interact with the system efficiently Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 7 Seven Habits of Successful Interface Designers (3 of 4) Figure 7-4 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. Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 8  Seven Habits of Successful Interface Designers (4 of 4) Invite Feedback − Monitor system usage and solicit user suggestions − Determine if system features are being used as intended by observing and surveying users Document Everything − Document all screen designs for later use by programmers − User-approved sketches and storyboards can be used to document the user interface Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 9  Knowledge Check Activity 7-1 What is human–computer interaction? Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 10  Knowledge Check Activity 7-1: Answer What is human–computer interaction? Answer: A UI is based on fundamental principles of human–computer interaction (HCI). HCI describes the relationship between computers and those who use them to perform their jobs. HCI concepts apply to everything from smartphones to global networks. In its broadest sense, HCI includes all the communications and instructions necessary to enter input into the system and obtain output through screen displays or printed reports. Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 11  Guidelines for User Interface Design (1 of 18) Create an Interface That is Easy to Learn and Use − Focus on system design objectives − Create a design that is easy to understand and remember − Maintain a standard design in all interface modules − Provide consistent commands, actions, and system responses − Allow users to correct errors easily − Clearly label all controls, buttons, and icons − Make it easy to navigate or return to any level Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 12  Guidelines for User Interface Design (2 of 18) Enhance User Productivity − Organize tasks, commands, and functions in groups that resemble actual business operations − Create alphabetical menu lists or place the selections used frequently at the top of the menu − Provide shortcuts for experienced users − Use default values if the majority of values in a field are the same − Use a duplicate value function, but allow users to turn this feature on or off as they prefer Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 13  Guidelines for User Interface Design (3 of 18) Enhance User Productivity (continued) − Provide a fast-find feature − Consider a natural language feature that allows users to type commands or requests in normal text phrases Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 14 Guidelines for User Interface Design (4 of 18) Figure 7-6 This menu hierarchy shows tasks, commands, and functions organized into logical groups and sequences. The structure resembles an FDD. Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 15  Guidelines for User Interface Design (5 of 18) Provide Flexibility − Incorporating alternatives and choices within the design often is the best strategy for balancing simplicity and flexibility Provide Users with Help and Feedback − Ensure help is always available on demand − Provide user-selected help and context- sensitive help − Provide a direct route for users to return to the point from where help was requested Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 16  Guidelines for User Interface Design (6 of 18) Provide Users with Help and Feedback (continued) − Require user confirmation before data deletion − Provide an “Undo” key − When a user-entered command contains an error, highlight the erroneous part − Use hypertext links to assist users − Display messages at a logical place − Alert users to lengthy processing Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 17  Guidelines for User Interface Design (7 of 18) Create an Attractive Layout and Design − Use appropriate colors to highlight different areas of the screen − Use special effects sparingly − Use hyperlinks that allow users to navigate to related topics − Group related objects and information − Keep screen displays uncluttered − Display titles, messages, and instructions in a consistent manner Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 18  Guidelines for User Interface Design (8 of 18) Create an Attractive Layout and Design (continued) − Use consistent terminology − Ensure commands and similar mouse actions will have the same effect − Require the user to confirm the entry by pressing Enter or Tab − Remember that users are accustomed to a pattern of red = stop, yellow = caution, and green = go − Avoid complex terms and technical jargon Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 19  Guidelines for User Interface Design (9 of 18) Enhance the Interface − The opening screen is important as it can be a switchboard − Use a command button to initiate an action − Create customized menu bars and toolbars − Add a shortcut feature that lets a user select a menu command − If variable input data is needed, provide a dialog box that explains what is required Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 20 Guidelines for User Interface Design (10 of 18) Figure 7-8 An example of a switchboard introducing TurboTax. The main options displayed on an uncluttered screen. This is particularly important for users who are likely to be confused and nervous when beginning the tax preparation process. Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 21  Guidelines for User Interface Design (11 of 18) Enhance the Interface (continued) − A toggle button makes it easy to show on or off status − Use list boxes that display available choices − Use an option button, or a radio button, to control user choices − If check boxes are used to select one or more choices from a group, show the choices with a checkmark or an X − When dates must be entered, use a calendar control Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 22  Guidelines for User Interface Design (12 of 18) Focus on Data Entry Screens − Use the form filling method whenever possible − Restrict user access to screen locations where data is entered − Provide a cancel button or a way to leave the data entry screen at any time without entering the current record − Provide a descriptive caption for every field − Provide a means for users to move among fields on the form in a standard order or in any order they choose Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 23  Guidelines for User Interface Design (13 of 18) Focus on Data Entry Screens (continued) − Allow users to add, change, delete, and view records − Design the screen form layout to match the layout of the source document − Display a sample format use an input mask − Require an ending stroke for every field − Do not require users to type leading zeros for numeric fields or trailing zeros Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 24  Guidelines for User Interface Design (14 of 18) Focus on Data Entry Screens (continued) − Display default values − Use a default value when a field value will be constant for successive records or throughout the data entry session − Display a list of acceptable values for fields, and provide meaningful error messages if the user enters an unacceptable value − Provide users with an opportunity to confirm the accuracy of input data before displaying it Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 25  Guidelines for User Interface Design (15 of 18) Use Validation Rules − A sequence check can be used when the data must be in some predetermined sequence − An existence check can apply to mandatory data items − A data type check tests to ensure that a data item fits the required data type − A range check can be used to verify data items fall between a specified minimum and maximum value Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 26  Guidelines for User Interface Design (16 of 18) Use Validation Rules (continued) − A reasonableness check identifies values that are questionable, but not necessarily wrong − A validity check can be used for data items that must have certain values − A combination check is performed on two or more fields to ensure that they are consistent or reasonable when considered together − Batch controls are totals used to verify batch input Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 27  Guidelines for User Interface Design (17 of 18) Manage Data Effectively − Data management impacts company efficiency, productivity, and security − To reduce errors, do the following:  Enter and verify data as soon as possible  Each data item should have a specific type  Collect input data as close to its source as possible  In an efficient design, data is entered only once Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 28  Guidelines for User Interface Design (18 of 18) Reduce Input Volume − Input necessary data only − Do not input data that the user can retrieve from system files or calculate from other data − Automate repetitive data entry where possible − Do not input constant data − Use codes as they are shorter than the data they represent Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 29  Source Document and Form Design (1 of 2) Garbage in, garbage out (GIGO) is a term that basically means the “quality of the output depends on the quality of the input” A source document collects input data, triggers an input action, and provides a record of original transaction Good form layout makes the form easy to complete and provides enough space Order and placement of printed fields should be logical Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 30 Source Document and Form Design (2 of 2) Figure 7-11 Source document zones. Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 31  Printed Output (1 of 5) Questions to be considered before designing printed output include: − Why is this being delivered as printed output? − Who wants the information, why is it needed, and how will it be used? − What specific information will be included? − Will printed output be for a specific device? − When and how will the information be delivered, and how often must it be updated? − Do security or confidentiality issues exist? Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 32  Printed Output (2 of 5) Report Design − Organizations strive to reduce flow of paper and printed reports  Users find it handy to view screen output, then print the information they need − Printed output is used in turnaround documents − Reports must be easy to read and well organized  Database programs include a variety of report design tools to create reports quickly and easily Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 33  Printed Output (3 of 5) Report Design Principles − To produce a well-designed report, the analyst must consider design features such as the following:  Report headers and footers  Page headers and footers  Repeating fields  Consistent design Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 34  Printed Output (4 of 5) Figure 7-12 The Employee Hours report is detailed with control breaks, subtotals, and grand totals. A report header identifies the report, a page header contains column headings, a group footer includes subtotals for each store, and a report footer contains grand totals. A page footer identifies the page number. Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 35  Printed Output (5 of 5) Types of Reports − A detail report produces one or more lines of output for each record processed  Can be quite lengthy − An exception report displays only those records that meet specific conditions  Useful when the user wants specific information − A summary report provides comprehensive data Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 36  Knowledge Check Activity 7-2 What is the difference between a detail report, a summary report, and an exception report? Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 37  Knowledge Check Activity 7-2: Answer What is the difference between a detail report, a summary report, and an exception report? Answer: Broadly speaking: A detail report produces at least one output line for every record processed. A summary report displays only subtotals and totals. An exception report only includes records that satisfy a specific condition. Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 38  Technology Issues (1 of 3) Input Technology − Batch input: data entry is performed on a specified time schedule, such as daily, weekly, monthly, or longer − Online input: online data entry enables immediate validation and availability of data  Source data automation combines online data entry and automated data capture using input devices such as RFID tags, magnetic data strips, or smartphones Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 39  Technology Issues (2 of 3) Output Technology − In addition to screen output and printed matter, actual forms, reports, and documents have to be created to be accessible from workstations, notebooks, tablets, smartphones, and other devices − The following are other output types and technologies:  Internet-based information delivery; email; blogs; instant messaging; wireless devices; digital audio, images, and video; automated fax systems; podcasts; and computer output to digital media Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 40  Technology Issues (3 of 3) Input/Output Technology Linkage − Linkage between input and output in UI design is a critical factor in creating a cohesive and intuitive user experience − The linkage is not static; it evolves with technological advancements and changing use behaviors − The linkage between input and output forms the backbone of user interaction with technology − By focusing on creating a harmonious input/output linkage, designers can craft interfaces that are functional, intuitive, and engaging Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 41  Control and Security Issues (1 of 3) Input Control and Security − Input control ensures data is correct, complete, and secure  Information should be traceable  Procedures must be put in place for handling source documents − Data security policies and procedures protect data from loss or damage  Companies should have a records retention policy that meets legal requirements and business needs  Audit trail files and reports should be stored and saved Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 42  Control and Security Issues (2 of 3) Output Control and Security − Companies use output control methods to maintain output integrity and security − Output security protects privacy rights and shields the organization’s proprietary data from theft or unauthorized access − A diskless workstation is a network terminal that supports a full- featured user interface but limits the printing or copying of data Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 43  Control and Security Issues (3 of 3) Input and Output Control and Security − Input and output data control and security are measures and practices implemented to protect data as it enters a system and leaves it − This is typically achieved through the following:  Data encryption techniques  Access control and authentication mechanisms  Data integrity and validation Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 44  Emerging Trends (1 of 4) Responsive web design renders web content correctly, independently of the device in use Prototyping involves a repetitive sequence of analysis, design, modeling, and testing − Low-fidelity prototypes are basic and often rudimentary versions of the UI and are built using design prototyping − High-fidelity prototypes are more polished and interactive representations of the final product and are built using system prototyping Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 45  Emerging Trends (2 of 4) Some benefits of prototyping include the following: − Enhanced user involvement and feedback − Improved communication among stakeholders − Early identification of design and usability issues − Rapid iteration and experimentation − Improved planning and resource allocation Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 46  Emerging Trends (3 of 4) The following shortcomings of prototyping should be considered: − Lack of realism in low-fidelity prototypes − Time and resource constraints for high-fidelity prototypes − Potential misalignment with final implementation − User testing limitations − Overemphasis on design aesthetics Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 47  Emerging Trends (4 of 4) The emergence of wearable computing has influenced the landscape of UI design in the following ways: − Compactness and screen size − Context-aware and glanceable interface − Integration with other devices and services − New modes of interaction − Privacy and data security Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 48  Knowledge Check Activity 7-3 What are three emerging trends in UI design? Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 49  Knowledge Check Activity 7-3: Answer What are three emerging trends in UI design? Answer: Three emerging trends in UI design are responsive web design, prototyping, and wearable computing. Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 50  Self Assessment How has input technology changed in recent years? How would you rank the 10 guidelines for UI design in order of importance? Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 51  Summary (1 of 2) Now that the lesson has ended, you should be able to: 1. Explain user interfaces. 2. Explain the concept of human-computer interaction. 3. Summarize the seven habits of successful interface designers. 4. Summarize the 10 guidelines for user interface design. 5. Design effective source documents and forms. Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 52  Summary (2 of 2) Now that the lesson has ended, you should be able to (continued): 6. Explain report design techniques for printed output. 7. Discuss output and input technology issues. 8. Describe output and input security and control issues. 9. Explain emerging user interface trends. Scott Tilley, Systems Analysis and Design, 13th Edition. © 2025 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 53