Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition 14 C H A P T E R INPUT DESIGN AND PROTOTYPING

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Chapter Fourteen Input Design & Prototyping Define the appropriate format and media for a computer input. Explain the difference between data capture, data entry, and data input. Identify and describe several automatic data collection technologies. Apply human factors to the design of computer inputs. Design internal controls for computer inputs. Select proper screen-based controls for input attributes that are to appear on a GUI input screen. Design a web-based input interface.

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Chapter Map

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Introductory Remarks Managers and users make very important decisions based on system outputs. Outputs produced from data that is either input o0r retrieved from databases. Most inputs today are designed using prototypes either from computer-generated mock-ups or prototype database structures such as Microsoft Access. –Rarely fully functional; –Won’t contain security features, data editing, and updates that will be necessary before going into production, still a great method for showing to user to gain feedback.

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Types of Inputs Classified according to two characteristics: –How data is initially captured, entered, and processed –The method and technology used to capture and enter the data. –Here is a taxonomy of various inputs and how data is capture, entered, and processed for each…….

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Taxonomy for Computer Inputs Process Method Data Capture Data Entry Data Processing Keyboard Mouse Touch Screen collected into batch fileskeyboard. This is the most (disk) for processing as a but also the most prone to Data can be collected real keyboard to simplify data commonly associated with graphical user interfaces to reduce errors through screen display or handheldchoices are processed touch commands and data Data usually captured on a business form that becomes the source document for input. - time (over the phone). Data entered via common input method, errors. OLD: Data can be batch. NEW: Data processed as soon as it has been keyed. Same as above. Used in conjunction with entry. Mouse serves as a pointing device for a screen. Can be with point-and-click choices. Same as above, but the use of a mouse is most on-line and real-time processing. Same as above. Data entered on a touch device. Data entry users either choices, or enter data using handwriting recognition. On PCs, touch screen same as above. On handheld computers, data is stored on the handheld for later processing as a remote batch.

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Taxonomy for Computer Inputs (continued)

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Taxonomy for Computer Inputs (concluded)

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Data Capture, Entry, and Processing Data capture is the identification and acquisition of new data (at its source). –Source documents are forms used to record business transactions in terms of data that describe those transactions. Data entry is the process of translating the source data or document (above) into a computer readable format. Used to be 100% keyboard based. Nowadays, the shift is to the consumer -on line Must be edited…

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Data processing is all processing that 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. E.g. payroll, inventory updates, etc. Much still done today. –In on-line processing, the captured data is processed immediately Initially, all captured via terminal and sent to mainframe for processing; Nowadays, some initial verification of data can be done on PCs prior to transmitting to server/mainframe for updating. –In remote batch processing, data is entered and edited on- line, but collected into batches for subsequent processing. Data can be edited and stored locally; later, sent over network for processing via server.

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Input Implementation Methods KeyboardMouse Point-of-sale terminalsSound and Speech Automatic data capture –Optical mark recognition (OMR) Bar codes –Optical character recognition (OCR) –Magnetic Ink –Electromagnetic transmission E.g., tagging fish, whales, etc. –Smart cards Contain health records; Little thicker than a credit card; contain memory, battery, circuits, … –Biometric Used for finger print identification; certain veins (retina or wrists) These systems capture an individual’s characteristics or traits, digitize the image pattern, and compare the image or stored patters for identification.

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Automatic Identification: Bar Codes

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Input Design Guidelines Capture only variable data. –No constants (probably stored somewhere) Do not capture data that can calculated or stored in computer programs as constants. –Let the computer do what it does best: compute! –All kinds of practical reasons for this. Use business codes for appropriate attributes. –Codes for storage; Colors: Blue, Yellow, Gender: M/F

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Source Document / Form Design Guidelines Include instructions for completing the form. –NO one likes to look things up – or even to use Help… Minimize the amount of handwriting. –Poor penmanship by many. Data to be entered (keyed) should be sequenced so that it can be read like a book, that is, top-to-bottom and left-to-right. When possible, based input design on known metaphors. –Make inputs ‘appear’ as a source document, such as a checkbook, …

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Bad Flow in a Form

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Good Flow in a Form

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Metaphoric Screen Design Other metaphors include check, register, and a calendar Pictures of objects can also be metaphors. For example, many web sites use a picture of each credit card accepted instead of the names.

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition 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 – indicates number of trans…. Use one-for-one checks against post-processing detail reports –For on-line systems Log each transaction as it occurs. Often audit trails are kept… Assign each transaction a confirmation number (common in web- based systems) Validate all data –Existence checks – required fields –Data type checks – alpha/numeric checks –Domain checks – ranges of acceptable values –Combination checks – compatibility checks –Self-checking digits – can be added for verification (extra check bytes…) –Format checks – dashes in SSANs? Spaces between …

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition GUI Controls for Input Design; Repository-based Programming Most applications today are being developed using GUIs based on Windows. But the Internet is driving some interfaces to the Web browsers. GUI designs can be complex – although user friendly. One type of ‘GUI’ design is repository-based programming that uses common ‘controls’ based on object-oriented and component-based programming techniques. –Can be used to define most of the properties and constraints for a reusable field and data validation for that field. –Once defined, the object or control can be used by any number of other applications. –Repository guarantees that every instance of the field will use the same definitions, constraints, spelling, etc.

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Repository-Based Prototyping and Development

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Repository-Based Prototyping and Development

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition GUI Components (or Controls) Common GUI controls (for both Windows and Web interfaces) –Text boxes –Radio buttons –Check boxes –List boxes –Drop down lists –Combination boxes –Spin boxes –Buttons –Hyperlinks (yes, also for Windows applications—see Quicken 2000) Advanced controls (mostly for Windows interfaces) –Drop down calendars –Slider edit controls –Masked edit controls –Ellipsis controls –Alternate numerical spinners –Check list boxes –Check tree boxes

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Common GUI Components Textboxes (can contain scrollbars, if needed. Radio Buttons (mutually exclusive choices) (used to set a particular value) should be vertically aligned alternative choices not to be used for yes/no on/off. Include a caption (title) Check boxes Can select many of these Think: patient history Group these vertically Left-align Put title (caption) on them List Box – requires user to select data from choices. May contain scroll bars if large number of choices. Good for many choices and little space. Include descriptive caption

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Advanced GUI Components Advanced options….

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Advanced GUI Components (continued)

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Designing and Prototyping Inputs Menu-Driven Choices –In the past, designer was concerned with content, appearance, and functionality of the input screen. –Frequently, we merely had hierarchy of menus and would ‘go down’ through menus for choices. –Used “Record Layout Charts” and “Display Layout Charts” – sketched; tedious. Today: graphical environments –Use PC databases for prototyping. –Easy to generate / create ‘forms’ for input data –Easy to set up controls on a screen –Most CASE tools have facilities for report / screen layouts and prototyping (includes System Architect) –VB – GUI-based langauge is great for creating forms. Called ‘non-functional’ => no accompanying code. IS the essence of rapid prototyping.

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Input Design Process 1.Identify system inputs and review logical requirements. 2.Select appropriate input components/controls. 3.As necessary, design any source documents. 4.Design, validate and test inputs using some combination of: 5.Let’s look more closely at these…

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition 1. Identify system inputs and review logical requirements Via Requirements Analysis – inputs identified –Think: Use Cases... Have also physical DFDs –These give net outputs of system and implementation method. Data Structure implemented with Relational Algebra? –Know repeating fields, fields with optional values, … Perhaps other elements from requirements discovery – reports, forms, research, observation, …

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition 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 +POSTAL ZONE Same notation as for outputs.

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Discovered that a single input screen could be used to satisfy three inputs – in Sound Stage. Not uncommon. Be sure to NOT include computed fields or fields that can be ‘looked up.’

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition 2. Apply Appropriate GUI Controls Screen-based Controls If have repository-based attributes, can use these for property controls. If not, need to make them. Make Decisions for proper controls: –Input values of unlimited scope? => single text box and multiple-line text box (memo box) examples: product number, total lifetime units sold, … example: catalog description (memo box) Product type, language, video encoding, screen aspect, … radio buttons preferred control Quantity in Stock, Running time, => spin box Attributes in a category and subcategories: - drop down list…. etc.

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition 3. Design, validate and Test Inputs Absolutely, let the User review and play with it to Test. –May want a company logo –refinements for the user…. –May want special colors or dimmed items to inform user that these cannot be entered. –May add ‘edit masks’ for dollar fields, ssan, dates, etc. –Group related, say, radio buttons, into a box with caption on top. –May want some default values visible too.

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Input Prototype for Data Maintenance

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition How about one to many relationships between he tables… Member Order and Member Ordered Products? How do we design a single input to capture the data for both tables?

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Input Prototype for Transaction See format for entering Member and Member Ordered Products on a single form. Notice separate panes. If the Ordered Products exceeds the space, Windows GI controls are ‘intelligent’ and a vertical scroll bar will appear, if necessary.

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Input Prototype for Data Maintenance One last GUI screen design that combines three different or similar inputs from DFDs (New Member, Member Cancellation, and Member Update) Combining logical and physical data flows into a single screen design is quite common.

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition 4. If Necessary, Design the Source Documents Often must be designed. Used to be outsourced, now may often be done using Microsoft Word. –Include last revision date. –largest portion should be for transaction data. –have totales in lower portion (since usually calculated) –may have ‘zones’ for signatures –Have instructions in a convenient location – not on the backside! –Excel and Word may often be used to design source documents.

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Web-Based Inputs and E-Business Web-based outputs and Web-based inputs Could have –web-based Member Order – Saw Windows-based client-server version. In Web-based screens, can more readily use metaphors – like the ‘shopping cart.’ Web interfaces tend to be more artistic than Windows interfaces. –Visual appeal assists in sales, and enticing customers… –Can still have buttons, hyperlinks, drop-down boxes. –A checkout hyperlink directs member to a page to complete the transaction. Web-based screens readily support going ‘back’ and ‘forward’ too.

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Input Prototype for Web Interface

Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Input Prototype for Web Interface