Application User Interface

Orientation 2

Objectives of this Session

To Discuss

Accepting Inputs Input providing mechanisms / devices Various UI elements for accepting inputs

February 7, 2011

Accepting inputs
IT Industry is an industry that deals with data management. It collects, stores and processes the data to create meaningful information which is then conveyed to appropriate users via various means.

In this presentation, we will be disussing about the ways in which an application can collect data from the users.

February 7, 2011

Input providing mechanisms / devices

A variety of options exist for providing input to any IT application.

The most commonly used mechanisms / devices include: Keyboard It is the most common type on input device Generally used to input numeric or textual data Used to invoke funtionality using function keys (F1 to F12) Used to invoke functionality using keyboard short cuts (Alt + [key], Ctrl + [key], etc.) With newer multimedia keyboards, certain keys can be mapped to trigger applications and their functionalities, e.g. playing music, controlling volume, etc.

February 7, 2011

Input providing mechanisms / devices

Mouse / Touch pad (for laptop) Used with GUI to invoke functionality through mouse single/double clicks, scroll through documents, etc. With newer pointing devices, it is also possible to program the additional buttons for commonly performed tasks Used to perform drag and drop operations Touchscreen Used with GUI to provide similar inputs as through a pointing device like a mouse or touch pad. More popular and commonly available nowadays as it more user friendly and avoids use of pointing device. Suitable when precision of pointing device is not needed.

February 7, 2011

Input providing mechanisms / devices

Batch / File input Generally used when large amount of data is to be fed into the system under consideration. Data is generally in a fixed format that can be decoded by file accepting application

Other options for providing inputs include: Joysticks used for playing games Camera for Gesture based commands, authentication using face detection or for video recording

Microphone for Voice commands or sound recording

Fingerprint scanner that takes care of user authentication

February 7, 2011

Various UI Elements for Accepting Inputs

An application can receive inputs from the user through variety of input controls or elements. Each type of control that can be used on a screen / page provides some distinct advantage or suitability over the other. Hence fitness for use primarily decides which control to be used.

Appropriate selection of input control makes the system more usable and efficient.
Common input controls include:
Text box, option box, check box, dropdown box, combo box, list box, calendar control

February 7, 2011

Various UI Elements for Accepting Inputs

Textbox
Generally used for free text entry by user, i.e. when the input values are not from a set of known values. Allows user to input data in single or multiline format. Allows to limit maximum the number of characters that can be input. Allows masking of data, e.g. for password accepting textbox.

Option box
Generally used when a user is supposed to make a single selection from available options. Also referred as radio button. Takes up screen space depending upon the number of options available to choose from. Hence preferred when options are less. Once an option is selected, there is no way to unselect it. However selected option can be changed.

February 7, 2011

Various UI Elements for Accepting Inputs

Check box
Generally used when a user is allowed to make multiple selections from available options. Takes up screen space depending upon the number of options available to choose from. Hence preferred when options are less.

Unlike option boxes, if required, all options can be unchecked

Calendar control / Date picker control

Used when any date input is required from the user. Takes up less space, since the calendar pops open only when clicked at. Avoids the need of date validation (w.r.t. invalid not the business validations) dates,

February 7, 2011

Various UI Elements for Accepting Inputs

Drop down box
Generally used when one of the known has to be selected. These options either a pre-defined hardcoded list be dynamically populated from DB. options could be or could

It consumes less screen space, hence preferred when selection options are more.
Since user just selects from values listed, there is no scope of user error (typo errors).

Combo box Looks and works similar to drop down box, but also allows to key in a new value that is not present in the drop down list. Hence it is a combination of a text box and a drop down box.

February 7, 2011

Various UI Elements for Accepting Inputs

List Box
Generally used when user is required to select single/multiple values from a known set of values. It consumes more screen space compared to a dropdown since it always displays few options at a time. Rest options are visible through scrolling. Since user just selects from values listed, there is no scope of user error (typo errors). This control can be programmed to allow selection of single or multiple values.

February 7, 2011

Screen showing various UI elements

February 7, 2011

Screen showing tabbing sequence

The numbers from 0.0 to 0.10 and from 1.0 to 1.6 indicate the order in which the cursor should move when the TAB key is pressed on the keyboard.
The normal rule is: Top to Bottom, then Left to Right (frame wise)
Labels and Read only fields though numbered, will be skipped during tabbing.
February 7, 2011

Forms
Form is an area where we have form elements A form can contain input elements like text fields, checkboxes, radiobuttons, submit buttons and more

February 7, 2011

Form Tag
The majority of form controls are variations on a single element called INPUT.
Each variation of the INPUT element is specified by its type attribute. For example, the following code creates a text box and a Submit button: <FORM> <INPUT type="text"> <INPUT type="submit"> </FORM>

February 7, 2011

Control Events
Events can trigger actions in a browser, like starting a JavaScript when a user clicks on an element. <input id="Submit1" type="submit" value="submit" onclick="return Submit1_onclick()" />

This submit button will call a javascript function Submit1_onclick() when the user click on submit button.

February 7, 2011

Conclusion
We discussed the following: Various ways exist to provide input to a system. Suitability of a particular way depends on the functionality the system provides and the type of users.

On a given UI, there exists numerous input controls that can facilitate collecting data from user. Selection of particular control depends on type/nature of data, volume of data, available screen space, etc. On a screen / page having multiple controls, the tabbing sequence should be consistently maintained, especially for the keyboard users.

February 7, 2011

Happy Learning...!