HUMAN-COMPUTER INTERACTION

HISTORY

INTRODUCTION AND FUNDAMENTALS OF HCI

BASIC HCI SUBJECTS

RESEARCH FIELDS IN HCI

DISCIPLINES CONTRIBUTING TO HCI

THREE PARTS OF HCI

INTERACTION METAPHORS

DEFINITION AND ATTRIBUTES OF USABILITY

DIFFERENT ISSUES IN DESIGN CONSIDERING USER-CENTER UI DESIGN

HUMAN-COMPUTER INTERACTION

 is the field of study that focuses on optimizing how users and computers interact
by designing interactive computer interfaces that satisfy users’ needs. It is a
multidisciplinary subject covering computer science, behavioral sciences,
cognitive science, ergonomics, psychology, and design principles.
 is a multidisciplinary field that focuses on designing and evaluating computer
systems and technologies that people interact with. It is concerned with
understanding and improving the interaction between humans and computers to
make technology more user-friendly, efficient, and enjoyable.
HISTORY OF HCI

 [Link]
ter/
KEY COMPONENTS OF HCI

 The User

 The Goal-Oriented Task

 The Interface

 The Context
USER

 The user component refers to an individual or a group of individuals that

participate in a common task. HCI studies users’ needs, goals, and interaction
patterns. It analyzes various parameters such as users’ cognitive capabilities,
emotions, and experiences to provide them with a seamless experience while
interacting with computing systems.
GOAL-ORIENTED TASK
 A user operates a computer system with an objective or goal in mind. The computer
provides a digital representation of objects to accomplish this goal. For example,
booking an airline for a destination could be a task for an aviation website.
• In such goal-oriented scenarios, one should consider the following aspects for a
better user experience:
• The complexity of the task that the user intends to accomplish

• Knowledge and skills necessary to interact with the digital object

• Time required to carry out the task

INTERFACE

 The interface is a crucial HCI component that can enhance the overall user
interaction experience. Various interface-related aspects must be considered,
such as interaction type (touch, click, gesture, or voice), screen resolution, display
size, or even color contrast. Users can adjust these depending on the user’s
needs and requirements.
CONTEXT

 HCI is not only about providing better communication between users and
computers but also about factoring in the context and environment in which the
system is accessed. For example, while designing a smartphone app, designers
need to evaluate how the app will visually appear in different lighting conditions
(during day or night) or how it will perform when there is a poor network
connection. Such aspects can have a significant impact on the end-user
experience.
IMPORTANCE OF HCI

 HCI in daily lives

 Industry

 Accessible to disabled

 An integral part of software success

 Useful for untrained communities

HCI IN DAILY LIVES

 Today, technology has penetrated our routine lives and has impacted our daily
activities. To experience HCI technology, one need not own or use a smartphone
or computer. When people use an ATM, food dispensing machine, or snack
vending machine, they inevitably come in contact with HCI. This is because HCI
plays a vital role in designing the interfaces of such systems that make them
usable and efficient.
INDUSTRY

 Industries that use computing technology for day-to-day activities tend to

consider HCI a necessary business-driving force. Efficiently designed systems
ensure that employees are comfortable using the systems for their everyday
work. With HCI, systems are easy to handle, even for untrained staff.
 HCI is critical for designing safety systems such as those used in air traffic control
(ATC) or power plants. The aim of HCI, in such cases, is to make sure that the
system is accessible to any non-expert individual who can handle safety-critical
situations if the need arises.
ACCESSIBLE TO DISABLED

 The primary objective of HCI is to design systems that make them accessible,
usable, efficient, and safe for anyone and everyone. This implies that people with
a wide range of capabilities, expertise, and knowledge can easily use HCI-
designed systems. It also encompasses people with disabilities. HCI tends to rely
on user-centered techniques and methods to make systems usable for people
with disabilities.
INTEGRAL PART OF SOFTWARE
SUCCESS

 HCI is an integral part of software development companies that develop software

for end-users. Such companies use HCI techniques to develop software products
to make them usable. Since the product is finally consumed by the end-user,
following HCI methods is crucial as the product’s sales depend on its usability.
USEFUL FOR UNTRAINED
COMMUNITIES

 Today, user manuals for general computer systems are a rarity. Very few
