KNOWLEDGE NOTES

Knowledge Notes

Explore curated knowledge, course notes and methods, with their existing content and sources preserved.

This index lists complete English editions. Additional Chinese notes and bilingual updates remain available in the Chinese index.

350knowledge notes
Product Design & UX / NNGroup User Experience

NNGroup Interaction Patterns · Feedback · Dialogs · Notifications · Loading · Tips · Empty States · Data Presentation (15 Patterns · When to Use/How to Choose/Counterexamples)

Essentials of 15 patterns from the "Feedback and Dialogs" subset of the Nielsen Norman Group design pattern knowledge base. Six major themes: ① Dialogs and interruption grading — Confirmation Dialogs (8 rules: only use for high-severity actions · do not use for routine actions · state consequences clearly · use descriptive buttons instead of Yes/No · progressive disclosure · do not default to Yes · require typing DELETE for high-risk actions · provide a "don't show again" option), Modal vs Nonmodal (5 drawbacks of modals that force response/obscure the background + 7 scenarios where they should/should not be used), 10 problematic popup trends Popups (before page load/right after login/asking for email/requesting feedback before any user action/during critical tasks/multiple in a row/redirecting to external sites/interrupting content/GDPR Cookie/promoting apps without stating benefits — with nonmodal/banner alternatives for each). ② Error messages — three categories of Error-Message guidelines (4 for visibility/4 for communication/4 for efficiency) + 4 principles for improving visibility (place close to the source · redundant for accessibility · grade by severity · do not show too early) + Hostile Patterns counterexamples (premature prompts · misuse of error styling). ③ Loading and progress — Progress Indicators (loop animation for 2–9 seconds/percentage bar for 10+ seconds · provide estimated time for >10 seconds · do not use static indicators · do not warn users not to click repeatedly), Skeleton Screens (three types: static/animated/wireframe · do not use for <1 second · comparison of the three), 13 practices for Virtual Queues (explain purpose · status tracker · auto-refresh · notifications · re-entry · non-intrusive entertainment). ④ Tips and micro-feedback — Tooltip (hover on desktop · do not place critical information · arrows · consistency), Info Tips (i/? icons · three major pitfalls: wasting time/hiding critical information/interrupting flow), Transactional Notifications (SMS vs push · 50–240 characters · only use for urgent matters · allow unsubscribing), 5 rules for User-Feedback Requests (ask after the task · do not spam emails · surveys <1 minute with 4–5 questions · flexible formats · thank and incentivize). ⑤ Empty States 3 goals (communicate status · learning prompts · shortcuts to key tasks). ⑥ Data presentation — Choosing Chart Types (3Cs: Context/Clutter-free/Contrast · bar/line/scatter · avoid pie, bubble, and Sankey charts) + 4 principles for reducing cognitive load in forms Few Guesses (structure/transparency/clarity/assistance · single column · do not use placeholders). Audience = product managers, in-line explanation of jargon, decision-oriented (when to use/how to choose/counterexamples), all numbers retained.

Feedback patternsDialog boxesNotification DesignEnglish edition