Law of UX

atjahyanto@gmail.com
1. Jakob’s Law
• “Users spend most of their time on other sites,
and they prefer your site to work the same way
as all the other sites they already know.”
• This means that users prefer your site to work
the same way as all the other sites they
already know.
• 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.
Applications Jakob’s Law to UX
• The people using our website currently will have visited many other
websites in the past, they have built up experience and expectations
on how a website should work.
• If our website does not match with this experience, then we run the
risk of frustrating a user and losing their interest.
• Some things to try would be:
• Audit the competitors’ websites
• Conduct a high-level inventory table of content and features – what content
types are they providing to their users?
• Wireframe menu architecture – sketch out our website’s menu structure
along with competitors
2. Fitts’s Law
• “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.
ID = index of difficulty metric to
quantify the difficulty of a
target selection task in which the
distance to the center of the
target (D) is like a signal and the
tolerance or width of the target
(W) is like noise
Fitts’s Law
• The Fitts’s Law can be captured by
the following two statements below:
• The bigger the distance to the target,
the longer it will take for the pointer
to move to it. In other words, closer
targets are faster to acquire.
• The larger the target, the shorter the • Fitts’ s law says that the time to reach Target A is
shorter than the time to reach any of the other
movement time to it. In other words, targets.
bigger targets are better. • Although Targets A and B have the same size, the
distance from cursor to A (D1) is shorter than the
distance to B (D2), so movement to A will be
faster.
• Target C is placed at the same distance (D1) from
the cursor as Target A, but it’s smaller, so it will
take longer to move the cursor to it than to A.
Applications Fitts’s Law to UX
• Optimizing Target Size :
• Bigger Is Better
• Icons Plus Labels
• Don’t Crowd Targets
• Optimizing Distance to Target
• Menu Design

https://www.nngroup.com/articles/fitts-law/
Applications Fitts’s Law to UX
• Optimizing Distance to Target
• Menu Design
3. Hick’s Law
• “The time it takes to make a decision increases with the number and
complexity of choices available.”

• 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
• The parameters at play in Hick’s law are:
• Time (reaction time)
• Choices
• Complexity
Applications Hick’s Law to UX
• Lesser the number of choices, but …
4. Miller’s Law
• “The average person can keep only 7 (± 2) items in their working
memory.”
5…9
• 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.
• Remember that short-term memory capacity will vary per individual, based
on their prior knowledge and situational context.

• Users: beginners, experts, intermediates

• Most users are neither beginners nor experts
Applications Miller’s Law to UX
• Organizing the information : organize the content in smaller chunks
will help users to understand, process and memorize easily.
Phone number :

087182349  (087) 182-349

5. Postel’s Law
• “Be conservative in what you do, be liberal in what you accept from
others.”

• Be empathetic to, flexible about, and tolerant of any of the various actions the
user could take or any input they might provide.
• Anticipate virtually anything in terms of input, access, and capability while
providing a reliable and accessible interface.
• The more we can anticipate and plan for in design, the more resilient the design
will be.
• Accept variable input from users, translating that input to meet your
requirements, defining boundaries for input, and providing clear feedback to
the user
Applications Postel’s Law to UX
• Empathy, flexibility, and understanding for the types of actions a user
may make within your system and that we should accept inputs that
are formally incorrect and correct them when we process this data
within our product.
Examples of post-processing user input:

• Removing extra spaces (including at

the beginning and at the end of a
string)
• Automatic conversion of all alphabetic
characters to lowercase
• Autocomplete some fields in forms
• …
Law of Prägnanz
• People will perceive and interpret ambiguous or complex images in
the simplest form possible because it is the interpretation that
requires the least cognitive effort of us.
“People tend to perceive and interpret complex or ambiguous stimuli as simple and
coherent rather than complex and fragmented.”

• 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 process and
remember simple figures than complex figures visually.
• The human eye simplifies complex shapes by transforming them into
a single, unified shape.
Law of Prägnanz
• Also known as the Law of Good Continuation.
“People tend to perceive and interpret complex or ambiguous stimuli as simple and
coherent rather than complex and fragmented.”

Applications:

• Keep the interface simple and avoid unnecessary

