Upload
erika-smither
View
217
Download
0
Embed Size (px)
Citation preview
13-1 © Prentice Hall, 2007
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, 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
13-3Chapter 13 © Prentice Hall, 2007
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, 2007
13-5Chapter 13 © Prentice Hall, 2007
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, 2007
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, 2007
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?
13-8Chapter 13 © Prentice Hall, 2007
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
13-9Chapter 13 © Prentice Hall, 2007
A coding sheet is an “old” tool for designing forms and reports, usually associated with text-based forms and reports for mainframe applications.
13-10Chapter 13 © Prentice Hall, 2007
Visual Basic and other development tools provide computer-aided GUI form and report generation.
13-11Chapter 13 © Prentice Hall, 2007
A typical form design specification:
Based on a use case connectionInvolves three parts:
1) Narrative overview2) Sample design3) Assessment
13-12Chapter 13 © Prentice Hall, 2007
13-13Chapter 13 © Prentice Hall, 2007
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
13-14Chapter 13 © Prentice Hall, 2007
13-15Chapter 13 © Prentice Hall, 2007
Grouping, organization, layout, and highlighting are important considerations in form design
13-16Chapter 13 © Prentice Hall, 2007
Highlighting can include use of upper case, font size differences, bold, italics, underline, boxing, and other approaches.
13-17Chapter 13 © Prentice Hall, 2007
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
13-18Chapter 13 © Prentice Hall, 2007
13-19Chapter 13 © Prentice Hall, 2007
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
13-20Chapter 13 © Prentice Hall, 2007
13-21Chapter 13 © Prentice Hall, 2007
Bar and line graphs give pictorial summary information that can enhance reports and graphs.
13-22Chapter 13 © Prentice Hall, 2007
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
13-23Chapter 13 © Prentice Hall, 2007
13-24Chapter 13 © Prentice Hall, 2007
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-25Chapter 13 © Prentice Hall, 2007
Common Areas in FormsCommon Areas in Forms
Header informationSequence and time-related informationInstruction or formatting informationBody or data detailsTotals or data summaryAuthorization or signaturesComents
13-26Chapter 13 © Prentice Hall, 2007
13-27Chapter 13 © Prentice Hall, 2007
A typical interface/dialogue design specification:
Similar to form design, but includes multiple forms and dialogue sequence specifications
13-28Chapter 13 © Prentice Hall, 2007
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.
13-29Chapter 13 © Prentice Hall, 2007
13-30Chapter 13 © Prentice Hall, 2007
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-31Chapter 13 © Prentice Hall, 2007
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-32Chapter 13 © Prentice Hall, 2007
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-33Chapter 13 © Prentice Hall, 2007
13-34Chapter 13 © Prentice Hall, 2007
Dialogue diagrams depict the sequence, conditional branching, and repetition of dialogues.
13-35Chapter 13 © Prentice Hall, 2007
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.
13-36Chapter 13 © Prentice Hall, 2007
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.