Lesson 1 & 2

OBJECTIVES
• At the end of the period the students should be able
• to familiarize the different software graphical user interface
• Be able to identify the CLI and GUI components
• Be able to understand the functionality of each component
 What is UI
• A user interface (UI) is the means by which a person interacts with a computer,
mobile device, or other technology. It is the part of the software that allows a
user to interact with the technology and provides access to the functions and
features of the device or software.
• User Interface is the front-end application view to which the user interacts
in order to use the software.
• Users can manipulate and control the software as well as hardware by
means of the user interface.
 What is UI

• User interface is part of the software and is designed in

such a way that it is expected to provide the user insight
into the software.
• An example of this is a social media application. The user interface of the
application is designed to provide the user with insight into the software,
allowing them to easily navigate and understand the various features and
functions of the app
 What is UI
• .UI provides a fundamental platform for human-computer interaction.
• Example:
• Keyborad
• Mouse
• Touch screen (Touchscreens are a type of user interface that provide a fundamental platform for
human-computer interaction by allowing the user to interact with the computer through touch
gestures.)
• Voice command
• It also provides a way for the computer to respond to user input and present
information, such as through a display screen or speaker.
 What is UI
• UI can be graphical, text-based, or audio-video based, depending upon
the underlying hardware and software combination.
• Graphical User Interface GUI is the most common type of UI, it uses visual
elements such as icons, buttons, and images to represent different actions and
options. This type of UI is easy to understand and use, making it popular for
consumer-facing applications such as smartphones, laptops, and desktop
computers.
 What is UI
• Text-based User Interface TUI uses text-based commands and options to
interact with the computer. This type of UI is often used for servers, system
administration, and other advanced tasks where precision and control are more
important than ease of use.
• Audio-video-based User Interface AVUI is a type of UI that uses audio and
video as the primary means of interaction. This type of UI is often used in
entertainment systems, such as smart TV, and media players, where the user
interacts through voice commands or gestures.
• Is speech recognition can be an example of an Audio-video-based User Interface?
 What is UI
• Yes, speech recognition can be considered an example of an audio-video-based
user interface (AVUI). Speech recognition is a technology that allows a computer
to understand and respond to spoken commands and input. It uses a microphone
to capture the user's voice and advanced algorithms to analyze and interpret the
speech.
 What is UI
• UI can be hardware or software or a combination of both.
• An example of a hardware UI is a touch screen on a smartphone. The touch
screen is a physical component of the device that allows the user to interact with
the software by tapping, swiping, and scrolling on the screen.
• An example of a software UI is a graphical user interface (GUI) on a computer.
The GUI is a collection of visual elements such as icons, buttons, and menus that
the user interacts with to perform tasks and access features. The GUI is a
software component that runs on the computer's operating system and does not
require any additional hardware.
 Other types of User Interfaces include:
• Voice User Interface (VUI) - Allows users to interact with a device or service
using voice commands.
• Touchscreen User Interface (TOUCH UI) - Allows users to interact with a device
or service using touch gestures on a touchscreen.
• Virtual Reality User Interface (VRUI) - Allows users to interact with a virtual
environment using a VR headset and hand controllers
 Other types of User Interfaces include:
• Motion User Interface (MUI) - Allows users to interact with a device or service
using body movements or gestures.
• Natural Language User Interface (NLUI) - Allows users to interact with a device
or service using natural language inputs, such as speech or text.
• Wearable User Interface (WUI) - Allows users to interact with a device or
service that is worn on the body, such as a smartwatch or fitness tracker.
• Hybrid User Interface: a type of user interface that combines two or more GUI,
CLI, VUI, and TUI, types of interfaces to provide a more seamless and efficient
user experience.
 Question?
1. What is the main purpose of a User Interface?
• A) To provide an interface for hardware manipulation B) To provide an interface for software
manipulation
• C) To provide an interface for both hardware and software manipulation D) None of the above
2. Where can User Interface be found today?
• A) Only on computers B) Only on mobile phones
• C) Almost every place where digital technology exists D) Only on airplanes
 Question?
3. Is the User Interface part of software or hardware?
• A) Software B) Hardware C) Both D) None of the above
4. What does UI provides a fundamental platform for?
• A) Human-computer interaction B) Human-hardware interaction
• C) Human-software interaction D) None of the above
 Question?
5. What types of User Interfaces can be found?

