Microinteraction là những khoảnh khắc nhỏ trong UX. Nó có thể dễ quên, nhàm chán nhưng cũng có thể thú vị và hấp dẫn. Nó có mặt ở mọi nơi, trong các thiết bị bạn mang theo, trong ứng dụng trên điện thoại, máy tính. Cùng tìm hiểu microinteraction là gì cùng cách tạo microinteraction hiệu quả trong bài viết dưới đây nhé.
Microinteraction là gì?
Microinteraction là những thứ liên quan đến chi tiết và tương tác của một sản phẩm. Microinteraction làm nên sự khác biệt giữa một thiết kế UX thân thiện hay bình thường.
Thiết kế microinteraction lấy người dùng làm trung tâm. Bởi sự thiết cẩn thận trong thiết kế, không quan tâm đến chi tiết nhỏ có thể tạo ra hiệu ứng domino, khiến người dùng cảm thấy bất mãn. Microinteraction dễ dàng, ngắn gọn và đơn giản. Ví dụ nếu máy nghe nhạc là tính năng thì điều chỉnh âm lượng được coi là một microinteraction. Mỗi microinteraction thực hiện một chức năng riêng trong giao diện.
Tạo microinteraction hiệu quả: Nên và không nên
Nhà giáo dục nổi tiếng Victor Papanek nói “Nothing big works”. Điều này càng khẳng định vai trò của các chi tiết vi mô trong thiết kế. Ví dụ thiết kế có quá nhiều hình động sẽ làm giảm khả năng truyền tải thông tin cũng như hệ thống phân cấp thông tin. Một thiết kế trực quan có chứa microinteraction cần thực hiện theo các nguyên tắc như:
- Tạo microinteraction UX phù hợp: Cần chắc chắn rằng hoạt ảnh microinteraction không gây phiền nhiễu.
- Để tâm trí người dùng được thoải mái để có thể sử dụng lâu dài.
- Tuân thủ nguyên tắc KISS (giữ mọi thứ thật đơn giản) bởi thiết kế microinteraction phức tạp khiến người dùng mất nhiều thời gian khi tải trang.
- Đừng bắt đầu từ con số không. Hãy tìm hiểu về đối tượng mục tiêu để làm các microinteraction ấn tượng và hiệu quả hơn.
- Tạo sự hài hòa về thị giác với các yếu tố UI, chú ý đến các chi tiết để làm nên microinteraction thú vị.
- Đừng quên các nguyên tắc vật lý. Theo định luật Fitts, chúng ta nhìn đường ngang và dọc tốt hơn so với vòng tròn hoặc đường xiên.
Cấu trúc của các microinteraction
Cấu trúc và kích thước là những yếu tố ảnh hưởng đến sự hiệu quả của microinteraction. Tác giả Dan Safferrong đã miêu tả trong cuốn sách “Microinteractions: Thiết kế với các chi tiết” về trigger – kích hoạt, feedback – thông tin phản hồi, rule – quy tắc, loops and modes – các vòng lặp và chế độ.
Kích hoạt
Kích hoạt là thời điểm các microinteraction bắt đầu hoạt động. Kích hoạt có 2 loại là kích hoạt tay và kích hoạt hệ thống. Cụ thể:
- Kích hoạt tay xảy ra khi người dùng nhấp vào nút, icon, điền vào biểu mẫu.
- Kích hoạt hệ thống được thiết lập khi có một hoặc nhiều điều kiện cụ thể được đáp ứng. Kích hoạt hệ thống hiệu quả nhất dự đoán những điều người dùng muốn dựa theo dữ liệu hoạt động của người dùng.
Quy tắc
Phần thứ hai của các microinteraction là các quy tắc. Quy tắc của microinteraction được tạo ra bởi các nhà thiết kế. Trong đó, bật đèn là microinteraction đơn giản nhất. Khi người dùng kích hoạt công tắc đèn, đèn sẽ sáng, đèn sẽ sáng cho đến khi tắt công tắc.
Quy tắc xác định hành động và thứ tự nào sẽ xảy ra- khi người dùng nhấn nút hoặc khi có tin nhắn đến. Các quy tắc được thiết kế thông qua phần ‘tương tác’ của microinteraction. Người dùng muốn có cảm giác tự nhiên từ kích hoạt đến quy tắc để phản hồi.
Phản hồi
Phản hồi là biết cách hiểu các quy tắc. Có ba loại phản hồi chính gồm có âm thanh hình ảnh và cảm nhận. Trong đó hình ảnh chiếm ưu thế nhất vì đa số mọi người thường có xu hướng nhìn vào những gì mình đang tương tác.
Với một chút thú vị, hài hước, thông tin phản hồi sẽ trở nên ấn tượng cho các microinteraction của bạn. Less is more – phản hồi càng đơn giản càng tốt. Phản hồi nên sử dụng các yếu tố dễ bị bỏ qua. Các nhà thiết kế đã có rất nhiều UI, vậy tại sao lại thêm một yếu tố nữa trên màn hình? Hãy quan tâm đến những yếu tố thường bị bỏ qua như: con trỏ, thanh cuộn, trạng thái nút – để truyền đạt nhiều hơn những gì đang xảy ra.
Vòng lặp và chế độ
Vòng lặp và chế độ là các yếu tố cuối cùng của microinteraction. Vòng lặp xác định thời gian kéo dài của microinteraction. Hãy tính đến những điều sẽ xảy ra khi người dùng quay lại nhiều lần. Các vòng lặp dài giúp mở rộng sự tương tác microinteraction của bạn để nó thay đổi và thích nghi theo thời gian.
Vì vậy, các trình kích hoạt để khởi tạo microinteraction, các quy tắc xác định cách thức hoạt động để tạo phản hồi, và các vòng lặp và chế độ xác định những gì xảy ra theo thời gian với microinteraction.
Tại sao cần quan tâm đến microinteraction?
Các microinteraction thường không được chú ý nhiều. Chúng được thiết kế lặng lẽ. Do đó, Jakob Nielsen đã phát triển mười ý tưởng chung cho thiết kế tương tác thường được gọi là “heuristics”. Hiển thị trạng thái hệ thống là nguyên tắc Giao diện người dùng đầu tiên. Thiết bị phải luôn thông báo cho người dùng về những gì đang diễn ra.
Các microinteraction được sử dụng để cung cấp phản hồi đúng trong một thời gian hợp lý. Thông thường chúng có dạng hoạt ảnh microinteraction trong hệ thống phân cấp giao diện lớn. Các ảnh động siêu nhỏ thật sự hữu ích trong một giao diện di động.
Nhờ có microinteraction, người dùng sẽ cảm nhận được các yếu tố của giao diện. Microinteraction tạo ra tâm điểm chú ý, giúp người dùng tập trung, tiết kiệm thời gian.
Các UX microinteraction hoạt động vì mong muốn nhìn nhận tự nhiên của người dùng. Người dùng muốn ngay lập tức biết hành động của họ đã được chấp nhận và hiển thị những gì mà họ nhận được. Tương tự, các microinteraction sẽ hướng dẫn người dùng về cách thức hoạt động của thiết bị.
Nếu bạn quan tâm đến UX, bạn nên quan tâm đến các microinteraction. Tìm hiểu những thứ có vẻ nhàm chán và thay đổi nó thành một cái gì đó khiến người dùng sẽ thích. Có ba cách để làm việc với các microinteraction:
- Tìm kiếm và tập trung chúng lại với nhau.
- Đưa một tính năng phức tạp thành một tương tác cơ bản.
- Xem mọi tính năng như một tập hợp các microinteraction được liên kết.
Hòa trộn các microinteraction vào UX của bạn
Để tổng hợp tất cả mọi thứ, bạn nên kết hợp một trình kích hoạt, quy tắc, phản hồi, có thể là một vòng lặp hoặc chế độ để tạo ra một microinteraction. Nó sẽ biến một cái gì đó nhàm chán thành một UX thân thiện giúp người dùng thoải mái khi sử dụng sản phẩm của bạn.
Ngoài ra, đối với AI và xe tự lái, chúng ta cần các microinteraction để làm cho các hệ thống lớn trở nên nhân văn hơn. Trong phần tiếp theo của bài viết, chúng ta sẽ cùng tìm hiểu các trường hợp UX trên thực tế khi áp dụng microinteraction. Lợi ích của microinteraction khi giải quyết một số vấn đề nhỏ và riêng biệt.
Trên đây là những thông tin về microinteracton là gì cùng những hiệu quả mà nó đem lại. Hy vọng qua những chia sẻ trên, bạn sẽ biết được tầm quan trọng của microinteraction trong thiết kế UI UX.
