Bài giảng Systems Analysis and Design - Chapter 12: Designing Effective Input

Designing Effective InputSystems Analysis and Design, 7eKendall & Kendall12© 2008 Pearson Prentice HallLearning 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 Internet2Input Design ObjectivesThe quality of system input determines the quality of system outputInput design objectives:EffectivenessAccuracyEase of useConsistencySimplicityAttractiveness3Major TopicsInput designForm designDisplay designGUI screen designGUI controlsWeb design guidelines4Good Form DesignMake forms easy to fill inEnsure that forms meet the purpose for which they are designedDesign forms to assure accurate completionKeep forms attractive5Make Forms Easy to Fill inForm flowSeven sections of a formCaptioning6Form FlowCan minimize the time and effort expended by employees in form completionShould flow from left to right and top to bottom7Seven Sections of a FormHeadingIdentification and accessInstructionsBodySignature and verificationTotalsComments8Figure 12.1 Seven sections found in well-designed forms9Caption 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 formCombination10Figure 12.2 Major captioning alternatives11Meeting the Intended PurposeSystems analysts may use different types of specialty forms for different purposesSpecialty formsMultiple-part Continuous-feedPerforated12Ensuring 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 form13Keeping 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 users14Computer-Assisted Form DesignNumerous form design packages are available for PCsElectronic forms can have intelligence that supports users in their tasks15Figure 12.4 Software for electronic form design has many dynamic features16Figure 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 PC17Controlling 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 cost18Good Display and Web Forms DesignKeep the display simpleKeep the display presentation consistentFacilitate user movement among display screens and pagesCreate an attractive and pleasing display19Keeping the Display SimpleHeadingBodyComments and instructions20Keeping 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 another21Facilitating 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 22Designing 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 arrows23Figure 12.8 You can design an attractive data entry screen with a three-dimensional effect using JetFlow’s FormFlow24Inverse Video, Blinking Cursors, and Font TypesInverse videoBlinking cursor or fieldsFont types in various styles and sizes25Using 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 throughout26Graphical User Interface (GUI) ControlsText boxesCheck boxesOption or radio buttonsList and drop-down list boxesSliders and spin buttonsImage mapsText areaMessage boxes27Figure 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 Access28Text 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-aligned29Check 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 box30Option 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 implemented31List 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 default32Sliders, 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 image33Figure 21.11 Sliders and spin buttons are two additional GUI components the analyst can use to design input screens34Text 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 area35Message 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 it36Form 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 form37Hidden 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 server38Event-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 lists39Dynamic 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 Act40AjaxUses 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 Act41Tab 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 designOKCancelHelp42ColorThe five most legible foreground/background color combinations:Black on yellowGreen on whiteBlue on whiteWhite on blueYellow on black43Intranet 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 entered44Intranet 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 out45Ecommerce ApplicationsEcommerce applications involve more than just good designs of Web sitesCustomers need to feel confident in the siteShopping cart46SummaryGuidelines 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 attractive47Summary (Continued)Guidelines for well-designed displays:Displays must be kept simpleDisplays must be consistent in presentationDesign must facilitate movement between pagesDisplays must be attractive48Summary (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 question49Summary (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 in50