12.1 CSC 123 Systems Analysis & Design Part IV: The Essentials of Design Chapter 12 Designing Effective Input

12.2 Systems Development Life Cycle 4. Design 1. Initiation 2. Requirements Capture 3. Analysis 5. Development 6. Testing 7. Implementation

12.3 Major Topics Input design Form design Display design GUI screen design GUI controls Web design guidelines

12.4 Input Design Objectives The quality of system input determines the quality of system output Well-designed input objectives: –Effectiveness: serve a specific purpose –Accuracy: ensures proper completion –Ease of use: straightforward –Consistency: same use and feel –Simplicity: uncluttered –Attractiveness: user enjoys using them

12.5 Input Forms of input: –Forms –Computer Displays –Interactive web fill-in forms

12.6 Form Design Guidelines for good form design: –Make forms easy to fill in (next slide) –Ensure that forms meet the purpose for which they are designed –Design forms to assure accurate completion –Keep forms attractive

12.7 Form Design (cont) Easy to fill out, techniques: 1.Use proper flow Left  Right, Top  Bottom 2.Group information logically using the seven sections of a form (next slide) 3.Provide people with clear captions Captions tell the person completing the form what to put on a blank line, space, or box

12.8 Form Design (cont) The seven sections of a form are: 1.Heading 2.Identification and access 3.Instructions 4.Body 5.Signature and verification 6.Totals 7.Comments

12.9 Seven Sections of a Form

12.10 Caption Types Captions tell the person filling out the form what to put in a blank line, space, or box. Captions may be one of the following: –Line caption put the caption on the same line or below the line –Boxed caption provide a box for data instead of a line –Vertical check off line up choices or alternatives vertically –Horizontal check off line up choices or alternatives horizontally

12.11 Caption Types

12.12 Meeting the Intended Purpose Must serve their purpose which can be a combination of information: –Recording –Processing –Storing –Retrieving

12.13 Ensuring Accurate Completion To reduce error rates associated with data collection, forms should be designed to assure accurate completion. Design forms to make people do the right thing with the form. In order to encourage people to complete forms, keep them attractive.

12.14 Attractive Forms Uncluttered Get information in the expected order Aesthetic forms or user of different fonts and line weights

12.15 Computer Form Design Software Many form design software is available Features of electronic form design software: –Can design paper, electronic, or Web-based forms –Use templates –Can cut and paste familiar shapes and objects –Field validations & messages –Facilitate the completion using software

12.16 Computer Form Design Software (cont) Features (cont): –Permit customized menus, toolbars, keyboards, and macros –Support popular databases –Enable broadcasting of electronic forms –Permit sequential routing of forms –Assist form tracking –Encourage automatic delivery and processing –Establish security for electronic forms

12.17 Omniform from ScanSoft allows the user to take an existing form, scan it into the computer, and define fields so the form can be easily filled out on a PC

12.18 Display Design Guidelines: 1.Keep the display simple 2.Keep the display presentation consistent 3.Facilitate user movement among display screens 4.Create an attractive display

Keep the Design Simple 3 screen sections - divide the screen into: –Heading: title, menu, icons –Body: data entry, captions, specific instructions –Comments and instructions: for inexperienced users

Keep the Display Consistent Same information in same area Group together related information No overlapping of data

Facilitating Movement Guidelines for facilitating movement from one page to another: –Clicking: the three clicks rule says that users should be able to get to the screens they need within three mouse or keyboard clicks –Scrolling: using arrows or PgDn keys –Using context-sensitive pop-up windows –Using onscreen dialogue

Design an Attractive Screen To make the screen attractive use: –Different thickness of separation lines between subcategories –Inverse video and blinking cursors –Different combinations of colors –Different type fonts fontface.com

12.23 Using Icons in Screen Design Used in graphical screens to run programs and execute commands Guidelines: –Use universally recognizable icons –Icons for a particular application should be limited to 20 recognizable shapes –Use icons consistently throughout

12.24 GUI Screen Example

12.25 Types of GUI Controls Text box List box Combo box Check box Radio button Command button

12.26 Types of GUI Controls (cont) Slider and spin button example

12.27 Types of GUI Controls (cont) Message boxes –used to warn users and provide feedback messages in a dialog box Command buttons –perform an action when the user selects it

12.28 Types of GUI Controls (cont) Hidden Fields: –Not visible to the viewer –Do not take up any space on the Web page –Can only contain a name and value –Used to store values sent from one Web form to the server

12.29 Types of GUI Controls (cont) Tab control dialog boxes –help organize GUI controls for users –each tab should have 3 basic buttons: OK Cancel Help

12.30 Color Do not overdo it with color The most legible foreground/background color combinations for display monitors are: –Green on white –Blue on white – Black on yellow – White on blue – Yellow on black

12.31 Internet & Intranet Design Guidelines 1.Provide clear instructions 2.Use a logical entry sequence for fill-in forms 3.Use a variety of text boxes, push buttons, radio buttons, drop-down lists, and other GUI features 4.Provide a scrolling text box if you are uncertain how much text will be entered 5.Include two basic buttons: Submit and Clear 6.If the form is lengthy, divide it into several simpler forms on separate pages 7.Create a feedback screen that lists error messages if a form has not correctly been filled out

12.32 e-Commerce Applications Involve more than just good Web site design Customers need to be confident of the site, including privacy and security Example: Nordstrom shoppingNordstrom shopping