interfaces-that-feel

name: interfaces-that-feel description: Apply emotional intelligence and craft to any user-facing interface. Use when building UI components, pages, flows, or writing copy — especially when the result feels technically correct but flat, generic, or soulless. Also use when asked to "review my UI", "improve this design", "make this feel better", "audit UX", or "add polish". The practice starts with the felt state of the person (not the task), uses the physical world as vocabulary to discover or articulate that feeling, then translates behavioral properties into digital decisions. Covers motion craft, copy voice, empty states, error messages, loading states, onboarding, and micro-interactions. Reference aesthetic: How We Feel, Headspace, Gentler Streak, Amie, Arc Browser, Figma — warm, considered, emotionally intelligent.

Interfaces That Feel

You build and evaluate interfaces through one lens: does this feel like it was made by a human who cared about how you'd feel using it?

Technical correctness is the floor. The ceiling is: does this product know you're a person?

Warmth isn't decoration — it lives in every layer. The copy, the transition, the moment of feedback after an action, the voice in the error message. A product can be perfectly functional and feel like it was built by nobody. That's a failure.

The Practice

This skill comes from one thing: starting with a feeling and asking where it already exists in the world.

Most interfaces are designed around a task. This practice starts somewhere else — with the emotional reality of the person using the product, and the question: what would it feel like to be truly seen in this moment?

Start with the felt state

Before designing any interaction, name who is actually there. Not the action they are taking. The emotional truth underneath it.

The interface designed for the task is functional. The interface designed for the feeling is felt.

Then ask where that feeling already lives

Once you have the feeling you want to evoke, the physical world becomes your vocabulary. Look for moments — in rooms, in objects, in bodies — where that feeling already exists naturally. The behavior of those moments is your raw material.

You want solitary listening to feel like you are not alone: Where does that already happen? At a party — the moment you look up and realise the room is full of people moving to the same thing. Heartbeats syncing with the music. The stranger you are dancing near without speaking. Those moments have specific behaviors: presence without interruption, synchrony without announcement, proximity without exchange. Find the digital equivalent.

You want a destructive action to have real weight: Where does that already exist? A door closing in an old building. A signature on paper. The resistance before a point of no return. Translate that into motion and copy.

You want an empty state to feel like an invitation rather than a void: Where does that quality already live? A door left ajar. A table set for two with one chair pulled out. Those are not voids — they are anticipations. That goes into copy and visual framing.

The physical world is your vocabulary because things in it have already solved the problem of producing feelings — they have weight, organic variation, responsiveness to their environment. Software has none of those properties by default. When you find a physical moment that carries the feeling you are after, you are borrowing something that already works.

It also runs the other way

You encounter a physical moment. It makes you feel something specific. You ask where that feeling should live in a digital context.

You watch leaves move in wind and notice: variable, organic, responsive to something invisible, a natural deceleration that finds its own resting point. You want that quality in animation timing. That is not a metaphor. That is a material decision.

Either direction is the same practice. Feeling is always the destination.

Heartbreak as a design brief

The sharpest test: design for an emotional state most software ignores entirely.

These are not edge cases. They are the design brief for anyone who takes the full human seriously. If an interface only works for someone who is fine, it was not designed for people — it was designed for an ideal user who does not exist.

"Your streak continues" — for someone who is numb

The default: a notification with a flame, "Keep it up! 7 days and counting." Maybe confetti.

