LESSON 1 LESSON 3

Design for Usability Perception, Gestalt Perception, Typography

What is Usability? Human Perception

- Is a quality attribute that assesses how easy user - The way that each individual interprets, retrieves, and
interfaces are to use. responds to the information in the world that surrounds
- It also refers to methods for improving ease-of-use you is known as perception.
during the design process.
Sensory Aspects of Perception
UX Designing involves:  Visual Perception
1. Brand Experience o Process of interpreting visual information
2. Desirability received through the eyes (e.g recognizing
3. Usability shapes, colors, and patterns)
4. Utility o Most dominant sensory modality in interface
design.
Importance of Usability o Includes how individuals perceive and process
Usability Dimensions / Pillars visual information (e.g colors, shapes, images,
1. Learnability and text)
 How easy it is for users to accomplish basic tasks  Auditory Perception
the first they encounter the design. o Ability to perceive and understand sounds,
2. Efficiency spoken language, music, and other auditory
 How quickly can they perform task? stimuli.
3. Memorability o Involves how people perceive and process
 How quickly can they perform? sounds.
4. Errors o Include background music, voice instructions,
 How many errors do users make? How severe button click sounds, and notifications in
are these? How easily can they recover from the interface design.
errors?  Tactile Perception
5. Satisfaction o Sense of touch - allows individuals to perceive
 How pleasant is it to use the design? and interpret physical sensations, textures, and
temperatures
o Relevant for touchscreens and devices with
Accessibility
haptic feedback in interface design
- Is a quality of the product that allows people with a
diverse range of hearing, sight, and cognitive ability
issues to use the software.
Human Perception in HCI
- Perception in HCI refers to how we interpret and
interact with digital interfaces, like websites or apps. It
Accessibility Features involves understanding how users see and understand
Color-blind friendly Interactive tutorials information on screens, how they hear and respond to
sounds, and how they feel when they touch with other
Subtitles Speech recognition
devices.
Configurable controls Text-to-speech
High contrast Gestalt Perception
- Are rules of how our brains put things together when
we look at stuff. They help us group similar things, see
patterns, and make sense of complex pictures.
Designers use these rules to arrange content on
LESSON 2 websites making them look nice and understandable.
History of the GUI
Gestalt Principles of Perception
1. Figure-Ground Principle
Year Systems Evolution o People instinctively perceive objects as either being
1950s Batch processing in the foreground or the background.
1960s Command line interfaces (CLI) o Either stand out prominently in the front (the figure)
or recede into the back (the ground).
1980s Text user interfaces (TUI) 2. Similarity Principle
1983 Apple Lisa o When things appear to be similar to each other, we
1984 Apple Macintosh group them.
3. Proximity Principle
1985 Windows 1.0
o Things that are close together appear to be more
1987 Windows 2.0 related than things that are spaced farther apart.
1995 Windows 95 o Overrides the similarity of color, shape, and other
2001 Windows XP – Product activation factors that might differentiate a group of objects.
4. Continuity Principle
2012 Touch-screen UI to the desktop
o Elements that are arranged on a line or curve are
2015 Windows 10 perceived to be more related than elements not on
2021 Windows 11 the line or curve.
2022 macOS 12 Monetary 5. Closure Principle
o When we look at a complex arrangement of visual
elements, we tend to look for a single, recognizable
pattern.
6. Symmetry
o The law of symmetry captures the idea that when
we perceive objects we tend to perceive them as
symmetrical shapes that form around their center.
Typography
- Typography is the art of arranging letters and text in a
way that makes the copy legible, clear, and visually
appealing to the reader. Typography involves font
style, appearance, and structure, which aims to elicit
certain emotions and convey specific messages.
Critical Role of Typography in Conveying Information
1. Communication
 Typography is a fundamental aspect of written
communication.
 Helps convey the message, tone, and hierarchy of
information within a text.
2. Readability
 Typography significantly influences how easily readers
can consume and understand written content.
 Well-designed typography enhances readability,
making it more likely that readers will engage with the
text, absorb the information, and retain it.
3. Visual Hierarchy
 Typography is instrumental in establishing a visual
hierarchy within a text, indicating which parts are more
important or should be read first.
 This hierarchy guides readers through the content,