advanced and complex computing systems provide user manuals. In general,
users expect the systems to be user-friendly and enable them to access the
system within a few minutes of interacting with it. Here, HCI is an effective tool
that designers can use to design easy-to-use interfaces. HCI principles also ensure
that the systems have obvious interfaces and do not require special training to be
used. Hence, HCI makes computing systems suitable for an untrained community.
GOALS OF HCI
 The principal objective of HCI is to develop functional systems that are usable,
safe, and efficient for end-users. The developer community can achieve this goal
by fulfilling the following criteria:
• Have sound knowledge of how users use computing systems
• Design methods, techniques, and tools that allow users to access systems based on
their needs
• Adjust, test, refine, validate, and ensure that users achieve effective communication or
interaction with the systems
• Always give priority to end-users and lay the robust foundation of HCI
GOALS OF HCI

 To realize the above points, developers must focus on two relevant

areas: usability and user experience.
 Usability

 User Experience
USABILITY
 Usability is key to HCI as it ensures that users of all types can quickly learn and use
computing systems. A practical and usable HCI system has the following
characteristics:
 How to use it

 Safe

 Efficient

 Effective

 Utility

 enjoyable
HOW TO USE IT

 This should be easy to learn and remember for new and infrequent users to learn
and remember. For example, operating systems with a user-friendly interface are
easier to understand than DOS operating systems that use a command-line
interface.
SAFE

 A safe system safeguards users from undesirable and dangerous situations. This
may refer to users making mistakes and errors while using the system that may
lead to severe consequences. Users can resolve this through HCI practices. For
example, systems can be designed to prevent users from activating specific keys
or buttons accidentally. Another example could be to provide recovery plans once
the user commits mistakes. This may give users the confidence to explore the
system or interface further.
EFFICIENT

 An efficient system defines how good the system is and whether it accomplishes
the tasks that it is supposed to. Moreover, it illustrates how the system provides
the necessary support to users to complete their tasks.
EFFECTIVE

 A practical system provides high-quality performance. It describes whether the

system can achieve the desired goals.
UTILITY

 Utility refers to the various functionalities and tools provided by the system to
complete the intended task. For example, a sound utility system offers an
integrated development environment (IDE) that provides intermittent help to
programmers or users through suggestions.
ENJOYABLE

 Users find the computing system enjoyable to use when the interface is less
complex to interpret and understand.
USER EXPERIENCE
 User experience is a subjective trait that focuses on how users feel about the
computing system when interacting with it. Here, user feelings are studied
individually so that developers and support teams can target particular users to
evoke positive feelings while using the system.
 HCI systems classify user interaction patterns into the following categories and
further refine the system based on the detected pattern:
• Desirable traits – satisfying, enjoyable, motivating, or surprising

• Undesirable traits – Frustrating, unpleasant, or annoying

INTERACTION STYLES

 Command line

 Graphic User Interface

 Natural Language

 Question and Answer

COMMAND LINE

 It is one of the oldest interaction styles present today. However, it is not user-
friendly because the user needs to learn so many commands. Each task or work
has its own command, you have to be expert or proficient in writing these
commands.
GRAPHIC USER INTERFACE

 It is one of the popular interaction styles available today. Operating systems like
Windows and macOS are the best style of GUI, where the user can provide input
with the help of a mouse and keyboard.
NATURAL LANGUAGE

 It is one step ahead of GUI. We can interact with the system with the help of
languages that we are using in our day-to-day lives. Alexa, Siri, and Google
Voice are the best examples of a voice assistant that uses natural language.
QUESTION AND ANSWER

 The best example of this interaction style is chatbots. Every application whether it
is a web or mobile application has a chatbot nowadays. But chatbots are always
domain-specific not universal.
USE CASES OF HCI

 Smart home

 Biometric sensors

 Autonomous vehicle

 Virtual assistants

 Smartphone for visual disabilities

APPLICATION OF HCI IN DIFFERENT
DOMAINS

 Health care

 Education

 Banking

 Networking
DISCIPLINES CONTRIBUTING TO HCI
 Cognitive psychology – limitations, information processing, performance
prediction, cooperative working and capabilities
 Computer Science – including graphics, technology, prototyping tools, user
interface management systems
 Linguistics – including natural language interface

 Engineering and Design – engineering principles; graphic design

 Artificial Intelligence – intelligent software

 Human Factor – display readability; hardware design

