Download as pdf or txt
Download as pdf or txt
You are on page 1of 44

The Laws of UX

Sohanul Habib & Alif Iftekhar


Laws of UX
Zeigarnik Effect Fitt’s La
Von Restorff Effect : The isolation effect Gestalt Law of perceptual organization
Tesler’law : Law of conservation of : law of proximity
complexit Gestalt Law of perceptual organization
Serial Position Effect : First & Las : law of continuity
Postel’s La Gestalt Law of perceptual organization
Pareto Principl : law of similarity
Occam’ Razo Gestalt Law of perceptual organization
Jacob’s La : law of closure
Doherty’s Threshol Gestalt Law of perceptual organization
Miller’s La : law of common region
Hofstadter’s la Hick’s Law : Hick-hyman’s la
Amara’s Law the aesthetic usability effect
Laws of UX
Goal gradient effec
false consensus effec
weber’s la
the rules of the first impressio
peak - end rul
the principle of familiarit
picture superiority effec
figure groun
law of pragnan
progressive disclosur
information scen
Parkinson’s Law
Zeigarnik Effect

Discovered by Lithuanian psychologist Bluma Zeigarnik in 1927,

the Zeigarnik Effect states that humans have a far easier time
remembering an incomplete task than one that's completed.

People remember interrupted tasks better than


completed tasks

Invite content discovery by providing clear signifiers of


additional content

Provide a clear indication of progress in order to


motivate users to complete tasks.

Bluma Zeigarnik
Von Restorff Effect

The Von Restorff effect, also known as The Isolation


Effect, predicts that when multiple similar objects are
present, the one that differs from the rest is most likely
to be remembered

Make important information or key actions visually


distinctive

Use restraint when placing emphasis on visual elements


to avoid them competing with one another and to
ensure salient items don’t get mistakenly identified as
ads

Don’t exclude those with a color vision deficiency or low


vision by relying exclusively on color to communicate
contrast.

Hedwig von Restorff


Tesler’law
The origins of Tesler's law can be traced back to the
mid-1980s, when Larry Tesler, a computer scientist
at Xerox PARC

Tesler’s Law, also known as The Law of Conservation of


Complexity, states that for any system there is a certain
amount of complexity which cannot be reduced.

Xerox PARC
Serial Position Effect
German psychologist Hermann Ebbinghaus in
1885 after conducting a series of memory experiments

Users have a propensity to best remember the first and


last items in a series

Placing the least important items in the middle of lists


can be helpful because these items tend to be stored
less frequently in long-term and working memory.

Positioning key actions on the far left and right within


elements such as navigation can increase
memorization

A practical example of this law would be in Instagram.

Hermann Ebbinghaus
Postel's Law
Jon Postel was an American computer scientist who helped to
develop the basic protocols on which the Internet is built.

Be liberal in what you accept, and conservative in what


you send

Postel's Law was formulated by Jon Postel, an early


pioneer of the Internet. The Law was really a guideline
for creators of software protocols. Computers used
protocols to communicate with one another on the
Internet. The idea was that different implementations of
the protocol should interoperate.

Jon Postel
Pareto Principle
This principle was formulated by the 19th-
century Italian economist Vilfredo Pareto

The Pareto principle states that for many outcomes,


roughly 80% of consequences come from 20% of
cause

In other words, a small percentage of causes have an


outsized effect. This concept is important to understand
because it can help you identify which initiatives to
prioritize so you can make the most impact.

Read more

Vilfredo Pareto
Occam’ Razor

4th–century friar William of Ockham that says that if you


have two competing ideas to explain the same
phenomenon, you should prefer the simpler one.

When presented with competing hypotheses to solve a


problem , one should select the solution with the
fewest assumptions.

Friar William of Ockham


Jakob’s Law

Users spend most of their time on other sites. This

means that users prefer your site to work the same

way as all the other sites they already know

Coined by the “guru of web page usability”, Jakob

Nielsen, this law suggests that users transfer all the

expectations formed f rom their experience of using a

product in the past to anything new they use that

appears similar

In essence, don’t try and reinvent the wheel; make

essential elements of the website follow convention to

offer the best user experience.

Jakob Nielsen
Jakob’s Law

Example: This law is is typically applied in designing

websites

The example above shows screenshots f rom

Booking.com and Expedia, two travel booking sites that

display conventional UI/UX

On each website, both the search feature and all

essential elements are almost identical, so users will

have no trouble using one or the other

So, if you were to create your travel booking platform,

you wouldn’t put the “Check Out” field before the

“Check-In” field as it would make no sense and confuse