ensuring they focus on key information and understand
the context.
4. Aesthetics
 Typography contributes to the visual appeal and
aesthetics of a text.
 Evoke emotions, create a brand identity, and enhance
the overall visual experience.
5. Consistency
 Typography provides consistency within a document or
design project.
 Consistent typography choices, such as font selection
and formatting, help maintain a cohesive and
professional appearance throughout a publication or
website
LESSON 4
Color
Color
- Displays can significantly impact users' experiences
and task performance.
- The use of color transcended mere aesthetics and has
become an integral part of the way we interact with
technology and information.
Roles of Color in HCI
Visual Perception Feedback & validation
Aesthetic Design Accessibility
Emotional Impact Branding & Identity
Information Representation Cross-cultural Consideration
Navigating & Wayfinding
Color Palettes
- A color palette is a combination of colors used by ui
designers when designing an interface. When used
correctly, color palettes form the visual foundation of
your brand, help to maintain consistency, and make
your user interface aesthetically pleasing and
enjoyable to use.
Consistency
- Consistency in color usage throughout an application
or website enhances the overall user experience.
Users come to associate specific colors with certain
actions or elements, so consistency helps in reducing
confusion.
Significance of Color in HCI
- Color is a fundamental element in hci that can influence
users' emotions, behaviors, and overall experience. It
can convey information, guide users, and create visual
hierarchy.
LESSON 5
Graphic Design
Graphic Design
- A creative and dynamic area that plays an important
part in business, organization, and individual visual
communication.
- Are the people in charge of developing visual material
that communicates messages, engages audiences,
and strengthens brand identification.
Elements of Graphic Design
Line  Described as the building blocks of design,
lines can be continuous or broken, straight or
curved line, smooth or zigzag.
 Is a two dimensional are that is surrounded by
Shape
an outline. They can
 be geometric(circles, squares, triangles) or
organic(irregular, and freeform)
Form  Pertains to the way that a shape or physical
configuration occupies space.
 Texture is one of the elements of design that is
Texture
used to represent how an object appears or
feels.
Color  Color helps establish a mood for your
composition.
Space  Making proper use of space can help others
view your design as you intended.
Imagery  If an image is worth a thousand words, knowing
how to use them wisely will let you deliver the
message in a more effective way.
Typography  It involves the selection and arrangement of
typefaces (fonts), fonts size, spacing and
formatting text.
LESSON 6
Displays & Other Output Devices
Display
- Is the primary source of visual feedback to users from
the computer.
Types of Display Devices
 Large-wall Display
o A high-resolution LCD display
o Allows multiple users to observe and analyze a
large amount of information at the same time
 Tabletop (Horizontal) Display
o Generally equipped with multi-touch touchscreens
o Serves as a shared and public display where
changes affect all collaborators.
 Heads-up and Head-mounted Display
o A personal display technology that involves small
portable monitors, often made with LCDs in
monochrome or color.
o Heads-up Display - projects information on the
partially silvered windscreen of an airplane or car.
o Head-mounted - used in virtual reality (vr) or
augmented reality applications that let users see
information even while turning their heads.
Paper
- an essential tool that supports human activities across
numerous domains, from communication and
education to creativity and documentation.
- Its adaptability and accessibility have made it a
cornerstone of human civilization and productivity.
Output Devices 2. Pointing Devices
- A piece of computer hardware that receives data from  Control a cursor or pointer on a screen.
a computer and then translates that data into another  Can move and select text, icons, files, and folders
form. in a computer.

Projectors 3D Printers
Haptic Feedback Electronic Paper
Devices Displays
Braille Displays Voice Synthesizers

LESSON 7
Information Visualization

