UI UX Law

These UX principles guide product design as they shed light on

the psychology behind users’ expectations.

Therefore, following them is a must for anyone aiming to create

winning designs.

When it comes to good design, there are several principles that

make designers and their work stand out when applied.

UI UX laws are an understanding of psychology — specifically the

psychology behind how users behave and interact with digital
interfaces.
Fitts’s Law

• The time to
acquire a target
is a function of
the distance to
and size of the
target.
 According to this design law by
psychologist Paul Fitts, a design’s
usability increases by making sure the
interactive element is:
Large enough for users to select it easily

Fitts’s Separate from other elements in the interface

(larger in size and differently colored, for
Law instance)
Clickable anywhere so it’s easy to carry out the
action and

Within a users’ reach so they have to do

minimal work
 For example, floating social media
sharing options are typically within a
site visitors’ reach—encouraging them
to share content.
Fitts’s
Law Another way to make sure the target
is easy to acquire: arrange the action
item(s) in a pie menu. Here, choices
are presented at an equal distance in
a circle—in sharp contrast with a
navigation bar where the travel
distance is longer.
Hick’s
Law

• The time it takes to make a decision

increases with the number and
complexity of choices.
 Takeaways

Minimize choices when response times

are critical to decrease decision time.
Hick’s Break complex tasks into smaller steps in
order to decrease cognitive load.
Law 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.
 • Users spend most of their time on
Jacob’s other sites. This means that users
Law prefer your site to work the same
way as all the other sites they
already know.
 This law was defined by the
director of the Nielsen Norman
Group, Jakob Nielsen, who insists
you design for familiarity.
Jacob’s
Law Since the best designs are user-
centric, it helps to leverage
prevailing mental models or to
create designs that meet users’
expectations. For instance, users
expect to find the ‘shopping bag’
on an ecommerce site in the
navigation bar.
Put simply, designing according to
existing mental models reduces the
friction involved in learning to navigate a
design.
This, in turn, improves user experience
as users can easily focus on the task at
hand.
Takeaways

Users will transfer expectations they have built around one familiar
product to another that appears similar.

By leveraging existing mental models, we can create superior user

experiences in which the users can focus on their tasks rather than on
learning new models.

When making changes, minimize discord by empowering users to

continue using a familiar version for a limited time.
Examples
• Form Controls
• Things like form toggles,
radio inputs, and even
buttons originated from the
design of their tactile
counterparts.
 Users group together elements or
objects that are positioned close to
each other.
Law of
Proximi Like the Law of Common Region, this
ty law is also a grouping principle that
makes it easy for users to interact with
your design. And, like the law above, it
means that users perceive elements
that are near each other or arranged
close together in a series to be linked.
 Objects that are near, or proximate to
each other, tend to be grouped
together.
Takeaways

Law of Proximity helps to establish a

Proximi relationship with nearby objects.

ty Elements in close proximity are

perceived to share similar functionality
or traits.
Proximity helps users understand and
organize information faster and more
efficiently.
Example
 The average person
can hold only 7 (plus or
minus 2) items in their
Miller’s working memory.
Law Miller’s law explains
why attention is
limited.
 Since people can hold seven items in their working
memory at most, aim to reduce their cognitive load or the
mental effort it takes to remember everything to make a
decision.
Some ways to do so:

Minimize choices as Hick’s Law states

Miller’s
Law
Design based on learning models to reduce learning load
(circle back to Jacob’s Law for this)

Keep your design clutter-free so there are fewer design

elements vying for users’ attention

Google Meet’s design follows these principles—clutter-free

design with minimal choices.
Miller’s Law
• Google Meet’s design follows
these principles—clutter-free
design with minimal choices.
 Don’t use the “magical number
seven” to justify unnecessary
design limitations.

Miller’s Organize content into smaller

chunks to help users process,
Law understand, and memorize easily.

Remember that short-term

memory capacity will vary per
individual, based on their prior
knowledge and situational
context.
 Users tend to perceive similar
elements in a design as a whole even
if the elements are separated.
Law of
Similari This means consumers perceive visually

ty similar elements in a design such as those

sharing the same color, size, shape,
orientation, and movement as related in
meaning or functionality. This is why clicked
links have a different color in contrast with
those that aren’t. Google’s purple color for
a link you’ve visited is a prime example:
Takeaways

