User Interfaces

SOFTWARE & HARDWARE

Welcome!!!!
► Week: 10
► Grade: 9B
► Date: March 11, 2024
► Topic: Computer Fundamentals
► Sub-Topic: User Interfaces
► Objective: Students will be
- aware of the ways society can interact
with computers.
- able to distinguish between types of user
interface.
What is a user interface?
A user interface (UI) is a point of
interaction between a user and a
computer program or device. It includes
all the elements, such as screens, pages,
buttons, icons, and other graphical or
visual elements, as well as the methods
of interaction like mouse clicks, touch
gestures, and keyboard inputs
What is a user interface?
The primary goal of a user
interface is to facilitate effective
communication between the
user and the system, allowing
users to interact with and
control the software or
hardware.
How do user interfaces
benefit you in your daily
life?

What makes a good user

interface?
Types of User interfaces

► Software Interface: Command-driven,

graphical user interface (GUI) (menu driven,
pull down, and pop-up menus, icons.)
► Hardware Interface: touch screens,
non-visual interface, sensors, and Braille
keyboards.
Software interfaces
Command
Driven Interface
Command-driven Interface
A command-driven interface, also called command-line interface
(CLI), is a type of user interface where interaction with a computer
system or software application is primarily based on textual commands
entered by the user

Users can interact with a computer program or operating system using

a text-based command line. Rather than relying on graphical elements,
the user types in commands and parameters in a specific format, which
are then executed by the system
Command-driven Interface

► It allows direct expression of instructions to the

computer using single character, whole word
commands or abbreviations.
► Little help is provided to the user with CLI.
► Commands enable the user to quickly and concisely
instruct the computer what to do but they require the
user to have a knowledge of the commands available
and the syntax for using them.
Command-driven Interface

► Command-line interfaces (CLIs) can

support a variety of programming and
scripting languages for writing commands
and scripts.
► The choice of language often depends on
the operating system and the specific CLI
implementation.
Command-driven Interface

Common languages

CMD (Command Prompt): On Windows

systems, the Command Prompt uses the CMD
scripting language. While not as feature-rich as
PowerShell, CMD scripts are still used for basic
automation tasks.
Command-driven Interface

Common languages

Python: Python scripts can be executed from the

command line, making it a versatile language for
command-line tasks and automation on various
platforms. Python's simplicity and readability make
it a popular choice for scripting.
Command-driven Interface

Common languages

PowerShell: Developed by Microsoft, PowerShell is

a command-line shell and scripting language
primarily designed for Windows environments. It
enables administrators to automate tasks and manage
systems using a powerful scripting language..
Command-driven Interface

Common languages

Ruby: Ruby is a dynamic, object-oriented

programming language that is also used for
scripting and automation. It is known for its
readability and ease of use.
Command-driven Interface

Advantages
► The CLI system uses fewer system resources.
► users can be able to automate the most
frequently used commands.
► The system is efficient and fast
► The commands stay the same unlike in GUI
Command-driven Interface

Disadvantages
► It requires the user to have prior knowledge of the
command and its outcome.
► The interface is not user-friendly when compared
to GUI systems
► The command has to be typed precisely
Graphical
User
Interface
(GUI)
Graphical User Interface

A graphical user interface (GUI) is a digital

interface in which a user interacts with
graphical components such as icons, buttons,
and menus. In a GUI, the visuals displayed in
the user interface convey information relevant
to the user, as well as actions that they can
take.
Graphical User Interface
Main components

W - Windows
I - Icons
M - Menus
P - Pointers
Graphical User Interface
Main components

A window is a (usually) rectangular portion of

the display on a computer monitor that presents
its contents (e.g., the contents of a directory, a
text file or an image) seemingly independently of
the rest of the screen.
Graphical User Interface
Main components

UI icons serve to communicate concepts with

the power of symbolism. They show pictorial
resemblance with an object or a function they
represent so they can support the user interface
and provide a successful flow
Activity

► Sketch popular icons and explain

what they symbolize

