1

CHAPTER 8OUTPUT AND USER INTERFACE DESIGN

Phase Description

•Systems Design is the third of five phases in the systems development life cycle

•Now you will work on a physical design that will meet the specifications described in the system requirements document

•Tasks will include output and user interface design, data design, and system architecture

2

Chapter Objectives

• Explain the concept of user interface design and human-computer interaction, including the basic principles of user-centered design

• List user interface design guidelines• Discuss output design and technology issues• Design effective source documents• Explain input design and technology issues• Discuss guidelines for data entry screen design• Use input masks and validation rules to reduce

input errors• Describe output and input controls and security

3

What is a User Interface•User interface (UI) describes how users

interact with a computer system and consists of all the hardware,software,screen, menus,functions,output and features that affect two way communications between the user and the computer.

4

• Evolution of the User Interface–Process-control–As information management evolved from

centralized data processing to dynamic, enterprise-wide systems, the primary focus also shifted — from the IT department to the users themselves

–User-centered system–Requires an understanding of human-

computer interaction and user-centered design principles

5

Traditional, processing-centered Information System Model

6

DataInfo.Systs IT Dept.

User Request for information

Modern , User-centered Information System Model

7

Information System

Business Transactions

IT Department

SuppliersCustomers

Data

Internal Users

•Human Computer Interaction▫ a user interface is base on basic principles

of human-computer interaction▫Human-computer interaction (HCI) describes

the relationship between computers and people who use them to perform their jobs.

▫Graphical user interface (GUI) –used icons, graphical objects and pointing

▫Main objective is to create a user-friendly design that is easy to learn and use

8

User rights suggested by IBM’s DR. Clare-Marie Karat

9

Principles of User Centered Design

•Good design based on seven basic principles:▫Understand the business▫Maximize Graphical Effectiveness▫Think like a user▫Use models and prototypes• Storyboard• Usability metrics

▫Focus on usability▫Invite feedback▫Document everything

10

Designing the User Interface• Guidelines for User Interface Design

▫Follow eight basic guidelines1. Design a transparent interface2. Build an interface that is easy to learn and use3. Enhance user productivity4. Make it easy for users to obtain help or correct

errors5. Minimize input data problems6. Provide feedback to users7. Create an attractive layout and design8. Use familiar terms and images

• Good user interface design is based on a combination of ergonomics, aesthetics, and interface technology

11

Designing the User Interface

• User Interface Controls▫List box – scroll bar▫Drop-down list box▫Option button, or

radio button▫Check box▫Calendar control▫Switchboard

12

• User Interface Controls▫Menu bar▫Toolbar▫Command button▫Dialog box▫Text box▫Toggle button

13

•The opening screen is especially important because it introduces the application and allow users to view the main options.

•Can use switchboard: main form that use command buttons enable users to navigate the system and select from groups of related tasks

14

Designing the User Interface

Output Design•Before designing output, ask yourself several

questions:▫What is the purpose of the output?▫Who wants the information, why is it needed, and how

will it be used?▫What specific information will be included?▫Will the output be printed, viewed on-screen, or both?

What type of device will the output go to?▫When will the information be provided, and how often

must it be updated?▫Do security or confidentiality issues exist?

•Your answers will affect your output design strategies

15

•Overview of Report Design▫Few firms have been able to eliminate

printed output totally▫Turnaround documents-output documents

that are late entered back into the same or another information system

▫Reports must be easy to read and well organized

▫Database programs include a variety of report design tools

▫Character-based reports

16

Output Design

•Types of Reports▫Detail reports: produces one or more lines of

output for each record processed.▫Exception reports: displays only those records

that meet a specific condition or conditions.▫Summary reports: not listing the report in

details.

17

18

•User Involvement in Report Design▫Printed reports are an important way of

delivering information to users, so recipients should approve all report designs in advance

▫To avoid problems submit each design for approval as you complete it, rather than waiting until you finish all report designs

▫When designing a report you should prepare a sample report or a Mock-up

▫After report design is approved, create a Report analysis form

19

• Report Design Principles– Printed reports must be attractive, professional,

and easy to read– The analyst must consider design features:

▫Report headers and footers▫Page headers and footers▫Column heading alignment▫Column spacing▫Field order

Fields should be displayed and grouped in a logical order

▫Grouping detail lines It is meaningful to arrange detail lines in

groups Group header Group footer

▫Consistent design

20

21

•Report Design Example

22

•Output Technology▫Internet-based information delivery

Webcast: audio or video media file distributed over the internet

▫E-mail▫Blogs▫Instant Messaging▫Wireless Devices▫Digital audio, images, and video▫Podcasts▫Automated facsimile systems/Faxback systems▫Computer output microfilm (COM)▫Computer output to digital media

23

•Specialized forms of output:▫Portable, web connected devices that can run

applications, handle multimedia output and provide powerful, multipurpose communications for users.

▫Retail point-of-sale terminal that handle computer based credit card transactions, print receipts and update inventory records.

▫Automatic teller machines (ATMs) that can process bank transactions and print deposit and withdrawal slips.

▫Special purpose printers that can produce labels, employee ID cards, driver’s licenses, gasoline pump receipts and in some states lottery tickets

24

•Plotters that can produce high –quality images such as blueprints, maps and electronic circuits diagrams.

