Human-Computer Interaction (HCI)

Def: Human-Computer Interaction (HCI) is a multidisciplinary field that studies the design and use
of computer technology and focuses on the interfaces between people and computers. At its core,
HCI aims to make technology more user-friendly, efficient, and accessible for everyone.

HCI stands for Human-Computer Interaction. It is a multidisciplinary field that focuses

on the design, evaluation, and implementation of interactive computing systems for human
use. The core goal of HCI is to improve the relationship between people and technology,
making computer systems more user-friendly, efficient, and accessible.

History
 Early computers was extremely difficult to use, it was large and expensive. It
was used by specialists or engineers.
 ENIAC (Electronic Numerical Integrator And Computer) was released
in 1945. It was the first programmable electronic and general purpose digital
computer.
 In mid 1960's command line interface(CLI) was used to interact with
computer. CLI are light weight and requires few memory consumption.
 1980's are the booming phase for HCI. Some of the market leaders like Apple
and Microsoft plays a crucial role for the modern development of HCI. GUI
(Graphic User Interface) application was created that was easy to use,
understand and visualize.
 XEROX STAR was released in 1981. It had mouse driven graphical user
interface and built-in ethernet network and protocol. It also had laser printer.
This was considered far ahead of its time. Two years later in 1983 Apple Lisa
was released, it offered document-centered graphical interface based on the
metaphor of desktop.
 In 1984 first Macintosh was release and it was revolutionary. It had
good graphic user interface and a variety of fonts that makes your document
more appealing to readers.
 In 1990's internet starts it's journey. Communication between people become
very easy through social networking like Email. The World Wide
Web(WWW) was created by Tim Berners-Lee. It is way for people to share
information.
 In 2000 mobile, laptop, tablet was a buzz word in this period. These gadget
provides more flexibility to user. User can connect with anyone at any
place. Smart phones comes into picture. User don't need any mouse or
pointing device to select anything. They can use their fingers to interact with
device. It provides more features like built-in music player, camera, weather
forecast, Internet, GPS, games, video conferencing and many more.
 Windows 10 is a series of operating systems developed by Microsoft released
in 2015. It made user experience more consistent between different classes of
device. The rising popularity and availability of laptops and computer
systems, Microsoft made windows 10 adaptable into different systems.
 VR oculus rift was a revolution in virtual reality. It was launched in 2016.
The rift is primarily a gaming device. However it is also capable of viewing
conventional movies and videos from inside the virtual cinema environment.
It is increasingly used in universities and schools as an educational tool.

1.1 Core Components

HCI considers the interaction between three key components:

1. The User: The human at the center of the interaction. HCI takes into account
cognitive, physical, and emotional factors to understand how people think, what they
need, and what they are capable of.
2. The Computer/System: This refers to the technology itself, whether it's a
smartphone, a website, a video game, or a complex industrial control system. HCI
looks at how the technology is designed and how it functions.
3. The Interaction/Interface: This is the bridge between the user and the computer. It
can be a graphical user interface (GUI), a touch screen, a voice command system, or
gesture-based controls. A well-designed interface is the key to a good user experience.

1.2 Key Principles of HCI

To create effective and user-friendly technology, HCI follows several guiding principles:

 Usability: The system should be easy to learn and use, and it should be efficient for
users to accomplish their tasks.
 Consistency: Similar elements and actions should behave in the same way throughout
the system to reduce the learning curve.
 Feedback: The system should provide timely and clear feedback to the user's actions,
so they know what is happening.
 Visibility: The system's status and available actions should be easily visible to the
user.
  Error Prevention and Recovery: The interface should be designed to prevent users
from making mistakes and, if an error does occur, allow for easy recovery.

Everyday Examples of HCI

HCI is not a separate technology; it is the underlying philosophy that shapes how we interact
with nearly every digital device. Examples include:

 Smartphones: The intuitive touch-and-swipe gestures, the layout of app icons, and
the voice-controlled assistants (like Siri or Google Assistant) are all products of HCI
design.
 E-commerce Websites: The clear navigation, personalized recommendations, and a
