![Page 1: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/1.jpg)
13-1 © Prentice Hall, 2004
Chapter 13:Chapter 13:Designing the Human Designing the Human
InterfaceInterface(Adapted)(Adapted)
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 (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/2.jpg)
13-2Chapter 13 © Prentice Hall, 2004
Chapter ObjectivesChapter Objectives
- Concept of User interface– Forms and reports– General guidelines for forms and reports– Dialogue design– Usability Testing; Web Usability
![Page 3: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/3.jpg)
13-3Chapter 13 © Prentice Hall, 2004
Note: In OO Development, user interface is designedin cycles.
![Page 4: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/4.jpg)
13-4Chapter 13 © Prentice Hall, 2004
• UI refers to all the screens through which User provides input to the system and gets output from the system.
• Forms and reports are types of UI supporting access to databases.
- Very common since databases part of almost any system.
- BUT, not only type of UI!!! (book’s bias)
Concept of User Interface (UI)Concept of User Interface (UI)
![Page 5: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/5.jpg)
13-5Chapter 13 © Prentice Hall, 2004
FormForm
- Input and output object
- Input form object: 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 (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/6.jpg)
13-6Chapter 13 © Prentice Hall, 2004
ReportReport
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 (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/7.jpg)
13-7Chapter 13 © Prentice Hall, 2004
Visual Basic and other development tools provide computer-aided GUI form and report generation.
![Page 8: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/8.jpg)
13-8Chapter 13 © Prentice Hall, 2004
A typical form design specification:
Based on a use case connection – Boundary Class
Involves three parts:
1) Narrative overview2) Sample design3) Assessment
![Page 9: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/9.jpg)
13-9Chapter 13 © Prentice Hall, 2004
![Page 10: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/10.jpg)
13-10Chapter 13 © Prentice Hall, 2004
![Page 11: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/11.jpg)
13-11Chapter 13 © Prentice Hall, 2004
![Page 12: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/12.jpg)
13-12Chapter 13 © Prentice Hall, 2004
Grouping, organization, layout, and highlighting are important considerations in form design
![Page 13: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/13.jpg)
13-13Chapter 13 © Prentice Hall, 2004
Highlighting can include use of upper case, font size differences, bold, italics, underline, boxing, and other approaches.
![Page 14: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/14.jpg)
13-14Chapter 13 © Prentice Hall, 2004
![Page 15: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/15.jpg)
13-15Chapter 13 © Prentice Hall, 2004
Business reports are static, no user interaction. Therefore, business reports are often printed in hardcopy form.
![Page 16: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/16.jpg)
13-16Chapter 13 © Prentice Hall, 2004
![Page 17: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/17.jpg)
13-17Chapter 13 © Prentice Hall, 2004
Bar and line graphs give pictorial summary information that can enhance reports and graphs.
![Page 18: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/18.jpg)
13-18Chapter 13 © Prentice Hall, 2004
Dialogue DesignDialogue Design
– Layout (of widgets, text, and table data)– Structuring data entry (tab order)– Controlling data input (validation and format controls)– Systems’ Feedback (prompting, status, warning, and
error messages)– Dialogue sequencing
Dialogue - A sequence of interactions between the system and a user. Design includes:
![Page 19: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/19.jpg)
13-19Chapter 13 © Prentice Hall, 2004
A typical interface/dialogue design specification:
Similar to form design, but includes multiple forms and dialogue sequence specifications
![Page 20: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/20.jpg)
13-20Chapter 13 © Prentice Hall, 2004
Data entry structure is concerned with navigation flow.
![Page 21: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/21.jpg)
13-21Chapter 13 © Prentice Hall, 2004
Navigation flow should be natural and intuitive to the user, not disjointed and confusing.
![Page 22: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/22.jpg)
13-22Chapter 13 © Prentice Hall, 2004
Also a guideline for UI: Never make slidelike this – for number of lines use 7 +/- rule!
![Page 23: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/23.jpg)
13-23Chapter 13 © Prentice Hall, 2004
System’s Feedback System’s Feedback
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 24: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/24.jpg)
13-24Chapter 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 25: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/25.jpg)
13-25Chapter 13 © Prentice Hall, 2004
Dialogue sequencing
![Page 26: 13-1 © Prentice Hall, 2004 Chapter 13: Designing the Human Interface (Adapted) Object-Oriented Systems Analysis and Design Joey F. George, Dinesh Batra,](https://reader036.vdocuments.us/reader036/viewer/2022070308/551c46285503469d6a8b46ac/html5/thumbnails/26.jpg)
13-26Chapter 13 © Prentice Hall, 2004
Dialogue diagrams depict the sequence, conditional branching, and repetition of dialogues.