System Design

Designing the Human Interface Input processes Navigation mechanisms Output screens and reports

Designing Databases Data System interfaces System architecture

Classic Design Mistakes

Reducing design time

Feature creep

Switching tools in mid-project

Design Considerations

User Novices – ease of learning Experts – ease of use

Understand the underlying business function The DFD will provide a checklist of user tasks to

include in the interface design

Processing Use a modular design

External Design Factors

User related

Task related

System related

Environment related

Designing Interfaces and Dialogues

Ergonomics Provide features that promote efficiency

Aesthetics Build an interface that is easy to use

Technology

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

Menus should be broad and shallow with menu items grouped by interface objects rather than actions

Types of Menus

Menu bar Always on screen

Tool bar Remains on screen until closed

Drop down menu Disappears after one use

Pop up menu Disappears after one use

Tab menu Remains on screen until closed

User Interface ControlsDialog or text box Appears when user clicks on a command button

Toggle button Used to represent on or off status

Check box If several items can be selected from a list

Radio buttons If only one item can be selected from a set of mutually exclusive

items

Drop down list A one-line box that opens to reveal a list

Combo Permits users to type as well as scroll the list

Designing Human-Computer Dialogues

ConsistencyShortcutsSequenceFeedbackClosureError handlingReversalControlEase

Designing Forms and Reports

System inputs and outputs are produced at the end of the analysis phase

Precise appearance was not defined during this phase

Forms and reports are integrally related to DFD and E-R diagrams

Forms and Reports

Form A business document that contains some predefined data

and may include some areas where additional data are to be filled in

An instance of a form is typically based on one database record

Report A business document that contains only predefined data A passive document for reading or viewing data Typically contains data from many database records or

transactions

Principles of input design

Use on-line and batch processing appropriately

Capture data at the source Source data automation

Minimize keystrokes Use default values and lists

Types of Input Devices

Keyboard and MouseTelephone and voiceScannerTouch screenVideo inputDigital cameraElectronic whiteboardHandheld computer penMICR

Designing Data Entry Screens

Entry Never require data that are already online 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

Functional capabilities Cursor control capabilities

Editing capabilities

Exit capabilities

Help capabilities

Types of Data Errors

Appending Adding characters

Truncating Deleting characters

Transcripting Entering invalid data

Transposing Reversing the sequence of characters

Validation Tests

Composition

Combination

Expected values

Missing data

Templates

Range

Reasonableness

Check digit

Batch Controls

Audit Trail A record of the sequence of data entries

and the date of those entries

Providing Feedback

1. Error and Warning Messages Explain the reason and suggest corrective action

2. Confirmation message If the user selects a potentially dangerous choice

3. Acknowledgement Messages Provide information to reassure the user that

action has taken place

4. Delay message If an activity takes more than 5 seconds

5. Help message

Help Guidelines

Simplicity Help messages should be short and to the

point

Organization Information in help messages should be easily

absorbed by users

Show It is useful to explicitly show users how to

perform an operation

Providing Help

Context-Sensitive Help Enables user to get field-specific help

Users should always be returned to where they were when requesting help

Types of Help

On Help

On Concepts

On Procedures

On Messages

On Menus

On Function keys

On Commands

On Words

Principles of output design

Understand report usage Real time versus batch reports

Manage information load Provide the information needed, not the

information available

Minimize bias Presentation of information should mach

the way that information is used

Designing Forms and ReportsFollows a prototyping approachRequirements determination Who will use the form or report? What is the purpose of the form or report? When is the report needed or used? How

often must it be updated? Where does the form or report need to be

delivered and used? How many people need to use or view the

form or report?

Printed Output

Detail reports

Exception reports

Summary reports

Deliverables and Outcome

Design specifications for forms/reports1. Narrative

2. Screen Design

3. Testing and usability assessment

Design GuidelinesUse meaningful titles Describe content and use Date to identify the current version Date to know when the data was valid

Include meaningful information the needed information the right amount of detail

Balance the layout Adequate spacing and margins Label all data and entry fields

Design an easy navigation system Display page numbers

Highlighting

Use sparingly to draw user to or away from certain informationBlinking and audible tones should only be used to highlight critical information requiring user’s immediate attentionMethods should be consistently selected and used based upon level of importance of emphasized information

Displaying Text

Display text in mixed upper and lower case and use conventional punctuationUse double spacing if space permits. If not, place a blank line between paragraphsLeft-justify text and leave a ragged right marginDo not hyphenate words between linesUse abbreviations and acronyms only when they are widely understood by users and are significantly shorter than the full text

Formatting columns, rows & textSort in a meaningful orderPlace a blank line between every 5 rows in long columnsSimilar information displayed in multiple columns should be sorted verticallyColumns should have at least two spaces between themAllow white space on printed reports for user to write notesUse a single typeface, except for emphasisUse same family of typefaces within and across displays and reportsAvoid overly fancy fonts

Formatting Data

Right-justify numeric data and align columns by decimal points or other delimiter

Left-justify textual data. Use short line length, usually 30 to 40 characters per line

Break long sequences of alphanumeric data into small groups of three to four characters each

Designing DialoguesDialogue

Sequence in which information is displayed to and obtained from a user

Minimize user effortConsistency in sequence of actions, keystrokes, and terminologyThree step process1. Design dialogue sequence2. Build a prototype3. Assess usability

Interface Structure DiagramDialogue Diagram A formal method for designing and

representing human-computer dialogues using box and line diagrams

Consists of a box with three sections1. Top: Unique display reference number used

by other displays for referencing dialogue2. Middle: Contains the name or description of

the display3. Bottom: Contains display reference numbers

that can be accessed from the current display

PrototypingInitial prototype is designed from requirementsUsers review prototype design and either accept the design or request changesIf changes are requested, the construction-evaluation-request cycle is repeated until the design is accepted

Assessing UsabilityHeuristic evaluation Uses a checklist of design principles

Walkthrough evaluation Demonstrates prototype to users

Interactive evaluation User navigates through the prototype

Formal usability testing User works directly with the software

alone in a special lab

Internet Development:

Design GuidelinesNavigation via cookie crumbs

A technique that uses a series of tabs on a Web page to show users where they are and where they have been in the site

Tabs are hyperlinks to allow users to move backward easily within the site

Two important purposes Allows users to navigate to a point previously visited Shows users where they have been and how far

they have gone from point of entry into site

Internet Development: Design Guidelines

Lightweight Graphics The use of small images to allow a Web page to

be displayed more quickly

Forms and Data Integrity All forms that record information should be clearly

labeled and provide room for input Clear examples of input should be provided to

reduce data errors Site must clearly designate which fields are

required, which are optional and which have a range of values

Internet Development: Design Guidelines

Template-based HTML Templates to display and process common

attributes of higher-level, more abstract items

Creates an interface that is very easy to maintain