WINSEM2023-24 BCSE415L TH CH2023240501748 Reference Material I 29-01-2024 CSE4015 HCI MODULE-4A
WINSEM2023-24 BCSE415L TH CH2023240501748 Reference Material I 29-01-2024 CSE4015 HCI MODULE-4A
GUIDELINES IN HCI
Dr. V. Santhi 1
Shneiderman’s 8 Golden Rule
Eight Golden Rules of User Interface Design stated by Ben
Shneiderman.
We use Dix et al’s version of the Waterfall model (reproduced
below from Dix et al) to illustrate where exactly in the design cycle,
the Rules - Guidelines & principles being discussed .
Design is both qualitative as well as quantitative.
The terms ‘Guidelines’ and ‘principles’ rather than precise’ laws &
rules’ are used in Design.
Dr. V. Santhi 2
Shneiderman’s 8 Golden Rule
Ben Shniderman consolidated known tacit knowledge and practice
guidelines which are used intuitively by graphic Interface designers
into a set of eight general guidelines for the use of computer
science specialist who were being introduced to Visual Graphic
designers’ work of designing interactive GUI interfaces.
Along with ‘looks’ the usability of a software depended on
functionality.
Bend Shneiderman founded the HCI Lab at the University of
Maryland , USA.
He is known for Nassi-Shnerderman diagrams used in the field of
Software Engineering.
Dr. V. Santhi 3
Shneiderman’s 8 Golden Rule
There is ample empirical evidence published in HCI literature which
collaborates and consolidates the applicability of the eight
guidelines.
These are intended more as guidelines rather than ‘rules’ to be
strictly adhered to at every step.
They are useful for designers as well as software engineers
involved in design of interfaces.
Using these eight guidelines it is possible to distinguish a good
interface design from a bad one especially from the Human - User
interaction point of view.
These have been put forth in a concise and understandable
manner by Ben Shneiderman.
Dr. V. Santhi 4
Shneiderman’s 8 Golden Rule
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
Dr. V. Santhi 5
Shneiderman’s 8 Golden Rule
1. Strive for Consistency
Users need to be able to do the same thing the same way that
they have been doing.- every time.
Interfaces need to exhibit ‘consistent’ quality across screens/
applications both visually as well as behaviourally.
Consistency leads to a pattern which is easier to handle
cognitively.
Consistency such as ‘similar sequence of actions in similar
situations’ makes it easy to learn.
Consistency can be achieved through graphical elements such
as fonts, colour, shape, position being consistently same in all
menus & screens, across, categories for a particular software.
Dr. V. Santhi 6
Shneiderman’s 8 Golden Rule
1. Strive for Consistency
For example: If the ON button is on the right in the first screen
and moves towards middle in the second screen then positional
inconsistency is said to have occurred - however small the
displacement is.
Dr. V. Santhi 7
Shneiderman’s 8 Golden Rule
1. Strive for Consistency
GUI designers use a background grid to place interactive
elements in a consistent and orderly way so as to make them
appear both physically as well a visually at the same place
across the entire software package.
Dr. V. Santhi 8
Shneiderman’s 8 Golden Rule
2. Cater to wide range & type of Users
Universal design strives to cater to as wide a range of human
users of different characteristics (age, culture, educational level,
disability) with a single design.
While this may not be feasible or possible in all contexts,
Shniderman’s rule none the less needs to be followed so as not
to leave out taking into consideration a section of users, other
wise competent, who cannot use the interface due to no fault of
theirs.
Users are classified as Novice, Intermediate and Experts.
Interfaces need to cater to all levels & classification of users:
novice to experts.
Dr. V. Santhi 9
Shneiderman’s 8 Golden Rule
2. Cater to wide range & type of Users
For example, both Windows and Mac provide users with
keyboard shortcuts for copying and pasting, so as the user
becomes more experienced, they can navigate and operate the
user interface more quickly and effortlessly.
Dr. V. Santhi 10
Shneiderman’s 8 Golden Rule
3. Offer Informative feedback
Interfaces need to not just to be communicative but also need to
inform the ‘user‘ in terms of learning & feed back which tells
them that they are proceeding in the right direction.
For every action of the user there needs to be a feedback – only
then ‘interaction’ (in HCI) is said to take place. Specific error
messages composed in a appositive tone give affirmative
feedback without having to feel punitive.
Unless the user gets a feed back he/she cannot proceed or
becomes unsure of the correctness of the action.
Dr. V. Santhi 11
Shneiderman’s 8 Golden Rule
3. Offer Informative feedback
The Windows Media Player designers should have remembered
Ben Shneiderman’s 3rd golden rule: Offer informative feedback.
Poorly designed error messages often show an error-code that
does not mean anything to the user.
As a good designer you should always seek to give human-
readable and meaningful feedback.
Dr. V. Santhi 12
Shneiderman’s 8 Golden Rule
4. Design Dialogs to Yield Closure
In an interaction - dialogue needs to have a closure which is
recognized by the user as end of an action.
Sequence of actions need to proceed in a dialogue by engaging
the user in a step by step manner.
Like in a mathematical expression, every enclosing bracket
needs a corresponding closing bracket. So also subsequence of
actions needs to be grouped with intermittent closing of each
sub group followed finally by a closer action of the group.
Ex: A message at the end of a sequence of events gives a feed
back & closure of sending a SMS.
Dr. V. Santhi 13
Shneiderman’s 8 Golden Rule
Dr. V. Santhi 14
Shneiderman’s 8 Golden Rule
5. Prevent Errors / Offer Simple Error Handling
Interfaces need to minimize errors.
There could be many reasons for users errors but the user
himself or herself is not one of them ! Users can make errors
while interacting with computers as well as while inputting /
interpreting information.
Even if the user makes an error the system needs to be
designed to detect it, take corrective or precautionary steps to
arrest it. It also needs to offer a way out for recovery from the
error.
A default system unchanged message needs to be
communicated to the user if an error has happened
Dr. V. Santhi 15
Shneiderman’s 8 Golden Rule
6. Permit easy reversal of actions
Interactions need to build in retracing backwards /reverse
actions if need be so as give relief from anxiety to the user. The
system should encourage exploration without techno fear.
One way to do this is to provide a re traceable path backwards
of all actions and permit their nullification.
Ex: This PPT application has reversal in both the direction –
backwards (last action) and
forward (post action)
Dr. V. Santhi 16
Shneiderman’s 8 Golden Rule
7. Support internal locus of control
Allow user to always feel ‘in control’ of the system and of the
situation.
Make the user aware that he/she is in control. User should
believe that they are controlling the system and not the other
way around. This is achieved by more opportunities for
‘interactions’.
The bearing of where the user presently is helps the user to
orient or reorient the interaction. The user should never be
allowed to feel lost.
Dr. V. Santhi 17
Shneiderman’s 8 Golden Rule
8. Reduce short-term memory load
Care not load the cognitive short term memory of the user by
expecting user to remember several sequences , actions and
their consequences at a time. Means loading their short term
memory while interacting.
Millers* 7 chunks of information is often prescribed as a solution
to limit short term memory. In psychological experiments it has
been found that the short term memory can hold 7 +- 2 bits
called chunks of information.
Long sequential actins requiring more than 7 chunks need to be
broken down into smaller chunks.
Dr. V. Santhi 18
Shneiderman’s 8 Golden Rule
8. Reduce short-term memory load
Recognizing something is always easier than recall because
recognition involves perceiving cues that help us reach into our
vast memory and allowing relevant information to surface.
For example, we often find the format of multiple choice
questions easier than short answer questions on a test because
it only requires us to recognize the answer rather than recall it
from our memory.
Jakob Nielsen, a user advocate who’s been called one of the
“world’s most influential designers” by Bloomberg Businessweek
has invented several usability methods including heuristic
evaluation (Nielsen’s ten usability heuristics for interface
design). Dr. V. Santhi 19
Shneiderman’s 8 Golden Rule
Assignment
Choose any common software interface. Analyze its interfaces
by navigating to find out if it adheres to the eight Shneiderman
Rules . Use a Novice User as your reference.
Example: Excel Sheet
User: 10th standard student.
Present your findings in terms of number of violations per rule
for the chosen software.
Dr. V. Santhi 20
Norman’s 7 Principles
In 1988, Donald Norman proposed seven principles for the
evaluation of the interaction between Humans and Computers.
Later he formulated a model to understand & integrate a user into
the Interface design cycle.
He intended seven stages to be used to transform difficult tasks for
which HCI & interface was under development into simple ones.
Dr. V. Santhi 21
Norman’s 7 Principles
Principles underlying the seven stage model
1. Use both knowledge in world & knowledge in the head
2. Simplify task structures.
3. Make things visible
(bridge the gulfs of Execution and Evaluation.)
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.
Dr. V. Santhi 22
Norman’s 7 Principles
1. Use both knowledge in world & knowledge in the head
The User models his/her knowledge in/of the world into his /
mental realm by the process of cognition.
The user’s knowledge model is not necessarily the same as the
knowledge model of the world.
The question is which one should the designer take as reference
– Knowledge in the World ?
– or Model of world knowledge in the User’s Mental realm ?
Hence Norman’s principle mandates that both types of
knowledge be considered.
Dr. V. Santhi 23
Norman’s 7 Principles
1. Use both knowledge in world & knowledge in the head
Semantic level describes the set of objects, attributes and
operations, which the ‘system’ and the ‘user’ can communicate.
Semantics is about how the user interprets and makes
meanings out of the system.
Syntactic level describes which conceptual entities and
operations may be referred to in a particular command context
or system state.
Interaction level describes the translation of commands and
objects into the associated physical actions and the structure of
the interaction, including typing / mouse / gesture / voice / tactile
rules.
Dr. V. Santhi 24
Norman’s 7 Principles
1. Use both knowledge in world & knowledge in the head
Text should be kept to a minimum and the language used should
be clear and concise.
Alerts and prompts will help guide users through the system.
Keyboard shortcuts and manual controls improve performance
for expert users but should never be used as the only way of
carrying out important tasks.
Dr. V. Santhi 25
Norman’s 7 Principles
2. Simplify task structure
Task Level is to analyze the user's needs and to structure the
task domain in such a way, that a computer system can play its
part.
The task level describes the structure of the tasks which can be
delegated to the computer system.
This principle states that a ‘Task’ is to be broken down (by
analysis) to their simplest action level such that at each level
there is as far as possible only one action involved.
Doing so makes mapping with the Computer’s programming
langue easy for a HCI designer to build Interactive Interfaces &
Hierarchies.
Use features like tooltips, Dr.
undo and history to help aid memory. 26
V. Santhi
Norman’s 7 Principles
2. Simplify task structure: Affordance
Dr. V. Santhi 27
Norman’s 7 Principles
2. Simplify task structure
Dr. V. Santhi 28
Norman’s 7 Principles
3. Make things visible
Objects at the Semantic level need to be mapped to the objects
at Syntactic level, for the user. This is achieved with making the
connection as ‘Visual’ as possible.
Graphic User Interface designers use ‘ Metaphors’ to make the
connection.
Always give good feedback to the user about the state of the
system and make the outcomes of their actions as obvious as
possible.
Example:
Delete action (at the Semantic Level) (Command Line) =
Waste paper basket to dump. (Syntactic level object )
(natural language) Dr. V. Santhi 29
Norman’s 7 Principles
3. Make things visible
Dr. V. Santhi 30
Norman’s 7 Principles
3. Make things visible
hamburger side-bar menus and tab-bar menus
Dr. V. Santhi 31
Norman’s 7 Principles
4. Get the mapping right
Mapping: the link between what user wants to do and what is
perceived as possible - by the user based on the user’s own
logic.
User Mental Model = Conceptual Model = Designed Model
Dr. V. Santhi 32
Norman’s 7 Principles
4. Get the mapping right
Take the common light switch, it’s an example of particularly
bad mapping, with no natural or logical connection between the
switch on the wall and the light in the room. How many times
have you tried to turn on one light only for another to come on?
We need to exploit natural mappings, like placing a delete button
next to the item it deletes, to help the user develop an accurate
mental model of the system.
Another way to strengthen the mapping is to use icons and
graphics as metaphors e.g. folder icons for documents and the
shopping basket for e-commerce sites.
Ex.: natural scrolling to Mac OS X Lion
Dr. V. Santhi 33
Norman’s 7 Principles
4. Get the mapping right
Dr. V. Santhi 34
Norman’s 7 Principles
5. Convert constraints into advantages
This is about how to ensure that the user knows what to do next
when there are more than one possibility or more than one given
option.
In other words how a designer needs to embed constraints in
the sequence of operations in an interface such that the user is
guided to the right sequence choice by reducing the chance of
error in choosing the wrong option.
As a principle, Interfaces need to have any of the three type of
constraints:- Physical; Technological; Cultural
Physical constraints : Based on shape , size, area (example
mouse over area demarcation)
Dr. V. Santhi 35
Norman’s 7 Principles
5. Convert constraints into advantages
Cultural constraints : Culturally & semantically practiced rituals,
symbols, color codes. Ex: Always start from Right & stop on Left
lower end in a word document.
Technological constraints: Example: Closing a file without saving
– user needs to be warned every time this is likely to be
operated by the user. Program it such that it is mandatory to
press the save button before close button.
Visibility and feedback: Visual design also can suggest
constraints. Ex: If a number of identical buttons are required for
diverse functions, Visually building differences such as colour or
grouping , it is possible to ‘ constrain’ a user in not pressing
randomly the identical looking buttons placed in close proximity 36
Dr. V. Santhi
Norman’s 7 Principles
5. Convert constraints into advantages
For example, if your application requires an email registration in
order for people to use it then ask the user to fill in their email
address twice and make sure both are being validated as actual
email addresses.
The user should feel that there is only one possible outcome of
the action they are about to take.
Dr. V. Santhi 37
Norman’s 7 Principles
6. Design for Error
Errors are not taken as human faults in users in HCI.
This means Errors by users cannot be blamed on Users.
Users are not the cause for errors.
Often errors are ‘slips’ - intend to do one thing but end up doing
another accidentally.
Errors happen when there is a mismatch between User’s mental
model, designers' understanding of User’s mental model;
system limitations.
Research literature revels that Errors can be classified as:-
Description; Data; Associative Action Errors
Dr. V. Santhi 38
Norman’s 7 Principles
6. Design for Error
Description Errors: Two objects physically alike are described /
taken mistakenly for each other.
One solution employed is ‘ highlighting’ the object which is in line
of next action so that ‘ attention’ is drawn to that right object from
amongst similar looking group of objects.
Dr. V. Santhi 39
Norman’s 7 Principles
6. Design for Error
Dr. V. Santhi 40
Norman’s 7 Principles
6. Design for Error
Associative Action Errors: Associative Errors are those that
involve activating one sequence in place of another and
realising it when the wrong /unexpected response results.
Associative Errors also happen when short term memory is
overloaded or long term memory fails.
Forgetting to do something as prescribed or reversing the
sequence
Pressing the second button first instead of the first button etc
Slips’ & Errors need to be taken care of in Design by providing
feed back (either pre or post action ).
Example : Prompting.
Dr. V. Santhi 41
Norman’s 7 Principles
7. When all else is unsuitable - standardize
This can be rephrased as ‘don’t reinvent the wheel’. If there isn’t
a quicker, easier or simpler way to carry out a task then tap into
the learned knowledge and behaviours the user has already
acquired’.
In certain situations / contexts wherein the nature of the task is
critical , the user needs to be ‘ forced’ to follow the only choice
as given (afforded) by design.
Example of such situations are : Medical Devices; Warfare
equipment; Nuclear Equipment; Power Plant Controls,
Energy Grids; Air Traffic Controls etc
In such critical application contexts ‘ STANDARDISATION’
practice is followed. Dr. V. Santhi 42
Norman’s 7 Principles
7. When all else is unsuitable - standardize
However very stringent usability testing & evaluation practice is
followed before ‘standardising’ the format for both INPUT as well
as the OUTPUT .
Designers of smart phones in the post iPhone era got heavily
criticised for lack of originality but the problem had largely been
solved and a successful standard already established by Apple.
Dr. V. Santhi 43
Donald Norman’s Model of Interaction
Seven stages
o user establishes the goal
o formulates intention
o specifies actions at interface
o executes action
o perceives system state
o interprets system state
o evaluates system state with respect to goal
Dr. V. Santhi 44
Donald Norman’s Model of Interaction
Execution / Evaluation Loop
Dr. V. Santhi 45
Donald Norman’s Model of Interaction
Execution / Evaluation Loop
Dr. V. Santhi 46
Donald Norman’s Model of Interaction
Execution / Evaluation Loop
Dr. V. Santhi 47
Donald Norman’s Model of Interaction
Execution / Evaluation Loop
Dr. V. Santhi 48
Donald Norman’s Model of Interaction
Understanding Norman’s Model with Example
Dr. V. Santhi 49
Donald Norman’s Model of Interaction
Some systems are harder to use than others
Gulf of Execution
represents the difference between user’s formulation of the
action to reach their goals and the actions allowed by the
system.
user’s formulation of actions ≠ actions allowed by the system
Gulf of Evaluation
is the difference between physical presentation of system state
and the expectations of the user.
user’s expectation of changed system state ≠ actual
presentation of this state
Dr. V. Santhi 50
Donald Norman’s Model of Interaction:: Assignment
Draw the Users Mental Model for a Transfer of Money from one
account to another on an ATM
Dr. V. Santhi 51
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
Dr. V. Santhi 52
THANK YOU FOR YOUR
ATTENTION !
Dr. V. Santhi 53