Basil & Ember

Who flagged it

one of Fitts’s own measurements

What Fitts noticed

• Noticed Elements must have their visible text as part of their accessible name (axe) step 0 · /
• Noticed header.header > div.wrap.header-in > a.brand shows no focus when tabbed to step 0 · /
• Noticed Heading levels should only increase by one (axe) step 1 · /menu
• Noticed Elements must have their visible text as part of their accessible name (axe) step 1 · /menu
• Noticed Heading levels should only increase by one (axe) step 2 · /menu/margherita
• Noticed Elements must have their visible text as part of their accessible name (axe) step 2 · /menu/margherita

Evidence

• Elements must have their visible text as part of their accessible name (expected passes the axe rule)

See it yourself

Start at http://localhost:5176/ on desktop. Replayed and seen again

Expected

Passes the axe rule

Actual

Elements must have their visible text as part of their accessible name

Environment

Chromium 156 · 1536×864 · mouse · light · 100%

WCAG

2.5.3 Label in Name

axe rule

label-content-name-mismatch

// Elements must have their visible text as part of their accessible name
// Fitts repro · Chromium 156 · 1536×864 · mouse · light · 100% · no automatic check
// Steps: open the page
import { expect, test } from '@playwright/test';

test("Elements must have their visible text as part of their accessible name", async ({ page }) => {
  await page.goto("http://localhost:5176/");
  // Expected: Passes the axe rule
  // Actual: Elements must have their visible text as part of their accessible name
  // Fitts has no automatic oracle for this one: check it by eye, then replace this line.
  test.fixme(true, 'check by eye');
});

Who flagged it

4 of 5 reviewers (Novice, Accessibility, Power user, Trust & ethics), and one of Fitts’s own measurements

What Fitts noticed

• Noticed div.wrap.header-in > nav.nav > a.active shows no focus when tabbed to step 0 · /
• Noticed div.wrap.header-in > nav.nav > a shows no focus when tabbed to step 0 · /
• Noticed header.header > div.wrap.header-in > a.cart-btn shows no focus when tabbed to step 0 · /
• Noticed div.wrap > div.filters > input.search shows no focus when tabbed to step 1 · /menu
• Noticed div.filters > div.chip-row > button.chip.on shows no focus when tabbed to step 1 · /menu
• Noticed div.filters > div.chip-row > button.chip shows no focus when tabbed to step 1 · /menu

Evidence

• no visible change when focused with Tab (expected a visible focus indicator)
• section.section > div.wrap > a shows no focus when tabbed to
• "Add to cart · $14.00" is hidden while focused (0% visible)

See it yourself

Start at http://localhost:5176/ on desktop. Replayed and seen again

1. Press Tab from the top of the page
2. Tab through Back to menu, Size and toppings to Add to cart

Expected

A visible focus indicator

Actual

No visible change when focused with Tab

Environment

Chromium 156 · 1536×864 · mouse · light · 100%

WCAG

2.4.7 Focus Visible

// No visible focus when using the keyboard
// Fitts repro · Chromium 156 · 1536×864 · mouse · light · 100%
// Steps: Press Tab from the top of the page → Tab through Back to menu, Size and toppings to Add to cart
import { expect, test } from '@playwright/test';

test("No visible focus when using the keyboard", async ({ page }) => {
  await page.goto("http://localhost:5176/");
  // By hand: Press Tab from the top of the page
  // By hand: Tab through Back to menu, Size and toppings to Add to cart
  // Focus is visible (WCAG 2.4.7): focusing changes how the element looks.
  const el = page.getByTestId("e1");
  const before = await el.evaluate((e) => { const s = getComputedStyle(e); return [s.outlineStyle, s.outlineWidth, s.boxShadow, s.borderColor, s.backgroundColor].join('|'); });
  await el.focus();
  const after = await el.evaluate((e) => { const s = getComputedStyle(e); return [s.outlineStyle, s.outlineWidth, s.boxShadow, s.borderColor, s.backgroundColor].join('|'); });
  expect(after).not.toBe(before);
});

Who flagged it

5 of 5 reviewers (Novice, Power user, Accessibility, Trust & ethics, Visual design)

What Fitts noticed

• Tapped Pickup time · nothing changed on screen step 55 · /checkout

Evidence

• Controls are only Size, Add toppings, Notes, Quantity, Add to cart
• Page says 'Pickup only. Pay at the counter' with no time choice
• Build yours panel shows Size, Add toppings, Notes for the kitchen, Quantity

