Designing Effective InputSystems Analysis and Design, 7eKendall & Kendall12 2008 Pearson Prentice Hall

Learning ObjectivesDesign input forms for users of business systemsDesign engaging input displays for users of information systemsDesign useful input forms for people interacting on the WebDesign useful input pages for users of intranets and the Internet

Input Design ObjectivesThe quality of system input determines the quality of system outputInput design objectives:EffectivenessAccuracyEase of useConsistencySimplicityAttractiveness

Major TopicsInput designForm designDisplay designGUI screen designGUI controlsWeb design guidelines

Good Form DesignMake forms easy to fill inEnsure that forms meet the purpose for which they are designedDesign forms to assure accurate completionKeep forms attractive

Make Forms Easy to Fill inForm flowSeven sections of a formCaptioning

Form FlowCan minimize the time and effort expended by employees in form completionShould flow from left to right and top to bottom

Seven Sections of a FormHeadingIdentification and accessInstructionsBodySignature and verificationTotalsComments

Figure 12.1 Seven sections found in well-designed forms

Caption TypesLine caption Putting the caption on the same line or below the lineBoxed caption Providing a box for data instead of a lineCheck off caption Lining up choices or alternatives verticallyHorizontal check off caption Lining up choices or alternatives horizontallyTable captionWork well in the body of a formCombination

Figure 12.2 Major captioning alternatives

Meeting the Intended PurposeSystems analysts may use different types of specialty forms for different purposesSpecialty formsMultiple-part Continuous-feedPerforated

Ensuring Accurate CompletionTo reduce error rates associated with data collection, forms should be designed to assure accurate completionDesign forms to make people do the right thing with the form

Keeping Forms AttractiveAesthetic forms draw people into them and encourage completionForms should look uncluttered, and elicit information in the expected orderUsing different fonts and line weights within the same form can help make it more attractive for users

Computer-Assisted Form DesignNumerous form design packages are available for PCsElectronic forms can have intelligence that supports users in their tasks

Figure 12.4 Software for electronic form design has many dynamic features

Figure 12.5 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

Controlling Business FormsMaking sure that each form in use fulfills its specific purposeMaking sure that the specified purpose is integral to organizational functioningPreventing duplication of information collected and of the forms that collect itDesigning effective formsDeciding on how to reproduce forms in the most economical wayEstablishing procedures that make forms available, at the lowest possible cost

Good Display and Web Forms DesignKeep the display simpleKeep the display presentation consistentFacilitate user movement among display screens and pagesCreate an attractive and pleasing display

Keeping the Display SimpleHeadingBodyComments and instructions

Keeping the Display ConsistentLocate information in the same area each time a new display is accessedInformation that logically belongs together should be consistently grouped togetherInformation should not overlap from one group to another

Facilitating MovementThe three-clicks rule says that users should be able to get to the screens they need within three mouse or keyboard clicksMovement among screens:Scrolling by using arrows or PgDn keysContext-sensitive pop-up windowsOnscreen dialogue

Designing an Attractive and Pleasing DisplayShould draw users into them and hold their attentionUse logical flows in the plan to your display pagesThickness of separation lines between subcategoriesColor or shaded boxes and creating three-dimensional boxes and arrows

Figure 12.8 You can design an attractive data entry screen with a three-dimensional effect using JetFlows FormFlow

Inverse Video, Blinking Cursors, and Font TypesInverse videoBlinking cursor or fieldsFont types in various styles and sizes

Using Icons in Screen DesignIcons are pictorial, onscreen representations symbolizing computer actions that users may select using a mouse, keyboard, lightpen, touch screen or joystickShapes should be readily recognizableIcons for a particular application should be limited to 20 recognizable shapesUse icons consistently throughout

Graphical User Interface (GUI) ControlsText boxesCheck boxesOption or radio buttonsList and drop-down list boxesSliders and spin buttonsImage mapsText areaMessage boxes

Figure 12.10 The designer has many GUI components that allow flexibility in designing input screens for the Web or other software packages. This example is from Microsoft Access

