Practice — Interaction Design Principles (5 questions)

You're handed a settings screen for review before launch. It has: a "Delete Account" button that immediately deletes the account with no confirmation; a "Sync Now" button that shows no feedback while syncing (it just silently completes seconds later); labels using internal engineering terms like "Purge Cache" instead of "Clear Downloaded Data"; and a flat list of 30 settings with no grouping.

1. Identify which specific Nielsen heuristic each of the four issues violates.
2. For each, propose a concrete fix.
3. Which one would you flag as highest priority to fix before launch, and why?

A signup form lays out its fields like this, with uniform vertical spacing between every element on the page (label, input, next label, next input, all equally spaced):

Email
[___________]
Password
[___________]
Confirm Password
[___________]

Users report that the "Confirm Password" label sometimes feels like it belongs to the field above it (the original Password field) rather than the field below it, causing confusion about which field they're currently filling in.

1. Which Gestalt principle explains why uniform spacing causes this specific confusion?
2. Propose a concrete layout fix using that same principle, and explain why it resolves the ambiguity.
3. Name one additional Gestalt principle you could layer on top of your fix to further reinforce which label belongs to which field, and how.

A mobile app's editing screen has a toolbar of 14 icon buttons in a single horizontal row along the top of the screen, each about 24x24 points, packed edge-to-edge with 2px gaps. Below the toolbar is the main canvas. Users on a usability panel report frequent mis-taps and say the toolbar feels "overwhelming" even though they only regularly use 3 of the 14 tools.

1. Diagnose the two distinct problems here, naming the specific law each one violates.
2. Propose a redesign that addresses both, being specific about layout, not just "make it simpler."
3. What's the risk of over-correcting your fix, and how would you guard against it?

A web app redesigns its dashboard in a minimalist "flat" style, removing all button shadows, borders, and background fills — buttons are now just text in the brand color, sitting directly on a white background, identical in style to non-interactive labels elsewhere on the page. Post-launch analytics show a meaningful drop in clicks on the primary "Export Report" action, even though the button's position and label text didn't change.

1. Using the affordance/signifier distinction, explain the most likely cause of the click drop.
2. Propose two different fixes, at different levels of visual commitment, and the tradeoff between them.
3. How would you validate which fix actually solves the problem before rolling it out broadly?

A checkout flow currently works like this: a user fills in a credit card number, expiration date, and CVV in three plain text fields with no formatting or validation, clicks "Pay," waits several seconds, and only then sees a red banner reading "Payment failed." There's no indication of which field was wrong or why.

1. Using the error-prevention-over-recovery hierarchy, identify which tier this flow currently sits at, and why.
2. Redesign the flow to move it up the hierarchy, being specific about what changes at each field.
3. Is it realistic to fully eliminate the possibility of a failed payment at checkout? Explain what tier represents the practical ceiling here, and why full prevention isn't achievable for this particular action.