systems analysis & design

1

Systems Analysis & Design

IS 431: Lecture 10

http://www.csun.edu/~dn58412/IS431/IS431_F15.htm

CSUN Information Systems

Input/Output Design &User Interface

IS 431 : Lecture 10 2

Interface Design in SDLC


Output Design

Internal, external, and turnaround outputs.Detailed, summary, and exception reports.Output implementation methods (Media).Formats for presenting information (Charts, Tables,

Screen Outputs)Guidelines and process for output design.


Internal OutputsInternal outputs: for the internal system owners and

system users within an organization.– Detailed reports present information with little or no

filtering.– Summary reports categorize information for managers

who do not want to wade through details (presented in graphical formats - executive info systems).

– Exception reports filter detailed information before presenting it.


External OutputsExternal outputs: for customers, suppliers, partners,

or regulatory agencies outside the organization.Turnaround documents are external outputs that

eventually re-enter the system as inputs Bills and invoices include a stub to be returned by the customer

with payment.


Computer OutputsDistribution

DeliveryInternal Output (reporting)

Turnaround Output (external; then internal)

External Output (transactions)

Printer Detailed, summary, or exception information printed on hard-copy reports for internal business use.

Business transactions printed on business forms that will eventually be returned as input business transactions.

Business transactions printed on business forms that conclude the business transactions.

Screen Detailed, summary, or exception information displayed on monitors for internal business use.

Business transactions displayed on monitors in forms or windows that will also be used to input other data to initiate a related transaction.

Business transactions displayed on business forms that conclude the business transactions.

Point-of-Sale Terminals

Information printed or displayed on special-purpose terminals dedicated to specific internal business functions.

Information printed or displayed on a special-purpose terminal for the purpose of initiating a follow-up business transaction.

Information printed or displayed on special-purpose terminals dedicated to customers.


Computer Outputs …Distribution

DeliveryInternal Output (reporting)

Turnaround Output (external; then internal)

External Output (transactions)

Multimedia(audio or video)

Information transformed into speech for internal users.

Information transformed into speech for external users who respond with speech or tone input data.

Information transformed into speech for external users.

E-mail Displayed messages related to internal business information.

Displayed messages intended to initiate business transactions.

Displayed messages related to business transactions.

Hyperlinks Web-based links to internal information that is enabled via HTML or XML formats.

Web-based links incorporated into Web-based input pages to provide users with access to additional information.

Web-based links incorporated into Web-based transactions.

Microfiche Archival of internal management reports to microfilm that requires minimal physical storage space.

Not applicable unless there is an internal need to archive turnaround documents.

Not applicable unless there is an internal need for copies of external reports.


Chart TypesSample

Line Chart

Area Chart

Bar Chart

Column Chart

for summarizing and showing the change in data over

Selection Criteria

Line charts show one or more series of data over a period of time. They are useful for summarizing and showing data at regular intervals. Each line represents one series or category of data.

Area charts are similar to line charts except that the focus is on the area under the line. That area is useful

time. Each line represents one series or category of data.

Bar charts are useful for comparing series or categories of data. Each bar represents one series or category of data.

Column charts are similar to bar charts except that the bars are vertical. Also, a series of column charts may be used to compare the same categories at different times or time intervals. Each bar represents one series or category of data.


Chart Types …Sample

Selection Criteria

Pie Chart

Donut Chart

Radar Chart

Scatter Chart

represented by data points using either different colors

can show multiple series or categories of data, each as

Pie charts show the relationship of parts to a whole. They are useful for summarizing percentages of a whole within a single series of data. Each slice represents one item in that series of data.

Donut charts are similar to pie charts except that they

its own concentric ring. Within each ring, a slice of that ring represents one item in that series of data.

Radar charts are useful for comparing different aspects of more than one series or category of data. Each data series is represented as a geometric shape around a central point. Multiple series are overlaid so that can be compared.

Scatter charts are useful for showing the relationship between two or more series or categories of data measured at uneven intervals of time. Each series is

or bullets.


Tabular Report Design Principles

Design Issue Design Guideline ExamplesPage Size Today the page sizes of choice are

standard (8½" x 11") and legal (8½" x 14").Not applicable

Page Orientation Portrait orientation is often preferred because it is oriented the way we orient most books and reports; however, landscape is often necessitated for tabular reports because more columns can be printed.

Page Headings At a minimum, page headers should include a recognizable report title, date and time, and page numbers.

Report Legends A legend is an explanation of abbreviations, colors, or codes used in a report. In a printed report, a legend can be printed on only the first or last page. On a display screen, a legend can be made available as a pop-up dialogue box.