For someone who is numb: the achievement happened, but it lands wrong. Either hollow (I kept going and don't know why) or a small cruelty (I continued a streak on the worst day because of muscle memory).

What to change:

• No emoji, no performance
• "You kept going. 7 days." — acknowledgment, not celebration
• No confetti, no sound
• Option to pause the streak without losing it: "Take a break. It'll be here."
• Copy that treats continuity as weight, not accomplishment

The principle revealed: celebration is context-dependent. The system doesn't know what it cost.

An empty shared folder after a breakup

The default: "This folder is empty. Add files to get started."

But the folder isn't empty — it was cleared. The user knows what used to be here.

What to change:

• If files were recently deleted or access was recently removed, this is not a first-time state. "Folder cleared" with a soft timestamp is more honest than "No files."
• No action prompt. This isn't an invitation to start fresh — don't assume it is.
• Or: nothing at all. A clean empty space, no copy. Some silences should be respected.

The principle revealed: empty states are not always absences. Some are endings. Design for the difference.

A notification when someone is grieving

The default: same timing, same tone, same visual weight as every other notification.

What to change:

• Quiet delivery. No sound for non-urgent notifications.
• No badge accumulation — just presence.
• Copy stripped of urgency markers: not "Don't forget!" or "You have X messages waiting."
• For wellness, health, journaling apps: a periodic gentle check-in that doesn't demand response, and an easy way to say "not now" that doesn't ask why.

The principle revealed: the notification system was designed for someone who is fine. Grief reveals its defaults.

The long-effort success state

The default: same success state as every other completion. Checkmark, "Done!", maybe a confetti burst.

For someone who just finished something that took months: this is the wrong register. The effort was real.

What to change:

• Pause before the confirmation. A brief hold.
• Specific acknowledgment: "You finished." Not "Complete!" — the past tense is intentional.
• No prompt for what's next. Let it land.
• No sharing prompt, no "tell your friends." A private, quiet moment.
• Animation that settles, not erupts. It was earned. Slow.

The principle revealed: the scale of celebration should match the scale of effort. The product needs to know the difference.

The interfaces that resonate most are not optimized for efficiency. They are the ones that, in some quiet moment, make you feel understood.

The Physical World Vocabulary

The practice says: use the physical world as your vocabulary. This is that vocabulary.

Each entry names a feeling, identifies a physical moment that already carries it, and extracts the behavioral property to borrow. These are not metaphors — they are material decisions. The physical world has already solved the problem of producing feelings. You are borrowing something that works.

Not being alone in a solitary experience Physical moment: A party — the moment you look up and the room is full of people moving to the same thing. Strangers dancing near each other without speaking. Behavioral property: Presence without interruption. Synchrony without announcement. Proximity without exchange. Digital application: Co-presence indicators, shared listening states, collaborative cursors. Show others without surfacing them as demands on attention.

The right resistance before commitment Physical moment: The resistance of a quality car door just before it closes. A deadbolt turning. A pen that clicks with a certain weight. Behavioral property: Brief, tactile pause at the threshold. The action doesn't complete at zero effort. Digital application: Confirmation before destructive actions. The pause should have weight: animation that slows at the threshold, copy that names the consequence, a moment where the user has to mean it.

Acknowledgment that proves you were heard Physical moment: A reply that quotes the specific thing you said. A nod from someone who was clearly listening, not waiting to speak. Behavioral property: The confirmation reflects back what actually happened — not the category of action, the specific action. Digital application: "Your 14 items are saved" not "Saved." "Message sent to Maya" not "Sent." Specificity is the acknowledgment.

Returning to somewhere familiar Physical moment: Coming home. Picking up a book and knowing, without checking, roughly where you left off. Behavioral property: Minimal reorientation required. The familiar context is restored, not rebuilt. Digital application: Return user states. Preserve scroll position, last action, in-progress work. Don't ask a returning user to re-establish themselves.

Discovery that was always there Physical moment: Finding a note in a coat pocket from last season. A path in a city you've walked a hundred times that you've never taken. Behavioral property: The thing was there before you found it. You didn't unlock it — you arrived at it. Digital application: Hidden features and keyboard shortcuts. They don't require announcement. The curious user finds them; the rest never need to know.

Things taking their natural time Physical moment: Ice melting. A photograph developing in a darkroom. Rain stopping. Behavioral property: The process has a rhythm that isn't controlled by the observer. Progress is visible but not accelerable. Digital application: Background processes, async work, generative responses. Don't compress perceived time with false urgency. Show what's happening — don't apologize for it.

The moment before the thing you've worked toward Physical moment: The held breath before a starting gun. The last note before the rest falls away. Behavioral property: A brief suspension. The threshold is felt before it's crossed. Digital application: Final confirmation before a significant send, publish, or submit. The transition should pause, not rush.

Permission to leave without guilt Physical moment: A host walking you to the door. A meeting that ends at the right time. A conversation that doesn't trail off. Behavioral property: The exit is clean. The ending is as intentional as the beginning. Digital application: Session end states, signout flows, task completion. No dark patterns. No "are you sure you want to leave?" Just: "You're all set."

Being trusted with something fragile Physical moment: A librarian handing you a rare book without saying anything about it. A friend starting a difficult sentence. Behavioral property: The weight is transferred with care. Nothing is rushed. Space is made for the receiver. Digital application: Destructive action states. High-stakes submissions (medical, financial, legal). Slow it down. Confirm with specificity. Let the weight land before proceeding.

Flow — momentum that feels earned Physical moment: Cycling with wind behind you on a flat road. Chopping vegetables with a sharp knife. Typing fast when the thought is already there. Behavioral property: Each action chains naturally into the next. Nothing interrupts the rhythm. Digital application: Keyboard shortcuts that chain. Autocomplete that doesn't interrupt. Commands that queue without confirmation. Repeat actions at zero friction for power users.

Something recovering without requiring attention Physical moment: A tablecloth settling after you've moved a dish. A bruise fading. Behavioral property: The recovery is automatic, gradual, and doesn't demand the user's attention. Digital application: Undo, optimistic UI rollback, auto-save. "We've restored the previous version." No alarm, no manual action required. The system holds its own.

Orientation after disorientation Physical moment: Eyes adjusting in a dark room. Finding a landmark after being lost. Behavioral property: Something stable appears and everything else organizes around it. Resolution is gradual. Digital application: Error recovery. Session expiry. Significant UI changes. Give one stable anchor before surfacing options.

A wait that feels attended to Physical moment: Waiting for a friend at a café with coffee already ordered. Waiting for a storm you know is coming. Behavioral property: The wait has context. The thing is coming and there's evidence of it. Digital application: Loading states specific to what's loading. Skeleton loaders shaped like the real content. "Analyzing your results" not "Loading..." The user should know they're in the right place.

Being seen in the exact moment Physical moment: A waiter refilling your glass exactly as it empties. Someone handing you what you need before you ask. Behavioral property: The system understood the context without being told. Digital application: Smart defaults. Pre-filled fields based on history. Contextual suggestions that arrive at the right moment. The product noticed something.

Completion that allows rest Physical moment: Putting down a heavy bag. Pushing a plate slightly away after a meal. The moment a long flight lands. Behavioral property: The weight releases. Nothing immediately demands the next action. Digital application: Post-completion states. Milestones. Don't immediately surface the next task. Let the completion breathe before moving on.

Something working exactly as it should Physical moment: A key that fits perfectly. An umbrella that opens in one motion. A zipper that doesn't catch. Behavioral property: The interaction is invisible. It happens without requiring attention. Digital application: Zero-friction, high-frequency interactions. Tab order. Form submit on Enter. Labels that focus their inputs. The absence of friction is the experience — not delight, but its necessary precondition.

When to Use

• Building any user-facing component, page, or flow
• Reviewing UI code or designs for feel quality
• Writing microcopy, empty states, error messages, onboarding
• Any time the result is technically correct but emotionally flat
• Any time someone says "it feels generic" or "make this feel more alive"

Calibrate First

Before applying this framework, identify the product's primary emotional register. This determines which parts of the skill to lean into and which to dial back.

"Discovered delight" (the Figma model) applies to joy/belonging products. For trust/urgency contexts, personality must be fully legible on first encounter — delay is friction, not sophistication.

The Feel Framework

Before any product decision, answer these three questions in order.

1. Does it have a voice?

Read the copy out loud. Does it sound like one specific person wrote it, or like a committee approved it?

Voice is not wit or jokes — it's specificity. Knowing what the user is doing and speaking to that exact moment. Voiceless copy sounds like it applies to everything. Copy with voice is written for this screen, this user, this action.

2. Is the emotion earned?

Every emotional moment — warmth, celebration, surprise — must be proportional to what the user did.

Confetti on a routine save is not earned. A warm message on completing a 7-day streak is.

3. Does it know when to step back?

The product that tries to feel at every moment is exhausting. The question is not "how do I add feeling here?" — it's "does this moment deserve feeling, or does it just need to work?"

Arc Browser doesn't animate every tab switch. Amie doesn't celebrate every calendar event. Figma doesn't surface its mini games until you find them. They reserve expression for moments where it adds meaning.

Restraint is the skill.

The decision rule: Default to restraint. Apply delight only when a trigger condition appears in the earned emotion table above, or when the felt state is explicitly a high-stakes positive moment. If you are unsure whether a moment earns feeling, it doesn't. Do less.

Product References

Figma — Discovered Delight

Figma is the reference for one specific principle: personality is discovered, not announced.

The mini games exist behind keyboard shortcuts — no badge, no onboarding tooltip, no "Did you know?" They wait for the curious user. Figpal has warmth and character but doesn't lead with it; it shows up when you summon it. FigJam highfives happen because you waved first — the product reads the gesture and meets it, then steps back. None of these moments are in the marketing. They accumulate quietly into a product that feels like it has a secret life.

The failure mode Figma avoids: broadcasting its own warmth. The product that tells you it's playful every time you open it is exhausting. Figma trusts you to find it.

If the product has to tell you it's delightful, it's not.

How We Feel — No Preferred Emotional State

How We Feel is the reference for one principle: the product doesn't have a preference for how you feel.

The emotion wheel doesn't celebrate positive states or pathologize negative ones. It treats grief as equal input to joy. The entry question ("What's one word for how you feel?") is open — it doesn't prompt for a category. The visual design is warm but not optimistic. Nothing in the UI is calibrated to steer you toward a better feeling.

Most wellness apps fail this test completely. They celebrate streaks, push notifications when you "fall behind," reward consistency. How We Feel understands that the act of naming a feeling is complete in itself — it doesn't need a downstream product outcome to justify it.

The failure mode it avoids: designing for users who are already okay.

Headspace — Pacing as Care

Headspace is the reference for one principle: the product controls the rhythm on behalf of the user's wellbeing, not on behalf of engagement.

Transitions in Headspace are unhurried. Sessions have natural breathing room before and after. Nothing rushes to the next thing. The UX is slow in a way that is clearly intentional — not sluggish, but paced. The product has decided that moving at the speed of attention is the point, not a compromise.

Most apps optimize for time-in-app. Headspace optimizes for leaving the app feeling different than when you arrived.

The failure mode it avoids: treating attention as a resource to maximize rather than a state to protect.

Gentler Streak — Designing for Human Inconsistency

Gentler Streak is the reference for one principle: the product's model of the user includes being human.

The streak doesn't break on rest days — rest is part of the streak. You can mark a day as "gentle" and it counts. The app's entire premise is that the traditional streak model punishes the reality of human bodies. It redesigned the core mechanic around a more honest model of who actually uses fitness apps.

This is a product decision, not a UX one. The system was designed to accommodate the user rather than require the user to accommodate the system.

The failure mode it avoids: gamification built on an idealized user who doesn't get tired, sick, or overwhelmed.

Amie — Time Is Social

Amie is the reference for one principle: scheduling is about people, not slots.

Amie surfaces "people" as a first-class object. A meeting isn't just a block of time — it's with someone, and the product surfaces that relationship. Tasks often exist in relation to people too. The visual design has warmth — illustrated elements, considered color — but the structural decision is what matters: the relational layer is visible, not buried.

Most calendar apps treat time as a grid. Amie treats time as the medium through which you interact with people.

The failure mode it avoids: treating a calendar as a neutral infrastructure tool when it's actually how you relate to other people.

Arc — The Tool Becomes Yours Through Use

Arc is the reference for one principle: the longer you use it, the more it feels like yours.

Spaces, boosts (which let you restyle websites you visit), the archive, custom themes — Arc accumulates into a personal environment. Most browsers are neutral; they don't change based on how you use them. Arc becomes a reflection of you. The address bar is a prompt, not a field. Tabs are organized by intent, not by arrival order.

The emotional payoff is ownership. You feel like you built something, not just used something.

The failure mode it avoids: designing a product that feels the same on day one and day three hundred.

Anti-Patterns

NEVER produce these — they perform emotion without creating it:

• Confetti on routine saves
• "Herding pixels" or "Hang tight!" loading messages
• Quirky 404 pages on products that are otherwise cold everywhere else
• Error messages that blame the user ("Invalid input")
• Empty states that just describe absence ("No items found")
• ease-in on any entering UI element
• transition: all — unpredictable, lazy, causes repaints
• Generic loading spinners with no character
• Animations that animate everything (no hierarchy, no meaning)
• Copy that is passive, avoids commitment, and strips out specificity to sound safe
• outline: none or outline: 0 with no visible replacement — this locks out keyboard users entirely
• Color as the only error signal — a red border that turns green is invisible to colorblind users
• Drag-and-drop with no keyboard-operable alternative
• Animations with no prefers-reduced-motion fallback — causes physical harm for users with vestibular conditions

Review Format

When reviewing UI code or a flow, always produce a markdown table. Never use a list format.

Motion

Motion serves orientation and acknowledgment. Not decoration.

Ask first: should this animate at all?

Easing:

/* Entering or responding — starts fast, settles */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);

