Modern Systems Analysis and Design PDF

Modern Systems Analysis and Design Eighth Edition, Global Edition Joseph S. Valacich Joey F. George Designing Interfaces and Dialogues Chapter 11 Copyright © 2017 Pearson Educ...

Modern Systems Analysis and Design Eighth Edition, Global Edition Joseph S. Valacich Joey F. George Designing Interfaces and Dialogues Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-1 Learning Objectives ✓ Explain the process of designing interfaces and dialogues and the deliverables for their creation. ✓ Contrast and apply several methods for interacting with a system. ✓ Describe and apply the general guidelines for designing interfaces and specific guidelines for layout design, structuring data entry fields, providing feedback, and system help. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-2 Learning Objectives (Cont.) ✓ Design human-computer dialogues and understand how dialogue diagramming can be used to design dialogues. ✓ Design graphical user interfaces. ✓ Discuss guidelines for the design of interfaces and dialogues for Internet-based electronic commerce systems. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-3 Interface Design and Dialogues ◼ Defining the manner in which humans and computers exchange inform ◼ Interface design – focuses on how information is provided to and captured from users ◼ Dialogues – analogous to a conversation between two people Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-4 Designing Interfaces and Dialogues ◼ User-focused activity ◼ Prototyping methodology of iteratively:  Collectinginformation  Constructing a prototype  Assessing usability  Making refinements ◼ Must answer the who, what, when, where, and how questions Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-5  Designing Interfaces and Dialogues (Cont.) FIGURE 11-1 Systems development life cycle (SDLC) Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-6 Deliverables and Outcomes ◼ Creation of a design specification  A typical interface/dialogue design specification is similar to form design, but includes multiple forms and dialogue sequence specifications. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-7 Deliverables and Outcomes (Cont.) ◼ The specification includes:  Narrativeoverview  Sample design  Testing and usability assessment  Dialogue sequence ◼ Dialogue sequence—the ways a user can move from one display to another Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-8  Figure 11-2 Specification outline for the design of interfaces and dialogues Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-9 Interaction Methods and Devices ◼ Interface: a method by which users interact with an information system ◼ All human-computer interfaces must:  have an interaction style, and  use some hardware device(s) for supporting this interaction. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-10 Methods of Interacting ◼ Command line  Includes keyboard shortcuts and function keys ◼ Menu ◼ Form ◼ Object-based ◼ Natural language Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-11  Command Language Interaction ◼ Command language interaction: a human-computer interaction method whereby users enter explicit statements into a system to invoke operations ◼ Example from Linux command prompt: $ cp file.doc newfile.doc  Makes a copy of file.doc and names it newfile.doc  The dollar sign is the command prompt from Linux, not part of the command itself. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-12 Menu Interaction ◼ Menu interaction: a human-computer interaction method in which a list of system options is provided and a specific command is invoked by user selection of a menu option ◼ Pop-up menu: a menu-positioning method that places a menu near the current cursor position Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-13 Menu Interaction (Cont.) ◼ Drop-down menu is a menu-positioning method that places the access point of the menu near the top line of the display.  When accessed, menus open by dropping down onto the display.  Visual editing tools help designers construct menus. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-14  Figure 11-5 Various types of menu configurations (Source: Based on Shneiderman et al., 2009.) Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-15 Menu Interaction (Cont.) ◼ Guidelines for Menu Design  Wording — meaningful titles, clear command verbs, mixed upper/lower case  Organization — consistent organizing principle  Length — all choices fit within screen length  Selection — consistent, clear and easy selection methods  Highlighting — only for selected options or unavailable options Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-16 Menu Interaction (Cont.) FIGURE 11-8 Menu building with Microsoft Visual Basic.NET (Source: Microsoft Corporation.) Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-17 Form Interaction ◼ Form interaction: a highly intuitive human-computer interaction method whereby data fields are formatted in a manner similar to paper-based forms  Allows users to fill in the blanks when working with a system. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-18  Form Interaction (Cont.) FIGURE 11-9 Example of form interaction from the Google Advanced Search Engine (Source: Google.) Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-19 Object-Based Interaction ◼ Object-based interaction: a human- computer interaction method in which symbols are used to represent commands or functions ◼ Icons: graphical pictures that represent specific functions within a system  Use little screen space and are easily understood by users Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-20  Object-Based Interaction (Cont.) Figure 11-10 Object-based (icon) interface from the Option menu in the Firefox Web browser (Source: Mozilla Firefox.) Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-21 Natural Language Interaction ◼ Natural language interaction: a human- computer interaction method whereby inputs to and outputs from a computer-based application are in a conventional spoken language such as English ◼ Based on research in artificial intelligence ◼ Current implementations are tedious and difficult to work with, not as viable as other interaction methods. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-22 Hardware Options for System Interaction ◼ Keyboard ◼ Touch screen ◼ Mouse ◼ Light Pen ◼ Joystick ◼ Graphics Tablet ◼ Trackball ◼ Voice Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-23 Usability Problems with Hardware Devices ◼ Visual Blocking  Extent to which device blocks display when using ◼ User Fatigue  Potential for fatigue over long use ◼ Movement Scaling  Extent to which device movement translates to equivalent screen movement ◼ Durability  Lack of durability or need for maintenance (e.g., cleaning) over extended use Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-24 Usability Problems with Hardware Devices (Cont.) ◼ Adequate Feedback  Extent to which device provides adequate feedback for each operation ◼ Speed  Cursor movement speed ◼ Pointing Accuracy  Ability to precisely direct cursor Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-25 Usability Problems with Hardware Devices (Cont.) Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-26 Usability Problems with Hardware Devices (Cont.) Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-27 Designing Interfaces ◼ Forms have several general areas in common:  Header information  Sequence and time-related information  Instruction or formatting information  Body or data details  Totals or data summary  Authorization or signatures  Comments Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-28  Figure 11-11 Paper-based form for reporting customer sales activity (Pine Valley Furniture) Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-29 Designing Interfaces (Cont.) ◼ Use standard formats similar to paper- based forms and reports. ◼ Use left-to-right, top-to-bottom navigation. Figure 11-13a Proper flow between data entry field (Source: Microsoft Corporation.) Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-30 Structuring Data Entry Entry Never require data that are already online or that can be computed Defaults Always provide default values when appropriate Units Make clear the type of data units requested for entry Replacement Use character replacement when appropriate Captioning Always place a caption adjacent to fields Format Provide formatting examples Justify Automatically justify data entries Help Provide context-sensitive help when appropriate Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-31 Controlling Data Input ◼ Objective: Reduce data entry errors ◼ Common sources of data entry errors in a field:  Appending: adding additional characters  Truncating: losing characters  Transcripting: entering invalid data  Transposing: reversing sequence of characters Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-32 Validation Tests and Techniques ◼ Class or Composition  Test to ensure that data are of proper type (e.g., all numeric, all alphabetic, all alphanumeric) ◼ Combinations  Test to see if the value combinations of two or more data fields are appropriate or make sense (e.g., Does the quantity sold make sense given the type of product?) Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-33 Validation Tests and Techniques ◼ Expected Values  Test to see if data are what is expected (e.g., match with existing customer names, payment amount, etc.) ◼ Missing Data  Test for existence of data items in all fields of a record (e.g., Is there a quantity field on each line item of a customer order?) Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-34 Validation Tests and Techniques ◼ Pictures/Templates  Test to ensure that data conform to a standard format (e.g., Are hyphens in the right places for a student ID number?) ◼ Range  Test to ensure data are within proper range of values (e.g., Is a student’s grade point average between 0 and 4.0?) Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-35 Validation Tests and Techniques ◼ Reasonableness  Test to ensure data are reasonable for situation (e.g., pay rate for a specific type of employee) ◼ Self-Checking Digits  Test where an extra digit is added to a numeric field in which its value is derived using a standard formula Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-36 Validation Tests and Techniques ◼ Size  Test for too few or too many characters (e.g., Is social security number exactly nine digits?) ◼ Values  Test to make sure values come from set of standard values (e.g., two-letter state codes) Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-37 Providing Feedback ◼ Three types of system feedback:  Status information: keep user informed of what’s going on, helpful when user has to wait for response  Prompting cues: tell user when input is needed, and how to provide the input  Error or warning messages: inform user that something is wrong, either with data entry or system operation Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-38 Providing Help ◼ Place yourself in user’s place when designing help. ◼ Guidelines for designing usable help:  Simplicity — Help messages should be short and to the point.  Organize — Information in help messages should be easily absorbed by users.  Show — It is useful to explicitly show users how to perform an operation. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-39 Types of Help Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-40 Designing Dialogues ◼ Dialogue: the sequence of interaction between a user and a system ◼ Dialogue design involves:  Designing a dialogue sequence.  Building a prototype.  Assessing usability. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-41 Designing the Dialogue Sequence ◼ Typical dialogue between user and Customer Information System:  Request to view individual customer information.  Specify the customer of interest.  Select the year-to-date transaction summary display.  Review the customer information.  Leave system. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-42 Guidelines for Designing Human-Computer Dialogues ◼ Consistency ◼ ErrorHandling ◼ Shortcuts and ◼ Reversal Sequence ◼ Control ◼ Feedback ◼ Ease ◼ Closure Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-43 Designing the Dialogue Sequence (Cont.) ◼ Dialogue diagramming: a formal method for designing and representing human- computer dialogues using box and line diagrams Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-44  Designing the Dialogue Sequence (Cont.) ◼ Three sections of the box:  Top—contains a unique display reference number used by other displays for referencing it  Middle—contains the name or description of the display  Bottom—contains display reference numbers that can be accessed from the current display Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-45  Designing the Dialogue Sequence (Cont.) FIGURE 11-17 Sections of a dialogue diagramming box Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-46 Designing the Dialogue Sequence (Cont.) ◼ Dialogue diagrams depict the sequence, conditional branching, and repetition of dialogues. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-47 Designing the Dialogue Sequence (Cont.) FIGURE 11-18 Dialogue diagram illustrating sequence, selection, and iteration Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-48 Designing the Dialogue Sequence (Cont.) Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-49 Building Prototypes and Assessing Usability ◼ Optional activities ◼ Building prototype displays using a graphical development environment  Example: Microsoft’s Visual Studio.NET  Easy-to-use input and output (form, report, or window) design utilities Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-50 Graphical Interface Design Issues ◼ Become an expert user of the GUI environment.  Understand how other applications have been designed.  Understand standards. ◼ Understand the available resources and how they can be used.  Become familiar with standards for menus and forms. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-51  Graphical Interface Design Issues (Cont.) Figure 11-21 Highlighting GUI design standards (Source: University of Arizona.) Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-52 Electronic Commerce Application: Designing Interfaces and Dialogues for Pine Valley Furniture WebStore ◼ Central and critical design activity ◼ Where customer interacts with the company  Care must be put in design! ◼ Prototyping design process is most appropriate to design the human interface. ◼ Several general design guidelines have emerged. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-53 General Guidelines ◼ Web’s single “click-to-act” method of loading static hypertext documents (i.e. most buttons on the Web do not provide click feedback) ◼ Limited capabilities of most Web browsers to support finely grained user interactivity Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-54 General Guidelines ◼ Limited agreed-upon standards for encoding Web content and control mechanisms ◼ Lack of maturity of Web scripting and programming languages as well as limitations in commonly used Web GUI component libraries Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-55 Designing Interfaces and Dialogues for Pine Valley Furniture ◼ Key feature PVF wants for their WebStore:  Incorporate “menu-driven navigation with cookie crumbs” into design of interface Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-56 Menu-Driven Navigation with Cookie Crumbs ◼ Cookie crumbs: the technique of placing “tabs” on a Web page that show a user where he or she is on a site and where he or she has been  Allow users to navigate to a point previously visited and will assure they are not lost  Clearly show users where they have been and how far they have gone from home Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-57 Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-58 Summary ◼ In this chapter you learned how to: ✓ Explain the process of designing interfaces and dialogues and the deliverables for their creation. ✓ Contrast and apply several methods for interacting with a system. ✓ Describe and apply the general guidelines for designing interfaces and specific guidelines for layout design, structuring data entry fields, providing feedback, and system help. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-59 Summary (Cont.) ✓ Design human-computer dialogues and understand how dialogue diagramming can be used to design dialogues. ✓ Design graphical user interfaces. ✓ Discuss guidelines for the design of interfaces and dialogues for Internet-based electronic commerce systems. Chapter 11 Copyright © 2017 Pearson Education, Ltd. 11-60