HUMAN COMPUTER

INTERACTION
DIT 406

BY: MR. KEVIN NJAGI – (LECTURER KCAU )

@ MAY - AUG 2025

Virtual class
 LESSON ONE

INTRODUCTION
TO
HUMAN COMPUTER
INTERACTION
 1.1 Definition of Terms

i. Who is a Human/user ?

ii. What is a Computer ?

iii. What is Interaction ?

iv. What is Human Computer Interaction?

 a) Who is a User/Human ?
• By “Human/user", we may mean an
individual user, a group of users working
together.
• Different users form different conceptions or
mental models about their interactions with
“computers” and have different ways of
learning and keeping knowledge.
• An appreciation of the way people's sensory
systems (sight, hearing, touch) relay
information is vital.
 b) What is a computer ?
• When we talk about the computer, we're referring
to all forms of technology.
• 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 phone, Computer,
personal organizer, remote control, soft drink
machine, coffee machine, ATM, ticket machine,
library information system, the web, photocopier,
watch, printer, stereo, calculator, videogame etc can
also be considered to be “computers”.
 c) What is 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.
 1.2 WHAT IS HCI?
• HCI (human-computer interaction) is the
study of how people interact with computers
and to what extent computers are or are not
developed for successful interaction with
human beings.

• NB: As its name implies, HCI consists of

three parts: the user, the computer itself, and
the ways they work together
 1.3 GOALS OF HCI?
• The goals of HCI are to produce usable and safe systems, as well as functional
systems. In order to produce computer systems with good usability,
developers must attempt to:
– Understand the factors that determine how people use
technology
– Develop tools and techniques to enable building suitable systems
– Achieve efficient, effective, and safe interaction
– Put people first
• Underlying the whole theme of HCI is the belief that people using a
computer system should come first. Their needs, capabilities and
preferences for conducting various tasks should direct developers in
the way that they design systems.

• NB: People should not have to change the way that they use a system
in order to fit in with it. Instead, the system should be designed to
match their requirements.
 1.4 USABILITY IN HCI?
• Usability is one of the key concepts in HCI.
It is concerned with making systems easy to
learn and use. A usable system is : -
–• Easy to learn
–• Easy to remember how to use
–• Effective to use
–• Efficient to use
–• Safe to use
–• Enjoyable to use
 1.5 WHY IS USABILITY IMPORTANT?
1. Many everyday systems and products seem
to be designed with little regard to usability.
This leads to frustration, wasted time and
errors. This list contains examples of
interactive products:
mobile phone, computer, personal organizer, remote control, soft drink
machine, coffee machine, ATM, ticket machine, library information system,
the web, photocopier, watch, printer, stereo, calculator, videogame etc….

2. Usable systems are actually easy, effortless,

and enjoyable to use?
 Why is usability important?
EXAMPLE IN A PHOTOCOPIER MACHINE,
• A photocopier might have buttons like these on its control panel.
Imagine that you just put your document into the photocopier and set
the photocopier to make 15 copies, sorted and stapled. Then you
push the big button with the "C" to start making your copies.
What do you think will happen?
(a) The photocopier makes the copies correctly.
(b) The photocopier settings are cleared and no copies are made.
 1.6 FACTORS AFFECTING
USABILITY
The main factors affecting usability are:
– • Format of input
– • Feedback
– • Visibility
– • Affordance
 1.7 CLASS EXERCISE 1
1. Suggest some ways in which the design of the
copier buttons above could be improved.
2. Consider factors involved in the design of KCA
website and student portal using HCI principles
3. Map out what you do (User Input) with the way the
system seems to operate (System Feedback) when
Sending a text message on a mobile phone
4. Discuss HCI and its evolution
5. Discuss the various Disciplines contributing to
HCI
 INTERACTIVE
INTERFACE DESIGN
 2.1 Definition of Terms
What is User Interfacc Design ?

• This is the design of the interface or system

which is directly accessible by the user which

they interact with in order to do a task.

An Example of a User interface
 2.2 Functions of User interface

UI mainly performs two functions −

1) Accepting the user’s input

2) Displaying the output

 2.3 Types of User interfaces