Information Visualization
- Information visualization in HCI is about using
computer programs to represent complex information 3. Voice Recognition Devices
or abstract concepts in a visual form. It often involves  Allow users to input voice into a computer system.
transforming data into meaningful insights.  Aim to produce text based on spoken input, which
can save time, aid users with physical
Types of Information Visualization impairments, or for hands-on tasks.
1. Cartogram
o a map showing geographically diagrammatic
statistics of various kinds usually by the use of
shades, curves, or dots
2. Heatmap
o a visual representation of data where values in a
matrix are depicted using a range of colors
3. Concept mapping
o a way to visually display the relationships between 4. Imaging and Video Devices
different concepts, ideas, and pieces of  Are peripheral devices that allows users to take
information visual input from the real world and transform it
4. Hyperbolic Tree into a digital form.
o a type of interactive visual representation used to  Aid in input, visual feedback and interaction, and
display hierarchical information or data in a accessibility.
circular, tree-like structure.
5. Multidimensional Scaling (MDS)
o a statistical technique that accurately represents
the similarity or dissimilarity between objects in a
lower-dimensional space, simplifying geometric
relationships and patterns in data, making analysis
Ergonomics
easier
- The science of how humans interact with their work
environment and the optimization of how we behave,
Importance of Information Visualization
think, and act.
- Information visualization helps us understand
- The term originated from ancient Greek, with “ergon”
complicated data quickly, making it easier to make
meaning work and "nomos" meaning laws; therefore, it
decisions and discover important things in the data.
means "Science of Work."

Types of Ergonomics
LESSON 8 1. Physical Ergonomics
Input Devices & Ergonomics  The study of how people interact with their
physical work environment.
Input Devices
- Hardware components or tools that allow users to input
data, information, or instructions to a computer.
- Facilitates communication between users and
computers.
- Assist users in entering human actions by converting
raw data into a format or language that the computer
understands.
2. Cognitive Ergonomics
Types of Input Devices  The study of how people interact with information.
1. Keyboard-based Devices  Aims to reduce error rates and increase
 The primary mode for text entry. productivity by ensuring that information is
 Allow users to input data into an electronic device presented in an understandable way.
by pressing physical or virtual keys.
3. Organizational Ergonomics
 The study of how people interact with their work
tasks and on optimizing relationships with
coworkers.
 Involve building systems that align with the
organization's goals, culture, and human
capabilities.
 LESSON 9 LESSON 10
Virtual Reality GOMS & KLM

Virtual Reality
- Is a simulated 3d environment that enables users to
explore and interact with a virtual surrounding in a way
that approximates reality, as it is experience through
the users’ senses.

Types of Virtual Reality

1. Non-Immersive Virtual Reality
 Is a type of virtual reality in which a user can
interact with a virtual environment through a
computer. But the virtual environment is not
directly interacting to the user.
 Video Game

2. Fully Immersive Virtual Reality

 Is the opposite of non-immersive. It ensures a
realistic virtual experience as its gives complete
perception of existing in another world.
 Virtual Gaming Zone

3. Semi-Immersive Virtual Reality

 In between non-immersive and fully immersive
virtual reality. By the use of screen/VR glasses
users can move around in the virtual environment
but no physical sensation to enhance the
experience.
 Flight Simulator

Applications of Virtual Reality

1. Gaming
 Immerses players in digital worlds for interactive
gaming experiences

2. Healthcare
 Used in the medical field for training surgeons
and visualizing complex medical procedures.

3. Education
 Designed to enhance learning experiences by
creating immersive educational environments.

4. Training & Simulation

 Used for simulating real-world scenarios and
training purposes (ex: military)

5. Architecture & Design

 An application that allows architects and
designers to create and visualize 3d models of
buildings and spaces.

6. Tourism
 Application that offers virtual tours of destinations
and attractions.

Hardware Use in Virtual Reality

 Benefits in Using Metaphor
1. Familiarity
 Metaphors leverage users' pre-existing knowledge
and mental models, making the technology feel
less foreign.
2. Ease of Use
 Metaphors simplify the interaction process,
reducing the need for extensive training or
complex instructions.
3. Increased Engagement
 Familiar metaphors can make users more
comfortable and engaged with technology,
potentially leading to increased adoption and
usage.

Challenges of Using Metaphors

1. Metaphor Limitation
 Metaphors may not always perfectly align with the
digital concepts they represent, leading to
limitations or confusion.

2. Evolution of Technology
 metaphors may become less relevant or require
adaptation to accommodate new features and
functionalities.

3. Cultural Variations
 Some metaphors may not be universally
understandable, as they can be influenced by
cultural or generational differences.

4. Evolution of Metaphors
 HCI designers must continually assess the
effectiveness of metaphors in their designs

LESSON 12
Direct Manipulation

