Chapter 12 Designing Interfaces and Dialogues Modern Systems Analysis and Design Fourth Edition Jeffrey A. Hoffer Joey F. George Joseph S. Valacich Chapter 12 Designing Interfaces and Dialogues

Learning Objectives Explain the process of interface and dialogue design. Contrast and apply methods for interacting with a system. List and describe various input devices and factors affecting their usability. Describe guidelines for designing interface layout, data entry field structure, feedback, and system help. Design graphical user interfaces.

Interface/Dialogue Design Layout (of text, and table data) Structuring data entry Controlling data input (validation and format controls) Feedback (prompting, status, warning, and error messages) Dialogue sequencing

Deliverables and Outcomes A typical interface/dialogue design specification: Similar to form design, but includes multiple forms and dialogue sequence specifications

Characteristics for Consideration User: experience, skills, motivation, education, personality Tasks: differ in amount of information that must be obtained or provided Task demands: time pressure, cost of errors, work durations (fatigue) System: the platform on which the system is constructed will influence interaction styles and devices. Environment: social issues: user’s role and status physical issues: lighting, sound, task interruptions, temperature, humidity

Interface Methods Interface: the method by which a user interacts with the information system Common interaction methods Command line Menu Form Object-based Natural language

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

Interface Methods Interface: the method by which a user interacts with the information system Common interaction methods Command line Menu Form Object-based Natural language

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: 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

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 (gray text)

Good Menu Design

Visual editing tools help designers construct menus.

Interface Methods Interface: the method by which a user interacts with the information system Common interaction methods Command line Menu Form Object-based Natural language

Form Interaction Allows users to fill in the blanks when working with a system Measures of an effective design: 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

Interface Methods Interface: the method by which a user interacts with the information system Common interaction methods Command line Menu Form Object-based Natural language

Object Interaction Symbols are used to represent commands or functions. Icons: Graphic symbols that look like the processing option they are meant to represent Use little screen space Can be easily understood by users

Interface Methods Interface: the method by which a user interacts with the information system Common interaction methods Command line Menu Form Object-based Natural language

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 feasible as other interaction methods

Hardware Options for System Interaction Keyboard Mouse Joystick Trackball Touch Screen Light Pen Graphics Tablet Voice

Usability Problems with Hardware Devices Visual Blocking (device blocks display when using) touch screen, light pen User Fatigue (potential for fatigue over long use) Movement Scaling (device movement translates to equivalent screen movement) keyboard, mouse, joystick, trackball, graphics tablet, voice Durability (need for maintenance) trackball, touch screen Adequate Feedback (device provides adequate feedback) keyboard, mouse, joystick, trackball, graphics tablet, voice Speed (cursor movement) keyboard Pointing Accuracy (ability to precisely direct cursor joystick, touch screen, light pen, voice

Designing Interfaces Use standard formats similar to paper-based forms and reports Left-to-right, top-to-bottom navigation Flexibility and consistency: Free movement between fields No permanent data storage until the user requests Each key and command assigned to one function

Structuring Data 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 (by looking up a value in a table, or automatic filling the rest of a word) Captioning Always place a caption adjacent to fields Format Provide formatting examples (like $ or decimal point) Justify Automatically justify data entries Help Provide context-sensitive help when appropriate

Entering Text

Controlling Data Input Objective: reduce data entry errors Common sources data entry errors in a field: Appending: adding additional characters Truncating: losing characters Transcripting: entering invalid data Transposing: reversing sequence of characters

Types of Validation Tests Class or Composition Type check Combinations Check if reasonable, E.g.: quantity of sold + type of product? Expected Values E.g. Match with existing customer Missing Data E.g. All fields of a record Pictures/Templates Standard format, E.g.hyphens …

Range Reasonableness Self-checking Digits Size Values For situation 9 digit ID Values Come from set of standards: Two-letter state code

Feedback Messages 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 Warning or Error: inform user that something is wrong, either with data entry or system operation

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

What is a Dialogue? A sequence of interactions between the system and a user Dialogue design involves: Designing a dialogue sequence Building a prototype Assessing usability

Guidelines for Dialogue Design Consistency Shortcuts and Sequence Feedback Closure (clear start, and end) Error Handling Reversal Control Ease

Dialogue Diagramming A formal method for designing and representing human-computer dialogues using box and line diagrams

Dialogue diagrams depict the sequence, conditional branching, and repetition of dialogues.

Designing Interfaces and Dialogues in Graphical Environments Become an expert user of the GUI environment. Understand how other applications have been designed. Understand standards. Gain an understanding of the available resources and how they can be used. Become familiar with standards for menus and forms.

GUI Window Properties That Can Be Turned On or Off Modality: require user to finish action before proceeding Resizable: allow user to change size of window Movable: allow user to reposition window Maximize: allow user to make window take entire screen Minimize: allow user to completely hide window System menu: allow window to have access to system level functions

GUI Dialogue Design Issues Goal is to establish the sequence of displays that users will encounter when working with system. Ability of some GUI environments to jump from application to application or screen to screen makes sequencing a challenge. One approach is to make users always resolve requests for information before proceeding. Dialogue diagramming helps analysts better manage the complexity of designing graphical interfaces.

Summary In this chapter you learned how to: Explain the process of interface and dialogue design. Contrast and apply methods for interacting with a system. List and describe various input devices and factors affecting their usability. Describe guidelines for designing interface layout, data entry field structure, feedback, and system help. Design graphical user interfaces.