Systems Analysis and Design Slides adapted from Jeffrey A. Hoffer, University of Dayton Joey F. George, Florida State University Joseph S. Valacich, Washington State University Modern Systems Analysis and Design, 4/E, Pearson Prentice Hall, 2004 Chapter 12 Designing Interfaces and Dialogues Objectives Explaining the process of interface and dialogue design. Understanding methods for interacting with a system. Describing various input devices and factors affecting their usability. Presenting guidelines for designing interface layout, data entry field structure, feedback, and system help. Defining design of graphical user interfaces. 12-2 © R Gustas Interface/Dialogue Design Layout (of widgets, text, and table data) Structuring data entry (tab order) Controlling data input (validation and format controls) Feedback (prompting, status, warning, and error messages) Dialogue sequencing 12-3 © R Gustas Deliverables and Outcomes A typical interface/dialogue design specification: Similar to form design, but includes multiple forms and dialogue sequence specifications 12-4 © R Gustas Interface Methods Interface: the method by which a user interacts with the information system Common interaction methods 12-5 Command line Menu Form Object-based (Icons represent specific functions) Natural language © R Gustas Command Line Interaction Users enter explicit statements into a system to invoke operations Example from MS DOS: COPY C:PAPER.DOC A:PAPER.DOC This copies a file from the C: drive to the A: drive Includes keyboard shortcuts and function keys 12-6 © R Gustas Menu Interaction A list of system options is provided and specific command is invoked by user selection of a menu option Two common menu types: 12-7 Pop-up: menu placed near current cursor position Drop-down: access point to menu placed at top line of display, menu drops down when access point clicked © R Gustas 12-8 © R Gustas Drop-down menu 12-9 © R Gustas 12-10 © R Gustas 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 12-11 © R Gustas Poor Menu Design 12-12 © R Gustas Good Menu Design Better Menu Design 12-13 © R Gustas Form Interaction Allows users to fill in the blanks when working with a system Measures of an effective design: 12-14 Self-explanatory title and field headings Fields organized into logical groupings Distinctive boundaries Default values Displays appropriate field lengths Minimizes the need to scroll windows © R Gustas MS Visio tool can be used to design screen layouts (File=>Stencils=>Software=>Windows and Dialogs) 12-15 © R Gustas Object Interaction Symbols are used to represent commands or functions. Icons: 12-16 Graphic symbols that look like the processing option they are meant to represent Use little screen space Can be easily understood by users © R Gustas Natural Language Interaction Inputs to and outputs from system are in a conventional speaking language like English Based on research in artificial intelligence Current implementations are tedious and difficult to work with, not as viable as other interaction methods 12-17 © R Gustas Hardware Options for System Interaction Keyboard Mouse Joystick Trackball 12-18 Touch Screen Light Pen Graphics Tablet Voice © R Gustas Designing Interfaces Use standard formats similar to paper-based forms and reports Left-to-right, top-to-bottom navigation Flexibility and consistency: 12-19 Free movement between fields No permanent data storage until the user requests Each key and command assigned to one function © R Gustas Structuring Data Entry Entry Never require data that are already online or that can be computed Defaults Units Always provide default values when appropriate Make clear the type of data units requested for entry (for instance: tons, £,$, kg) Replacement Use character replacement when appropriate (e.g.: allow user to look up the value in a table) 12-20 Captioning Format Always place caption (names) adjacent to fields Justify Automatically justify data entries (text should be justified left) Help Provide context-sensitive help when appropriate Provide formatting patterns/examples © R Gustas Entering Text 12-21 © R Gustas Controlling Data Input Objective: reduce data entry errors Common sources of data entry errors in a field: 12-22 Appending: adding additional characters Truncating: losing characters Transcripting: entering invalid data Transposing: reversing sequence of characters © R Gustas Types of Validation Tests Data Type (e.g., all alphabetic or Numeric) Combinations (based on common sense) Expected Values (e.g., match with existing customer names) Missing Data (e.g., incomplete data based on dependency) 12-23 Range (e.g., 0 - 1) Reasonableness Self-checking digits (extra digit is used) Size (social security number) Templates Values (e.g., Jan, Feb …) © R Gustas Feedback Messages Status information: keep user informed of what’s going on, helpful when user has to wait for response (eg: customer, order information) Prompting cues: tell user when input is needed, and how to provide the input Enter Customer Account Number: ___-___-___ Warning or Error: inform user that something is wrong, either with data entry or system operation 12-24 No customer record found for Customer ID © R Gustas Providing Help Place yourself in user’s place when designing help Guidelines: 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 12-25 © R Gustas What is a Dialogue? A sequence of interactions between the system and a user Dialogue design involves: 12-26 Designing a dialogue sequence Building a prototype Assessing usability © R Gustas Guidelines for Dialogue Design Consistency (same terminology on all screens) Shortcuts and Sequence (special keys can be used for advanced users) Feedback (for very user action, eg: record is added) Closure (e.g.: indication of first or last screen) 12-27 Error Handling (errors should be detected and reported) Reversal (reverse actions) Control (consistent response time) Ease (e.g.: transitions to first and last screen) © R Gustas Dialogue Diagramming A formal method for designing and representing human-computer dialogues using box and line diagrams 12-28 © R Gustas Dialogue diagrams depict the sequence, conditional branching, and repetition of dialogues. 12-29 © R Gustas Summary In this chapter you learned: 12-30 The process of interface and dialogue design. To apply methods for interacting with a system. Input devices and factors affecting their usability. Guidelines for designing interface layout, data entry field structure, feedback, and system help. To design graphical user interfaces. © R Gustas