Lecture Note 12 Designing Effective Input

1. Part IV: The Essentials of Design Lecture Note 12Designing Effective Input Systems Analysis and Design Kendall & Kendall Sixth Edition

2. Major Topics • Input Design • Form Design • Display Design • GUI Screen Design • GUI Controls • Web Design Guidelines CS206 System Analysis & Design Note 12 By ChangYu

3. Input Design Objectives • The quality of system input determines the quality of system output. It is vital (重要的) that input forms, displays, and interactive Web documents be designed with this critical relationship in mind. • Well-designed input objectives: • Effectiveness: Input design all serve specific purposes in the information system. • Accuracy: The design ensures proper completion. • Ease of Use: The forms and displays are straightforward (坦率的) and require no extra time to decipher (難懂的東西) . • Consistency: All input forms group data similarly from on application to the next. • Simplicity: Refers to keeping those same designs uncluttered (整齊) in a manner (方式) that focuses the user’s attention. • Attractiveness (引入注意): Implies that users will enjoy using input forms because of their appealing (要求) design.

4. Good Form Design • Forms are important instruments (工具) for steering (方向) the course of work.They are preprinted papers that require people to fill in responses in a standardized way. • Forms often serve as source documents for data entry personnel or for input to ecommerce applications. • Guidelines for good form design: • Make forms easy to fill out. • Ensure that forms meet the purpose for which they are designed. • Design forms to assure accurate completion. • Keep forms attractive. CS206 System Analysis & Design Note 12 By ChangYu

5. Making Forms Easy to Fill In • To make forms easy to fill out, the following techniques are used: • First, design forms with proper flow, from left to right and top to bottom that can minimize the time and effort. • Second, group information logically using the seven sections of a form. • Third, provide people with clear captions. • Captions tell the person completing the form what to put on a blank line, space, or box. CS206 System Analysis & Design Note 12 By ChangYu

6. Seven Sections of a Form The seven sections of a form are: • Heading:Includes the name and address of the business origination the form. • Identification and Access: Includes codes that may be used to file the report and gain access to it at a later date. This information is very important when an organization is required to keep the document for a specified number of year. • Instructions (指導) :This section tells us how the form should be filled out and where it should be routed when complete. • Body: composed approximately half of the form. This part requires the most detail and development from the person completing it . It always contain explicit (明確), variable data. • Signature and verification (核實) • Totals • Comments Requiring ending totals and a summary of comments is a logical way to provide closure for the person filling out the form. CS206 System Analysis & Design Note 12 By ChangYu

7. CS206 System Analysis & Design Note 12 By ChangYu

8. Caption Types • Clear captioning is another technique that can make easy work of filling out a form. Captions tell the person completing the form what to put in a blank line, space or box. • Captions may be one of the following: • Line caption, putting the caption on the same line or below the line. • Boxed caption, providing a box for data instead of a line. Captions can be placed inside, above or below the box. • Vertical check off, lining up choices or alternatives vertically. • Horizontal check off, lining up choices or alternatives horizontally. • A combination of captions can also be used effectively. Different captions serve different purposes, it is generally necessary to employ several caption styles in each form. CS206 System Analysis & Design Note 12 By ChangYu

9. The advantage of putting the caption below the line is that there is more room on the line itself for data. The disadvantage is that it is sometimes unclear which line is associated with the caption: the line above or below the caption. • Table captions can be used to specify categories such as quantity. It work well in the body of a form on which details are required. • Line captions can be used to indicate where the subtotal, sale tax and total should be. CS206 System Analysis & Design Note 12 By ChangYu

10. Shows a video club membership application, which is an example of a source document with various zones. CS206 System Analysis & Design Note 12 By ChangYu

11. Meeting the Intended Purpose • Forms are created to serve one or more purposes in the recording, processing, storing, and retrieving of information for businesses. • Sometimes it is desirable to provide different information to different departments or users but still share some basic information. This situation is where specialty forms are useful. • Systems analysts may use different types of specialty forms for different purposes. • Specialty forms can also mean forms prepared by a stationer (文具) . CS206 System Analysis & Design Note 12 By ChangYu

12. 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 whenever they use it. • To encourage people to complete forms, systems analysts should keep forms attractive. • The form design implements the correct flow: top to bottom and left to right. CS206 System Analysis & Design Note 12 By ChangYu

13. This form design provides an internal double check, with column totals and row totals expected to add up to the same number. If the row and column totals don’t add up to the same number, the employee filling out the form knows there is a problem and can correct it on the spot. An error is prevented and the employee can be reimbursed the amount due; both outcomes are attributable to a suitable form design. CS206 System Analysis & Design Note 12 By ChangYu