THREE PARTS OF HCI
 User - we may mean an individual user, or a group of users working together. An
appreciation of the way people's sensory systems (sight, hearing, touch) relay information
is vital. Also, different users form different conceptions or mental models about their
interactions and have different ways of learning and keeping knowledge and. In addition,
cultural and national differences play a part.
 Computer - we're referring to any technology ranging from desktop computers, to large
scale computer systems. For example, if we were discussing the design of a Website, then
the Website itself would be referred to as "the computer". Devices such as mobile phones
or VCRs can also be considered to be “computers”.
 Interaction - There are obvious differences between humans and machines. In spite of
these, HCI attempts to ensure that they both get on with each other and interact
successfully. In order to achieve a usable system, you need to apply what you know about
humans and computers and consult with likely users throughout the design process. In real
systems, the schedule and the budget are important, and it is vital to find a balance
between what would be ideal for the users and what is feasible in reality.
METAPHORS

 Analogies between features of the user interface and aspects of physical reality
that users are familiar with.
METAPHORS FOR HCI
 Direct Manipulation – a metaphor of HCI in which the user interacts directly
with the objects on the display screen. The 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) is a
direct manipulation approach in which the display screen includes an
arrangement of common objects found on a desk.
 Document metaphor – a metaphor of HCI in which interaction with the
computer involves browsing and entering data on electronic documents.
 Dialog metaphor – a metaphor of HCI in which interacting with the computer is
like carrying on a conversation or dialog. The user asks the computer for
something, and the computer responds or vise versa.
FUNDAMENTAL PRINCIPLES OF USER-
CENTERED DESIGN

 Human Interface Objects (HIO) – are those that appear on a screen and that
the user can manipulate or use to navigate. HIO’s should also provide visual
feedback when they are activated. This feedback can be visual, such as a change
it color or background color or highlight, or audio, such as a clicking noise.
 Consistency - One of the most troublesome approaches to design is a lack of
consistency. When difference icons or HIOs are used to do the same operation, or
when the same HIOs have unique operations, then users get confused. Several
levels of consistency are important different
FUNDAMENTAL PRINCIPLES OF USER-
CENTERED DESIGN
 Discoverability – is the principle that is should be easy for the user to find and figure out
the operations and features on a screen.
 Active Discovery – is simply the principle that the designer will include these kinds of
clues by design and not simply let the user find the available functions by trial and error.
 Closure - lets the user know that he/she has completed an operation. Visibility and
feedback are important aspects of closure. When using a dialogue metaphor, it is
especially important to provide closure so that the user knows the job is complete.
Dialogues often require several steps, which all must be completed. Another part of closure
is that the user’s work should be saved or protected both during a dialogue, but especially
at the end. That can be done either automatically, or by a specific reminder to the user.
Undo capability should be provided so that the user can “back up” when necessary. Those
systems that are most useable allow several undo steps so that users can reverse more
than one action.
FUNDAMENTAL PRINCIPLES OF USER-
CENTERED DESIGN
 Readability and Navigation - System users come in all skill levels and ages. It is
important to make the text readable by type, size, and color. Some systems allow
the user to adjust these properties. Sometimes designers will try to be too fancy
and end up with text that is very difficult to read. Navigation through the entire
application should be obvious and easily traversed. And reversal of navigation, in
addition to reversal of actions, should also be provided. One common technique is
called breadcrumbs, which shows the hierarchy of screens that were traversed to
arrive at the current location. Making them hotspots allows the user to return to
previous locations quickly and easily.
FUNDAMENTAL PRINCIPLES OF USER-
CENTERED DESIGN
 Usability and Efficiency - Usability and efficiency are overall principles which
simply mean that designers should always be thinking about how to make the
application easy to use. One powerful technique, particularly for power users, is to
provide shortcut keys to the most used functions. Error messages should be
written so that they are clear and indicate not only what is in error, but how to fix
it. Finally, the KISS (Keep It Simple Stupid) is a good design principle. Designers
should always be thinking how to make the interface, the operations, the
navigation, the instructions, and so forth easy to find, easy to navigate, easy to
understand, and easy to use. Simpler is always better.
TRANSITION FROM ANALYSIS TO USER-
INTERFACE DESIGN
 Use cases and the menu hierarchy - Menus are a way of grouping large