streamlined checkout process on sites like Amazon are designed to make shopping
easy and efficient.
 Video Games: The user interface (UI) and heads-up display (HUD) in games, along
with the design of controllers and virtual reality systems, are all carefully crafted to
create an immersive and intuitive experience.
 GPS Navigation Systems: The visual and auditory cues that guide you to a
destination are a result of HCI research to minimize distraction and improve safety for
drivers.
1.3 Human-Computer Interaction (HCI) is highly
interdisciplinary fields
It's not a single field of study but rather a convergence of various disciplines that all contribute to the
design, evaluation, and implementation of user-friendly technology.
Why is HCI Interdisciplinary?

To create technology that humans can use effectively and enjoyably, you have to understand
both the "human" and "computer" sides of the equation. This requires expertise from different
areas. The computer side deals with the technology itself, while the human side is concerned
with a user's physical, cognitive, and social needs.

Key Disciplines in HCI

HCI draws from a wide range of fields, including:

 1.4 Human-Computer Interaction (HCI) scope
Human-Computer Interaction (HCI) has a broad scope, encompassing the study,
design, and evaluation of interactive systems to improve the user experience.

Key Aspects of HCI's Scope:

 Design and Evaluation:
HCI focuses on designing and evaluating user interfaces and interactions to ensure they are
intuitive, efficient, and enjoyable.
 User-Centered Approach:
A core principle of HCI is to prioritize the user's needs and preferences in the design
process.
 Multidisciplinary Nature:
HCI draws from various fields like psychology, design, computer science, and ergonomics
to understand and address the complexities of human-computer interaction.
 Diverse Technologies:
HCI's scope covers a wide range of technologies, including smartphones, wearable devices,
virtual and augmented reality, and the Internet of Things.
 Industry Applications:
HCI is relevant in various industries, including healthcare, education, entertainment, and e-
commerce, where intuitive interfaces enhance user experience and productivity.

 Future Trends:
HCI is actively involved in the development of new technologies like AI, AR/VR, and
ubiquitous computing, shaping the future of human-computer interaction.
 Ethical Considerations:
With the increasing use of AI, HCI is also addressing ethical concerns related to fairness,
transparency, and accountability in AI-driven interfaces.
 Accessibility:
HCI research is crucial in developing accessible interfaces for users with disabilities,
ensuring that technology is inclusive and usable by everyone.
 User Experience (UX):
While HCI is a broader field, it also encompasses UX design, which focuses on the
practical aspects of how users experience technology.
1.5 HCI GOALS:

The primary goal of Human-Computer Interaction (HCI) is to create user-friendly, effective,

and safe systems. This overarching goal can be broken down into two main categories:
usability goals and user experience goals. While usability focuses on the practical efficiency
of a system, user experience goals are concerned with the overall feeling and perception of
using it.

1. Usability Goals: The "Is it functional?" question 🛠️

Usability goals are pragmatic and measurable. They are about how well a user can perform a
task with a system. The key usability goals are:

 Effectiveness: Does the system do what it's supposed to do? This goal measures how
accurately and completely users can achieve their intended tasks. For example, can a
user successfully book a flight on a travel website?
 Efficiency: How quickly and easily can a user achieve a task? This goal is concerned
with minimizing the time and effort required to complete a task. A well-designed
system allows users to work productively with minimal wasted steps.
  Learnability: How easy is it for a new user to figure out the system? A system with
high learnability doesn't require extensive training or manuals; its functionality is
intuitive and easy to grasp. .
 Memorability: How easy is it for a user to remember how to use the system after a
period of not using it? Good memorability ensures that returning users don't have to
re-learn everything.
 Safety: Does the system protect the user from making serious errors and allow for
easy recovery if they do? This goal is crucial for preventing costly mistakes and
ensuring user confidence.

2. User Experience Goals: The "How does it feel?" question 😄

