Key Insight
Be conservative in what you send, liberal in what you accept-design interfaces that handle variable user input gracefully.
Key Points
- •Be conservative in what you send, liberal in what you accept-handle variable user input gracefully
- •Accept diverse input formats (dates, phone numbers, addresses) without requiring exact formatting
- •Output consistently formatted, well-structured data regardless of input variation
- •Anticipate typos, extra spaces, mixed cases, and partial entries
- •Parse user intent rather than demanding syntactic precision
- •Reduce friction by adapting to how users naturally behave
- •[FIGURE 5-1 - Face ID flexibility] Shows: iPhone Face ID authentication screen. Teaches: Face ID accepts variations in appearance (glasses, hats, facial hair changes) while maintaining security-liberal in what it accepts. Reproduce as: Illustration of varied face inputs → single authenticated output.
- •[FIGURE 5-2 - Responsive web design] Shows: Same website displayed across desktop, tablet, and mobile viewports. Teaches: Responsive design embraces the fluid nature of the web-accepting varied viewport sizes and outputting appropriate layouts. Reproduce as: Multi-device preview showing layout adaptation.
- •[FIGURE 5-3 - Progressive enhancement search] Shows: Search component with basic text box that enhances to include autocomplete on capable browsers. Teaches: Progressive enhancement accepts varying browser capabilities while providing the best possible experience for each. Reproduce as: Side-by-side basic vs enhanced component.
- •[FIGURE 5-4 - Design systems scaling] Shows: Design system components used consistently across multiple products. Teaches: Design systems enable consistent output across varied inputs (different teams, products, platforms). Reproduce as: Component library → multiple product implementations diagram.
- •[FIGURE 5-5 - Text expansion i18n] Shows: English text "Search" expanding to Italian "Cerca" with different lengths. Teaches: Interfaces must accept varied text lengths across languages-design for expansion and contraction. Reproduce as: Multi-language string length comparison. Data: English→Italian expansion example.
- •[FIGURE 5-6 - Amazon font scaling] Shows: Amazon.com adapting to user's minimum font size accessibility setting. Teaches: Accept user accessibility preferences and adapt layout accordingly-don't break when users customize their experience. Reproduce as: Same page at default vs large font size.
Guidelines
- ✓Accept phone numbers in any format: (555) 123-4567, 555-123-4567, 5551234567
- ✓Parse dates flexibly: 1/15/24, Jan 15, 2024, 2024-01-15 should all work
- ✓Trim whitespace, normalize capitalization, and strip special characters automatically
- ✓Use input masking as a guide, not a gate-don't reject partial input
- ✓Show formatted output alongside raw input so users learn the expected format
- ✓Reserve errors for genuinely uninterpretable input, not formatting differences
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall - strengthens long-term retention