a) Textual User Interface

b) Graphical User Interface

c) Gesture-based Interfaces

d) Voice-controlled Interfaces (VUIs)

 2.4 Design of User interface
• To perform user interface analysis, the practitioner
needs to study and understand four elements −
– The users who will interact with the system
through the interface
– The tasks that end users must perform to do
their work
– The content that is presented as part of the
interface
– The work environment in which these tasks
will be conducted
 2.5 Levels of User Interface Design
• The design of a user interface is often divided into four
different levels −
– The conceptual level − It describes the basic entities
considering the user's view of the system and the actions
possible upon them.
– The semantic level − It describes the functions performed
by the system i.e. description of the functional requirements
of the system, but does not address how the user will invoke
the functions.
– The syntactic level − It describes the sequences of inputs
and outputs required to invoke the functions described.
– The lexical level − It determines how the inputs and
outputs are actually formed from primitive hardware
operations.
2.6 Steps of User interface Design
1) Defines user interface objects and actions (operations).
2) Defines events (user actions) that will cause the state
of the user interface to change.
3) Indicates how the user interprets the state of the
system from information provided through the
interface.
4) Describe each interface state as it will actually look to
the end user.
2.7 User interface Development Process

1) Interface analysis

2) Interface design

3) Interface construction

4) Interface validation
User interface Development Process
 2.8 User interface Models
When a user interface is analyzed and designed
following four models are used −

• User profile model

• Design model

• Implementation model

• User's mental model

2.9Design Considerations User interface
1) User centered
2) Simple and Intuitive
3) Place Users in Control
4) Transparency
5) Use progressive disclosure
6) Consistency
7) Integration
8) Component Oriented
9) Customizable
10) Reduce Users’ Memory Load
11) Separation
 PRINCIPLES
OF
USER INTERFACE
DESIGN
 3.1 Principles of User Interfsce
Design ?
User Interfsce Design ?
• The main aim is to enhance the appearance of the
product, the quality of technology used and the
usability of the product.
• It refers to the software or the hardware of the
system which the user can see and also the various
ways or commands to control or use the product.
• It focuses on the looks or how the app or software
is looking.
• Attributes like theme, animations, colors, etc
constitute the user interface.
 3.2 Principles of User Interfsce
Design ?
• Minimize actions − Minimize action means steps per screen. The
tasks and actions are streamlined so that they can be done in as few
steps as possible. The interface should be designed keeping in mind
to maintain the steps as few as possible for performing any tasks.
• Simplicity − The user interface should not be complex. It should
always be designed simple and elegant.
• Consistent − The user interface should be consistent. The design
should be consistent. Increasing consistency increases the
familiarity, and hence increases the usability.
• Proving useful feedback − The user should be provided with
feedback for every action. This keeps the user informed and helps
them to know whether some action was successful or not.
• Clarity − Content should provide the user with clarity. There
should not be anything which confuses the user, as it becomes an
obstacle for the user in interacting with the product.
 3.3 Guidelines in HCI
Shneiderman’s Eight Golden Rules
Ben Shneiderman, an American computer scientist consolidated some
implicit facts about designing and came up with the following eight
general guidelines −
1) Strive for Consistency.
2) Cater to Universal Usability.
3) Offer Informative feedback.
4) Design Dialogs to yield closure.
5) Prevent Errors.
6) Permit easy reversal of actions.
7) Support internal locus of control.
8) Reduce short term memory load.
Using these eight guidelines, it is possible to differentiate a good interface
design from a bad one. These are beneficial in experimental assessment of
identifying better GUIs.
 Guidelines in HCI
Norman’s Seven Principles
To assess the interaction between human and computers, Donald
Norman in 1988 proposed seven principles. He proposed the seven
stages that can be used to transform difficult tasks. Following are the
seven principles of Norman −
1) Use both knowledge in world & knowledge in the head.
2) Simplify task structures.
3) Make things visible.
4) Get the mapping right (User mental model = Conceptual
model = Designed model).
5) Convert constrains into advantages (Physical constraints,
Cultural constraints, Technological constraints).
6) Design for Error.
7) When all else fails − Standardize.
 Guidelines in HCI