See it yourself

Start at http://localhost:5176/menu/margherita on desktop. Seen once during the run

Expected

A pickup time can be chosen while building a pickup order

Actual

There is no time field anywhere on the builder or cart confirmation

Environment

Chromium 156 · 1536×864 · mouse · light · 100%

// No pickup time to choose
// Fitts repro · Chromium 156 · 1536×864 · mouse · light · 100% · no automatic check
// Steps: open the page
import { expect, test } from '@playwright/test';

test("No pickup time to choose", async ({ page }) => {
  await page.goto("http://localhost:5176/menu/margherita");
  // Expected: A pickup time can be chosen while building a pickup order
  // Actual: There is no time field anywhere on the builder or cart confirmation
  // Fitts has no automatic oracle for this one: check it by eye, then replace this line.
  test.fixme(true, 'check by eye');
});

Who flagged it

1 of 5 reviewers (Visual design), and one of Fitts’s own measurements

What Fitts noticed

• Noticed 16 font sizes: 22px, 12px, 14.5px, 14px, 12.5px, 76px, 18px, 15px, 13px, 17px, 13.5px, 44px, 16px, 20px, 19px, 42px step 0 · /
• Noticed the page is 354px wide at 360px step 0 · /
• Noticed 9 font sizes: 22px, 12px, 14.5px, 14px, 12.5px, 56px, 16px, 20px, 13px step 1 · /menu
• Noticed 11 font sizes: 22px, 12px, 14.5px, 14px, 15px, 50px, 17px, 18.72px, 16px, 20px, 13px step 2 · /menu/margherita
• Noticed 10 font sizes: 22px, 12px, 14.5px, 14px, 50px, 16px, 18px, 17px, 15px, 13px step 5 · /cart
• Noticed 10 font sizes: 22px, 12px, 14.5px, 14px, 50px, 16px, 13px, 13.5px, 15px, 18px step 6 · /checkout

Evidence

• 16 font sizes: 22px, 12px, 14.5px, 14px, 12.5px, 76px, 18px, 15px, 13px, 17px, 13.5px, 44px, 16px, 20px, 19px, 42px (expected at most 6 sizes)
• 9 font sizes: 22px, 12px, 14.5px, 14px, 12.5px, 56px, 16px, 20px, 13px (expected at most 6 sizes)
• 11 font sizes: 22px, 12px, 14.5px, 14px, 15px, 50px, 17px, 18.72px, 16px, 20px, 13px (expected at most 6 sizes)
• 11 font sizes: 22px, 12px, 14.5px, 14px, 15px, 50px, 17px, 18.72px, 16px, 20px, 13px

See it yourself

Start at http://localhost:5176/ on desktop. Replayed and seen again

Expected

At most 6 sizes

Actual

16 font sizes: 22px, 12px, 14.5px, 14px, 12.5px, 76px, 18px, 15px, 13px, 17px, 13.5px, 44px, 16px, 20px, 19px, 42px

Environment

Chromium 156 · 1536×864 · mouse · light · 100%

// Too many text sizes
// Fitts repro · Chromium 156 · 1536×864 · mouse · light · 100% · no automatic check
// Steps: open the page
import { expect, test } from '@playwright/test';

test("Too many text sizes", async ({ page }) => {
  await page.goto("http://localhost:5176/");
  // Expected: At most 6 sizes
  // Actual: 16 font sizes: 22px, 12px, 14.5px, 14px, 12.5px, 76px, 18px, 15px, 13px, 17px, 13.5px, 44px, 16px, 20px, 19px, 42px
  // Fitts has no automatic oracle for this one: check it by eye, then replace this line.
  test.fixme(true, 'check by eye');
});

