Cognition And Learnability Principles

Apply the principle of Mimicry — borrowing the form, behavior, or visual language of something familiar to make a new design recognizable. Use when introducing a novel feature whose function would be opaque without an analogy, choosing between metaphor and convention, designing for a category your users already know, or evaluating whether a "skeuomorphic" element helps or hurts. Mimicry comes in surface (visual resemblance), behavioral (acts like the source), and functional (does what the source does) forms. Used well, it accelerates learning; used badly, it carries forward limitations the new medium doesn't share.

Use this skill whenever a design has many options the user must choose among — menus, navigation, pickers, plan tiers, settings panels, action toolbars, lists of templates, anything that asks "which one?" Trigger when the user is laying out a navigation menu, designing a settings page, picking the structure of a wizard, building a country/timezone/currency picker, designing a pricing table, or reviewing a UI where users hesitate over which control to use. Trigger when there's debate about "should we add another option?" — Hick's Law is the principle that costs the option a price. Routes to sub-aspect skills for menus, defaults, and pricing.

Use this skill whenever the design has many features, controls, or content elements and decisions about which to prioritize matter — feature roadmaps, redesign scoping, IA decisions, dashboard design, settings page audits, marketing content prioritization, or any design with many candidates competing for attention. Trigger when the user asks "what should we focus on?", "should we add another feature?", "what can we cut?", or when reviewing a UI cluttered with rarely-used controls. The 80/20 rule (Pareto principle) is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) and one of the most quoted across design, business, and engineering.

Use this skill whenever a user must navigate within a non-trivial space — a multi-page web app, a documentation site, a hierarchical settings panel, a conference site, a multi-step flow, a campus, a building, an app with deep IA. Trigger when the user asks how navigation should be structured, when users get lost, when "I can't find X" complaints recur, when designing breadcrumbs, sitemaps, search, or recovery flows. Wayfinding is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003); it's also the only principle from that source not previously covered by these plugins. Routes to sub-aspect skills for spatial metaphors, search-and-recovery, and breadcrumbs.

Apply the principle of Consistency — making similar things look and behave similarly so users can transfer learning across the interface. Use when designing component libraries, defining naming conventions, choosing whether to invent or borrow patterns, auditing across surfaces (web, mobile, email, support docs), or evaluating whether two features should share or diverge in their interaction model. Strong consistency reduces cognitive load and learnability cost; aggressive consistency can flatten meaningful differences. There are four kinds — aesthetic, functional, internal, external — each with different applications.

Use this skill whenever the design will be used by people who bring prior expectations — which is essentially every design. Trigger when designing onboarding, when picking metaphors (folders, channels, projects), when reviewing why users keep getting confused, when migrating from one product convention to another, or when the user mentions "users don't understand," "they keep doing X wrong," or "we're inventing something new." Mental Model is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) and grounds most modern user-experience design.

Use this skill when designing menus, dropdowns, navigation, command palettes, or any interface where the user picks from a list. Trigger when the menu has more than ~7 items, when navigation feels overwhelming, when designing a cmd-K palette, when picking what goes in a "More" overflow, or when arguing about whether to add another menu item. Sub-aspect of `hicks-law`; read that first if you haven't already.

Apply surface mimicry — making an interface element look like a familiar physical object to communicate its purpose at a glance. Use when introducing a control or container that has no native UI vocabulary, designing a niche product that benefits from a recognizable visual reference (a journal that looks like a journal, a wallet that looks like a wallet), or evaluating whether visual skeuomorphism is communicating or just decorating. Surface mimicry is most useful for novice users in unfamiliar mediums; it becomes anachronistic as the source fades or as users learn the abstract conventions.

Use this skill whenever a design task involves cognition, mental models, learnability, complexity reduction, defaults, memory, scanning, or comprehension — regardless of framework or platform. Trigger when the user is designing forms, settings, onboarding, dashboards with many widgets, complex tables, navigation IA, search experiences, or any flow that has many options or asks the user to learn something new. Trigger when the user mentions "too complex," "too many options," "users keep getting confused," defaults, labels, copy, mental models, progressive disclosure, autocomplete, or ergonomics. Routes the model to the right cognition principle in this plugin.

