10.2 GUI Controls of Input

Today, most application being developed include graphical user interface (GUI). Graphical User Interface design provides user friendly interface and also provide complex design issues. When designing input, we must consider on selecting a proper screen-based control for users to enter data on GUI screen. Here, we examine few types of common control used in GUI-based input forms. These common controls such as text box, radio button, check box, drop down list and buttons. Each of this controls have its own purpose, advantages and disadvantages. Figure 10-2 shows an example of screen-based control for input data.

Figure 10-2: A Sample Input Form

10.2 GUI Controls of Input

10.2.1 Text box

Text box is known as the most widely used common. Most data input screen have text box. A text box consists of a rectangular shape box, should be followed with its caption. This text box requires user to type the data inside the text box. A text box is used when there is no specific value to be selected by users, so we ask users to key in their own preferable data. There are two types of text box; single-line and multiple-lines. Single lines text box is suitable when capturing a student's name, because normally name don't require a long number of input. While multiple-lines text box is suitable when capturing a student's address, since address requires a long number of input. Text box should be accompanied by its caption, describe what types of data should be entered. Caption should be located to the left near the text box to avoid the confusing among users. An example of input types that is suitable to use text box are NAME, ADDRESS, and TELEPHONE NUMBER.

10.2.2 Radio Button

In figure 10-2 shows an example of radio button. Radio buttons provide the users with an easy way to select the preferable value from the value set. Radio buttons consist of a small circle (where the users need to select) and an associated textual value belongs to that circle. Small circle is located at the left of the textual value choice. Radio buttons is used when users need to select only one value from the set of available values. It's used when the choice available is more than one. Radio buttons are used when it's compulsory for users to select the value, and the value should be only one from the choices.

10.2 GUI Controls of Input

When using radio buttons for data input, same as text box, it should be accompanied by its main data caption and followed by available values to be chosen. In some cases, it important to list out the values based on alphabetical order or by its range. For example, ANNUAL SALRY INCOME should be list out from low range to high range. An example of input types that is suitable to use text box are GENDER, HOUSE TYPE and ANNUAL SALARY INCOME.

10.2.3 Check Box

Figure 10-2 shows an example of check box. Check box consists of a small square box followed by a description of the input field where the users are provided with values. Check box consists of a small square (where the users need to select) and an associated textual value belongs to that square. Small square is located at the left of the textual value choice. If radio buttons are only require users to select only one choice, but with check box, users are allow to select more than one value. Check box is used when users are able to select one or more than one values or may be none from the set of the values.

When designing check box, try to arrange the check box accordingly, aligned vertically and left-justified. Is should be accompanied by its caption describing the input. In some cases when the check box contains money ranges or any other measurements, the sequencing should be in ascending order. An example of that is suitable to use check box are SKILLS QUALIFIED, and TYPE OF VEHICLE OWNED.

10.2 GUI Controls of Input

10.2.4 Drop Down List

Figure 10-2 shows an example of drop down list. A drop down list is a control that requires that a user select a data item's value from a list of possible choices. Drop down list is represented using a rectangular and contains one or more rows from a list of possible choices. Drop down list can have a large number of possible values may include scroll bars for navigating to the rest of the choices. Normally, drop down list is used in representing a large number of values. A set of values are represented and needed to scroll down so all the rest will be appears when users scroll down the list. Users need to select only one value from the list as the input.

What are the differences between using radio button and drop down list? Both controls require users to select only one value from the available list. But, by using drop down list, the amount of space provided can be minimized since the value in the list appears once we scroll down the list. Same with other controls, drop down list also should be accompanied by its description about the input. It's recommend that the drop down list have a highlighted default value. We should carefully designed the drop down list's value to make it easy for users to scan and scroll down, and users are not wrongly select.

10.2 GUI Controls of Input

10.2.5 Buttons

Figure 10-2 shows that there are two buttons; SUBMIT and BACK button. Button is not an input control. But, input form is not complete without button. The use of button indicates the process that need to be done with the data input. Buttons allow users to commit all of the data to be processed, or cancel a transaction. Once users click the button, all values selected will be sent to the application.