HUMAN-COMPUTER INTERACTION

MIDTERM REVIEWER
YEAR 2024 - 2025

HCI DESIGN Platform Mode of Tasks Task/Platform

THE OVERALL DESIGN PROCESS Operati Examples
• Requirement Analysis on
- Developing a system requires initial research, stationa Special tasks and Printer and
which must be conducted thoroughly from a Embedded ry/ situations where photocopying
user perspective. mobile interaction and machine
- In order to optimize the interaction between computations are
needed
the system and the user, it is necessary to
on the spot
know the user needs and characteristics, TV/ Consoles stationa TV-centric tasks, limited Microsoft Xbox
usage context, preceding systems and the ry interaction, and and
competitive system aspects. tasks that need privacy Nintendo Wii
• User Analysis Kiosks/ Public and limited Stand-alone kiosk
- This design process reinforces the original Installations stationa interaction, short series and wall-
requirements analysis to satisfy potential ry of selection tasks, and mounted
system use more comprehensively. monitoring tasks installation for
monitoring
• Scenario and Task Modeling Virtual Reality stationa Spatial training, tele- VizBox and
- The most important part of interaction ry experience and VirtualDome
modeling. telepresence, and
- It involves the identification of the immersive
application task structure and the sequential entertainment
relationship between the different elements Special military
of the program or a system. Free Form stationa Special purpose helmet for tactical
ry and hardware platforms command and
• Interface Selection and Consolidation
mobile consisting of a control and multi-
- Software interface components (e.g., search customized touch
fields and widgets), interaction techniques configuration platform for
(e.g., voice and facial recognition), and multiple users
hardware specifications (e.g., sensors and
display monitors) will be made in this design Software Interface Components
process. - The integrated parts of a system or an
INTERFACE SELECTION OPTIONS application interface.
- These components are the means to break
• Hardware Platforms the complexity of a software by providing an
- The design configuration of a hardware easy interaction to the user.
interaction platform greatly depends on the - Sometimes, software interface
characteristics of the application that components are referred to as user
requires a certain operating environment. interface components.
- Also contains the overview of the essential
Platform Mode of Tasks Task/Platform
Operation Examples and basic elements for the graphical user
interface (GUI)windows, icons, menus, and
Desktop stationary Office-related tasks, Documentatio
time-consuming or n and mouse/pointer-based interactions (WIMP).
crucial tasks, and research
multitasking Here are the important areas to consider in the interface
Smartphones/ mobile Simple and short Calling and selection and development, including the WIMP, GUI
Handheld tasks, special tasks messaging
components, and 3D interfaces:
Tablet/Pads mobile Simple, mobile and Sales pitch
short tasks which and location
require a relatively mapping
• Windows/Layers
larger screen - These provide the working area of an
application, which pertains to the user
interface. Modern computer interfaces are

1|JC
 designed around windows, or the visual Toolbar – This is a small group of frequently used
output channels and abstractions for icons or functions organized horizontally or
individual computational processes. vertically for a quick and direct access.
• Icons Forms – This is a mixture of menus, buttons, and
- These are simple, interactable, and intuitive text boxes for long and interrelated input.
objects that can be visually represented as a Dialog box – This is a mixture of menus, buttons,
compact and small pictogram. and text boxes used for short and mixed- mode
• Menus input.
- These allow activations of commands and Combo box – It is a drop-down list box that
tasks through selection. These can be includes an option to the user to either choose
organized as a one-dimensional list or a two- an option from the list or type in their own option
dimensional array of items. in the text box.
• 3D Interface
MENU TYPE USAGE - It is described as “an image that provides the
Pull down Top level (main) categorical perception of depth”.
menu • Wire Framing
Pop up Object-specific, context- - A way to design a website or an application
specific service at a structural level.
Toolbar Functional/Operational tasks - A wire-frame is commonly used to layout
Tabs File folder metaphor content and functionality on a page which
(categorical menu) considers the users’ needs and experience.
Scroll menu Long menu (many menu
items)
2D array/Image maps Identification of items by
icons (vs. by
long names) or pictures
Buttons/Hyperlinks Short menu (few choices)
Checkboxes/Radio Multiple choices/exclusive
buttons choice
Hot Keys For expert users
Aural menu Telemarketing and for use by
the
disabled

