FCI LESSON

What is Human-Computer Interaction?

• Human-Computer Interaction (HCI) refers to the
interdisciplinary study and practice of designing,
evaluating, and implementing interactive systems that
facilitate meaningful and efficient communication between
humans and computers.
• It encompasses the exploration of how users interact with
technology, focusing on usability, user experience,
accessibility, and the overall effectiveness of computer
interfaces.
• HCI integrates principles from computer science,
psychology, design, and other fields to ensure that
technology interfaces are intuitive, user-friendly, and
supportive of human needs and behaviors.
LESSON 1
1. PHOTOSHOP
A. Working with Selections
Tool overview
In Adobe Photoshop, you can make selections based on size, shape, and color
using four basic sets
of tools—the marquee, lasso, magic wand, and pen tools. In addition, you can use
a fifth tool, the
move tool, to reposition the selections you create.

1. Selecting with the rectangular marquee tool

 Repositioning a selection border while creating it
 Selecting from a center point
2. Moving a selection
 Moving and duplicating simultaneously
 Moving with a keyboard shortcut
 Moving with the arrow keys
 3. Selecting with the magic wand
4. Selecting with the lasso tool
5. Adding and subtracting selections
6. Selecting with the magnetic lasso
7. Transforming a selection
8. Combining selection tools
9. Cropping the completed image

2. ADOBE XD CC CLASSROOM

LESSON 2 AND 3
1. HUMAN-COMPUTER INTERACTION COMPONENTS
A. https://uphsd.sharepoint.com/:b:/s/BCSC2207HUMAN-
COMPUTERINTERACTION/
ETAvpKHyzOdOnxvQKQdKVL4BDbZJKN2y1UrsjBqMTqQqMw
2. THE COMPUTER
B. https://uphsd.sharepoint.com/:b:/s/BCSC2207HUMAN-
COMPUTERINTERACTION/
EXvlr_cuvVFEiMUmbbOVuwEBqCrNETllOxnPPTOUwsaRLQ
3. THE BASICS OF USER EXPERIENCE DESIGN

LESSON 4
UI DESIGN USABILITY
(***Lesson 3 nakalagay dito kasama adobe XD and user experience design***)

LESSON 5
USER RESEARCH METHOD
1. Research method in HCI
 Quantitative vs. Qualitative Research Methods

LESSON 6
USER INTERFACE DESIGN REFERRENCE
1. Designing the user interface
 Understanding the User Experience and the User Interface

Key Terms

 user experience (UX) – all aspects of a person’s interaction with a

software application,
 including actions, responses, perceptions, and feelings
  user interface (UI) – the set of inputs and outputs that the user interacts
with to invoke the
 functions of an application
 user-centered design – design techniques that embody the view that the
user interface appears
 to be the entire system
 usability – degree to which a system is easy to learn and use
 human-computer interaction (HCI) – a field of study concerned with
the efficiency and
 effectiveness of user interfaces vis-à-vis computer systems, human-
oriented input and output
 technology, and psychological aspects of user interfaces
 metaphors – analogies between features of the user interface and
aspects of physical reality
 that users are familiar with
 direct manipulation metaphor – metaphor in which objects on a display
are manipulated to
 look like physical objects (pictures) or graphic symbols that represent
them (icons)
 desktop metaphor – metaphor in which the visual display is organized
into distinct regions,
 with a large empty workspace in the middle and a collection of tool
icons around the perimeter
 document metaphor – metaphor in which data is visually represented
as paper pages or forms
 dialog metaphor – metaphor in which user and computer accomplish a
task
2. Metaphors for HCI
 Direct Manipulation: User interacts directly with objects on the screen
(e.g., desktop metaphor).
 Document Metaphor: Interaction involves browsing and entering data
on electronic documents.
 Dialog Metaphor: Interaction resembles a conversation, with users and
computers exchanging responses (e.g., using menus and dialog boxes).
3. Fundamental Principles of User-Centered Design
Key Terms
 human-interface objects (HIOs) – icons and other objects on a screen
that can be manipulated
 by the user and cause some action to occur
  affordance – when the appearance of a specific control suggests its
function visibility when a
 control is visible so that users know it is available, the control
providing immediate feedback to
 indicate that it is responding to the user
  tool tip – brief instructions that pop up when the mouse hovers over
a control
 visibility – when a control is visible so that users know it is available
 feedback – some visual or audio response by the system in response to
a user action
 radio buttons – a group of selection items that allows only one item to
be selected within the
 group
 check boxes – a group of selection items that allows either none or
many items to be selected
 within the group
 continuity – maintaining a certain level of consistency over time,
across multiple releases
 discoverability a feature of the user interface that provides clues to
help the users uncover
 hidden features
 active discovery – a user-interface feature to lead users to discover
hidden features
 breadcrumbs (navigation) – the technique of displaying the sequence
of pages traversed to
https://uphsd.sharepoint.com/:b:/s/BCSC2207HUMAN-COMPUTERINTERACTION/
EbKFvqxZn3RFtzGI6Pw43KYBtZnZ77mhsrFbfcwXOU5tYw

LESSON 7
1. Sample of Usability Question.
https://uphsd.sharepoint.com/:b:/s/BCSC2207HUMAN-COMPUTERINTERACTION/
EbtER0JBYhZIv1Z3iIVuZWIBvwDIk_AVt2zkeaCp0I0Eig
LESSON 8
1. Final project na e