13-1 © Prentice Hall, 2004

Chapter 13:Chapter 13:Designing the Human Designing the Human

InterfaceInterface

Object-Oriented Systems Analysis and Design

Joey F. George, Dinesh Batra, Joseph S. Valacich, Jeffrey A. Hoffer

13-2Chapter 13 © Prentice Hall, 2004

Chapter ObjectivesChapter Objectives

After studying this chapter you should be able to:– Explain form and report design.– Apply general guidelines for formatting forms

and reports.– Explain effective text, table, and list formatting.

13-3Chapter 13 © Prentice Hall, 2004

Chapter Objectives Chapter Objectives (Continued)(Continued)

After studying this chapter you should be able to:– Explain interface and dialogue design.– Apply general guidelines for designing

interfaces and dialogues.– Explain common errors in developing Web

interfaces.– Design human-computer dialogues, including

the use of dialogue diagrams.

13-4Chapter 13 © Prentice Hall, 2004

13-5Chapter 13 © Prentice Hall, 2004

What Is a Form?What Is a Form?

A business document that contains some predefined data and may include some areas where additional data are to be filled in

Typically based on a database record or query

13-6Chapter 13 © Prentice Hall, 2004

What Is a Report?What Is a Report?A business document that contains only

predefined data

A passive document meant only for reading or viewing, not data input

Typically contains data from many unrelated transactions or records

13-7Chapter 13 © Prentice Hall, 2004

A coding sheet is an “old” tool for designing forms and reports, usually associated with text-based forms and reports for mainframe applications.

13-8Chapter 13 © Prentice Hall, 2004

Visual Basic and other development tools provide computer-aided GUI form and report generation.

13-9Chapter 13 © Prentice Hall, 2004

A typical form design specification:

Based on a use case connection

Involves three parts:

1) Narrative overview

2) Sample design3) Assessment

13-10Chapter 13 © Prentice Hall, 2004

13-11Chapter 13 © Prentice Hall, 2004

13-12Chapter 13 © Prentice Hall, 2004

13-13Chapter 13 © Prentice Hall, 2004

Grouping, organization, layout, and highlighting are important considerations in form design

13-14Chapter 13 © Prentice Hall, 2004

Highlighting can include use of upper case, font size differences, bold, italics, underline, boxing, and other approaches.

13-15Chapter 13 © Prentice Hall, 2004

13-16Chapter 13 © Prentice Hall, 2004

Business reports are static, no user interaction. Therefore, business reports are often printed in hardcopy form.

13-17Chapter 13 © Prentice Hall, 2004

13-18Chapter 13 © Prentice Hall, 2004

Bar and line graphs give pictorial summary information that can enhance reports and graphs.

13-19Chapter 13 © Prentice Hall, 2004

Interface/Dialogue DesignInterface/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

13-20Chapter 13 © Prentice Hall, 2004

A typical interface/dialogue design specification:

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

13-21Chapter 13 © Prentice Hall, 2004

Data entry structure is concerned with navigation flow.

13-22Chapter 13 © Prentice Hall, 2004

Navigation flow should be natural and intuitive to the user, not disjointed and confusing.

13-23Chapter 13 © Prentice Hall, 2004

13-24Chapter 13 © Prentice Hall, 2004

Feedback MessagesFeedback 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 – informs user that something is wrong, either with data entry or system operation

13-25Chapter 13 © Prentice Hall, 2004

What Is a Dialogue?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

13-26Chapter 13 © Prentice Hall, 2004

Guidelines for Dialogue DesignGuidelines for Dialogue Design– Consistency– Allow sequence, shortcuts, and reversals

in navigation– Frequent feedback– Logical grouping and sequencing of

diagrams, with beginning, middle, and end

– Comprehensive error handling– Maximize ease and control of use

13-27Chapter 13 © Prentice Hall, 2004

13-28Chapter 13 © Prentice Hall, 2004

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

13-29Chapter 13 © Prentice Hall, 2004

RecapRecap

After studying this chapter we learned to:– Design forms, reports, interfaces, and

dialogues.– List and apply accepted guidelines during

interface design.– Properly format text, tables, and lists.– Design dialogues using dialogue diagrams.