UI/UX Best Practices — Hover & Clickable Feedback

Purpose: Ensure consistent, accessible, and pleasant micro-interactions by requiring visible hover feedback for clickable elements and recommending smooth, respectful animations.

When to use:

• This skill should be used when the user asks about UI feedback, hover states, clickable affordances, interactive micro-interactions, or requests guidance on animation, motion, or accessibility for interactive components.

Guiding rule

• Every clickable element must give visual feedback when hovered. Smoothly animated feedback is preferred, but always respect user motion preferences and accessibility needs.

Recommendations

• Provide a clear, perceivable hover state for buttons, links, controls, cards, and other interactive elements.
• Prefer GPU-accelerated properties (transform, opacity) for animation to preserve performance and avoid layout thrashing.
• Use short durations (100–200ms), with ~150ms as a practical default. Use gentle easing (e.g., cubic-bezier(.2,.9,.2,1)).
• Respect prefers-reduced-motion and disable or simplify animations for users who opt out.
• Ensure hover feedback is not the sole cue; include focus-visible and active/pressed states for keyboard and touch users.

Practical examples