chapter 3c designing interfaces and dialogues

© 2005 by Prentice Hall© 2005 by Prentice Hall

Chapter 3cDesigning Interfaces and

Dialogues

© 2005 by Prentice Hall© 2005 by Prentice Hall12-2

Learning ObjectivesExplain the process of interface and dialogue

design and the deliverables.Contrast and apply methods for interacting with a

system.Describe guidelines for designing interface layout,

data entry field structure, feedback, and system help.

Design human-computer dialogues and understand how dialogue diagramming can be used.

© 2005 by Prentice Hall© 2005 by Prentice Hall12-3

© 2005 by Prentice Hall© 2005 by Prentice Hall12-4

A typical interface/dialogue design specification:

Similar to form design, but includes multiple forms and dialogue sequence specifications

Deliverables and Outcomes

© 2005 by Prentice Hall© 2005 by Prentice Hall12-5

INTERFACE METHODS

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

© 2005 by Prentice Hall© 2005 by Prentice Hall12-6

Command Line Interaction

Users enter explicit statements into a system to invoke operationsExample from MS DOS: COPY C:PAPER.DOC A:PAPER.DOC This copies a file from the C: drive to the A:

driveIncludes keyboard shortcuts and function keys

© 2005 by Prentice Hall© 2005 by Prentice Hall12-7

Menu Interaction

A list of system options is provided and specific command is invoked by user selection of a menu optionTwo 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

© 2005 by Prentice Hall© 2005 by Prentice Hall12-8

Pop-up menu

© 2005 by Prentice Hall© 2005 by Prentice Hall12-9

© 2005 by Prentice Hall© 2005 by Prentice Hall12-10

© 2005 by Prentice Hall© 2005 by Prentice Hall12-11

© 2005 by Prentice Hall© 2005 by Prentice Hall12-12

Guidelines for Menu Design

Wording: meaningful titles, clear command verbs, mixed upper/lower caseOrganization: consistent organizing principleLength: all choices fit within screen lengthSelection: consistent, clear and easy selection methodsHighlighting: only for selected options or unavailable options

© 2005 by Prentice Hall© 2005 by Prentice Hall12-13

Contrasting Menu Designs

© 2005 by Prentice Hall© 2005 by Prentice Hall12-14

Visual editing tools help designers construct menus.

© 2005 by Prentice Hall© 2005 by Prentice Hall12-15

Form Interaction

Allows users to fill in the blanks when working with a systemMeasures 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

© 2005 by Prentice Hall© 2005 by Prentice Hall12-16

© 2005 by Prentice Hall© 2005 by Prentice Hall12-17

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

© 2005 by Prentice Hall© 2005 by Prentice Hall12-18

© 2005 by Prentice Hall© 2005 by Prentice Hall12-19

Natural Language Interaction

Inputs to and outputs from system are in a conventional speaking language like EnglishBased on research in artificial intelligenceCurrent implementations are tedious and difficult to work with, not as viable as other interaction methodsBoth keyboard and voice entry

© 2005 by Prentice Hall© 2005 by Prentice Hall12-20

DESIGNING INTERFACES

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

© 2005 by Prentice Hall© 2005 by Prentice Hall12-21

Guidelines for Structuring Data Entry Fields

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

© 2005 by Prentice Hall© 2005 by Prentice Hall12-22

Options for Entering Text

© 2005 by Prentice Hall© 2005 by Prentice Hall12-23

Controlling Data Input

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

© 2005 by Prentice Hall© 2005 by Prentice Hall12-24

Types of Validation Tests

Class or CompositionCombinationsExpected ValuesMissing DataPictures/Templates

RangeReasonablenessSelf-checking DigitsSizeValues

© 2005 by Prentice Hall© 2005 by Prentice Hall12-25

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

© 2005 by Prentice Hall© 2005 by Prentice Hall12-26

Providing Help

Place yourself in user’s place when designing helpGuidelines: 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

© 2005 by Prentice Hall© 2005 by Prentice Hall12-27

DESIGNING DIALOGUES

Dialogue: A sequence of interactions between the system and a user

Dialogue design involves: Designing a dialogue sequence Building a prototype Assessing usability

© 2005 by Prentice Hall© 2005 by Prentice Hall12-28

Guidelines for Dialogue Design

ConsistencyShortcuts and SequenceFeedbackClosure

Error HandlingReversalControlEase

© 2005 by Prentice Hall© 2005 by Prentice Hall12-29

Designing the Dialogue Sequence

Dialogue diagramming: A formal method for designing and representing human-computer dialogues using box and line diagrams. See Figure 12-19 for example.

© 2005 by Prentice Hall© 2005 by Prentice Hall12-30

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

© 2005 by Prentice Hall© 2005 by Prentice Hall12-31

SummaryIn this chapter you learned how to: Explain the process of interface and dialogue

design and the deliverables. Contrast and apply methods for interacting with a

system. Describe guidelines for designing interface

layout, data entry field structure, feedback, and system help.

Design human-computer dialogues and understand how dialogue diagramming can be used.