/* global window */
// Content object for the article renderer (blog/blog-article.jsx).
// Produced by the Writer→Editor→Humanize→Proofreader chain; draft in blog/pipeline/drafts/five-flavors-friction.md
window.__ARTICLE__ = {
  slug: "five-flavors-friction",
  laneLabel: "EVIDENCE INDEX",
  kicker: "AGENTIC UX",
  readMins: 6,
  dateLabel: "Apr 14, 2026",
  title: "Five flavors of UX friction agents catch before users do",
  deck: "A practitioner's taxonomy of the five friction types an AI-moderated study surfaces while you can still fix them — what each looks like, the behavioral signal that betrays it, and a sample diagnostic.",
  tags: ["ux", "agentic", "methodology"],
  toc: [
    { id: "tax", num: "01 · THE TAXONOMY", title: "The five flavors" },
    { id: "deadends", num: "02 · DEAD-ENDS", title: "Navigational dead-ends" },
    { id: "load", num: "03 · LOAD SPIKES", title: "Cognitive-load spikes" },
    { id: "signposting", num: "04 · SIGNPOSTING", title: "Signposting gaps" },
    { id: "trust", num: "05 · TRUST", title: "Trust failures" },
    { id: "mismatch", num: "06 · EXPECTATIONS", title: "Mismatched expectations" },
    { id: "why", num: "07 · THE PAYOFF", title: "Why the taxonomy earns its keep" },
  ],
  body: [
    { t: "h2", id: "tax", num: "01 · THE TAXONOMY", text: "The five flavors of friction" },
    { t: "p", html: `Friction is the tax a product charges a user for trying to get something done. The trouble is that most of it is invisible to the team shipping the product. You designed the flow, so you can't get lost in it. You wrote the label, so you already know what it means. By the time friction shows up in your funnel, it has already done its damage — the user is gone, and the dashboard only tells you <em>how many</em> left, never <em>why</em>.` },
    { t: "p", html: `An AI-moderated study closes that gap. You put a real person in front of the real product, an agent probes every hesitation in the moment ("what made you pause there?"), and every answer ties back to a clip, a transcript line, and a behavioral signal. Run enough of these and the same failures keep surfacing. They sort into five recognizable types. This is the taxonomy we use at NeroView to triage what a study found, and it's ours — a working framework, not a citation.` },
    { t: "p", html: `For each type: what it looks like, the behavioral tell that gives it away on the recording, and a sample diagnostic. The diagnostics are illustrative — NeroView's framing of how each failure reads in a study, not write-ups of any one named engagement.` },
    { t: "pullquote", text: "By the time friction shows up in your funnel, it has already done its damage. The dashboard tells you how many left, never why." },

    { t: "h2", id: "deadends", num: "02 · DEAD-ENDS", text: "One: navigational dead-ends" },
    { t: "p", html: `A navigational dead-end is the moment a user knows what they want, scans the screen, and finds no plausible path to it. They aren't confused about the goal. They're confused about where the product hid the door.` },
    { t: "p", html: `The theory underneath this is information scent. People navigate digital products the way animals forage for food: they follow cues — link labels, menu names, button text — that promise the thing they're after, and they abandon a trail the moment the scent runs cold (Nielsen Norman Group, 2019). A dead-end is a scent that evaporates. The label that should have read "manage billing" reads "account preferences," and the user, smelling nothing, gives up the trail.` },
    { t: "p", html: `The behavioral tell is the hover-scan-retreat loop. On the recording you watch the cursor drift across three or four candidate menu items without committing, then retreat to a screen the user already understands. Pair that with a transcript line like "I feel like this should be… somewhere?" and you have a dead-end, not a slow reader.` },
    { t: "p", html: `<strong>Sample diagnostic.</strong> A participant trying to cancel an add-on circles the settings menu twice, mutters "where would they even put this," and finally uses search. The clip at 02:14 catches the second retreat. The behavioral signal — two full menu scans, no click — repeats across the segment of users on the same task. The fix is rarely a redesign. It's a label that finally smells like what's behind it.` },
    { t: "figure",
      fig: { key: "transcript", props: { time: "02:14", speaker: "P07 · niche segment", children: `Where would they even put this… I feel like this should be somewhere obvious. I'll just search for it.` } },
      ref: "FIG 01",
      caption: "Navigational dead-end: the verbal tell pairs with two full menu scans and no click." },

    { t: "h2", id: "load", num: "03 · LOAD SPIKES", text: "Two: cognitive-load spikes" },
    { t: "p", html: `A cognitive-load spike is the moment a screen asks the working memory to hold more than it can. The user doesn't quit because the task is impossible. They quit because the task got heavy, all at once, and dropping it felt easier than carrying it.` },
    { t: "p", html: `Cognitive load theory splits the burden into two parts that matter here. Intrinsic load is the difficulty the task can't shed — some decisions are just hard. Extraneous load is the difficulty your <em>presentation</em> added on top, and that part is yours to remove. When total load runs past the limits of working memory, performance degrades (Sweller et al., 1998). A form with twenty-three fields on one screen isn't a hard task. It's an easy task wearing extraneous load like a lead coat.` },
    { t: "p", html: `The tell is the stall: scrolling slows, the verbal stream goes quiet, and you hear the exhale. Baymard's checkout research documents the downstream version — roughly 18% of US shoppers have abandoned an order specifically because checkout was too long or complicated (Baymard Institute, 2024). In a moderated session you catch the same spike upstream, before it converts into a lost order.` },
    { t: "p", html: `<strong>Sample diagnostic.</strong> On a dense onboarding form the participant slows, sighs, and says "this is a lot." The behavioral signal is the scroll rhythm flattening and the think-aloud going silent — disengagement you can see before they say a word. Confidence on the finding sits high because the same stall recurs at the same field across the segment. The fix is to make the work <em>feel</em> lighter: progressive disclosure, one decision per screen, fewer fields in view at once.` },

    { t: "h2", id: "signposting", num: "04 · SIGNPOSTING", text: "Three: signposting gaps" },
    { t: "p", html: `A signposting gap is the absence of an answer to "what just happened?" or "what do I do next?" The user did the thing. The product stayed silent. Now they're frozen, not because they failed but because they can't tell whether they succeeded.` },
    { t: "p", html: `This is Nielsen's first heuristic, the oldest rule in the field: visibility of system status. Keep users informed about what's going on through timely, appropriate feedback (Nielsen Norman Group, 2024). A signposting gap is that feedback going missing at the exact moment it was load-bearing — the spinner that never resolves, the saved state with no confirmation, the multi-step flow that forgets to say which step you're on.` },
    { t: "p", html: `The tell is the double-click and the wait. The user clicks, sees nothing change, and clicks again — or sits, cursor hovering, scanning for a sign the system heard them. On the transcript it sounds like "did that work?" That question is the whole diagnosis.` },
    { t: "p", html: `<strong>Sample diagnostic.</strong> After submitting a request a participant gets no confirmation screen, waits, then reloads the page to check — and in reloading, files the request twice. The clip captures the reload; the behavioral signal is the duplicate submission, visible in the event stream, not just the user's worry. The fix costs almost nothing: a confirmation state that says, in plain language, <em>we got it.</em>` },

    { t: "h2", id: "trust", num: "05 · TRUST", text: "Four: trust failures" },
    { t: "p", html: `A trust failure is the moment a product <em>works</em> and the user still backs away, because something made them doubt it was safe, legitimate, or competent. Nothing broke. The user just decided not to risk it.` },
    { t: "p", html: `Trust gets decided fast, and on surface cues more than anyone likes to admit. In the Stanford Web Credibility study, nearly half of consumers — 46.1% — judged a site's credibility partly on visual design: layout, typography, consistency (Stanford Web Credibility Project, 2002). A cramped payment screen, an unexpected permission prompt, a typo on the page that takes your card number — none of these are bugs. All of them leak trust.` },
    { t: "p", html: `The tell is hesitation at the threshold of commitment, with the goal still intact. The user wants the outcome, hovers at the final button, and pulls back. On the transcript it's "is this… legit?" or "why does it need <em>that</em>?" Frustration and doubt are emotional signals, and they're the ones we mark in red — the cursor stalled over "Pay now" with no click is a trust failure wearing a behavioral disguise.` },
    { t: "figure",
      fig: { key: "timeline", props: { moments: [0.34, 0.52, 0.71, 0.78] } },
      ref: "FIG 02",
      caption: "Emotion timeline across the payment step: markers flag the moments we tagged — the hesitation and pull-back at commitment read as a trust signal." },
    { t: "p", html: `<strong>Sample diagnostic.</strong> At the payment step a participant pauses, rereads the URL, and says "I just want to make sure this is the real thing." No error fires; the funnel would log this as a slow but successful step, or a silent drop. The clip and the emotional signal are the only places the doubt is legible. The fix is reassurance where the risk peaks: trust marks, clear copy, a design that doesn't flinch at the moment money changes hands.` },

    { t: "h2", id: "mismatch", num: "06 · EXPECTATIONS", text: "Five: mismatched expectations" },
    { t: "p", html: `A mismatched expectation is the gap between the product the user thought they were getting and the one in front of them. Every element may work perfectly. It's the wrong element, against the model in the user's head.` },
    { t: "p", html: `Don Norman named the two gaps this opens: the gulf of execution (the distance between what a user wants to do and what the system lets them do) and the gulf of evaluation (the distance between what the system did and what the user can tell it did). A good design narrows both with feedback and a conceptual model that matches the user's (Norman, 1986). A mismatch is a wide gulf — the feature that does almost-but-not-quite what the label promised, the result that arrives in a shape the user didn't expect.` },
    { t: "p", html: `The tell is the recoil: a small "oh — that's not what I…" followed by a correction or a retreat. Not the silence of a load spike or the freeze of a missing signpost, but a flinch. The user <em>did</em> get feedback. The feedback just contradicted the model in their head.` },
    { t: "p", html: `<strong>Sample diagnostic.</strong> A participant expecting a quick preview instead triggers a full export, recoils — "oh, I didn't want the whole thing" — and hunts for an undo. The behavioral signal is the immediate reversal attempt, captured at the click and the clip right after. The segment pattern shows it isn't one person misreading a button; it's the button promising the wrong thing. The fix lives in the label and the preview, not the export engine, which worked fine.` },
    { t: "figure",
      fig: { key: "insight", props: { accent: true, title: "Mismatched expectation: “preview” triggers a full export", clips: "9", participants: "48", segments: "3", confidence: 0.84, body: `Across the task, users read the control as a lightweight preview and recoiled when it ran a full export. The reversal attempt is immediate and repeats across segments — a label problem, not an engine problem.` } },
      ref: "EXHIBIT 01",
      caption: "The finding as it reads in a NeroView report — clip count, sample, segment spread, and an honest confidence indicator." },

    { t: "h2", id: "why", num: "07 · THE PAYOFF", text: "Why the taxonomy earns its keep" },
    { t: "p", html: `Five types, one purpose: turn a vague "users are dropping off" into a specific, fixable diagnosis with the receipt attached.` },
    { t: "p", html: `Notice what each diagnosis rests on. Not a satisfaction score. A clip you can replay, a transcript line you can quote, a behavioral signal you can point to, a segment pattern that proves it's structural rather than one cranky participant, and a confidence indicator that's honest about how sure you are. That's the difference between "users seem confused" and "fourteen of forty-eight users in the niche segment hit a navigational dead-end on the same mislabeled menu, here's the clip."` },
    { t: "p", html: `An AI-moderated study earns its place by catching all five <em>before</em> they reach the funnel — while the user is still in the room, still talking, still willing to show you exactly where the product let them down. A dashboard counts the people who already left. The evidence trail shows you the door they couldn't find. Fix that, and you never have to count them.` },
    { t: "pullquote", text: "A dashboard counts the people who left. An evidence trail shows you the door they couldn't find, the form that got too heavy, and the button that lied." },

    { t: "references", items: [
      { n: 1, html: `Nielsen Norman Group (2019). "Information Scent: How Users Decide Where to Go Next." <a href="https://www.nngroup.com/articles/information-scent/" target="_blank" rel="noopener">nngroup.com</a>` },
      { n: 2, html: `Nielsen Norman Group (2024). "Visibility of System Status (Usability Heuristic #1)" and "10 Usability Heuristics for User Interface Design." <a href="https://www.nngroup.com/articles/visibility-system-status/" target="_blank" rel="noopener">nngroup.com</a> · <a href="https://www.nngroup.com/articles/ten-usability-heuristics/" target="_blank" rel="noopener">ten-usability-heuristics</a>` },
      { n: 3, html: `Sweller, J., van Merriënboer, J., & Paas, F. (1998). "Cognitive Architecture and Instructional Design." <em>Educational Psychology Review.</em> <a href="https://link.springer.com/article/10.1023/A:1022193728205" target="_blank" rel="noopener">link.springer.com</a>` },
      { n: 4, html: `Baymard Institute (2024). "Checkout & Cart Abandonment Research." <a href="https://baymard.com/research/checkout-usability" target="_blank" rel="noopener">baymard.com</a>` },
      { n: 5, html: `Stanford Web Credibility Project / Fogg, B. J. (2002). "Stanford Guidelines for Web Credibility." Persuasive Technology Lab, Stanford University. <a href="https://credibility.stanford.edu/guidelines/index.html" target="_blank" rel="noopener">credibility.stanford.edu</a>` },
      { n: 6, html: `Norman, D. A. (1986). <em>User Centered System Design</em> (gulf of execution / gulf of evaluation); see also <em>The Design of Everyday Things.</em> <a href="https://en.wikipedia.org/wiki/Gulf_of_execution" target="_blank" rel="noopener">en.wikipedia.org</a>` },
    ] },
  ],
  related: [
    { href: "/blog/synthetic-vs-human.html", title: "Synthetic vs. human research: when each one wins", meta: "7 min · Index" },
    { href: "/blog/post.html", title: "Stop trusting AI summaries. Start trusting the evidence trail.", meta: "9 min · Index" },
  ],
};