complexity
• Maintain a consistent design throughout the
interface.
• Group related elements or actions together.
• Limit the number of colors used in the interface
and use them purposefully.
Peak-End Rule
• People judge an experience largely 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.
“People tend to judge and remember an experience based on how they felt at its peak (the most
intense or emotionally significant moment) and at its end (the conclusion or how it wraps up).”

• Pay close attention to the most intense points and the final moments
(the “end”) of the user journey.
• Identify the moments when your product is most helpful, valuable,
or entertaining and design to delight the end user.
• Remember that people recall negative experiences more vividly than
positive ones.
Peak-End Rule

“People tend to judge and remember an experience based on how they felt at its peak (the most
intense or emotionally significant moment) and at its end (the conclusion or how it wraps up).”

Applications:

• Identify key moments in the user journey where you

can create memorable and positive experiences.
• Ensure that the final steps of the user journey are
smooth, intuitive, and satisfying.
• Identify potential pain points or sources of
frustration in the user journey, especially near the
end.
• …
Law of Proximity
• Objects that are near, or proximate to each other, tend to be grouped
together.
“Objects or elements that are close to each other are perceived as related or grouped, and they are often
perceived as forming a single visual unit.”

• Proximity helps to establish a relationship with nearby objects.

• Elements in close proximity are perceived to share similar
functionality or traits.
• Proximity helps users understand and organize information faster
and more efficiently.
Law of Proximity

“Objects or elements that are close to each other are perceived as related or grouped, and they are often
perceived as forming a single visual unit.”

Applications:

• Placing related elements in close proximity to each

other, designers can visually communicate their
relationship and significance
• Important elements can be positioned closer to each
other, while less important elements are spaced
farther apart
Do you see the groups?
Serial Position Effect
• Users tend best to remember the first and last items in a series.
“People tend to remember and recall items in a list based on their position or order within that
list.”

• 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.
Serial Position Effect
“People tend to remember and recall items in a list based on their position or order within that
list.”

Applications:

• Items presented at the beginning of a list or sequence

are more likely to be remembered and recalled
compared to items presented in the middle or toward
the end.
• Items presented at the end of a list or sequence are also
more likely to be remembered and recalled, but for
different reasons.
• Organize content so that critical information or options
are presented early, taking advantage of the Primacy
Effect. For example, in an e-commerce product page,
the product's key features and price should be near the
top.
Law of Uniform
Connectedness
• Elements that are visually connected are perceived as more related
than elements with no connection.
“People perceive and group visual elements that are connected”

• Group functions of a similar nature so they are visually connected via

colors, lines, frames, or other shapes.
• Alternately, you can use a tangible connecting reference (line, arrow,
etc) from one element to the next to also create a visual connection.
• Use uniform connectedness to show context or to emphasize the
relationship between similar items.
Law of Uniform
Connectedness
“People perceive and group visual elements that are connected”

• Applications:

• Group related pieces of information or content. For example, on a

webpage, using a consistent background color or border around a set
of related elements, such as a group of related links or options, helps
users perceive them as a single entity or category.
Law of Similarity
• The human eye tends to perceive similar elements in a design as a
complete picture, shape, or group, even if those elements are
separated.
“People tend to perceive and group similar visual elements together.”

• 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 Similarity

“People tend to perceive and group similar visual elements together.”

• Elements that serve a similar purpose or

belong to the same category should share
common visual attributes. For example,
buttons of the same function should have the
same color, size, or shape.
• To indicate errors in a form or validation
Two Two Three process, designers can use dissimilarity, such as
categories categories categories? changing the color or style of an error message
(green & (circle & Color or
blue) square) shape?
Aesthetic-Usability Effect
• Users often perceive aesthetically pleasing design as design that’s
more usable.
“People perceive aesthetically pleasing products or designs as more usable and user-
friendly, even if there is no functional difference compared to a less aesthetically pleasing
design”

• An aesthetically pleasing design creates a positive response in

people’s brains and leads them to believe the design actually works
better.
• People are more tolerant of minor usability issues when the design
of a product or service is aesthetically pleasing.
• Visually pleasing design can mask usability problems and prevent
issues from being discovered during usability testing.
Aesthetic-Usability Effect
“People perceive aesthetically pleasing products or designs as more usable and user-
friendly, even if there is no functional difference compared to a less aesthetically pleasing
design”

• Aesthetic design elements can help reinforce a brand's

