Systems Analysis & Design

1. CSUN Information Systems Systems Analysis & Design http://www.csun.edu/~dn58412/IS431/IS431_SP14.htm Input/Output Design & User Interface IS 431: Lecture 10

2. Interface Design in SDLC IS 431 : Lecture 10

3. 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. IS 431 : Lecture 10

4. Internal Outputs • Internal 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. IS 431 : Lecture 10

5. External Outputs • External 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. IS 431 : Lecture 10

6. Computer Outputs IS 431 : Lecture 10

7. Computer Outputs … IS 431 : Lecture 10

8. Chart Types Sample Selection Criteria Line charts show one or more series of data over a Line Chart 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 Area Chart focus is on the area under the line. That area is useful for summarizing and showing the change in data over time. Each line represents one series or category of data. Bar c harts are useful for comparing series or Bar Chart categories of data. Each bar represents one series or category of data. Column charts are similar to bar charts except that Column Chart the bars are vertical. Also, a series of column charts may be used to com pare the same categories at different times or time intervals. Each bar represents one series or category of data. IS 431 : Lecture 10

9. Chart Types … Sample Selection Criteria Pie charts show the relationship of parts to a whole. Pie Chart 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 Donut Chart can show multiple series or categories of data, each as 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 Radar Chart 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 Scatter Chart between two or more series or categories of data measured at uneven intervals of time. Each series is represented by data points using either different colors or bullets. IS 431 : Lecture 10

10. Tabular Report Design Principles portrait landscape JAN 4, 2004 Page 4 of 8 Oversubscriptions By Course REPORT LEGEND SEATS – Number of seats in classroom LIM – Course Enrollment Limit IS 431 : Lecture 10

11. Tabular Report Design Principles … NAME XXXXXXX XXXXXX AMOUNT $X.XX STATUS X STUDENT ID STUDENT NAME 999-38-8476 Mary Ellen Kukow 999-39-5857 Robert Flynn IS 431 : Lecture 10

12. Tabular Report Design Principles … As stored: As output: 307877262 307-87-7262 8004445454 (800) 444-5454 02272004 Feb 27, 2004 RANK NAME SALARY CPT JANEWAY, K 175,000 CPT KIRK, J 225,000 CPT PICARD, J 200,000 CPT SISKO, B 165,000 CAPTAINS TOTAL 765,000 LTC CHAKOTAY 110,000 OTC DATA 125,000 LTC RICKER, W 140,000 LTC SPOCK, S 155,000 EXEC OFFCR TOTAL 530,000 *** END OF REPORT *** IS 431 : Lecture 10

13. Screen Output Design IS 431 : Lecture 10

14. 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 IS 431 : Lecture 10

15. 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. IS 431 : Lecture 10

16. Output Design Process • Identify system outputs and review logical requirements. • Physical DFD • Specify physical output requirements. • Media, timing, volume, distribution • If necessary, design any preprinted forms. • Layout, mailing, turnaround • 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) IS 431 : Lecture 10

17. Output Design with a Modern CASE Tool IS 431 : Lecture 10

18. 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. IS 431 : Lecture 10

19. 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. IS 431 : Lecture 10

20. Input Implementation Methods • Keyboard • Mouse • Point-of-sale terminals • Sound and speech • Automatic data capture • Optical mark recognition (OMR): Bar codes • Optical character recognition (OCR) • Magnetic Ink • Electromagnetic transmission • Smart cards • Biometric IS 431 : Lecture 10

21. Computer Inputs IS 431 : Lecture 10

22. Computer Inputs … IS 431 : Lecture 10

23. Computer Inputs … IS 431 : Lecture 10

24. Input Design Guidelines • Capture 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 . IS 431 : Lecture 10

25. 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). IS 431 : Lecture 10

26. Bad Flow in a Form IS 431 : Lecture 10

27. Good Flow in a Form IS 431 : Lecture 10

28. Internal Controls for Inputs • Each 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) IS 431 : Lecture 10

29. Common GUI Controls (Windows and Web) • Text boxes • Radio buttons • Check boxes • List boxes • Drop down lists • Combination boxes • Spin boxes • Buttons IS 431 : Lecture 10

30. Common GUI Controls … • Text boxes • When the input data values are unlimited in scope • Radio buttons • When data has limited predefined set of mutually exclusive values • Check boxes • When value set consists of a simple yes or no value • List boxes • When data has a large number of possible values • Drop 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 list • Spin boxes • When need to navigate through a small set of choices or directly typing a data value IS 431 : Lecture 10

31. Input Design Process • Identify system inputs and review logical requirements. • Select appropriate input GUI components/controls. • As necessary, design any source documents. • 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) IS 431 : Lecture 10

32. 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 IS 431 : Lecture 10

33. 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. IS 431 : Lecture 10

34. 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. IS 431 : Lecture 10

35. 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 IS 431 : Lecture 10

36. 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. IS 431 : Lecture 10

37. 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. IS 431 : Lecture 10

38. 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). IS 431 : Lecture 10

39. User Interface Design Process • Chart the user interface dialogue. • Prototype the dialogue and user interface. • Obtain user feedback. Special Issues to Consider • Internal controls—authentication and authorization • On-line help IS 431 : Lecture 10

40. Sample Dialogue Chart IS 431 : Lecture 10

41. 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. IS 431 : Lecture 10

42. Styles in Designing Graphical User Interfaces • Windows and frames • Menu-driven interfaces • Instruction-driven interfaces • Question-answer dialogue IS 431 : Lecture 10

43. GUI Menus • Pull down and cascading menus • Tear-off and pop-up menus • Toolbar and iconic menus • Hypertext and hyperlink menus IS 431 : Lecture 10

44. Automated Tools for User Interface Design • Microsoft Access • CASE Tools • Visual Basic • Excel • Visio Visual Basic Menu Construction IS 431 : Lecture 10

45. A Classical Hierarchical Menu Dialogue IS 431 : Lecture 10

46. Pull-Down and Cascading Menus menu bar Cascading menu Ellipses indicates dialogue box Pull-down menu IS 431 : Lecture 10

47. Dialogue Box IS 431 : Lecture 10

48. Pop-Up Menus IS 431 : Lecture 10

49. Tool Bars IS 431 : Lecture 10

50. Iconic Menus IS 431 : Lecture 10