e:I[44709,["/ux-lab/_next/static/chunks/0ehjiuuxbbhq9.js","/ux-lab/_next/static/chunks/18yu1heezirx1.js"],"Gallery"] f:T2480,# Canon Working notes for UX Lab: core beliefs, principles, heuristics, and patterns. Human-reviewed. ## My design principles ### Structure clarity Grouping and hierarchy make the layout obvious: what belongs together, and what matters first. ### Progressive disclosure Show complexity only when this context needs it. Defer advanced or rarely used controls so the frequent path stays easy to learn and less error-prone. The [Progressive disclosure](/patterns/progressive-disclosure/index.html) demo keeps invite fields simple until Advanced is opened. — Jakob Nielsen (2006). “Progressive Disclosure.” Nielsen Norman Group. [nngroup.com](https://www.nngroup.com/articles/progressive-disclosure/). Early empirical support: Carroll, J. M., & Carrithers, C. (1984). “Training wheels in a user interface.” *Communications of the ACM*, 27(8), 800–806. [doi:10.1145/358198.358218](https://doi.org/10.1145/358198.358218). ### Confidence to act What’s shown is trustworthy; mistakes are easy to reverse. Users decide without hesitating. ### Workflow compatibility Existing tasks take equal or fewer steps than before. ### Value density Most useful outcome per space and time — signal, not clutter. ## Design principles Drawn mainly from Don Norman’s model of how people understand and operate everyday things.

Visibility

The user should be able to see the state of the system and the available actions. — Don Norman, *The Design of Everyday Things* (rev. ed. 2013). MIT Press.

Feedback

Every action should produce a noticeable response in time with the action. — Norman, *The Design of Everyday Things* (2013).

Affordances and signifiers

Affordances are possible actions; signifiers communicate them. — Norman, *The Design of Everyday Things* (2013). See also Gibson, J. J. (1979). *The Ecological Approach to Visual Perception*.

Mapping

Controls should correspond spatially or conceptually to their effects. — Norman, *The Design of Everyday Things* (2013).

Constraints

Limit what can be done so errors are harder. — Norman, *The Design of Everyday Things* (2013).

Consistency

Similar parts should look and behave similarly. — Norman, *The Design of Everyday Things* (2013).

Good design is as little design as possible