These goals are more subjective and are about the emotional and aesthetic aspects of the
interaction. They aim to create a positive and satisfying experience for the user.

 Satisfaction: This is a broad goal that encompasses how pleasant, enjoyable, and
rewarding the system is to use. A satisfied user is more likely to continue using the
product and recommend it to others.
 Engagement: Does the system hold the user's attention and encourage them to
interact? An engaging interface is captivating and motivates users to explore its
features.
 Utility: Does the system provide the right functionality to meet the user's needs? A
system with good utility offers all the features a user would expect to accomplish their
task.
 Accessibility: Can people with diverse abilities and backgrounds use the system?
This is a critical goal for creating inclusive technology, ensuring that people with
visual, hearing, or motor impairments can interact with the system effectively.
 Aesthetics: Is the system visually appealing? A clean, organized, and aesthetically
pleasing design can make a system more enjoyable and trustworthy.

1.6 Benefits of HCI:

 Improved User Experience:
HCI principles help create interfaces that are intuitive, engaging, and easy to navigate,
leading to a more positive user experience.
 Increased Customer Satisfaction:
When users can easily understand and interact with technology, they are more likely to be
satisfied with the product or service, leading to repeat business and customer loyalty.
 Greater Innovation:
 By focusing on user needs and behaviors, HCI encourages the development of new and
innovative technologies that better meet user demands.

 Enhanced Accessibility:
HCI principles promote the design of systems that are usable by people with diverse
abilities, including those with disabilities, ensuring inclusivity and equal access to
technology.
 Boosted User Engagement:
Intuitive and user-friendly interfaces increase user engagement and encourage continued
use of applications.
 Increased Productivity:
HCI design can lead to more efficient task completion and reduced errors, ultimately
boosting user productivity.

1.7 Functionalities of HCI:

 Understanding User Needs:

HCI involves researching and understanding user behaviors, goals, and limitations to
inform the design process.
 Designing User Interfaces:
HCI focuses on creating interfaces that are visually appealing, easy to understand, and
efficient for users to interact with.
 Evaluating Interaction Effectiveness:
HCI principles are used to evaluate the usability and effectiveness of interfaces through
various methods, such as usability testing.
 Iterative Design:
HCI emphasizes an iterative design process, where feedback from users is incorporated to
continuously improve the design and functionality of the system.
 Multimodal Interfaces:
HCI explores the use of multiple input and output methods, such as voice, gesture, and
touch, to create more natural and engaging interactions.
 Ethical Considerations:
HCI also addresses the ethical implications of technology, including issues of privacy, well-
being, and the potential for addictive design patterns.
1.8 People involve in HCI Business
 1.9 Principles of Human Computer Interaction

1. Principles of HCI Design

1. Visibility: Users should be able to see the system's current state and understand
what actions are available to them.
 Example: A progress bar during a software installation visually indicates the progress of the
process.
2. Feedback: The system should provide clear and timely feedback to the user
after each action.
 Example: When a button is clicked, it should visually change or provide an audible click to
confirm the action.
3. Consistency: Maintaining a consistent design throughout the interface reduces
confusion and makes it easier for users to learn and adapt.
 Example: Using the same icons and layout for similar functions across different screens of
an application.
4. Simplicity: The interface should be straightforward and easy to understand,
minimizing cognitive load.
 Example: A clear and concise search bar on a website allows users to quickly find
information without unnecessary complexity.
5. Affordance: The design should suggest how users can interact with elements.
 Example: A button should look like it can be pressed, with visual cues like shadows or
bevels.
6. User Control and Freedom: Users should be able to easily undo actions or
recover from errors.
 Example: A well-placed "undo" button or the ability to exit a process without saving
changes.
7. Match between System and the Real World: Use language and concepts that
are familiar to the user, rather than technical jargon.
 Example: Using a "trash can" icon for deleting files instead of a less intuitive symbol.
8. Error Prevention and Handling: Design the system to prevent errors from
occurring in the first place, and provide clear error messages when they do occur.
 Example: Using a calendar widget to prevent users from entering an invalid date.
