Human Computer Interaction: User Interface Layer

1. User Interface
Layer

2. User Interface Layer
A user interface (UI) is the channel between human and computer Interaction
for completing tasks easily and efficiently. It controls how commands are given
and how information is displayed.
It is also a set of software that operates above the core operating system but
under the application layer, mainly consisting of APIs and a window manager.
An application programming interface (API) is a set of routines, protocols, and
tools that help developers build software, especially graphical user interfaces
(GUIs). It allows them to share data and functions without needing to know
how each one works inside.

3. User Interface Layer
When an app is used, it connects to the Internet and sends data to a server.
The server processes the data, takes action, and sends it back. The app then
displays the information in a readable way. This entire process happens
through an API.
Characteristics of a successful UI
• It should be intuitive, which does not necessarily require training to
operate.
• It should be efficient to carry out a smooth operation for faster usage.
• It should be user-friendly to provide user satisfaction.

4. User Interface Layer
Types of User Interface Layer (UI)

5. Types of User Interface
Layer (UI)
1. Natural Language Interface – The computer asks questions, and the user
types responses, creating a conversation-like interaction.
2. Menu-Based Interface – Users select from a limited list of on-screen
options without needing technical knowledge. Menus can be nested for
navigation.
3. Form-Based Interface – Uses digital forms with fields to collect or display
data, similar to paper forms.

6. Types of User Interface
Layer (UI)
4. Command Line Interface (CLI) – Users type commands to control
applications. It requires memorization but is preferred by experts for speed.
5. Graphical User Interface (GUI) – The most common interface today, using
visuals like icons and windows. Designing GUIs for the web requires careful
planning.

7. User Interface Layer
Input and Output ( I/O )

8. Input and Output
Input refers to any data or information entered into a computer for
processing. This can be done using devices like a keyboard for typing, a mouse
for clicking, or a microphone for voice commands.
Output is the processed data that the computer sends back to the user. This
includes text, images, sounds, or any information displayed on a screen,
printed on paper, or played through speakers.
According to Kim (2015), inputs and outputs (I/O) in an operating system are
managed using interrupts. Interrupts are signals that tell the processor that an
I/O event has occurred and needs attention.

9. Input and Output
When this happens, the processor pauses its current task, runs a special
handler to address that event, and then resumes the paused task. They are
checked rapidly as part of the processor's cycle meaning, the processor is
always listening to the incoming events, ready to respond as needed.
At a higher level, input and output are described in terms of events and event
handlers, which are based on lower-level interrupts. This is called event-driven
programming. Meaning, programs respond to actions like mouse clicks,
gestures, or keyboard input by running their corresponding handlers.

10. User Interface Layer
Events

11. Events
Event-driven programs are programming models where the flow of program
execution is determined by events like a mouse click, keypress, or a message
from the operating system. It can be written in any programming language
which is object-oriented and has a visual language that supports event-driven
programming.
An event-driven application is designed to detect events as they occur and
then deals with them using an appropriate event-handling procedure.

12. User Interface Layer
Parts of Event-Driven Programming

13. Parts of Event-Driven
Programming
● Event - in Java, an event is created when a user interacts with a GUI, such as
clicking a button or typing in a text field. Events are part of Java’s event
handling system and are supported by packages like java.util, java.awt, and
java.awt.event.
● Event Source – refers to the object that is triggered in an event. In other
words, even the source is an object that generates an event.
● Event Listener – It is a program code that listens for changes, additions, or
user interaction. When an event listener is performed, it does the specified
task based on the event.

14. Parts of Event-Driven
Programming
In handling events, a source generates an event and sends it to one or more
listeners registered with the source. Once the listener receives the event, it
processes and returns the event.
With this, most user interface frameworks operate similarly with an event-
driven structure. Hardware input devices create events that go to the software
interface, where UI objects process them to generate output. The user
interface layer above the OS supports this event-driven system. It simplifies the
complex details of the operating system, making it easier to create user-
friendly and interactive software.

15. User Interface Layer
Event Classes

16. Event Classes
Event classes in Java define different types of events for handling user
interactions. Here are some common event classes used in event-driven
programming:

17. Event Class Event Description
Action Event
Triggered when a graphical element, like a button or
list item, is clicked.
Container Event
Occurs when an object is added or removed from a
GUI container.
Key Event
Generated when a key is pressed, typed, or
released on the keyboard.
Window Event
Happens when a window is activated, closed, or
interacted with.
MouseEvent
Represents mouse actions like clicking, pressing, or
dragging.
TextEvent
Occurs when the text in a text field or text area
changes.
Component Event
Generated when a component is hidden, moved, or
resized.
Adjustment Event Triggered when a scrollbar is used.
Event Classes

18. Event Classes
In an event-driven program, it is necessary to know that multiple listeners and
event sources can interact with one another.
Multiple events can be registered by a single listener if they are of the same
type. Meaning, for similar sets of components that perform the same type of
action, one event listener can handle several of those events.
In a similar manner, albeit not common, a single event can be bound to
multiple listeners if it suits the design of the program.

19. Wala na
finish na