Text BoxesText boxes should be large enough to accommodate all the charactersCaptions should be to the left of the text boxCharacter data is left-aligned within the boxNumeric data is right-aligned

Check BoxesCheck boxes are used for nonexclusive choicesCheck box text or label is placed to the right of the check boxIf there are more than 10 check boxes, group together in a bordered box

Option ButtonsOption or radio buttons are used for exclusive choicesChoices are listed to the right of the button, in some sequenceOften they are placed in a rectangle called an option groupIf more than six option buttons are used, a list box or drop-down list box should be implemented

List and Drop-Down List BoxesUsed when there is little room available on the pageIf there is a commonly selected choice, it is usually displayed in the drop-down list by default

Sliders, Spin Buttons, and Image MapsSliders and spin buttons are used to change data that have a continuous range of valuesImage map fields are used to select values within an image

Figure 21.11 Sliders and spin buttons are two additional GUI components the analyst can use to design input screens

Text AreaA text area is used for entering a larger amount of textCan view data larger then the box areaHandling text:Hard return is used to force new linesUse word wrap within the text area

Message Boxes and Command ButtonsMessage boxes are used to warn users and provide feedback messages in a dialog boxCommand buttons perform an action when the user selects it

Form Controls and ValuesEach control in a GUI interface stores data associated with the controlWeb pages use a name and value pair that are transmitted to the server or in an email sent along with the form

Hidden FieldsNot visible to the viewerDo not take up any space on the Web pageCan only contain a name and valueUsed to store values sent from one Web form to the server

Event-Response ChartsUsed to: list the variety of events that can occurshow what should happenbuild a Web form that requires minimal action from the userexplore improvements to the Web pageEvents may be used to: control navigation between Web pageschange the contents of drop-down lists

Dynamic Web PagesWeb pages that change themselves as the result of some user actionAdvantageModify themselves quicklyDisadvantageWill not work if JavaScript is turned offDynamic Web pages may not be compliant with the American Disabilities Act

AjaxUses JavaScript and XMLAllows Web developers to build a Web page that works like a traditional desktop programThe data may be either a small text file or an XML document containing many customers or repeating dataHas the advantage of making the Web work faster and of providing a smoother viewing experience for usersThe disadvantages are that JavaScript must be enabled and the Web page may violate the American Disabilities Act

Tab Control Dialogue BoxesCreate a separate tab for each unique featurePlace the most commonly used tabs in front and display them firstConsider including three basic buttons in your designOKCancelHelp

ColorThe five most legible foreground/background color combinations:Black on yellowGreen on whiteBlue on whiteWhite on blueYellow on black

Intranet and Internet Page DesignProvide clear instructionsDemonstrate a logical entry sequence for fill-in formsUse a variety of text boxes, push buttons, radio buttons, drop-down lists, and other GUI featuresProvide a scrolling text box if you are uncertain how much text will be entered

Intranet and Internet Page Design (Continued)Include two basic buttons: Submit and ClearIf the form is lengthy, divide it into several simpler forms on separate pagesCreate a feedback screen that lists error messages if a form has not correctly been filled out

Ecommerce ApplicationsEcommerce applications involve more than just good designs of Web sitesCustomers need to feel confident in the siteShopping cart

SummaryGuidelines for well-designed input forms:Forms must be easy to fill outForms must meet the purpose for which they are designedForms must be designed to ensure accurate completionForms must be pleasing and attractive

Summary (Continued)Guidelines for well-designed displays:Displays must be kept simpleDisplays must be consistent in presentationDesign must facilitate movement between pagesDisplays must be attractive

Summary (Continued)Guidelines for Web fill-in formsProvide clear instructionsDemonstrate a logical entry sequence for fill-in formsUse a variety of text boxes, push buttons, drop-down menus, check boxes, and radio buttonsProvide a scrolling text box if you are uncertain about how much space users will need to respond to a question