users.
Doherty’s Threshold

Productivity soars when a computer and its users

interact at a pace (<400ms) that ensures that neither

has to wait on the other

Provide system feedback within 400 ms in order to keep

users’ attention and increase productivity

Use perceived performance to improve response time

and reduce the perception of waiting

Animation is one way to visually engage people while

loading or processing is happening in the background

Progress bars help make wait times tolerable, regardless

of their accuracy

Purposefully adding a delay to a process can actually

increase its perceived value and instill a sense of trust,

even when the process itself actually takes much less

time.
Walter J. Doherty
Doherty’s Threshold

Example 1 – Deliveroo: When searching for restaurants

on Deliveroo, there is a slight delay whilst the webpage

populates. To keep users attention during that lag time,

a pop-up appears to keep users attention, conveying an

offer and information on how to redeem it.

Doherty’s Threshold

Example 2 – Canva: An animated progress bar is used to

keep users’ attention whilst waiting for their designs to

download, which varies in time depending on the

content.

Miller's Law
Miller's law originates from a paper published in 1956 by cognitive
psychologist George Miller titled “The Magical Number Seven, Plus
or Minus Two: Some Limits on Our Capacity for Processing
Information.

The average person can only keep 7 (plus or minus 2)


items in their working memory

Don’t use the “magical number seven” to justify


unnecessary design limitations

Organize content into smaller chunks to help users


process, understand, and memorize easily.

0987654321 or 098–765–432

Remember that short-term memory capacity will vary


per individual, based on their prior knowledge and
situational context

Other examples include number of products shown on


a screen, number of elements in a dropdown,etc.
Miller's Law
The average person can only keep 7 (plus or minus 2)
items in their working memory

Don’t use the “magical number seven” to justify


unnecessary design limitations

Organize content into smaller chunks to help users


process, understand, and memorize easily.

0987654321 or 098–765–432

Remember that short-term memory capacity will vary


per individual, based on their prior knowledge and
situational context

Other examples include number of products shown on


a screen, number of elements in a dropdown,etc.

George Miller
Hofstadter’s law
Hofstadter's law, conceived by the cognitive
scientist Douglas Hofstadter, goes like this: any task you're
planning to complete will always take longer than
expected - even when Hofstadter's law is taken into
account.

It always takes longer than you expect, even when you


take into account Hofstadter’s Law

Douglas Hofstadter
Amara’s Law

We tend to overestimate the effect of a technology in

the short run and underestimate the effect in the long

run

Here are a few examples of technologies where Amara's

Law has been evident

The Internet: In the early days, many people didn't grasp

the full potential of the internet. Today, it has

revolutionized communication, business, and almost

every aspect of our lives

Artificial Intelligence (AI): Initial excitement about AI in

the 1960s led to disappointment as it failed to deliver on

its promises. However, recent advancements have

shown AI's potential to transform industries and our

daily lives

Electric Vehicles (EVs): Early adoption of EVs was slow,

and many doubted their feasibility. Today, they are

becoming mainstream as the technology advances and Roy Amara

environmental concerns grow. American researcher


Fitt’s Law
Psychologist Paul Fitts (1912-1965) published his theory on
“human mechanics and aimed movement” in 1954. He had
seen that the action of pointing at or tapping on a target
object could be predicted using mathematics and that it
could be measured.
The time to acquire a target is a function of the
distance to and size of the target

Touch targets should be large enough for users to


accurately select them

Touch targets should have ample spacing between


them

Touch targets should be placed in areas of an interface


that allow them to be easily acquired.

Paul Fitts
Gestalt Law of perceptual
organization : law of
proximity
German psychologists Max Wertheimer, Kurt Koffka,
and Wolfgang Kohler created the Gestalt Principles in
the 1920s.

Objects that are near, or proximate to each other, tend


to be grouped together

The principle of proximity states that things that are


close together appear to be more related than things
that are spaced farther apart

Proximity helps to establish a relationship with nearby


objects

Proximity helps users understand and organize


information faster and more efficiently

Group the related items together and our mind will do


the rest and differentiate them.
Gestalt Law of perceptual
organization : law of
continuity
The principle of continuity states that elements that are
arranged on a line or curve are perceived to be more
related than elements not on the line or curve.

In the top image , for example, the red dots in the


curved line seem to be more related to the black dots
on the curved line than to the red dots on the straight
horizontal line. That’s because your eye naturally follows
a line or a curve, making continuation a stronger signal
of relatedness than the similarity of color

For Example please look at the bottom image :


