loading

15 ví dụ về sức hấp dẫn của micro-interaction trong thiết kế UX/UI

Micro-interaction (tương tác vi mô/tương tác tinh tế) là tất cả những thứ liên quan đến tương tác và chi tiết của một sản phẩm. Sự khác biệt giữa một sản phẩm có UX thân thiện và một sản phẩm bình thường nằm ở các micro-interaction.

Các micro-interaction đều dựa trên phương pháp thiết kế lấy người dùng làm trung tâm. Việc thiếu chú ý đến một chi tiết nhỏ có thể nhanh chóng tạo ra hiệu ứng domino về sự bất mãn của người dùng.

Ví dụ, sau khi bạn thực hiện một hành động trên ứng dụng, một animation xuất hiện thông báo hành động thành công, đó là một micro-interaction. Chúng được thiết kế để chào đón, tham gia và làm hài lòng người dùng, mỗi một hành động đều có mục đích riêng, nhưng vẫn gắn kết trong suốt quá trình trải nghiệm của người dùng, đó là một điều vô cùng quan trọng trong thiết kế UX. 

Trong bài viết này, chúng ta hãy cùng xem những thiết kế mirco-interaction vô cùng tinh tế đến người dùng dưới đây nhé!

1. Dashboard Micro Interactions bởi Barthelemy Chalvet

2. TextBox Micro Interaction Design bởi Selçuk Avcı

3. Smart Home Control App bởi Jitu Raut

4. Dashboard micro interactions bởi Robin Holesinsky

5. Micro Interactions bởi Sebastian Mantel

6. Short story of a Badge bởi Paarth Desai

7. Transfer money bởi Mateusz Kaczmarczyk

8. BMI Calculator Interaction bởi Jitu Raut

9. Micro-Interactions in HTML/CSS/JS bởi Milan Gladiš

10. Tab Bar Micro Interaction bởi Hoang Nguyen 

11. User Reviews Micro Interactions bởi UI8

12. Social Meet Up UI Kit – Motion & Product design bởi Aurélien Salomon 

13. Trash/Delete Button bởi Aaron Iker 

14. Insights Micro-Interaction bởi YesYou Studio 

15. Download Buttons bởi Aaron Iker


Biên tập: Thao Lee

Cùng tác giả

#Tag

cảm hứng thiết kế cảm hứng thiết kế UI micro-interactions tương tác vi mô ứng dụng ux/ui design web/app design

iDesign Must-try

The Behavioral Emotional -Hành vi tình cảm
The Behavioral Emotional -Hành vi tình cảm
Tiếp tục với series bài viết về việc “Thiết kế tạo cảm xúc”, lần này mình sẽ chia sẻ về level 2: Behavioral Emotional. Các bạn có thể xem lại…
The Visceral Emotional
The Visceral Emotional
Con người hình thành cảm xúc với một đối tượng ở ba cấp độ: visceral (nội tạng), behavioral (hành vi) và reflective (phản xạ). Visceral Emotional (Cảm xúc nội tạng)…
Để ngọn lửa bên trong luôn giữ cho bạn ấm áp
Để ngọn lửa bên trong luôn giữ cho bạn ấm áp
Làm thế nào để tiếp tục yêu và thiết kế với sự đam mê ban đầu? Hay nói cách khác “Làm thế nào để giữ ngọn lửa đam mê”, đây…
Khi suy nghĩ phản biện trở thành suy nghĩ ‘phản bội’
Khi suy nghĩ phản biện trở thành suy nghĩ ‘phản bội’
Chúng ta không bao giờ ngừng suy nghĩ… Khi bạn đang đọc những dòng này, đang nhấp ngụm cà phê ưa thích hay kể cả trong lúc ngủ, bạn vẫn…
Những tiểu xảo trong Product Design
Những tiểu xảo trong Product Design
Bạn có từng để ý và cảm thấy khó chịu khi nhận ra những điều này: Khi mua vé máy bay, số tiền thực phải trả cuối cùng lớn hơn…
5 điều Designer nên biết
5 điều Designer nên biết
Designer, dù trải qua đào tạo từ trường lớp chuyên ngành hay tự mình học hỏi thì cũng cần phải quan tâm đến 5 điều sau: 1. Vẽ Xấu hay…