UX Laws & Principles

Fitts's Law

The time required to move to a target area is a function of the distance to the target divided by the size of the target. In simpler terms: larger, closer buttons are faster and easier to click.

How Heurilens Evaluates: We analyze button sizes, touch target dimensions (especially for mobile), spacing between interactive elements, and placement of primary actions. We ensure your most important buttons are appropriately sized and positioned for easy access.

Real-World Example: Amazon's “Add to Cart” button is a textbook application of Fitts's Law. The button is large, high-contrast (bright yellow against a white page), and positioned directly next to the product image and price—the exact spot where the user's attention already rests. This reduces both the physical distance and the cognitive effort required to complete the most critical action on the page. Smaller or less prominent buy buttons consistently underperform in A/B tests.

Hick's Law

The time it takes to make a decision increases with the number and complexity of choices. More options = longer decision time and potential decision paralysis.

How Heurilens Evaluates: We examine your navigation menus, forms, product listings, and filter options. We identify where you might be overwhelming users with too many choices and suggest ways to simplify decision-making through categorization, progressive disclosure, or recommended defaults.

Real-World Example: Netflix masterfully combats decision paralysis by curating “Top 10” lists, personalized recommendations, and “Because You Watched” rows. Rather than exposing users to their entire library of thousands of titles at once, Netflix narrows options into digestible, context-aware categories. This reduces the time-to-decision and keeps viewers engaged instead of endlessly scrolling.

Miller's Law

The average person can hold only 7 (±2) items in their working memory. This principle guides information chunking and organization.

How Heurilens Evaluates: We check if your navigation has too many top-level items, if forms are broken into manageable steps, and if content is chunked appropriately. We recommend grouping related items and using progressive disclosure to prevent cognitive overload.

Real-World Example: Phone numbers are the classic demonstration of Miller's Law. The number 5558675309 is difficult to remember as a single string, but formatted as 555-867-5309, it becomes three manageable chunks. The same principle applies to credit card numbers (four groups of four digits), social security numbers, and even how we format dates. Effective UX design applies this chunking principle to everything from form fields to navigation menus.

Jakob's Law

Users spend most of their time on other sites, so they prefer your site to work the same way as all the other sites they already know.

How Heurilens Evaluates: We assess whether your site follows web conventions: logo in top-left linking to homepage, search in top-right, hamburger menu for mobile, shopping cart icon for e-commerce, etc. Deviating from these patterns creates friction.

Real-World Example: Spotify follows the conventions established by other music apps and media players. Play/pause is a central button, skip forward/back buttons flank it, the progress bar sits below the artwork, and playlists live in a sidebar. Users switching from Apple Music or YouTube Music can navigate Spotify almost immediately because the interaction patterns are familiar. When Spotify does innovate (e.g., Discover Weekly), they layer new features on top of existing conventions rather than replacing them.

Law of Proximity

Objects that are near or proximate to each other tend to be grouped together. This Gestalt principle helps users understand relationships between elements.

How Heurilens Evaluates: We analyze spacing and grouping in your layout. Are related items visually connected? Is there enough white space between unrelated sections? Proper use of proximity improves scanability and comprehension.

Real-World Example: Google Search results use proximity to group related information. Each result clusters the page title, URL, and description tightly together, with clear spacing separating one result from the next. Featured snippets, “People also ask” sections, and image carousels are each visually grouped by proximity, allowing users to instantly parse where one information block ends and another begins—even at a glance.

Law of Common Region

Elements within a common boundary or region are perceived as belonging together.

How Heurilens Evaluates: We check if you're using containers, cards, or background colors effectively to group related content. Visual boundaries help users quickly understand what information belongs together.

Real-World Example: Airbnb's listing cards are a perfect example of common region in action. Each listing is enclosed in a card with a clear boundary that contains the property photo, price, rating, and location. The card border creates a visual container that tells users “all of this information belongs to one listing.” Without these boundaries, a grid of photos, prices, and ratings would be much harder to parse.

Serial Position Effect

Users best remember the first and last items in a series. This includes the Primacy Effect (first items) and Recency Effect (last items).