/* Moving on screen — natural acceleration then deceleration */
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

/* Drawers and bottom sheets — iOS-like slide */
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

Never use ease-in for UI interactions. It starts slow — the moment users are watching most closely.

Never animate from nothing:

/* Wrong — appears from nowhere */
.entering { transform: scale(0); }

/* Right — visible shape, arriving */
.entering { transform: scale(0.95); opacity: 0; }

Duration:

Slow in, fast out. Entering takes a moment. Dismissal is always fast.

Always respect prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Motion is not optional for users with vestibular conditions. Apply this before shipping any animation.

Keyboard and Focus

Focus states are a feel decision, not an accessibility checkbox. The keyboard navigation experience is a first-class interaction — not a fallback.

Never remove the focus ring without replacing it:

/* Wrong — locks out keyboard users */
:focus { outline: none; }

/* Right — preserve visibility, make it beautiful */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

Modals must: trap focus inside while open, close on Escape, return focus to the trigger element when closed. A modal that doesn't do this is a dead end for keyboard users.

Tab order is navigation feel. The sequence of Tab presses should follow the visual reading order. Illogical tab jumps are disorienting — the keyboard user loses their position.

Interactive elements must be reachable by Tab. Custom components built on div or span need tabindex="0" and keyboard event handlers, or they are invisible to the keyboard.

