Navigation, forms, feedback, errors. Battle-tested solutions you can ship today.
Navigation that users understand instantly. Forms that convert. Error messages that help instead of frustrate. Feedback that builds trust. These battle-tested patterns have been validated across thousands of products—now you can ship them today. No more reinventing solutions to problems that have already been solved.
Key Concepts:
Key Concepts:
How these principles validate your work—whether you use Figma, Cursor, or V0
Stop guessing why forms fail. These battle-tested patterns have been validated across thousands of products—from checkout flows to mobile navigation. Apply them and watch form completion rates climb while support tickets drop. No more reinventing solutions that already exist.
"Make the form better" isn't a spec. These patterns give you concrete implementation details: exact touch target sizes, validation timing, error message placement, loading state behavior. Build interfaces that match user expectations on the first deploy.
Every friction point in your interface costs conversions. These patterns quantify the impact: a 44px touch target vs. 48px, inline validation vs. submit-time. Make data-driven decisions about which patterns to prioritize based on proven results, not opinions.
23 principles organized into 2 chapters
11 principles
8 principles
Validation paths tailored for different experience levels
From Subjective to Scientific
Start with Affordances and Touch Targets—they apply to every button and link you'll ever design. Then audit your most-used form: where do users hesitate? Where do they make errors? These patterns tell you exactly what to fix.
From Guesswork to Guidelines
Go beyond "does it work?" to "does it convert?" Study validation timing, error message placement, and loading states. Run A/B tests on pattern variations. The difference between 68% and 82% form completion is often a single pattern change.
From Features to Outcomes
Optimize for the edge cases that matter. What happens on slow connections? On tiny screens? When users make unexpected inputs? Build patterns that degrade gracefully and recover elegantly. Master the patterns that separate good apps from great ones.
Validate your AI output with these principles in your daily workflow
Apply these patterns to your highest-impact screens:
Ship faster with proven patterns:
Apply what you learned with these exercises
Analyze form completion rates and identify improvement opportunities
Measure and optimize touch targets in mobile interfaces
Create a chart selection decision tree for your product
Document how patterns adapt across breakpoints
Define performance thresholds for your application
Build a library of interaction patterns with usage guidelines
Conduct thumb-zone analysis on mobile interfaces
Test pattern variations to validate effectiveness
Recommended knowledge before starting
cognitive load, Hick's Law, Fitts's Law
feedback, error prevention, user control
visual hierarchy, information architecture
These earlier parts provide essential context for understanding why specific patterns work.