Amazon uses continuity to communicate that each of
the products below is similar and related to each other
(books of similar topics that are available for purchase).
Gestalt Law of perceptual
organization : law of
similarity
The principle of similarity states that when things
appear to be similar to each other, we group them
together. And we also tend to think they have the same
function

GitHub uses the similarity principle in two ways on the


page below. First, they use it to distinguish different
sections. You can immediately tell that the grey section
at the top serves a different purpose than the black
section, which is also separate from and different than
the blue section. 

Second, they also use the color blue to distinguish links
from regular text and to communicate that all blue text
shares a common function.
Gestalt Law of perceptual
organization : law of
closure
The principle of closure states that when we look at a
complex arrangement of visual elements, we tend to
look for a single, recognizable pattern

In other words, when you see an image that has missing


parts, your brain will fill in the blanks and make a
complete image so you can still recognize the pattern

For example, when you look at the image beside, you


most likely see a zebra even though the image is just a
collection of black shapes. Your mind fills in the missing
information to create a recognizable pattern based on
your experience.
Gestalt Law of perceptual
organization : law of
common region
The principle of common region is highly related to
proximity. It states that when objects are located within
the same closed region, we perceive them as being
grouped together

Adding borders or other visible barriers is a great way to


create a perceived separation between groups of
objects—even if they have the same proximity, shape,
size, color, etc

For example from Pinterest , the common region


principle is used to separate each pin—including its
photo, title, description, contributor, and other details—
from all the other pins around it.
Hick’s Law
Hick's law, or the Hick–Hyman law, named after British
and American psychologists William Edmund Hick and
Ray Hyman, describes the time it takes for a person to
make a decision as a result of the possible choices:
increasing the number of choices will increase the
decision time logarithmically

Think of your app as a restaurant menu. If your menu is


super long, people will take forever to order

But if your menu is short, people will order super


quickly.

A shorter menu means a shorter order time. You don’t


need to be a psychologist to figure that out.

William Edmund Hick


Hick’s Law
The time it takes to make a decision increases with the
number and complexity of choices

Minimize choices when response times are critical to


increase decision time

Break complex tasks into smaller steps in order to


decrease cognitive load

Avoid overwhelming users by highlighting


recommended options

Use progressive onboarding to minimize cognitive load


for new users

Be careful not to simplify to the point of abstraction.


Hick’s Law
One of the greatest examples of Hick’s law in the real
world is the TV remote. Most remotes are so confusing
that websites like Boomer Tech Talk need to make a
button diagram before people can understand how to
use it.
Hick’s Law
Apple’s reaction was to make the remote simpler. The
apple remote is much easier to understand. More
importantly, users don’t have to spend so much time
figuring out how to use it.
Hick’s Law
However, reaction time isn’t everything. Many people
still hate the apple remote because it lost so much
functionality. In response to this uproar, Swiss TV
developed the alternative Salt remote

Salt still has 37 fewer buttons than the Comcast remote


depicted before, but it has significantly more
functionality than the three-button Apple remote

While both Apple and Salt use Hick’s Law to make the
user experience more enjoyable, Salt also remembers to
retain core functionality.

The same rule applies to any other simplification


redesign: make things simpler without ruining your
functionality.
The aesthetic usability
effect
The aesthetic-usability effect refers to users’ tendency
to perceive attractive products as more usable. People
tend to believe that things that look better will work
better even if they aren’t actually more effective or
efficient
In other words, users have a positive emotional
response to your visual design, and that makes them
more tolerant of minor usability issues on your site. In
most cases, this is a positive thing from your
perspective. This effect is a major reason why a good
user experience can’t just be a functional UI —
designing an interface that’s attractive as well as
functional is worth the resources.
Goal gradient effect
Coined by behaviorist Clark Hull in 1932, the Goal
Gradient Effect states that as people get closer to a
reward, they speed up their behavior to get to their goal
faster. In other words, people are motivated by how
much is left to reach their target, not how far they’ve
come.

false consensus effect


The false consensus effect is the phenomenon and
tendency to overestimate the degree to which other
people will agree with you, think like you, and behave
like you

The false-consensus effect refers to people’s tendency


to assume that others share their beliefs and will
behave similarly in a given context. This assumption can
lead UX professionals to make the wrong design
decisions. Acknowledge your vulnerability and establish
checks

Designers often assume that the people who will use


their products are like them. As a result, designers
project their behaviors and reactions onto users. But
thinking that you are your user is a fallacy: you are not
the user. The people who will use your product most
probably have different backgrounds, different mental
models, and different goals than you.

Ross et al. (1977) coined the term the false consensus effect (FCE)
weber’s law
Users don’t like dramatic changes. Subtle changes work
better because the perceived change in stimuli is
proportional to the initial stimuli