• Direct Interaction Through Pointer

- Before the mouse era, human-computer
interaction was in the form of keyboard
inputting of text commands.
- The mouse made it possible for users to
apply a direct metaphoric “touch” to the
target objects.
• GUI Components for User Input
In considering the interactive interface options of an
application, it is essential to understand the following
representative GUI components for soliciting input from a
user in a conventional manner:
Text box – This is used for making short to
medium alphanumeric input.

2|JC
USER INTERFACE LAYER • Graphical User Interface (GUI)
• User Interface (UI) - This type of interface is expected to be
- a channel between human and computer available in a multi-tasking environment or
interaction, where a user interacts with and an application that involves a considerable
controls a computer or machine to complete degree of complexity.
tasks effectively and efficiently. INPUT AND OUTPUT
• Application programming interface (API) • Input
- A set of routines, protocols, and tools for - pertains to any information or data that is
building software applications, especially sent to a computer for processing.
when programming a graphical user - Input or user input is directed to a computer
interface (GUI). using an input device like keyboard, mouse,
• Window manager and microphone.
- A software utility found in most GUI-based • Output
software and applications that manage the - Refers to any information that was processed
overall alignment and layout of graphical by and sent out from a computer or any
windows. electronic device.
Characteristics of a successful UI: • Interrupt
• It should be intuitive, which does not - A signal to the processor indicating that an
necessarily require training to operate. I/O event has occurred and must be handled.
• It should be efficient to carry out a smooth - Interpreted so that the address of its handler
operation for faster usage. procedure can be looked up and executed
• It should be user-friendly to provide user while suspending the ongoing process for a
satisfaction. moment.
• Event-driven program structure
Types of User Interface (UI) - Programs are developed in terms of events,
• Natural Language Interface such as mouse clicks, gestures and keyboard
- This requires the user to enter responses to input, and their corresponding handlers.
questions asked by the computer. EVENTS
- The questions are displayed on a virtual • Event-driven program
device unit (VDU), commonly a monitor, and - a programming paradigm in which the flow
the answer are entered via the keyboard. of program execution is determined by
- It is called “natural language” interface events like a mouse click, keypress, or a
because the computer and the user seem to message from the operating system or
have a conversation as their mode of another program.
interaction Parts of event-driven programming
• Menu-Based Interface • Event
- This provides the user with an on-screen list - This object in Java is created when
of available selections, although the options something changes within a GUI.
displayed are limited. - An event is triggered, and a relevant event
• Form-Based Interface object is created when a user clicks on a
- It consists of on-screen forms or Web-based button, clicks on a combo box, types
forms displaying fields containing data items characters into a text field, etc.
or parameters that need to be - Supported by several Java packages like
communicated to or solicited from the user. java.util, jawa.awt, and java.awt.event.
• Command Line Interface (CLI) • Event Source
- It allows the user to control the application - It refers to the object that is triggered in an
with a series of keystrokes, commands, event. The source is an object that
phrases, or some sequence of these three (3) generates an event.
methods, though the command language
• Event Listener
has no inherent meaning for the user.
- It is a program code that listens for changes,
3|JC
 additions, user interaction, etc. When an
