Interaction And Control Principles

Framework-agnostic design principles for interaction, affordance, feedback, errors, and user control. Covers Fitts's Law, Affordance, Forgiveness, Feedback Loop, Errors, Constraint, Mapping, Expectation Effect, and Control. Drawn from the interaction-related entries of 'Universal Principles of Design' (Lidwell, Holden, Butler, 2003) and the broader HCI literature (Fitts, Norman, Nielsen heuristics

by @concertonotes 29 skills

Skills in this plugin

29
  1. Errors · concertonotes bundle
    Use this skill whenever a design must accommodate the inevitability of human error — typos, wrong-button presses, misread instructions, mistimed actions, misunderstandings of system state. Trigger when designing form validation, input handling, destructive flows, complex multi-step procedures, alert systems, or any UI where users can do the wrong thing. Trigger when post-incident analyses reveal patterns of "human error" — most are design errors in disguise. Errors is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003), grounded in Norman's and Reason's foundational human-error research.
    0 repo stars
  2. Control · concertonotes bundle
    Apply the principle of Control — the level of autonomy a system gives the user, and how that level should be matched to the user's expertise and the task's stakes. Use when designing for novice vs. expert audiences, choosing between fully automated and manually controlled behaviors, deciding what to expose vs. abstract away, or building products that span experience levels (a tool a beginner will use once and an expert will use thousands of times). Too much control overwhelms novices; too little frustrates experts. The skill is calibrating control to the user, the task, and the moment.
    0 repo stars
  3. Mapping · concertonotes bundle
    Apply the principle of Mapping — designing the relationship between controls and their effects so the connection between input and output is immediately obvious. Use when designing controls (knobs, switches, buttons, sliders, gestures), arranging them in space relative to what they affect, or diagnosing user confusion about which control does what. Strong mappings exploit physical analogies (up = more), spatial correspondence (the left burner control is on the left), and cultural conventions (red = stop). Poor mappings force the user to memorize arbitrary pairings, generating slips and errors that compound over time.
    0 repo stars
  4. Fitts Law · concertonotes bundle
    Use this skill whenever the question involves how easy it is to *hit* an interactive target — buttons, links, form controls, drag handles, scrollbars, mobile tap targets, anything the user must move a pointer or finger to. Trigger when sizing buttons, designing toolbars, picking a hit-area for icon buttons, designing for touch screens, debugging "users keep mis-clicking," or arguing about button density vs. usability. Trigger when the user mentions touch targets, target size, "fat fingers," pointer accuracy, edge gestures, or accessibility around motor impairments. Routes to sub-aspect skills for touch targets, screen edges, and pointer acceleration.
    0 repo stars
  5. Affordance · concertonotes bundle
    Use this skill whenever the question is whether the user can tell what an element does — whether it looks clickable, draggable, expandable, editable, or interactive at all. Trigger when designing buttons, links, custom controls, drag handles, draggable cards, editable inline fields, or any interactive element. Trigger on reviews when users hesitate, miss controls, or click on things that aren't interactive. Affordance is one of the most decisive principles in interaction design — Norman placed it at the center of *The Design of Everyday Things* — and it's one of the most violated by modern flat-design conventions that strip the visual cues users rely on.
    0 repo stars
  6. Constraint · concertonotes bundle
    Use this skill whenever the design must structurally prevent invalid actions — input validation, disabled states, required fields, type-restricted inputs, mode locks, role-based gates, hardware lockouts. Trigger when designing forms, picking input types, designing destructive flows, gating multi-step procedures, or thinking about how to prevent a class of errors from being possible at all. Constraint is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) and one of the strongest design moves available — preventing wrong actions is more powerful than detecting them after the fact.
    0 repo stars
  7. Forgiveness · concertonotes bundle
    Use this skill whenever a design lets users do something they might regret — delete, send, publish, charge, transfer, archive, overwrite, irrecoverably commit. Trigger when designing destructive actions, undo systems, confirmation dialogs, soft-delete recovery, draft-saving, transaction reversal, "are you sure?" patterns, or any flow where a wrong move costs the user time, data, money, or trust. Trigger when the user mentions "users keep deleting things," "we get support tickets about lost data," "is this dangerous?", or when reviewing destructive UI. Forgiveness is one of the central principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) and one of Nielsen's 10 heuristics ("user control and freedom").
    0 repo stars
  8. Errors Slips · concertonotes bundle
    Use this skill when designing to prevent or recover from execution errors — actions that don't match the user's intent. Trigger when designing critical action confirmations, distinct affordances for similar-purpose elements, recovery from wrong-button presses, "I didn't mean to do that" flows. Sub-aspect of `errors`; read that first.
    0 repo stars
  9. Control Locus · concertonotes bundle
    Apply locus of control — the design choice between making the system appear to act on the user's behalf (external locus) and making the user appear to direct the system (internal locus). Use when designing AI-assisted features, autocorrect/autocomplete behaviors, recommendation surfaces, automated workflows, and any feature where the system could either do things automatically or wait for user instruction. Internal locus produces higher engagement, learning, and satisfaction; external locus produces higher convenience but lower agency. The skill is choosing deliberately and explaining the choice in the UI.
    0 repo stars
  10. Feedback Loop · concertonotes bundle
    Use this skill whenever a user takes an action and the system must communicate that the action was received, is in progress, succeeded, or failed. Trigger when designing button states, form submission, file uploads, payment flows, real-time UI updates, loading states, error states, success confirmations, or any moment when the user is waiting for the system to do something. Trigger when the user mentions "feels broken," "doesn't seem to work," "users keep clicking again," or any symptom of feedback gaps. Feedback Loop is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) — and one of the principles whose absence most reliably damages a product's perceived quality.
    0 repo stars
  11. Errors Mistakes · concertonotes bundle
    Use this skill when designing to prevent errors of intention — wrong actions taken because the user's model of the situation was wrong. Trigger when designing for ambiguous information, novel situations, complex decisions, or contexts where users may proceed with confidence based on a wrong understanding. Sub-aspect of `errors`; read that first.
    0 repo stars
  12. Mapping Natural · concertonotes bundle
    Apply natural mapping — the strongest form of mapping, in which the spatial position, motion, or shape of a control directly corresponds to what it affects. Use when designing physical control panels, in-screen controls that affect specific regions of a UI, chart legends, multi-target remote controls, vehicle dashboards, or any situation where the user must connect "this control" to "that affected thing." A natural mapping is one a first-time user can predict without instruction. When the form factor allows it, natural mapping is essentially free correctness.
    0 repo stars
  13. Mapping Cultural · concertonotes bundle
    Apply cultural mapping — using shared conventions (icons, colors, gestures, metaphors) to convey what a control does when natural spatial mapping isn't available. Use when designing icon-based UIs, choosing colors for status indicators, picking gestures for touch interfaces, or selecting metaphors to make abstract operations concrete (the trash can, the gear, the magnifying glass). Cultural mappings are weaker than spatial ones — they require prior learning — but they're the workhorse of icon-driven interfaces. The risk is assuming a convention is universal when it's actually domain-specific.
    0 repo stars
  14. Expectation Effect · concertonotes bundle
    Apply the Expectation Effect — the principle that prior expectations measurably change a person's perception of a product or experience. Use when shaping the framing of new features, designing onboarding, choosing visual cues that signal premium vs. budget, or diagnosing why two functionally identical features feel different to users. Expectations are set by visual cues (premium materials, polished typography), language (precise, confident copy), social proof, price, and prior brand exposure. Setting expectations too high creates disappointment; too low and the product reads as mediocre. The skill is calibrating what to promise.
    0 repo stars
  15. Interaction Router · concertonotes bundle
    Use this skill whenever a design task involves what users *can do* and what happens when they do it — affordances, feedback, errors, undo, confirmation, target sizing, keyboard handling, modal vs. non-modal decisions, destructive actions, validation. Trigger when the user mentions buttons, forms, validation, error states, loading states, drag-and-drop, undo, confirmation dialogs, keyboard shortcuts, target sizes, "users keep deleting things," misclicks, or "should this be a popover or a dialog." Framework-agnostic. Routes the model to the right interaction principle in this plugin.
    0 repo stars
  16. Constraint Physical · concertonotes bundle
    Use this skill when designing structural constraints that prevent invalid actions through the shape, layout, or behavior of the design itself — paths (channels of motion), axes (rotary controls), barriers (blocks). Trigger when designing input controls, drag-and-drop affordances, modal dialogs, or hardware-style structural prevention. Sub-aspect of `constraint`; read that first.
    0 repo stars
  17. Affordance Signifiers · concertonotes bundle
    Use this skill when the design has interactive capability but users aren't *seeing* it — when the affordance is technically present but the signifier (the visible cue that tells users "you can do this") is missing or weak. Trigger when reviewing flat-design UIs where everything looks the same, when designing custom controls, when stakeholders ask "should this be more obvious?", or when picking signifier strength for primary vs. secondary actions. Sub-aspect of `affordance`; read that first.
    0 repo stars
  18. Fitts Law Screen Edges · concertonotes bundle
    Use this skill when designing for the edges and corners of the screen — where the cursor cannot overshoot, making them effectively infinite-sized targets along one axis. Trigger when designing global navigation, system menus, sticky headers, fixed sidebars, full-bleed CTAs, or anywhere you can put the most-frequent or hardest-to-find actions. Trigger when reviewing an app that has wasteful margins on every side and asks the user to aim for tiny targets in the middle. Sub-aspect of `fitts-law`; read that first if you haven't already.
    0 repo stars
  19. Fitts Law Touch Targets · concertonotes bundle
    Use this skill when designing for touch — phones, tablets, kiosks, in-car displays, smart-TV remotes, anything where the input is a finger or thumb rather than a precise pointer. Trigger when sizing buttons for mobile, debugging "users keep mistapping," designing a mobile bottom-nav, picking icon sizes for a phone toolbar, or reviewing whether a desktop UI is touch-friendly. Sub-aspect of `fitts-law`; read that first if you haven't already.
    0 repo stars
  20. Constraint Psychological · concertonotes bundle
    Use this skill when designing constraints that work through perception, expectation, and learned convention — symbols, conventions, mappings. Trigger when designing iconography, picking control conventions, or designing for behavioral predictability. Sub-aspect of `constraint`; read that first.
    0 repo stars
  21. Affordance False And Anti · concertonotes bundle
    Use this skill when designing or fixing controls that mislead users — elements that look interactive but aren't (false affordance), or controls that need to clearly communicate "you can't do that here" (anti-affordance, like disabled states). Trigger when reviewing UIs where users tap inert elements expecting response, when designing disabled states, when picking treatments for read-only fields, or when a "decorative" element is being mistaken for a button. Sub-aspect of `affordance`; read that first.
    0 repo stars
  22. Expectation Effect Priming · concertonotes bundle
    Apply expectation priming — deliberately shaping the prior context (brand, marketing, price, social proof, recommendations) that users bring to a product before they ever touch it. Use when planning a launch, choosing positioning copy, deciding pricing tier, designing the marketing surface, or framing a feature for first encounter. Pre-encounter priming is often more powerful than in-product polish, because it sets the lens through which the in-product experience will be interpreted. The skill is calibrating priming honestly enough to outlast the first session.
    0 repo stars
  23. Control Power Vs Simplicity · concertonotes bundle
    Apply layered control — designing interfaces that serve novice and expert users in the same product without forcing one audience into the other's interface. Use when building products that span experience levels (most consumer software, most professional tools used occasionally), choosing between "simple by default" and "powerful by default," or deciding what to expose vs. hide behind progressive disclosure. The skill is creating a default surface that suffices for novices and a depth surface that doesn't intimidate them but is fully present for experts.
    0 repo stars
  24. Expectation Effect Design Cues · concertonotes bundle
    Apply in-product expectation cues — typography, animation, spacing, copy tone, micro-interactions, and visual register that signal "this is the kind of product you're using" within seconds of opening it. Use when designing the first-screen experience, picking a typography system, deciding loading-state behavior, choosing animation timing, or polishing the surface details that telegraph product quality. Surface cues set expectations for the whole session and create halo effects (positive or negative) that color every later interaction. Small surface details have outsized impact on perceived overall quality.
    0 repo stars
  25. Fitts Law Pointer Acceleration · concertonotes bundle
    Use this skill when the question involves cursor speed, pointer acceleration curves, or interaction with input devices that vary in precision (mouse, trackpad, stylus, touchscreen, eye-tracking). Trigger when designing for varied input devices, building drag interactions, designing scrubbers / sliders / handles, or analyzing why a UI feels "fiddly." Sub-aspect of `fitts-law`; read that first if you haven't already.
    0 repo stars
  26. Feedback Loop States And Latency · concertonotes bundle
    Use this skill when designing the visible states an interactive element passes through (idle / pending / success / error) and matching feedback timing to the user's perceptual thresholds. Trigger when designing button states, form-submit flows, file-upload progress, loading screens, or any interaction whose response time is variable. Sub-aspect of `feedback-loop`; read that first.
    0 repo stars
  27. Forgiveness Undo And Soft Delete · concertonotes bundle
    Use this skill when designing reversibility — undo systems, soft delete, archive-with-recovery, version history, "Undo Send" patterns, and any mechanism that lets a user step back from an action they regret. Trigger when designing destructive actions you want to be safe rather than friction-heavy, when picking between confirmation dialogs and undo toasts, when defining recovery windows, or when planning version-history features. Sub-aspect of `forgiveness`; read that first.
    0 repo stars
  28. Feedback Loop Positive Vs Negative · concertonotes bundle
    Use this skill when designing system architecture or product mechanics that involve feedback loops at a higher level than UI state — recommendation engines, gamification, growth mechanics, engagement systems, or any system where one user action affects subsequent actions in compounding or stabilizing ways. Trigger when designing growth loops, retention features, or system dynamics; when reviewing a feature for unintended consequences; when discussing engagement vs. wellbeing tradeoffs. Sub-aspect of `feedback-loop`; read that first.
    0 repo stars
  29. Forgiveness Confirmation And Prevention · concertonotes bundle
    Use this skill when the user must commit to an irreversible or high-stakes action and reversibility isn't enough — confirmation dialogs, type-to-confirm patterns, password re-entry, two-step authentication for destructive actions, and structural prevention that makes the wrong action impossible. Trigger when designing destructive flows for genuinely-irreversible commitments, when reviewing confirmation fatigue, or when picking between a single confirm dialog and a multi-step verification. Sub-aspect of `forgiveness`; read that first.
    0 repo stars