Web Design

Fundamentals

Fall 2024/2025

Capabilities
of Human
 Capabilities of Human Being

• Human senses and

perception .
• Types of human memory .
• Mental models.
 What is Usability

🞇Usability is a quality attribute that assesses

how easy user interfaces are to use. The word
“Usability" also refers to methods for improving
ease-of-use during the design process.
Visitors will leave your website if:
 Visitors will leave your website
if:
1. they find it difficult to use
2. the homepage fails to clearly state what a company offers
and what users can do on the site
3. users get lost on the website

4. If a website's information is hard to read or doesn't

answer users' key questions
🞇 The first law of e-commerce is that if users cannot
find the product, they cannot buy it either.
🞇 For intranets, usability is a matter of employee
productivity.
 Usability is not a
🞇
single quality
Usability has five main
components:
1. Learnability
2. Efficiency
3. Memorability
4. Error minimization
5. Subjective Satisfaction
Usability
 1. Learnability  How easy is it for users to do the
basic
things the first time they meet the design?
2. Efficiency  Once users have become
familiar with the site, how quickly can they achieve
their objectives?
3. Memorability When users return to the site after
not using it for some time, can they remember
enough to use it efficiently?
4. Error minimization  How often do users make
errors
Usability

while using the site?

How severe are the consequences of these
errors? How easily can users get back on the right
track?
5. Subjective satisfaction  How much does the
user like using the site?
 1. Designers Obviously.
2. Developers Need to know enough to:
Who needs to understand web usability?

🞇 Raise any usability problems with the designers before writing any pages.
🞇 Avoid creating usability problems if they modify the design while they're working.

3. Owners Current and would-be; especially if

they are not involved in design or development
-they're putting their money and reputations
on the line, so they need to know enough to:
🞇 insist on usability at the start of a project
🞇 check whether the site is usable before they pay the developers' invoice.
Usability
The Human Perspective
 Memory
Three Types of Memory
There are three main types of memory that are
processed in the brain:
• Sensory Memories
• Short-term Memories
• Long-term Memories
 Memory
Sensory Memories
Sensory memories are the memories which are stored for tiny time periods
and which originate from our sensory organs (such as our eyes or our nose).
They are typically retained for less than 500 milliseconds.
Visual sensory memory is often known as iconic memory.– that is without any
conscious effort to do so.
It is a limited form of processing which does not attempt to make sense of
the whole image received but rather to a small set of features of the image –
such as colors, shapes, tilt, curvature, contrast, etc.
 Memory
Short-Term Memories
Short-term memory is used to process sensory memories which are of
interest to us – for whatever reason. The sensory memory is
transferred to the short-term memory where it may be processed for
up to a minute.
 Memory
In most instances the memories
transferred to our short-term memories
are quickly forgotten. This is, probably, a
Long-Term good thing. If we didn’t forget the
Memories huge volumes of information that we
perceive on a daily basis we could
well become overloaded with
information and find processing it in
a meaningful way soon became
impossible
In order for most
memories to transfer This is why students review for
from short-term to examinations; the repeated
long-term memory – application of information or
Conscious effort must rehearsing of information enables
be made to effect the the transfer of the material they are
transfer. studying to long-term memory.
Memory
 The vast majority of interaction between
the user and an information visualization
will occur in sensory and short-term
memory.

The processes by which we are able to

Memor
remember items that are stored in long-
term memory are complex and are the
subject of much psychological research.

y
However, a factor that greatly affects our
ability to remember something is its
familiarity.

This is why the use of graphical icons in

a user interface can aid usability: the
more meaningful a graphical element or
a name appears to be, the more likely its
meaning is to be remembered. For this
reason, the meaning of menu items like
"Print" and icons like are more likely to
be remembered than "Control-X" or "F4".
 Questions:

How do we think?

MENTA
How do people understand some
L domain of knowledge?
MODEL
S What is the result of perception?

How do we anticipate the world

and make sensible decisions
about what to do? What triggers
thinking and reasoning?
MENTAL MODELS

Answer:

The answer is simple we rely on “Mental Perception and linguistic comprehension

Models”. yield mental models and thinking and
reasoning are the internal manipulations
of mental models. - Phil Johnson-Laird.
What are Mental Models?
A persons thought process of understanding the world. It allows people to
make assumption about how things work and unconsciously influence our
behaviour and decision making.

Our mental models of how bicycles work can

“simulate”
this to know it won’t work
 MENTAL MODELS
Example of everyday thoughts: (Deductive reasoning)
How do you solve the following reasoning problem?
Adam is taller than Bob.
Bob is taller than Dan.
so what do you know about Adam and Dan?

Answer:
Adam is taller than Dan.
How we conclude it? Mental calculation Image or model of the world

We apply logical rules of universal instantiation and

modus ponens, to translate the given information into
predicate calculus

Adam as taller than Bob Bob as taller

than Dan

We use their encoding of the transitivity of “taller

than” to infer that Adam is taller than Dan.
 MENTAL MODELS

Why research on Mental

Models?

The better our understanding

(models) of the knowledge
involved, the

better we would be able to

simulate, teach and test it.
 •How are mental models
constructed?
•Cognitive scientists have argued that
the mind constructs mental models as a
result of perception, imagination and
knowledge, and the comprehension of
discourse
•Perception:
•Becoming aware of something by
MENTAL seeing, hearing or by using other
senses.
MODEL •Imagination:

S •Forming new ideas, or images or

concepts of external objects.
•Knowledge:
•What is known perceptual experience
and reasoning.
•Comprehension of discourse:
•The action of understanding something
by written or spoken communication.
 MENTAL
MODELS
•“Mental Models” in HCI
•"In interacting with the environment, with
others, and with the artifacts of technology,
people form internal, mental models of
themselves and of the things with which
they are interacting. These models provide
predictive and explanatory power for
understanding the interaction.“
•- Norman, D
•Term Distinctions:
•Norman (1983) offers some differentiation
between the terms conceptual and
•mental models and suggests
considerations:
• The target system
• The conceptual model of the target system
(teachers, designer’s)
• The system image
• The users’ mental model of the target
“Mental Models” in HCI
• Users develop an understanding of a system through
learning & using it
• This type of understanding is often described as a mental
model
• How to use the system (what to do next)
• What to do with unfamiliar systems or unexpected situations
(how the system
• works)
• People make inferences using mental models of how to carry
out tasks

SYSTEM USER
Mental
Models

Interface
(Conceptualmodel)
 Why research of mental model
in HCI?

Developing better system

conceptual model leads to:
MENTA • Easy Learning

L • Increase motivation to use the

system
• Better understanding the complexity
MODEL of the system and task
• Better Performance
S • Problem solving skills
• Efficiency
• Accuracy
• A conceptual model is a
representation designers create to
convey a system's functionality and
behavior. In contrast, a mental model
represents users' beliefs and
assumptions about that system. While
conceptual models guide design
 Guidelines for Design
Allows users to
predict consequences
Provide a good of actions
conceptual model Communicated
through the image of
the system
Relations between
Make things user’s intentions,
MENTA visible required actions, and
results

L should be
Sensible
Consistent
Meaningful (non-
MODEL arbitrary)

S Make use of visible affordances,

mappings, and constraints

Remind person of what can be

done and how to do it

To conclude, designer’s should

be aware of users’ mental
model.
MENTAL MODELS
Next lecture Know the user