9. Recognition rather than Recall: Reduce the user's memory load by making
options and actions visible.
 Example: Displaying a list of available options instead of requiring the user to remember
them.
10. Flexibility and Efficiency of Use: Allow experienced users to work more
quickly with shortcuts or other advanced features.
 Example: Keyboard shortcuts or macros that allow experienced users to perform common
tasks more efficiently.

2.
1.11 User Centered Design (UCD) Process with Examples

User-Centered Design (UCD) is an iterative process that focuses on understanding the user's
needs, goals, and limitations at every stage of the design process. It ensures the final product
is both useful and usable for its intended audience.

The UCD Process ⚙️

The UCD process is cyclical and can be broken down into four key phases:

1. Understand and Specify Context of Use

In this initial phase, the design team gets to know the users and their environment. This is
about discovering who the users are, what they do, and why they use the product.

 Activities: Conduct user interviews, surveys, and observational studies (e.g., watching
users perform tasks in their natural environment).
 Example: A team designing a mobile banking app would interview people about how
they currently manage their finances, what frustrates them about existing apps, and
what features they would find most useful.

2. Specify User Requirements

Based on the data collected in the first phase, the team defines the specific requirements the
product must meet to satisfy user needs.
  Activities: Create user personas (fictional characters representing typical users), user
stories (simple descriptions of features from the user's perspective), and use cases
(scenarios describing how a user might interact with the system).
 Example: From the banking app research, the team might create a persona for "Sarah,
the Student" and write a user story like, "As Sarah, I want to quickly check my
balance so I can make sure I have enough money for my coffee."

3. Design Solutions

This is the creative phase where designers develop solutions that meet the user requirements.
This phase involves both low-fidelity and high-fidelity design work.

 Activities: Sketching ideas, creating wireframes (basic layouts of the interface), and
building prototypes (interactive models of the final product). The design is not set in
stone; it's a draft that will be tested and refined.
 Example: The design team creates wireframes for the banking app's home screen,
ensuring the balance is clearly visible and accessible with minimal taps, directly
addressing Sarah's user story.

Why UCD is a Cycle 🔄

The UCD process is iterative, meaning it's a cycle, not a one-time event. The feedback from
the "Evaluate" phase feeds directly back into the "Understand" or "Design" phases. If the
evaluation reveals a flaw, the team goes back to the drawing board, revises the design, and
tests it again. This continuous loop of design and testing ensures the final product is highly
refined and genuinely meets user needs.

1.12 Advantages and Disadvantages of UCD.

CHAPTER-2 USER INTERFACE
Def:
A User Interface (UI) is the point of interaction and communication between a human user and a
machine, such as a computer, software application, or electronic device. It includes everything a user
uses to interact with a system and everything the system uses to communicate back to the user.

Its primary goal is to allow the user to operate and control the machine easily, efficiently, and
enjoyably (user-friendly). it includes buttons,menus,icons,layout,navigation etc

 it acts as a bridge between the user and the system.

importance of ui:
 a clean and attractive UI creates a positive first impression
 good ui increases chances of user engagement and retention
 it makes the system easy to learn and use.
 it reduces confusion and error.
 a well designed ui helps users complete tasks faster and more efficiently.
 it increases productivity and user satisfaction
 a professional UI reflects a quality brand
 examples:Instagram: simple clean,UI-it helps users engaged.
  google search:it is a simple UI which delivers results fast.

 atm machines: uI designed for quick and eroor free transactions

 a great UI can Make the success of a system or app or website.

Components of a User Interface

A UI is built from various elements that enable interaction. These elements are generally
categorized by their function:

 Input Controls: Elements that allow a user to enter information or trigger an action.
o Examples: Buttons, text fields, checkboxes, dropdown menus, toggles, and
radio buttons.
 Navigational Components: Elements that help a user move around the interface.
o Examples: Tabs, icons, search fields, navigation menus, and breadcrumbs.
 Informational Components (Feedback): Elements that communicate information or
a system's status back to the user.
o Examples: Progress bars, notifications, message boxes, tooltips, and
confirmation messages.
 Containers/Organizational Components: Elements that organize and group related
content into logical, digestible sections.
o Examples: Windows, accordions, cards, and sidebars.

Types of User Interfaces

While many devices use a combination of these, the following are the most common types:

Type Description Example

Users interact with visual representations like icons,

Graphical User Desktop operating systems,
buttons, menus, and windows. This is the most
Interface (GUI) mobile apps, and websites.
common type for modern computing.

The Command Prompt

Command-Line Users interact with the system by typing textual
(Windows) or Terminal
Interface (CLI) commands and receiving text-based output.
(macOS/Linux).

Users interact with the system using spoken

Voice User Virtual assistants like Siri,
language, which the system processes using speech
Interface (VUI) Alexa, or Google Assistant.
recognition.

Smartphone or tablet
Touch User Designed for interaction via physical contact with a
touchscreens, and some ATM
Interface (TUI) display, incorporating touch-based gestures.
screens.
importance of good design:
1)attracts user