— Dieter Rams, “Ten Principles for Good Design” (c. 1970s). [Vitsœ](https://www.vitsoe.com/gb/about/good-design). ### Mapping Controls should correspond spatially or conceptually to their effects. Natural mapping places controls in the same layout as what they operate, so the relationship can be seen instead of memorized. — Don Norman, *The Design of Everyday Things* (rev. ed. 2013). [MIT Press](https://mitpress.mit.edu/9780262525671/the-design-of-everyday-things/). ### Affordances and signifiers Affordances are the actions an object makes possible. Signifiers are perceivable cues that communicate those actions, so people can see what to do instead of guessing. A classic case: a handle affords grasping and pulling; a flat plate affords pushing. When the hardware matches the motion, no label is needed. — Don Norman, *The Design of Everyday Things* (rev. ed. 2013). [MIT Press](https://mitpress.mit.edu/9780262525671/the-design-of-everyday-things/). The term *affordance* is from Gibson, J. J. (1979). *The Ecological Approach to Visual Perception*. Houghton Mifflin; Classic Edition, [Psychology Press / Routledge](https://www.routledge.com/The-Ecological-Approach-to-Visual-Perception-Classic-Edition/Gibson/p/book/9781848725782). ## Nielsen’s 10 usability heuristics Jakob Nielsen’s inspection heuristics. Full definitions: [NN/g](https://www.nngroup.com/articles/ten-usability-heuristics/). ### 1. Visibility of system status Keep users informed about what is going on, through timely feedback. ### 2. Match between system and the real world Speak the users’ language; follow real-world conventions. ### 3. User control and freedom Offer a clear “emergency exit” and undo for mistaken actions. ### 4. Consistency and standards Same words and actions mean the same thing; follow platform conventions. ### 5. Error prevention Prevent problems before they happen; confirm before costly commits. ### 6. Recognition rather than recall Make options and information visible instead of requiring memory. ### 7. Flexibility and efficiency of use Accelerators for experts without blocking newcomers. ### 8. Aesthetic and minimalist design Do not compete with needed information through irrelevant clutter. ### 9. Help users recognize, diagnose, and recover from errors Plain language, precise problem, constructive next step. ### 10. Help and documentation Easy to search, task-focused, concrete steps. — Jakob Nielsen (1994). “10 Usability Heuristics for User Interface Design.” Nielsen Norman Group. Originally Nielsen & Molich (1990), CHI ’90. ## Fitts's law Time to acquire a target rises with distance and falls with size. Frequent or primary actions should be large and close to where the pointer already is; rare or risky actions can stay smaller and farther away. — Paul M. Fitts (1954). “The information capacity of the human motor system in controlling the amplitude of movement.” *Journal of Experimental Psychology*, 47(6), 381–391. [doi:10.1037/h0055392](https://doi.org/10.1037/h0055392). ## Hick's law Time to choose among equally likely options rises with the number of choices (roughly with the log of *n*). Menus and pickers should keep the set small, or progressive, so the next action does not have to be hunted out of a long list. — W. E. Hick (1952). “On the rate of gain of information.” *Quarterly Journal of Experimental Psychology*, 4(1), 11–26. [doi:10.1080/17470215208416600](https://doi.org/10.1080/17470215208416600). Often called the Hick–Hyman law after Hyman, R. (1953). “Stimulus information as a determinant of reaction time.” *Journal of Experimental Psychology*, 45(3), 188–196. [doi:10.1037/h0056302](https://doi.org/10.1037/h0056302). ## Patterns in this lab ### Gallery staples | Pattern | Exploring | | --- | --- | | Toast with undo | Feedback and reversal | | Command palette | Expert accelerators | | Inline form validation | Field errors in context | | Empty state | First-run next action | | Skeleton loading | Waiting with layout stability | | Confirm dialog | Destructive confirm, cancel as default | ### Nielsen heuristics (dedicated demos) | Pattern | Heuristic | | --- | --- | | Visibility of system status | #1 | | Match the real world | #2 | | User control and freedom | #3 | | Consistency and standards | #4 | | Error prevention | #5 | | Recognition rather than recall | #6 | | Flexibility and efficiency | #7 | | Aesthetic and minimalist | #8 | | Error recovery | #9 | | Help and documentation | #10 | ### Norman (dedicated demos) | Pattern | Exploring | | --- | --- | | Natural mapping | Mapping | | Affordances and signifiers | Affordances and signifiers | ### Pointing (dedicated demos) | Pattern | Exploring | | --- | --- | | Fitts's law | Fitts's law | ### Choice (dedicated demos) | Pattern | Exploring | | --- | --- | | Hick's law | Hick's law | ### Disclosure (dedicated demos) | Pattern | Exploring | | --- | --- | | [Progressive disclosure](/patterns/progressive-disclosure/index.html) | [Progressive disclosure](#progressive-disclosure) | ## Upcoming Exploration - Patterns for filter/sort/search - Patterns for queue building (AND/OR) ## Similar Sites - https://ui-patterns.com/patterns - https://codemyui.com/ - https://uiverse.io/ ## References - Carroll, J. M., & Carrithers, C. (1984). [Training wheels in a user interface](https://doi.org/10.1145/358198.358218). *Communications of the ACM*, 27(8), 800–806. - Fitts, P. M. (1954). [The information capacity of the human motor system in controlling the amplitude of movement](https://doi.org/10.1037/h0055392). *Journal of Experimental Psychology*, 47(6), 381–391. - Gibson, J. J. (1979). [*The Ecological Approach to Visual Perception*](https://www.routledge.com/The-Ecological-Approach-to-Visual-Perception-Classic-Edition/Gibson/p/book/9781848725782). Houghton Mifflin; Classic Edition, Psychology Press. - Hick, W. E. (1952). [On the rate of gain of information](https://doi.org/10.1080/17470215208416600). *Quarterly Journal of Experimental Psychology*, 4(1), 11–26. - Hyman, R. (1953). [Stimulus information as a determinant of reaction time](https://doi.org/10.1037/h0056302). *Journal of Experimental Psychology*, 45(3), 188–196. - Nielsen, J. (1994). [10 Usability Heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/). Nielsen Norman Group. - Nielsen, J. (2006). [Progressive Disclosure](https://www.nngroup.com/articles/progressive-disclosure/). Nielsen Norman Group. - Norman, D. A. (2013). [*The Design of Everyday Things* (revised)](https://mitpress.mit.edu/9780262525671/the-design-of-everyday-things/). MIT Press. - Rams, D. Ten Principles for Good Design. [Vitsœ](https://www.vitsoe.com/gb/about/good-design). 4:["$","$Le",null,{"patterns":[{"slug":"toast-undo","title":"Toast with undo","description":"Ephemeral confirmation with a short window to reverse the action.","tags":["feedback","toast"],"category":"Feedback","createdAt":"2026-09-08","updatedAt":"2026-09-08","html":"/patterns/toast-undo/index.html","thumb":"/patterns/toast-undo/thumb.svg","canon":[{"anchor":"nielsen-3","label":"Nielsen #3 — User control and freedom","note":"The toast leaves the user in control by making a mistaken archive reversible for a short window."},{"anchor":"confidence-to-act","label":"Confidence to act","note":"Reversibility removes fear because the action can be tried without committing immediately."},{"anchor":"principle-feedback","label":"Feedback","note":"The toast confirms the action immediately while staying lightweight and temporary."}]},{"slug":"command-palette","title":"Command palette","description":"Keyboard-first search that jumps to actions without leaving the page.","tags":["navigation","keyboard"],"category":"Navigation","createdAt":"2026-09-07","updatedAt":"2026-09-07","html":"/patterns/command-palette/index.html","thumb":"/patterns/command-palette/thumb.svg","canon":[{"anchor":"nielsen-7","label":"Nielsen #7 — Flexibility and efficiency of use","note":"Search and keyboard shortcuts accelerate common actions without blocking pointer users."},{"anchor":"progressive-disclosure","label":"Progressive disclosure","note":"The palette keeps commands off the canvas until the user asks for them."},{"anchor":"value-density","label":"Value density","note":"One compact surface reaches many actions without permanent navigation chrome."},{"anchor":"workflow-compatibility","label":"Workflow compatibility","note":"Experts can jump directly to destinations instead of stepping through menus."}]},{"slug":"inline-validation","title":"Inline form validation","description":"Field-level errors as the user types, with a clear path to fix.","tags":["forms","errors"],"category":"Forms","createdAt":"2026-09-06","updatedAt":"2026-09-06","html":"/patterns/inline-validation/index.html","thumb":"/patterns/inline-validation/thumb.svg","canon":[{"anchor":"nielsen-9","label":"Nielsen #9 — Help users recognize, diagnose, and recover from errors","note":"The email field names the problem in place and shows how to fix it before submission."},{"anchor":"confidence-to-act","label":"Confidence to act","note":"Inline repair keeps the user confident because the next valid step is visible."},{"anchor":"principle-feedback","label":"Feedback","note":"Typing produces immediate validation feedback tied to the field that needs attention."}]},{"slug":"empty-state","title":"Empty state","description":"A first-run view that explains why the space is empty and what to do next.","tags":["onboarding","content"],"category":"Content","createdAt":"2026-09-05","updatedAt":"2026-09-05","html":"/patterns/empty-state/index.html","thumb":"/patterns/empty-state/thumb.svg","canon":[{"anchor":"nielsen-1","label":"Nielsen #1 — Visibility of system status","note":"The empty state explains why no projects appear and what status the user is in."},{"anchor":"structure-clarity","label":"Structure clarity","note":"Hierarchy separates the empty explanation from the primary next action."},{"anchor":"confidence-to-act","label":"Confidence to act","note":"Clear copy and a focused button make the first step feel safe and obvious."}]},{"slug":"skeleton-loading","title":"Skeleton loading","description":"Placeholder shapes that match the final layout while data loads.","tags":["loading","feedback"],"category":"Feedback","createdAt":"2026-09-04","updatedAt":"2026-09-04","html":"/patterns/skeleton-loading/index.html","thumb":"/patterns/skeleton-loading/thumb.svg","canon":[{"anchor":"nielsen-1","label":"Nielsen #1 — Visibility of system status","note":"The placeholders make waiting visible while the page fetches real content."},{"anchor":"structure-clarity","label":"Structure clarity","note":"Stable skeleton regions preserve the eventual hierarchy while data loads."},{"anchor":"confidence-to-act","label":"Confidence to act","note":"The loading shape reassures users that progress is underway."}]},{"slug":"confirm-dialog","title":"Confirm dialog","description":"A pause before a destructive action, with cancel as the safe default.","tags":["dialogs","destructive"],"category":"Dialogs","createdAt":"2026-09-03","updatedAt":"2026-09-03","html":"/patterns/confirm-dialog/index.html","thumb":"/patterns/confirm-dialog/thumb.svg","canon":[{"anchor":"nielsen-5","label":"Nielsen #5 — Error prevention","note":"The dialog interrupts a destructive delete before the costly action is committed."},{"anchor":"confidence-to-act","label":"Confidence to act","note":"Cancel is available as the safe path, so users can back out without penalty."},{"anchor":"principle-constraints","label":"Constraints","note":"The extra confirmation constrains a risky action to a deliberate choice."}]},{"slug":"visibility-system-status","title":"Visibility of system status","description":"Nielsen #1 — upload progress that keeps the user informed in real time.","tags":["nielsen","feedback","status"],"category":"Heuristics","createdAt":"2026-09-08","updatedAt":"2026-09-08","html":"/patterns/visibility-system-status/index.html","thumb":"/patterns/visibility-system-status/thumb.svg","canon":[{"anchor":"nielsen-1","label":"Nielsen #1 — Visibility of system status","note":"The upload progress bar and status text keep the user informed as work advances."},{"anchor":"confidence-to-act","label":"Confidence to act","note":"Visible progress builds trust that the upload is still moving."},{"anchor":"principle-visibility","label":"Visibility","note":"The current system state is exposed instead of hidden behind a spinner."},{"anchor":"principle-feedback","label":"Feedback","note":"Progress changes respond directly to the upload action."}]},{"slug":"match-real-world","title":"Match the real world","description":"Nielsen #2 — plain language versus jargon on the same booking form.","tags":["nielsen","language","forms"],"category":"Heuristics","createdAt":"2026-09-08","updatedAt":"2026-09-08","html":"/patterns/match-real-world/index.html","thumb":"/patterns/match-real-world/thumb.svg","canon":[{"anchor":"nielsen-2","label":"Nielsen #2 — Match between system and the real world","note":"The booking form uses customer language instead of internal operations jargon."},{"anchor":"structure-clarity","label":"Structure clarity","note":"Familiar labels make the form hierarchy easier to scan and understand."}]},{"slug":"user-control-freedom","title":"User control and freedom","description":"Nielsen #3 — cancel and back as emergency exits from a checkout wizard.","tags":["nielsen","navigation","control"],"category":"Heuristics","createdAt":"2026-09-08","updatedAt":"2026-09-08","html":"/patterns/user-control-freedom/index.html","thumb":"/patterns/user-control-freedom/thumb.svg","canon":[{"anchor":"nielsen-3","label":"Nielsen #3 — User control and freedom","note":"Back and cancel exits let the user leave the checkout path without losing orientation."},{"anchor":"confidence-to-act","label":"Confidence to act","note":"Obvious exits reduce hesitation because the current step is not a trap."},{"anchor":"workflow-compatibility","label":"Workflow compatibility","note":"Users can escape a mistaken flow without restarting from scratch."}]},{"slug":"consistency-standards","title":"Consistency and standards","description":"Nielsen #4 — same Save/Cancel treatment across panels, versus a confusing mismatch.","tags":["nielsen","consistency"],"category":"Heuristics","createdAt":"2026-09-08","updatedAt":"2026-09-08","html":"/patterns/consistency-standards/index.html","thumb":"/patterns/consistency-standards/thumb.svg","canon":[{"anchor":"nielsen-4","label":"Nielsen #4 — Consistency and standards","note":"Repeated Save and Cancel placement teaches one interaction model across panels."},{"anchor":"structure-clarity","label":"Structure clarity","note":"Consistent button hierarchy makes primary and secondary actions predictable."},{"anchor":"principle-consistency","label":"Consistency","note":"Similar controls use the same words, order, and behavior."},{"anchor":"workflow-compatibility","label":"Workflow compatibility","note":"The familiar pattern lets users move between panels without relearning controls."}]},{"slug":"error-prevention","title":"Error prevention","description":"Nielsen #5 — date constraints that block an impossible range before submit.","tags":["nielsen","forms","errors"],"category":"Heuristics","createdAt":"2026-09-08","updatedAt":"2026-09-08","html":"/patterns/error-prevention/index.html","thumb":"/patterns/error-prevention/thumb.svg","canon":[{"anchor":"nielsen-5","label":"Nielsen #5 — Error prevention","note":"The date picker blocks an impossible range before the user submits the form."},{"anchor":"confidence-to-act","label":"Confidence to act","note":"Disabled invalid choices make the valid next action clear."},{"anchor":"principle-constraints","label":"Constraints","note":"Date constraints narrow input to combinations the system can accept."}]},{"slug":"recognition-not-recall","title":"Recognition rather than recall","description":"Nielsen #6 — recent searches as chips so users recognize instead of remembering.","tags":["nielsen","search","memory"],"category":"Heuristics","createdAt":"2026-09-08","updatedAt":"2026-09-08","html":"/patterns/recognition-not-recall/index.html","thumb":"/patterns/recognition-not-recall/thumb.svg","canon":[{"anchor":"nielsen-6","label":"Nielsen #6 — Recognition rather than recall","note":"Recent search chips put past queries in view instead of asking users to remember them."},{"anchor":"structure-clarity","label":"Structure clarity","note":"Grouped chips clarify which options are suggested shortcuts."},{"anchor":"progressive-disclosure","label":"Progressive disclosure","note":"Suggestions appear when search is the task, not as permanent page clutter."},{"anchor":"value-density","label":"Value density","note":"Compact chips expose useful shortcuts in little space."}]},{"slug":"flexibility-efficiency","title":"Flexibility and efficiency","description":"Nielsen #7 — the same actions via buttons for novices and shortcuts for experts.","tags":["nielsen","keyboard","efficiency"],"category":"Heuristics","createdAt":"2026-09-08","updatedAt":"2026-09-08","html":"/patterns/flexibility-efficiency/index.html","thumb":"/patterns/flexibility-efficiency/thumb.svg","canon":[{"anchor":"nielsen-7","label":"Nielsen #7 — Flexibility and efficiency of use","note":"Buttons and keyboard shortcuts support both novice and expert paths to the same actions."},{"anchor":"workflow-compatibility","label":"Workflow compatibility","note":"Users can keep their preferred interaction style as speed needs change."},{"anchor":"progressive-disclosure","label":"Progressive disclosure","note":"Shortcut hints appear beside actions without replacing visible controls."},{"anchor":"value-density","label":"Value density","note":"One row carries labels, actions, and accelerators without extra screens."}]},{"slug":"aesthetic-minimalist","title":"Aesthetic and minimalist","description":"Nielsen #8 — strip promo clutter so the pay task stays visible.","tags":["nielsen","content","focus"],"category":"Heuristics","createdAt":"2026-09-08","updatedAt":"2026-09-08","html":"/patterns/aesthetic-minimalist/index.html","thumb":"/patterns/aesthetic-minimalist/thumb.svg","canon":[{"anchor":"nielsen-8","label":"Nielsen #8 — Aesthetic and minimalist design","note":"Removing promo clutter lets the payment task stay visible and central."},{"anchor":"value-density","label":"Value density","note":"The remaining content earns its space by serving the primary payment decision."},{"anchor":"structure-clarity","label":"Structure clarity","note":"The primary task wins the hierarchy when competing elements are stripped away."},{"anchor":"principle-rams","label":"Good design is as little design as possible","note":"The demo shows how less visual design can make the necessary action stronger."}]},{"slug":"error-recovery","title":"Error recovery","description":"Nielsen #9 — a declined payment explained in plain language with clear next steps.","tags":["nielsen","errors","recovery"],"category":"Heuristics","createdAt":"2026-09-08","updatedAt":"2026-09-08","html":"/patterns/error-recovery/index.html","thumb":"/patterns/error-recovery/thumb.svg","canon":[{"anchor":"nielsen-9","label":"Nielsen #9 — Help users recognize, diagnose, and recover from errors","note":"The declined payment message explains the issue plainly and offers concrete next steps."},{"anchor":"confidence-to-act","label":"Confidence to act","note":"Actionable recovery options help the user continue instead of abandoning the flow."}]},{"slug":"help-documentation","title":"Help and documentation","description":"Nielsen #10 — searchable, in-context help with concrete steps beside a field.","tags":["nielsen","help","docs"],"category":"Heuristics","createdAt":"2026-09-08","updatedAt":"2026-09-08","html":"/patterns/help-documentation/index.html","thumb":"/patterns/help-documentation/thumb.svg","canon":[{"anchor":"nielsen-10","label":"Nielsen #10 — Help and documentation","note":"Searchable help beside the field gives concrete steps without leaving the task."},{"anchor":"progressive-disclosure","label":"Progressive disclosure","note":"Help stays available on demand instead of occupying the form by default."},{"anchor":"workflow-compatibility","label":"Workflow compatibility","note":"In-context documentation supports the current task without forcing a detour."}]},{"slug":"natural-mapping","title":"Natural mapping","description":"Burner knobs laid out like the cooktop so each control maps to its effect.","tags":["norman","mapping"],"category":"Principles","createdAt":"2026-09-09","updatedAt":"2026-09-09","html":"/patterns/natural-mapping/index.html","thumb":"/patterns/natural-mapping/thumb.svg","canon":[{"anchor":"mapping","label":"Mapping","note":"The burner controls mirror the cooktop layout so cause and effect can be seen."},{"anchor":"structure-clarity","label":"Structure clarity","note":"Spatial grouping makes each control's target obvious before interaction."}]},{"slug":"affordances-signifiers","title":"Affordances and signifiers","description":"A pull handle versus a push plate so the hardware itself communicates the action.","tags":["norman","affordance"],"category":"Principles","createdAt":"2026-09-09","updatedAt":"2026-09-09","html":"/patterns/affordances-signifiers/index.html","thumb":"/patterns/affordances-signifiers/thumb.svg","canon":[{"anchor":"affordances-and-signifiers","label":"Affordances and signifiers","note":"The pull handle and push plate communicate their intended actions through form."},{"anchor":"structure-clarity","label":"Structure clarity","note":"Distinct hardware cues make the available action legible at a glance."}]},{"slug":"fitts-law","title":"Fitts's law","description":"Hit a large nearby Save versus a tiny distant one to feel how size and distance affect pointing.","tags":["fitts","pointing"],"category":"Principles","createdAt":"2026-09-10","updatedAt":"2026-09-10","html":"/patterns/fitts-law/index.html","thumb":"/patterns/fitts-law/thumb.svg","canon":[{"anchor":"fitts-s-law","label":"Fitts's law","note":"The large nearby Save button is faster to hit than the tiny distant target."},{"anchor":"value-density","label":"Value density","note":"Space is allocated to make the primary pointer action efficient."},{"anchor":"workflow-compatibility","label":"Workflow compatibility","note":"A bigger, closer frequent action fits fast repeated work."}]},{"slug":"hicks-law","title":"Hick's law","description":"Pick PDF from three formats versus a long list to feel how extra options slow the choice.","tags":["hick","choice"],"category":"Principles","createdAt":"2026-09-11","updatedAt":"2026-09-11","html":"/patterns/hicks-law/index.html","thumb":"/patterns/hicks-law/thumb.svg","canon":[{"anchor":"hick-s-law","label":"Hick's law","note":"The short format list reduces choice time compared with a long menu."},{"anchor":"progressive-disclosure","label":"Progressive disclosure","note":"Keeping options staged prevents the user from confronting unnecessary choices at once."},{"anchor":"value-density","label":"Value density","note":"A smaller visible set makes each option earn attention."}]},{"slug":"progressive-disclosure","title":"Progressive disclosure","description":"Keep the usual invite path simple and reveal expiry and password only when Advanced is opened.","tags":["disclosure","forms","complexity"],"category":"Forms","createdAt":"2026-09-12","updatedAt":"2026-09-12","html":"/patterns/progressive-disclosure/index.html","thumb":"/patterns/progressive-disclosure/thumb.svg","canon":[{"anchor":"progressive-disclosure","label":"Progressive disclosure","note":"Advanced share options stay hidden until requested, so the usual invite path stays simple."},{"anchor":"value-density","label":"Value density","note":"Rare controls do not occupy the first screen, so the frequent action stays easy to find."}],"isNew":true}],"canonMarkdown":"$f"}]

Progressive disclosureNEW

Hick's law

Fitts's law

Affordances and signifiers

Natural mapping

Aesthetic and minimalist

Consistency and standards

Error prevention

Error recovery

Flexibility and efficiency

Help and documentation

Match the real world

Recognition rather than recall

Toast with undo

User control and freedom

Visibility of system status

Command palette

Inline form validation

Empty state

Skeleton loading

Confirm dialog