Principles of UX / UI (Product Design): Hick’s Law, Fitts’s Law, and Miller’s Law

Hick’s Law, Fitts’s Law, and Miller’s Law

Portfolio-Ready Study Guide: Hick’s Law, Fitts’s Law, and Miller’s Law

For aspiring product designers, graphic designers transitioning to UX, and bootcamp students

What This Is

These three cognitive psychology laws explain how users process information, make decisions, and interact with interfaces. Mastering them helps you design faster, more intuitive experiences—like simplifying a checkout flow to reduce cart abandonment (Hick’s Law), making buttons easier to tap on mobile (Fitts’s Law), or organizing a dashboard so users don’t feel overwhelmed (Miller’s Law). For example: - Hick’s Law-Redesigning a hospital’s appointment booking form from 20 fields to 5, cutting drop-off by 40%. - Fitts’s Law-Moving the "Submit" button closer to the form on a mobile checkout screen, increasing conversions. - Miller’s Law-Grouping a banking app’s transaction history into "Today," "This Week," and "Older" to reduce cognitive load.

Key Terms & Principles

• Hick’s Law The more choices a user has, the longer it takes them to decide. UI Example: A restaurant menu with 50 items vs. 7 curated "Chef’s Picks." The latter speeds up decision-making.

• Fitts’s Law The time to reach a target depends on its size and distance from the user’s starting point. UI Example: A large, thumb-friendly "Add to Cart" button at the bottom of a mobile screen (vs. a tiny link at the top).

• Miller’s Law (The Magical Number Seven, ±2) Humans can hold ~7 items in working memory at once (give or take 2). UI Example: A settings menu with 3–5 grouped sections (e.g., "Account," "Notifications," "Privacy") instead of 15 scattered options.

• Progressive Disclosure Show only essential info upfront; reveal details as needed. UI Example: A "Show More" button in an FAQ section (Hick’s Law + Miller’s Law).

• Thumb Zone (Mobile Ergonomics) The area of a mobile screen easily reachable by the thumb. UI Example: Placing primary actions (e.g., "Pay Now") in the bottom-right corner (Fitts’s Law).

• Chunking Breaking info into smaller, digestible groups. UI Example: Phone numbers formatted as (123) 456-7890 instead of 1234567890 (Miller’s Law).

• Visual Hierarchy Arranging elements to guide attention (size, color, contrast). UI Example: A bold, high-contrast "Sign Up" button vs. a faint "Learn More" link (Fitts’s Law + Hick’s Law).

• Affordance Design elements should suggest their function (e.g., buttons look clickable). UI Example: A 3D-style "Submit" button vs. a flat, text-only link (Fitts’s Law).

• Jakob’s Law Users expect interfaces to work like ones they already know. UI Example: Placing a shopping cart icon in the top-right corner (consistent with Amazon, eBay).

• Gestalt Principles (Proximity, Similarity, Closure) How humans perceive groups of objects as a whole. UI Example: Grouping related form fields (e.g., "Billing Address") with spacing (Proximity) or using the same color for all primary buttons (Similarity).

Step-by-Step / Process Flow

How to apply these laws in your design process:

1. Audit the Current Experience (Figma/Whiteboard)
2. Map out the user flow (e.g., checkout, onboarding).
3. Highlight decision points (Hick’s Law), interactive elements (Fitts’s Law), and information density (Miller’s Law).

4. Figma Tip: Use the Sticky Notes tool to label pain points (e.g., "Too many form fields here").

5. Sketch Low-Fidelity Wireframes (Pen & Paper or Figma)

6. Hick’s Law: Reduce choices (e.g., replace a dropdown with 20 options with 3 radio buttons).
7. Fitts’s Law: Make key buttons larger and closer (e.g., move "Next" to the bottom-right on mobile).
8. Miller’s Law: Group related items (e.g., chunk a 10-field form into 3 sections).

9. Figma Tip: Use Auto Layout to test button sizes and spacing.

10. Test with Guerrilla Usability Testing (5 Users)

11. Give users a task (e.g., "Book an appointment").
12. Observe:
    • Do they hesitate at decision points? (Hick’s Law)
    • Do they miss buttons? (Fitts’s Law)
    • Do they forget info between screens? (Miller’s Law)

13. Pro Tip: Record sessions with Figma’s User Testing plugin or Maze.

14. Iterate Based on Feedback (Figma)

15. Hick’s Law: Remove redundant options (e.g., combine "Save" and "Save as Draft").
16. Fitts’s Law: Increase button size or add padding (e.g., make a "Delete" button 48x48px).
17. Miller’s Law: Add visual grouping (e.g., borders, background colors, or icons).

18. Figma Tip: Use Variants to test different button sizes/placements.

19. Validate with A/B Testing (Optional)

20. Compare two versions (e.g., 5-field form vs. 10-field form).
21. Track metrics like completion time (Hick’s/Fitts’s) or error rates (Miller’s).