visually appealing design grabs user attention and builds interest.

first impression is often based on design

2)improves usability

a good design improves user interface

a good UI makes users to user it effectively
if helps users complete tasks efficiently with less effort

3)enhances user experience(UX)

a good UI imporves UX-user experience
reduces frcistration and increses user retention.

4)supports band identity

consistent design across platforms build a strong brand image

colors,font and layout become part of brand recognition

example:
apple products:-knows for clean,user centric design
google maps-simple get powerful interface for navigation
canva--easy drag and drop design for non-designers

benifits of good design

 it makes the product easy and enjoyable to use.

 reduces user frustration and confusion
 higher customer satisfaction
 it boosts brand image
 it enhance user experience
 better accessibility
 it encourages user loyality
 clear communication
 it reduces confusion and errors.
 it makes users to complete their task faster
 it increases/enhance user satisfaction

brief history of screen design

 1980--graphical user interface[gui]
 in1980,introduced windows, icons, menus and pointers
 made computers more user friendly
 mouse wad introduced for easier navigation
 ex:apple macintosh,windows 1.0

1990's web and desktop UI

 web and desktop UI has evolved.
 html and css started influencing screen design

2000's mobile UI&TouchScreens

 introduction of smart phones and tablets

 focus on touch based interfacea.

 need for responsible design across screen sizes

ex:iphone(2007)

2010: flat design and material desin

in 2010-it shifted towards minimaliism and simplicity
 google intruoduce material design

2020's voice, gesture and AI driven UI

 rise of voice assistants (siri,alexa)
o ai based personalization
 the graphical user interface(GUI) popularity
 gui allows users to interact with computers using visual elements
 ex:windows,icons,menus,pointers

popularity of graphics
a)User Friendely:
 easier for non-technical users to interact,
 no need to remember complex commands

mouse &&Touch support

 GUI made full use of pointing devices like the mouse and touchscreens

visual clarity:
 information-is organized and displayed visually ->icons,buttons,layouts

users will simply understand and easy to use.

 benefits of gui
1)quick navigation
better accessibility
makes apps more engaging and modern
makes tasks easier and faster
enhances user satisfaction and usability

2)direct manipulation:

 a style of interaction where users intract directly with on scrren objects

 actions are performed through touch,drag,click

graphical system

 a graphical system uses a graphical user interface(GUI)to allow users to interact with
computers visually
 users intract through icons,windows,menus,buttons and images instead of text
commands

ex:windows,macos,android,web browser etc..

key characteristics of a graphical system.

direct manipulation :
 users can click,drag,resize and more graphical elements
 provides immediate visual feedback

multi-tasking environment:

 multiple windows can be open and active at once.

 supports easy switching between tasks

user-friendly interface
 it is designed for all types of users including non-technical people
 easyb to learn and use.

event-driven interaction
 actions are based on user events like clicks, taps or gestures.
 system responds in real-time.
advantages:
 improves usability and accessibility
 reduces learning work for new users
 makes complex tasks visually manageable
 encourages exploration and interactivity.