−removed:               <p style={{ margin: 0, lineHeight: 1.6, fontSize: 14.5 }}>Wood-fired pies, small plates, and a room that feels like Sunday at your favorite neighbor&apos;s house.</p>
+added:               <p style={{ margin: 0, lineHeight: 1.6, fontSize: 'var(--text-sm)' }}>Wood-fired pies, small plates, and a room that feels like Sunday at your favorite neighbor&apos;s house.</p>
−removed:             <div><h4>Visit</h4><p style={{ margin: 0, lineHeight: 1.7, fontSize: 14.5 }}>128 Fournier Street<br />Maplewood, OH 45240<br />(513) 555-0148</p></div>
−removed:             <div><h4>Hours</h4><p style={{ margin: 0, lineHeight: 1.7, fontSize: 14.5 }}>Tue–Thu · 4pm–10pm<br />Fri–Sat · 12pm–11pm<br />Sun · 12pm–9pm<br />Mon · Closed</p></div>
+added:             <div><h4>Visit</h4><p style={{ margin: 0, lineHeight: 1.7, fontSize: 'var(--text-sm)' }}>128 Fournier Street<br />Maplewood, OH 45240<br />(513) 555-0148</p></div>
+added:             <div><h4>Hours</h4><p style={{ margin: 0, lineHeight: 1.7, fontSize: 'var(--text-sm)' }}>Tue–Thu · 4pm–10pm<br />Fri–Sat · 12pm–11pm<br />Sun · 12pm–9pm<br />Mon · Closed</p></div>
−removed:           <p style={{ borderTop: '1px solid rgba(255,255,255,.12)', marginTop: 36, paddingTop: 18, fontSize: 13 }}>© {new Date().getFullYear()} Basil &amp; Ember. Demo site — no real orders or payments.</p>
+added:           <p style={{ borderTop: '1px solid rgba(255,255,255,.12)', marginTop: 36, paddingTop: 18, fontSize: 'var(--text-sm)' }}>© {new Date().getFullYear()} Basil &amp; Ember. Demo site — no real orders or payments.</p>
−removed:         <div className="card-foot"><span className="price">{fmt(item.price)}</span><span style={{ fontWeight: 700, fontSize: 14 }}>Customize →</span></div>
+added:         <div className="card-foot"><span className="price">{fmt(item.price)}</span><span style={{ fontWeight: 700, fontSize: 'var(--text-sm)' }}>Customize →</span></div>
+added:   --text-xs: 12px;
+added:   --text-sm: 14px;
+added:   --text-base: 16px;
+added:   --text-lg: 20px;
+added:   --text-xl: 32px;
+added:   --text-display: 48px;
−removed: body { margin: 0; font-family: "DM Sans", system-ui, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
+added: body { margin: 0; font-family: "DM Sans", system-ui, sans-serif; font-size: var(--text-base); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
+added: h1 { font-size: var(--text-display); }
+added: h2 { font-size: var(--text-xl); }
+added: h3 { font-size: var(--text-lg); }
+added: h4 { font-size: var(--text-base); }
−removed: .brand b { font-family: "Fraunces", serif; font-size: 22px; letter-spacing: .2px; }
−removed: .brand span { color: var(--gold); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
+added: .brand b { font-family: "Fraunces", serif; font-size: var(--text-lg); letter-spacing: .2px; }
+added: .brand span { color: var(--gold); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; }
−removed: .nav a { text-decoration: none; padding: 8px 12px; border-radius: 999px; font-size: 14.5px; color: #d9cfbd; }
+added: .nav a { text-decoration: none; padding: 8px 12px; border-radius: 999px; font-size: var(--text-sm); color: #d9cfbd; }
−removed: .cart-btn { position: relative; text-decoration: none; background: #f5efe4; color: var(--ink); padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; }
−removed: .cart-count { position: absolute; top: -7px; right: -5px; background: var(--ember); color: #fff; border: 2px solid var(--ink); min-width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; padding: 0 4px; }
+added: .cart-btn { position: relative; text-decoration: none; background: #f5efe4; color: var(--ink); padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: var(--text-sm); }
+added: .cart-count { position: absolute; top: -7px; right: -5px; background: var(--ember); color: #fff; border: 2px solid var(--ink); min-width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-size: var(--text-xs); padding: 0 4px; }
−removed: .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 24px; font-weight: 700; font-size: 15px; text-decoration: none; transition: background .15s ease, transform .15s ease; }
+added: .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 24px; font-weight: 700; font-size: var(--text-base); text-decoration: none; transition: background .15s ease, transform .15s ease; }
−removed: .btn-sm { padding: 9px 16px; font-size: 14px; }
+added: .btn-sm { padding: 9px 16px; font-size: var(--text-sm); }
−removed: .hero h1 { font-size: clamp(44px, 6vw, 76px); line-height: .98; margin: 14px 0 18px; font-weight: 600; }
+added: .hero h1 { font-size: var(--text-display); line-height: .98; margin: 14px 0 18px; font-weight: 600; }
−removed: .hero p.lede { font-size: 18px; line-height: 1.65; color: #cfc3ad; max-width: 52ch; margin: 0 0 28px; }
+added: .hero p.lede { font-size: var(--text-lg); line-height: 1.65; color: #cfc3ad; max-width: 52ch; margin: 0 0 28px; }

Who flagged it

1 of 5 reviewers (Visual design), and one of Fitts’s own measurements

What Fitts noticed

• Noticed spacing off the grid: padding-top 3px step 0 · /
• Noticed spacing off the grid: padding-top 5px step 0 · /
• Noticed spacing off the grid: margin-top 6px step 0 · /
• Noticed spacing off the grid: padding-top 7px step 0 · /
• Noticed spacing off the grid: padding-top 9px step 0 · /
• Noticed spacing off the grid: row-gap 10px step 0 · /

Evidence

• padding-top 3px (expected a multiple of 4px)
• padding-top 5px (expected a multiple of 4px)
• margin-top 6px (expected a multiple of 4px)
• spacing values in use: 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 24, 26, 28, 32, 36, 40, 56, 72px
• margin-top 3px

See it yourself

Start at http://localhost:5176/ on desktop. Replayed and seen again

Expected

A multiple of 4px

Actual

Padding-top 3px

Environment

Chromium 156 · 1536×864 · mouse · light · 100%

// Spacing is inconsistent and off-grid
// Fitts repro · Chromium 156 · 1536×864 · mouse · light · 100% · no automatic check
// Steps: open the page
import { expect, test } from '@playwright/test';

test("Spacing is inconsistent and off-grid", async ({ page }) => {
  await page.goto("http://localhost:5176/");
  // Expected: A multiple of 4px
  // Actual: Padding-top 3px
  // Fitts has no automatic oracle for this one: check it by eye, then replace this line.
  test.fixme(true, 'check by eye');
});

Who flagged it

5 of 5 reviewers (Novice, Power user, Accessibility, Visual design, Trust & ethics), and one of Fitts’s own measurements

What Fitts noticed

• Noticed the page is 354px wide at 360px step 1 · /menu
• Noticed the page is 354px wide at 360px step 2 · /menu/margherita
• Noticed the page is 359px wide at 360px step 5 · /cart
• Noticed the page is 359px wide at 360px step 6 · /checkout
• Noticed the page is 354px wide at 360px step 10 · /confirmation
• Noticed the page is 379px wide at 360px step 11 · /reserve

Evidence

• page is 354px wide at 360px (expected no sideways scrolling at 360px)
• page is 354px wide at 360px
• page is 359px wide at 320px

Who flagged it

4 of 5 reviewers (Power user, Accessibility, Novice, Trust & ethics), and one of Fitts’s own measurements

What Fitts noticed

• Noticed "See full menu" is hidden while focused (40% visible) step 0 · /
• Noticed "Neighborhood favorite Margherita Classic" is hidden while focused (0% visible) step 0 · /
• Noticed "Neighborhood favorite Ember Pepperoni C" is hidden while focused (0% visible) step 0 · /
• Noticed "Neighborhood favorite Diavola Spicy sop" is hidden while focused (40% visible) step 0 · /
• Noticed "Start an order" is hidden while focused (0% visible) step 0 · /
• Noticed "Hours & directions" is hidden while focused (0% visible) step 0 · /

Evidence

• "See full menu" is hidden while focused (40% visible) (expected the focused control in view)
• "Neighborhood favorite Margherita Classic" is hidden while focused (0% visible) (expected the focused control in view)
• "Neighborhood favorite Ember Pepperoni C" is hidden while focused (0% visible) (expected the focused control in view)
• "Add to cart · $14.00" is hidden while focused (0% visible)
• 6 navigation links before the content, no skip link

Who flagged it

1 of 5 reviewers (Power user), and one of Fitts’s own measurements

What Fitts noticed

• Noticed the page is 359px wide at 320px step 101 · /menu
• Noticed the page is 359px wide at 320px step 101 · /menu/caesar
• Noticed the page is 359px wide at 320px step 101 · /menu/funghi
• Noticed the page is 359px wide at 320px step 101 · /menu/verde
• Noticed the page is 359px wide at 320px step 101 · /menu/rigatoni
• Noticed the page is 359px wide at 320px step 101 · /menu/diavola
• Noticed text overlaps the text below it with wider spacing step 101 · /menu

Evidence

• page is 359px wide at 320px on Reflow · 320×640 (expected no sideways scrolling at 320px)
• page is 359px wide at 320px
• page is 1426px wide at 759px

How Fitts got there

1. Tapped “Order pickup” → /menu

Who flagged it

2 of 5 reviewers (Accessibility, Visual design), and one of Fitts’s own measurements

What Fitts noticed

• Noticed text overlaps the text below it with wider spacing step 101 · /menu
• Noticed text overlaps the text below it with wider spacing step 101 · /menu/margherita
• Noticed text overlaps the text below it with wider spacing step 101 · /menu/burrata
• Noticed text overlaps the text below it with wider spacing step 101 · /menu/caesar
• Noticed text overlaps the text below it with wider spacing step 101 · /menu/funghi
• Noticed text overlaps the text below it with wider spacing step 101 · /menu/verde
• Noticed text overlaps the text below it with wider spacing step 101 · /menu/rigatoni
• Noticed text overlaps the text below it with wider spacing step 101 · /menu/diavola

Evidence

• text overlaps the text below it with wider spacing on Text spacing · 1280 wide (expected text that keeps its room at 1.5 line height)
• text overlaps the text below it with wider spacing

How Fitts got there

1. Tapped “Order pickup” → /menu

Who flagged it

one of Fitts’s own measurements

Evidence

• Heading levels should only increase by one (expected passes the axe rule)

How Fitts got there

1. Tapped “Order pickup” → /menu
2. Tapped “View Margherita Classica” → /menu/margherita

Who flagged it

5 of 5 reviewers (Novice, Power user, Accessibility, Trust & ethics, Visual design), and one of Fitts’s own measurements

What Fitts noticed

• Noticed div > div > button is small to tap: 66×20px (needs at least 24×24px) step 5 · /cart
• Noticed div.two-col > div.panel > a is small to tap: 388×18px (needs at least 24×24px) step 5 · /cart
• Noticed div.two-col > div.panel > a is small to tap: 388×18px (needs at least 24×24px) step 6 · /checkout
• Noticed Remove is small to tap: 66×20px (needs at least 24×24px) step 30 · /cart
• Noticed Add more from the menu is small to tap: 388×18px (needs at least 24×24px) step 30 · /cart
• Noticed Back to cart is far and small for a primary action: ID 5.1 bits (580px away, 18px wide) step 57 · /checkout

Evidence

• 66×20px (expected at least 24×24px)
• 388×18px (expected at least 24×24px)
• Remove is small to tap: 66×20px (needs at least 24×24px)
• 13 more targets are under the comfortable 44px for touch
• Remove is small to tap: 66x20px (needs at least 24x24px)

How Fitts got there

1. Tapped “View cart & checkout” → /cart

Who flagged it

1 of 1 reviewers (You)

Evidence

• You said: “When you were filling out a pickup order, you should have been able to put in a pickup time.”

See it yourself

Start at http://localhost:5176/checkout on desktop. Reported by the owner

Expected

Actual

When filling out a pickup order on checkout, there is no way to enter a pickup time, which makes scheduling pickup difficult.

Environment

Chromium 156 · 1536×864 · mouse · light · 100%

// No way to set pickup time
// Fitts repro · Chromium 156 · 1536×864 · mouse · light · 100% · no automatic check
// Steps: open the page
import { expect, test } from '@playwright/test';

test("No way to set pickup time", async ({ page }) => {
  await page.goto("http://localhost:5176/checkout");
  // Expected: Add a pickup time input to the pickup checkout flow.
  // Actual: When filling out a pickup order on checkout, there is no way to enter a pickup time, which makes scheduling pickup difficult.
  // Fitts has no automatic oracle for this one: check it by eye, then replace this line.
  test.fixme(true, 'check by eye');
});

Who flagged it

3 of 5 reviewers (Power user, Trust & ethics, Novice), and one of Fitts’s own measurements

What Fitts noticed

• Noticed going back lost what I typed: no back or cancel control on /menu step 48 · /checkout
• Noticed going back lost what I typed: no back or cancel control on /menu/ember-pepperoni step 59 · /menu
• Noticed going back lost what I typed: no back or cancel control on /menu step 75 · /menu/funghi
• Noticed going back lost what I typed: no back or cancel control on /menu step 95 · /menu/diavola

Evidence

• no back or cancel control on /menu (expected a visible way back that keeps what was entered)
• no back or cancel control on /menu/ember-pepperoni (expected a visible way back that keeps what was entered)
• Noticed going back lost what I typed: no back or cancel control on /menu
• no back or cancel control on /menu
• going back lost what I typed

How Fitts got there

1. Tapped “Continue to pickup details” → /checkout

Who flagged it

2 of 5 reviewers (Novice, Trust & ethics)

Evidence

• Time shows "7:00 PM" with options 5:00 PM to 9:00 PM
• Footer Hours: Fri-Sat 12pm-11pm / Sun 12pm-9pm
• You're booked, fitts-test. Table for 2 ... We'll text 5550100

How Fitts got there

1. Tapped “Reserve a table for next time” → /reserve

Who flagged it

1 of 5 reviewers (Visual design), and one of Fitts’s own measurements

What Fitts noticed

• Noticed the page is 1426px wide at 759px step 101 · /menu/burrata
• Noticed the page is 1426px wide at 759px step 101 · /menu/funghi
• Noticed the page is 1426px wide at 759px step 101 · /menu/rigatoni
• Noticed the page is 1426px wide at 759px step 101 · /menu/diavola
• Noticed text overlaps the text below it with wider spacing step 101 · /menu/burrata

Evidence

• page is 1426px wide at 759px on Just under the breakpoint · 759×987 (expected no sideways scrolling at 759px)
• page is 1426px wide at 759px
• page is 359px wide at 320px

How Fitts got there

1. Tapped “View Burrata & Prosciutto” → /menu/burrata

Who flagged it

2 of 5 reviewers (Accessibility, Trust & ethics), and one of Fitts’s own measurements

What Fitts noticed

• Noticed the page is 359px wide at 360px step 62 · /menu/caesar
• Noticed the page is 1522px wide at 860px step 101 · /menu/caesar
• Noticed the page is 1522px wide at 860px step 101 · /menu/funghi
• Noticed the page is 1522px wide at 860px step 101 · /menu/verde
• Noticed the page is 1426px wide at 759px step 101 · /menu/caesar
• Noticed the page is 1426px wide at 759px step 101 · /menu/verde
• Noticed text overlaps the text below it with wider spacing step 101 · /menu/caesar

Evidence

• page is 1522px wide at 860px on At the breakpoint · 860×1118 (expected no sideways scrolling at 860px)
• page is 359px wide at 360px
• page is 1522px wide at 860px

How Fitts got there

1. Tapped “View Little Gem Caesar” → /menu/caesar

Who flagged it

1 of 5 reviewers (Accessibility), and one of Fitts’s own measurements

What Fitts noticed

• Noticed 6 navigation links before the content, no skip link step 5 · /cart

Evidence

• 6 navigation links before the content, no skip link (expected a "Skip to content" link first)
• 6 navigation links before the content, no skip link

Who flagged it

4 of 5 reviewers (Power user, Novice, Accessibility, Visual design), and one of Fitts’s own measurements

What Fitts noticed

• Noticed Add to cart · $14.00 is far and small for a primary action: ID 4.1 bits (729px away, 46px wide) step 28 · /menu/margherita
• Noticed Send message is far and small for a primary action: ID 4.2 bits (808px away, 46px wide) step 32 · /about
• Noticed Add to cart · $11.00 is far and small for a primary action: ID 4.1 bits (729px away, 46px wide) step 63 · /menu/caesar
• Noticed ← Back to menu is far and small for a primary action: ID 5.3 bits (698px away, 18px wide) step 66 · /menu/caesar
• Noticed ← Back to menu is far and small for a primary action: ID 5.4 bits (743px away, 18px wide) step 75 · /menu/funghi
• Noticed Add to cart · $16.00 is far and small for a primary action: ID 4.1 bits (729px away, 46px wide) step 78 · /menu/verde

Evidence

• ID 4.1 bits (729px away, 46px wide) (expected at most 4 bits for a main action)
• ID 4.2 bits (808px away, 46px wide) (expected at most 4 bits for a main action)
• Add to cart · $14.00 is far and small for a primary action: ID 4.1 bits (729px away, 46px wide)
• Send message is far and small for a primary action: ID 4.2 bits (808px away, 46px wide)
• ID 4.2 bits (808px away, 46px wide)

How Fitts got there

1. Tapped “Clear filters”
2. Typed in “Search menu”
3. Tapped “View Burrata & Prosciutto” → /menu/burrata
4. Opened /about
5. Opened /about
6. Opened /menu
7. Tapped “View Margherita Classica” → /menu/margherita
8. Tapped “Add to cart · $14.00”