szoloth/interface-critique

Interface Critique

A structured framework for critiquing interfaces that starts with the user's job-to-be-done, not aesthetic preferences.

Step 1: Understand the Job

Before critiquing visuals, establish context:

• What is the user trying to accomplish with this interface?
• What must be immediately visible to support that job?
• What can be de-emphasized or hidden?

The interface exists to serve a job. All critique stems from how well it serves that job.

Step 2: Visual Hierarchy Audit

Work through each area systematically:

| Area | Check | Impact | |------|-------|--------| | Icon consistency | All icons same style (filled OR outline)? | Mixed styles create visual noise and suggest different importance levels | | Visual noise | Unnecessary containers, borders, dividers? | Every visual element competes for attention | | Divider consistency | Applied uniformly or inconsistently? | Inconsistent dividers suggest arbitrary hierarchy | | Typography tokens | System labels vs user content distinguishable? | Users need to instantly recognize what's their data vs UI chrome | | Alignment rules | More than 2 dominant vertical guides? | Competing alignment creates cognitive load | | Platform conventions | Actions placed where users expect them? | iOS: primary right. Toolbar: nav → content → primary |

Step 3: Output Format

Structure your critique with this pattern:

Critiques

For each issue identified:

• Issue: What's wrong
• Location: Where it appears
• Impact on job: How it hurts the user's ability to accomplish their goal

Refinements

For each proposed change:

• Change: What to do differently
• Rationale: Why this serves the job better

Example Output

### Critiques

1. **Issue**: Mixed icon styles (outline nav + filled actions)
   **Location**: Top toolbar
   **Impact on job**: Creates false hierarchy—users may hesitate on which icons are interactive

2. **Issue**: Card containers around every data group
   **Location**: Main content area
   **Impact on job**: Visual noise makes it harder to scan for the specific data point user needs

### Refinements

1. **Change**: Unify icons to outline style throughout
   **Rationale**: Navigation and actions share equal importance in this context

2. **Change**: Remove card containers, use whitespace and typography to group
   **Rationale**: Reduces visual noise from 12 bordered elements to 4 clear sections

When to Go Deeper

If the user shares a screenshot or detailed mockup, also check:

• Touch targets (44pt minimum on iOS)
• Color contrast for accessibility
• Loading/empty/error states
• Keyboard navigation order (web)
• Responsive breakpoint handling