web user interface:

The Web User Interface (Web UI) in the context of Human-Computer Interaction (HCI) is
the space, visible within a web browser, where users interact with a website or web
application. It encompasses all the visual and interactive elements—like buttons, menus,
icons, text, and layout—that enable a person to input information, navigate, and receive
feedback from the computer system to accomplish a goal.

HCI is the academic field concerned with the design, evaluation, and implementation of
interactive computing systems for human use, and it provides the foundational principles
for creating a highly usable, efficient, and enjoyable Web UI.

Key Characteristics of Web User Interfaces

Web UIs have distinct characteristics, largely driven by the environment (the internet and a
browser) and the diverse range of users and devices.

 Platform and Device Diversity 📱💻: Unlike traditional desktop applications that
targeted a known monitor size and operating system, a Web UI must be responsive
and function correctly across a vast array of devices (desktops, tablets, phones) and
browsers.
 Information-Centric Focus: Web interfaces often prioritize browsing and navigating
through large, unstructured amounts of hyperlinked information, whereas older
GUIs (Graphical User Interfaces) were more focused on specific, well-defined tasks
within an application.
 Non-Linear Navigation: The use of hypertext allows users to jump across pages and
websites in a non-linear fashion, which makes a clear and intuitive navigation
structure paramount to prevent users from getting lost.
 Data Reliability 🤔: The web often presents information from unknown sources,
which can make the reliability and truthfulness of the data a concern, unlike data
from internal, trusted organizational systems.
 Multifaceted Components: A Web UI is typically composed of:
o Input Controls: Buttons, text fields, checkboxes.
o Navigational Elements: Links, search fields, menus, breadcrumbs.
o Informational Components: Progress bars, notifications, message boxes.
HCI Principles for Web Design

HCI principles are the guidelines designers follow to maximize the usability and overall User
Experience (UX) of the web interface.

HCI Principle Application in Web Design

Use the same visual style, terminology, and interaction patterns (e.g.,
Consistency
button placement, link colors) throughout the entire website.

Controls and information must be clearly visible (e.g., clear labeling, high
Visibility & contrast). The system should provide immediate feedback for user
Feedback actions (e.g., a progress bar for a file upload, a visual change on a clicked
button).

Design for all users, including those with disabilities. This includes using
Accessibility proper color contrast, keyboard navigation, text alternatives for images,
and responsive design.

Reduce clutter and cognitive load. The design should convey information
Clarity and
clearly and concisely, prioritizing essential elements to direct the user's
Simplicity
focus.

The appearance of an interface element should suggest its function. For

Affordance
instance, a button should look clickable.

Design the interface to prevent common errors (e.g., asking for

Error Prevention confirmation before a destructive action). If an error occurs, the system
& Recovery should offer clear, helpful messages and an obvious way to recover (e.g.,
an undo button).

Give users a clear path to exit an unwanted state (e.g., a clearly labeled
User Control and
'Cancel' button) and support their internal models of how the system
Freedom
works.

Challenges in Web UI Design for HCI

Designing a successful Web UI presents unique challenges that directly relate to HCI:

 Diverse User Base: Websites are used by people of all ages, technical skills, physical
abilities, and cultural backgrounds. Designers must address this broad range of needs
to ensure inclusivity and accessibility.
 Balancing Aesthetics and Usability: Achieving a visually appealing, engaging design
while strictly adhering to usability standards (like sufficient color contrast for
accessibility or simple navigation) can be a difficult trade-off.
 Technological Limitations and Evolution: The rapid pace of technology means
designers constantly face issues of compatibility and interoperability across new
devices, operating systems, and browsers while striving to maintain standards and
performance.
 Performance and Load Times: Despite rich content (images, videos), the interface
must load quickly. Slow-loading pages are a major source of user frustration and a
critical failure in HCI.
 Information Overload: Webpages often contain dense, complex information. The
challenge is to structure content with clear information architecture and navigation
to prevent users from feeling lost or overwhelmed.