Summary (Continued)Guidelines for Web fill-in forms (continued)Prepare two basic buttons on every Web fill-in form: Submit and Clear FormIf the form is lengthy and the users must scroll extensively, divide the form into several simpler forms on separate pagesCreate a feedback screen that highlights errors in an appropriate color and refuses submission of the form until mandatory fields are correctly filled in

Effectiveness all serve specific purposes for users of the information system.

Accuracy design that ensures proper completion.

Ease of use straight forward and require no extra time to decipher.

Consistency group data similarly from one application to the next.

Simplicity keeping designs uncluttered in a manner that focuses the users attention.

Attractiveness appealing design.Forms often serve as source documents for users or for input to ecommerce applications that humans must enter.First, design forms with proper flow, from left to right and top to bottom.Second, group information logically using the seven sections of a form.Third, provide people with clear captions.

Illogical flow takes extra time and is frustrating.Heading usually includes the name and address of the business originating the form.Identification and access include codes that may be used to file the report and gain access to it at a later date.Instructions tell how the form should be filled out.

Body contains explicit, variable data.

Signature, verification, totals, and comments a logical way to provide closure for the person filling out the form.Captions tell the person filling out the form what to put in a blank line, space, or box.Sometimes it is desirable to provide different information to different departments or users but still share some basic information.Proper layout and flow contribute to a forms attractiveness.

Type fonts and line weights are useful design elements for capturing attention and making people feel secure that they are filling in the form correctly.Omniform by ScanSoft is an example of a design package.Differences for displays:presence of cursorcan include context-sensitive helphyperlinksThe display should show only that which is necessary for the particular action being undertaken.

Heading contains titles of software and open files, pull-down menus, and icons that do certain tasks.Body used for data entry and is organized from left to right and top to bottom.Comments and instructions displays a short menu of commands that remind the user of basicsIf users find displays appealing they are likely to be more productive, need less supervision, and make fewer errors.When you are considering the use of these techniques, simplicity is still the watchword.

Different font styles enhance differentiation among categories.Icons are pictorial, onscreen representation symbolizing computer actions that users may select using a mouse, keyboard, lightpen, touch screen or joystick serve function similar to words.

Shapes should be readily recognizable so the user is not required to master a new vocabulary.

Icons for a particular application should be limited to 20 recognizable shapes so that icon vocabulary is not overwhelming and a coding scheme can still be realized.

Use icons consistently throughout this ensures continuity and understanding.GUI is sometimes referred to as point-and-click.A rectangle represents a text box and is used to outline data entry and display fields.Check boxes contain an X or are empty, corresponding to whether or not the user selected the option.A circle called an option button or a radio button, is used to select exclusive choices.A list box displays several options that may be selected with the mouse.Sliders and spin buttons give users more control when choosing values.

Image maps are used when creating Web pages containing maps with instructions to click in a certain area in order to view a detailed map of the region.Text areas can include a number of rows, columns, and scroll bars that allow the user to enter and view text greater than the size of the box area.Each message box should appear in a rectangular window and should spell out the message so the user knows precisely what is happening and what actions are possible.

Calculate Total, Add Order, OK, are examples of command buttons.

Used to retain information about the type of browser being used; the viewers operating system, and so on. Sometimes a hidden field will contain a key field used to locate a record for the customer or the browsing session.Events may be clicking a button, changing a value, the field receives focus, blurring a field, loading the Web page, detecting keystrokes and so on.Dynamic Web pages use JavaScript to modify some part of the Web page, or a style.

Modify themselves quickly since they have fewer interruptions to send and receive data from the server.Color is an appealing and proven way to facilitate users with tasks requiring computer input.

Color allows you to:contrast foreground and backgroundhighlight important fieldsfeature errorshighlight special code inputcall attention to other special attributesCustomers need to feel confident they are buying the correct quantity, that they are getting the right price, and that the total cost of an Internet purchase, including shipping charges, is what they expect.

The most common way to show establish confidence is to use the metaphor of a shopping cart or shopping bag. An important feature of the shopping cart is that the user can edit the quantity of the item ordered or can remove the item entirely.