Human Computer

Interaction(HCI)
WEEK 1 PART 2
Table of contents
 User experience
 Good & Bad experiences
 Usability, Perspective, Usability & User experience
 Usability goals
 Effectiveness and efficiency
 User experience goals
 Software quality
 Norman’s design principles
 The Six Principles of Design by Norman Donald
 Conceptual model
 Case Study: A Simple Conceptual Model
 Steps taken by HCI Designer to create a conceptual model
 The variety of Interactive Systems
 Human-Computer
Interaction
Usability User Experience

Interface

Interaction

Computer Human
The Shopping Analogy
 At a every point in life, human beings are experiencing. These experiences can be both
good and bad.

 Types of experiences
◦ Good or Bad

 Every user is unique

◦ Experiences are unique
 User Experience – A

Definition
The user experience is the holistic combination of everything that the user
◦ Sees
◦ Touches
◦ Feels
◦ Interacts with
Good and Bad Experiences
Good experience

Satisfaction
Happiness
Elation

Bad experience

Frustration
Resentment
Anger
Usability - Abstract-level
Constituents
Ease of Use
(Could I use it?)

Usefulness
(Would I use it?)
Usability

 Ensuring that interactive products are easy to learn, effective

to user and enjoyable from the user’s

perspective
Perspective ?
 People perceive the same item in different ways
 What do you see in the Image ?
Usability & User Experience

Usability
Goals

User Experience Goals

 Usability Goals
 Effectiveness
 Efficiency
 Safety
 Utility
 Learnability
 Memorablity
Effectiveness
 How good the system is at doing what it is supposed to do

◦ iDrive system being effective since it would perform all the tasks

◦ Porsche example the system was effective enough to detect the high
intake of Air in Fuel system

◦ The Alarm clock is effective in the way that it would play music in exactly
the same way it is supposed to

 Are these systems really effective ? Think again !!

◦ Main goal of HCI is to evaluate things from the User’s perspective

 iDrive is a computer system used to control most secondary

vehicle systems in many current BMW cars.
 Dr. Ing. h.c. F. Porsche AG, usually shortened to Porsche AG is a
German automobile manufacturer specializing in high-
performance sports cars, SUVs and sedans.
Efficiency
 The way system supports its users in carrying out their tasks
◦ Talk about the three systems

 Does the product help users sustain a high level of productivity?

Safety
 Protecting the user from dangerous
conditions and undesirable situation
◦ Which of the Cases we discussed earlier you
think was the most unsafe ?
 Plane
Utility
 System providing the right kind of functionality so that the user can do what they want
Learnability
 How easy a system is to learn to user

 Ten Minute Rule (Jacob Neilson)

 Was iDrive easy to Learn

 Simple Device VCR

◦ Task 1: Learning to Play

◦ Task 2: Pre-Record Two Programs

Memorability
 How easy the system is to remember once learnt

 Riding a bicycle
User Experience Goals
 Satisfying  Aesthetically Pleasing

 Enjoyable
 Supportive to
 Fun Creativity

 Entertaining  Rewarding
 Helpful
 Emotionally Fulfilling
 Motivating
 Fun

Satisfying
Emotionally
fullfilling
Efficient to
use
enjoyable
Effective Rewarding
Easy to
to use
remember
Usability
Goals
Easy to Supportive of
Entertaining Safe to creativity
learn
use
Have good
utility

helpful Aesthetically
pleasing

Motivating
Today’s Revelation

“Don’t Make me THINK, is the

key to a usable product”
Usability and Quality
 What is Quality?
◦ You like a product
◦ Does not break down

 More about Quality later

Software Quality – A
Definition
 The extent to which a software product exhibits these
characteristics
◦ Functionality
◦ Reliability
◦ Usability
◦ Efficiency
◦ Maintainability
◦ Portability
 Difference in Approach:
 US Late 1970s and 1980s
◦ How computers enrich lives
◦ Facilitating problem-solving and creativity
◦ Empirical evaluation
◦ Psychology of programming

 Europe
◦ Theories of HCI
◦ Methods of design
◦ Formalize usability
INTERACTION
 Let us first understand the word “ INTERACTION” All man-
made objects offer the possibility for interaction. When an
object is designed for a purpose (function) it affords
interaction.
 Interaction is a way of framing the relationship between