•Electronic detection of data embedded in credit cards, bank cards and employee identification cards.

25

Input Design•Input technology has changed

dramatically in recent years•The quality of the output is only as good

as the quality of the input-Garbage in, garbage out (GIGO)

•The objective of input design is to ensure the quality ,accuracy and timeliness of input data

26

•Source Documents and Forms▫A source document collects input data, triggers or

authorizes an input action and provides a record of the original transaction.

▫During the input design stage, you develop source documents that are easy to complete and use for data entry.

▫Form layout Heading zone Control zone Instruction zone Body zone Totals zone Authorization zone

27

28

Source document zones

▫Information should flow on a form from left to right and top to bottom to match the way users read documents naturally

▫A major challenge of Web-based form design is that most people read and interact differently with on-screen information compared to paper forms

29

30

• D Jakob Nielsen believes that users scan the web material rather than reading it. He suggest that Web designer must use scannable text and employ usability metrics to measure the results.

•Data Entry screen▫Data capture uses an automated or

manually operated device to identify source data and convert it into computer-readable form.

▫Data entry is the process of manually entering data into the information system.

▫The most effective method of online data entry is form filling

31

•Designing Data Entry Screens▫Most effective method of online data entry

is form filling▫Guidelines will help you design data entry

screens1. Restrict user access to screen locations

where data is entered2. Provide a descriptive caption for every

field, and show the user where to enter the data and the required or maximum field size

32

3. Display a sample format if a user must enter values in a field in a specific format - separator

4. Require an ending keystroke for every field5. Do not require users to type leading zeroes for numeric

fields6. Do not require users to type trailing zeroes for numbers

that include decimals7. Display default values so operators can press the

ENTER key to accept the suggested value8. Use a default value when a field value will be constant

for successive records or throughout the data entry session

9. Display a list of acceptable values for fields, and provide meaningful error messages

33

10.Provide a way to leave the data entry screen at any time without entering the current record

11.Provide users with an opportunity to confirm the accuracy of input data before entering it

12.Provide a means for users to move among fields on the form

13.Design the screen form layout to match the layout of the source document

14.Allow users to add, change, delete, and view records

15.Provide a method to allow users to search for specific information

34

• Input masks▫Templates or pattern that restrict data entry and prevent errors.

•Validation Rules▫Testing the data and rejecting any entry that fails to meet

specified conditions.▫Eight types of validation rules

Sequence check Existence check Data type check Range check Reasonable check Validity check Combination check Batch controls

35

•Input Technology▫Batch input

Data entry usually is performed on a specified time schedule, such as daily,weekly,monthly or longer.

▫Online input Online data entry Popular online input method:

Source data automation▫RFID tags or Magnetic data strips

36

▫Tradeoffs Unless source data automation is used,

manual data entry is slower and more expensive than batch input because it is performed at the time the transaction occurs and often done when computer demand is at its highest

The decision to use batch or online input depends on business requirements

37

•Input Volume Reduction▫Guidelines will help reduce input volume

1. Input necessary data only2. Do not input data that the user can

retrieve from system files or calculate from other data

3. Do not input constant data4. Use codes

38

Security and control issues

39

•Output security and control (maintain integrity & security)▫Output must be accurate, complete, current and

secure.▫Output control method:

Report should include appropriate title, report number or code, printing date, and time period covered

Report should have page number, (page nn of nn) End of report should be labeled clearly Control totals and record counts should be reconciled against

input totals and counts Report should be selected at random for a thorough check of

correctness and completeness All processing error or interruption must be logged

•Output security ( protects privacy rights and unauthorized access)

•Output security method: ▫Limit the number of printed and use tracking

procedure.▫Specific procedure to ensure output is delivered to

authorized recipients.▫Sensitive reports is stored in secure areas.▫Shred sensitive reports, out of date reports and

reports from aborted print runs.▫Install diskless workstation ▫Use port protector

40

Security and control issues

Security and control issues

41

•Input Control -ensure that input data is correct, complete and secure.

•Input control:▫Every piece of information should be

traceable back to the input data-Audit trail▫Data security policies and procedures▫Records retention policy▫Encrypted – encryption

Chapter Summary• The chapter began with a discussion of user

interface design and HCI concept.• User-centered design principles require an analyst

to understand the business functions, maximize graphical effectiveness, profile the system’s users, think like a user, use prototyping, design a comprehensive interface, continue the feedback process, and document the interface design

• Interface design should be ;transparent, create an interface that is easy to learn and use, enhance user productivity, make it easy to obtain help or correct errors, minimize input data problems, provide feedback, create an attractive layout and design, and use familiar terms and images.

42

• Various types of printed reports; detail, exception and summary reports.

• An effective way to reduce input errors is to reduce input volume

• You can also reduce errors by using well-designed data entry screens and by using input mask and data validation checks

• Output control includes physical protection of data and reports and control of unauthorized ports or devices that can extract data from the system.

• Input controls include audit trails,encryption,password security, data security and the creation of access levels to limit persons authorized to view or used data.

43

Review questions

1. Explain the concept of human -computer interaction (HCI).

2. Describe seven principles for a user centered interface design.

3. Describe six types of user interface control.4. List 8 user interface design guidelines5. State three types of report.6. Explain batch and online input methods.7. Provide four guidelines for reducing input

volume.

44