Elements that are visually similar will be

perceived as related.

Color, shape, and size, orientation and

movement can signal that elements belong
to the same group and likely share a
common meaning or functionality.
Ensure that links and navigation systems are
visually differentiated from normal text
elements.
Law of Common Region
• Elements tend to be perceived into groups if they are sharing an area
with a clearly defined boundary.
When users visit a design, they make quick
judgments based on grouped elements in a target
area to understand which UI areas to interact with.

Shading a group of elements, adding a background

color, or designating elements in the header, footer,
and navigation panel are some ways to create
common regions for interactive designs.
Takeaways

Common region creates a clear structure

and helps users quickly and effectively
understand the relationship between
elements and sections.
Adding a border around an element or
group of elements is an easy way to
create common region.

Common region can also be created by

defining a background behind an element
or group of elements.
Serial Position
Effect

• People best remember the

first and last items in a given
sequence.
• Takeaways
[Link] 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.
[Link] key actions on
the far left and right within
elements such as navigation
can increase memorization.
 • The Von Restorff effect or The Isolation
Effect says that people are more likely
to remember an object that’s even
slightly different than other similar
objects.
• Takeaways
Von [Link] important information or key actions
visually distinctive.

Restorff [Link] restraint when placing emphasis on

visual elements to avoid them competing

Effect with one another and to ensure salient items

don’t get mistakenly identified as ads.
[Link]’t exclude those with a color vision
deficiency or low vision by relying exclusively
on color to communicate contrast.
[Link] consider users with motion
sensitivity when using motion to
communicate contrast.
• People remember uncompleted or
interrupted tasks better than
completed tasks.
• Takeaways
[Link] content discovery by providing
clear signifiers of additional content.
[Link] artificial progress towards a
goal will help to ensure users are more
likely to have the motivation to
complete that task.
[Link] a clear indication of progress
in order to motivate users to complete
tasks.
Example
Tesler’s Law

• Tesler’s Law or the Law of

Conservation of Complexity
states that there’s a certain
amount of complication that’s
intrinsic to every system.
• Each design has a certain level of
complexity to it. Your responsibility
is to reduce the complexity as
much as possible. By doing so, you
can help users focus on the task at
hand instead of figuring out how to
navigate the design.
Peak-End Rule

• People judge an experience based on

how they felt at peak moments and
at the end, instead of the average or
sum of all moments of the
experience.
• Takeaways
1. Pay close attention to the most intense
points and the final moments (the “end”)
of the user journey.
2. Identify the moments when your product
is most helpful, valuable, or entertaining
and design to delight the end user.
3. Remember that people recall negative
experiences more vividly than positive
ones.
Example

• Uber
• Negative events also provide
emotional peaks and can
contribute to a user’s lasting
impression of an experience. By
focusing on people’s perceptions
of time and waiting, Uber was
able to reduce its post-request
cancellation rate and avoid what
could easily become a negative
emotional peak while using their
service.
Doherty Threshold

• Human-computer
interaction is ideal
when the
interaction pace is
less than 400 ms
so that no one has
to wait for the
other’s response.
• The Doherty Threshold is all
about your design’s timely
reaction. The idea is to hold
your audience’s attention by
making them feel they’re in
charge of the interaction.
• Think of it like this: when
people see a response to
each of their clicks, they’re
likely to feel in charge of the
interaction, which helps them
stick with using the interface.
A good rule of thumb is to display a response within
one second of the user action to encourage
navigation. If you go any slower, you risk losing users
as they feel that the design isn’t responding and it’s
holding them back.

Even if the process takes long, ensure the design

engages users in the meantime. Progress bars and
animations can help by telling users there’s work
going on in the background.
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.
Aesthetic-Usability
Effect

• Users often
perceive
aesthetically
pleasing design
as design that’s
more usable.
 • Takeaways
[Link] aesthetically pleasing design
creates a positive response in
people’s brains and leads them to
Aesthetic- believe the design actually works
better.
Usability [Link] are more tolerant of minor
Effect usability issues when the design of a
product or service is aesthetically
pleasing.
[Link] pleasing design can mask
usability problems and prevent
issues from being discovered during
usability testing.
 • first impressions matter. So, make
