This batch is all about "how the interface talks to users" — when to interrupt, how intrusive the interruption should be, whether the message is clear, and how to recover when something goes wrong. A hidden thread runs through the whole piece: two of Nielsen's 10 usability heuristics:#1 Visibility of system status(letting users know what is happening at all times: loading/queuing/errors/no data) and #9 Help users recognize, diagnose, and recover from errors(use plain language when problems occur and clearly explain how to resolve them). For details see NNGroup Usability Testing and the 10 Usability Heuristics (full table of 10 heuristics · application to complex apps · user delight hierarchy · testing methods: 5-user rule/recruitment/remote/task scenarios/step-by-step tasks/attitude vs behavior/4-step analysis/small-sample bias/competitive evaluation).
One overarching decision principle:Interrupting users has a cost. Every popup, every red error mark, every text message spends a portion of the user's attention. So the core question is always "is this interruption worth it" — interrupt when it is worth it (prevents serious errors, provides genuinely useful status), and do not interrupt when it is not (you just want their email, want to push your app, or are being lazy with loose rules).
The full text is divided into six sections: ① Dialogs and interruption grading (confirmation · modal/nonmodal · 10 popup pitfalls) → ② Error messages (writing · visibility · hostile counterexamples) → ③ Loading and progress (progress indicators · skeleton screens · virtual queues) → ④ Tips and micro-feedback (tooltips · info tips · transactional notifications · feedback requests) → ⑤ Empty states → ⑥ Data presentation (chart selection · reducing cognitive load in forms).
I. Dialogs and Interruption Grading: Confirmation · Modal/Nonmodal · Popups
These three articles represent different points on the same spectrum:Confirmation dialogs are about "whether we should stop the user",Modal/nonmodal are about "whether we should freeze the entire interface when stopping them",Popups are about "the 10 ways people overuse this mechanism in practice". First, establish two terms:
- Modal: A window that overlays the main content and disables the background. Users must deal with it before returning to their main task (like a cat that comes to demand food right in front of you at 7 a.m. every morning).
- Nonmodal: Also floats above content, but does not freeze the background, so users can continue working while viewing it (like a cat that waits patiently by the dinner table for food to drop).
- Lightbox: The type that dims the background; most are modal, but not always.
1. Confirmation Dialogs (8 guidelines)
Core principle: The essence of a confirmation dialog is to "deliberately interrupt you and force you to double-check a decision". This interruption is only worthwhile when it prevents a serious error; otherwise it is harassment. The biggest failure mode is — users get annoyed by being asked, develop muscle memory to mindlessly click "Yes", and click right through genuinely important warnings (the "boy who cried wolf" effect).
| # | Guidelines | How to do it / Counterexamples |
|---|---|---|
| 1 | Only use for actions with severe consequences | Irreversible or high-cost actions (deleting important data, incurring large charges, large bank payments). Even then,provide "Undo" whenever possible to reduce anxiety |
| 2 | Do not use for routine actions | Too-frequent confirmations desensitize users and weaken the effectiveness of real warnings ("the boy who cried wolf") |
| 3 | State consequences clearly; do not ask vague questions | Counterexample: "Are you sure you want to do this?". Good example: "You will permanently delete the following file: XXX.pdf" |
| 4 | Use descriptive buttons instead of Yes/No | Buttons should state the action: "Delete file" "Keep file", rather than vague "Yes/No" |
| 5 | Provide more information via progressive disclosure | For complex actions, use a "Learn more" button to collapse details, keeping the main dialog concise (Microsoft Word does this to avoid information overload for ordinary users) |
| 6 | Do not default to "Yes" | Defaulting to "Yes" invites accidental actions; it is best to have no default, or set "No" as the default |
| 7 | Require nonstandard confirmation for high-risk actions | MailChimp requires users to manually type a word like DELETE when deleting a mailing list, to prevent automated/mindless clicks. Only use for extremely critical actions; do not overuse |
| 8 | Allow skipping future routine confirmations | For non-serious but impactful actions, provide a "Don't show again" checkbox (Word's file conversion confirmation dialog has this) |
Customize based on task analysis: Before designing, evaluate two things — ① the severity of an error on the action; ② the frequency of the action. For example, banks can personalize based on user payment habits: only pop up a confirmation when the amount exceeds the user's usual range, reducing interruptions while keeping large transactions safe.
2. Modal vs Nonmodal Dialogs: 7 Scenarios to Use/Avoid
5 inherent drawbacks of modals(so do not use modals for non-critical tasks): ① Force an immediate response; ② Interrupt workflow (users spend extra time recovering context); ③ Increase cognitive load and may cause users to forget details of the original task; ④ Add extra tasks (read content + make a decision); ⑤ Obscure important background information.
| Use modals when (interruption is worthwhile) | Avoid modals when (interruption is not worthwhile) |
|---|---|
| 1 Important warnings/preventing critical errors — PowerPoint prompts to save unsaved content; Gmail detects a forgotten attachment | 5 Information unrelated to the task — GoodHousekeeping displays a full-screen photo covering the email list to make a request within3 seconds of entering the site, and the information has no value to the user; Wayfair uses a modal to ask you to "invite friends to a collection board", which is unnecessary and adds cost |
| 2 Requesting critical information required to continue the flow — Etsy requires login when saving an item | 6 During critical flows (e.g., checkout) — Early Walmart popped up a login during checkout, distracting users/causing unease |
| 3 Breaking complex flows into simple steps — but when there are many steps,progress must be shown to maintain motivation | 7 When the decision requires information that is obscured — Frontier Airlines asks you to buy add-on services but does not provide the information needed to decide |
| 4 Requesting information that can significantly reduce user workload — Zillow asks "Do you already have an agent?" when contacting a real estate agent |
Tradeoffs of nonmodals: Prioritize nonmodals for non-critical tasks (you can look up other information while writing an email in Gmail). But be careful:The Meowbox desktop version has an easily dismissible time-limited nonmodal in the bottom-right corner,but the mobile version degrades into an undismissible full-screen modal — the same prompt becomes a forced interruption on small screens.
3. 10 Problematic Popup Trends (with alternatives for each)
"Popups (overlay/popup)" are windows that float above content; modals, nonmodals, and lightboxes all count. Decades of research have repeatedly shown:people generally dislike popups, and encountering them frequently during critical operations leads directly to task abandonment.
| # | Problematic trend (counterexample) | Alternative |
|---|---|---|
| 1 | Pops up before page content loads(users are interrupted before they experience any value; Google lowers search rankings) | for such mobile "interstitials that impede content access"; wait until the popup content is relevant to the context to show it; provide value before making a request (reciprocity principle); exceptions for legal requirements (Cookie consent, age verification — the Huffington Post has an obligation to request consent to use location data, which is acceptable) |
| 2 | Pops up immediately after login(interrupts the user's next task) | Give users time to complete their task first; use tooltips/small nonmodals to introduce new features at the right moment (Gmail only uses an unobtrusive nonmodal to introduce new features after the user has already started cleaning their inbox) |
| 3 | Asks for an email before any interaction(users suspect they will receive spam) | Choose moments when users are most willing to provide it (after reading a blog post, while browsing promotions), use a lightweight nonmodal in the screen corner + offer an attractive reward (MarkManson.net only pops up after finishing the article, and gives a free e-book) |
| 4 | Asks for feedback before the user has done anything meaningful(gets closed instantly, and users will not actively seek out the feedback entry again) | Ask after key tasks are completed (BlueJeans only asks after a meeting ends, leading to more substantive feedback) |
| 5 | Interrupts during key tasks to ask for feedback(United Airlines pops up a centered modal during the "get boarding pass" process) | Ask after the task, or provide a static non-intrusive entry — Nestlé places a feedback link in the footer; British Airways has a permanent "Feedback" button on the right side of all pages |
| 6 | Pops up multiple popups in a row(feels cluttered and tires users; Lulus pops up multiple feedback requests at the end of checkout) | Show only one at a time; better yet, place key information directly on the page(Canva uses visually distinct top content modules instead of popups) |
| 7 | Pops up a modal before redirecting to an external site/subdomain(HSBC's multi-layer modals in the recruitment process leave users with a poor impression of the application process) | Reduce cross-site redirects; use unobtrusive prompts (tooltips on links) — Eli Lilly uses info tips to inform users "You are about to go to another website" to help them remember the path |
| 8 | Uses a modal to interrupt content access(CNN mobile pops up a subscription offer as soon as you enter an article; users come to read content, not subscribe) | Let users see content immediately; use an easily dismissible top banner instead (Conde Nast Traveller places a subtle dismissible banner below navigation) |
| 9 | Uses a modal to display GDPR/Cookie notifications(users are conditioned to instantly close popups, so important privacy information is not communicated effectively) | Use a nonmodal at the bottom/side of the page + transparent language explaining how data is used (NNgroup.com itself does this; Reddit uses a small nonmodal but the language is too vague) |
| 10 | Promotes app downloads without stating specific benefits(Wayfair's generic modal makes users feel they have to start over on another channel, with no real benefit) | Use a top/bottom banner + clearly state the benefits of downloading (Macy's bottom nonmodal includes an incentive + displays the App Store rating) |
II. Error Messages: Writing · Visibility · Hostile Counterexamples
These three articles interlock with each other:Error-Message Guidelines is the overarching framework (covering three categories: visibility, communication, efficiency),How to Increase Visibility zooms in exclusively on the 'visibility' dimension to explain it thoroughly,Hostile Patterns wraps up from the negative side (overzealous error prevention/recovery design actually harms users). All are anchored to heuristic #5 Error Prevention and #9 Help Users Recognize, Diagnose, and Recover from Errors.
1. Error-Message Guidelines: 12 rules across three categories
Visibility Guidelines — Make errors noticeable:
- Place error messages close to the error source(position them next to the interface element where the error occurred, to reduce cognitive load). Counterexample: Instagram’s error messages are far from the URL input field and styled too subtly to notice.
- Use obvious, redundant, accessible indicators: bold text + high contrast + red color; animation can direct attention;Follow accessibility standards — do not rely solely on color or animation to indicate errors. Positive example: Amazon uses three layers of cues: border highlighting + icon + red text; CafePress uses an animated banner to alert users to blank custom fields.
- Adjust styling based on error impact: use banners/labels for minor issues, use modals to require resolution for severe issues. Positive example: Kohl's uses non-traditional red to notify users of possible shipping delays, avoiding unnecessary user distress.
- Do not display errors prematurely: do not report errors before the user has finished their action; use real-time feedback in error-prone scenarios. Positive example: CLEAR provides real-time prompts for password requirements; Counterexample: the Texas vehicle registration page shows an 'empty field' error as soon as the user clicks an input box.
Communication Guidelines — Speak plainly, do not blame:
- Use human-friendly language, hide technical jargon/acronyms (404 pages are often hard to understand because of 'technical code').
- Describe the problem concisely and accurately, do not just say 'an error occurred', and do not overuse technical language. Counterexample: Disneyworld uses puns to obscure the problem when there are no search results, without clearly explaining the cause.
- Provide constructive suggestions(on how to resolve the issue). Positive example: for an 'out of stock' item on e-commerce sites, show estimated restock time or offer restock notification subscriptions; Target prompts 'spend more to qualify for same-day delivery' without blaming the user.
- Use a positive tone, do not blame the user: avoid blaming words such as 'invalid' or 'illegal', attribute the problem to the system rather than the user;Use humor cautiously(it becomes annoying if it appears too often). Counterexample: National Geographic Kids lacks explanatory error messages for underage users.
Efficiency Guidelines — Help users avoid detours:
- Prevent common errors(modern email apps detect 'forgotten attachment' situations).
- Preserve user input(do not clear fields when an error occurs and force users to re-enter; Instagram offers a 'save draft' option when exiting).
- Reduce error correction cost(provide selectable city buttons when city and postal code do not match);Briefly educate users on how the system works + add hyperlinks to detailed documentation. Positive example: Vistaprint explains what happens to text outside the printable area; Counterexample: Zazzle has printable area guidelines but does not warn that text will be cut off.
Use novel mitigation for extreme outages: for irrecoverable failures (such as server overload), creative approaches can reduce negative experience — ChatGPT serves educational content during outages; Twitter's 'Fail Whale' used humor to communicate service interruptions and became a well-known symbol.
2. How to Increase the Visibility of Error Messages (4 guidelines, expanded from visibility)
- Close to the source: if an error message is too far from the error itself, users will not see it and will struggle to understand the connection (required-field errors should appear near the field, not at the top of the page).
- Prominent + redundant + accessible: red is often used for errors because it easily draws attention; redundancy = highlighted field + text explanation + icon (exclamation mark);accessibility = clear for colorblind and visually impaired users(do not rely solely on color).
- Design styling by severity: use prominent red for critical errors (form submission failure); use plain text for non-critical information ('delivery may be delayed due to weather'),do not use red so users do not mistakenly think the operation failed.
- Do not display prematurely: scenarios suitable for real-time prompts — show which requirements are met in real time when creating a complex password;scenarios not suitable — do not prompt 'not enough digits' before the user finishes entering a phone number(users usually know the required digit count).
3. Hostile Patterns in Error Messages (2 ironclad negative rules)
'Overly aggressive error prevention/recovery design is equivalent to leaning over the user's shoulder and yelling "You messed up!" — it is both unhelpful and annoying. Design exists to help users, not to blame them.'
Ironclad Rule 1: Avoid Premature Error Messages — Reporting errors before the user has finished filling in, or even before they have made a mistake. Collection of counterexamples:
- LG checkout postal code: prompts a format error as soon as digits are entered, and the error only disappears when 5 digits are entered.
- Labcorp payment portal email: pops up 'invalid email address' after the user enters the first character.
- Sorel date of birth: prompts 'please enter a valid date' before entry is complete.
- Hilton (Conradnewyork.com) last name field: as soon as the user clicks the field, it shows a red border + 'please enter your last name' (this should only appear if the user skips the field and attempts to submit).
- Xpress-pay amount field: shows 'amount cannot be empty' + multiple redundant indicators (red border, exclamation mark icon) when the user has not yet interacted with it.
- Improvement: error prompts should only display after the user completes field entry or moves to the next field; explain format restrictions in advance with placeholders/notes (instead of correcting as the user tries); mark required fields only with an asterisk or the text 'required', do not pile on redundant prompts.
Ironclad Rule 2: Reserve Error Styling for Errors Only — Using red text, warning icons, or yellow backgrounds for non-error messages will make users mistakenly think they made a mistake and interrupt their task flow. Counterexamples/positive examples:
- Counterexample HR system: ordinary status information such as 'no attachments to display' is styled with a yellow background + warning icon, making it seem more important than it actually is.
- Counterexample Thrift Books checkout: 'please ensure your address is correct, it cannot be changed after submission' uses red text + warning icon, making people mistakenly think there is an error.
- Positive example Amazon Glow: a call failure uses a yellow icon to prompt 'call failed' —this is a real problem, appropriately drawing attention.
- Positive example PayPal mobile app: non-error notifications use gray background + info icon (lowercase i inside a circle), avoiding visual confusion.
- Wrap-up: use gentle colors + info icons for non-critical prompts, and reserve intrusive red/yellow warning styling for critical errors that truly require interrupting the workflow.
III. Loading and Progress: Progress Indicators · Skeleton Screens · Virtual Queues
The theme all ties back to heuristic #1 Visibility of System Status: when the system is busy, it must reassure users that 'it is working, it has not crashed, and how much longer it will take.' The three articles divide responsibilities by wait duration and scenario.
1. Progress Indicators (choose type by duration)
Why feedback matters: if the system does not provide timely feedback, users become anxious — they suspect the command was not received, suspect the system crashed, and consequently click repeatedly or abandon the task. Even if feedback cannot speed things up, displaying feedback itself improves the experience.If response takes more than 10 seconds, provide an estimated completion time to help users plan their wait. (Real-world analogy: calling the California DMV — hold music confirms the call is still connected, gives a '15–20 minutes' estimate, and offers a callback option so you do not have to stay on the line.)
4 functions of progress indicators: ① Confirm the system is working; ② Visually distract to relieve boredom; ③ Give users a reason to wait that 'something is in progress'; ④ Occupy part of the user's attention, reducing perception of time passing.
| Type | Applicable scenario | Description |
|---|---|---|
| Looping animation indicator (spinner) | 2–9 seconds | Indicates 'working' but does not show remaining time (the spinners used by United/Evernote/Facebook).Not suitable for >10 seconds(lack of progress information easily leads to task abandonment); can add 'Loading…' text |
| Percent-complete indicator (progress bar) | >10 seconds | Shows completed/remaining progress (Expensify, WeTransfer). Multi-step tasks can show 'Step 3 of 5';avoid sudden slowdowns in the final segment that cause frustration |
| Static indicator | Not recommended | Only shows 'Loading…' with no dynamic feedback; users cannot tell if the system has crashed |
| 'Do not click again' warning | Incorrect practice | You should not rely on warnings to prevent repeated clicks; the correct approach is to display clear feedback confirming the action has been received |
Overall recommendation: 2–9 seconds → looping animation; 10+ seconds → percentage bar. Loading animations/mini-games for children's/gaming scenarios must ensure they do not obscure main progress information, are simple and fun, and relate to the main task.
2. Skeleton Screens (full-page placeholders)
Definition: while the page loads, gray boxes simulate the layout as placeholders, giving users a visual expectation of 'what the page will look like' and reducing perceived long load times. Typically used for full-page loading.
Three types:
- Static content/image skeleton screens(most common): gray boxes simulate layout, thick lines represent headings, thin lines represent descriptions, and card order displays structure (Headspace).
- Animated skeleton screens: gradient/shimmer animations further reduce the feeling of waiting (DoorDash's horizontal shimmer).
- Frame-style skeleton screens(Not recommended): only shows the top and bottom frame, with no content placeholder boxes, appearing almost blank; users will mistakenly think the page failed to load (NBC).
Benefits: ① Prevents blank pages from being misjudged as loading errors, improving retention; ② 'Progressive filling' shortens perceived wait time; ③ Lets users gradually build a mental model of the page structure during loading, reducing cognitive load.
Skeleton screens vs progress bars vs loading animations (how to choose):
- By duration: 2–9 seconds → either skeleton screens or loading animations are acceptable;>10 seconds → progress bar is more appropriate(provides specific wait time).
- Do not use for fast pages under 1 second — a loading screen that flashes by quickly instead makes people feel they 'cannot keep up.'
- Use progress bars for process-type operations (download/upload/file conversion) rather than skeleton screens, as progress is clearer.
- Avoid frame-style skeleton screens. Skeleton screens are suitable for full pages, loading animations for single modules (videos/cards). Note: skeleton screens are only a tool to ease moderate wait anxiety,they cannot replace performance optimization.
3. Virtual Queues (13 practices)
'Virtual Queue' = using queuing tools to manage waits both online (preventing server crashes on high-traffic sites, ticket rushes) and offline (restaurant/attraction/DMV waits, which rose in popularity after the pandemic).High-level principle: manage waiting in a user-centric way, make people feel their time is respected, eliminate unexpected dropouts, and allow users to do other things while waiting.
| Stage | # | Practice points |
|---|---|---|
| Before entering/just entering the queue | 1 | Explain the purpose and necessity of the queue(virtual queues are unfamiliar to some users; a tax portal displayed 'There are currently 1937 people ahead of you') |
| 2 | Clearly state how to enter the queue, with multi-channel notifications + signage at the entry point (Delaware DMV lets visitors scan a code from their car to join) | |
| 3 | Explain why the queue is closed(clearly inform users when closed due to time or capacity limits; Disney's WEB SLINGERS status changed to 'not boarding' without explaining why — a reason should be given) | |
| 4 | State when it will open and allow advance preparation(Disney clearly states 'opens at 7:00 a.m.' and allows confirming party members in advance; Ticketmaster uses a 'waiting room' to hold visitors before opening, and users automatically enter the queue without refreshing) | |
| 5 | Explain all requirements before entering the queue(what to bring, whether documents need to be filled out first; do not wait until after users enter the queue to tell them, otherwise they may lose their spot for not meeting requirements) | |
| While in the queue | 6 | Clearly specify wait details, the status tracker must include at least one of:how many people are ahead / estimated wait time(in an easy-to-understand format; Volcano Bay shows countdown minutes on wearable devices; mobile can display Live Activities on the lock screen, such as Uber/Lyft) |
| 7 | Automatically refresh queue status(no manual refresh needed — manual refreshing may cause lost position; inform users it will auto-refresh + add a 'last refreshed' timestamp to reassure users the queue is active; Aldi uses this approach) | |
| 8 | Allow setting queue notifications(let users leave to do other things and come back when it is their turn;provide multiple channels: SMS/email/push) | |
| 9 | Clearly state what happens if you exit the page(some queues let you leave without losing your spot, others require keeping the page open; Hunkemöller informs users they can close the page without losing their spot, Harvey Nichols informs users leaving will lose their spot) | |
| 10 | Make re-entering the queue easy(place a one-click re-entry entry on the homepage/landing page) | |
| 11 | Prepare in advance for 'it's your turn'(Disney's confirmation screen has 'What's next?' and requires arriving at the entrance within 1 hour after receiving the notification; Universal Studios informs guests they must be called by 4:13 p.m.; university course registration limits completion to 30 minutes) | |
| 12 | Notify users of important progress while waiting(Don’t let people wait in line only to find the item they want is gone; for sneaker sales, update the availability of certain sizes in real time) | |
| 13 | Entertain visitors without disrupting the main task(Simple games/media can be placed, especially for queues that require staying on the page; but keep the main progress indicator visible, use simple relevant media, and make transitions clear — research on children’s websites shows that temporary games/videos may cause confusion) |
IV. Prompts and Microfeedback: Tooltips · Info Tips · Transactional Notifications · Feedback Requests
This section covers “lightweight, supplementary communication.” Shared core principles:They are supplements, not the main information; critical information should always be placed directly in the interface, never hidden inside prompts.
1. Tooltip (triggered by hover on desktop)
Definition: A short information box that appears when a user interacts with an element, triggered by mouse hover or keyboard hover, attached to an active element (icon/link/button) to provide context.User-triggered, not applicable to touchscreens— use Popup Tip instead on touchscreens.
| Tooltip | Popup Tip |
|---|---|
| Desktop | All devices |
| Hover-triggered (mouse/keyboard) | Touch/tap-triggered |
| Disappears when leaving the interaction area | Disappears only when tapping close or tapping elsewhere |
| Paired with: icons, text links, buttons | Paired with: icons marked with “?” or “i” |
5 Guidelines:① Do not put critical information in tooltips(Amtrak put password requirements inside a tooltip — information required for form filling should be displayed directly; positive example from FedEx: use a tooltip to explain “Why we need your email”); ② Be brief and helpful(Do not repeat the obvious; Sprint’s “Add New Line” button paired with a tooltip of the exact same text is purely redundant; positive example from Alibaba: explains “Search by image” for an unlabeled camera icon); ③ Support both mouse and keyboard hover(McDonald’s only supports mouse, so keyboard users cannot access it; Wikipedia supports both); ④ Use arrows to indicate association when multiple elements are adjacent(PowerPoint has multiple adjacent icons without arrows, making associations hard to judge; Witeboard uses arrows); ⑤ Be consistent across the entire site(Tooltips are inherently hard to discover; Business Insider only adds them to some icons, creating an inconsistent experience; Todoist consistently equips all main icons with them). Other notes: add descriptive tooltips to unlabeled icons; ensure sufficient contrast against the background; do not cover associated content.Self-check question: Is the information in the prompt critical to completing the task? If yes → display it directly on the page; if no → use a tooltip as a supplement.
2. Info Tips (why they are often bad)
An info tip = extra explanation next to an element, visible when tapping/hovering over the ii?? icon. Content should be supplementary information that is “nice to know, but not required to complete the task.”= “There is more explanation here” (when the user actively wants to learn);? icon= “I need help.” But position matters more than the icon itself— when placed right next to a control, both will be interpreted as “explaining this control.” Two presentation forms: hover tooltip on desktop / tap popup tip on mobile, essentially the same.
Info tips are often used as a “patch” to cover up unclear labels, hiding important information to make the interface look “clean.”Three major pitfalls:
- Pitfall 1: Wasting the user’s time — Every tap to open has a cost; if the content is marketing copy, repeats information already on the interface, or explains the obvious, it drains attention and erodes trust. Counterexamples: Doodle’s tip next to “Schedule 1:1” opens to “The fastest way to get two people together” (empty talk); State.gov’s tip next to “City of Birth” only says “Fill in your city of birth” (says nothing at all); a printer’s paper setting tip only says “Select a paper you like from below” (users want to know the difference between Satin and Glossy but that is not provided).
- Pitfall 2: Hiding critical task-assistance information — Usage rules, restrictions, character-count requirements, and explanations for complex choices should not be hidden inside (users need to cross-reference them repeatedly). Counterexamples: Find a Grave hides the meanings of the three Yes/No/Maybe options inside info tips; USPS hides character limits, so users only find out they exceeded the limit and need to refill after submitting (= deliberately making users make mistakes). Positive example: Microsoft Test and Learn displays explanations for different output types directly in the interface, so users can see explanations while viewing options.
- Pitfall 3: Interrupting the task flow — Users only want to glance at an explanation and close it, but some designs pop up a large window that covers the screen or jump to another page. Counterexamples: After Capital One opens a payment option tip, the entire interface changes, so users cannot see the previous options and can only rely on memory; GSA.gov’s “First and last day of travel” pops up a large window covering the form; tapping ? on Nextdoor’s login verification jumps directly to a long explanation page, with the needed information buried in a wall of text.
- Conclusion: The correct role of an info tip =providing immediate, supplementary, optional explanations without interrupting the flow; it should not hide critical information, replace clear copy, or appear intrusively.
3. Transactional Notifications (SMS vs push)
“Transactional Notification” = notifications centered around existing orders(delivery notifications) or the user’s relationship with the company(terms of service updates), distinct from marketing notifications. Based on two diary studies.
Similarities to email:① Clear subject line summarizing the content(Uber’s “Rate your trip” is direct; Wish uses the company name as the title = redundant and meaningless); ② Details are concise and easy to read(eBay’s security alert was praised for being concise and included a direct link to personal profile); ③ Provide all necessary information(Best Buy’s SMS order confirmation includes delivery date/address/how to change address/how to unsubscribe; counterexample: Zara’s status-change email does not state which order is affected or which items it includes; a cocoa milk tea pickup notification mentions an order number but users have trouble identifying which order it refers to).
Differences from email (more constrained, need to be more concise): Push notifications usually only display 50–240 characters; SMS is mainly plain text, with key information placed at the front; users browsing quickly tend to ignore overly long messages.Therefore include only key information(company name, order summary, status change); non-urgent information (return policy) goes via email.Higher timeliness requirements: Users consider a delivery notification delayed by 30 minutes unacceptable, but a 30-minute auto-reply to a customer service email is acceptable.Use only for urgent content(especially SMS; Capital One’s SMS is appropriate because it involves finances and is time-sensitive, listing the merchant name and amount).Cultural factors: Chinese users are accustomed to using mobile phone numbers for identity recognition, and SMS is more common, while Western users mostly use email.
How to choose between SMS and push:
- Reserve SMS for critical, time-sensitive information: order details (items/delivery time and location), information needed for later reference (pickup codes), important status changes (delivery time changed/order canceled), urgent information (booking reminders/account updates), and situations requiring quick feedback (transaction confirmation/two-factor authentication). SMS has larger capacity, is less likely to be accidentally deleted, suits users without the app, and is more reliable with poor signal.
- Push is suitable for non-urgent information: prompts to return to the app to view (terms changes/cart reminders), non-urgent status changes (shipping notifications). Push can take users to a specific page in the app, is suitable for guiding follow-up actions, and is not as annoying as frequent SMS messages.
- Allow unsubscribing from specific channels: provide a clear unsubscribe button in emails, append “Reply STOP to unsubscribe” at the end of SMS (Allay includes unsubscribe instructions in every SMS), and allow apps to customize notification frequency and types.
4. User-Feedback Requests (5 rules)
Feedback is usually collected during or after a user interacts with a product, and falls under Voice of Customer (VOC) programs.
- Let users complete the task first, then ask for feedback (Task, Then Ask): Do not pop up a feedback window when the user has just entered the page or has not performed any operation (it loses reference value and causes resentment). Counterexamples: Shark pops up a feedback window when starting the robot vacuum, leading to negative feedback; Xfinity tells users to “come back to fill it out after finishing,” but users close the browser and forget; United Healthcare’s pop-up interrupts the main task of “finding a healthcare provider.” Positive example: Southwest Airlines requests feedback after completing key tasks, with appropriate placement that does not cover important information, and is specific (asking questions about “cancellation”), leaving a feedback tab even if accidentally closed.
- Ease the Eager Emails: Do not send an email after every interaction (one user received 5 feedback emails in 4 days). Ask at key moments, and use the channel the user is on as much as possible (in-app notifications). Shipt uses push to request shopping/order feedback, which is better than email, but do not display multiple at once(shopper rating first, then app feedback).
- Keep Surveys Short: Ideally completed in <1 minute, with 4–5 questions, and do not interrupt the main task. Counterexamples: Calendly pops up a 2-minute feedback survey during troubleshooting; KLM pops up a 2-minute survey during check-in (both timing and length are wrong). Positive example: CD Baby’s survey has 4 questions and takes about 30 seconds to complete.
- Offer Flexible Feedback Formats: Mix ratings/multiple-choice questions/open-ended questions, and place open-ended fields at the end and make them optional. Counterexample: IKEA starts with an open-ended question (should start with closed-ended questions). Positive examples: Mint uses thumbs up/thumbs down + an optional 500-character field; Sonos uses a clearly endpoint-labeled 10-point scale (with an optional open-ended field that can be added).
- Appreciate and Incentivize: Explain what the feedback is for, express gratitude, and may offer rewards (points/discounts). Starbucks asks for feedback after orders + a sweepstakes to win a gift card; Embrace Pet Insurance asks for feedback after customer service calls and allows users to reward customer service with “send lunch.”Feedback analysis: Regularly organize feedback to find common issues; when budget/time is limited, it can serve as an alternative form of user research.
V. Empty States (3 goals)
“Empty State” = a container/page with no content (no favorites, no recent items, unconfigured reminders, unfilled workspace, no search results).The default approach is “keep it blank until the user finishes configuration”— which saves development time, but often causes confusion and wastes opportunities to improve usability and learnability. This is especially common in complex apps during first use/import.
Do not treat empty states as an afterthought detail. Well-designed empty states have 3 goals:
- Communicate System Status: A completely blank page leaves users wondering “Is there really no content, did something go wrong, or is it still loading?” Adding a short message (e.g., “No records to display for the selected time range”) improves status visibility and builds confidence.Avoid misleading status messages: Some apps display “No records” first while loading, then show content after loading finishes — users may lose trust or even leave before loading completes.
- Provide Learning Cues: When a panel is empty, take the opportunity to explain how the feature works (similar to “Pull Revelation” — help appears only when the user interacts, without interrupting). DataDog’s empty favorites panel displays “Star your favorites to list them here”; Microsoft Power BI explains how to add content to this area when there are no recent projects.
- Provide Direct Pathways for Key Tasks: Do not only say “what can be done,” but also provide an entry for “how to do it.” Counterexample: An app’s empty state only says “Send a request to view details” but does not say how or where to find it. Positive examples: An empty alert panel provides a “Create” button + a “Learn more” link; Loggly provides two onboarding paths (add a log source / explore with demo data).
Key takeaways: Avoid completely blank pages; provide learning cues; provide shortcuts (links/buttons) for key tasks; use progress indicators during processing; give a short system status message when there is no data.
VI. Data Presentation: Chart Selection · Reducing Cognitive Load in Forms
1. Choosing Chart Types (context first)
This article only covers Explanatory Data Visualization——to communicate findings to teams/stakeholders/clients.Does not cover infographics (narrative integrated presentations) and dashboards (real-time monitoring).
The 3 Cs of good charts:① Context(provide background for data); ② Clutter-free(keep it clean); ③ Contrast(highlight key points). This article focuses on Context.
Why Context comes first: Numbers are meaningless without context — simply stating "checkout completion rate is 24%" has no value; adding "it was only 17% last year" makes it meaningful. Common UX comparisons: the same data point across different time periods (completion time before vs after a redesign), comparisons across similar products/features/user groups (own product vs competitors, different page templates, behavior across user groups). Comparing values also requires understanding basic experimental design and statistics (confidence intervals, statistical significance).
Choosing chart types(three commonly used types):
| Chart | Applicable scenarios | Key points / Counterexamples |
|---|---|---|
| Bar chart | Most UX comparison scenarios (intuitive and easy to understand) | Single bar: conversion rate difference before and after a redesign;Paired bars: compare performance of different user groups (consumers vs designers) before and after a redesign,grouped by user group for quick comparison;Horizontal bars: better when labels are long (avoids hard-to-read vertical/diagonal text, e.g. task name "Find the bill dated May 12");Stacked bars(proportions of success/failure/needed help)not recommended——segments start at different positions making comparison hard |
| Line chart | Shows trends over time | e.g. 5-year CSAT (Customer Satisfaction) trend; specific data point positions should be marked on the time axis to improve clarity |
| Scatter plot | Shows the relationship between two variables | e.g. feature usage frequency (y: average uses per person in 30 days) vs reach (x: share of accounts that use the feature), can be used to argue for prioritizing the 3 most popular features |
Charts to avoid(require users to judge angle/area/volume, high information processing burden, use only when truly necessary): pie charts, bubble charts, mosaic plots, unit charts/waffle charts, Sankey diagrams/treemaps, stacked area charts.
2. 4 principles for reducing cognitive load in forms: Few Guesses, More Success
Every field in a form requires the user to "interpret the question → look up information → fill it in the correct format", all of which adds cognitive load; excessive load leads to errors, fatigue, and abandonment. The four principles:Structure / Transparency / Clarity / Support. (Overlaps with the forms/input topic, see NNGroup Interaction Patterns · Forms and Input Controls (19 patterns · Form validation/checkboxes/date/steppers/parameter controls/listbox vs dropdown/toggles/split buttons/cancel vs close/link labels/passwordless login/wizards/drag and drop/accelerators/calculator quiz); only the core framework is included here, because it covers "how error messages should be displayed" very comprehensively, complementing the error messages section of this article.)
Structure: group related fields (Coinbase groups name/date of birth/address etc. together); create visual hierarchy (use spacing/typography/containers — Stripe uses spacing, HoneyBook uses containers, Quicken uses font size, weight and color to distinguish titles/labels/hints/errors); order questions logically (familiarity → priority → dependency → complexity → sensitivity; placing ZIP code first can auto-fill city and state);use single-column layout(completion rate outperforms multi-column; counterexample Discover Bank multi-column + placeholder labels make it easy to miss fields); use progressive disclosure (long forms split into pages + top progress bar, Visible uses this approach; but do not use wheel pickers to select date of birth).
Transparency:Communicate form requirements before filling(required information + time needed, especially for complex/multi-page forms that cannot save progress — Zillow lists the document checklist before setting up rent payments); mark required fields (Klaviyo uses red asterisks for required + text label for "optional");show a clear progress indicator(Google Analytics displays "Step 3 of 5").
Clarity: use concise language (replace “chief complaint” with “reason for visit”; keep overall difficulty at a6th–8th grade reading level); use positive wording (counterexample Udemy uses "Check to opt out of promotional emails" + checking automatically unchecks the box above, creating unnecessary confusion);avoid double-barreled questions("Is the website helpful and easy to navigate?" forces users to give one answer to two things, should be split into two questions); provide context and examples (Dyson explains where to find the serial number and its format); follow form control conventions (counterexample Squarespace uses checkmarks + full-row highlighting for radio buttons, breaking conventions); match field length to content length (counterexample NAIC makes all fields the same length, overly long "Phone" and "City" fields break cognitive consistency).
Support:Avoid using placeholders——they disappear when typing, forcing users to rely on short-term memory; low-contrast light gray is hard to read, and they are easily mistaken for pre-filled values; labels and help text should be placed outside input boxes, keeping boxes empty (counterexample Stripe uses gray placeholders); apply reasonable constraints (SoFi limits transfers to not exceed available balance);display error prompts in real time and clearly——avoid premature validation (show errors only after the user finishes input and moves to the next field), use real-time validation cautiously (only when immediate feedback is truly needed, such as password requirements, or to prevent serious errors); error prompts should be displayed directly next to the erroneous field(counterexample Urban Outfitters places promo code errors at the top of the page too far from the field); error prompts should be instructional rather than only pointing out the problem(when an Etsy username is unavailable, it also suggests multiple available names).
Sourced from NNGroup Topics / Design Patterns (feedback and dialog subset, 15 patterns; also includes 1 duplicate Hostile Patterns article that has been merged). Related: For the ten usability heuristics, see NNGroup Usability Testing and the Ten Usability Heuristics (Full table of 10 heuristics · Complex application use · User pleasure hierarchy · Testing methods 5-user rule/recruitment/remote/task scenarios/step-by-step tasks/attitude vs behavior/4-step analysis/small sample errors/competitive evaluation); for corresponding feedback/modal/notification practices on Apple platforms, see Apple HIG Interaction Patterns (25 flow patterns · Onboarding/input/feedback/media/system integration); for form and input patterns, see NNGroup Interaction Patterns · Forms and Input Controls (19 patterns · Form validation/checkboxes/date/steppers/parameter controls/listbox vs dropdown/toggles/split buttons/cancel vs close/link labels/passwordless login/wizards/drag and drop/accelerators/calculator quiz); for degradation of popups/overlays on mobile, see NNGroup Interaction Patterns · Overlays · Scrolling · Mobile and Responsive (13 patterns · Accidental overlay closure/bottom sheets/onboarding coach marks/infinite scroll alternatives/scroll position preservation/scroll fade-out/scroll hijacking/Cookie permissions/mobile permission requests/mobile onboarding/responsive breakpoints/mobile-first drawbacks/task switching). Images/original documents are retained in sources.
Sources and related materials
- NNGroup Interaction Patterns · Forms and Input Controls (19 patterns · Form validation/checkboxes/date/steppers/parameter controls/listbox vs dropdown/toggles/split buttons/cancel vs close/link labels/passwordless login/wizards/drag and drop/accelerators/calculator quiz)
- NNGroup Interaction Patterns · Overlays · Scrolling · Mobile and Responsive (13 patterns · Accidental overlay closure/bottom sheets/onboarding coach marks/infinite scroll alternatives/scroll position preservation/scroll fade-out/scroll hijacking/Cookie permissions/mobile permission requests/mobile onboarding/responsive breakpoints/mobile-first drawbacks/task switching)
- NNGroup Usability Testing and the Ten Usability Heuristics (Full table of 10 heuristics · Complex application use · User pleasure hierarchy · Testing methods 5-user rule/recruitment/remote/task scenarios/step-by-step tasks/attitude vs behavior/4-step analysis/small sample errors/competitive evaluation)
- Apple HIG Interaction Patterns (25 flow patterns · Onboarding/input/feedback/media/system integration)