UX Encyclopedia

Specialized Flows — Compact Catalog

Nine recurring flows too specific for their own long files, each mapped the same way: what it is, when to design it explicitly, key states, risks, and a compact example. Cross-reference the pattern files for screen-level evidence; these entries cover the route.

Search Flow

What: query → suggestions → results → refine → (no-results recovery). When: any product where search is a primary strategy — design the flow, not just the box. Key states: empty box (recent searches on focus), typing (suggestions vs. result previews, labeled separately), results (count + interpreted query, sort, pagination), refined (filters applied), zero results, error/timeout. The make-or-break state is zero results: Baymard found ~9 in 10 mobile commerce no-results pages are dead ends — recover with spell-corrected retry, broadened matches clearly labeled, popular categories, and a browse path. Keep the query in the box on the results page so iteration is cheap. Risks: silent scoping ("search is broken" complaints), clearing the query, suggestion lists that scroll. Example: focus → recents → type "othomosaic" → suggest "orthomosaic" → results (24) → filter: construction → open item. Screen-level evidence: Search & Filtering.

Filter Flow

What: view list → open filters → select values → apply → see result → adjust or clear. When: any list over ~20 items with attributes users decide on. Key states: unfiltered, filtering (instant-apply on desktop; batch "Show N results" in mobile overlays), filtered (applied filters visible as removable chips + "Clear all"), zero-result combination (prevent via per-value hit counts — "Blue (34)"), and restored (filters survive back-navigation and are shareable via URL). Logic convention: OR within a facet, AND across facets. Risks: hidden active filters (users can't diagnose odd results), filters that don't match displayed attributes, losing filter state on back. Example: results (312) → Filter & Sort → Size: M, L → Color: Blue → Show 41 → remove "Blue" chip → 87. Evidence: Search & Filtering § faceted filtering.

Form Flow

What: multi-step data collection: entry → step 1…n → validation → review → submit → confirmation. When: any form beyond ~7 fields or with branching sections (applications, setup wizards, checkout — see Checkout Flows for that specialization). Key states per step: pristine, in-progress, field-level errors (validate on blur/step, not only at submit), saving (autosave with visible "Saved" — long forms without autosave lose users to one crash), and resume (returning users land on their furthest valid step). Global states: review-before-submit (editable summary, links back into steps), submitting (disable double submit), success, and submit-failed with input preserved. Risks: losing data on error, progress bars that lie, review screens that can't edit. Example: Start → About you → Project details (autosave) → Files → Review (edit step 2) → Submit → spinner → Confirmation #4821. Field-level evidence: Forms & Input.

Upload Flow

What: select file(s) → client-side validate → upload with progress → server processing → result. When: any user-supplied files, especially large ones (video, imagery, datasets). Key states: idle (formats and size limits stated before selection), validating (reject early: wrong type/too large, with the limit in the error), uploading (per-file progress, pause/cancel, resumable for large files), queued/processing (distinct from uploading — show which), done (preview + next action), and the failure branches: network drop (auto-retry then resume), processing failure (which file, why, retry without re-uploading), partial batch success (2 of 5 failed — list them, retry failed only). Risks: one bad file killing a batch, "100%" followed by silence during processing, no cancel. Example: drop 40 images → 2 rejected (RAW not supported) → 38 uploading → processing: stitching → done → view map.

Download / Export Flow

What: choose format/scope → generate → deliver. When: reports, data export, media rendering, backups. Key states: configure (format, range, options — with size/time estimate for big jobs), generating (sync for small: spinner then file; async branch for large: job queued → progress → notify by email/in-app when ready → download link with expiry), delivered, failed (why + retry), and expired link (regenerate, don't 404). Decide the sync/async threshold explicitly and design both. Risks: browser-tab hostage for 10-minute exports, no notification when done, exports that silently truncate. Example: Export → GeoTIFF, full site → est. 2.1 GB → "We'll email you" → processing → email link (72 h) → download. Data-handling notes: Data Flow.

Subscription Flow

What: the paid-relationship lifecycle: trial → upgrade → downgrade → renew. When: any recurring-revenue product. Key states: trial (what's included, days left, what happens at expiry stated up front), trial ending (fair warning before charging — surprise renewals destroy trust and are increasingly regulated), upgrade (prorated price shown before confirm; instant feature unlock), downgrade (what will be lost, when it takes effect, what happens to over-limit data), renewal (receipt + easy access to manage/cancel), payment failure (grace period + retry ladder before lockout). Risks: burying price changes, charging silently at trial end, downgrades that delete data without warning. Example: Trial day 12 of 14 → banner → Choose plan → Pro $24/mo prorated → Confirm → unlocked → receipt. Pricing-psychology cautions: Decision-Making & Cognitive Biases.

Cancellation Flow

What: honest offboarding: confirm intent → offer alternatives once → cancel → confirmation + data policy. When: subscriptions, accounts, orders. The rule: cancellation must be roughly as easy as signup — no phone-call-only exits, no guilt copy, no maze. One respectful counter- offer (pause, cheaper tier, feedback) is legitimate; repeating it, hiding the cancel button, or adding survey walls is a dark pattern — see Persuasion, Ethics & Dark Patterns. Key states: manage subscription (cancel visible), reason (optional, skippable), single alternative offer (declinable in one tap), confirm (what ends, when, what happens to data and how to export it), canceled (email confirmation with end date), and win-back later — not at the door. Risks: retention theater that converts a canceler into a detractor; unclear data retention. Example: Settings → Cancel → "Pause 2 months instead?" → No thanks → ends Aug 3, data exportable 90 days → Confirm → email receipt.

Support Flow

What: self-serve → ticket → escalation → resolution loop. When: any product with real users. Key states: self-serve first (search help, docs, community — but the human path stays visible; hiding it to deflect tickets backfires), contact (form/chat with context auto- attached: plan, platform, recent errors), acknowledged (ticket number

  • expected response time), in-progress (status visible; agent replies notify), escalated (tier 2/engineering — context travels, user never re-explains), resolved (confirm with the user, don't just close), and reopened (a state, not a new ticket). Risks: auto-close timers masquer- ading as resolution, bots with no human exit (Designing AI-Powered Interfaces), context lost at every hop. Example: Help center → no answer → Chat → bot suggests article → "talk to a person" → ticket #812 → agent → fix confirmed → closed after user confirms.

AI Agent Flow

What: goal → plan preview → execute with progress → uncertainty checkpoint → confirm consequential actions → result + undo. When: any feature where AI acts on the user's behalf (books, buys, edits, sends, deploys). Key states: goal capture (restate the goal — cheap misunderstanding insurance), plan preview (steps the agent intends; editable/approvable for high stakes), executing (live step-grain activity log, not a spinner — "searching X, editing Y"; pause/stop/ redirect available), uncertainty checkpoint (agent pauses and asks when confidence is low or inputs are ambiguous, rather than guessing), consequential-action gate (explicit preview + approval before anything that spends, deletes, messages, or commits — draft-first is the workhorse), result (summary of what was done and changed), and undo/ rollback (non-destructive by default; revert is one action). Risks: over-automation without review, fluent confident failure, "working…" black boxes that read as hung. Example: "Rebook my flight" → plan: search → hold seat → cancel old → CONFIRM before purchase → done + itinerary + undo window. Evidence and patterns: Designing AI-Powered Interfaces; dialogue mechanics: Conversation Flow.

Sources

  • Baymard Institute — e-commerce search & filtering research (baymard.com) — zero-results, autocomplete, filter benchmarks.
  • Nielsen Norman Group — search visibility, AI-chat and assistant usability research (nngroup.com).
  • Amershi, S. et al. (2019). "Guidelines for Human-AI Interaction." Proc. CHI '19 — wrong-by-default handling, efficient correction.
  • Google PAIR — People + AI Guidebook (pair.withgoogle.com) — feedback/control and graceful-failure chapters.
  • Morville, P. & Callender, J. (2010). Search Patterns. O'Reilly.
↑↓ to navigate · Enter to open · Esc to close