How Heurilens Evaluates: We analyze the placement of key actions and information. Are your most important features or calls-to-action positioned at the beginning or end of lists and pages where they'll be most memorable?

Real-World Example: Most websites place their logo on the far left and primary CTA on the far right of the navigation bar—leveraging both the primacy and recency effects. Users remember the brand (first item) and the desired action (last item) most clearly. Mobile bottom navigation bars follow the same pattern: the most used features (Home, Search) occupy the first and last positions, while less critical items sit in the middle.

Von Restorff Effect (Isolation Effect)

When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

How Heurilens Evaluates: We check if your primary calls-to-action stand out visually through color, size, or placement. Important elements should break the pattern to grab attention.

Real-World Example: SaaS pricing pages almost universally use the Von Restorff Effect by adding a “Most Popular” or “Recommended” badge to one pricing tier. That tier is often visually elevated, uses a different background color, or has a contrasting border. Among three identical-looking cards, the highlighted one draws the eye immediately and heavily influences which plan users select.

Zeigarnik Effect

People remember uncompleted or interrupted tasks better than completed tasks. Progress indicators leverage this effect.

How Heurilens Evaluates: We look for progress indicators in multi-step processes (checkout, onboarding, forms). Showing progress motivates completion and reduces abandonment.

Real-World Example: LinkedIn's profile completion progress bar is one of the most cited examples of the Zeigarnik Effect in product design. When users see “Your profile is 70% complete,” the incomplete task nags at them psychologically. LinkedIn reinforces this by suggesting specific next steps (“Add your current position,” “Upload a profile photo”) to close the gap. This single feature dramatically increased the amount of data users voluntarily added to their profiles.

Aesthetic-Usability Effect

Users often perceive aesthetically pleasing design as more usable, even if it isn't objectively more functional.

How Heurilens Evaluates: We assess visual polish, typography quality, color harmony, and overall design sophistication. Good aesthetics build trust and perceived ease-of-use.

Real-World Example: Apple's entire design philosophy is built on the Aesthetic-Usability Effect. From the rounded corners on iOS icons to the carefully weighted typography on apple.com, every visual detail is polished. Studies have shown users rate Apple products as “easier to use” than competitors with objectively similar functionality—purely because the visual quality creates a perception of simplicity. This effect is so powerful that it influences purchasing decisions, support satisfaction ratings, and even tolerance for minor bugs.