people and objects designed for them.
 Interaction is thus a way of framing the relationship between
the object & User.
 All Design activities can be viewed as design for interaction.
 In fact not only objects but space & messages
( communication) too involve interaction. Interaction is a key
aspect of function, and function is a key aspect of design.
The Interaction
 The communication between user and system: the
interaction

 interaction models
◦ translations between user and system
 ergonomics
◦ physical characteristics of interaction
 interaction styles
◦ the nature of user/system dialog
 context
◦ social, organizational, motivational
Models of Interaction
 Terms of Interaction
 Normal Model
 Interaction Framework
Terms of Interaction
 Domain
◦ A domain defines an area of expertise and knowledge in
some real-world activity. An example of domains are
graphic design.
◦ the area of work under study

 Goal
◦ A goal is the desired output from a performed task.
◦ what you want to achieve e.g. create a solid red
triangle

 Task
◦ Tasks are operations to manipulate the concepts of a
domain
Terms of Interaction

 Core Language
◦ The System’s language we will refer to as the
core language
◦ computational attributes

 Task language
◦ User’s language we will refer to as the task
language
◦ psychological attributes
Human error - slips and mistakes

 slip
understand system and goal
correct formulation of action
incorrect action
 mistake
may not even have right goal!
 Fixing things?
slip – better interface design
mistake – better understanding of system
 Norman’s Design principles

Donald Arthur Norman is an American researcher, professor, and author.

He is the director of The Design Lab at University of California.

Norman's main idea is: The devices, things, computers, and interfaces
should be functional, easy to use, and intuitive.

Norman urges the need to avoid two gulfs:

1. Gulf of Execution
2. Gulf of Evaluation
Norman’s Design principles
(Contd ..)
1. Gulf of Execution:
It is a gap or delay between a user's intentions or goals and the
available actions or means to achieve those goals within a computer
system or interface.

Example:
If we want to copy a file from one folder to other in a hard disk, our goal is
to make a copy of it, and the end result is it being pasted. The delay or gap
between copy and paste operations is the gulf of execution.

Gulf of execution can be large in some situations e.g if we have many fields
on a form to fill.
Norman’s Design principles
(Contd ..)
2. Gulf of Evaluation:
When a user is expecting feedback from a system, and the system
either doesn’t provide the feedback at all or not according to
expectation

Example:
Consider a situation when a customer books a ride. The driver accepted the
request, but nothing happens after that and he has to cancel the ride at
last.
The Six Principles of Design by Norman
Donald
Norman Donald presented the six principles to minimize the two gulfs:

1. Visibility:
The important elements and functions of the interface should be visible and
self-explanatory. Users should not have to guess how something works.

Example Problem:
When a user tries to hide a file in Windows, and “Show Hidden Files &
Folders” option is enabled, the file will not really be hidden, just its name
will be faded instead.

The user has to make extra efforts to find the “Show Hidden Files & Folders”
option. If he does not know about this option, then the situation will be
more serious.
The Six Principles of Design by Norman Donald
(Ctd..)
2. Feedback:
Users should get a clear and immediate feedback about the results
of their actions.

Example Problem:
An ATM machine gets nonresponsive during a customer operation.
The customer is confused and continuously touching / pressing
different buttons in order to clear the transaction to get his card
back. After sometime a beep is heard from machine and the card
comes out.
The Six Principles of Design by Norman Donald (Ctd..)
3. Affordance:
Affordance is a characteristic of the design which is very clear in its purpose
and apparent to its user.

Example Problem:
If a dispenser has no clear indication about cool and hot water taps,
then there will be always a confusion for the users and affordance
level will be very low.
The Six Principles of Design by Norman Donald (Ctd..)

4. Mapping:
The mapping principle describes that with a good design, the controls to
something will closely resemble what they affect. In other words, the
physical arrangement or layout of elements corresponds logically to their
functions or relationships.

Example Problem:
Sometimes, in a branded keyboard imported from another country, when a
user presses a key other then alphabetic keys, the displayed character on
the screen is totally different as written on the key.
The Six Principles of Design by Norman Donald (Ctd..)

5. Constraints:
Constraints are the limitations or restrictions implemented by the designer that
guide users toward proper and error free interactions.