identity and message.
• Users are more likely to return to and continue using
products or websites that provide both aesthetic appeal
and usability.
Occam’s Razor
• Among competing hypotheses that predict equally well, the one with
the fewest assumptions should be selected.
“Among competing hypotheses or explanations, the simplest one with the fewest
assumptions should be preferred”

• 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.
Occam’s Razor

“Among competing hypotheses or explanations, the simplest one with the fewest
assumptions should be preferred”

• Encourages designers to favor

simplicity in interface design.
• Avoid adding unnecessary features,
elements, or complexity that may
confuse users.
Doherty 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 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 increase its
perceived value and instill a sense of trust, even when
the process takes much less time.
Law of Common Region
• Elements tend to be perceived into groups if they are sharing an area
with a clearly defined boundary.
“People tend to perceive and group elements that are located within the same closed or
bounded area as belonging to a common or related group.”

• 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 a common region.
• Common region can also be created by defining a background behind
an element or group of elements.
Law of Common Region

“People tend to perceive and group elements that are located within the same closed or
bounded area as belonging to a common or related group.”

• Placing content within a common region, such as a box or container,

conveys that these elements are connected or belong to the same
category.
• Tabbed interfaces often utilize common regions to separate and
group content within different tabs.
Von Restorff Effect
• The Isolation Effect, predicts that when multiple similar objects are
present, the one that differs from the rest is most likely to be
remembered.

“Items that stand out or are distinctive from their surroundings are more likely to be remembered
and noticed.”

• Make important information or key actions visually distinctive.

• Use restraint when emphasizing visual elements to avoid competing
with one another and to ensure salient items aren’t mistakenly
identified as ads.
• Don’t exclude those with a color vision deficiency or low vision by
relying exclusively on color to communicate contrast.
Von Restorff Effect

“Items that stand out or are distinctive from their surroundings are more likely to be remembered
and noticed.”

• To ensure that critical information or actions are

noticed by users, designers can make them
visually distinct from other elements on the
interface. For example, using a contrasting color,
larger size, or bold typography for important
buttons or messages can help them stand out.
• Highlighting the current page or section in a
navigation menu can help users understand
their location within the interface.
Zeigarnik Effect
• People remember uncompleted or interrupted tasks better than
completed tasks.

• Invite content discovery by providing clear signifiers of additional

content.
• 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 to motivate users to complete
tasks.
Zeigarnik Effect
• People remember uncompleted or interrupted tasks better than
completed tasks.

• Designers can leverage the Zeigarnik Effect by

creating interfaces that encourage users to initiate
actions or tasks. When users start a process but
haven't completed it, they are more likely to
remember and return to finish it.
• Providing visual progress indicators or completion
status bars can motivate users to complete tasks or
processes they've started.
• For longer forms or processes, allowing users to save
their progress and resume at a later time taps into
the Zeigarnik Effect.
Goal-Gradient Effect
• The tendency to approach a goal increases with proximity to the goal.

“People tend to increase their efforts and become more motivated to complete a goal as they get
closer to achieving it.”

• 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 to motivate users
to complete tasks.
Tesler’s Law
• The Law of Conservation of Complexity, states that for any system
there is a certain amount of complexity that cannot be reduced.
“The complexity of a system or product cannot be reduced to zero; instead, it is often shifted or
transferred between different parts of the system.”

• All processes have a core of complexity that cannot be

designed away and, therefore, must be assumed by
either the system or the user.
• Ensure the burden is lifted from users as much as
possible by dealing with inherent complexity during
design and development.
• Take care not to simplify interfaces to the point of
abstraction.
Parkinson’s Law
• Any task will inflate until all of the available time is spent.
“The tendency for work to expand to fill the time available for its completion”

• In UX design and product development, there is a risk of feature creep—

wherein a project accumulates more features and complexity than initially
planned. Parkinson's Law suggests that when there is no strict constraint
on the development timeline, teams may continue adding features
without clear justification, potentially leading to a bloated and less user-
friendly product.
• Limit the time it takes to complete a task to what users expect it’ll take.
• A large group may contain only a few meaningful contributors to the
desired outcome.
• 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.
References
• Laws of UX: Using Psychology to Design Better Products & Services,
Jon Yablonski, O’Reilly Media, 2020
• https://lawsofux.com/