CSC 451 Lecture Notes 2

Interaction Styles
Input and interaction techniques

User Interface

The User Interface (UI) is the space where interactions between humans and
computers occur; it consists of information output from the machine, as well as a set of
control elements for the user to perform certain actions. These interactions enable an
efficient system where machines aid the user’s decision-making process and, in turn,
the user can effectively operate it. When building the UI, the goal is to make it self-
explanatory and user-friendly so that users can quickly achieve the desired results.

The growing dependence of many businesses on web and mobile applications places
an increased priority on designing good UIs. In this note, we’ll look at the several
different kinds of user interfaces and their pros and cons, additionally; briefly
relationship between users and different types of interfaces to help you to understand
where to use a specific kind of UI will be examined

Types of User Interfaces (Dialog Styles)

1. Graphical User Interface

Advantages of a Graphical User Interface

 Suitable for non-technical users

 The complexity of actions is hidden from the users
 Enhanced by attractive visuals
 Immediate visual feedback
 Leverages models and imagery from the real world
 Enables usage of multiple input devices

Disadvantages of a Graphical User Interface

 Requires power and memory resources

 Might have low discoverability
 Might overwhelm users with the growing amount of control elements
 Hidden commands need to be searched intentionally

2. Touchscreen Graphical User Interface

The Touchscreen Graphical User Interface requires users to interact with the device
with their fingers. It has become a commonly used option due to the popularity of
portable devices. You come across touchscreen GUI when you look at almost anything
on your phone or tablet.
The main differences from ordinary GUI are the support of swiping, hold click (often
equivalent to the right mouse click), and some other features like a two-finger-tap
gesture to zoom/rotate an object.

Overall, there are multiple pointing actions that users can utilize: length of motion,
change in direction, change in velocity, lack of motion, path start and endpoints,
pointing, tapping, looping, and time-based motions.

Advantages of a Touchscreen Graphical User Interface

 Easier and quicker than manipulating a mouse or typing
 Avoids external devices such as a keyboard or mouse
 Possibility of adding various motion actions
 Accessible to children and elders
 Zoom-in gestures promote accessibility for visually impaired
 Adaptable to a wide range of devices

Disadvantages of a Touchscreen Graphical User Interface

 Control elements size is limited by mobile display size
 Additional motions may not be easy to discover
 May be unnecessarily activated by stray touches

3. Menu-Driven Interface

The menu-driven interface employs a series of screens, or “menus”. When a user

makes a selection by tapping/clicking on the list format or graphics, it takes them to the
next menu screen until they complete the desired outcome.

An example is the settings menu on your phone. All you can do is scroll the menu and
tap items; no other interaction is available. Accordingly, it is used in applications with a
familiar, limited, and uniform set of functions. You could put them all under subheadings
like “Camera Settings”, “Display Settings”, etc.

Advantages of a Menu-Driven Interface

 Handy for computer beginners and novice users
 Low cognitive load on users
 Familiar interface across different platforms
 You are in charge of creating an order and a hierarchy for user pathways
 More control over user interactions
 Simple to implement in various kinds of devices

Disadvantages of a Menu-Driven Interface

 Limited menu options
 Sub-menus might be difficult to find
 Risks of taking up a lot of screen space or being too small
 Requires unnecessary actions for a simple task
4. Command Line Interface

A Command Line Interface (CLI) is a text-based user interface for interacting with PC on
a low abstraction level. Generally, this type of menu is not intended for the average
user. It is mostly used when working with cloud services or carrying out system
administrators’ responsibilities.

Many programs and services often have a CLI in addition to a GUI to facilitate
automation of tasks. When using bots or communicating across programs, it might be
inconvenient to press buttons in the graphical interface. It is much easier to instruct the
computer to run a specific console command.

An example of CLI that people are most familiar with is a terminal of any operating
system (Windows, macOS, Linux).

Advantages of Command Line Interface

 Faster than other types of user interface
 Less CPU processing requirements
 Works with a lesser resolution screen
 Easily scales in size
 Possibility to convert repetitive tasks into one command
 Ability to trigger cross-application interactions to perform complicated actions

Disadvantages of Command Line Interface

 Requires experience and/or programming skills
 Typos in command syntax result in errors
 Usually accepts only keyboard input type
 Not intuitive – requires reading the manual before using it

5. Conversational UI

Modern technology is mostly visual, but conversational UI takes advantage of words

and language-based communication being as useful, if not more. Conversational UIs
allow users to interact with computers simply by telling them what to do. It can be verbal
or voice-controlled (like Siri or Alexa) or written (like chatbots). In order to employ the
first type, the software should have voice recognition capabilities.

Depending on the complexity of a given tool, it could support rather structured input
such as “set a reminder for tomorrow” or more casual queries such as “I need
something to entertain a group of six kids for 2-3 hours”.

The invention of this technology signified that users have the option to hold a human-
like conversation with their device instead of using computer-specific language. This
interface is powered with learning and self-teaching abilities that make them more
useful the longer you use them..