Use this skill when designing pricing tables, plan pickers, tier selectors, or any conversion surface where the choice itself is the conversion event. Trigger when laying out 3-tier or 4-tier pricing, when arguing about whether to add a fourth plan, when designing the "Choose your plan" step of onboarding, or when fixing low conversion on a pricing page. Pricing pages are a special Hick's Law case: the decision is the entire purpose of the page, and decision fatigue equals lost revenue. Sub-aspect of `hicks-law`; read that first if you haven't already.

Use this skill when the question is what to *pre-select* in a list of options — radio groups, dropdowns, configuration UIs, plan pickers, sign-up flows, settings. A strong default is the highest-leverage Hick's Law mitigation: most users accept the default, paying almost no decision cost. Trigger when picking what's selected on first load, when stakeholders argue "shouldn't we let the user choose?", when designing wizards or onboarding, or when a UI has many options but most users want the same one. Sub-aspect of `hicks-law`; read that first if you haven't already.

Apply iconic resemblance — designing or choosing icons that visually look like what they represent. Use when picking icons for actions or objects with strong visual referents (camera, clock, lock, calendar), evaluating whether a custom icon is communicating, or testing whether your icon set actually conveys meaning to your audience. Resemblance is the strongest form of icon recognition because it requires no prior learning; it fails when the function has no visual referent or when the audience doesn't recognize the object being depicted.

Apply behavioral mimicry — making an interface element behave like a familiar physical object so the user's physical-world intuitions transfer to the digital interaction. Use when designing gestures, animations, transitions, drag-and-drop, scroll behaviors, or any interaction where physical-world analogies could clarify the experience. Behavioral mimicry is more durable than visual skeuomorphism — physics-mimicking behaviors age well — but it requires deliberate calibration: too much physical fidelity slows the interaction down without communicating anything new.

Apply external consistency — honoring conventions from outside your product (platform conventions, category conventions, established interaction patterns) so users can transfer their learning into your product. Use when designing for a specific platform (iOS, Android, web), entering an established product category (calendar, email, file manager), choosing icons or gestures, or deciding when to follow vs. lead a convention. External consistency reduces the learning cost for new users; deviating from it requires both a strong reason and explicit framing.

Apply internal consistency — making your product coherent with itself across all surfaces, components, and flows. Use when designing or auditing component libraries, defining design tokens, settling cross-team naming conventions, planning a design-system rollout, integrating acquired or legacy code, or evaluating whether two features should share or diverge in their interaction model. Internal consistency is enforced through design systems, shared vocabularies, and process discipline; it erodes through hand-off losses, sprint-driven shortcuts, and team boundaries that don't coordinate.

Apply iconic representation — using simplified visual symbols to communicate function, status, or category at a glance. Use when designing icon sets, choosing between icon and text labels, evaluating whether to lean on existing iconography (resemblance to a known object) or invent symbolic icons (arbitrary forms with assigned meanings), or auditing whether your icons are actually communicating. Three kinds: similar (icons that look like what they represent), example (icons that depict an object associated with the function), and arbitrary/symbolic (forms with no inherent meaning, like the hamburger menu).

Use this skill when designing or fixing long forms that ask the user for many fields — sign-up flows, profile setup, settings panels, checkout, intake forms, applications. Trigger when forms exceed ~6 fields, when users complain forms are "too long," when seeing high mid-form drop-off, or when picking how to break a form into sections. Sub-aspect of `chunking`; read that first.

Use this skill whenever a design has *more* available than the user needs to see at this moment — settings panels with advanced options, forms with optional fields, dashboards with drill-down detail, navigation with deep IA, dialogs with "More options" affordances, marketing pages with FAQ accordions. Trigger when designing or fixing surfaces that feel "overwhelming," when stakeholders argue about whether to expose every option up front, when novice and expert users have different tolerance for the same surface, or when reviewing a UI cluttered with rarely-used controls. Progressive disclosure is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003), originally formalized through the Xerox Star user-interface work in the 1970s.

Use this skill whenever the user must locate or choose something from many possibilities — pickers, command palettes, navigation menus, autocompletes, recents lists, search results, settings panels. Trigger when designing inputs that ask the user to "type the right thing," when picking between dropdowns and search-first interfaces, when reviewing why users keep typing wrong values into autocomplete fields. Recognition Over Recall is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) and one of Nielsen's 10 heuristics — recognizing options is far easier than recalling them from memory.