• A) Only graphical B) Only text-based

• C) Audio-video based, graphical, text-based D) None of the above
6. How does a User Interface provide insight into the software?
• A) By providing a graphical representation of the software
• B) By providing a text-based representation of the software
• C) By providing a combination of graphical and text-based representations of the software
• D) None of the above
 Question?
7. Can a User Interface be a combination of hardware and software?

A) Yes
B) No
C) Sometimes D
D) None of the above
8. What type of User Interface allows users to interact with a device using body movements or gestures?
• A) Voice User Interface (VUI)
• B) Touchscreen User Interface (TOUCH UI)
• C) Virtual Reality User Interface (VRUI)
• D) Motion User Interface (MUI)
 Question?
9. What type of User Interface allows users to interact with a device using voice commands?
• A) Voice User Interface (VUI)
• B) Touchscreen User Interface (TOUCH UI)
• C) Virtual Reality User Interface (VRUI)
• D) Motion User Interface (MUI)
10. What type of User Interface allows users to interact with a device using touch gestures on a touchscreen?
• A) Voice User Interface (VUI)
• B) Touchscreen User Interface (TOUCH UI)
• C) Virtual Reality User Interface (VRUI)
• D) Motion User Interface (MUI)
 The software becomes more popular if its
user interface is:
• Attractive
• Simple to use
• Responsive in a short time
• Clear to understand
• Consistent on all interfacing screens
 The software becomes more popular if its
user interface is:
• Attractive: An attractive user interface should be visually appealing and
easy on the eyes.
• For example, the user interface for Apple Music is sleek and modern, with vibrant
colors and intuitive navigation.
• Simple to use: A user interface should be simple to use, with
straightforward controls and a logical structure.
• For example, the user interface for Netflix is designed to be intuitive and easy to
use, allowing users to quickly access the content they want.
 The software becomes more popular if its
user interface is:
• Responsive in a short time: A user interface should have a quick response
time, allowing users to quickly access and interact with the software.
• For example, the user interface for Gmail is designed to load quickly and respond
to user input in a timely manner.
• Clear to understand: A user interface should be clear and easy to
understand.
• For example, the user interface for YouTube is designed to be easily understood,
with clear labels and descriptions for each element.
 The software becomes more popular if its
user interface is:
• Consistent on all interfacing screens: A user interface should have a consistent
look and feel across all screens.
• For example, the user interface for Instagram is designed to be consistent across all
platforms, making it easy for users to move between screens.
 UI is broadly divided into two categories:

• Command Line Interface

• Graphical User Interface
 UI is broadly divided into two categories:
• Command Line Interface (CLI) CLI has been a great tool for interaction
with computers until video display monitors came into existence
( computer monitors or television screens)
• CLI is the first choice of many technical users and programmers.
• because it provides a higher degree of precision and control than a Graphical User Interface
(GUI).
• CLI is often faster and more efficient than a GUI, since it does not require the use of
graphics or animations, which can cause lags and delays
 A text-based command line interface can
have the following elements:
• Command Prompt - It is text-based notifier that is mostly shows the context in which the user is
working. It is generated by the software system.
• Cursor - It is a small horizontal line or a vertical bar of the height of line, to represent position of
character while typing. Cursor is mostly found in blinking state. It moves as the user writes or
deletes something.
• Command - A command is an executable instruction. It may have one or more parameters. Output
on command execution is shown inline on the screen. When output is produced, command prompt
is displayed on the next line.
 UI is broadly divided into two categories:
• CLI uses less amount of computer resources as compared to
GUI.
• The Command Line Interface (CLI) uses less amount of computer resources
such as memory, CPU cycles, and hard drive space as compared to the
Graphical User Interface (GUI). This is because the CLI does not require the
use of graphics, which can be quite resource-intensive. Additionally, the CLI
runs faster due to the lack of graphical elements, which can contribute to lags
and delays.
 UI is broadly divided into two categories:
• Graphical User Interface (GUI) provides the user graphical means to interact
with the system.
• GUI can be a combination of both hardware and software.
• Using GUI, the user interprets the software.
• Typically, GUI is more resource-consuming than that CLI. With advancing technology,
programmers and designers create complex GUI designs that work with more efficiency, accuracy,
and speed.
 Questions