Advantages of a Conversational UI
 Versatile in applications
 No need to learn new skills
 Voice provides a realistic feel
  Connects with users on a personal level
 Responds with context to build interactions
 Adapts to gender, tone, accent, and pace of speech
 Can be integrated into existing apps

Disadvantages of a Conversational UI
 Limited amount of visual and textual clues
 Articulating commands might be complicated

Input devices and interaction techniques

An Input device is the piece of computer hardware equipment used to give input to the
computer. The input can be in the form of graphics, text, sound, audio, video, and
image, etc. “Input devices are those devices through which we can give the data
and instructions to the computer.”

For Example– Mouse, Trackball, Keyboard, Light pen, etc.

Classification of Input Devices

 Manual data entry devices

 Direct data entry devices
Manual Data Entry Devices

Manual input devices are those peripheral devices through which the user can enter the
data manually (by hand) at the time of processing.

It also includes–

Keyboard: It is the commonly used input device. It is designed to input text and
characters.

A keyboard contains approx. 108 keys. For Example– Alphanumeric keys, Numeric
keys, Function key, and cursor key, etc.

Types of keys: These keys include:

Alphanumeric keys: These are located in the center of the keyboard. These keys
consist of alphabet (A-Z), Number (0-9), and symbols (@, #, $, %, ^, &, *, !, =, +).

Numeric Keys: A part of keypad contains 17 numeric keys. In which we can include
number up to 0-9, mathematics operator like +, -, /, *, and enter key.

Function keys: These keys are placed at the top of the keyboard. In which we can
include F1, F2 up-to F12. The function key performs many tasks according to the
software.

Cursor Keys: The cursor keys include Up, Down, Left, and Right. These are used to
move the cursor on the screen.

Types of Keyboard: The type of keyboard is:

1. Normal Keyboard: These are the commonly used keyboard. It is used by the user in
their PCs. It contains 108 keys. The normal keyboards are connected to the CPU
through the wire.

2. Wireless Keyboard: The wireless keyboard connected to the computer without the
wire. It works for a limited distance. It is more expensive than a normal keyboard. The
user faces technical complexity in it.
3. Ergonomic Keyboard: It gives the user comfort and ease during the typing; that’s
why it is called the “Ergonomic keyboard.” This keyboard is used to increase the
efficiency of the user. It also reduces wrist pain during typing.

Advantages of Keyboards

1. Easy to use
2. Enable fast data input
3. Well tried technology

Disadvantages of Keyboards

1. Sometimes it is difficult to use

2. Need desk space to keep

Mouse: It is used as a popular pointing device. It is used to create images, graphics as

well as to click on any button or menu. The mouse has two or three buttons.

Functions of the mouse:

 Clicking
 Double Clicking
 Right Clicking
 Dragging
 Scrolling

Types of Mouse

There are three type of mouse are as follow:

 Mechanical Mouse
 Optical Mouse
 Wireless Mouse
1. Mechanical Mouse: This mouse has a rubber ball at the bottom, when we rotate the
mouse on the surface than the rubber ball also rotates inside the shell. Now the sensors
inside the mouse give a signal to the computer.

2. Optical Mouse: It is a type of Non-mechanical mouse. A light beam is emitted from

the surface below it. Based on the light beam, the mouse determines the distance and
speed of the object.

3. Wireless Mouse: This mouse communicates to the computer with the help of radio-
frequency.

It has two main components:

Transmitter- It is used to send the information of the mouse’s speed and its click in the
form of an electromagnetic signal.

Receiver: It connects to the computer and used to receive the signals sent by the
transmitter.
Advantages of Mouse

1. Easy to use.
2. Less Expensive.
3. The Cursor moves faster than the arrow keys of the keyboard.

Disadvantages of Mouse

1. Required flat surface to move

2. Needs regularly cleaning
3. Damaged easily

Joystick: It is a pointing device. It is used to play video games. It has a rounded ball at
both ends. The joystick can be moved in all directions.

The Joystick is similar to a mouse. It is also used in computer-aided designing (CAD).

Advantages of Joystick

1. Used in playing games

2. Fast Interface
3. Easy to Navigate

Disadvantages of Joystick

1. Sometimes difficult to control

2. Required hand Movement
3. It is not robust

Microphone: The microphone was introduced by “Emile Berliner” in 1877. It is also

called “Mic.” The Microphone is used to take input in the form of audio.

The microphone is plugged into the specific port of the sound card in the computer
system. Some microphones are wireless.
Touch Screen: It is an Electronic Visual Display, which is used to detect the touch of
finger and hand in its display area.

It is most widely used with those computer machines that can interact with the user.

For Example: Smartphones, Tablet, Etc.

Type of Touch Screen: The types of the touch screen are:

1. Resistive: It is made up of hardened acrylic plastic. It is pressure sensitive. It

has minimal clarity. It has a durability of 15 million touches.
2. Capacitive: It is made up of glass with coating. It activates by human body
electricity. It has the best clarity. It has a durability of 60 million touches.
3. Surface Acoustic Wave (SAW): It is made up of a Glass with coating. SAW
activates by wave absorption. It has medium clarity. It has a durability of 30
million touches.

Advantages of Touch Screen

1. Simple User Interface

2. Speed
3. Durability
4. Improve Accessibility

Disadvantages of Touch Screen

1. Screen Size
2. Sensitivity Issue
3. Accidental Dialing

Touch Pad: It is a flat pad used in laptops on which we slide the finger to move the
cursor. It is a touch-sensitive area.

It is also called “Trackpad.” It is used to translate the motion and position of the user’s
finger. It also includes two buttons:

Left Click: It is used to select the option.

Right Click: It is used to display the options on the screen.

Advantages:

1. No Mouse Needed
2. No need of a wire-like mouse

Disadvantages:

1. Lacks of the scroll wheel

2. Less sensitive than a mouse

Light Pen: It is a tool that is light sensitive. It is used to draw pictures and graphics on
the computer screen. It is also used to select the objects.

The pictures made by the light pen can be stored in the computer and can be improved
as needed.

Advantages:

1. It allows the user to select any object.

2. It does not have any coating.
3. Easy to Use
4. Available in different colors

Disadvantages:

1. Works only with CRT screens

2. Not very accurate drawing
3. Sensitive with dust

Web Camera: It is a hardware input device. It is a video camera that is used to transmit
pictures or videos in real-time to a computer network.

It is connected with laptops, or we can connect it with the computer through USB cable.
It is also called a small digital camera.
Advantages:

1. It can connect with people across the world.

2. Easy to use
3. It uses both sound and video

Disadvantages:

1. Poor Quality Images

2. Limited Features

Voice Recognition System: It is also called the “Speech Recognition System.” It is

a computer software program that takes human speech as an input, converts that into
digital form, and act on it.

Voice recognition system is used to operate mobile phones through voice

command.

For Example: Google Assistant, SIRI (Apple) Etc.

Advantages:

1. Improves Efficiency
2. Easy to use for anyone
 3. Easy to Understand

Disadvantages:

1. Vocal Problems
2. Requires more storage to store voice files
3. Noise Interference

Direct Data Entry Devices

Direct data devices are those peripheral devices through which we can directly input the
data from the source and transfer that to the computer system.

It also includes:

 Scanner: It is an input device. It is used to scan documents such as

photographs. It is used to input any shape or written data on a page directly into
the computer.

Its main advantage is that the user does not have to type the information.

Advantages:

1. High-Resolution Images
2. Easy to handle
3. Fast image analysis
4. Image portability

Disadvantages:

1. High Cost
2. The Need for internet and power supply
3. Difficult to manage large digital files

Barcode Reader: It is also known as “Price Scanner” or “Point-of-sale scanner.” A

barcode is a particular type of code. It contains a series of thick and thin lines, which are
called “Bars.” The bar contains the information.

We can read the barcode through an optical scanner called “Barcode Reader.” The
user can connect the barcode reader with the computer through a serial cable.
Advantages:

1. Fast Speed
2. Accuracy
3. Portable

Disadvantages:

1. Require a clear line of sight

2. Expensive

MICR: It is also called “Magnetic Ink Character reader.” It is widely used in the
processing of cheques in the bank. MICR is used for reading magnetic ink printed
characters.

This machine is fast and automatic. There should be a nil chance of making mistakes.

Advantages:

1. More secure than OCR

2. More accurate than OCR
3. Allow overwrite cheques

Disadvantages:

1. Only a limited character set

2. Expensive
OCR: It is also called “Optical Character Recognition.” It is a technique which is used
to read a special type of symbols, letters, or the numbers. The light source can read the
characters.

The OCR can read characters printed from typewriters, the character of the cash
register, and the character of the credit card. The OCR fonts are stored on the
computer.

Advantages:

1. Faster data entry

2. Printed document converted into text files

Disadvantages:

1. Cannot recognize all type of text

2. Poor or Old documents cannot be recognized

Sensors: A Sensor can be treated as an input device that is used to detect and change
the force, pressure, any other physical quantity, and sends the data to the computer.

Advantages of Sensors

1. Sensitivity
2. Reliability
3. High-Resolution

Disadvantages of Sensors

1. Affected by temperature and humidity

2. Difficulties in designing
Biometric System: A biometric system is defined as an input system that is used to
identify a person. A biometric machine can identify a person by face, eyes, voice, finger,
or thumb impression.

It is a secure system; it means no biometric data can be stolen.

Uses of Biometric System:

1. Biometric Door Lock

2. Biometric Attendance system
3. Biometric ATM

A biometric system also includes:

1. Finger Scanner: It is used to identify the person by his thumb or finger.

2. Hand Scanner: It is used to identify the person by his palm impression.

Advantages of Biometrics

1. More secure than passwords

2. Accuracy
3. Uniqueness

Disadvantages of Biometrics

1. Costly
2. Missing or injured body part problem