Use this skill when scoping a redesign or refactor — choosing which existing surfaces deserve full attention and which can be left mostly alone. Trigger when the user asks "where should we focus our redesign?", "do we need to redo all of this?", or when planning incremental design improvements with limited capacity. Sub-aspect of `80-20-rule`; read that first.

Use this skill when designing inputs or displays for numeric strings — phone numbers, OTP / verification codes, credit card numbers, account IDs, license keys, currency, dates, social security numbers. Trigger when picking a format for displaying numbers, designing OTP entry UIs, or formatting identifiers in tables and receipts. Sub-aspect of `chunking`; read that first.

Use this skill when scoping a roadmap, prioritizing features, planning an MVP, or deciding what to ship and what to defer. Trigger when the user asks "what should we build next?", "is this feature worth it?", "should we ship feature X?", or when reviewing a feature backlog. Sub-aspect of `80-20-rule`; read that first.

Apply arbitrary and symbolic icon design — using forms with no inherent meaning that depend on convention to communicate (the hamburger menu, the kebab menu, the AI sparkle, app brand-mark icons). Use when a function has no clear visual referent, when working within a domain that has its own icon vocabulary, when establishing or following a convention, or when evaluating whether a convention is strong enough to support icon-only treatment. Arbitrary icons require prior learning to work; the skill is calibrating when to follow a convention vs. when to label.

Use this skill when designing search as the universal wayfinding recovery, or when designing for users who got lost — 404 pages, "results not found," "you've reached an unexpected page," empty states that should orient, and any moment where the user's mental map has failed and the system must repair it. Trigger when designing global search, command palette, error pages, or recovery flows. Sub-aspect of `wayfinding`; read that first.

Use this skill when designing pickers, dropdowns, comboboxes, autocompletes, command palettes, or any UI that lets the user select from a known set. Trigger when picking between a free-text field and a select; when designing a command palette; when reviewing why users keep typing wrong values into autocomplete inputs. Sub-aspect of `recognition-over-recall`; read that first.

Use this skill when distinguishing the two mental-model types — system models (how the user thinks the system works) and interaction models (how the user thinks they should use it). Trigger when designing onboarding (which model to teach), reviewing user confusion (which model is wrong), or building documentation (which model to explain). Sub-aspect of `mental-model`; read that first.

Use this skill when designing the orientation chrome that tells users where they are — breadcrumbs, current-page indicators, page titles, header context, "you are here" markers, parent-link affordances. Trigger when designing a multi-level IA, when users complain "I lost track of where I was," when reviewing whether to add or remove a breadcrumb, or when picking between navigation patterns for hierarchical content. Sub-aspect of `wayfinding`; read that first.

Use this skill when designing surfaces that accelerate repeat tasks through recents, frequently-used items, and contextual suggestions. Trigger when designing pickers used repeatedly, command palettes, navigation that should adapt to user behavior, or any surface where a returning user shouldn't have to retype their frequent destinations. Sub-aspect of `recognition-over-recall`; read that first.

Use this skill when designing onboarding, when diagnosing why users keep getting confused, when migrating users from one product convention to another, or when the system genuinely differs from familiar comparable products. Trigger when the user mentions "users don't get it," "we keep getting the same support tickets," or "this is a new pattern they need to learn." Sub-aspect of `mental-model`; read that first.

Use this skill when deciding whether (and how) to borrow physical-world wayfinding metaphors for software — rooms, doors, paths, maps, landmarks. Trigger when designing app shells with multiple "spaces," when picking metaphors for navigation (workspace, channel, board, project), when reviewing skeuomorphic vs. flat navigation choices, or when the user mentions "feels like a maze" or "where's the front door of this app." Sub-aspect of `wayfinding`; read that first.

Use this skill when deciding *what to surface* and *what to tuck* — the editorial choices behind progressive disclosure. Trigger when laying out a settings page, picking which form fields to show by default, deciding whether a section starts collapsed or open, or arguing about whether a feature deserves primary chrome or belongs in "Advanced." Sub-aspect of `progressive-disclosure`; read that first.

Use this skill when picking the *mechanism* for revealing tucked content — accordion vs. modal vs. tab vs. separate page vs. tooltip. Trigger when designing the UI for "More options," picking between an inline accordion and a side sheet, deciding whether a wizard step should be a modal or a separate page, or reviewing whether existing disclosure affordances are doing their job. Sub-aspect of `progressive-disclosure`; read that first.