CS1015 User Interface Design

Status Bar
The bar located at the bottom of application window is known as Status Bar. It provides some
basic information about the status of current document or objects in window. For example, the
Control Panel’s status bar tells you how many objects appear in the window.
Scroll Bars
When information displayed .in application window is larger and cannot fit in it then scroll bars
appear automatically at the right or bottom borders. In this case, a part of the information is
displayed and remaining information remains hidden. The hidden information can be displayed
by moving the scroll bars of the window. Each scroll bar has two arrows also at its ends. By clicking
these arrows you can move around the window but very slowly (line by line or column by column).
The scroll Bar also has a scroll box. By dragging this box, you can quickly move around the window.
Menu Bar
The bar that contains drop-down menus and appears immediately below the title bar is known as
Menu Bar. The commands that are used to perform different tasks are grouped together on the
Menu Bar. The Menu bar is accessed by clicking mouse or by using keyboard shortcuts. When any
menu option from Menu Bar is clicked, a drop down menu appears with a list of commands. You
can select a command from the list by clicking it. The drop-down menu may contain some
commands as active and some as inactive. The inactive command is not available for selection
and appears as dim, usually in light gray color. You can select only from the active commands.
To access the Menu Bar using mouse, follow these steps:

Bring the mouse pointer on the desired menu option and click it. A drop down
menu appears with a list of commands.

Point to the command you want to use and click it to execute. The command is
executed and drop down menu is disappeared.
To disappear the menu without selecting any command, point the mouse pointer to the empty
area of window (or desktop) and click it or use Esc key.
Dialog Boxes
A dialog box is a command element in Windows and its application programs. It is used to collect
information from the user before processing a command. In a dialog box, the user has to enter
information such as file names or has to select options etc. For example, when a Save command
is selected to save the work (or document) the Save As dialog, box appears to get the name of file.
Similarly, when Open command is selected to open an existing file the Open dialog box appears
to get the name fiIe to be opened. The dialog boxes are also used to display messages or to provide
information to the user. For example, to alert the user about the problem occurred in the
computer or about any other error.
The dialog box also contains command buttons to send the input to the application, program (or,
computer) to take action or to get help about the dialog box. For example the Ok command button
is clicked to proceed after making selection or entering information. Similarly, clicking Cancel
button ends the current operation without giving any information to computer.
Device Based Controls:

© Einstein College of Engineering

CS1015 User Interface Design

They are the mechanism through which people communicate their

desires to the system, also known as input devices.
Characteristics of device Based Controls:
 To point an object on the screen. 

 To select the object or identify it as the focus of attention 

 To drag an object across the screen 

 To draw something free form on the screen 

 To track or follow a moving object 

 To orient or position an object 

 To enter or manipulate data or information 

The example devices are,

- Trackball
- Joystick
- Graphic Tablet
- Touch screen
- Light pen
- Voice
- Mouse
- Keyboard
Track ball:
Description:

- A spherical object that rotates freely in all directions in its socket

- Direction and speed is tracked and translated into cursor movement

Advantages:

- direct relationship between hand and pointer movement in terms of

direction and speed

- Does not obscure vision of screen

- Does not require additional desk space

Disadvantages:

- Movement is indirect, in a plane different from the screen

© Einstein College of Engineering

CS1015 User Interface Design

- No direct relationship exists between hand and pointer movement in

terms of distance

- Requires a degree of eye-hand coordination

- Requires hand to be moved from keyboards

- Requires different hand movements

- Requires hand to be moved from keyboards keys

- Requires additional desk space

- May be difficult to control

- May be fatiguing to use over extended time

Joystick:

Description:

A joystick is an input device consisting of a stick that pivots on a base and reports its angle
or direction to the device it is controlling. Joysticks are often used to control video games, and
usually have one or more push-buttons whose state can also be read by the computer.

Advantages:

- Direct relationship between hand and pointer movement in terms of

direction.

- Does not obscure vision of screen

- Does not require additional desk space

Disadvantages:

- Movement is indirect, in a plane different from the screen

- No direct relationship exists between hand and pointer movement in

terms of distance

- Requires a degree of eye-hand coordination

- Requires hand to be moved from keyboards

- Requires different hand movements

- Requires hand to be moved from keyboards keys

- Requires additional desk space

© Einstein College of Engineering
CS1015 User Interface Design

- May be fatiguing to use over extended time

- May be slow and inaccurate

Graphic tablet:

A graphics tablet (or digitizer, digitizing tablet, graphics pad, drawing tablet) is a computer
input device that allows one to hand-draw images and graphics, similar to the way one draws
images with a pencil and paper. These tablets may also be used to capture data or handwritten
signatures. It can also be used to trace an image from a piece of paper which is taped or otherwise
secured to the surface. Capturing data in this way, either by tracing or entering the corners of
linear poly-lines or shapes is called digitizing.

Advantages:

- direct relationship between touch and pointer movement in terms of

direction and speed

- Does not obscure vision of screen

- More comfortable horizontal operating plane

Disadvantages:

- Movement is indirect, in a plane different from the screen

- Requires hand to be moved from keyboards

- Requires hand to be moved from keyboards keys

- Requires different hand movements

- Requires additional desk space

- Finger may be too large for accuracy with small objects

Touch screen:

