11-1 © Prentice Hall, 2007 Topic 11: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S

11-1© Prentice Hall, 2007

Topic 11:Topic 11:Designing the Human Designing the Human

InterfaceInterface

Object-Oriented Systems Analysis and Design

Joey F. George, Dinesh Batra,

Joseph S. Valacich, Jeffrey A. Hoffer

Topic 11 11-2© Prentice Hall, 2007

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.– Explain common Web layout design errors


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.



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


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


Fundamental Questions when Fundamental Questions when Designing Forms and ReportsDesigning Forms and Reports

1. Who will use the form or report?2. What is the purpose of the form or report?3. When is the form or report needed and

used?4. Where does the form or report need to be

delivered and used?5. How many people need to use or view the

form or report?


Types of ReportsTypes of Reports Scheduled Reports

– Predefined interval presentation of routine information Key-Indicator Reports

– Summarize critical information on a recurring basis Exception Reports

– Highlight data outside normal operating range Drill Down Reports

– Provide details of summaries from key-indicator or exception reports

Ad Hoc Reports– Unplanned information requsts for nonroutine decisions


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


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


A typical form design specification:

Based on a use case connectionInvolves three parts:

1) Narrative overview2) Sample design3) Assessment



Guidelines for Displaying TextGuidelines for Displaying Text Case – mixed upper/lower case, using conventional

punctuation

Spacing – double-space if possible, otherwise insert blank lines between paragraphs

Justification – left-justfiy with ragged right margins

Hyphenation – no hyphenation of words between lines

Abbreviations/Acronyms – only when commonly understood and significantly shorter than actual words



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


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


Methods of HighlightingMethods of Highlighting

Blinking and audible tones

Color differences

Intensity differences

Size differences

Font differences

Reverse video

Boxing

Underlining

All capital letters

Offsetting and position of nonstandard information



Printed ReportsPrinted ReportsBusiness reports are static, no user interaction.

Therefore, business reports are often printed in hardcopy form.

Considerations:

Laser or Inkjet printers – good for graphics, but too expensive for large batches

Impact printers – fast, reliable, inexpensive, but not good at displaying graphical content



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


Designing Web LayoutsDesigning Web Layouts For e-commerce applications, web form is the contact

point between customer and companygood design is very important

But, rapid proliferation of web sites without corresponding increase in UI experts

Possible solutions:– Make Web design easy enough for non-UI experts– Train more people in Web design– Tolerate poorly-designed Web layouts



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


Common Areas in FormsCommon Areas in Forms

Header informationSequence and time-related informationInstruction or formatting informationBody or data detailsTotals or data summaryAuthorization or signaturesComents



A typical interface/dialogue design specification:

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


Data entry structure is concerned with navigation flow.

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

Left-to-right, top-to-bottom is best.



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


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


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



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


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.


Recap (cont.)Recap (cont.)

After studying this chapter we learned 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.

Documents

11-1 © Prentice Hall, 2007 Topic 11: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S