interfaces-that-feel

Applies emotional resonance principles to UI copy, motion, and interaction design.

2.5k|358|Updated Mar 7, 2026
One-click install
npx skills add https://github.com/Owl-Listener/designer-skills --skill interfaces-that-feel
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: interfaces-that-feel
Source: https://github.com/Owl-Listener/designer-skills/tree/main/interaction-design/skills/interfaces-that-feel
Command: npx skills add https://github.com/Owl-Listener/designer-skills --skill interfaces-that-feel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Interfaces often pass usability tests but feel cold and mechanical to users. This Skill diagnoses technically correct but emotionally flat UIs and prescribes concrete changes at the copy, motion, and interaction layers so the product acknowledges how the person actually feels.

Core Features & Use Cases

  • Felt-State Translation Process: A four-step method that names the user's emotional state, finds a physical-world analogue, extracts behavioral properties (weight, resistance, rhythm), and maps them to interface layers like easing curves, delays, and copy tone.
  • Emotional Timing & Motion Guidance: Concrete rules for information weight, error recovery spacing (300–600ms), celebration arcs, easing semantics, spring physics, and animation durations (150–600ms).
  • Copy Voice by State: A reference table defining voice for loading, empty, user-error, system-error, success, and onboarding states.
  • Use Case: A settings flow tests fine in usability sessions but users describe it as cold. Run this Skill to audit each state, rewrite error copy so the system owns its failures, and retune transitions so confirmations feel warm rather than mechanical.

Quick Start

Review this screen flow and tell me where the interface ignores the user's emotional state, then prescribe copy and motion changes for each moment.

Frequently Asked Questions about interfaces-that-feel

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a UI feel more human and less mechanical?

Start by naming the emotional state the user is in at each moment, then find a physical-world analogue for that feeling and extract behavioral properties like weight, resistance, and rhythm. Map those properties to easing curves, delays, copy tone, and animation duration.

What animation duration should UI transitions use?

Use 150–300ms for direct UI responses and 400–600ms for transitions that carry meaning. Never animate longer than the user's patience for the task, and avoid linear easing for anything that touches human feeling.

How should error message copy be written for system failures?

System error copy must own the failure, apologize briefly, and offer a path forward without making the user feel responsible. User-caused errors should be clear, directive, blame-free, and give one specific next step.

When should I use this instead of an aesthetic-usability review?

Use this Skill when a design tests fine functionally but lands cold emotionally. For the polish-perception argument about visual aesthetics influencing perceived usability, use the aesthetic-usability skill in ui-design instead.

Does emotional motion design work with reduced-motion preferences?

Yes, but you must test with reduced-motion preferences enabled and reduce motion before adding it. Every animation needs a reason, and the emotional signal should survive even when color, imagery, and motion are stripped.