sure yours is a visually appealing
one.
• In fact, scientists analyzed the
Aesthetic- impact of visual appeal on site
Usability usability and learned that the visual
appeal of a design influences first
Effect impressions the most. Test
participants gave high interest and
usability ratings to websites that
looked visually stunning and low
interest and ratings to sites with low
visual appeal.
Goal-gradient effect
The closer users are to a goal, the faster they are going to
work to complete it.
• Dropbox’s onboarding process.
It uses a checklist to tell users
how much of the job is
complete, therefore,
leveraging the goal-gradient
effect to encourage them to
complete the onboarding
process.
• it’s essential to provide a
visual representation of the
progress made or highlight the
remaining steps to motivate
users. Uber’s UX is another
fitting example. The app tells
users their wait time to keep
them glued to their goal:
Takeaways

The closer users are to completing a

task, the faster they work towards
reaching it.
Providing artificial progress towards a
goal will help to ensure users are
more likely to have the motivation to
complete that task.
Provide a clear indication of progress
in order to motivate users to complete
tasks.
Law of Visually
Uniform connected
elements are

Connectedn
perceived as
more related
than elements

ess with no
connection.
This one’s another grouping principle. According to it, users see
grouped-together elements as connected. Again, this means you
use visual direction to group elements that are linked to meet
your audience’s expectations.

For instance, use the same shapes, frame, or color to unite

related elements
• . This log in screen from Workona shares
linked elements related to signing in in a
white-colored box:
 People interpret complex or
ambiguous images in simple
forms because interpretation
Law of takes cognitive effort.

Prägnan In simple words, audience will always

find simplicity in complex or
z ambiguous designs to save
themselves from the mental overload.
It’s why call to action (CTA) buttons
tend to be rectangles rather than
hexagons or any other complex
structure.
Takeaways

The human eye likes to find simplicity

and order in complex shapes because it
prevents us from becoming overwhelmed
with information.
Research confirms that people are better
able to visually process and remember
simple figures than complex figures.

The human eye simplifies complex

shapes by transforming them into a
single, unified shape.
 Select a design with the lowest possible
complication.

Occam’s Razor comes in handy when you’re choosing

between design prototypes. The goal is to select the
design that’s simplest among all the options.
Takeaways

Occam’
s Razor
The best method for reducing complexity is to avoid it in
the first place.

Analyze each element and remove as many as possible,

without compromising the overall function.

Consider completion only when no additional items can be

removed.
 80% of the results come from 20% of
the work.

Takeaways

Pareto Inputs and outputs are often not evenly

Principl distributed.

e A large group may contain only a few

meaningful contributors to the desired
outcome.
Focus the majority of effort on the areas
that will bring the largest benefits to the
most users.
You’ll find it highly valuable for projects with limited resources or
tight timelines.

By keeping the Pareto principle in mind, focus on designing areas

that’ll deliver the largest benefit to your audience. A minimum
viable product (MVP) is an example of the Pareto Principle.
Designers create low-fidelity prototypes that take less input but
demonstrate the bulk of the outcome. To top that, UX designers can
leverage this principle for prioritizing features to build by focusing
on the ones that deliver the most results.
 • Any task will inflate until all of the available
time is spent.
• Takeaways
[Link] the time it takes to complete a task to
what users expect it’ll take.
Parkinson [Link] the actual duration to complete a
’s Law task from the expected duration will improve
the overall user experience.
[Link] features such as autofill to save the
user time when providing critical information
within forms. This allows for quick completion
of purchases, bookings and other such
functions while preventing task inflation.
• users expect to fill in
forms within three
minutes (the exact
expectation varies on
the task at hand
though. You can identify
it using usability tests
that show users
completing the task in
question). Anything
shortening this duration
works as a positive
Postel’s Law

• Be flexible in what you accept

from your users and limit what
you ask of them.
• Take what users share with you.
• Ask for limited information. This
means you ask for only what’s
important to encourage folks to
take action—the same as Netflix
does. After all, filling in a long
form to get access to an eBook
or service is repelling, isn’t it?
• Takeaways
1. Be empathetic to, flexible about, and tolerant
of any of the various actions the user could
take or any input they might provide.
2. Anticipate virtually anything in terms of input,
access, and capability while providing a
reliable and accessible interface.
3. The more we can anticipate and plan for in
design, the more resilient the design will be.
4. Accept variable input from users, translating
that input to meet your requirements, defining
boundaries for input, and providing clear
feedback to the user.