These 15 articles come from the NNGroup 'Design Patterns' column, focusing on the category of questions like 'should we do this, for whom, where, and how to do it with new media' — they do not explain how to draw a specific component, but rather discuss the values and scenario boundaries of design. Reorganized by theme into five clusters:
1. Design Ethics and Deceptive Patterns(how to identify dark patterns, avoid pitfalls yourself, and prevent dangerous adjacency) → 2. Inclusivity and User Autonomy(designing for diverse populations, returning choice to users) → 3. Globalization and Cross-Cultural Design(translation vs localization, language switching, sizing, omnichannel collaboration) → 4. Emerging Interactions(VR / AR / GenAI prompt controls) → 5. UX Copy and Recommended Content(copy length, recommendation engines, explicit differentiation of options).
Each section provides core principles + Why + negative examples. Written for product managers as the audience, with jargon explained in place when first mentioned.
1. Design Ethics and Deceptive Patterns: Do Not Use 'Effective but Unethical' Design
This cluster is the value foundation of the entire piece. Three articles (general overview of deceptive patterns / sneaking / dangerous UX) cover different facets of the same issue:which side do designers stand on when company goals conflict with user interests.
1.1 What Are Deceptive Patterns (Dark Patterns)
Definition: guiding users to take actions that do not serve their own interests but benefit the company through misdirection, interference, or emotional manipulation. The concept was proposed by designer Harry Brignull in 2010, inspired by 'design patterns (common, recurring practices in interfaces)' — dark patterns are simply abused design patterns.
Why They Are Prevalent:① A/B testing(showing two versions of a design to half the users each to compare conversion rates) became popular, and companies continuously optimize to boost conversion rates; some designs overprioritize conversion at the expense of user interests; ② copycat design — while copying competitors helped standardize some patterns, it also spread dark patterns.
A Closely Related Concept — Sludge(translatable as 'quagmire'): artificially setting barriers to prevent users from obtaining the best outcome for themselves. A typical example is complex Cookie consent pop-ups — agreeing takes one click, but rejecting requires flipping through multiple pages to turn off items one by one.
5 Common Categories of Tactics(product managers, memorize this table and stay alert when you see them):
| Tactic (Chinese/EN) | How It Harms Users | Real-World Negative Examples |
|---|---|---|
| Obstruction | Intentionally adding operational steps to make a certain action harder | Amazon was once sued for making Prime membership difficult to cancel was sued |
| Visual/Text Traps | Misleading users by exploiting cognitive biases or breaking common patterns | Double-negative copy; moving the 'Close' button to an uncommon location |
| Nagging | Repeatedly popping up the same request until the user yields and agrees | Repeatedly requesting a certain permission |
| Confirmshaming | Forcing users to choose through intimidation, humiliation, or guilt | The reject button on a discount pop-up reads 'I don't like saving money' |
| Sneaked Addition/Preselection | Automatically adding items to the cart or pre-checking extra options by default, requiring users to manually deselect them | (see 'Sneaking' below) |
Legal Risks Are Not Empty Threats: As regulation strengthens, such patterns have been banned in many countries. The EU's GDPR requires clear user consent; California's CPRA(California Privacy Rights Act) directly defines 'dark patterns' as 'interface designs that impair user autonomy.' In other words, this is not just a moral issue, but a compliance issue.
1.2 Persuasion vs Deception: The Line Lies in 'Whether Information Is True + Whether Unfavorable Information Is Hidden'
The hardest part for designers is distinguishing between persuasive design (reasonable)and deceptive design (crossing the line). The criterion given by NNGroup:
- Positive example (persuasion): LinkedIn Premium's registration page uses social proof (showing 'Your connections also use this')+ and anchoring (striking through the original price to highlight the free trial) — as long as the information is true, this is persuasion, not deception.
- Mild line-crossing: Booking.com uses scarcity + social proof, but hides negative reviews(only showing positive reviews by default, requiring users to click 'Read more' to see full reviews) — creating the false impression that 'all rooms have positive reviews,' which is slightly misleading.
Judgment Method — Modified Cognitive Walkthrough (stepping through the flow from the user's perspective step by step), ask yourself 9 questions:
- Might users accidentally spend more money or disclose more information than intended?
- Is the price users pay in exchange for features/experience fair and reasonable?
- Is the description of each option accurate?
- Might the way options are presented be misunderstood?
- Might important information be overlooked?
- Can users quickly view and select all options?
- Are users' choices obstructed by unnecessary steps?
- Are users forced to make hasty decisions?
- Might users feel ashamed/guilty for rejecting a certain option?
Core Principle: Review these 9 questions together with the most vulnerable user personas(people with low digital literacy, the elderly, people in a hurry to complete tasks), because the harm of dark patterns often falls disproportionately on vulnerable users. How to Verify: User testing can catch obvious deception (users will express dissatisfaction on the spot), but mild deception often goes unnoticed by users, so designers must proactively self-audit and cannot rely solely on testing as a safety net.
1.3 Sneaking: Three Types That Make Users 'Agree Without Knowing'
Sneaking is an expansion of the 'sneaked preselection' category among the 5 tactics, with the core of sacrificing transparency for short-term sales/subscriptions. Three types with corresponding positive and negative examples:
| Type (Chinese/EN) | How the Sneaking Works | Negative Example (Bad) | Positive Example (Good) |
|---|---|---|---|
| Forced Continuity | After a trial/subscription,automatically renewing without clear notification | Spotify highlights the free trial, with renewal terms written in small subtitle text; the bill only arrives after the first paid month, with no notification for subsequent charges (a community post with 235 votes questions 'is this intentionally designed to make people forget to cancel') | Apple Apple iCloud+ sends monthly email transaction notifications, allowing users to re-evaluate whether to stay subscribed |
| Hidden Costs | Taxes/service fees etc.are only displayed at checkout | Ticketmaster only shows processing fees at checkout on the first order; Airbnb initially displays a price excluding tax, adding cleaning fees + service fees only at checkout | United Airlines displays the total tax-inclusive price from the moment of flight selection |
| Sneak into Basket | Without consent,adding products/options to the cart | GoDaddy defaults to two-year domain registration (when users only want one year); in LinkedIn's 'Easy Apply', the"Follow the company" checkbox is pre-checked, causing users to passively receive a large number of updates | —— |
Why It Is a Loss in the Long Run: Sneaking can boost sales in the short term, but it damages brand reputation and user loyalty long-term. It is unrealistic to expect users to protect themselves by 'carefully checking settings' — most people do not have the time or patience. Therefore, the responsibility lies with the design side.
1.4 Dangerous UX: Do Not Place High-Risk Actions Right Next to Harmless Actions
This is a category of problems that are not necessarily malicious but have equally severe consequences: placing 'destructive actions' (delete, clear, archive, discard changes) too close and visually similar to 'harmless actions', so that a slip of the finger causes an accident.
Core Principle:Preventing errors > helping users recover from errors. No matter how easy undo is, the design goal should be 'to keep users from making errors in the first place.' Because when users make a mistake mid-task, they have to interrupt their current task to remedy it; even if it only takes a few seconds, it consumes valuable cognitive resources.
Negative Examples(all from real products):
- Firefox spell check menu: 'Add to Dictionary' is right next to 'Correct Spelling', so users might permanently save misspellings to the dictionary.
- Ubiquiti UniFi: 'Add Category' and 'Clear Category' are adjacent and nearly visually identical; accidentally clicking clear will cause massive data loss.
- ThinkorSwim stock trading app: 'Delete' and 'Confirm and Send' are adjacent; an accidental tap directly affects trades.
- Trello mobile: In the overflow menu, 'Watch' and 'Archive Card' are next to each other, leading to accidental archiving of cards.
Three Error-Prevention Tactics:
| Tactic | Principle | Typical Practice |
|---|---|---|
| 1. Shape Coding | Unconsciously distinguishing via physical shape/tactile feel (originated in WWII: Alphonse Chapanis found that B-17 bomber landing gear and flap control levers had identical shapes, causing pilots to confuse them under stress; changing the shapes reduced errors) | Digital interfaces cannot provide tactile feedback, so we fall back on the following two methods |
| 2. Visual Signals | Distinguishing functions using color, icons, text size, alignment to distinguish functions | Grammarly distinguishes 'Spelling Suggestion' and 'Add to Dictionary' using color + icons + alignment |
| 3. Increase Distance | Add spacing between high-risk actions and other options | Sonos iOS adds extra whitespace between high-risk items such as "Transfer System Ownership" and "Forget Current System" |
Why adding distance works:Fitts' Law——The farther/smaller a target is, the longer it takes to point to it. Adding just a few extra milliseconds of "reach cost" to high-risk buttons can significantly reduce accidental taps. This takes a usability principle (usually used to "make buttons easier to tap")and reverses it——deliberately making dangerous buttons harder to tap.
II. Inclusivity and User Autonomy: Designing for Diverse People, Returning Choice to Users
This cluster covers two topics: inclusive design is "accounting for different people," and user autonomy is "letting each person use the product in their own way."
2.1 Inclusive Design: First, distinguish three easily confused terms
| Concept (Chinese/EN) | Goal | Scope | When to use |
|---|---|---|---|
| Accessibility | Enable people with auditory/cognitive/physical/visual disabilities to use the product | Narrow, based on standards such as WCAG (Web Content Accessibility Guidelines) | It is the baseline, the minimum requirement, not the end goal |
| Universal Design | Use a single experience to satisfy as many people as possible | High cost to adapt for diversity | More suitable for physical environments(build one thing everyone can use) |
| Inclusive Design | Use diverse designs to fit different needs and foster a sense of belonging | Covers accessibility + age + culture + economy + education + gender + geography + language + race | More suitable for digital products(low cost to adjust on demand) |
Distinguish them in one sentence: Accessibility is "usable by people with disabilities" (legal baseline), Universal Design is "one size fits all," and Inclusive Design is "understand differences and accommodate them separately." In digital products,inclusive design is more commonly used because adjusting an interface is cheaper than modifying the physical world.
5 categories of inclusive design patterns:
| Pattern | Practice | Counterexample comparison |
|---|---|---|
| Readability for older users | Provide font enlargement and dark mode | An 81-year-old participant on The Globe and Mail repeatedly lost their place while reading because the text was too dense and line spacing too tight;The Washington Post provides an article font enlargement control |
| Global surname input | Allow hyphens/special characters/accents | TaxSlayer could not recognize names due to IRS format restrictions;Facebook Facebook set up a help page for people who cannot register with their real name to appeal |
| Diverse identity options | Provide inclusive options for gender/race/sexual orientation; use multi-select checkboxes instead of radio buttons for race, and add "Two or more races" | Tinder Facebook Offer more than 30 custom gender identities |
| Inclusive filtering | Filter by real user need dimensions | Pinterest Sephora Filter by hair type (curly/straight);Sephora Olay Filter skincare products by age group |
| Diverse illustrations | Illustrations reflect the diversity of the user base | Overly simplified "skin-toneless" illustrations actually reinforce exclusion;Airbnb, Atlassian Google, Slack, and Airbnb have all revised their illustration styles |
Core principle: Don't design from your own perspective ("My product is for everyone" is a dangerous assumption).Three practical recommendations:① Ensure sample diversity;② in user research recruitment; ② Educate stakeholders, involve them in research and show them real user feedback; ③ Proactively identify exclusionary factors(even a single illustration style can convey exclusion).
2.2 User Autonomy: Don't treat users like cattle herded into a chute
Core proposition: Autonomy (being able to use the interface according to personal preferences) is a basic human need. Forcing users through a fixed flow makes people feel constrained — the article uses a vivid metaphor:like cattle herded into a cattle chute, able to move in only one direction. Note that the CPRA directly lists "harming user autonomy" as a criterion for identifying dark patterns, so this section connects to the first cluster.
Three methods to increase autonomy:
| Method (Chinese/EN) | How to do it | Notes/Counterexamples |
|---|---|---|
| Customization | Surface-level customization(change theme color, do not alter workflows, add delight, e.g., Facebook Messenger changing conversation themes — but font and layout stay consistent to protect the brand);Task-related customization(Google Drive list/icon view switching, Chrome zoom);Deep customization(accelerators / custom keyboard shortcuts, suitable for complex applications) | Most users will not spend time customizing, so don't make the product's usability depend on "users will customize it" |
| Scannability | Use information-rich headings/subheadings to let users quickly decide whether to read (eye-tracking research: users spend little time online and rely on scanning to decide what to read deeply) | Positive example: Morning Brew newsletter uses bold headings + emojis for each section; counterexample: entire paragraphs with no headings, forcing users to read everything to know if they are interested. Hard to scan = no autonomy (either read it all or leave) |
| Timing & Sequence | Let users choose when and in what order to interact | Grammarly allows users to defer initial personalization (not mandatory); Khan Academy lets users choose course order (which to learn first: verbs/pronouns/modifiers);Counterexample: Capella University forces users to fill in personal information before showing program details (a typical cattle chute) |
Mandatory tutorials are usually ineffective: NNGroup research shows that mandatory tutorials generally do not improve efficiency and instead increase task difficulty.
Two tips for balancing autonomy(autonomy ≠ more options are better): ① Stick to a small number of options——human cognition is limited; provide a few meaningful choices, don't overwhelm users; ② Provide meaningful defaults——set good defaults for the main user group while allowing flexible changes. A good example: a tip screen that offers quick options for "None/15%/20%/25%"is good, but adding an extra "Custom amount"entry point preserves suggestions while returning full autonomy to people who want to tip other percentages — "increasing autonomy is not about increasing the number of options, but about giving choices at key points."
III. Globalization and Cross-Cultural Design: Translation vs Localization, Language Switchers, Sizing, Omnichannel Collaboration
This cluster of four articles covers what products need to handle when expanding beyond their home market.
3.1 Translation vs Localization: Two levels of adjustment intensity
| Approach | What is changed | Cost | Example |
|---|---|---|---|
| Translation | Only replace interface language; visual design remains unchanged | Low | Shekou Woman multilingual site; Chinese and English versions are nearly identical |
| Localization | Visual presentation + content strategy both align with the target culture | High (requires coordination among researchers/designers/content editors) | Pharmacy Online Chinese and English versions have different navigation structures and visuals; H&M US and China versions are similar but models and promotions are localized (US version pushes new collections, Chinese version emphasizes Spring Festival) |
5 factors that determine localization intensity:
- Audience heterogeneity——same language ≠ same culture (French users in France vs Canada have different habits; Apple's French and Canadian French sites have completely different content). If a cultural group accounts for a high proportion, a localized version should be created for them.
- General cultural differences——use Hofstede's Cultural Dimensions 6 dimensions to quantify (see table below).
- Impact of cultural differences on product use——look at usage frequency(low frequency does not require heavy localization, but if it violates local mental models, even low-frequency use will cause frequent errors),scenarios,, multi-person collaboration(collaborative products need more localization than single-person leisure products),local competitor differences(WeChat/Alipay login is popular in China; email registration is rarely used).
- Brand image——appropriate "exotic flair" can strengthen a premium image (Bose's Chinese site had low information density, leading Chinese participants to perceive it as a luxury brand); localized elements such as WeChat Official Account QR codes can enhance trust (Amcal case study).
- Potential value of the target market——localization consumes resources, so calculate ROI (return on investment) and prioritize the most valuable markets and components.
Hofstede's 6 dimensions(to judge how different two cultures are; the greater the difference, the more localization is needed):
| Dimension (Chinese/EN) | Meaning | High-score culture vs Low-score culture |
|---|---|---|
| Power Distance | Whether unequal distribution of power is accepted | High (Mexico/India, respect authority) vs Low (Denmark/Sweden, emphasize equality) |
| Individualism vs Collectivism | Prioritize individual interests or group interests | Individualist (US/UK) vs Collectivist (China/Japan, group > individual) |
| Masculinity vs Femininity | Prioritize competitive achievement or relationship quality of life | Masculine (Japan/Germany, value achievement and wealth) vs Feminine (Sweden/Norway, value relationships and equality) |
| Uncertainty Avoidance | Tolerance for ambiguity/uncertainty | High (Greece/Portugal, require strict rules) vs Low (Singapore/Denmark, accept new changes) |
| Long-term vs Short-term Orientation | Prioritize the future or present traditions | Long-term (China/South Korea, thrifty and save) vs Short-term (US/Mexico, value immediate results) |
| Indulgence vs Restraint | Attitude toward pleasure | Indulgent (US/Australia, freely satisfy desires) vs Restrained (Russia/India, suppress gratification) |
Core principle: No matter how much you localize, "you are not the user" always holds true — rely on field research (contextual interviews) + international user usability testing to validate assumptions. For small companies with limited resources: first create language versions covering most international users (mainly relying on translation), reduce culture-specific elements and follow universal conventions (e-commerce uses image guidance), then do localization for the most valuable markets.
3.2 Language Switcher: 6 tips for cross-border e-commerce
First distinguish two types of switchers:
- Language Switcher: Serves all people who speak the same language, regardless of country (Kidsroom's English version works for the US, UK, and Australia).
- Country Switcher: Localized for a specific country (language + currency + content), commonly seen in large multinational enterprises (Look Fantastic).
6 tips:
| # | Tip | Key points/Counterexamples |
|---|---|---|
| 1 | Default to matching browser language | Auto-detect saves manual switching (Net-A-Porter automatically displays Chinese + RMB based on browser); when detection fails, let users choose country/region on the homepage (Zara's approach, and each country version offers multiple languages to accommodate foreign tourists) |
| 2 | On desktop, place it in a top corner | Users first look for the top-right corner; if not found, they check the top-left; counterexample: Feelunique placed the country switcher at the page bottom, and Chinese participants completely did not notice there was a Chinese site |
| 3 | On mobile, place it in a visible area on the first screen or within the navigation menu | Screens are small; if hidden too deep, users won't find it (Amcal+ places it at the top on desktop and inside the menu on mobile) |
| 4 | Display using the language's own name Show | Write Español instead of Spanish, Deutsch instead of German, Français instead of French (Burberry's mobile site does this correctly); Airbnb also lists country names + corresponding languages and suggests based on browser/history |
| 5 | Use symbol combinations to indicate switching | Combinations of flag + currency symbol + language label are easier to recognize; counterexample: ASOS only used a flag icon smaller than the shopping cart (defaulting to Hong Kong), and many people did not recognize it as a flag; positive example: Selfridges uses a combination of regional flag + currency + language name |
| 6 | Allow independent separate settings for language/country/currency | Some international shoppers want to adjust them separately (AliExpress allows independent selection of shipping country, currency, and display language) |
One underlying insight: In Chinese e-commerce research, when users enter a foreign-language site,they first look for a Chinese version, especially when they are unfamiliar with category terms (users wanting to buy fish oil were afraid of misreading medical terminology and were happy to see an Australian pharmacy had a Chinese version). Providing a Chinese version/China site is a plus for international brands.
3.3 International Size Guides: Local size + original size + body measurements
The biggest anxiety for international shoppers is incorrect sizing(and returns are difficult). Helping users choose the right size can increase sales, reduce return rates, and cut customer service workload.
| Scenario | What to do | Counterexample |
|---|---|---|
| Localized sites | On product pages,display both local size and original size by default | Yoox detects US users and displays US sizes + original sizes (so they aren't scared by EU size 44); counterexample: SSENSE Chinese site only shows IT 48 – US 32 with no Chinese sizes, confusing users |
| International sites | Provide a comprehensive size chart | Bloomingdales' shoe sizes include US/EU/Chinese sizes + shoe length, but it does not explain the measurement standard, so users don't know how to measure themselves |
| When a single size chart is not enough | Provide brand-specific size charts(different brands run large or small) | Shopbop uses one shared chart for all brands (inaccurate); Farfetch provides brand-specific guides for each item and allows switching to other countries' sizes |
| Provide body measurements | List the corresponding bust/waist/hip measurements for each size | India's Myntra does this, letting users select by their own size; Yoho Buy also provides measurement methods plus product dimensions |
| Mobile | Make size charts look good on mobile, don't force horizontal scrolling | On Shopbop's mobile site, international sizes and Chinese sizes are listed in separate left and right columns, which annoys users who have to scroll back and forth repeatedly; Farfetch's mobile site prioritizes displaying local sizes based on the user's location |
Core principle: Localized sites should display local sizes directly on product pages to reduce the steps users need to take to look up size charts; international sites should provide comprehensive size tables and optimize for mobile (especially important when mobile traffic is high).
3.4 Omnichannel Collaboration: Let "unrelated devices" work together
First, background: NNGroup argues that a high-quality omnichannel experience has 5 elements— Consistent / Optimized for context / Seamless / Orchestrated / Collaborative. This section focuses specifically on the fifth one.
Definition: Collaboration = enabling two or more usually unrelated devices/channels to work together to achieve a goal. Note that among the 5 elements, it is the only non-essential one— the absence of collaboration does not harm the basic experience, but using it well can add value.
Two major use cases:
| Use case | Principle | Example |
|---|---|---|
| Reducing Interaction Cost | Interaction cost = the total mental + physical effort users expend to reach a goal; use resources from another auxiliary channel to lower the cost on the target channel | WeChat scan-to-login scan-to-login(mobile saves desktop from typing passwords); Dropbox scan for quick installation + sync; TurboTax SmartLook lets tax experts directly enter the tool to help you file taxes; Keynote media menu "Take Photo/Add Sketch" automatically connects to nearby phones via Bluetooth |
| Enriching Existing Interactions | Add a second channel to make the experience richer, often relying on "Second-Screen Experience" | Netflix add to watch list on phone → quick access on TV; Washington Wizards "Virtual Game Day" lets at-home fans use phones to view player lineups/statistics/live chat; Anova sous-vide cooker monitor progress via phone; museum app provides supplementary content for on-site visitors; Giant supermarket "SCAN IT" self-scanning for queue-free checkout |
Data: According to Facebook research,94% of TV viewers use their phones while watching TV— this is the behavioral foundation of "second-screen social," which TV programs and marketers are already leveraging.
Core principle: ① Don't do collaboration for collaboration's sake (forcing it in will be seen as an "unnecessary gimmick"); ② Second-screen solutions must be visible to users(users can't benefit from a feature they don't know exists). Use task analysis and contextual research to find pain points and scenarios where "users are already making do with multiple devices," then take over with a branded solution.
IV. Emerging Interactions: VR / AR / GenAI Prompt Controls
Most old principles still hold in new media, but implementation methods need to change.
4.1 VR Virtual Reality: The Ten Usability Heuristics Still Apply
Alita Joyce applied Jakob Nielsen's ten usability heuristics(see the full 10 items in NNGroup Usability Testing and the Ten Usability Heuristics (Full table of 10 heuristics · Complex application use · 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)) to VR (using the Oculus Quest platform as an example). Conclusion first:Although VR is a unique medium, the 10 principles still apply. Key points for each:
| # Heuristic | Positive examples in VR | Negative examples in VR |
|---|---|---|
| 1 Visibility of system status | Oculus Quest navigation menu shows headset/controller battery level (hover to see exact percentage); Bogo uses heart icons to show toothbrushing task progress | —— |
| 2 Match between system and the real world | Whiteboard/lock icons in Immersed virtual meeting rooms mimic real-world functions; Bogo follows real interaction logic | —— |
| 3 User control and freedom | Beat Saber has cancel/back options when customizing avatars | ESPN TV provider selection interface lacks a back button, users can only exit and restart |
| 4 Consistency and standards | Oculus Settings uses standard switch design | Gravity Sketch sliders are internally consistent but do not follow industry-standard switches, increasing interaction cost |
| 5 Error prevention | Oculus "Guardian" boundary warning prevents physical collisions; Nat Geo VR asks for confirmation before leaving an unfinished activity | —— |
| 6 Recognition rather than recall | Nat Geo VR camera function directly shows button labels | Oculus Unlabeled icons require hovering to understand, adding memory burden |
| 7 Flexibility and efficiency of use | Beat Saber allows customizing and saving preferences; Firefox Reality allows adjusting browser window size | —— |
| 8 Aesthetic and minimalist design | YouTube VR main interface is concise and focused | Pokerstars VR menus are cluttered and distracting |
| 9 Help users recognize, diagnose, and recover from errors | —— | [No positive example provided]; Firefox Reality voice errors only say "Please try again" with no specific solution; Pokerstars VR provides gesture alternatives but does not explain why the failure occurred |
| 10 Help and documentation | Immersed offers multi-channel support (video/FAQ/live); Nat Geo VR provides real-time help during tasks | —— |
4.2 AR Augmented Reality: Based on 11-user testing, core issues are "can't discover, can't see clearly, gratuitous use"
This is the final installment of the AR user experience trilogy (the first two covered user onboarding and calibration), based on usability testing with 11 participants.
User status quo: Most people are unfamiliar with AR, and even confuse it with VR;people with gaming experience pick it up quickly(DinosAR case: experienced gamers immediately understood the icons and bottom-right joystick, others did not); everyone is excited about its potential, but questions whether some apps really need AR.
The best AR experiences are immersive + interactive + educational: Users especially like educational ones (Kinfolk teaches historical figures, ARLOOPA is suitable for children's education, Gettysburg AR provides historical immersion, Civilization AR is interactive and informative).
AR Should Not Be Gratuitous: It must add practical value, otherwise it creates a negative experience. Negative example: Google Arts & Culture's AR mode for viewing the famous painting *Moses and the Ten Commandments* in the living room was unhelpful or even uncomfortable for users;if you don't have the resources to make high-quality AR, simply don't do it.
Suggestions for improving AR experiences:
| Suggestion | Key points | Negative example |
|---|---|---|
| Improve discoverability | In e-commerce, AR features need clear visual markers + filters, avoid vague icons, add clear labels | Etsy product listings do not mark which items support AR, users have to click into each detail page to check; Bob's Furniture AR filter icon has low contrast + is unfamiliar, users took about 1 minute to find it |
| Adapt to user environments/constraints | Consider context, provide contactless interactions (voice/gestures); account for factors like glasses | Ulta virtual makeup try-on: participants wearing glasses had the eyeshadow filter blocked, but taking off glasses made the phone screen hard to see |
| Clear instructions and signifiers | Most people have no AR experience, instructions must be prominent and clear | Amazon uses bright colors + concise step-by-step guidance (success); Mars mission app provides simple step-by-step instructions (good); Best Buy users found it very difficult to move AR objects as instructed (bad) |
| Text/controls visible across backgrounds | Add solid-color backgrounds under text/controls against complex backgrounds to ensure clarity | JigSpace white text has poor visibility; Civilization AR white text is hard to read on light backgrounds |
| Make AR features self-contained | Let users adjust size/color within AR to reduce recalibration | Amazon allows changing sofa colors and using a ruler to check dimensions within AR, no need to go back to the product page |
| Don't let UI interfere with AR | Reduce the space occupied by controls | Amazon overlay blocks the AR scene, users discovered very late that they could swipe down to minimize it |
| Consider audio narration | Delivers instructions even when the device is far away, and enhances immersion | Gettysburg audio narration deepens the historical experience; JigSpace users preferred audio over written narration so they could focus on visuals |
4.3 GenAI Prompt Controls: Add "buttons" to chat boxes, don't only make users type everything manually
Definition: Prompt Controls are UI components around AI chat input boxes (buttons, tooltips, toggles, cards, menus) used to accelerate and supplement text input, helping users quickly generate prompts, clarify ambiguities, and get inspiration — upgrading pure text boxes into a "hybrid UI".
4 major use cases:
| Use case | What it solves | Example |
|---|---|---|
| 1 Improve feature discoverability | Users don't know what the bot can do/what inputs it supports | Negative example ChatGPT supports multiple file types but users have to ask the system to find out; positive example Baidu Wenxin Yiyan shows supported file types and size limits when hovering over the upload icon |
| 2 Educate users + provide inspiration | New users don't know where to start asking | SparkDesk lists plugins above the input box (e.g., smart PPT generation); Claude provides conversation starter cards; ChatGLM provides a clickable, editable prompt library sidebar |
| 3 Set conversation constraints | Limit scope/specify output format | Perplexity "Focus" feature narrows search scope to Reddit/YouTube/academia; Wenxin Yiyan Treemap plugin specifies chart type |
| 4 Facilitate follow-up interactions | Research shows about half of conversations contain follow-up actions | Edit prompt/read aloud/copy/regenerate/feedback/switch model; ChatGLM allows "quoting" segments of the previous answer; Gemini "Modify response" provides one-click follow-ups like "shorter"; Perplexity recommends follow-up questions |
Best practices(product managers pay special attention to these pitfalls):
| Practice | Positive example | Negative example |
|---|---|---|
| Use standard icons + text labels/tooltips | ChatGLM reply bottom icons are concise, with tooltips on hover | Wenxin Yiyan mobile magic wand icon confused all participants(it was actually prompt examples); old version Bing used a broom icon for "start new conversation" with no label which was hard to understand, new version changed it to a speech bubble with a plus sign + "New topic" label |
| Name features clearly, don't be vague/overly branded | —— | Wenxin Yiyan plugin called "Think Carefully" leaves users confused about what it does |
| Group prompt controls by function | Perplexity separates "Focus" and "Attach" with concise labels | Wenxin Yiyan plugin center has a pile of plugins with no hierarchy, hard to find or discover |
| Follow interaction conventions | ChatGPT mobile long-press on a prompt brings up the standard context menu (select text/copy/edit) | ChatGLM mobile long-press hijacks the regular copy operation, users can't copy only a segment |
| Place error messages near the focus of attention | —— | Wenxin Yiyan "file too large" error is displayed in a small overlay at the top of the screen, while the upload button the user just operated is at the bottom, too far away |
This point is consistent with sections 4.1/4.2:Unlabeled icons are the same recurring mistake across VR/AR/GenAI— see NNGroup Usability Testing and the Ten Usability Heuristics (Full table of 10 heuristics · Complex application use · 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) Article 6 "Recognition rather than recall".
V. UX Copy and Recommended Content: How long to write, how to recommend, how to explain options clearly
5.1 Copy length: How to choose among long / short / micro tiers
First distinguish two terms:Content = all information in the interface (including audio/video, user-generated content UGC, images);Copy = a subset of content, specifically referring to text written by the organization(excluding user-generated content, such as Amazon reviews, social media comments). Copy is divided into three tiers by length:
| Type (Chinese/EN) | Definition | When to use | Example |
|---|---|---|---|
| Long-Form Copy | 3 or more paragraphs, a coherent complete unit | Conveying complex information, providing context, improving SEO, when users are highly engaged (brevity actually reduces trust) | Policies, technical documentation, help pages, reports/case studies, product pages, About Us, proposals |
| Short-Form Copy | 2–3 paragraphs, centered on one core idea | Convey one main message quickly; break up long-form copy | User onboarding, slightly longer summaries, product descriptions, concise mission statements (The Red Cross uses cards + short-form copy to introduce blood donation types, replacing old long-form text) |
| Microcopy | Fewer than 3 sentences | Provide quick prompts, guide actions, communicate key information; makes up most of the text in an interface | Link/button labels, form hints, control names, page titles and meta descriptions, error messages, tooltips (The IBM homepage is almost entirely microcopy) |
Core Principle / Why: Three tiers are interdependent and cannot be used in isolation. Although long-form copy is less likely to attract attention, it is the only format that can fully explain multi-step processes or technical issues; long-form copy embeds headings (microcopy) and collapsible FAQ sections (short-form copy) to optimize structure. Short-form copy is the mainstream today (given low user attention spans), but it cannot replace long-form copy for complex topics, nor can it replace microcopy guidance during task execution. Microcopy is the most numerous, but it cannot support a complete experience on its own — its role is to "assist task completion", not to serve as the core information. Long-form copy also benefits SEO (naturally embeds keywords, increases dwell time, supports internal links; a hospital orthopedics landing page embeds "Maryland/Washington DC/Virginia" to improve visibility).
5.2 Recommended Content: 5 Guidelines for Recommendation Engines
Good recommendations help users quickly find content they are interested in without causing information overload, improving engagement and loyalty.
| # Guidelines | Core Principle | Positive Examples vs. Negative Examples |
|---|---|---|
| 1 Pin personalized recommendations to the top | Users prefer content "relevant to themselves"; do not bury it at the bottom of the page, and it should run throughout the site, not just the homepage | Positive: Amazon/Eventbrite display personalized recommendations at the top of their homepages; Negative: Sephora's "Recommended for You" is placed very low on the homepage, requiring scrolling all the way to the bottom |
| 2 Indicate the data source | Let users know the basis for recommendations (historical behavior/preferences) to increase credibility; use short, specific descriptions | Positive: Netflix "Because you watched [title]"; Negative: Amazon Video "Based on content you have watched and more" — the meaning of "more" is unclear and confusing |
| 3 Sort recommendations into clear categories | Do not stack them messily;specific categorization is more popular than broad recommendations | Positive: Spotify's "Daily Mix" playlists sorted by music genre are better received than the comprehensive "Discover Weekly"; Negative: Eventbrite mixes professional events and personal events in recommendations, Amazon Kindle book recommendations are too cluttered to manage |
| 4 Provide a feedback mechanism | Give entry points for thumbs up/thumbs down/editing history to improve engagement and personalization | Positive: Amazon allows viewing/editing browsing history, Netflix allows removing viewing records and states they will no longer be used for recommendations; Negative: Some Spotify Discover Weekly users cannot thumbs down songs they dislike, so recommendations cannot be optimized |
| 5 Update recommendations quickly | After user feedback, the system should reflect it immediately, providing instant feedback to increase trust | Positive: After hiding an ad on Pinterest, it is immediately replaced with a placeholder message without requiring a refresh; Negative: After a user gives a low rating on Hulu, recommendations do not update instantly, which discourages engagement |
5.3 Explicitly State the Difference: Don't Make Users Guess the Difference Between Two Options
Core Comparison:
- Explicit Differentiation: Differences are clearly explained, no guessing required from users. Example labels "Blue Circle" and "Pink Square" — users can tell at a glance that the differences lie in color and shape.
- Implicit Differentiation: Differences are not explained, users must observe and make assumptions on their own. Counterexample labels "Shape One" and "Shape Two" — do not reveal color or shape differences, requiring extra thinking.
Why It Matters: Unclear expression of differences → users select the wrong option → returning to modify increases interaction cost → frustration, loss of time and money → damage to website reputation, user churn.
4 Principles of Clarity:
| Principle | Practice | Positive Examples vs. Negative Examples |
|---|---|---|
| 1 Highlight differences | Present clearly using comparison tables/lists | Positive: Amazon's Breville coffee maker comparison table shows the presence or absence of 6 key features (built-in grinder, 3-second preheat, etc.); Negative: Fastpens pen comparison table lists 11 factors but most are identical, with only "engraving vs. digital printing" differing yet not highlighted |
| 2 Emphasize key points | There are many differences but only a few are critical; display key items prominently, and present secondary items using progressive disclosure | Positive: Great Clips uses hairstyle images + descriptions ("Classic", "Flexible"), and only provides maintenance details when users click "Learn More" |
| 3 Use clear, descriptive copy | Convey differences clearly, use language familiar to users | Positive: Le Creuset Dutch ovens list "capacity + corresponding number of people" ("2 quarts, serves 1–2 people") to eliminate guesswork |
| 4 SERPs must also be explicit | Search results page titles/descriptions should directly state core information; similar products should have differentiated descriptions | Negative: Searching for Furbo cameras "no subscription" shows models that require a subscription without distinguishing features or prices |
Negative example (implicit design): West Virginia University's tuition table uses the terms "in-state/out-of-state tuition" without explanation, which first-time browsing teenagers cannot understand.Positive example (explicit design): UC San Diego's tuition table not only lists in-state vs. out-of-state differences, but also breaks down cost components (tuition/housing/books) and provides estimates by living arrangement (on campus/living with parents), using text + visual highlighting for key differences.
How to ensure clarity:① Do not make assumptions (designers are familiar with the system, so what feels "obvious" to them may not be to external users); ② Test user understanding (especially among new user groups); ③ Pay attention to details, especially cost-related information (tuition, surcharges).
Sourced from NNGroup Topics / Design Patterns - Design Patterns (Ethics, Global, Emerging Technologies subset, 15 patterns). For the full 10 usability heuristics and testing methods, see NNGroup Usability Testing and the Ten Usability Heuristics (Full table of 10 heuristics · Complex application use · 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); for navigation and search patterns, see NNGroup Interaction Patterns: Navigation and Search (25 Patterns · Global Navigation/Local Navigation/Breadcrumbs/Hamburger Menu/Context Menu/17 Menu Guidelines/Tabs/Accordion/Footer/Sticky Header/Table of Contents/In-Page Links/Spatial Memory/Site Search/SERP/Filters/Pagination/Tree Testing); for accessibility topics, see NNGroup Accessibility / Inclusive Design (5 Articles · Three Distinctions in Inclusive Design · Dark Mode Science and 8 Major Pitfalls · Screen Reader User Research · 16 Guidelines for Phone Voice Trees); for more on AI interfaces, see NNGroup AI Products and Conversational Interface Design (20 Articles · 6 Conversation Types/4 Degrees of Anthropomorphism/Sycophancy/Intelligence Over Human-Likeness/Explainable AI Citations and Disclaimers/Cut the Pyramid: Get Straight to the Answer/3 Types of Prompt Suggestions · CARE Framework · 4 Uses of Prompt Controls/GenUI vs. Vibe Coding · Return of Buttons and Checkboxes · Promptframe · Designing Interfaces with Prompts/4 Roles of AI Assistants · Creative Partner: P&G 776-Person Experiment · Initial Review of ChatGPT Agent · Google AI Mode · Why Users Switch Between GenAI and Search). Images/original documents are retained in sources.
Sources and Related Materials
- NNGroup Interaction Patterns: Navigation and Search (25 Patterns · Global Navigation/Local Navigation/Breadcrumbs/Hamburger Menu/Context Menu/17 Menu Guidelines/Tabs/Accordion/Footer/Sticky Header/Table of Contents/In-Page Links/Spatial Memory/Site Search/SERP/Filters/Pagination/Tree Testing)
- NNGroup Accessibility / Inclusive Design (5 Articles · Three Distinctions in Inclusive Design · Dark Mode Science and 8 Major Pitfalls · Screen Reader User Research · 16 Guidelines for Phone Voice Trees)
- NNGroup AI Products and Conversational Interface Design (20 Articles · 6 Conversation Types/4 Degrees of Anthropomorphism/Sycophancy/Intelligence Over Human-Likeness/Explainable AI Citations and Disclaimers/Cut the Pyramid: Get Straight to the Answer/3 Types of Prompt Suggestions · CARE Framework · 4 Uses of Prompt Controls/GenUI vs. Vibe Coding · Return of Buttons and Checkboxes · Promptframe · Designing Interfaces with Prompts/4 Roles of AI Assistants · Creative Partner: P&G 776-Person Experiment · Initial Review of ChatGPT Agent · Google AI Mode · Why Users Switch Between GenAI and Search)
- NNGroup Usability Testing and the Ten Usability Heuristics (Full table of 10 heuristics · Complex application use · 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)