13-1 © prentice hall, 2004 chapter 13: designing the human interface object-oriented systems...
DESCRIPTION
Chapter © Prentice Hall, 2004 Chapter Objectives (Continued) Af ter 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.TRANSCRIPT
![Page 1: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/1.jpg)
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
![Page 2: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/2.jpg)
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.
![Page 3: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/3.jpg)
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.
![Page 4: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/4.jpg)
13-4Chapter 13 © Prentice Hall, 2004
![Page 5: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/5.jpg)
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
![Page 6: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/6.jpg)
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
![Page 7: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/7.jpg)
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.
![Page 8: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/8.jpg)
13-8Chapter 13 © Prentice Hall, 2004
Visual Basic and other development tools provide computer-aided GUI form and report generation.
![Page 9: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/9.jpg)
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
![Page 10: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/10.jpg)
13-10Chapter 13 © Prentice Hall, 2004
![Page 11: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/11.jpg)
13-11Chapter 13 © Prentice Hall, 2004
![Page 12: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/12.jpg)
13-12Chapter 13 © Prentice Hall, 2004
![Page 13: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/13.jpg)
13-13Chapter 13 © Prentice Hall, 2004
Grouping, organization, layout, and highlighting are important considerations in form design
![Page 14: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/14.jpg)
13-14Chapter 13 © Prentice Hall, 2004
Highlighting can include use of upper case, font size differences, bold, italics, underline, boxing, and other approaches.
![Page 15: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/15.jpg)
13-15Chapter 13 © Prentice Hall, 2004
![Page 16: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/16.jpg)
13-16Chapter 13 © Prentice Hall, 2004
Business reports are static, no user interaction. Therefore, business reports are often printed in hardcopy form.
![Page 17: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/17.jpg)
13-17Chapter 13 © Prentice Hall, 2004
![Page 18: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/18.jpg)
13-18Chapter 13 © Prentice Hall, 2004
Bar and line graphs give pictorial summary information that can enhance reports and graphs.
![Page 19: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/19.jpg)
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
![Page 20: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/20.jpg)
13-20Chapter 13 © Prentice Hall, 2004
A typical interface/dialogue design specification:
Similar to form design, but includes multiple forms and dialogue sequence specifications
![Page 21: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/21.jpg)
13-21Chapter 13 © Prentice Hall, 2004
Data entry structure is concerned with navigation flow.
![Page 22: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/22.jpg)
13-22Chapter 13 © Prentice Hall, 2004
Navigation flow should be natural and intuitive to the user, not disjointed and confusing.
![Page 23: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/23.jpg)
13-23Chapter 13 © Prentice Hall, 2004
![Page 24: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/24.jpg)
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
![Page 25: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/25.jpg)
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
![Page 26: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/26.jpg)
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
![Page 27: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/27.jpg)
13-27Chapter 13 © Prentice Hall, 2004
![Page 28: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/28.jpg)
13-28Chapter 13 © Prentice Hall, 2004
Dialogue diagrams depict the sequence, conditional branching, and repetition of dialogues.
![Page 29: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra, Joseph S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a4d1afe7f8b9ab059985bdc/html5/thumbnails/29.jpg)
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.