Interface Design and Interaction Methods

Modern Systems Analysis and Design, Chapter 11

• 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, specific guidelines for layout design, structuring data entry fields, providing feedback, and system help.
  • 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

Interface Design and Dialogues

• Interface: The method by which users interact with an information system. Focuses on how information is provided to and captured from users.
• Dialogues: Analogous to a conversation between two people.

Designing Interfaces and Dialogues

• User-focused activity: Prototyping methodology is used iteratively
  • Collecting information
  • Constructing a prototype
  • Assessing usability
  • Making refinements
• Must answer who, what, when, where, and how questions

Designing Interfaces and Dialogues (Cont.)

• Systems Development Life Cycle (SDLC): The process of developing systems, includes planning, analysis, design, implementation, and maintenance.
• Deliverables and Outcomes:
  • Creating a design specification, which is similar to form design, but includes multiple forms and dialogue sequence specifications.
  • The specification includes:
    • Narrative overview
    • Sample design
    • Testing and usability assessment
    • Dialogue sequence (how users move between displays).

Interface Design and Dialogues Design Specification Outline

• Narrative Overview: Interface/Dialogue Name, User Characteristics, Task Characteristics, System Characteristics, Environmental Characteristics
• Interface/Dialogue Designs: Form/Report Designs, Dialogue Sequence Diagram(s) and Narrative Description
• Testing and Usability Assessment: Testing Objectives, Testing Procedures, Testing Results (Time to Learn, Speed of Performance, Rate of Errors, Retention over Time, User Satisfaction and Other Perceptions)

Interaction Methods and Devices

• Interface: A method by which users interact with an information system.
• All human-computer interfaces must:
  • Have an interaction style.
  • Use some hardware device(s) for supporting the interaction.

Methods of Interacting

• Command line (includes keyboard shortcuts and function keys)
• Menu
• Object-based
• Natural language

Command Language Interaction

• Command language interaction: A human-computer interaction method where users enter explicit statements into a system to invoke operations.
• Example (from Linux command prompt): $ cp file.doc newfile.doc (copies file.doc and names it newfile.doc). The dollar sign is the command prompt, not part of the command itself.

Menu Interaction

• Menu interaction: A human-computer interaction method where a list of system options are provided, and a command is invoked by selecting a menu option.
• Pop-up menu: A menu-positioning method that places the menu near the current cursor position.
• Drop-down menu: A menu-positioning method that places the access point of the menu near the top line of the display.

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

Form Interaction

• Form interaction: A highly intuitive human-computer interaction method where data fields are formatted similarly to paper-based forms. Allows users to fill in the blanks when working with a system.

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)

Natural Language Interaction

• Natural language interaction: A human-computer interaction method where inputs and outputs from a computer-based application use a conventional spoken language (e.g., English).
• Based on Artificial Intelligence research.
• Current implementations are tedious and difficult to use.

Hardware Options for System Interaction

• Keyboard
• Mouse
• Joystick
• Trackball
• Touch screen
• Light Pen
• Graphics Tablet
• Voice

Usability Problems with Hardware Devices

• Visual Blocking: The extent to which the device blocks the display when in use.
• User Fatigue: Potential for fatigue over long use.
• Movement Scaling: The extent to which device movement translates to equivalent screen movement.
• Durability: Lack of durability or need for maintenance (e.g., cleaning) over extended use.
• Adequate Feedback: Extent to which device provides adequate feedback for each operation.
• Speed (Cursor movement speed)
• Pointing Accuracy: Ability to precisely direct the cursor
• Tables summarizing different device usability problems are included

Designing Interfaces

• Forms have header information, sequence and time-related information, instruction or formatting, body of details, totals or data summary, authorization or signatures, comments.
• Use standard formats similar to paper-based forms and reports.
• Use left-to-right, top-to-bottom navigation.

Structuring Data Entry

