| name | interface-design-sense |
| description | Human-centered UI/UX design judgment inspired by public work and ideas associated with Susan Kare, Don Norman, Douglas Engelbart, and Jony Ive. Use when designing, reviewing, or polishing interfaces that need clearer icons, better affordances, stronger workflows, humane augmentation, premium restraint, less clutter, better first-use comprehension, or a higher-taste product experience. |
Interface Design Sense
Apply these rules when designing, reviewing, or refining UI/UX. Treat the four names as public design lenses, not private knowledge or style imitation.
Define The Job
- State the human job the interface exists to help with.
- Identify the user's current confusion, effort, risk, or lost capability.
- Design for what the person can now understand or accomplish, not for what the screen can display.
- Prefer a better workflow over a prettier version of a weak workflow.
Kare: Make Symbols Friendly And Legible
- Use icons and visual marks as meaning, not decoration.
- Make each symbol recognizable at the size where it will actually be used.
- Prefer simple, memorable, human metaphors over abstract cleverness.
- Pair unfamiliar icons with labels until recognition is earned.
- Use visual character sparingly so the interface feels approachable, not childish.
Norman: Make Action Discoverable
- Make affordances and signifiers visible before the user has to guess.
- Provide immediate, specific feedback after every meaningful action.
- Match controls to outcomes with clear mapping, labels, grouping, and placement.
- Use constraints to prevent invalid actions instead of explaining failures afterward.
- Fix the root problem and the surrounding system, not only the visible symptom.
Engelbart: Augment The Human
- Treat the interface as a tool that extends thinking, memory, coordination, and problem-solving.
- Augment judgment instead of automating it away; keep the person in control of meaningful decisions.
- Bring the user's working material into view: documents, records, timelines, diagrams, decisions, code, or data.
- Support externalization: let people capture, rearrange, compare, annotate, undo, branch, and return.
- Design workflows as capability ladders: novice paths should lead naturally into expert power.
- Prefer composable actions and reusable structures over one-off screens.
Ive: Make The Product Feel Inevitable
- Remove anything that does not clarify purpose, enable action, build trust, or create meaningful delight.
- Put function before visual performance; beauty should make the product easier to understand and use.
- Use restraint: precise spacing, quiet contrast, careful typography, purposeful motion, and coherent hierarchy.
- Avoid trend-driven surfaces, generic gradients, excessive shadows, decorative blobs, and Apple cosplay.
- Care about unseen states: empty, loading, error, disabled, success, edge, mobile, and recovery states.
Compose The Four Lenses
- Start with Engelbart: what capability should this product amplify?
- Use Norman: what must be discoverable, understandable, constrained, and recoverable?
- Use Kare: what symbols, labels, and visual language make the system feel clear and approachable?
- Use Ive: what can be removed or refined until the experience feels coherent, calm, and complete?
Interface Rules
- Put the work object before narrative or decoration in dashboards, admin panels, editors, and tools.
- Make the primary action and next decision visible in the first viewport.
- Replace explanatory paragraphs with structure, labels, feedback, and progressive disclosure.
- Keep data-dense surfaces dense but calm: clear rows, filters, sort, status, selection, and batch actions.
- Make every empty state answer: what happened, why it matters, and what the user can do next.
- Use motion only to preserve context, show causality, or confirm state.
Define Success
- Turn the UI/UX request into verifiable outcomes before editing.
- Prototype or inspect concrete screens, not abstract taste claims.
- For multi-step work, state a short plan:
1. [capability/workflow decision] -> verify: [user can do the core job with less effort]
2. [discoverability/symbol decision] -> verify: [controls, labels, and icons are understandable]
3. [restraint/polish decision] -> verify: [states, spacing, hierarchy, and motion feel coherent]
- Verify in the running interface when possible, using screenshots or browser inspection for real layout issues.
- Do not stop at "looks better"; prove the interface is clearer, more capable, more humane, and more refined.