1.What is the primary purpose of a Graphical User Interface (GUI)?
-a) To provide the user with a graphical means to interact with the
system
-b) To interpret software for the user
-c) To consume more resources than a command-line interface (CLI)
-d) To create complex designs that work with more efficiency,
accuracy, and speed
 Questions
2. What is the relationship between GUI and hardware?
-a) GUI is entirely separate from hardware and only involves software
-b) GUI is a combination of both hardware and software
-c) GUI only involves hardware and no software
-d) GUI only involves software and no hardware
 Questions
1. What is the primary purpose of a Graphical User Interface (GUI)?
-a) To provide the user with a graphical means to interact with the system
-b) To interpret software for the user
-c) To consume more resources than a command-line interface (CLI)
-d) To create complex designs that work with more efficiency, accuracy, and speed
2. What is the relationship between GUI and hardware?
-a) GUI is entirely separate from hardware and only involves software
-b) GUI is a combination of both hardware and software
-c) GUI only involves hardware and no software
-d) GUI only involves software and no hardware
 Differences of GUI and CLI
• The main difference between the Graphical User Interface (GUI) and
the Command Line Interface (CLI) is visualization.
• GUI uses visual components such as icons, windows, menus, and
buttons to interact with the system,
• while CLI requires the user to type commands into a terminal.
• GUI is more user-friendly and intuitive,
• while CLI offers more powerful and advanced features.
 Elements of GUI
• GUI provides a set of components to interact with
software or hardware. Every graphical component
provides a way to work with the system.
• A GUI system has the following elements such as:
Elements of GUI
 Elements of GUI
• Window - An area where the contents of the application are displayed.
• Contents in a window can be displayed in the form of icons or lists if the
window represents file structure.
• It is easier for a user to navigate the file system in an exploring window.
• Windows can be minimized, resized, or maximized to the size of the
screen. They can be moved anywhere on the screen.
• A window may contain another window of the same application, called a
child window.
 Elements of GUI
•  Tabs - If an application allows executing multiple instances of
itself, they appear on the screen as separate windows.
• Tabbed Document Interface has come up to open multiple
documents in the same window.
• This interface Software Engineering Tutorial 61 also helps in
viewing the preference panel in the application. All modern
web browsers use this feature.
 Elements of GUI
•  Menu is an array of standard commands, grouped together
and placed at a visible place (usually top) inside the
application window.
• The menu can be programmed to appear or hide on mouse
clicks.
 Elements of GUI
•  Icon - An icon is a small picture representing an associated
application. When these icons are clicked or double-clicked, the
application window is opened. An icon displays applications and
programs installed on a system in the form of small pictures.
•  Cursor - Interacting devices such as a mouse, touchpad, and digital
pen are represented in GUI as cursors. On-screen, the cursor follows the
instructions from the hardware in almost real time. Cursors are also
named pointers in GUI systems. They are used to select menus,
windows, and other application features
1. What is the primary purpose of a GUI?

• a) To provide a visual means of interacting with the system

• b) To provide a command-line interface for interacting with the system
• c) To provide a hardware interface for interacting with the system
• d) To provide a programming interface for interacting with the system
2. What does a Window in GUI represent?

• a) An area where the contents of the application are displayed

• b) An area where the command lines are displayed
• c) An area where the hardware components are displayed
• d) An area where the programming codes are displayed
3. What does a Tab in GUI represent?

• a) A way to open multiple instances of an application

• b) A way to navigate in the file system
• c) A way to view the preference panel in the application
• d) A way to open multiple documents in the same window
4. What does a Menu in GUI represent?

• a) An array of standard commands, grouped together and placed at a visible place

• b) A way to navigate in the file system
• c) A way to view the preference panel in the application
• d) A way to open multiple documents in the same window
5. What does an Icon in GUI represent?

• a) A small picture representing an associated application

• b) A way to navigate in the file system
• c) A way to view the preference panel in the application
• d) A way to open multiple documents in the same window
6. What does a Cursor in GUI represent?

• a) Interacting devices such as a mouse, touchpad, and digital pen

• b) A way to navigate in the file system
• c) A way to view the preference panel in the application
• d) A way to open multiple documents in the same window
7. What is the advantage of using GUI over CLI?

• a) More user-friendly and intuitive

• b) More efficient and accurate
• c) More resource-consuming
• d) More command-line based
8. Is GUI more resource-consuming than CLI?

• a) Yes
• b) No
9. Can GUI be a combination of both hardware and software?