Common Mistakes

• Mistake: Adding too many options to a dropdown menu (e.g., 30 countries). Correction: Use progressive disclosure (e.g., a searchable dropdown or a "Most Popular" section first). Rationale: Hick’s Law—fewer choices = faster decisions.

• Mistake: Making all buttons the same size (e.g., "Submit" and "Cancel" both 30x30px). Correction: Prioritize primary actions (e.g., "Submit" = 48x48px, "Cancel" = 36x36px). Rationale: Fitts’s Law—larger targets are easier to hit.

• Mistake: Cramming 15 form fields into one screen. Correction: Break into multi-step forms or group related fields (e.g., "Personal Info"-"Payment"). Rationale: Miller’s Law—users can’t remember 15+ items at once.

• Mistake: Placing a critical button (e.g., "Checkout") in the top-left corner on mobile. Correction: Move it to the thumb zone (bottom-right). Rationale: Fitts’s Law—closer = faster.

• Mistake: Using the same color for primary and secondary buttons. Correction: Use high contrast (e.g., blue for "Submit," gray for "Cancel"). Rationale: Fitts’s Law + Visual Hierarchy—users should instantly recognize the primary action.

Design Interview / Portfolio Tips

1. How to Show This in Your Portfolio
2. Include before/after screenshots with annotations (e.g., "Reduced form fields from 12 to 5 using Hick’s Law").
3. Add a short case study explaining your process (e.g., "I tested 3 button sizes and found 48px had the highest tap success rate").

4. Tricky Distinction: Wireframe vs. Prototype-Wireframes = low-fidelity structure (Hick’s/Miller’s); Prototypes = interactive (Fitts’s).

5. What Interviewers Look For

6. Problem-Solving: "How would you redesign this [messy] dashboard?" (Look for chunking, progressive disclosure, and visual hierarchy.)
7. Research Awareness: "How would you test if your changes improved usability?" (Answer: Guerrilla testing, A/B tests, or heatmaps.)

8. Tricky Distinction: Usability Test vs. User Interview-Usability tests = observing tasks (Fitts’s/Hick’s); Interviews = asking about pain points (Miller’s).

9. Common Interview Questions & How to Answer

10. "Why did you choose this button size?" Answer: "I applied Fitts’s Law—larger buttons reduce mis-taps, especially on mobile. I tested 40px vs. 48px and found 48px had a 20% higher success rate."
11. "How do you decide what to show on a homepage?" Answer: "I use Hick’s Law to limit choices and Miller’s Law to group content. For example, I’d show 3–5 key actions (e.g., 'Shop Now,' 'Learn More') and chunk related items (e.g., 'New Arrivals,' 'Best Sellers')."

Quick Check Questions

1. Scenario: A stakeholder wants to add 10 new features to a mobile app’s homepage. How do you use design principles to advise against clutter? Answer: Use Hick’s Law (too many choices overwhelm users) and Miller’s Law (users can’t remember 10+ items). Suggest progressive disclosure (e.g., hide less important features in a "More" menu) or A/B test to see if the new features improve engagement.

2. Scenario: Users keep missing the "Submit" button on a desktop form. What’s the likely issue, and how do you fix it? Answer: Fitts’s Law—the button is likely too small or too far from the cursor’s natural path. Fix by:

3. Increasing button size (e.g., 48x48px).
4. Moving it closer to the form (e.g., right-aligned below the last field).

5. Adding visual contrast (e.g., bold color, drop shadow).

6. Scenario: A user abandons a checkout flow after the payment screen. What cognitive principle might be at play, and how do you diagnose it? Answer: Miller’s Law—users may be overwhelmed by too many fields (e.g., billing + shipping + payment info). Diagnose with:

7. Usability testing (observe if users hesitate or make errors).
8. Analytics (check drop-off rates at each step). Fix by chunking (e.g., "Shipping"-"Payment"-"Review") or autofilling known info.

Last-Minute Cram Sheet

1. Hick’s Law: More choices = slower decisions. Example: Reduce form fields from 10 to 5.
2. Fitts’s Law: Bigger + closer = easier to click. Example: Mobile "Buy" button at thumb zone.
3. Miller’s Law: 7±2 items in working memory. Example: Group menu items into 3–5 sections.
4. Progressive Disclosure: Hide complexity until needed. Example: "Show More" buttons.
5. Thumb Zone: Bottom-right corner for mobile primary actions.
6. Chunking: Break info into groups. Example: Phone numbers as (123) 456-7890.
7. Visual Hierarchy: Size, color, contrast guide attention. Example: Bold "Submit" button.
8. Jakob’s Law: Users expect familiar patterns. Example: Shopping cart in top-right.
9. Usability Test-User Interview: Tests observe tasks; interviews ask opinions.
10. Design System-Style Guide: Design systems include components + rules; style guides are just colors/fonts.