ch11
Post on 19-May-2015
941 views
TRANSCRIPT
![Page 1: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/1.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Chapter 11:User Interface Design
![Page 2: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/2.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Objectives
• Understand several fundamental user interface (UI) design principles.
• Understand the process of UI design.• Understand how to design the UI structure.• Understand how to design the UI standards.• Understand commonly used principles and
techniques for navigation design.
![Page 3: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/3.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Objectives (cont’d)
• Understand commonly used principles and techniques for input design.
• Understand commonly used principles and techniques for output design.
• Be able to design a user interface.• Understand the affect of nonfunctional
requirements on the human-computer interaction layer.
![Page 4: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/4.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Overview
• Interface Design formalizes the interaction of the system with external entities– System Interfaces are machine-machine and are
dealt with as part of systems integration– User Interfaces are human-computer and are the
focus of this chapter
![Page 5: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/5.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
PRINCIPLES OF USER INTERFACE DESIGN
![Page 6: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/6.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Principles of User Interface Design
• Layout• Content Awareness• Aesthetics• User Experience• Consistency• Minimal User Effort
![Page 7: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/7.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
General Layout
Navigation Area
Status Area
Reports & Forms Area
![Page 8: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/8.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Layout
• Each area may be further subdivided• Each area is self-contained • Areas should have a natural intuitive flow
– Users from western nations tend to read from left to right and top to bottom
– Users from other regions may have different flows
![Page 9: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/9.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Content Awareness
• Intuitively answers the users’ questions:– Where am I?– What am I supposed to be doing here?
• Content awareness applies to sub-areas within a form or window– Related form fields (e.g. address information) are
grouped together– Related report information (e.g. records) are
grouped together
![Page 10: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/10.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Form Content Awareness
Phone Numbers Area
Name Area
![Page 11: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/11.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Report Content Awareness
First Record Area
Second Record Area
![Page 12: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/12.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Aesthetics
• Interfaces should be functional, inviting to use, and pleasing to the eye
• In most cases, less is more (minimalist design)• White space is important• Acceptable information density is proportional
to the user’s expertise– Novice users prefer less than 50% density– Expert users prefer more than 50% density
![Page 13: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/13.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Bad Aesthetics
![Page 14: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/14.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
User Experience
• Ease of learning– Significant issue for inexperienced users– Relevant to systems with a large user population
• Ease of use– Significant issue for expert users– Most important in specialized systems
• Sometimes ease of learning and use of use go hand in hand
![Page 15: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/15.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Multiple Interfaces
• Microsoft Windows has multiple interfaces for the same functionality
• Most users prefer to use Windows Explorer for handling files
• Expert users sometimes prefer the command line interface
![Page 16: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/16.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Consistency
• All parts of the system work in the same way• Key areas of consistency are
– Navigation controls– Terminology
• Probably most important concept in making the system simple because it allows the users to predict what is going to happen
![Page 17: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/17.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Minimal User Effort
• Interfaces should be designed to minimize the effort needed to accomplish tasks
• A common rule is the tree-clicks rule– Users should be able to go from main menu of a
system to the information they want in no more than three mouse clicks
![Page 18: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/18.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
USER INTERFACE DESIGN PROCESS
![Page 19: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/19.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
5-Step UI Design Process
![Page 20: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/20.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Use Scenario Development
• Use scenarios outline the steps performed by users to accomplish some part of their work
• A use scenario is one path through an essential use case
• Presented in a simple narrative description• Document the most common cases so
interface designs will be easy to use for those situations
![Page 21: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/21.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Interface Structure Design
• The interface structure defines – The basic components of the interface– How they work together to provide functionality
to users
• Windows Navigation Diagrams (WND) show – how all the screens, forms, and reports used by
the system are related – how the user moves from one to another
![Page 22: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/22.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Windows Navigation Diagrams
• Like a state diagram for the user interface– Boxes represent components
• Window• Form• Report• Button
– Arrows represent transitions• Single arrow indicates no return to the calling state• Double arrow represents a required return
– Stereotypes show interface type
![Page 23: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/23.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Sample WND
![Page 24: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/24.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Interface Standards Design
• Interface standards are basic design elements found across the system user interface
• Standards are needed for:– Interface metaphor– Interface objects– Interface actions– Interface icons– Interface templates
![Page 25: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/25.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Interface Design Prototyping
• Mock-ups or simulations of computer screens, forms, and reports
• Four common approaches– Storyboard– Windows layout diagram– HTML prototype– Language prototype
![Page 26: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/26.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Sample Storyboard
![Page 27: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/27.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Interface Evaluation
• Goal is to understand how to improve the interface design before the system is complete
• Have as many people as possible evaluate the interface
• Ideally, interface evaluation is done while the system is being designed—before it is built
![Page 28: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/28.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
4 Approaches to UI Evaluation
• Heuristic• Walkthrough• Interactive• Formal Usability Testing
![Page 29: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/29.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
NAVIGATION DESIGN
![Page 30: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/30.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Navigation Design Basic Principles
• Prevent mistakes• Simplify recovery from mistakes• Use consistent grammar order
![Page 31: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/31.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Common Navigation Menu
Menu bar
Grayed-out commands
Drop-down menu
Cascading menu
![Page 32: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/32.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
INPUT DESIGN
![Page 33: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/33.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Input Design Basic Principles
• Online versus Batch processing• Capture data at the source• Minimize keystrokes
![Page 34: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/34.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Types of Inputs
• Free form– Text box– Number box
• Selection box– Check box– Radio button– List box (on-screen, drop-down, or combo)– Sliders
![Page 35: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/35.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Input Validation Types
![Page 36: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/36.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
OUTPUT DESIGN
![Page 37: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/37.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Output Design Basic Principles
• Understand report usage• Manage information load• Minimize bias
![Page 38: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/38.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Types of Outputs
• Detail reports• Summary reports• Exception reports• Turnaround documents• Graphs
![Page 39: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/39.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
NONFUNCTIONAL REQUIREMENTS
![Page 40: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/40.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Non-Functional Requirements
• Operational Requirements– Technologies that can be used (e.g. GUI, mouse)
• Performance Requirements– User interface took kit speed and capacity
• Security Requirements– Restricted user interface (e.g. an ATM machine)
• Political & Cultural Requirements– Date formats, colors and icons
![Page 41: Ch11](https://reader033.vdocument.in/reader033/viewer/2022060110/555a8302d8b42a98568b4eed/html5/thumbnails/41.jpg)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd EditionCopyright © 2009 John Wiley & Sons, Inc. All rights reserved.
Summary
• Principles of User Interface Design• User Interface Design Process• Navigation Design• Input Design• Output Design• Nonfunctional Requirements