1. Tiny Touch Targets on Mobile (Fitts's Law Violation)

Many sites shrink buttons and links below the recommended 44x44px minimum on mobile. This forces users to tap multiple times or zoom in, causing frustration. Common offenders include footer links, secondary navigation items, and “close” buttons on modals. The fix is straightforward: increase tap targets and add adequate spacing between interactive elements.

2. Overwhelming Navigation Menus (Hick's Law Violation)

Mega-menus with dozens of uncategorized links are one of the most common Hick's Law violations. When users open a dropdown and see 40+ options without clear grouping, decision paralysis sets in. The solution: use progressive disclosure, limit top-level categories to 5–7, and group sub-items logically.

3. Long, Unbroken Forms (Miller's Law Violation)

Presenting 15+ form fields on a single page without grouping or steps overwhelms working memory. Users abandon forms when they can't see progress or understand the scope. Break forms into logical sections (personal info, payment, review) with no more than 5–7 fields per section, and always show a progress indicator.

4. Non-Standard Interaction Patterns (Jakob's Law Violation)

Custom scroll behaviors, non-standard icons without labels, or placing the shopping cart in the left sidebar instead of the top-right all violate Jakob's Law. Every deviation from convention forces users to relearn basic interactions. Innovation should enhance the experience, not replace well-understood patterns.

5. Labels Far From Their Fields (Law of Proximity Violation)

When form labels are positioned too far from their input fields, or when there is equal spacing between a label and both the field above and below it, users struggle to determine which label belongs to which field. This is especially problematic in dense forms. Labels should always be visually closer to their associated input than to any other element.

6. Same-Weight CTAs Competing for Attention (Von Restorff Effect Violation)

When every button on a page uses the same color, size, and style, nothing stands out. Users can't quickly identify the primary action. This is especially damaging on pricing pages, landing pages, and product detail pages where one action (buy, sign up, start trial) should clearly dominate. Use color, size, elevation, or whitespace to create a clear visual hierarchy.

7. Multi-Step Checkout Without Progress Indicators (Zeigarnik Effect Violation)

When users enter a multi-step process (checkout, onboarding, application form) without knowing how many steps remain or how far they've progressed, anxiety increases and abandonment spikes. A simple progress bar or step counter (“Step 2 of 4”) leverages the Zeigarnik Effect to keep users motivated. Without it, users assume the process might be endless and bail.

What are UX laws?

UX laws are research-backed principles derived from cognitive psychology and human behavior studies that explain how users interact with interfaces. They include Fitts's Law, Hick's Law, Miller's Law, Jakob's Law, and others. Designers use these laws to create interfaces that align with natural human cognition and perception, reducing friction and improving usability.

How many UX laws are there?

While there is no definitive number, the most commonly referenced set includes around 20 core UX laws and principles. The most critical ones include Fitts's Law, Hick's Law, Miller's Law, Jakob's Law, the Gestalt principles (Proximity, Common Region, Similarity), Serial Position Effect, Von Restorff Effect, Zeigarnik Effect, and the Aesthetic-Usability Effect. Heurilens analyzes your website against the 10 most impactful of these laws.

What is the difference between Fitts's Law and Hick's Law?

Fitts's Law deals with physical interaction—it states that the time to reach a target depends on the target's size and distance. Hick's Law deals with cognitive decision-making—it states that the time to make a decision increases with the number of choices. Together, they guide both the physical design (button size, placement) and information architecture (menu structure, option count) of interfaces.

How do UX laws apply to mobile design?

UX laws are especially important for mobile design due to smaller screens and touch-based interaction. Fitts's Law dictates minimum touch target sizes (44x44px recommended by Apple). Miller's Law limits how many navigation items should appear on screen. Hick's Law emphasizes progressive disclosure in mobile menus. The Serial Position Effect influences bottom navigation bar design, placing key actions at the first and last positions.

Can UX laws conflict with each other?

Yes, UX laws can sometimes create tension. For example, the Aesthetic-Usability Effect might encourage a minimalist design that hides options, while Hick's Law might suggest showing fewer choices upfront—these two align. But Jakob's Law encourages following conventions while the Von Restorff Effect encourages standing out. The key is understanding the context and prioritizing the law most relevant to the user's current task and your design goal.

How does Heurilens use UX laws to evaluate websites?

Heurilens uses AI-powered analysis to evaluate websites against 10+ fundamental UX laws. It examines button sizes and placement (Fitts's Law), navigation complexity (Hick's Law), information chunking (Miller's Law), convention adherence (Jakob's Law), visual grouping (Proximity and Common Region), element placement (Serial Position Effect), visual distinction of CTAs (Von Restorff Effect), progress indicators (Zeigarnik Effect), and overall visual polish (Aesthetic-Usability Effect). Each law receives a score with specific, actionable recommendations.

What is Jakob's Law and why is it important?

Jakob's Law, coined by usability expert Jakob Nielsen, states that users spend most of their time on other websites, so they expect your site to work similarly. This means following established conventions like placing the logo top-left, navigation at the top, search in the header, and using recognizable icons. Breaking these conventions forces users to relearn basic interactions, increasing cognitive load and frustration—even if your alternative is technically better.

How do I prioritize which UX laws to focus on first?

Start with the laws that have the highest impact on your specific product type. For e-commerce, prioritize Fitts's Law (button sizes), Hick's Law (product filtering), and the Von Restorff Effect (CTA visibility). For content sites, focus on Miller's Law (information chunking), Serial Position Effect (content ordering), and Proximity (layout grouping). For SaaS products, emphasize Jakob's Law (convention adherence), Zeigarnik Effect (onboarding progress), and the Aesthetic-Usability Effect (visual polish). Heurilens automatically prioritizes recommendations based on your site type.