Heuristic Evaluation
• Heuristics evaluation is a methodical procedure
to check user interface for usability problems.
• Once a usability problem is detected in design,
they are attended as an integral part of
constant design processes.
• Heuristic evaluation method includes some
usability principles such as Nielsen’s ten
Usability principles.
 Guidelines in HCI
Nielsen's Ten Heuristic Principles
1) Visibility of system status.
2) Match between system and real world.
3) User control and freedom.
4) Consistency and standards.
5) Error prevention.
6) Recognition rather than Recall.
7) Flexibility and efficiency of use.
8) Aesthetic and minimalist design.
9) Help, diagnosis and recovery from errors.
10) Documentation and Help
The above mentioned ten principles of Nielsen serve as a checklist in
evaluating and explaining problems for the heuristic evaluator while auditing
an interface or a product.
 3.4 Choosing Interface Components
• Users have become aware of interface components
acting in a certain manner, so try to be predictable
and consistent in our selections and their layout. As a
result, task completion, satisfaction, and
performance, will increase.
• Interface components Includes
• Input controls
• Navigational Components
• Informational Components
• Containers
3.5 Best Practices for Designing an Interface
• It All starts with getting to know your users, which
contains understanding about their interests, abilities,
tendencies, and habits.

• If you have figured out who your customer is, keep the
following in mind when designing your interface:
– Create consistently and use common UI components
– Use typography to make hierarchy and clarity.
– Make sure that the system communicates what's happening
– Use color and texture strategically
– Keep the interface simple
– Be purposeful in page layout
 3.6 Designing User Interfaces for Users
• User interfaces are the points of interaction between
the user and developer.

They come in four different types of formats:

– Graphical User Interfaces (GUIs)
– Gesture-based Interfaces
– Voice-controlled Interfaces (VUIs)
– Textual User Interface
 3.7 How to Make Great UIs
• Remember that the users are people with needs like
comfort and a mental capacity limit when creating a
stunning GUI.
The following guidelines should be followed:
1. Create buttons, and other popular components that behave
predictably (with responses like pinch-to-zoom) so that
users can use them without thinking. Form must follow
function.
2. Keep your discoverability high. Mark icons clearly and
well-defined affordances, such as shadows for buttons.
3. The interface should be simple (including elements that
help users achieve their goals) and create an "invisible"
feel.
 Designing User Interfaces for Users
4. In terms of layout, respect the user's eyes and
attention. Place emphasis on hierarchy and readability:
• User proper alignment: Usually select edge (over center) alignment.
• Draw attention to Key features using:
– Colour, brightness, and contrast are all important factors to consider Excessive
use of colors or buttons should be avoided.
– Font sizes, italics, capitals, bold type/weighting, and letter spacing are all used to
create text. User should be able to Deduce meaning simply by scanning.
– Regardless of the context, always have the next steps that the user can naturally
deduce.
– Use proper UI design patterns to assist users in navigating and reducing
burdens such as pre-fill forms. Dark patterns like hard-to-see prefilled opt-
in/opt-out checkboxes and sneaking objects into the user's carts should be
avoided.
– Keep user informed about system responses/actions with feedback.
3.8 Key Principles of User Interface Design
The following are the principles of user interface
design:
 3.9 Mistakes to Avoid in UI Design
The following are the mistakes that we have to avoid in UI design:
• Do not implement a user-centred design. This is an easy part to overlook, but
it is one of the most critical aspects of the UI design. User's desires, expectations,
and the problems should all be considered when designing. Avoid doing, so it
may have a negative effect on your company and lead to its demise.
• Excessive use of dynamic effects: Using a lot of animation effects is not
always a sign of a good design. As a result, limiting the use of decorative
animations will help to improve the user experience.
• Preparing so much in advance: Particularly in the early stages of design, we
just need to have the appropriate image of the design in our heads and get to
work. However, this strategy is not always successful. At times, exploring other
sources can show some unexpected results.
• Not Leaning more about the target audience: - This point once again,
demonstrates what we have just discussed. Rather than designing with your own
desires and taste in mind, imagine yourself as the consumer. Simply consider
what the consumer will enjoy, and if possible, conduct an interview or survey
some potential customers to get a better understanding of their requirements.
 3.10 Essential Tools for User Interface Design