event listener is performed, it does the JLabel Mobn = new JLabel ("Mobile Number:");
specified task(s) based on the event. JTextField t4 = new JTextField(15);
• Event classes
- Represent different core event handling JLabel email = new JLabel ("Email Address:");
mechanism in Java. JTextField t5 = new JTextField(15);
Event Classes Event Description
ActionEvent This occurs when a graphical element is JLabel lb2 = new JLabel (" ");
clicked, such as a button or an item in a JButton submit = new JButton ("Submit");
list. JButton clearall = new JButton ("Clear All");
ContainerEvent This represents an event that occurs to
the GUI’s container itself—for example, JFrame outputFrame;
a user JLabel outputLabel;
adds or removes an object from the JButton okay;
interface.
KeyEvent This occurs when the user presses, public EventDriven_Caramonte(){
types, or releases a key in the keyboard.
WindowEvent This represents an event relating to this.setTitle("INPUT");
a window—for example, when a this.setSize(500, 400);
window is
activated and closed. this.setDefaultCloseOperation(JFrame.EXIT_ON_C
MouseEvent This represents any related mouse LOSE);
action, such as clicking, pressing, and setLayout(new GridLayout(7, 2, 10, 10));
dragging.
TextEvent This is generated when the value of Firstn.setFont(bFont);
textarea or textfield is changed. Lastn.setFont(bFont);
ComponentEvent This is generated when the component Middlen.setFont(bFont);
is hidden, moved, or resized.
AdjustmentEvent This is generated when the scroll bar is Mobn.setFont(bFont);
used. email.setFont(bFont);
submit.setFont(bFont);
clearall.setFont(bFont);
05 HANDS-ON ACTIVITY 1
add(Firstn);
import javax.swing.*;
add(t1);
import java.awt.*;
add(Lastn);
import java.awt.event.*;
add(t2);
add(Middlen);
public class EventDriven_Caramonte extends JFrame{
add(t3);
add(Mobn);
JPanel pnlMain = new JPanel();
add(t4);
Font bFont = new Font ("Arial", Font.BOLD, 16);
add(email);
add(t5);
JLabel Firstn = new JLabel ("First Name:");
add(submit);
JTextField t1 = new JTextField(15);
add(clearall);
add(lb2);
JLabel Lastn = new JLabel ("Last Name:");
JTextField t2 = new JTextField(15);
submit.addActionListener(new btnSubmit());
clearall.addActionListener(new btnClearAll());
JLabel Middlen = new JLabel ("Middle Name:");
JTextField t3 = new JTextField(15);
this.setVisible(true);

4|JC
 if(e.getSource() == clearall){
}
class btnSubmit implements ActionListener{ t1.setText("");
public void actionPerformed(ActionEvent e){ t2.setText("");
if(e.getSource() == submit) { t3.setText("");
t4.setText("");
String Fin = t1.getText(); t5.setText("");
String Lan = t2.getText();
String Min= t3.getText(); submit.setEnabled(true);
String Mon = t4.getText(); if(outputFrame !=null){
String el = t5.getText(); outputFrame.dispose();
}
submit.setEnabled(false); }
}
outputFrame = new JFrame("OUTPUT"); }
outputFrame.setSize(500, 450);
outputFrame.setLayout(new GridLayout(6, 1, 10, 10)); class btnOkay implements ActionListener{
public void actionPerformed(ActionEvent e){
JLabel fnameLabel = new JLabel ("First Name: " + Fin); if(e.getSource() == okay) {
fnameLabel.setFont(bFont); outputFrame.dispose();
submit.setEnabled(true);
JLabel lnameLabel = new JLabel ("First Name: " + Lan);
lnameLabel.setFont(bFont); t1.setText("");
t2.setText("");
JLabel mnameLabel = new JLabel ("First Name: " + Min); t3.setText("");
mnameLabel.setFont(bFont); t4.setText("");
t5.setText("");
JLabel mobileLabel = new JLabel ("First Name: " + Mon); }
mobileLabel.setFont(bFont); }
}
JLabel emailALabel = new JLabel ("First Name: " + el); public static void main(String[] args) {
emailALabel.setFont(bFont); new EventDriven_Caramonte();
}
outputFrame.add(fnameLabel);
outputFrame.add(lnameLabel); }
outputFrame.add(mnameLabel);
outputFrame.add(mobileLabel);
outputFrame.add(emailALabel);

okay = new JButton("Okay");

okay.setFont(bFont);
outputFrame.add(okay);
okay.addActionListener(new btnOkay());
outputFrame.setVisible(true);

}
}
}

class btnClearAll implements ActionListener {

public void actionPerformed (ActionEvent e){

5|JC