portraitlandscape

JAN 4, 2004

Page 4 of 8Oversubscriptions By Course

REPORT LEGENDSEATS – Number of seats in classroomLIM – Course Enrollment Limit


Tabular Report Design Principles …

Design Issue Design Guideline ExamplesColumn Headings

Column headings should be short and descriptive. Avoid abbreviations or include a Report Legend

Self-explanatory

Heading Alignments

Alignment should be tested with users for preferences with a special emphasis on the risk of misinterpretation of the information.

Column Spacing If columns are too close, users may not properly differentiate between the columns. If they are too far apart, the user may have difficulty following a single row. Rule of thumb is to use 3-5 spaces between each.

Self explanatory

Row Headings The first one or two columns should identify data that differentiates each row. Rows should be sequenced in a fashion that supports their use. Frequently rows are sorted on a numerical key or alphabetically.

NAMEXXXXXXX XXXXXX

AMOUNT$X.XX

STATUSX

STUDENT ID STUDENT NAME999-38-8476 Mary Ellen Kukow999-39-5857 Robert Flynn


Tabular Report Design Principles …

Design Issue Design Guideline ExamplesFormatting Data is often stored without formatting

characters to save storage space. Outputs should reformat data to match the users’ norms.

Control Breaks Groups of rows should be logically grouped in the report. The transition from one group to the next is called a control break and is frequently followed by subtotals for the group.

End of Report The end of a report should be clearly indicated to ensure that users have the entire report.

As stored: As output:307877262 307-87-72628004445454 (800) 444-545402272004 Feb 27, 2004

*** END OF REPORT ***

RANK NAMESALARY

CPT JANEWAY, K175,000

CPT KIRK, J225,000

CPT PICARD, J200,000

CPT SISKO, B165,000CAPTAINS TOTAL765,000

LTC CHAKOTAY110,000

OTC DATA125,000

LTC RICKER, W140,000

LTC SPOCK, S155,000EXEC OFFCR TOTAL530,000


Screen Output DesignScreen Design Consideration

Design Guidelines

Size The designer should consider the “lowest common denominator.” The default window size should be less than or equal to the worst resolution display in the user community.

Scrolling On-line outputs have the advantage of not being limited by the physical page. This can also be a disadvantage if important information such as column headings scrolls off the screen. If possible, freeze important headings at the top of a screen.

Navigation Users should always have a sense of where they are in a network of on-line screens. Users also require the ability to navigate between screens.

Partitioning In Windows, zones are forms within forms. On the Internet, frames are pages within pages.

Information Hiding

On-line applications offer capabilities to hide information until it is either needed or becomes important. Techniques include drill-down and pop-up dialogue boxes.

Highlighting Highlighting can call users’ attention to erroneous data, exception data, or specific problems. Highlighting can also be a distraction if misused.

Printing Always provide users the option to print a permanent copy of the report.


Logical Data Structure for Output Requirements

INVOICE = INVOICE NUMBER+ INVOICE DATE+ CUSTOMER NUMBER+ CUSTOMER NAME+ CUSTOMER BILLING ADDRESS = ADDRESS >+ 1 { SERVICE DATE +SERVICE PROVIDED +SERVICE CHARGE } n+ PREVIOUS BALANCE DUE+ PAYMENTS RECEIVED+ TOTAL NEW SERVICE CHARGES+ INTEREST CHARGES+ NEW BALANCE DUE+ MINIMUM PAYMENT DUE+ PAYMENT DUE DATE+ ( DEFAULT CREDIT CARD NUMBER )+ ( [ CREDIT MESSAGE, PAYMENT MESSAGE ] )

ADDRESS = ( POST OFFICE BOX NUMBER )+ STREET ADDRESS+ CITY+ STATE+ ZIP CODE


Output Design Principles

Right User: the distribution of (or access to) outputs to relevant users.

Right Format: outputs should be simple to read and interpret (user friendly).

Right Info: outputs must be acceptable (satisfy business requirements) to the system users who will receive them.

Right Time: just in time, currency.


Output Design Process1. Identify system outputs and review logical requirements.

• Physical DFD

2. Specify physical output requirements.• Media, timing, volume, distribution

3. If necessary, design any preprinted forms.• Layout, mailing, turnaround

