You are on page 1of 18

Application User Interface

Orientation 2

2011 .Objectives of this Session • To Discuss  Accepting Inputs • Input providing mechanisms / devices • Various UI elements for accepting inputs February 7.

stores and processes the data to create meaningful information which is then conveyed to appropriate users via various means. In this presentation.Accepting inputs IT Industry is an industry that deals with data management. It collects. February 7. we will be disussing about the ways in which an application can collect data from the users. 2011 .

February 7. 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]. e. etc.Input providing mechanisms / devices A variety of options exist for providing input to any IT application. etc.g. 2011 .) – With newer multimedia keyboards. playing music. certain keys can be mapped to trigger applications and their functionalities. Ctrl + [key]. controlling volume.

etc. February 7. • With newer pointing devices. 2011 .Input providing mechanisms / devices • Mouse / Touch pad (for laptop) • Used with GUI to invoke functionality through mouse single/double clicks. • Suitable when precision of pointing device is not needed. 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. scroll through documents. • More popular and commonly available nowadays as it more user friendly and avoids use of pointing device.

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. 2011 . 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.

list box. option box. calendar control February 7. Hence fitness for use primarily decides which control to be used. combo box.Various UI Elements for Accepting Inputs • An application can receive inputs from the user through variety of input controls or elements. • Common input controls include: Text box. 2011 . • Each type of control that can be used on a screen / page provides some distinct advantage or suitability over the other. • Appropriate selection of input control makes the system more usable and efficient. dropdown box. check box.

Various UI Elements for Accepting Inputs • Textbox – Generally used for free text entry by user.g. • Option box – Generally used when a user is supposed to make a single selection from available options. – Allows to limit maximum the number of characters that can be input. e. – Once an option is selected. i. – Takes up screen space depending upon the number of options available to choose from. February 7. Also referred as radio button. there is no way to unselect it. Hence preferred when options are less. 2011 . for password accepting textbox. when the input values are not from a set of known values. – Allows masking of data.e. However selected option can be changed. – Allows user to input data in single or multiline format.

if required. Hence preferred when options are less.t.r. all options can be unchecked • Calendar control / Date picker control – Used when any date input is required from the user. – Unlike option boxes. – Takes up less space. February 7. invalid not the business validations) dates. – Takes up screen space depending upon the number of options available to choose from. since the calendar pops open only when clicked at.Various UI Elements for Accepting Inputs • Check box – Generally used when a user is allowed to make multiple selections from available options. – Avoids the need of date validation (w. 2011 .

– Since user just selects from values listed. February 7. Hence it is a combination of a text box and a drop down box. but also allows to key in a new value that is not present in the drop down list. options could be or could – It consumes less screen space. These options either a pre-defined hardcoded list be dynamically populated from DB. 2011 .Various UI Elements for Accepting Inputs • Drop down box – Generally used when one of the known has to be selected. • Combo box – Looks and works similar to drop down box. hence preferred when selection options are more. there is no scope of user error (typo errors).

there is no scope of user error (typo errors). – Since user just selects from values listed.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. 2011 . Rest options are visible through scrolling. February 7. – This control can be programmed to allow selection of single or multiple values.

2011 .Screen showing various UI elements February 7.

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

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

the following code creates a text box and a Submit button: <FORM> <INPUT type="text"> <INPUT type="submit"> </FORM> February 7. For example.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. 2011 .

February 7. <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. 2011 . like starting a JavaScript when a user clicks on an element.Control Events Events can trigger actions in a browser.

Suitability of a particular way depends on the functionality the system provides and the type of users. • On a given UI. the tabbing sequence should be consistently maintained. there exists numerous input controls that can facilitate collecting data from user. etc. available screen space. • On a screen / page having multiple controls. February 7.Conclusion We discussed the following: • Various ways exist to provide input to a system. volume of data. Selection of particular control depends on type/nature of data. especially for the keyboard users. 2011 .

! .Happy Learning...