Example Problem:
 A CNIC field in an online form strictly accepts digits only without dashes

 A speaker jack cannot be plugged into a USB port

The Six Principles of Design by Norman Donald (Ctd..)
6. Consistency:
It should be ensured that certain elements, actions, or
symbols have exactly same meanings and behaviors
throughout a system or product.

Example Problem:
 Electric sockets always have two or three pins throughout the world. If we

don’t have this restriction then we may expect a four or five pin sockets
then it will be a critical connectivity problem
 Esc key has a standard function that is to cancel something. If it shows

different behavior in some situations then it will be a consistency problem

 Conceptual Model
“A conceptual model is an abstract, high-level model of a system. It
is a designer’s perception of the user’s mental model. It describes
how the system's components interact with each other”

In a conceptual model, various types of diagrams and visual

representations are used to visualize conceptual models, depending on the
type and complexity of the system. For example flow charts, use case
diagrams, ERDs, storyboards, wireframes and state transition diagrams etc
Case Study: A Simple Conceptual Model
Problem Statement:

A user has access to many internet connections but he is facing lot of

connectivity problems e.g frequent disconnection and variation in the
signal strength etc. He needs a customized application that decides
and suggests the best quality connection among many available
connections and upon user confirmation, he will be connected to that
connection.

Strictly Note that the procedure adopted in this case study is

just for basic understanding of the concepts. Some technical
details are skipped in order to avoid complexity. These details and
concepts will be discussed in the upcoming lectures.
Following steps are taken by HCI Designer to create a conceptual model:

1. Identify the problem:

The designer inquires about the problem from the user and finds that user have
swear connectivity problems.

2. Understand user needs and context:

The user is interviewed by the designer to know about his needs regarding the
concerned application. The interviewer uses cognitive approach to know about
the behavior and expectations of the user and context. He finds that user is
very frustrated about the connectivity problem and showing a little aggressive
behavior. He needed a smooth connection in odd hours of time.

3. User Persona:
The designer finds that the user is a freelancer. He is a graduate and
unemployed person desirous to support his family. He is hardworking and target
oriented but facing serious disconnection problems downgrading his efforts.
4. Identify the concepts:
The designer extracts the key concepts from the user’s perception about
the interface in his mind. For example there should be a floating toolbar
displaying available connections. Touching one of the buttons suggests the
best connection.

5. Visualize the Conceptual Model:

The designer sketches a wireframe diagram of the interface:
6. Prototype and Test:

The designer created a working prototype of the interface using Visual

BASIC as a tool to test and validate the conceptual model with user.
HCI is mainly concerned with:

◦ Design
◦ Evaluation
◦ Implementation

We should clearly understand that:

A really useful and successful Interactive system is characterized by
significant amounts of interaction between humans and the computer following six
principles of the Norman Donald
Basic User Interface Styles

 Five commonly encountered user interfaces paradigms:

 Interface style Expressive

 Command entry
 Menu
 Forms
 WIMP
 Natural Language

Intuitive
Menu Interface

 Menu interface: commands organized into logical groups (more intuitive

than command entry)
 A submenu can be used to present further related list of sub- functions or
options.
 Menu structure limits range of options (less expressive than command entry)
Form Interface
 Form interface: presents specific questions to which a user must respond in
order to perform some
 Intuitive, since users are led step by step through interaction.
 Not expressive, since form allows access to only a few specialized commands
WIMP
 WIMP: stands for windows, icons, menus, pointers
 WIMP interfaces are familiar as they are the basis of most desktop-computer
operating systems.
Some other Interactive styles

 Question/answer and query dialogue

 Point and click
 Gesture Recognition
 Pen based Interaction
 Speech Recognition
 Motion Tracking sensors
 Taste and smell sensors and so on..
The variety of Interactive Systems
 Designing interactive systems is concerned with many different
types of product.
 It is about:
◦ designing software systems that will run on a computer at work.
◦ designing websites, games, interactive products such as MP3
players, digital cameras and applications for tablet PCs (personal
computers).
◦ designing whole environments in which phones, tablets, laptop
computers, digital projectors and other devices and services
communicate with one another and through which people interact
with one another.
◦ designing interactive systems, products and services for the home,
for work or to support communities.
Example 1: The iPhone
Example 2: The Air Mouse
Example 3: A smart AC with mobile app
Example 4: Facebook