ch07DesigningtheUserandSystemInterfaces1. OverviewPoorly designed interfaces to other automated systems can be a source of errors or inefficiency.To the user of a system, the user interface is the system. 2024/8/5(1) Focus early on the users and their work(1) Focus early on the users and their workUser-oriented analysis and design tasks are performed as early as possible and are often given higher priority than other tasks.It embodies an all-encompassing attempt to understand users and answer such questions as: What do they know? How do they learn? How do they prefer to work? What motivates them?2024/8/5(2) Evaluate designs to ensure usabilityUsability refers to the degree to which a system is easy to learn and use.If the system has a variety of end users, how can the designer be sure that the interface will work well for all of them?On the other hand, if the interface is too rigid, some users will be frustrated2024/8/5(2) Evaluate designs to ensure usabilityEase of learning and ease of use are often in conflict.1.Self-explanatory and easy-to-learn interfaces are appropriate for systems that end users use infrequently. 2.But if internal users use the system all day, it is important to make the interface fast and flexible, with shortcuts, hot keys, voice commands, and information-intensive screens.2024/8/5(2) Evaluate designs to ensure usabilityUser-centered design requires testing all aspects of the user interface.Some usability testing techniques collect objective data that can be statistically analyzed to compare designs.To assess user attitudes, developers conduct formal surveys, focus group meetings, design walk-throughs(预演), paper-and-pencil evaluations, expert evaluations, formal laboratory experiments, and informal observation.2024/8/5(3) Use iterative development.Doing some analysis, then some design, then some implementation, and then repeating the processes.2024/8/53.1 Metaphors for Human-Computer Interaction3.1 Metaphors for Human-Computer InteractionTo make computers easier to use and learn, designers of early visually oriented interfaces adopted metaphors, which are analogies between features of the user interface and aspects of physical reality that users are familiar with.2024/8/53.1 Metaphors for Human-Computer Interaction3.1 Metaphors for Human-Computer InteractionThe entire display is visually similar to the surface of a physical desktop.Icons and pictures for commonly used tools are located on the left and right sides. The icons can be directly manipulated with a mouse or another pointing device.The windows in the center frame are documents that are visually similar to paper pages laid on the surface of a desk, with a sticky note attached to one of the pages.2024/8/53.1 Metaphors for Human-Computer Interaction3.1 Metaphors for Human-Computer InteractionThe dialog metaphor emphasizes the communication that occurs between a user and a computer, conceptualized as a conversation.The dialog metaphor is another way of thinking about human-computer interaction because the computer “listens to” and “ responds ” to user questions or comments, and the user “listens to ” and “ responds ” to the computers questions and comments.2024/8/54. User-Interface Design Concepts4.1 Affordance and VisibilityDonald Norman is a leading researcher inhuman-computer interaction (HCI). Norman proposes two key principles to ensure good interaction between a person and a machine: affordance and visibility.2024/8/54.1 Affordance and VisibilityAffordance(自解释性，功能可见性) means that the appearance of a specific control suggests its functionthat is, the purpose for which the control is used.Affordance can also be achieved by a user-interface control that the user is familiar with in another context.Visibility means that a control is visible so users know it is available; it also means that the control provides immediate feedback to indicate that it is responding.When a designer incorporates user-interface objects and styles from these libraries, he or she is tapping into users experience with similar user interfaces from other applications on those platforms.2024/8/54.2 ConsistencyUser interfaces should be designed for consistency in function and appearance. Why? People are creatures of habit.2024/8/54.3 ShortcutsUser interfaces and dialogs designed for novices are often an annoyance and impediment to experienced users productivity.Windows keyboard sequences Ctrl+C, Ctrl+X and Ctrl+V.2024/8/54.4 FeedbackEvery action a user takes should result in some type of feedback from the computer so the user knows the action was recognized. Feedback can take many forms in a user interface,including:Audible feedbackVisible feedback.2024/8/54.5 Dialogs That Yield ClosureEach dialog should be organized with a clear sequence a beginning, middle , and end.The user can get lost if it is not clear when a task starts and ends. In addition, users often focus intently on tasks, so when it is confirmed that a task is complete, the user can clear his or her mind and get ready to focus on the next task.2024/8/54.6 Error HandlingUser errors are a waste of the time to commit and to correct them.A good user interface design anticipates common errors and helps the user to avoid them.One way to do this is to limit available options, presenting the user with only valid options for a specific point in a dialog. When errors do occur, the user interface needs mechanisms to detect then. Validation techniques are useful for catching errors, but the system must also help the user correct the error. 2024/8/54.6 Error Handling When the system does find an error, the error message should state specifically what is wrong and explain how to correct it.The customer information entered is not valid. Try again.This message doesnt explain what is wrong or what to do next.The date of birth entered is not valid. Check to be sure only numeric characters in appropriate ranges are entered in the Date of Birth field.The system also should streamline corrective actions.2024/8/54.7 Easy Reversal of ActionsUsers need to feel that they can explore options and take actions that can be cancelled or reversed without difficulty. For example:Trash To permit action reversal is structuring dialogs and corresponding system actions. 2024/8/54.8 Reducing Short-Term Memory LoadPeople have many limitations, and short-term memory is one of the biggest.User-interface designers should avoid requiring the user to remember anything from one form to another or from one dialog box to another during an interaction with the system. If the user has to stop and ask “What was the filename? The customer ID? The product description?”then the design is placing too much of a burden on the users memory.2024/8/55. The Transition from Analysis to UI Design5. The Transition from Analysis to UI DesignThe foundation for user-interface design is laid when use cases are identified and documented.Use cases that require direct user interaction (i.e., interactive use cases) are the starting point for a dialog, and the corresponding use case, activity, and system sequence diagrams are the initial dialog documentation.2024/8/55. The Transition from Analysis to UI Design5. The Transition from Analysis to UI DesignDialog and user-interface design can proceed in either a top-down or bottom-up fashion. In the top-down approach, menus (groups of related use cases, dialogs, and user interfaces) are defined first, followed by a detailed description of each interactive use case dialog and development of the related user-interface elements.In the bottom-up approach, interactive use cases are prioritized, and related dialogs and user interfaces are developed one at a time.2024/8/55.1 Use Cases and the Menu HierarchyMenus are a way of grouping large numbers of related use cases or dialogs within a user interface.How does a designer decide which use cases and user interfaces to include in which menus, which menus are required, and how many menu levels are required? Menus usually contain five to 10 choices in order to avoid overloading the user2024/8/55.1 Use Cases and the Menu Hierarchy2024/8/55.1 Use Cases and the Menu Hierarchy2024/8/5Each menu collects uses cases from one subsystem for a customer or internalsales representative. A dialog design is created for each menu option. Menus usually include options that are not activities or use cases from the event list. 2024/8/55.2 Dialogs and StoryboardsAfter identifying all required dialogs, the designers must document the dialogs . Designers can also document dialog designs by writing out how the user and system might interact if they were two people engaged in conversation.Consider the Check out shopping cart use case for the RMO CSMS. A dialog between the system and user might follow this pattern:SYSTEM: What would you like to do?USER: Id like to check out.SYSTEM: Okay. What is your e-mail address or account number?USER: My e-mail address is nwells22gmail.com.SYSTEM: Fine. You are Nancy Wells at 1122 Silicon Avenue. Correct?USER: Yes.2024/8/55.2 Dialogs and StoryboardsSYSTEM: All items in your cart are in stock and can be shipped today. Because your order subtotal is over $100, you qualify for free UPS ground shipping (35 days). Other shipping options include next day ($35.00), two day ($20.00), and USPS parcel post ($11.70, 57 days). How would you like your items to be shipped?USER: Free UPS ground shipping.SYSTEM: We have a shipping address on file for you (1122 Silicon Avenue). Do you want your order shipped to that address?USER: No.SYSTEM: To what address would you like the order shipped?USER: John Wells, 1612 Jefferson Street NE, Albuquerque, NM 87123.2024/8/55.2 Dialogs and StoryboardsSYSTEM: Okay, the total charge is $125.56 ($117.90 item subtotal plus $7.66 sales tax). Shall I charge that amount to your credit card on file (a Visa with an account number ending in 0899)?USER: Yes.SYSTEM: Your payment has been approved, and your order is being prepared for shipment. A confirmation e-mail has been sent to you, and another will be sent with a shipment tracking number when the order is shipped later today. Can I help you with anything else?USER: No.2024/8/55.2 Dialogs and StoryboardsStoryboarding that is, showing a sequence of sketches of the display screen during a dialog.The screen formats are primitive though sufficiently detailed to show all the information presented to and entered by the user.2024/8/56. User-Interface DesignAs computing devices have proliferated, available devices and technologies for user interfaces have grown more powerful and diverse.Despite user interfaces wide range of sizes and capabilities, some of their features are used on nearly all computing devices. We begin with a discussion of the common features and then delve into differences.2024/8/56.1 Interface Layout and FormattingHigh-quality interfaces are well laid out, with the fields easily identified and understood. One of the best methods to ensure that interfaces are well laid out is to prototype various alternatives and let users test them.2024/8/56.1 Interface Layout and FormattingAs you design your interfaces, you should think about these:ConsistencyAll the forms within a system need to have the same look and feel.Labels and headingsLabels should also be easy to identify and read.Distribution and orderRelated fields are usually placed next to each other and can be grouped within a box. Tab order (movement of the cursor or input focus) should follow the users usual reading order (left to right and top to bottom in the United States and Europe). Blank space should be used so content is easy to distinguish and read.Fonts and colorsVariations in font face and size can help users distinguish different parts of the form, but only a handful of font and size variations should be used for larger screens and as few as possible should be used for small screens.2024/8/56.2 Data EntrySeveral types of data-entry controls are widely used in user interfaces, including: Text box List box Combo box Radio buttons Check boxesThe natural flow of the form is top to bottom, with related fields placed together. Navigation and close buttons are easily found but arent in the way of data-entry activity. 2024/8/56.3 ConsistencyConsistency is especially critical within Web sites because most sites contain a large number of pages that serve many different purposes and audiences.Cascading style sheets (CSS) are a Web page encoding standard, and they enable a Web site designer to specify parts of a page that will always look the same and parts that will vary by task or audience.2024/8/56.4 Performance ConsiderationsA trade-off exists between the amount of information transmitted between the users computing device and the server and the time it takes for the page to refresh; the more information that is transmitted, the longer the delay.Designers of Web-based user interfaces must perform a careful balancing act, providing embedded “ intelligence ” within a page to avoid refreshes but not overloading page content so as to avoid long delays when the user moves from page to page.2024/8/56.5 Pictures, Video, and SoundCompatibility issues arise for sound and video because there are so many ways in which they can be encoded. Most Web browsers rely on add-on components (sometimes called plug-ins) to play sounds and music and to display video.2024/8/56.6 Users with DisabilitiesDesigners of all user interfaces must be sensitive to the special needs of persons with disabilities.Because the Web is such a fundamental resource in the modern world, standards have been developed to ensure maximal usability for those who are visually impaired or have limited dexterity. 2024/8/56.7 Additional Guidelines for Handheld Devices6.7 Additional Guidelines for Handheld DevicesDesigning Web and app-based user interfaces for handheld devices presents additional design challenges, including:1.Small screen size2.Small keyboards and touch screens3.Limited network capacity4.App design guidelines and toolkits2024/8/57. Identifying System InterfacesInputs from and outputs to other systemsThese are direct interfaces normally formatted as network messages. Electronic data interchange (EDI) and many Web-based systems are integrated with other systems through direct messaging. For example, in RMOs integrated supply chain management system and its customer support system, the arrival of inventory items from a supplier might trigger the shipment of a back-ordered item to a customer.Highly automated inputs and outputsThese are captured by devices (such as scanners) or generated by persons who start a process that proceeds without further human intervention. Monthly statements can be printed and mailed through highly automated systems that place the statements within envelopes, apply postage, presort them by ZIP code, and batch them for delivery to the post office.Inputs and outputs to external databases (ETL)2024/8/57. Identifying System Interfaces2024/8/57. Identifying System InterfacesModern EDI messages are generally formatted in Extensible MarkupLanguage (XML), JSON.2024/8/58. Designing System InputsWhen designing inputs for a system, the system developer must focus on three areas: Identifying the devices and mechanisms that will be used to enter input Identifying all system inputs and developing a list with the data content of each Determining what kinds of controls are necessary for each system input2024/8/58.1 Automated Input DevicesThe primary objective is to enter or update error-free data into the system. The key term here is error-free. Several good practices can help reduce input errors: Use electronic devices and automatic entry whenever possible. Avoid human involvement as much as possible. If the information is available in electronic form, use that instead of reentering the information. Validate and correct information at the time and location it is entered.2024/8/58.1 Automated Input DevicesHere are some of the more common devices used to avoid human keystroking: Magnetic card strip readers Bar-code readers Optical character recognition readers and scanners Radio-frequency identification tags Touch screens and devices Electronic pens and writing surfaces Digitizers, such as digital cameras and digital audio devices Speech-recognition software2024/8/58.2Defining the Details of System InputsThe information from the tax bureau can be sent as a set of real-time messages or in the form of a downloaded input file.2024/8/59. Designing System OutputsThe primary purpose of system outputs is to present information in the right place at the right time to the right people. The tasks in this activity focus on four areas: Determining the type of each system output Making a list of require Specifying any necessary controls to protect the information provided in the output Designing and prototyping the output2024/8/59.1.1 Report Types9.1.1 Report TypesThere are four types of output reports commonly provided by an information system: Detailed reportsThese contain specific information on business Transactions Summary reportsThese are often used to recap periodic activity. Exception reportsThese provide details or summary information about transactions or operating results that fall outside of a predefined normal range of values. Executive reportsThese are used by high-level managers to assess overall organizational health and performance. 2024/8/59.1.2 Internal versus External Outputs Some external outputs are referred to as turn around documents because they are sent to a customer but include a tear-off portion that is returned for input later, such as a bill that contains a payment stub to be returned with a check.2024/8/5RMO shopping cart order report2024/8/5An example of an internal output based on inventory records.2024/8/59.1.3 Electronic ReportsElectronic reports provide great flexibility in the organization and presentation of information.For example, an electronic report can provide links to further information.One technique, called drill down, allows the user to activate a “hot spot Hyper link ” on the report, which tells the system to display a lower-level report that provides more detailed information. 2024/8/59.1.3 Electronic Reports2024/8/59.1.3 Electronic Reports2024/8/59.1.4 Graphical and Multimedia Presentation9.1.4 Graphical and Multimedia Presentation2024/8/5结束结束