A touch screen is an electronic visual display that can detect the presence and location
of a touch within the display area. The term generally refers to touching the display of the
device with a finger or hand. Touch screens can also sense other passive objects, such as
a stylus.

The touch screen has two main attributes. First, it enables one to interact directly with
what is displayed, rather than indirectly with a cursor controlled by a mouse or touchpad.
Secondly, it lets one do so without requiring any intermediate device that would need to be held
in the hand.
© Einstein College of Engineering
CS1015 User Interface Design

Advantages:

- direct relationship between hand and pointer movement in terms of

direction, distance and speed

- requires minimal additional desk space

- Stands up in high-use environments

- More accurate than finger touching

- Movement is direct, in the same plane as screen

Disadvantages:

- very fatiguing to use over extended time

- requires picking it up to use

- requires moving the hand far from the keyboard to use

- hand may obscure part of screen

Voice:

Automatic speech recognition by the computer

Advantages:

- Simple and direct

- Useful for people who cannot use a keyboard

- Useful when the user’s hands are occupied

Disadvantages;

- High error rates due to difficulties in:

 Recognizing boundaries between spoken words 


 Blurred word boundaries due to normal speech patterns 

- slower throughput than with typing

- difficult to use in noisy environments

- impractical to use in quiet environments

© Einstein College of Engineering

CS1015 User Interface Design

Mouse:

mouse is a pointing device that functions by detecting two-dimensional motion relative

to its supporting surface. Physically, a mouse consists of an object held under one of the user's
hands, with one or more buttons.

Advantages:

- direct relationship between hand and pointer movement in terms of

direction, distance and speed

- Does not obscure vision of screen

- More comfortable horizontal operating plane

- Selection mechanisms are included on mouse

Disadvantages:

- Movement is indirect, in a plane different from the screen

- Requires hand to be moved from keyboards

- Requires additional desk space

- May require long movement distances

- Requires a degree of eye-hand cocordination

Keyboard :

Standard typewriter keyboard and cursor movement keys

Advantages:

- familiar

- accurate

- does not take up additional desk space

- very useful for:

 entering text and alphanumeric data 


 inserting in text and alphanumeric data 

 keyed shortcuts - accelerators 

 keyboard mnemonics – equivalents 

© Einstein College of Engineering
CS1015 User Interface Design

- advantageous for:

 performing actions when less than three mouse buttons exist 


 use with very large screens 

 touch typists 

Disadvantages:

- slow for non-touch-typist

- slower than other devices in pointing

- requires discrete actions to operate

- no direct relationship between finger or hand movement on the keys and

cursor movement on screen in terms of speed and distance

Screen based controls:

Are the elements of a screen that constitute its body.

The example includes,

- buttons

- text entry/read-only controls

- selection controls

- combination entry/selection controls

- specialized operable controls

- custom controls

- presentation controls

- web controls

Buttons:

The Command button is a common control frequently used in VB programming . This is one of
the first controls that beginners learn to place onto a form and then to code an "event procedure"
for the co mmand

© Einstein College of Engineering

CS1015 User Interface Design

control object. An event procedure is something that happens in response to a user action such as a click
or a "mouse over". (If an object on a form has no corresponding code written by the programmer, nothing
will happen if the user clicks on the co ntrol or atte mpts any other action with that control . )

Double - clicking on a Command button in the toolbar will place it onto the center of your form . Left click
on it the "draw" it onto the form by dragging the mouse and at the same time, holding down the left
mouse key while dragging . Release the left mouse key when the object is the size you want it to be . You
can also "drag" an object in the work area by first selecting the object with a single mouse click then
dragging the object by positioning the mouse pointer over the object, holding down on the left mouse
key, and moving the object to a new location in the work area, then releasing the left mouse button to
stop the move and finally, by clicking somewhere off the object to deselect the obje ct that was just
moved.

While the mouse pointer is over the Command button, click and release the left mouse button to highlight
(select) the Command button. You will see resizing handles appear which you can drag diagonally,
horizontally, or vertically to change the size of the Command button. The only reason you would want to
do this is to fit a large caption onto the button. Most of the time, you will not need to resize the Command
button. Beginners like to play with the resizing so have fun with it.

Another way to place a Command button onto a form is to single - click on the Command button in the
Toolbar . Then place the mouse pointer over the form and hold down on the left mouse button while
dragging a short diagonal line from corner to corner where you want the but ton to be placed. If the size
is not right, left - click on the button and drag the re - sizing handles to make it the size you need.

TheNameandNamingConventions
Getting down to serious business, the Command button will need to have a name . It is named whi le it is
highlighted (selected) on the form . While the Command button on the form is selected, go to the
Properties Window and select the Alphabetical tab. At the top of this list the first item to appear will be
Name . Click on Name and to the right of tha t, double click in the Name space to highlight the words
Command1. Start typing a name for your Command button beginning with the lowercase letters "cmd"
without the quotation marks, just plain cmdName where Name is the one you select, such as cmdShow3.

Naming conventions for controls and variables (textbook naming conventions for first and second
semester VB students) are discussed in the article Hungarian Notation . Many programmers begin the
name part (after the cmd prefix) with a capital letter to make it easier to read, such as cmdLarge . If two
words are to be in the name of any control such as a Command button, be sure you do not allow any
spaces in the name. Begin the second word with a capital letter like this: cmdSecondWord. This is only

© Einstein College of Engineering