Direct Manipulation
- a user interface style where users interact with digital
objects or actions through direct physical manipulation
rather than through intermediary interfaces such as a
command line or menus.
LESSON 11 - Direct Manipulation Interfaces - designed to be
Metaphor intuitive and user-friendly, allowing users to directly
engage with the digital environment in a way that
resembles how they interact with the physical world.
Metaphor
- A design concept or technique that leverages familiar,
real-world concepts or experiences to make digital
Key Principles of User Control
interfaces and interactions more intuitive and user- 1. Visibility of the Object
friendly. 2. Rapid, Incremental, and Reversible Action
3. Incorporation of Physical Actions
4. Exploration
Common Metaphors in HCI
1. Desktop Metaphor
 One of the most iconic metaphors in HCI Advantages of Direct Manipulation
 represents the computer screen as a physical  Intuitiveness
desktop  Immediate Feedback
 Reduce Learning Curve
2. Document Metaphor  Error Prevention and Recovery
 Makes digital content resemble physical  Increased User Engagement
documents, allowing users to create, edit, and  Enhance Accessibility
organize digital files as if they were working with  Natural Interaction
paper documents.  Efficiency

3. File Folder Metaphor Challenges in Direct Manipulation

 Uses the metaphor of physical file folders and  Complexity
cabinets to organize digital files.  Limited Screen Space
 Physical Limitation
4. Dialog Metaphor  Discoverability
 Makes digital interactions resemble  Consistency
conversations, where users engage in a back-and-  Overreliance
forth exchange with the computer system, much  Privacy Concern
like a conversation between humans.  Development Complexity
 LESSON 13
Widget Survey
Widget Survey
- A structured process of collecting feedback and data
from users, typically in the form of questions or
inquiries, to gain insights into their preferences,
opinions, and experiences related to widgets or similar
products.
Roles of Command Languages
1. System Administration and Management
 Command languages are essential for system
administrators to manage and maintain computer
systems.
2. File and Directory Management
 Command languages provide powerful tools for
creating, moving, copying, deleting, and
manipulating files and directories.

Widget 3. Scripting and Automation

- A small software application or component that can be  Command languages allow users to write scripts
embedded within a website, application, or user or batch files to automate repetitive tasks.
interface to perform a specific function. (e.g weather
widgets, social media sharing widgets, survey 4. Software Installation and Management
widgets).  Many package managers and software installation
tools use command-line interfaces to download,
Usability of Widget Survey install, and update software packages.
 User-Friendly Interface
 Clear and Concise Questions 5. Database Management
 Visual Appeal  Command languages like SQL are used to interact
 Mobile Responsiveness with relational databases.
 Progress Indicators
 Error Handling Parts of Command Languages
 Accessibility 1. Keywords and Commands
 Response Validation 2. Variables and Data Types - Data Types
 Progress Saving 3. Syntax
4. Flow Control and Branching
Types and Design of Widget Survey
Online Polls Mobile App Surveys

Charts and Graphs Customer Feedback Forms

Feedback Buttons Email Surveys

LESSON 15
Purpose of Widget Survey
- Gain insights into customer preferences, market
Other Interaction Styles
trends, and data-driven decision-making to enhance
product competitiveness, meet rapidly changing Interaction Style
customer demands, and ultimately improve the overall - is how the computer and the user interact through
customer experience. various techniques.

Types of Interaction Styles

1. QUESTION/ANSWER & QUERY DIALOG
 A user interface in which the computer poses a
series of questions and the user responds with
answers
LESSON 14
2. FORM-FILLS AND SPREADSHEETS
Command Languages  Form-filling interfaces are used primarily for data
entry but can also be useful in data retrieval
Command Languages applications. The user is presented with a display
- Type of computer language used for interacting with resembling a paper form, with slots to fill in.
computer systems and software applications by issuing
text-based commands. 3. POINT AND CLICK INTERFACE
 A graphical user interface where an action is
Types of Command Languages selected by placing a cursor over its depiction on
1. Scripting Languages the display using a pointing device, and is then
 a type of programming language that is interpreted initiated by clicking.
and used for creating scripts or small programs
that automate tasks. 4. WIMP INTERFACE
2. System Command Languages  Windows, icons, menus and pointing device
 are part of the operating system and are used for (WIMP) denotes a style of computer-human