14. Attractive Forms • To be more attractive, forms should look uncluttered (不雜亂的) , and elicit (引出) information in the expected order. • Aesthetic (美觀) forms or usage of different fonts and line weights within the same form can help make it more attractive. CS206 System Analysis & Design Note 12 By ChangYu

15. Computer-Assisted Form Design • Numerous microcomputer form design software is available.

16. Paper forms can be scanned in and then published to the Web. The analyst can use a set of tools to set up fields, check boxes lines, boxes and many other features. This example display created by OmniForm by ScanSoft. This software is enormously (極大地) useful to an analyst seeking to automate quickly business processes for which paper forms are already in existence. CS206 System Analysis & Design Note 12 By ChangYu

17. This example shows the scanning process. The bottom of the split screen shows the form as it was scanned in and the top portion of the screen shows an enlarged view of some of the fields automatically identified by the software. CS206 System Analysis & Design Note 12 By ChangYu

18. Controlling Business Forms • Controlling business forms is an important task. Businesses often have a forms specialist (專家) who controls forms. System analyst sets up and implements forms control. • Controlling forms include: • Making sure that each form in use fulfills its specific purpose. • Making sure that the specified purpose is integral to organizational functioning. • Preventing (預防) duplication of information collected and the forms that collect it. • Designing effective forms. • Deciding on how to reproduce forms in the most economical way. • Establishing procedures that make forms available when needed, at the lowest possible cost. CS206 System Analysis & Design Note 12 By ChangYu

19. Good Display and Web Forms Design Guidelines for good display design: • First, keep the display simple. • Second, keep the display presentation consistent. • Third, facilitate user movement among display screens. • Finally, create an attractive display. CS206 System Analysis & Design Note 12 By ChangYu

20. Keep the Display Simple • Displaying a few necessary basic commands using windows or hyperlinks is another way to keep screens simple. • For the occasional (偶尔的) user, only 50 percent of the screen should contain useful information. • Simplistic design includes maximizing or minimizing the window size as needed. • Use context-sensitive help and other pop-up menus. CS206 System Analysis & Design Note 12 By ChangYu

21. Display output should be divided into three sections: • Heading: which contains titles of software and open files, pull down menus and icons that do certain tasks. • Body: which is used for data entry and is organized from left to right and top to bottom. Captions and instructions should be supplied in this section to help the user enter the pertinent (恰當的) data in the right place. • Comments and instructions (指導) : This section may display a short menu of commands that remind the user of basics such as how to change pages or functions, save the file or terminate entry. CS206 System Analysis & Design Note 12 By ChangYu

22. Keeping the Display Consistent • If user are working from paper forms, displays should follow what is shown on paper. • Displays can be kept consistent by location information in the same area each time a new display is accessed. • Also, information that logically belongs together should be consistently grouped together. CS206 System Analysis & Design Note 12 By ChangYu

23. 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. Web-base forms facilitate movement with the use of hyperlinks to other relevant Web pages. • There are at least three ways this illusion of physical movement among screens is developed • Scrolling--using arrows or PgDn keys. • Using context-sensitive pop-up windows. • Using onscreen dialogue . CS206 System Analysis & Design Note 12 By ChangYu

24. An example of a context-sensitive pop-up window. CS206 System Analysis & Design Note 12 By ChangYu

25. To make the screen attractive use: If the display is necessarily complex, different thickness of separation lines between subcategories can be varied to add further distinctions. Variety helps the user to see quickly both the purpose of the screen and what data items are required. With the advent of GUIs, it is possible to make input displays very attractive. By using colour or shaded boxes and creating three-dimensional boxes and arrows, you can make forms user friendly and fun to use. Designing an Attractive Screen CS206 System Analysis & Design Note 12 By ChangYu

26. An example of an order entry display that is effective. These features are also available for Web-based fill-in form. CS206 System Analysis & Design Note 12 By ChangYu

27. Other techniques can also effectively enhance the attractiveness of displays, but only if they are used sparingly (節省的). They include inverse video, a blinking cursors or fields, and font types in various styles and sizes. • Different combinations of colors. • Different type fonts. CS206 System Analysis & Design Note 12 By ChangYu

28. Using Icons in Screen Design • Icons are used in graphical screens to run programs and execute commands. • Graphical User Interface (GUI) are used in conjunction (聯合) with a mouse, keyboard, lightpen, or joystick (操縱杆) for making selections and entering data. CS206 System Analysis & Design Note 12 By ChangYu