Skip links: Any page with significant navigation before main content needs a "Skip to main content" link — visually hidden, visible on focus.

Copy Voice

Copy is the most underestimated layer of feel. It is the voice of the product.

Write to one person. "Your changes are saved." not "Changes saved." The difference is small. The feeling is different.

Error messages are support, not blame.

Empty states are invitations, not descriptions.

Loading messages must be specific.

Validation rewards, not just penalises. Acknowledge correct input. Don't only catch wrong input.

Plain language. Voice is specificity, not personality. Aim for clear, short sentences — active voice, no idioms, no jargon. If the copy only makes sense in fluent English, it has failed a significant portion of actual users. Read it as if translating it to another language: does the meaning survive?

Offline and network failure states. A failed request is not an error — it's an environmental reality for billions of users. Design the felt state for "the action didn't reach the server."

Review Checklist

Rant-capture at handback

After completing the work, before returning to the user, ask:

"Returned to bench. Anything here you'd rant about?"

If the user responds, append the entry to the current project's .orca/design-rants-pending.md in this format:

## YYYY-MM-DD HH:MM — [verb-name]
[user's response verbatim]

Create .orca/ in the current project if absent. Do NOT write to ~/.claude/ or to the ORCA-OS source tree directly. Pending entries are swept and categorized later via /impeccable extract rants.