system-related tasks. interaction involving the aforementioned elements
3. Database Command Language of the graphical user interface (GUI) which is the
 used to interact with relational database most common interaction method being used by
management systems (RDBMS) and execute desktop computers.
query languages that allow users to interact with
and manipulate the data stored in the database. 5. 3D INTERFACE
4. Text Processing Language  The three-dimensional user interface is a human-
 used for text manipulation, filtering, and computer interaction that users can directly carry
transformation. It is commonly used for tasks like out the tasks in the 3D space. Its visual angle is
finding specific words in a document, replacing like a free camera angle lens, which users can
text, counting characters, and more. self-control the direction of visual angle
 LESSON 16 LESSON 17
Mindset Subject-Running Techniques

Mindset Subject Running Technique

- A habitual or characteristic mental attitude that
determines how you will interpret and respond to
situations.
Tinkering
- has its time and place in fields such as engineering,
design, and science, whose focus is developing and
refining new ideas.
Types of Mindset
1. Fixed Mindset - Individuals with a fixed mindset tend
to believe that their abilities, intelligence, and talents
are innate and unchangeable.
2. Growth Mindset - believe that their abilities can be
developed and expanded through effort, learning, and
perseverance
- a user research method in which the researcher
observes and interacts with a user as they perform a
task using a computer system or other interactive
device
Benefits:
 Subject-running technique allows the researcher to
observe the user directly and to see how they interact
with the system in real time.
 The researcher can ask the user questions about their
experience as they go, which can help to identify
usability problems and to understand the user's
perspective.
 Subject-running technique is a relatively flexible
method, and can be used to study a wide range of
tasks and systems.

Mental Model
- A mental model is what a user believes about a system.
Empathy Map
- Is a collaborative visualization used to articulate what
we know about a particular type of user. It externalizes
knowledge about users in order to:
o create a shared understanding of user needs, and
o aid in decision-making.
Drawbacks:
 Subject-running technique can be time-consuming and
labor-intensive.
 It is important to recruit the right participants for the
study, and to design the tasks carefully in order to
generate reliable and trustworthy results.
 Subject-running technique can be affected by the
researcher's own biases and expectations.

Parts of Empathy Map Steps in conducting a subject-running study:

1. Recruit Participants
2. Design the tasks
3. Prepare the Environment
4. Conduct the Study
5. Analyze the Data

1. Says LESSON 18
 Ideally, it contains verbatim and direct quotes
from research.
Usability Studies
2. Thinks
 Captures what the user is thinking throughout the Usability and User Experience (UX)
experience. Usability
3. Does o focuses on the practical aspects of ease, efficiency,
 Encloses the actions the user takes. and effectiveness when using a product.
4. Feels o a component of UX, addressing the functional aspects
 Is the user’s emotional state
User Experience (UX)
Principles of a Good Mindset o encompasses the overall emotional satisfaction, joy,
and value that users derive from their interactions with
a brand or its products.
Empathy Prototype o encompasses a broader, emotional, and holistic
perspective.
Define Testing

Ideate Implementation Elements in Design Usability

 Effectiveness
Optimization
 Efficiency
 Engagement
 Error Tolerance
Relevance in HCi  Ease of Learning
1. Leadership
2. Collaboration
3. Conflict Resolution
4. Communicaton
 LESSON 19
Error Handling & Error Prevention
Error Handling
- Error handling is the process of identifying, managing,
and resolving errors or exceptional situations that
occur in software, hardware, or systems. It ensures
that the system can recover gracefully from errors
without causing catastrophic failures, enhancing
overall reliability.
Types of Error Handling
Error Prevention
- Error prevention involves strategies and design
principles to reduce or eliminate the likelihood of errors
occurring in systems, software, or hardware. It focuses
on designing systems that are less prone to errors from
the outset.
Types of Error Prevention
Examples of Error Prevention
LESSON 20
Cognitive Walkthrough
Cognitive Walkthrough
- a usability evaluation method in which one or more
evaluators work through a series of tasks and ask a set
of questions from the perspective of the user.
Advantages of Cognitive WalkThrough
 Can be conducted without direct user access.
 Provides insights for improving system learnability.
 Applicable at any development phase.
 Explicitly considers the user's task.
 Quick and cost-effective if streamlined.
