CHAPTER 14: Designing Interfaces and Dialogues 14.1 MSIS 5653 Advanced Systems Development Dursun...

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


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


Designing Interfaces in SDLCDesigning Interfaces in SDLC

14.414.4


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


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


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


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


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


Sample Menu DesignsSample Menu Designs


Types of Menu ConfigurationsTypes of Menu Configurations


Pop-Up and Drop-Down MenusPop-Up and Drop-Down Menus


Building Menus Building Menus with Advanced Toolswith Advanced Tools



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


Example: Form InteractionExample: Form Interaction



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


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


Interaction Methods and DevicesInteraction Methods and DevicesHardware Options for System Interaction Usability assessment research for various devices

14.1814.18


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


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


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


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


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


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


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


Providing HelpProviding Help

14.2614.26


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


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


Designing the Dialogue SequenceDesigning the Dialogue Sequence

14.2914.29

PVF Customer Information

System


Building Prototypes and Building Prototypes and Assessing UsabilityAssessing Usability

Often optional activities

Task is simplified by using graphical design environment

14.3014.30


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


Standards for MenusStandards for Menus


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


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


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


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


Finalizing Design Specifications Finalizing Design Specifications in SDLCin SDLC

14.38

14.38


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


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



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



Deliverables and Outcome Set of physical design

specifications Contains detailed specifications

for each part of the system

15.42

15.42


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


Example Specification DocumentExample Specification Document

…


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



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


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


Example: Structured ChartExample: Structured Chart



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


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


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


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


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




Database Design Transformer Tool




Server Model Diagram

Data Definition Language (DDL) script



2. Transforming and Generating Software Modules

Functional Hierarchy Diagram




Module Diagram for Update Inventory Added Function

Application Design Transformer




Generated Form in Design Editor


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


Planning game Players

Business Development

Story cards Description of procedure or system feature

15.6015.60



Planning game

15.6115.61



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: RADRadical Methods: RADFour life-cycle phases

Planning Design Construction Cutover

Iteration between design and construction

15.6315.63


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


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

CHAPTER 14: Designing Interfaces and Dialogues 14.1 MSIS 5653 Advanced Systems Development Dursun...

Documents

Transcript of CHAPTER 14: Designing Interfaces and Dialogues 14.1 MSIS 5653 Advanced Systems Development Dursun...