application ui acceptinginputs

7/30/2019 Application UI AcceptingInputs

1/18

Application User Interface

Orientation 2


2/18

February 7, 2011

Objectives of this Session

To Discuss

Accepting Inputs

Input providing mechanisms / devices

Various UI elements for accepting inputs


3/18


4/18

February 7, 2011


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.


5/18

February 7, 2011


Mouse / Touch pad (for laptop)

Used with GUI to invoke functionality through mousesingle/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 moreuser friendly and avoids use of pointing device.

Suitable when precision of pointing device is not needed.


6/18

February 7, 2011


Batch / File input

Generally used when large amount of data is to be fed into thesystem 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


7/18

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


8/18

February 7, 2011


Textbox

Generally used for free text entry by user, i.e. when the input valuesare 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.


9/18

February 7, 2011


Check box

Generally used when a user is allowed to makemultiple 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 dates,

not the business validations)


10/18

February 7, 2011


Drop down box

Generally used when one of the known optionshas to be selected. These options could be

either a pre-defined hardcoded list or could

be dynamically populated from DB.

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.


11/18

February 7, 2011


List Box

Generally used when user is required to select single/multiple valuesfrom 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 usererror (typo errors).

This control can be programmed to allow selection of single or

multiple values.


12/18

February 7, 2011

Screen showing various UI elements


13/18

February 7, 2011

Screen showing tabbing sequence

The numbers from

0.0 to 0.10 andfrom 1.0 to 1.6

indicate the order

in which the cursor

should move when

the TAB key is

pressed on thekeyboard.

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.


14/18

February 7, 2011

Forms

Form is an area where we have form elements

A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more


15/18

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:


16/18

February 7, 2011

Control Events

Events can trigger actions in a browser, like starting a JavaScript when auser clicks on an element.

This submit button will call a javascript function Submit1_onclick() when

the user click on submit button.


17/18

February 7, 2011

Conclusion

We discussed the following:

Various ways exist to provide input to a system. Suitability of aparticular 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 screenspace, etc.

On a screen / page having multiple controls, the tabbing sequenceshould be consistently maintained, especially for the keyboard users.


18/18

Happy Learning...!

application ui acceptinginputs

Documents