• a) Yes
• b) No
10. What is the primary advantage of GUI with the advancing technology?

• a) programmers and designers create complex GUI designs that work with more efficiency, accuracy, and
speed

• b) More resource-consuming
• c) More command-line based
• d) More user-friendly and intuitive
11) What are some elements that make up a GUI?

• a) Windows, Tabs, Menus, Icons and Cursor

• b) Command lines, Hardware components, Programming codes and Pointers
• c) Text, Images, Audio and Video
• d) None of the above
12. What is the purpose of a child window in a GUI?
• a) To provide a visual means of interacting with the system
• b) To open another window of the same application within the main window
• c) To provide a command-line interface for interacting with the system
• d) To provide a hardware interface for interacting with the system
13. What is the purpose of a cursor in GUI?

• a) To move around the screen and select elements

• b) To display the status of the system
• c) To provide a command-line interface for interacting with the system
• d) To provide visual feedback for the user's input
14. How does GUI make the interaction with the system more user-friendly?

• a) By providing visual elements such as icons, buttons, and menus

• b) By providing a command-line interface
• c) By providing a hardware interface
• d) By providing a programming interface
15. How does GUI help in performing complex tasks?

• a) By providing a visual representation of the application's features

• b) By providing a command-line interface
• c) By providing a hardware interface
• d) By providing a programming interface
 Application of specific GUI components
• A GUI of an application contains one or more of the listed GUI elements:
• Application Window - Most application windows use the constructs
supplied by operating systems but many use their own customer-created
windows to contain the contents of the application.
• Dialogue Box – It is a child window that contains a message for the user
and requests for some action to be taken. For Example, the Application
generates a dialogue to get confirmation from the user to delete a file.
• Text-Box - Provides an area for users to type and enter text-based data.
 Application of specific GUI components
• Buttons - They imitate real-life buttons and are used to submit inputs to
the software.
• Radio button - Displays available options for selection. Only one can be
selected among all offered.
• Check-box - Functions similar to list-box. When an option is selected, the
box is marked as checked. Multiple options represented by checkboxes
can be selected.
• List-box - Provides a list of available items for selection. More than one
item can be selected
 Application of specific GUI components

• Other impressive GUI components are:

• Sliders
• Combo-box
• Data-grid
• Drop-down list
1. What is the primary purpose of an Application Window in a GUI?

• a) To contain the contents of the application

• b) To display dialogue boxes
• c) To display buttons
• d) To display checkboxes
2. What is the purpose of a Dialogue Box in a GUI?

• a) To contain the contents of the application

• b) To display a message for the user and request for some action to be taken
• c) To display buttons
• d) To display checkboxes
• What is the purpose of Buttons in a GUI?
• a) To submit inputs to the software
• b) To contain the contents of the application
3. What is the purpose of Buttons in a GUI?

• a) To submit inputs to the software

• b) To contain the contents of the application
• c) To display a message for the user and request for some action to be taken
• d) To display checkboxes
4. What is the purpose of Radio buttons in a GUI?

• a) To display available options for selection

• b) To contain the contents of the application
• c) To display a message for the user and request for some action to be taken
• d) To display checkboxes
5. What is the purpose of Checkboxes in a GUI?

• a) To indicate that an option is selected

• b) To contain the contents of the application
• c) To display a message for the user and request for some action to be taken
• d) To display radio buttons
6. What is the purpose of List-boxes in a GUI?

• a) To provide a list of available items for selection

• b) To contain the contents of the application
• c) To display a message for the user and request for some action to be taken
• d) To display checkboxes
7. What is the purpose of Sliders in a GUI?

• a) To allow the user to adjust the value of a particular setting

• b) To contain the contents of the application
• c) To display a message for the user and request for some action to be taken
• d) To display checkboxes
8. What is the purpose of Combo-boxes in a GUI?

• a) To allow the user to select from a list of options or enter a custom value b) To contain the contents of
the application

• c) To display a message for the user and request for some action to be taken
• d) To display checkboxes
9. What is the purpose of Data-grids in a GUI?

• a) To display large amounts of data in a structured way

• b) To contain the contents of the application
• c) To display a message for the user and request for some action to be taken
• d) To display checkboxes
10. What is the purpose of Drop-down lists in a GUI?

• a) To allow the user to select from a list of options

• b) To contain the contents of the application
• c) To display a message for the user and request for some action to be taken
• d) To display checkboxes