Weber’s Law states that the slightest change in things


won’t result in a noticeable difference. Research shows
that users dislike a massive change in products they
use, even if those changes will benefit users. This means
that if you do a significant redesign, there’s a high
probability that users won’t like it.

When Microsoft usually redesigned its Windows logo, the design team likely
took into account the just noticeable differences to ensure that the changes
Ernst Heinrich Weber in 1834
made to the logo were noticeable but not too drastic.The redesign aimed to
modernize the logo while retaining its core elements and brand recognition.
the rules of the first
impression
2.6 seconds is all it takes for the users to make the first
conscious impression of a website and 94% of the first
impressions on a website are based on its visuals and design.
Statistics show also that around 38% of website visitors don't
engage with unattractive web design.

People make snap judgments. It takes a fraction of a


second to make a great (or bad) first impression. Things
that users see or hear when they start interacting with a
product will shape their opinion of the product

Studies show that early impressions of a product


influence long-term attitudes about their quality.
People experience a similar phenomenon with human
attractiveness—the first impression of a person
influences how the person is perceived and treated.

peak - end rule

People judge an experience primarily based on how

they felt at its peak and at its end, rather than the total

sum or average of every moment of the experience. This

effect occurs regardless of whether the experience is

pleasant or unpleasant.

Daniel Kahneman et al
the principle of
familiarity
Users prefer your product to work the same way as all
the other products from the product's category

Users spend most of their time on other sites. This


means that users prefer that your site works the same
way as all the other sites they already know. This rule is
applicable not only to websites but to all the products
we use. By making your design predictable, you
minimize the cognitive load that user experience when
they use your product.

There is a reason why the Tesla Model S looks like a gasoline car. It even
has a grill in the front, which does not make any sense for an electric
vehicle. But it makes the vehicle look familiar for people.
picture superiority
effect
Pictures and images are more likely to be remembered
than words. Studies prove that pictures outperform text
dramatically in human memory recall
Use visual storytelling in your products. By pairing text
with images, you increase the chance that users will
remember the information.

John P. Anderson and Gordon H. Bower


figure ground
This principle refers to the human’s ability to visually
separate objects on different layers of focus. The human
eye can separate objects on different plans of focus: we
intuitively know which elements are placed in the
foreground and with ones are in the background

Every time users see the modal popup, they witnessing


a Figure-Ground effect. Material design classifies Z-axis
of elevation, which is used to design overlays.
law of pragnanz
The Law of Prägnanz (or Pragnanz) suggests that when
people are presented with complex shapes or a set of
ambiguous elements, their brains choose to interpret
them in the easiest manner possible

Prägnanz is a very useful law to keep in mind during


wireframing. Given that our eyes assemble the blocks of
elements into a single page, we should aim to make the
shapes and forms accessible to the human brain that’s
constantly trying to reduce cognitive load.
Fundamentally, we should create designs that are easily
perceivable at first glance.

German psychologist Max Wertheimer


progressive disclosure
Progressive disclosure is an interaction design pattern
that sequences information and actions across several
screens (e.g., a step-by-step signup flow). The purpose is
to lower the chances that users will feel overwhelmed
by what they encounter

Progressive disclosure defers advanced or rarely used


features to a secondary screen, making applications
easier to learn and less error-prone

Progressive disclosure is one of the best ways to satisfy


both of these conflicting requirements. It's a simple, yet
powerful idea

Initially, show users only a few of the most important


options
Offer a larger set of specialized options upon request.
Disclose these secondary features only if a user asks for
them, meaning that most users can proceed with their
tasks without worrying about this added complexity.
information scent

When deciding which links to click on the web, users


choose those with the highest information scent —
which is a mix of cues that they get from the link label,
the context in which the link is shown, and their prior
experiences

The information scent of a source of information (such


as a webpage) relative to an information need
represents the user’s imperfect estimate of the value
that the source will deliver to the user, derived from a
representation of the source

Information scent is a relative concept — meaning that


the same source of information may have different
information scents for different information needs. For
example, a link titled Food will have high information
scent if you’re looking for cheese, but low information
scent if you’re looking for a facial cleanser.
Parkinson’s Law
Parkinson’s Law states that the amount of time you give
a task to take is equivalent to the amount of time that
task will take. In other words, the work fills up the time
allotted for it. For example, if you have a week to finish
an article, the article will take all week to finish.
Basically, the more time you have available to complete
the task, the more time you will spend doing it.

1955 by the naval historian C. Northcote Parkinson


Thank you!

You might also like