Interaction Design

Designing how users communicate with the interface through gestures, feedback, and motion.

1. Core Gestures

Gestures should be intuitive and provide immediate visual response. Try interacting with these elements:

Scale & Tap

Scale up on hover,
scale down on click

Draggable

Drag

Free drag with
constraints

Swipe Action

Swipe Left
DELETE

Reveal actions
behind content

2. The Anatomy of a Micro-interaction

Every effective interaction follows a four-part structure (Dan Saffer's model):

1. Trigger

What starts it? (User click, system event)

2. Rules

What happens? (Logic, constraints)

3. Feedback

Visual/Audio confirmation.

4. Loops & Modes

Meta-rules (What if triggered twice?)

3. Feedback Principles

Users need to know that their action has been received. Good feedback connects the user's action to the system's result.

Click to simulate a network request with random success/failure states.

4. Input & Status Patterns

Communicating system status and handling user input errors gracefully is crucial for trust.

Real-time Validation

File Upload

Click to upload or drag and drop

SVG, PNG, JPG or GIF (max. 800x400px)

5. Interface Patterns

Everyday interactions like switching contexts or discovering information should be seamless and delightful.

Animated Tabs

Context Switching

Receive alerts about updates

Tooltips

Contextual Help
This is a helpful tooltip

Tooltips provide essential context without cluttering the interface.

6. Selection & Organization

Patterns for selecting, sorting, and organizing data.

Custom Select

Menu Interactions

Custom menus allow for branded transitions and layout control.

Drag & Reorder

Direct Manipulation
  • Research
  • Ideation
  • Prototyping
  • Testing

Hold and drag items to reorder the list.

7. Delight & Micro-interactions

Small moments of joy that can make your application feel more human.

Like Button

Immediate feedback

Notification

Visual cue + Animation

Copy Feedback

State transition

npm install framer-motion

8. Advanced Patterns & Empty States

Handling "waiting" and "nothingness" with purpose.

Skeleton Loading

Perceived Performance

Skeleton screens reduce friction by showing structure before data loads.

Accordion

Progressive Disclosure

Smooth height animations help users maintain context when content expands.

No results found

We couldn't find any projects matching "Dashboard". Try adjusting your filters.

PreviousLayout System
NextDesign Themes