There are various essential tools for user interface
design:
• Sketch
• Adobe XD
• Invision Studios
• UXPin
• Framer X
Essential Tools for User Interface Design
 Essential Tools for User Interface Design
1. Sketch
• It is a user design tool mainly used by numerous UI and UX designers to design and
prototyping mobile and web applications.
• The Sketch is a vector graphics editor that permits designers to create user interfaces
efficiently and quickly.
There are various features of Sketch:
– Slicing and Exporting
Sketch gives users a lot of slicing control, allowing them to choose slice, and
export any layer or object they want.
– Symbols
Using this feature, user can build pre-designed elements which can be easily re-
used as well as replicated in any artboard or project. This feature will help
designers save time and build a design library for potential projects.
– Plugins
Maybe a feature you are looking for is not available in the default sketch app. In
that situation, you don't have to worry; there are number of created plugins that
can be downloaded externally and added to our sketch app. The options are
 Essential Tools for User Interface Design
2. Adobe XD
• It is a vector-based tool. We use this tool for designing interfaces and prototyping for
mobile applications as well as the web.
• Adobe XD is just like Photoshop and illustrator, but it focuses on user interface
design.
• Adobe XD has the advantage of including UI kits for Windows, Apple, and Google
Material Design, which helps designers create user interfaces for each device.

There are various features of Adobe XD:

– Voice Trigger
Voice Trigger is an innovative feature introduced by Adobe XD which permits prototypes
to be manipulated via voice commands.
– Responsive Resize
Using this feature, we can automatically adjust and resize objects/elements which are
present on the artboards based on the size of the screen or platform required.
– Collaboration
We can connect Adobe XD to other tools like Slack, allowing the team to collaborate
across platforms like Windows and macOS.
 Essential Tools for User Interface Design
3. Invision Studios
• It is a simple vector-based drawing tool with design, animation, and prototyping capabilities.
• Invision studios is a relatively new tool, but it has ready demonstrated a high level of ambition through its
numerous available functionalities and remarkable prototyping capabilities.
• The ability to move and open files from sketch to Invision is an added benefit, allowing you to create more
immersive user interfaces than you could with sketch alone.

There are various features of Invision studios:

– Advanced Animations
With the various animations provided by studios, animating your prototype has become
even more exciting. We can expect higher fidelity prototypes with this feature, including
auto-layer linking, timeline editions, and smart-swipe gestures.
– Responsive Design
The responsive design feature saves a lot of time because it eliminates the need of multiple
artboards when designing for numerous devices. Invision studios permit users to create a
single artboard that can be adjusted based on the intended device.
– Synced Workflow
Studios enable a synchronised workflow across all projects, from start to finish, in order to
support team collaboration. This involves real-time changes and live concept collaboration,
as well as the ability to provide instant feedback.
 Essential Tools for User Interface Design
4. UXPin
• Another amazing tool for the design user interface is UXPin that comes with the abilities of
designing and prototyping.
• In contrast to other user interface tools, this tool is recommended to be a better fit for large
design teams and projects.
• UXPin also comes with UI element libraries which give you access to Material Design, iOS
libraries, Bootstrap, and variety of icons.
There are various features of UXPin:
– Mobile support
– Collaboration
– Presentation tools
– Drag and Drop
– Mockup Creation
– Protype Creation
– Interactive Elements
– Feedback Collection
– Feedback Management
 Essential Tools for User Interface Design
5. Framer X
• Framer X was released in 2018. It is one of the newest design tools which is
used to design digital products from mobile applications to websites.
• The interesting feature of this tool is the capability to prototype along with
the advanced interactions and animations while also integrating the code's
components.
• The React.js users feel that they are able to design and code on the same
platform. Furthermore, Framer X allows users to build highly realistic
prototypes that can be used to show clients or stakeholders the final product.

Features of the Framer X

The following are the features of the Framer X:
– From mockup to prototype, all in one canvas
– Framer X better support all types of web fonts
– Pixel-perfect designs with rulers and guides
– Get creative with precise color management