IS Elective
(Human
Computer
Interaction)
Lesson 1
Understanding
Human-Computer
Interaction (HCI)
1. HCI, or Human-Computer Interaction, is all
about how people use computers and other
tech stuff.
2. It's important because it helps make technology easier and
more enjoyable for us to use.
3. In everyday life, HCI affects how we use our phones,
tablets, and other gadgets. Think about how easy it is to
swipe through your phone or use an app – that's HCI at
work.
4. HCI is like a mix of different subjects, like psychology,
design, and engineering. People who work in HCI use ideas
from these subjects to make tech things better for us.
Some basic ideas in HCI are:
1. Making things user-friendly: HCI experts try to
make sure that technology is easy for us to
understand and use.
2. Accessibility: They also make sure that
technology can be used by everyone, including
people with disabilities.
3. Keeping it simple: They try to make technology
less confusing and easier to figure out.
4. Making it look good: They pay attention to how
technology looks, because good design can make
it more enjoyable to use.
HUMAN
FACTORS IN HCI
Human
Perception and
Cognition
Definition
Perception: Perception involves the process of organizing and
interpreting sensory information to understand the environment.
It includes how individuals use their senses (such as sight,
hearing, touch, taste, and smell) to gather information about the
world and make sense of it. Perception is influenced by various
factors, including past experiences, expectations, culture, and
context.
Example:
Interpreting Icons on a Smartphone: When interacting with a
smartphone interface, users rely on visual perception to interpret
icons representing different apps or functions. For example,
recognizing the phone icon as the means to make calls involves
perceiving its visual representation and associating it with the
action of calling.
Visual
● This is what we see with our eyes.
● It's how we notice colors, shapes, and
movement on screens, like when we watch
videos or scroll through Instagram.
● Visual perception helps us understand the world
around us.
Auditory
● This is what we hear with our ears.
● It's how we listen to music, understand
someone speaking, or hear sounds in movies or
video games.
● Auditory perception helps us make sense of
sounds.
Tactile
● This is what we feel with our sense of touch.
● It's how we feel textures, temperatures, and
pressure when we touch things like our phones
or keyboards.
● Tactile perception helps us interact with objects
in the physical world and on screens.
Discussion on
Cognitive
Processes:
Attention, Memory,
Learning
Cognition: Cognition refers to the mental processes involved in
acquiring, processing, storing, and using information. It
encompasses a wide range of mental activities, including
attention, memory, language, reasoning, problem-solving, and
decision-making. Cognition allows individuals to perceive,
understand, and interact with the world, as well as to adapt to
new situations and learn from experiences.
Example:
Understanding Navigation Menus on a Website: HCI principles
inform the design of website navigation menus to enhance user
comprehension. Users utilize cognitive processes to understand
the structure of the menu, navigate between different sections or
pages, and locate desired content efficiently.
Attention
● This is about what we focus on at any given
moment. When we're studying, playing a game,
or watching a movie, our attention is on those
activities.
● It's like a spotlight that directs our focus.
Memory
● This is how we store and recall information.
● It's like our brain's filing system.
● When we remember someone's name, a fact
from class, or how to do something, that's our
memory at work.
Learning
● This is how we acquire new knowledge or skills.
● Whether it's learning a new language, mastering
a musical instrument, or understanding a
complex concept, learning involves taking in
information and making it stick in our brains.
Exploration of
Psychological
Principles Relevant
to Interface Design
Simplicity
● Interfaces should be easy to understand and
use, without unnecessary clutter or complexity.
Think of it like having clear road signs that guide
you where you need to go without confusion.
Consistency
● Interfaces should behave in predictable ways, so
users know what to expect. For example,
buttons for similar functions should look and
work the same across different screens or apps.
Feedback
● Interfaces should provide clear feedback to
users when they take an action, like clicking a
button or entering information. It's like getting a
confirmation message after sending an email –
it lets you know that your action was successful.
User Control
● Interfaces should give users control over their
interactions, allowing them to navigate,
customize, and interact with the interface in
ways that suit their preferences. It's like being
able to adjust the settings on your phone or
computer to make it work the way you want.
Understanding how people perceive and think can
help designers create interfaces that are intuitive,
efficient, and enjoyable to use. By considering
factors like visual, auditory, and tactile perception,
as well as attention, memory, and learning
processes, designers can design interfaces that
make technology more accessible and user-friendly
for everyone.
Mental Models
and Conceptual
Models
Definition and
Distinction between
Mental and
Conceptual Models
Mental Models
● These are the ideas or beliefs we have about
how things work based on our past experiences
and knowledge. It's like the picture in our heads
of how something should be or how it should
work. For example, we have a mental model of
how a car operates – we know we need to turn
the key to start it, press the gas pedal to go, and
so on.
Conceptual Models
● A conceptual model is an abstract representation
of how a system or interface is organized,
structured, and functions.
● It represents the designer's conceptualization of
the system's underlying principles, functionalities,
and relationships.
● Conceptual models help designers communicate
their design intentions, principles, and
functionalities to users. They provide a basis for
designing interfaces that align with users' mental
models and facilitate intuitive interaction.
Application of
Models in Interface
Design for User
Comprehension
● Designers use conceptual models to create
interfaces that match users' mental models as
closely as possible.
● This means making the interface look and
behave in a way that aligns with how users
expect it to work based on their past
experiences.
● For example, using icons or symbols that users
recognize, placing buttons where users expect
to find them, and organizing information in a
logical way all help users understand and
navigate the interface more easily.
Analysis of How
Mental Models
Influence User
Interactions with
Interfaces
● Users' mental models heavily influence how
they interact with interfaces.
● If the interface matches their mental model
closely, they'll find it easy to understand and
use.
● However, if there's a mismatch between the
interface's conceptual model and users' mental
models, they may struggle to figure out how to
use it.
● For instance, if a website's navigation is
different from what users expect, they might get
confused and frustrated trying to find what
they're looking for.
Designing for
Human Memory
and Attention
Strategies for
Enhancing Memory
Retention in
Interface Design
Repetition:
Repeating important information or actions in the
interface helps users remember them better. For
example, showing a confirmation message after
completing a task reinforces the action in the user's
memory.
Chunking:
● Breaking information into smaller, more
manageable chunks makes it easier for users to
remember.
● For instance, grouping similar items together in
a menu or list helps users remember where to
find them.
Visual Cues
● Using visual elements like icons, colors, or
images can help users remember information
more effectively.
● Associating specific colors or icons with certain
functions or categories makes them easier to
recall.
Techniques for
Managing User
Attention to
Improve Usability
Hierarchy
● Organizing content in a clear hierarchy helps
guide users' attention to the most important
information first.
● Using headings, bullet points, or bold text can
draw attention to key points or actions.
Contrast
● Using contrast in color, size, or position helps
important elements stand out from the rest of
the interface, making them more noticeable to
users.
Progressive Disclosure
● Presenting information gradually instead of
overwhelming users with everything at once
helps manage their attention and focus.
● For example, using step-by-step wizards or
collapsible sections allows users to focus on
one task or piece of information at a time.
Discussion on the
Impact of
Cognitive Load on
Interface Design
Cognitive load refers to the amount of mental effort required
to process information and perform tasks. High cognitive
load can overwhelm users and lead to confusion or errors.
Interface designers aim to reduce cognitive load by:
● Simplifying Design: Keeping interfaces simple and
intuitive reduces cognitive load by making it easier for
users to understand and navigate.
● Providing Clear Feedback: Giving users immediate
feedback on their actions helps reduce cognitive load by
confirming that their actions were successful.
● Minimizing Distractions: Removing unnecessary
distractions or irrelevant information from the interface
helps users focus on the task at hand, reducing
cognitive load.
Thank you!
Quiz
Please Prepare for a quiz
TRUE or FALSE
Google forms
● https://test.gclocked.com/?form=-NwHn
8AasZlCg77fMMtS
ACTIVITY 1
● Evaluate the interface based on the following cognitive
principles. Use the scale provided to rate each principle,
and provide comments or suggestions for improvement
as needed.
● Group yourselves into 3.
Interface Evaluation
● https://docs.google.com/document/d/1bswwsZWdQvd
70DFybaHM8FYxdQ5NKJwXDvUFtXjSuww/edit?usp=s
haring
● Write your output on any word processing application,
and upload your work on google classroom.