numbers of related use cases or dialogs within a user interface. In all but the
smallest systems, menus are needed to present the user with a tractable number
of choices per screen, to group related functions together so users can more
easily locate them. A designer must decide which use cases and user interfaces
to include in which menus, which menus are required, and how many menu levels
are required. Menus usually contain five or so choices in order to avoid
overloading the user. Multiple levels of menus helps to keep the number of
individual menu items at a workable number.
TRANSITION FROM ANALYSIS TO USER-
INTERFACE DESIGN

 Analysis Model and Input Forms - Some of the models developed during the
analysis activities are useful inputs to designing input forms. For example, an SSD
shows the flow of information across the system boundary. Every time information
flows across the boundary, some type of user interface document is needed.
Activity diagrams also can show where interactions occur between the user and
the system. All of these points in the diagrams are candidates for an input or
output screen or some other type of user interface.
TRANSITION FROM ANALYSIS TO USER-
INTERFACE DESIGN
 Dialogs and Storyboards - After identifying all required dialogs, the designers
must document the dialogs. One approach is to list the key steps followed for the
dialog with a written description of what the user and computer do at each step.
Designers can also document dialog designs by writing out how the user and
system might interact if they were two people engaged in conversation. There are
many possible implementations of a dialog scenario. Before deciding on a specific
implementation, an analyst often uses a technique called storyboarding—that is,
showing a sequence of sketches of the display screen during a dialog. The
sketches don’t have to be very detailed to show the basic design concept.
HOW CAN METAPHORS IMPROVE OVERALL
USER EXPERIENCE AND DESIGN?

 Establishes abstract concepts in concrete terms - Metaphors are a great

tool to help your customers understand abstract or unknown content. The
information can be easily understood by linking the abstract information to the
concrete concept. Let’s start with the most basic and common use of metaphors
on the web and app. Symbols: The small icons help users quickly grasp the
concept. Symbols usually represent what we know from the physical world and we
may have something to do with the abstract concept on the web.
HOW CAN METAPHORS IMPROVE OVERALL
USER EXPERIENCE AND DESIGN?
 Make contact - We like to figure things out. When we cannot recognize anything,
our brain tries to understand what it sees.
 Evoke emotions - You can use metaphors to evoke emotions. Emotions not only
attract people to your design but also make it more effective, enjoyable, and
memorable. As mentioned earlier, symbols help us to understand abstract
concepts.
 Attract the attention of consumers - Many techniques can make some
elements of web design more distinctive than others and the use of metaphors is
one of them. Metaphors are usually used to draw attention to a website or specific
aspects of a webpage. Just as we recognize familiar faces in a large group of
strangers, the things we recognize attract our attention.
HOW CAN METAPHORS IMPROVE OVERALL
USER EXPERIENCE AND DESIGN?

 Lead users to action - Another very good aspect of metaphors is that they can
influence people’s actions. By translating the conversations we know on the web
from the real world, we can also transfer our knowledge to the screen. In this way,
metaphors are very attractive and functional, because we naturally know what to
do.
USABILITY

 is a measure of how well a specific user in a specific context can use a

product/design to achieve a defined goal effectively, efficiently and satisfactorily.
Designers usually measure a design’s usability throughout the development
process—from wireframes to the final deliverable—to ensure maximum usability.
USABILITY ELEMENTS FOR EXCEPTIONAL
EXPERIENCES
 Effectiveness - It supports users in completing actions accurately.

 Efficiency - Users can perform tasks quickly through the easiest process.

 Engagement - Users find it pleasant to use and appropriate for its industry/topic.

 Error Tolerance - It supports a range of user actions and only shows an error in
genuine erroneous situations. You achieve this by finding out the number, type and
severity of common errors users make, as well as how easily users can recover from
those errors.
 Ease of Learning - New users can accomplish goals easily and even more easily on
future visits.
ATTRIBUTES OF USABILITY

 Learnability  Usefulness

 Efficiency  Control and flexibility

 Effectiveness  User characteristics

 Memorability and retainability  Context and purpose

 Low error rate and error tolerance  Interface and design

LEARNABILITY

 This attribute measures how easily and quickly a user can learn the functionality