Advantages of Cognitive WalkThrough
 Can be conducted without direct user access.
 Provides insights for improving system learnability.
 Applicable at any development phase.
 Explicitly considers the user's task.
 Quick and cost-effective if streamlined.
Identifying User Issues
 Record success and failure at each step.
 Encourage participants to think aloud.
 Analyze data for common issues.
 Use open-ended questions for detailed feedback. 5.
Consider the user's perspective to spot challenges
early.
8 Design Principles for an Effective Cognitive Walkthrough
 Make actions visible
 Use clear labels.
 Use system responses for progress.
 Provide an undo option.
 Make actions distinguishable.
 Limit alternatives.
 Minimize hard-to-understand actions. 8. Minimize
required choices.
LESSON 21
Heuristic Evaluation
Heuristic Evaluation
- a usability inspection method that involves expert
evaluators examining an interface based on a set of
predefined heuristics or principles.
- involves evaluating an interface's usability against a set
of established principles or heuristics that focus on
user experience and efficient interaction.
Benefits of Heuristic Evaluation
 Identify Usability Issues Early
 Cost-Effective
 Improve User Satisfaction
Process of Conducting a Heuristic Evaluation
 Select Heuristics
 Review Interface
 Compile and Prioritize Issues
 Recommend Improvements
Common Usability Issues Identified with Heuristic
Evaluation
 Inconsistent Navigation
 Confusing Terminology
 Poor Feedback
 Cluttered Layout
Case Studies of Successful Heuristic Evaluations
 Product Launch
 Website Redesign Project
 Conversion Rate Optimization
 LESSON 22 LESSON 23
Usability Guidelines Choosing Among Usability Methods

Usability Guidelines Four Usability Methods

- refers to the extent to which a system or interface can Usability Testing
be used by its intended users to achieve their goals  involves observing real users as they interact with a
efficiently and effectively while providing a satisfactory product to identify usability issues
user experience.  allows you to identify usability issues by observing
users' actions, expressions, and feedback.
Principles of Usability  useful when you want to pinpoint specific usability
Learnability issues through direct user interaction.
Efficiency
Memorability Heuristic Evaluation
Error Prevention and Recovery  Experts evaluate your product against established
User Satisfaction usability heuristics or principles.
 is like having usability experts scrutinize your product.
Understanding Usability Guidelines  valuable for identifying usability issues quickly and
- is crucial cost-effectively, especially in the early stages of
- Ignoring these guidelines may lead to an ineffective design.
site, costing you time, money, and potential customers.
- Learning these guidelines early can save you money
and frustration. Cognitive WalkThrough
 focuses on how easily users can learn your product,
Design Process and Evaluation examining each step of user interaction based on their
- prioritize useful content and gather user feedback. goals.
 involves step-by-step evaluation, considering users'
1. Optimizing the User Experience goals, and examining each interaction.
2. Accessibility  useful when you want to evaluate how easily users can
3. Hardware and Software - ensure website compatibility learn to use a system.
with popular browsers and operating systems
4. The Home Page - is crucial as it's the first impression Surveys and Questionnaires
visitors get.  are like conversations with your users on a massive
5. Page Layout scale.
6. Navigation  collect feedback, opinions, and subjective data on user
7. Scrolling and Paging satisfaction and preferences.
8. Headings, Titles, and Labels  suitable when you need to collect large amounts of
9. Links feedback from a diverse user base
10. Text Appearance
11. Lists
12. Screen-Based Controls (Widgets)
13. Graphis, Images, and Multimedia
14. Writing Web Content
15. Content Organization
16. Search
17. Usability Testing

The Role of Guidance in HCI Design and Evaluation

1. Consistency
2. Best Practices
3. Efficiency
4. User-Centered Design

Importance of Usability Testing

- a critical step in the design and development process,
ensuring that interfaces meet the usability standards
and guidelines discussed earlier.

 Identify User Pain Points

 Validate Design Decisions
 Iterate and Improve
 Prevent Costly Mistakes
 Lab-Based Testing
 Remote Usability Testing
 Heuristic Evolution
 Cognitive WalkThrough
 A/B Testing
 Eye Tracking