⚖️
Law’s of UX
Created @April 22, 2024 9:25 AM
Category DESIGN
Status Done
Mental Models
What is a Mental Model?
It’s what we think we know about how something works based on our past experience.
Why They Matter for Designers ?
Designers can create better user experiences by matching their designs → users' mental
models.
This helps users use new products easily without learning how they work from scratch.
Designers use methods like user interviews, personas, and journey maps to understand and
match users' mental models.
Example of a Mental Model:
Website Navigation:
Users expect a website’s menu to be at the top or on the left side because that’s where
menus are usually found on other websites.
Online Shopping:
Law’s of UX 1
, Users are familiar with picking items and going to a cashier in a store. Online
shopping mimics this with virtual carts and a checkout button, making the process
intuitive.
Jakob’s Law ✅
Users spend most of their time on other sites, so they prefer your site to
work similarly.
Key Points:
Users Transfer Expectations: ❤️
Concept: Users expect similar products to work the same way.
Example: If people are used to Google Chrome, they expect other search engines to
function similarly.
Leveraging Familiar Ideas: ❤️
Concept: Use familiar layouts and features to make new products intuitive.
Benefit: Users can perform tasks easily without needing to learn new methods.
Minimizing Change-Related Stress:
Concept: Gradually introduce changes while allowing the old version to be used.
Benefit: Smoothens the transition and reduces user frustration.
Fitts’s Law ✅
Law’s of UX 2
, 0The time to acquire a target is a function of the distance to and size
of the target
Large Touch Targets:
Buttons and icons should be large enough for users to easily tap or click them.
Spacing Between Targets:
There should be enough space between touch targets to avoid accidental taps.
Average adult finger pad: 10–14 mm; fingertip: 8–10 mm.
Google recommends at least 8 dp of space between targets.
Example:
Text Labels and Form Inputs:
Example: Associating text labels with input fields.
Benefit: Clicking the label performs the same function as clicking the input, effectively
enlarging the clickable area and making it easier to select.
Spacing Between Interactive Elements:
Example: LinkedIn’s iOS app places "accept" and "deny" buttons too close together.
Issue: Increases the likelihood of accidental selection, reducing usability.
Solution: Ensure adequate spacing to minimize errors.
Law’s of UX 3
, Easy-to-Reach Placement:
Place important touch targets where users can easily reach them.
Position varies based on device and user context. For smartphones, central screen
areas are most accurate and preferred.
Example:
Form Submission Buttons:
Example: Positioning submission buttons near the last input field.
Benefit: Minimizes the distance the user must move, enhancing efficiency and ease of
use.
Thumb Zones and Reachability:
Example: Apple’s Reachability feature on larger iPhones.
Benefit: Allows users to bring items from the top of the screen to the bottom half,
making it easier for one-handed use
Law’s of UX 4
Law’s of UX
Created @April 22, 2024 9:25 AM
Category DESIGN
Status Done
Mental Models
What is a Mental Model?
It’s what we think we know about how something works based on our past experience.
Why They Matter for Designers ?
Designers can create better user experiences by matching their designs → users' mental
models.
This helps users use new products easily without learning how they work from scratch.
Designers use methods like user interviews, personas, and journey maps to understand and
match users' mental models.
Example of a Mental Model:
Website Navigation:
Users expect a website’s menu to be at the top or on the left side because that’s where
menus are usually found on other websites.
Online Shopping:
Law’s of UX 1
, Users are familiar with picking items and going to a cashier in a store. Online
shopping mimics this with virtual carts and a checkout button, making the process
intuitive.
Jakob’s Law ✅
Users spend most of their time on other sites, so they prefer your site to
work similarly.
Key Points:
Users Transfer Expectations: ❤️
Concept: Users expect similar products to work the same way.
Example: If people are used to Google Chrome, they expect other search engines to
function similarly.
Leveraging Familiar Ideas: ❤️
Concept: Use familiar layouts and features to make new products intuitive.
Benefit: Users can perform tasks easily without needing to learn new methods.
Minimizing Change-Related Stress:
Concept: Gradually introduce changes while allowing the old version to be used.
Benefit: Smoothens the transition and reduces user frustration.
Fitts’s Law ✅
Law’s of UX 2
, 0The time to acquire a target is a function of the distance to and size
of the target
Large Touch Targets:
Buttons and icons should be large enough for users to easily tap or click them.
Spacing Between Targets:
There should be enough space between touch targets to avoid accidental taps.
Average adult finger pad: 10–14 mm; fingertip: 8–10 mm.
Google recommends at least 8 dp of space between targets.
Example:
Text Labels and Form Inputs:
Example: Associating text labels with input fields.
Benefit: Clicking the label performs the same function as clicking the input, effectively
enlarging the clickable area and making it easier to select.
Spacing Between Interactive Elements:
Example: LinkedIn’s iOS app places "accept" and "deny" buttons too close together.
Issue: Increases the likelihood of accidental selection, reducing usability.
Solution: Ensure adequate spacing to minimize errors.
Law’s of UX 3
, Easy-to-Reach Placement:
Place important touch targets where users can easily reach them.
Position varies based on device and user context. For smartphones, central screen
areas are most accurate and preferred.
Example:
Form Submission Buttons:
Example: Positioning submission buttons near the last input field.
Benefit: Minimizes the distance the user must move, enhancing efficiency and ease of
use.
Thumb Zones and Reachability:
Example: Apple’s Reachability feature on larger iPhones.
Benefit: Allows users to bring items from the top of the screen to the bottom half,
making it easier for one-handed use
Law’s of UX 4