of a website. If a user can’t learn to use the navigation or how to interact with the
features of the website, the learnability of the website is unsuccessful.
 To successfully exploit this attribute, it’s important to keep your website as simple
as possible. Too many call-outs, navigation options and images can distract a user
from knowing what to do or where to go.
EFFICIENCY AND EFFECTIVENESS
 The attributes of efficiency and effectiveness are almost one and the same. They
both involve how well a user can interact with a website once it is learned.
 Once a user has learned how to use a website, the efficiency of a website
measures how fast they can accomplish their goal using the website.
 Effectiveness is more related to how after one understands the navigation,
organization and functionality; it should be easy for users to carry out their tasks.
 There are many ways to exploit efficiency and effectiveness. Similarly to
learnability, to succeed with these attributes the experience needs to remain as
uncomplicated as possible; a user must be able to navigate from multiple parts of
the website as possible.
EFFICIENCY AND EFFECTIVENESS
 The attributes of efficiency and effectiveness are almost one and the same. They
both involve how well a user can interact with a website once it is learned.
 Once a user has learned how to use a website, the efficiency of a website
measures how fast they can accomplish their goal using the website.
 Effectiveness is more related to how after one understands the navigation,
organization and functionality; it should be easy for users to carry out their tasks.
 There are many ways to exploit efficiency and effectiveness. Similarly to
learnability, to succeed with these attributes the experience needs to remain as
uncomplicated as possible; a user must be able to navigate from multiple parts of
the website as possible.
MEMORABILITY AND RETAINABILITY
 After a user learns the website and can use it with maximum productivity, the
next attributes a website designer needs to consider are memorability and
retainability. What these attributes measure is the ability of a user to come back
to the website after an extended time and not need to relearn how to use it.
 Aside from a simple web design, creating an easy-to-access FAQ or guide on how
to use and navigate the website can help with these attributes. Alternatively, a
‘tips’ functionality that can be turned on or off will help navigate a new or
returning user through the website process. Lastly, a well-structured site map is
another way for a returning user to find the information they’re looking for.
LOW ERROR RATE AND ERROR
TOLERANCE
 To satisfy these attributes, a website needs to be as free of potential errors as
possible; what this means is that there needs to be a minimal number of
scenarios where a user must backtrack and start their process all over again.
When errors are unavoidable, there needs to be a system in place that makes it
easy to recover from.
 There are various ways to succeed with these attributes. For one, the flow of the
website needs to ensure that the possibility of error is as low as possible by
providing clear instructions and direction for where a user needs to go next. If an
error does occur, it needs to be easy to mend for the user; for example, if a form
is filled out incorrectly there needs to be a system in place that notifies the user
of the specific errors without starting them over in the process.
ATTITUDE AND SATISFACTION
 It should go without saying, but the users’ overall feeling while using the website
is an important attribute for an optimal user experience. The website needs to be
satisfying and enjoyable to navigate and interact with. This attribute can be
influenced by the other attributes, as well. If a website is difficult to use, has
various errors, or is constantly changing so users can’t remember its functionality,
it will have low satisfaction.
 Since this attribute is so subjective, it’s difficult to say one website is more
satisfying than another. One could enjoy the background music on the band Real
Estate’s website; however, another could find it distracting. The only real way to
ensure this attribute is satisfied is through user surveys and research.
 It’s difficult to always have users take surveys, so offering some sort of incentive
such as a discount on the next purchase or a chance to win a sweepstakes can
help with survey engagement.
USEFULNESS, CONTEXT/PURPOSE, USER
CHARACTERISTICS
 These three attributes are bundled together because they all are co-dependent on
one another.
• Usefulness measures how beneficial the content on the website is to the user.

• Context and purpose measures if the content and website fulfills the purpose it
is meant to provide to users.
• The User Characteristics influences both of these factors because it takes into
account how the target users’ take in information, what they want and other
general demographics.
TO SUCCEED WITH THESE USABILITY ATTRIBUTES,
YOU NEED TO UNDERSTAND YOUR TARGET
AUDIENCE AND BUSINESS GOALS.

• What are they looking for?

• How can your website provide that to them?

• What is the purpose of your website, and what types of content can help achieve
that?
WHAT IS USER-CENTERED DESIGN
(UCD)?

 User-centered design (UCD) is an iterative design process in which designers

