Mục lục

Interaction & Feedback: Làm UI trở nên sống động

Sự khác biệt giữa một trang web tĩnh và một ứng dụng mượt mà nằm ở phản hồi (Feedback). Cách thiết kế Hover, Active, Loading và Micro-interactions hiệu quả.

Một giao diện không có phản hồi giống như nói chuyện với một bức tường. Mỗi khi người dùng thực hiện một hành động, hệ thống phải trả lời.

1. Trạng thái Tương tác (Stateful UI)

Một component giao diện chuyên nghiệp phải có đủ ít nhất 5 trạng thái:

  1. Default (Mặc định): Trạng thái ban đầu.
  2. Hover (Di chuột): Báo cho người dùng biết "Tôi có thể click được".
  3. Active/Pressed (Đang nhấn): Xác nhận hành động click.
  4. Disabled (Bị vô hiệu): Tại sao không thể click? (Nên đi kèm tooltip giải thích).
  5. Focus (Tiếp cận): Dành cho người dùng dùng phím Tab.
tsx:
// ✅ Cấu trúc nút bấm đầy đủ phản hồi
<button className="
  bg-blue-600 px-4 py-2 text-white transition-all
  hover:bg-blue-700 active:scale-95
  disabled:opacity-50 disabled:cursor-not-allowed
  focus:ring-2 focus:ring-blue-300 outline-none
">
  Submit
</button>

2. Phản hồi tức thì (Instant Feedback)

Khi người dùng nhấn nút "Lưu", đừng để họ đợi 2 giây API rồi mới hiện thông báo.

  • Loading state: Hiện Spinner hoặc thay đổi text nút thành "Saving...".
  • Optimistic UI: (Nâng cao) Giả định thành công và cập nhật UI ngay lập tức, nếu lỗi thì mới rollback.

3. Micro-interactions: Những chi tiết nhỏ làm nên đẳng cấp

Micro-interactions là những chuyển động nhỏ giúp hướng dẫn người dùng.

  • Example: Một chiếc checkbox nảy nhẹ khi được chọn. Một icon "Like" trái tim đập nhẹ.
  • Lợi ích: Tạo cảm giác hài lòng (Delight) và làm ứng dụng cảm thấy "Human" hơn.

Sử dụng thư viện như Framer Motion để làm việc này rất dễ dàng:

tsx:
<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  Click me
</motion.button>

4. Error & Success Communication

Đừng chỉ dùng màu sắc (Đỏ/Xanh) để báo lỗi/thành công.

  • Accessibility: Có người dùng bị mù màu. Luôn đi kèm icon hoặc văn bản rõ ràng.
  • Hành động tiếp theo: Lỗi thì phải nói cho họ biết CÁCH SỬA. Đừng chỉ nói "Có lỗi xảy ra".

5. Skeleton vs Spinner

  • Spinner: Dùng cho tác vụ ngắn (< 1s) hoặc trong các nút bấm.
  • Skeleton: Dùng cho việc tải layout lớn (Page load). Skeleton giúp người dùng hình dung trước cấu trúc dữ liệu sắp hiện ra, làm giảm cảm giác đợi chờ (Perceived Performance).

Kết luận

Hãy biến UI của bạn thành một cuộc đối thoại mượt mà. Phản hồi tốt không chỉ giúp ứng dụng dễ dùng hơn mà còn tạo dựng sự tin tưởng từ phía người dùng.

Bài trước
HOC (Higher Order Components): Khi nào vẫn nên dùng?
Bài tiếp theo
Headless UI & Render Props: Tách biệt Logic và Giao diện
Quảng cáo
md • horizontal