29. Graphical User Interface (GUI) Design GUI controls or fields: • Text boxes. • Check boxes. • Option or radio buttons. • List and drop-down list boxes. • Sliders and spin buttons. • Image maps. • Text area. • Message boxes. CS206 System Analysis & Design Note 12 By ChangYu

30. Text boxes. • Check boxes. • Option buttons. • List and drop-down list boxes. • Image maps. • Text area A Microsoft Access input display showing a variety of GUI controls. CS206 System Analysis & Design Note 12 By ChangYu

31. CS206 System Analysis & Design Note 12 By ChangYu

32. Text Boxes • Text boxes should be large enough to accommodate all the field characters. • Captions should be to the left of the text box. • Character data should be left aligned within the box. • Numeric data right aligned. Check Boxes • Check boxes are used for nonexclusive choices. • Check box text or label is placed to the right of the check box. • If there are more than 10 check boxes, group in a bordered box. CS206 System Analysis & Design Note 12 By ChangYu

33. Option Buttons and Drop-down List Boxes • Option or radio buttons are used for exclusive choices. • Often they are placed in a rectangle called an option group. • List and drop-down list boxes are used to select one choice out of many. Sliders, Spin Buttons, and Image Maps • Sliders and spin buttons are used to change data that have a continuous range of values. • Image maps are used to select values within an image. CS206 System Analysis & Design Note 12 By ChangYu

34. Slider and Spin Button Example CS206 System Analysis & Design Note 12 By ChangYu

35. Text Area • A text area is used for entering a larger amount of text. • These areas may have text that wraps (包, 裹) when the text reaches the end of the box. • There are two ways to handle the text: • Hard return is used to force new lines. • Use word wrap within the text area. Message Boxes and Command Buttons • Message boxes are used to display warning and other messages in a rectangular window. • Command buttons perform an action. CS206 System Analysis & Design Note 12 By ChangYu

36. Tab Control Dialogue Boxes • Tab control dialog boxes help organize GUI features (controls) for users. • Each tab dialog box should have three basic buttons: OK. Cancel. Help. Web Page Dialogue Boxes • A new type of dialogue box has the look and feel of a Web page. • Buttons are called places and are hyperlinked to items a user would wish to access. CS206 System Analysis & Design Note 12 By ChangYu

37. Color • The five most legible (易讀的) foreground/background color combinations for display monitors are: • Black on yellow. • Green on white. • Blue on white. • White on blue. • Yellow on black. Use colour to highlight important fields on displays. fields Skins Skins are graphical overlays that allow customers to change the appearance of a Web site depending on their preferences for a particular kind of image. CS206 System Analysis & Design Note 12 By ChangYu

38. A data entry screen for the student registration system. This screen uses several design features that are described in the text. When a user clicks the Find Student command button, a dialog box is displayed with instructions. CS206 System Analysis & Design Note 12 By ChangYu

39. Layout and design also is important on Web-based forms. Consider the online subscription for InfoWorld uses various features to make it easier for the subscriber to fill out. Option buttons Drop-down list boxes Text boxes CS206 System Analysis & Design Note 12 By ChangYu

40. Dr. Jakob Nielsen believes that users scan Web material rather than reading it. He suggests that Web designers must use scannable text and employ usability metrics to measure the results. CS206 System Analysis & Design Note 12 By ChangYu

41. Internet and Intranet Design Guidelines Guidelines for creating intranet and Internet input pages: • Provide clear instructions. • Use a logical entry sequence for fill-in forms. • Use a variety of text boxes, push buttons, radio buttons, drop-down lists, and other GUI features. • Provide a scrolling text box if you are uncertain how much text will be entered. • Include two basic buttons: Submit and Clear. • If the form is lengthy, divide it into several simpler forms on separate pages. • Create a feedback screen that lists error messages if a form has not correctly been filled out. CS206 System Analysis & Design Note 12 By ChangYu

42. This figure shoes a fill-in form order page that shows many elements of good design for the Web. CS206 System Analysis & Design Note 12 By ChangYu

43. Ecommerce Applications • Ecommerce applications add more demands to the analyst who must design Web sites to meet several business objectives: • Setting forth the corporate mission • Values regarding confidentiality • Privacy • Product returns • Efficient processing of transaction • Building good customer relationships. • Ecommerce applications involve more than just good Web site design. • Customers need to be confident (有信心) of the site, including privacy and security. CS206 System Analysis & Design Note 12 By ChangYu

44. This figure shows the contents of a shopping cart for a customer making a purchase. An important feature of the shopping cart is that the customer can edit the quantity of the item ordered or can remove the item entirely. CS206 System Analysis & Design Note 12 By ChangYu