focus on the users and their needs in each phase of the design process. In UCD,
design teams involve users throughout the design process via a variety of
research and design techniques, to create highly usable and accessible products
for them.
4 PHASES IN USER-CENTERED DESIGN
TOP 4 CHALLENGES OF USER-CENTERED
DESIGN

 Conducting user research under a limited time and budget

 Wide gap between design and development

 Fail to source the right participants

 Fail to adapt to client’s level of maturity

10 INNOVATIVE UI/UX MISTAKES THAT
DESIGNER SHOULD AVOID
 Ignoring Inclusive Design - Inclusivity in design goes beyond accommodating users
with disabilities; it encompasses a broad range of users from different backgrounds,
cultures, and age groups. To ensure inclusivity, designers must consider factors such as
language, cultural nuances, accessibility, and ease of use for all. A design that
resonates universally has a better chance of achieving mass adoption.
 Overlooking Microinteractions - Microinteractions are the tiny details within a user
interface that often go unnoticed but play a significant role in shaping the user
experience. Neglecting these small, yet vital interactions can result in a bland user
experience. Consider incorporating subtle animations, feedback cues, and other
microinteractions to create a more engaging and satisfying user journey.
10 INNOVATIVE UI/UX MISTAKES THAT
DESIGNER SHOULD AVOID
 Neglecting User Feedback - In the digital age, user feedback is readily available and
can provide valuable insights into improving your UI/UX. Neglecting to incorporate user
feedback into your design process is a mistake that can lead to missed opportunities for
enhancing your product. It’s essential to create feedback loops and actively engage
with your users to gather insights and continuously iterate on your design.
 Overloading with Features - More features don’t always equate to a better user
experience. In fact, overloading your interface with features can often overwhelm users
and hinder usability. Innovative UI/UX design involves prioritizing essential features and
presenting them in a clear, user-friendly manner. By focusing on the core functionality,
you can create a streamlined and effective design.
10 INNOVATIVE UI/UX MISTAKES THAT
DESIGNER SHOULD AVOID
 Disregarding Loading Times - In an era of fast-paced digital experiences, slow
loading times are a major turn-off for users. Disregarding loading times in your
design can result in a high bounce rate and user frustration. Innovative UI/UX
design includes optimizing loading times to ensure users can access content
quickly and effortlessly. Implement techniques like lazy loading and efficient asset
management to reduce load times.
 Neglecting Emotional Design - While usability and functionality are crucial,
don’t forget the emotional aspect of design. Neglecting emotional design can
result in a sterile and uninspiring user experience. To create a lasting impact,
consider the emotional connection users will have with your product. Incorporate
elements that evoke positive emotions, such as colors, typography, and imagery,
to make your design more appealing and engaging.
10 INNOVATIVE UI/UX MISTAKES THAT
DESIGNER SHOULD AVOID
 Failing to Prioritize Mobile-First Design - The importance of mobile-first
design cannot be overstated in today’s mobile-centric world. Neglecting to
prioritize mobile UI/UX can lead to a subpar experience for a significant portion of
your user base. Innovative UI/UX design involves creating a seamless experience
on mobile devices, which often involves simplifying the interface, optimizing
touch interactions, and ensuring responsiveness.
 Underestimating the Power of Storytelling - Storytelling is a powerful tool in
design that can be easily overlooked. A well-crafted narrative can guide users
through your interface, making the experience more engaging and memorable.
Incorporate storytelling elements into your design, such as user onboarding
journeys or interactive narratives that keep users invested in your product.
10 INNOVATIVE UI/UX MISTAKES THAT
DESIGNER SHOULD AVOID
 Neglecting Accessibility - Innovative UI/UX design embraces accessibility as a
core principle. Neglecting accessibility not only limits your audience but also goes
against the principles of a user-centered design approach. Ensure your design is
accessible to all users, including those with disabilities, by following web
accessibility guidelines and considering inclusive design practices.
 Stagnant Design Iteration - Last but not least, failing to evolve and iterate on
your design is a common yet significant mistake. User preferences, technologies,
and design trends are constantly evolving. A stagnant design can quickly become
outdated and less effective. Innovative UI/UX designers are continually evolving
their designs to stay ahead of the curve and provide the best possible experience
for their users.