• Entry: Never require data already online or that can be computed.
• Defaults: Always provide appropriate default values.
• Units: Make the type of data units clear.
• Replacement: Use character replacement when appropriate.
• Captioning: Place captions adjacent to fields.
• Format: Provide formatting examples.
• Justify: Automatically justify data entries.
• Help: Provide appropriate context-sensitive help.

Controlling Data Input

• Objective: Reduce data entry errors.
• Common sources of errors:
  • Appending extra characters
  • Truncating characters
  • Transcribing invalid data
  • Transposing character sequence

Validation Tests and Techniques

• Class or Composition Validation: Ensure data is of the proper type (e.g., numeric, alphabetic).
• Combinations Validation: Test if the value combinations of multiple data fields are appropriate and make sense.
• Expected Value Validation: Test if data matches existing values (e.g., customer names, amounts).
• Missing Data Validation: Test for the existence of data in all fields of a record.
• Pictures/Templates Validation: Test if data conforms to a standard format.
• Range Validation: Test if data is within a proper value range.
• Reasonableness Validation: Ensure data is reasonable given specific situations.
• Self-Checking Digits Validation: Test methods like adding an extra digit to verify data validity using a standard formula.
• Size Validation: Ensure number of characters is appropriate.
• Values Validation: Ensure data is from a set of standard values (e.g., state codes).

Providing Feedback

• Types of Feedback:
  • Status information: Keeps the user informed of the system's current state, useful for waiting periods.
  • Prompting cues: Tells the user when input is needed and how to provide it.
  • Error or Warning messages: Informs the user of errors, either in data entry or system operation.

Providing Help

• Place yourself in the user's place.
• Guidelines for usable help:
  • Simplicity: Help messages should be short and to the point.
  • Organization: Help information should be organized for ease of absorption.
  • Show: Help should explicitly show users how to perform an operation.

Types of Help

• Table listing example help questions (e.g., How do I get help? What is a customer record?)

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

Designing the Dialogue Sequence

• Example of a typical customer information system dialogue sequence

Guidelines for Designing Human-Computer Dialogues

• Consistency
• Error Handling
• Shortcuts and Sequence
• Feedback
• Reversal
• Control
• Ease
• Closure

Designing the Dialogue Sequence (Cont.)

• Dialogue diagramming: A formal method for designing and representing human-computer dialogues using box and line diagrams. Three sections of the box:
  • Top: Unique display reference number
  • Middle: Name or description of the display
  • Bottom: Reference numbers of return displays

Designing the Dialogue Sequence (Cont.)

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

Building Prototypes and Assessing Usability

• Optional activities: Building prototype displays using graphical development environments (example: Microsoft's Visual Studio .NET). Easy-to-use input and output (form, report, or window) design utilities.

Graphical Interface Design Issues

• Become an expert user of the GUI environment.
• Understand how other applications have been designed.
• Understand the available resources and how they can be used.
• Understand standards.
• Become familiar with standards for menus and forms. Includes design examples and standards for GUI elements (e.g., menu organization, buttons, etc.)

Electronic Commerce Application

• Central and critical design activity (where customer interacts with company)
• Care must be put in design.
• Prototyping design process is most appropriate to design the human interface.
• Several general design guidelines have emerged.

General Guidelines

• Web's single “click-to-act” method of loading static hypertext documents (most buttons on the Web do not provide click feedback).
• Limited capabilities of most Web browsers to support finely grained user interactivity.
• 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.

Designing Interfaces and Dialogues for Pine Valley Furniture

• Key feature for PVF WebStore is to incorporate "menu-driven navigation with cookie crumbs" into design.

Cookie Crumbs

• Placing tabs on a Web page to show a user where they are on the site and their previous locations. Allows users to navigate previously visited points. Clearly shows navigation history.

Common Errors When Designing Websites (Table)

• Table listing several common errors in Web design like opening new browser windows, complex URLs, or lack of navigation support.

Summary

• Summary of the main points of the chapter.