[5 mins]
Graphical User Interface
Main components

A menu is essentially a graphical control element

that accesses various elements on a GUI. It
provides users with options and built-in
commands to access the features or
functionalities of an application or program,
whether it's web-based or on the user's system.
Graphical User Interface
Main components

A pointer is a symbol such as an

arrow which is moved by a pointing
device and can be used to select
objects.
Menu-Driven Interface

A menu-driven interface is a type of user interface where

users interact with a program or system through a series of
menus.

These menus present options or commands that the user can

select, typically through the use of a pointer, keyboard, or
touchscreen, simplifying the interaction with the system.
 Menu-Driven Interface
Usage

Many desktop applications, such as word processors, spreadsheets, and

graphic design tools, use menu-driven interfaces to organize a wide range
of features and commands.

Point-of-Sale Systems: Menu-driven interfaces are common in

point-of-sale (POS) systems used in retail environments. They enable
cashiers and users to access different functions like product lookup, sales
transactions, and inventory management.
Menu-Driven Interface

Pros Cons
1. Ease of Use 1. Limited Flexibility
2. Structured Organization 2. Slow Navigation

3. Visual Clarity 3. Difficulty with Complex Tasks

4. Consistency 4. Dependency on Navigation Skills

5. Inefficient for Expert Users
5. Accessibility
6. Limited Keyboard Interaction
6. Guided Interaction
7. Efficient Navigation
8. Reduced Dependence on
Typing
 Types of Menus
Dropdown Menu:
A menu that appears below a specific item when the user clicks or hovers over it. It
typically contains a list of options.
Pull-Down Menu:
Similar to a dropdown menu, a pull-down menu is positioned at the top of the
screen, and it drops down when activated.
Pop-Up Menu (context menu):
A menu that appears on the screen in response to a specific user action, such as a
right-click or long press.
Full screen menu:
A full screen menu covers the entire screen when activated, providing a clean and
engaging way for visitors to navigate your site.
Types of menus
Types of menus Pull down menu
Types of menus

Pop up menu
Types of menus

Full screen menu

Hardware interfaces
A HARDWARE USER INTERFACE REFERS TO
THE PHYSICAL MEANS BY WHICH A USER
INTERACTS WITH A DEVICE OR A PIECE OF
HARDWARE. IT CAN ENCOMPASS THE
TANGIBLE COMPONENTS THAT FACILITATE
COMMUNICATION BETWEEN THE USER AND
Touch screen
► Represent a hardware interface that enables direct interaction by
touching the display surface.
► Widely used in devices like smartphones and tablets, touchscreens
provide an intuitive and responsive means of input. Users can perform
actions such as swiping, tapping, and pinching, making touchscreens
highly versatile.
► They have become integral to various consumer electronics, enhancing
the user experience with interactive and tactile input methods.
► Touchscreens have redefined how users interact with devices, allowing
for more natural and direct manipulation of digital content.
Touch screen
Non-visual interfaces
► These cater to users with visual impairments or situations where
visual interaction is challenging or impossible.
► Screen readers, for example, provide auditory feedback by
converting on-screen text into synthesized speech. This allows
users with visual impairments to navigate and comprehend digital
content.
► Voice commands represent another non-visual interface, enabling
users to interact with devices through spoken instructions. These
interfaces prioritize accessibility, making technology more
inclusive for individuals with diverse needs.
Non Visual interface

Alexa! Tell
me a joke
Sensors
Sensors in hardware interfaces play a crucial role in detecting and
responding to physical input from the environment.
► Motion sensors, for instance, enable gesture control in gaming
consoles, providing an immersive and interactive experience.
► Light sensors adjust screen brightness based on ambient light,
enhancing user comfort.
► Proximity sensors detect the presence or absence of nearby objects,
enabling touchless interactions. Sensors contribute to the
adaptability and responsiveness of devices, making them integral
components in various smart technologies and interactive systems.
Sensors

Game controller
using motion
sensors for racing
Evaluation

Compare CLI
and GUIs
under the
following
criteria
Evaluation