chapter 14: designing interfaces and dialogues 14.1 msis 5653 advanced systems development dursun...
TRANSCRIPT
CHAPTER 14:CHAPTER 14:Designing Interfaces and DialoguesDesigning Interfaces and Dialogues
14.114.1
MSIS 5653MSIS 5653Advanced Systems DevelopmentAdvanced Systems Development
Dursun Delen, Ph.D.Dursun Delen, Ph.D.Department of ManagementDepartment of ManagementOklahoma State UniversityOklahoma State University
D. Delen MSIS 5653 – Advanced Systems Development
Learning ObjectivesLearning Objectives Understand the process of designing interfaces and
dialogues and the deliverables Contrast and apply several methods for interacting
with a system List and describe various input devices and discuss
usability issues for each in relation to performing different tasks
Discuss the general guidelines for interface design including:
Layout and design Structuring data entry fields Providing feedback System help
14.214.2
D. Delen MSIS 5653 – Advanced Systems Development
Learning ObjectivesLearning Objectives Discuss the design of human-computer
dialogues and the use of dialogue diagramming
Design graphical user interfaces Understand interface design guidelines unique
to the design of Internet based electronic business systems
14.314.3
D. Delen MSIS 5653 – Advanced Systems Development
Designing Interfaces in SDLCDesigning Interfaces in SDLC
14.414.4
D. Delen MSIS 5653 – Advanced Systems Development
IntroductionIntroduction
Interface?
Focus of user interface design is to determine how information is provided to and captured from the users
Dialogues are analogous to a conversation between two people
A good human-computer interface provides a unifying structure for finding, viewing and invoking the different components of a system
14.514.5
D. Delen MSIS 5653 – Advanced Systems Development
The Process of Designing The Process of Designing Interfaces and DialoguesInterfaces and Dialogues
User-focused activity
Conducted in parallel to form and report design processes
Employs prototyping methodology1. Collect information
2. Construct prototype
3. Assess usability
4. Make refinements
14.614.6
D. Delen MSIS 5653 – Advanced Systems Development
The Process of Designing The Process of Designing Interfaces and DialoguesInterfaces and Dialogues
Deliverables Design Specifications
Narrative Sample Design Testing and usability assessment
14.714.7
D. Delen MSIS 5653 – Advanced Systems Development
Interaction Methods and DevicesInteraction Methods and DevicesMethods of Interacting
Command Language Interaction Users enter explicit statements into a system to
invoke operations Pros / Cons?
Menu Interaction A human computer interaction method A list of system options is provided A specific command is invoked by user selection of a
menu option Menu complexity varies according to needs of system
and capabilities of development environment
14.814.8
D. Delen MSIS 5653 – Advanced Systems Development
Guidelines for Designing MenusGuidelines for Designing MenusMethods of Interacting
Menu Interaction (Continued…) Menu Design Guidelines
Wording Organization Length Selection Highlighting
Two common placement methods Pop-up Drop-down
Hierarchies can be employed
D. Delen MSIS 5653 – Advanced Systems Development
Sample Menu DesignsSample Menu Designs
D. Delen MSIS 5653 – Advanced Systems Development
Types of Menu ConfigurationsTypes of Menu Configurations
D. Delen MSIS 5653 – Advanced Systems Development
Pop-Up and Drop-Down MenusPop-Up and Drop-Down Menus
D. Delen MSIS 5653 – Advanced Systems Development
Building Menus Building Menus with Advanced Toolswith Advanced Tools
D. Delen MSIS 5653 – Advanced Systems Development
Interaction Methods and DevicesInteraction Methods and DevicesMethods of Interacting
Form Interaction Allows users to fill in the blanks when working with a
system Measures of an effective design
Self-explanatory title and field headings Fields organized into logical groupings Distinctive boundaries Default values Displays appropriate field lengths Minimizes the need to scroll windows
14.14
14.14
D. Delen MSIS 5653 – Advanced Systems Development
Example: Form InteractionExample: Form Interaction
D. Delen MSIS 5653 – Advanced Systems Development
Interaction Methods and DevicesInteraction Methods and DevicesMethods of Interacting
Object-Based Interaction Symbols are used to represent
commands or functions Icons
Graphic symbols that look like the processing option they are meant to represent
Use little screen space Can be easily understood by
users
14.1614.16
Natural Language Interaction Inputs to and outputs from system are in a conventional speaking
language like English
D. Delen MSIS 5653 – Advanced Systems Development
Interaction Methods and DevicesInteraction Methods and DevicesHardware Options for System Interaction
List of devices Keyboard Mouse Joystick Trackball Touch Pad Touch Screen Light Pen Graphic Tablet Voice
Carpal Tunnel Syndrome ?..
14.1714.17
D. Delen MSIS 5653 – Advanced Systems Development
Interaction Methods and DevicesInteraction Methods and DevicesHardware Options for System Interaction Usability assessment research for various devices
14.1814.18
D. Delen MSIS 5653 – Advanced Systems Development
Designing InterfacesDesigning Interfaces
Designing Layouts Standard formats similar to paper-based forms and
reports should be used Screen navigation on data entry screens should be left-
to-right, top-to-bottom as on paper forms
14.1914.19
D. Delen MSIS 5653 – Advanced Systems Development
Designing LayoutsDesigning LayoutsFlexibility and consistency are primary design goals
Users should be able to move freely between fields Data should not be permanently saved until the user explicitly
requests this Each key and command should be assigned to one function
14.2014.20
D. Delen MSIS 5653 – Advanced Systems Development
Structuring Data EntryStructuring Data Entry
EntryNever require data that are already on-line or that can be computed
Defaults Always provide default values when appropriate
Units Make clear the type of data units requested for entry
Replacement Use character replacement when appropriate
Captioning Always place a caption adjacent to fields
Format Provide formatting examples
Justify Automatically justify data entries
Help Provide context-sensitive help when appropriate
14.2114.21
D. Delen MSIS 5653 – Advanced Systems Development
Controlling Data InputControlling Data InputOne objective of interface design is to reduce data entry errorsRole of systems analyst is to anticipate user errors and design features into the system’s interfaces to avoid, detect and correct data entry mistakesData entry errors
Appending Truncating Transcripting Transposing
14.2214.22
D. Delen MSIS 5653 – Advanced Systems Development
Controlling Data Input – Cont.Controlling Data Input – Cont.Techniques used by system designers to detect errors
Class/Composition (type) Combinations Expected Values Missing Data Pictures/Templates (format) Range Reasonableness Size Values
D. Delen MSIS 5653 – Advanced Systems Development
Providing FeedbackProviding Feedback1. Status Information
Keeps users informed of what is going on with the system Displaying status information is especially important if the
operation takes longer than a second or two
2. Prompting Cues Best to keep as specific as possible Ready for Input: ____ vs. Enter SSN (xxx-xx-xxxx): _____
3. Error and Warning Messages Messages should be specific and free of error codes User should be guided toward a result Use terms familiar to user Be consistent in format and placement of messages
14.2414.24
D. Delen MSIS 5653 – Advanced Systems Development
Providing HelpProviding HelpPlace yourself in user’s place when designing helpGuidelines
Simplicity Help messages should be short and to the point
Organization Information in help messages should be easily absorbed by
users Demonstrate
It is useful to explicitly show users how to perform an operation
Context-Sensitive Help Enables user to get field-specific help
Users should always be returned to where they were when requesting help
14.2514.25
D. Delen MSIS 5653 – Advanced Systems Development
Providing HelpProviding Help
14.2614.26
D. Delen MSIS 5653 – Advanced Systems Development
Designing DialoguesDesigning DialoguesDialogue
Sequence in which information is displayed to and obtained from a user
Primary design guideline is consistency in sequence of actions, keystrokes, and terminology
Three step process1. Design dialogue sequence2. Build a prototype3. Assess usability
14.2714.27
D. Delen MSIS 5653 – Advanced Systems Development
Designing the Dialogue SequenceDesigning the Dialogue SequenceDefine the sequence
Have a clear understanding of the user, task, technological and environmental characteristics
Dialogue Diagram A formal method for designing and representing human-
computer dialogues using box and line diagrams Consists of a box with three sections
14.2814.28
D. Delen MSIS 5653 – Advanced Systems Development
Designing the Dialogue SequenceDesigning the Dialogue Sequence
14.2914.29
PVF Customer Information
System
D. Delen MSIS 5653 – Advanced Systems Development
Building Prototypes and Building Prototypes and Assessing UsabilityAssessing Usability
Often optional activities
Task is simplified by using graphical design environment
14.3014.30
D. Delen MSIS 5653 – Advanced Systems Development
Designing Interfaces and Dialogues Designing Interfaces and Dialogues in Graphical Environmentsin Graphical Environments
Interface Design Issues1. Become an expert user of the GUI environment
Understand how other applications have been designed Understand standards
2. Gain an understanding of the available resources and how they can be used Become familiar with standards for menus and forms Standards for menus (see next page >>>) Some common properties of windows and forms in a GUI
environment: Modality Resizable Movable Maximize/Minimize
14.3114.31
D. Delen MSIS 5653 – Advanced Systems Development
Standards for MenusStandards for Menus
D. Delen MSIS 5653 – Advanced Systems Development
Designing Interfaces and Dialogues Designing Interfaces and Dialogues in Graphical Environmentsin Graphical Environments
Dialogue Design Issues Goal is to establish the sequence of displays that users
will encounter when working with system Ability of some GUI environments to jump from
application to application or screen to screen makes sequencing a challenge
One approach is to make users always resolve requests for information before proceeding
Dialogue diagramming helps analysts better manage the complexity of designing graphical interfaces
Wizard type screens are useful
14.3314.33
D. Delen MSIS 5653 – Advanced Systems Development
Designing Interfaces and Dialogues forDesigning Interfaces and Dialogues for Electronic Commerce Applications Electronic Commerce Applications
General Guidelines Design errors
Opening new Browser Window Breaking the Back Button Complex URLs Orphan Pages Scrolling Navigation Pages Lack of Navigation Support Hidden Links Links that Don’t Provide Enough Information Buttons that Don’t Provide Click Feedback
14.3414.34
D. Delen MSIS 5653 – Advanced Systems Development
SummarySummaryInteraction Methods and Devices
Design guidelines for interfaces Layout design Structuring data entry fields Providing feedback Designing help
Designing dialogues
Designing interfaces and dialogues in graphical environments
Designing Interfaces and Dialogues for Web Application
14.3514.35
CHAPTER 15:CHAPTER 15:
Finalizing Design SpecificationsFinalizing Design Specifications
D. Delen MSIS 5653 – Advanced Systems Development
Learning ObjectivesLearning Objectives Discuss the need for system design specifications Define quality requirements and write quality
requirements statements Read and understand a structure chart Distinguish between evolutionary and throwaway
prototyping Explain the role of CASE tools in capturing design
specifications Demonstrate how design specifications can be
declared for Web-based applications
15.37
15.37
D. Delen MSIS 5653 – Advanced Systems Development
Finalizing Design Specifications Finalizing Design Specifications in SDLCin SDLC
14.38
14.38
D. Delen MSIS 5653 – Advanced Systems Development
IntroductionIntroduction
There is a need for systems to be developed more quickly today
The lines between analysis and design and design and implementation are blurring
Traditional approaches allowed for a break between design and implementation
Other approaches, such as CASE and prototyping, have caused overlap between the two phases
15.39
15.39
D. Delen MSIS 5653 – Advanced Systems Development
The Process of The Process of Finalizing Design SpecificationsFinalizing Design Specifications
Less costly to correct and detect errors during the design phase
Two sets of guidelines Writing quality specification statements The quality of the specifications themselves
Quality requirement statements Correct Feasible Necessary Prioritized Unambiguous Verifiable
15.40
15.40
D. Delen MSIS 5653 – Advanced Systems Development
The Process of The Process of Finalizing Design SpecificationsFinalizing Design Specifications
Quality requirements Completely described Do not conflict with other requirements Easily changed without adversely affecting other
requirements Traceable back to origin
15.41
15.41
D. Delen MSIS 5653 – Advanced Systems Development
The Process of The Process of Finalizing Design SpecificationsFinalizing Design Specifications
Deliverables and Outcome Set of physical design
specifications Contains detailed specifications
for each part of the system
15.42
15.42
D. Delen MSIS 5653 – Advanced Systems Development
Representing Design SpecificationsRepresenting Design SpecificationsTraditional Methods
Pre-CASE Documents written natural language and
augmented with graphical models Specification documents
Figure 15-2 shows an example
>>> Several methods for streamlining
Computer-based requirements management tools Prototyping Visual development environments
15.43
15.43
D. Delen MSIS 5653 – Advanced Systems Development
Example Specification DocumentExample Specification Document
…
D. Delen MSIS 5653 – Advanced Systems Development
Representing Design SpecificationsRepresenting Design SpecificationsStructure Charts
Shows how an information system is organized in hierarchical models
Shows how parts of a system are related to one another Shows breakdown of a system into programs and internal
structures of programs written in third and fourth generation languages
15.45
15.45
D. Delen MSIS 5653 – Advanced Systems Development
Representing Design SpecificationsRepresenting Design SpecificationsStructure Charts
Module A self-contained component of a system, defined by a
function (sections in COBOL, subroutines in FORTRAN) One single coordinating module at the root of structure
chart (a.k.a. boss)
15.46
15.46
Communicate with each other by passing parameters
Data couple: A diagrammatic representation of the data exchanged between two modules in a structure chart
Flag: A diagrammatic representation of a message passed between two modules
D. Delen MSIS 5653 – Advanced Systems Development
Representing Design SpecificationsRepresenting Design SpecificationsSpecial Symbols used in Structure Charts
1. Diamond (conditional call of subordinates) Only one subordinate will be
called
2. Curved Line (repetitive calls of subordinates) Subordinates are called
repeatedly until terminating condition is met
3. Predefined modules4. Embedded module (Hat)
Subordinate module is important logically but code is contained in superior module
15.4715.47
1
2
4
3
D. Delen MSIS 5653 – Advanced Systems Development
Example: Structured ChartExample: Structured Chart
D. Delen MSIS 5653 – Advanced Systems Development
Representing Design SpecificationsRepresenting Design SpecificationsStructure Charts
Pseudocode Method used for representing the instructions inside a
module Language similar to computer programming code Serves for two functions
Helps analyst think in a structured way about the task a module is designed to perform
Acts as a communication tool between analyst and programmer
15.4915.49
D. Delen MSIS 5653 – Advanced Systems Development
Representing Design SpecificationsRepresenting Design SpecificationsPrototyping
Construction of the model of a system Allows developers and users to
Test aspects of the overall design Check for functionality and usability
Two types1. Evolutionary Prototyping
2. Throwaway Prototyping
15.5015.50
D. Delen MSIS 5653 – Advanced Systems Development
Representing Design Representing Design SpecificationsSpecifications
Prototyping Evolutionary Prototyping
Begin by modeling parts of the target system If successful, evolve rest of the system from the prototype Prototype becomes actual production system Often, difficult parts of the system are prototyped first Exception handling must be added to prototype
15.5115.51
D. Delen MSIS 5653 – Advanced Systems Development
Representing Design Representing Design SpecificationsSpecifications
Prototyping Throwaway Prototyping
Prototype is not preserved Developed quickly to demonstrate unclear aspect of
system design Fast, easy to use development environment aids this
approach
15.5215.52
D. Delen MSIS 5653 – Advanced Systems Development
A Prototyping Example with Oracle:A Prototyping Example with Oracle:HB Inventory Control System HB Inventory Control System
1. Transforming and Generating the Database
Entity-Relationship Diagramming Tool
D. Delen MSIS 5653 – Advanced Systems Development
A Prototyping Example with Oracle:A Prototyping Example with Oracle:HB Inventory Control System HB Inventory Control System
1. Transforming and Generating the Database
Database Design Transformer Tool
D. Delen MSIS 5653 – Advanced Systems Development
A Prototyping Example with Oracle:A Prototyping Example with Oracle:HB Inventory Control System HB Inventory Control System
1. Transforming and Generating the Database
Server Model Diagram
Data Definition Language (DDL) script
D. Delen MSIS 5653 – Advanced Systems Development
A Prototyping Example with Oracle:A Prototyping Example with Oracle:HB Inventory Control System HB Inventory Control System
2. Transforming and Generating Software Modules
Functional Hierarchy Diagram
D. Delen MSIS 5653 – Advanced Systems Development
A Prototyping Example with Oracle:A Prototyping Example with Oracle:HB Inventory Control System HB Inventory Control System
2. Transforming and Generating Software Modules
Module Diagram for Update Inventory Added Function
Application Design Transformer
D. Delen MSIS 5653 – Advanced Systems Development
A Prototyping Example with Oracle:A Prototyping Example with Oracle:HB Inventory Control System HB Inventory Control System
2. Transforming and Generating Software Modules
Generated Form in Design Editor
D. Delen MSIS 5653 – Advanced Systems Development
Radical Methods: Radical Methods: eXtreme ProgrammingeXtreme Programming
Developed by Kent Beck (2000)It is distinguished by its
Short Cycles Incremental Planning Approach Focus on automated tests
Utilizes a two-person programming teamPlanning, analysis, design and construction are fused together into one phaseRequirements and specifications are uniquely captured
15.5915.59
D. Delen MSIS 5653 – Advanced Systems Development
Planning game Players
Business Development
Story cards Description of procedure or system feature
15.6015.60
Radical Methods: Radical Methods: eXtreme ProgrammingeXtreme Programming
D. Delen MSIS 5653 – Advanced Systems Development
Planning game
15.6115.61
Radical Methods: Radical Methods: eXtreme ProgrammingeXtreme Programming
D. Delen MSIS 5653 – Advanced Systems Development
Iteration Planning Game Played by programmers Task Cards
Several task cards generated for each story card Three phases
Exploration Story cards converted to task cards
Commitment Programmers accept responsibility for tasks
Steering Programmers write code, test it and integrate it
Game takes place during time between intervals of planning game steering phase meetings
15.6215.62
Radical Methods: Radical Methods: eXtreme ProgrammingeXtreme Programming
D. Delen MSIS 5653 – Advanced Systems Development
Radical Methods: RADRadical Methods: RADFour life-cycle phases
Planning Design Construction Cutover
Iteration between design and construction
15.6315.63
D. Delen MSIS 5653 – Advanced Systems Development
Electronic Commerce ApplicationElectronic Commerce ApplicationMicrosoft FrontPage can be used to build throwaway prototypes
Template based HTML for Rapid development Consistency in
Look an feel Functionality Navigation
15.6415.64
D. Delen MSIS 5653 – Advanced Systems Development
SummarySummaryTypes of Design Specifications
Written document augmented by various diagrams Structure chart Computer-based requirements management tool Prototypes
Throwaway versus Evolutionary
Radical Methods eXtreme Programming RAD
Electronic Commerce Application Throwaway prototyping
15.6515.65