Chapter 3c Designing Interfaces and Dialogues

31
© 2005 by Prentice Hall © 2005 by Prentice Hall Chapter 3c Designing Interfaces and Dialogues

description

Chapter 3c Designing Interfaces and Dialogues. Learning Objectives. Explain the process of interface and dialogue design and the deliverables. Contrast and apply methods for interacting with a system. - PowerPoint PPT Presentation

Transcript of Chapter 3c Designing Interfaces and Dialogues

Page 1: Chapter 3c Designing Interfaces and Dialogues

© 2005 by Prentice Hall© 2005 by Prentice Hall

Chapter 3cDesigning Interfaces and

Dialogues

Page 2: Chapter 3c Designing 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.

Page 3: Chapter 3c Designing Interfaces and Dialogues

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

Page 4: Chapter 3c Designing Interfaces and Dialogues

© 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

Page 5: Chapter 3c Designing Interfaces and Dialogues

© 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

Page 6: Chapter 3c Designing Interfaces and Dialogues

© 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

Page 7: Chapter 3c Designing Interfaces and Dialogues

© 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

Page 8: Chapter 3c Designing Interfaces and Dialogues

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

Pop-up menu

Page 9: Chapter 3c Designing Interfaces and Dialogues

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

Page 10: Chapter 3c Designing Interfaces and Dialogues

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

Page 11: Chapter 3c Designing Interfaces and Dialogues

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

Page 12: Chapter 3c Designing Interfaces and Dialogues

© 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

Page 13: Chapter 3c Designing Interfaces and Dialogues

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

Contrasting Menu Designs

Page 14: Chapter 3c Designing Interfaces and Dialogues

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

Visual editing tools help designers construct menus.

Page 15: Chapter 3c Designing Interfaces and Dialogues

© 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

Page 16: Chapter 3c Designing Interfaces and Dialogues

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

Page 17: Chapter 3c Designing Interfaces and Dialogues

© 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

Page 18: Chapter 3c Designing Interfaces and Dialogues

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

Page 19: Chapter 3c Designing Interfaces and Dialogues

© 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

Page 20: Chapter 3c Designing Interfaces and Dialogues

© 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

Page 21: Chapter 3c Designing Interfaces and Dialogues

© 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

Page 22: Chapter 3c Designing Interfaces and Dialogues

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

Options for Entering Text

Page 23: Chapter 3c Designing Interfaces and Dialogues

© 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

Page 24: Chapter 3c Designing Interfaces and Dialogues

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

Types of Validation Tests

Class or CompositionCombinationsExpected ValuesMissing DataPictures/Templates

RangeReasonablenessSelf-checking DigitsSizeValues

Page 25: Chapter 3c Designing Interfaces and Dialogues

© 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

Page 26: Chapter 3c Designing Interfaces and Dialogues

© 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

Page 27: Chapter 3c Designing Interfaces and Dialogues

© 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

Page 28: Chapter 3c Designing Interfaces and Dialogues

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

Guidelines for Dialogue Design

ConsistencyShortcuts and SequenceFeedbackClosure

Error HandlingReversalControlEase

Page 29: Chapter 3c Designing Interfaces and Dialogues

© 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.

Page 30: Chapter 3c Designing Interfaces and Dialogues

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

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

Page 31: Chapter 3c Designing Interfaces and 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.