Human Computer

Interaction(HCI)
[email protected]
Lecture - 02
 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
Normal 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:

▪ Command entry
▪ Menu
▪ Forms
▪ WIMP
▪ Natural Language
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
End of the Lecture