4. Design, validate and test outputs using some combination of:• Layout tools (e.g., hand sketches, spacing charts, or CASE tools.• Prototyping tools (e.g., spreadsheet, PC DBMS, 4GL)• Code generating tools (e.g., report writer)


Output Design with a Modern CASE Tool


Input Design

Data capture, data entry, and data input.Format and media for a computer input.Human factors in computer inputs design.Internal controls for computer inputs.


Data Capture, Entry, and Processing

Data capture = identification and acquisition of new data (at its source).

– Source documents = forms used to record business transactions in terms of data describing those transactions.

Data entry = translating the source data or document into a computer readable format.Data processing = all processing occurs on the data after it is input from a machine readable form.

– In batch processing, the entered data is collected into files called batches and processed as a complete batch.

– In on-line processing, the captured data is processed immediately– In remote batch processing, data is entered and edited on-line, but

collected into batches for subsequent processing.


Input Implementation Methods

KeyboardMousePoint-of-sale terminalsSound and speechAutomatic data capture

– Optical mark recognition (OMR): Bar codes– Optical character recognition (OCR)– Magnetic Ink– Electromagnetic transmission– Smart cards– Biometric


Computer InputsProcess Method Data Capture Data Entry Data Processing

Keyboard Data is usually captured on a business form that becomes the source document for input. Data can be collected real-time.

Data is entered via keyboard. This is the most common input method but also the most prone to errors.

OLD: Data can be collected into batch files (disk) for processing as a batch.NEW: Data is processed as soon as it has been keyed.

Mouse Same as above. Used in conjunction with keyboard to simplify data entry. Mouse serves as a pointing device for a screen.

Same as above, but the use of a mouse is most commonly associated with online and real-time processing.

Touch Screen Same as above. Data is entered o a touch screen display or handheld device. Data entry users either touch commands and data choices or enter data using handwriting recognition.

On PCs, touch screen choices are processed same as above. On handheld computers, data is sorted on the handheld for later processing as a remote batch.

Point of Sale Data is captured as close to the point of sale as humanly possible. No source documents.

Data is often entered directly by the customer or by an employee directly interacting with the customer.

Data is almost always processed immediately as a transaction or inquiry.


Computer Inputs …Process Method Data Capture Data Entry Data Processing

Sound Data is captured as close to the source as possible, even when the customer is remotely located.

Data is entered using touch-tones (typically from a telephone). Usually requires fairly rigid command menu structure and limited input options.


Speech Same as sound. Data (and commands) is spoken. This technology is not as mature and is much less reliable and common than other techniques.


Optical Mark Data is recorded on optical scan sheets as marks or precisely formed letter, numbers, and punctuation.

Eliminates the need for data entry.

Data is almost always processed as a batch.

Magnetic Ink Data is usually prerecorded on forms that are subsequently completed by the customer. The customer records additional information on the form.

A magnetic ink reader reads the magnetized data. The customer-added data must be entered using another input method.

Data is almost always processed as a batch.


Computer Inputs …

Process Method Data Capture Data Entry Data Processing

Electromagnetic Data is recorded directly on the object to be described by data.

Data is transmitted by radio frequency.

Data is almost always processed immediately.

Smart Card Data is recorded directly on a device to be carried by the customer, employee, or other individual that is described by that data.

Data is read by smart card readers.

Data is almost always processed immediately.

Biometric Unique human characteristics become data

Data is read by biometric sensors. Primary applications are security and medical monitoring

Data is processed immediately.


Input Design GuidelinesCapture only variable data (quantity bought).Do not capture data that can calculated (sales total)

or stored in computer programs as constants (unit prices).

Minimize errors from user’s entry: user friendly format with business ID codes / available options for appropriate attributes .


Source Document / Form Design Guidelines

Include instructions for completing the form.Minimize the amount of data handwriting/keying.Data to be entered (keyed) should be sequenced:

top-down and left-right.When possible, based input design on known

metaphors (similar layout to paper docs).


Bad Flow in a Form


Good Flow in a Form


Internal Controls for InputsEach input, and the total number of inputs should be

monitored (to minimize the risk of lost transactions).– For batch processing

Use batch control slips (batch total) Use one-for-one checks against post-processing detail reports

– For on-line systems Log each transaction as it occurs Assign each transaction a confirmation number (common in web-based

systems)Validate all data

– Existence checks (required fields)– Data type checks (alphanumeric vs. numeric)– Domain checks (range value)– Combination checks (related range for details of a category)– Self-checking digits (bit check of ID numbers)– Format checks (input masks for currency, date, phone, SSN)


Common GUI Controls (Windows and Web)

Text boxesRadio buttonsCheck boxesList boxesDrop down

listsCombination

boxesSpin boxesButtons


Common GUI Controls … Text boxes

– When the input data values are unlimited in scopeRadio buttons

– When data has limited predefined set of mutually exclusive valuesCheck boxes

– When value set consists of a simple yes or no valueList boxes

– When data has a large number of possible valuesDrop down lists

– When data has large number of possible values and screen space is too limited for a list box

Combination boxes– When need to provide the user with option of selecting a value from a list

or typing a value that may or may not appear in the listSpin boxes

– When need to navigate through a small set of choices or directly typing a data value


Input Design Process

1. Identify system inputs and review logical requirements.

2. Select appropriate input GUI components/controls.3. As necessary, design any source documents.4. Design, validate and test inputs using some

combination of:• Layout tools (e.g., hand sketches, spacing charts, or

CASE tools.• Prototyping tools (e.g., spreadsheet, PC DBMS, 4GL)


A Logical Data Structure for Input Requirements

ORDER = ORDER NUMBER+ ORDER DATE+ CUSTOMER NUMBER+ CUSTOMER NAME+ CUSTOMER SHIPPING ADDRESS = ADDRESS >+ ( CUSTOMER BILLING ADDRESS = ADDRESS > )+ 1 { PRODUCT NUMBER +QUANTITY ORDERED } n+ ( DEFAULT CREDIT CARD NUMBER )

ADDRESS= ( POST OFFICE BOX NUMBER )+ STREET ADDRESS+ CITY+ STATE+ ZIP


User Interface Design

System users and special design considerations.Human engineering factors and guidelines for an

integrated user interface design Integrate output and input design into an overall

user interface.


System User Classifications

Expert User – an experienced computer user– Spends considerable time using specific application programs. – Use of a computer is usually considered non-discretionary. – In the mainframe computing era, this was called a dedicated user.

Novice User – a less experienced computer user – Uses computer on a less frequent, or even occasional, basis. – Use of a computer may be viewed as discretionary (although this is

becoming less and less true). – Sometimes called a casual user.


Interface Problems

Interface problems result in confusion, panic, frustration, boredom, misuse, abandonment, and other undesirable consequences.

– Excessive use of computer jargon and acronyms – Non-obvious or less-than-intuitive design – Inability to distinguish between alternative actions

(“what do I do next?”) – Inconsistent problem-solving approaches – Design inconsistency


Human Engineering Guidelines

The user should always be aware of what to do next– Tell user what the system expects right now. – Tell user that data has been entered correctly.– Tell user that data has not been entered correctly. – Explain reason for a delay in processing. – Tell user a task was completed or not completed.

Format screen so instructions and messages always appear in the same general display area.

Display messages and instructions long enough so user can read them.


Human Engineering Guidelines …

Use display attributes sparingly. Default values should be specified.Anticipate errors users might make. Users should not be allowed to proceed without

correcting an error. If user does something that could be catastrophic, the

keyboard should be locked to prevent any further input, and an instruction to call the analyst or technical support should be displayed.


Guidelines for Dialogue Tone and Terminology

Tone:– Use simple, grammatically correct sentences. – Don’t be funny or cute: overuse of humor.– Don’t be condescending: overuse of praise.

Terminology– Don’t use computer jargon.– Avoid most abbreviations.– Use simple terms.– Be consistent in your use of terminology.– Carefully phrase instructions—use appropriate action

verbs (select vs. pick, type vs. enter, press vs. hit).


User Interface Design Process

1. Chart the user interface dialogue. 2. Prototype the dialogue and user interface. 3. Obtain user feedback.

Special Issues to Consider• Internal controls—authentication and authorization• On-line help


Sample Dialogue Chart


Common Approaches for Display Area

• Paging displays a complete screen of characters at a time. The complete display area is known as a page (or screen). The page is replaced on demand by the next or previous page.

•Scrolling moves the displayed information up or down on the screen, one line at a time.


Styles in Designing Graphical User Interfaces

Windows and frames Menu-driven interfacesInstruction-driven interfacesQuestion-answer dialogue


GUI MenusPull down and cascading menusTear-off and pop-up menusToolbar and iconic menusHypertext and hyperlink menus


Automated Tools for User Interface Design

Microsoft AccessCASE ToolsVisual BasicExcelVisio

Visual Basic Menu

Construction


A Classical Hierarchical Menu Dialogue


Pull-Down and Cascading Menus

menu bar

Pull-down menu

Cascading menu

Ellipses indicates dialogue box


Dialogue Box


Pop-Up Menus


Tool Bars


Iconic Menus


Consumer-Style Interface


Hybrid Windows/Web Interface


Instruction-Driven Interface


Authentication Log-in Screen


Help Tool Tip


Help Wizard


SoundStage Main Menu