Microinteractions là gì? | Phần 2: Bí quyết giúp trải nghiệm kĩ thuật số hấp dẫn và dễ dàng hơn

Trong phần đầu tiên của bài viết, chúng ta đã cùng nghiên cứu các định nghĩa và phân loại Microinteractions, cũng như lý do tại sao chúng cần thiết cho UX của bạn. Bài viết này, chúng ta tiếp tục cùng xem các ví dụ về microinteractions trong việc mang đến tương tác hiệu quả. 

Bài viết cũng sẽ giải thích cách nhà thiết kế cải thiện UX và thử nghiệm microinteractions. Hi vọng rằng đây sẽ là nguồn tài liệu cần thiết để giúp bạn thuyết phục sếp hoặc nhóm thiết kế của bạn (và thậm chí là chính bạn) về tính linh hoạt của microinteractions, đây sẽ là yếu tố luôn thay đổi để mang đến thiết kế trải nghiệm tương tác phong phú.

Microinteractions cho thấy rằng việc tập trung vào các chi tiết là nguyên tắc chính để mang lại hiệu quả mạnh mẽ. Các chi tiết ấn tượng, hữu ích và khó quên làm cho ứng dụng của bạn nổi bật so với nhiều sản phẩm khác trên thị trường.

Microinteractions tạo ra những khoảnh khắc thú vị. Đây là cơ hội để gắn kết với người dùng trong suốt quá trình tương tác. Một hành động kéo và thả cũng là ví dụ điển hình cho một khoảnh khắc thú vị. Chúng ta cùng bắt đầu khám phá nhé!


Lợi ích của các microinteractions trong giao diện

1. Hoạt ảnh giữa các trang

bởi Anton Skvortsov cho Norde

Micro-animation (hoạt ảnh tinh tế) giúp giao diện chuyển đổi mượt mà giữa các trạng thái và cải thiện UX cho ứng dụng của bạn. Người dùng sẽ có được cái nhìn rõ nét hơn về trạng thái trước và hiện tại. Ngoài ra, các micro-animation thoát khỏi hình thức chung của ứng dụng để tập trung vào các chi tiết cần thiết.


2. Infinite Scrolling (cuộn vô hạn) kết hợp với ảnh động


Micro-animation trong ứng dụng Polarsteps là một cách tuyệt vời để người dùng quan sát tiến trình của thanh cuộn. Người dùng sẽ nhận thấy sự kết nối giữa hành động của họ và thanh cuộn nội dung. Cá nhân hóa và chỉ số là cách hoàn hảo để tìm kiếm ảnh hoặc hồ sơ vào một ngày cụ thể.


3. Tải lên hoặc tải xuống thông qua Status Bar

Sử dụng micro-animation để thông báo về trạng thái tải/đang tải. Trong ví dụ này, micro-animation cũng cho thấy có bao nhiêu megabyte đã được tải xuống. Thanh tiến trình được diễn hoạt nhằm tăng thêm thú vị cho hành động nhàm chán này.


4. Thông báo

Micro-animation cho phép người dùng liên kết với sản phẩm và tương tác với ứng dụng nhanh hơn. Chúng hiển thị những thay đổi thực tế một cách thân thiện với người dùng.


5. Menu kéo xuống

Hành động này để giúp người dùng cập nhật nội dung, và thường được sử dụng như điểm nổi bật trong thiết kế UX thông qua micro-animation độc đáo. Sử dụng hoạt ảnh đầy màu sắc để thông báo cho người dùng rằng trang đang tải, đồng thời hiển thị khi quá trình tải xuống hoàn tất.


6. Kêu gọi hành động đáp ứng

Micro-animation khuyến khích người dùng hành động theo lời kêu gọi hành động (CTA) của bạn. Đây cũng là yếu tố quan trọng để người dùng tương tác thường xuyên hơn với giao diện.


7. Thiết kế chuyển động làm cho biểu mẫu trở nên thú vị

bởi Clay Walte

Micro-animation cải thiện quá trình nhàm chán khi điền thông tin vào các biểu mẫu bằng các yếu tố tương tác vui nhộn. Trải nghiệm thân thiện khiến người dùng không ngần ngại điền vào toàn bộ biểu mẫu ngay cả khi họ cần phải email nhiều lần.


8. Cách điệu hóa hoạt ảnh Anchor Text

bởi Mary Lou

Hoạt ảnh Anchor Text mang đến cho bạn phương pháp thiết kế UX sáng tạo. Những hiệu ứng rõ ràng, đặc biệt phù hợp với các giao diện tối giản.



9. Nút chuyển đổi bật/tắt

bởi Mo

Micro-animation có thể cải thiện các yếu tố nhàm chán như nút chuyển đổi bật/tắt. Với hoạt ảnh dừng khi ứng dụng tắt, người dùng ngay lập tức nhận được phản hồi về sự tương tác của họ.


10. Cử chỉ vuốt

Một trong những hành động phổ biến nhất của micro-animation là cử chỉ vuốt nội dung. Micro-animation biến một cử chỉ vuốt quen thuộc thành một giao diện độc đáo, trong khi người dùng vẫn xem nội dung trong một luồng liên tục và duy nhất.


11. Làm nổi bật những thay đổi

bởi Ramotion

Với micro-animation, người dùng nhận được phản hồi ngay lập tức với hành động của họ từ giao diện. Khi nhấn nút, từng thành phần của giao diện sẽ phản ứng mượt mà và mỗi khối thiết kế chuyển sang trạng thái mới.


Quy trình kiểm tra microinteraction

Nếu như có ai đó khuyên bạn đừng bận tâm đến việc kiểm tra các microinteractions thì đó thực sự là một lời khuyên tệ.

Mặc dù microinteractions cần thiết để tạo các tương tác thú vị cho bất kỳ ứng dụng hoặc thiết bị nào. Nhưng việc cải thiện và tinh chỉnh chúng thông qua các bài kiểm tra và đầu vào của người dùng là vô cùng quan trọng. Sự khác biệt giữa kiểm tra luồng người dùng và cấu trúc khác xa so với việc kiểm tra ý tưởng.

Thực hiện theo phương pháp nghiên cứu được gọi là vòng phản hồi khởi động tinh gọn: Xây dựng > Đo lường > Tìm hiểu. Xây dựng sự tương tác để kiểm tra nó. Đo lường thiết kế với nhiều phương pháp định lượng và định tính. Tìm hiểu các phân tích về những phát hiện đó. Sau đó lặp lại. Sử dụng nghiên cứu để xác nhận quyết định của bạn và đảm bảo rằng microinteraction  được liên kết với nhu cầu của người dùng cuối.

Công sức và chi phí để thiết lập và chạy một phiên kiểm tra thường rất cao. Vì vậy, microinteraction thường được gộp chung với các mục khác.

1. Quy trình kiểm tra microinteractions

Sử dụng quy trình được mô tả dưới đây làm điểm bắt đầu để kiểm tra các microinteraction.

1. Trước hết, hãy hỏi người dùng những gì họ mong muốn đạt thông qua việc sử dụng microinteraction. Kiểm tra xem họ có thể cần phải học bất cứ điều gì trước khi sử dụng microinteraction này. Đặc biệt đối với những người dùng chưa bao giờ sử dụng bất cứ thứ gì tương tự trước đây.

2. Cho phép họ sử dụng microinteraction mà không cần sự trợ giúp của bạn. Thu thập dữ liệu định lượng trong thời gian thực hoặc ngay sau đó.

3. Theo dõi người dùng thực hiện các bước microinteraction. Xem xét những mô tả của người dùng về các lựa chọn họ đã thực hiện. Cần lưu ý đến các microinteraction chưa rõ ràng khiến người dùng nhầm lẫn.

4. Thu thập dữ liệu nào họ muốn microinteraction ghi nhớ về họ.

5. Kết thúc bằng cách yêu cầu người dùng trình bày một yếu tố cần khắc phục trong microinteraction này.

Quá trình này cho phép bạn tìm hiểu và xác định bất kỳ vấn đề nào với microinteraction. Nó xác định các mục tiêu và mong muốn chung. Bạn cần lặp lại quá trình này ít nhất hai lần, với hai nhóm người dùng. Ngoài ra, xem xét các phản hồi của người dùng và phân tích phát hiện giữa các đơn vị để sửa đổi microinteraction hoàn thiện hơn.

2. Cách sử dụng dữ liệu để nghiên cứu

Đây là một số dữ liệu định lượng bạn có thể kiểm tra:

· Tỷ lệ hoàn thành;

· Thời gian của microinteraction;

· Thời lượng của các bước cụ thể;

· Số bước;

· Số lần nhấp/ chạm/ lựa chọn;

· Số lượng lỗi của hệ thống;

· Số lượng lỗi của con người.

Bạn sẽ cần điều chỉnh microinteraction và kiểm tra lại tất cả để xem có cần cải thiện thêm không. Bài học quan trọng nhất về việc sử dụng dữ liệu trong quy trình thiết kế là đây: nó không thể thiết kế giúp bạn. Nhưng dữ liệu nghiên cứu là yếu tố để giải thích và thông báo thông tin. Tuy nhiên dữ liệu hiếm có thể cho bạn biết lý do tại sao một cái gì đó đang xảy ra.

Tại sao bạn không sử dụng đến dữ liệu? Ví dụ: hầu hết quảng cáo trực tuyến không được nhấp. Trong trường hợp bạn nhận được tỷ lệ nhấp 0,5%, nó vẫn là dấu hiệu tốt. Vì vậy, chúng ta có nên tắt tất cả các quảng cáo trực tuyến, vì chúng rất hiếm khi được sử dụng? 99,9% người dùng sẽ đồng ý (0,1% còn lại là các đại lý quảng cáo). Nhưng loại bỏ quảng cáo có nghĩa là đang “bóp nghẹt” trang web, vì bạn sẽ không có tiền để vận hành nó. Bạn không thể chỉ nhìn vào dữ liệu để quyết định vì trên thực tế dữ liệu không bao gồm những trường hợp đặc biệt. Doanh nghiệp, môi trường tổ chức và cơ sở người dùng không chỉ là những con số đơn giản trong các bảng Excel. Dữ liệu nên là một đầu vào cho việc ra quyết định của bạn. Nhưng đừng chỉ dựa vào dữ liệu để đưa ra quyết định.


Tầm quan trọng của microinteraction cho UX sản phẩm của bạn

Các microinteraction giúp cải thiện UX sản phẩm và giúp người dùng ghi nhớ thương hiệu của bạn. Nó làm cho trải nghiệm kỹ thuật số không chỉ dễ dàng, mà còn hấp dẫn. Quan tâm về các chi tiết nhỏ chứng tỏ rằng bạn đã thực sự hiểu về người dùng và nhu cầu của họ. Và đây chính xác là những gì họ muốn cảm nhận. Thông qua các
microinteraction, bạn có thể cải thiện cuộc sống của mọi người. Và trên hết hãy luôn đi đầu trong ngành công nghiệp phát triển web đang phát triển ngày càng nhanh.

Biên tập: Thao Lee

Tác giả: Sergey Gladkiy


Cùng tác giả

#Tag

hoạt ảnh tinh tế micro-animation micro-interactions tương tác tinh tế tương tác vi mô ux design

iDesign Must-try

Cheryl Vo: ‘Trước khi thiết kế, mình luôn hỏi tại sao?’
Cheryl Vo: ‘Trước khi thiết kế, mình luôn hỏi tại sao?’
Tính khái niệm trong Design Decisions (tạm dịch: Quyết định thiết kế) của một thiết kế hay là hành trình những cảm xúc Cheryl Vo sẽ được mở khóa từ…
Tư duy thiết kế và những tính chất trong hệ thống
Tư duy thiết kế và những tính chất trong hệ thống
Một cách cơ bản hơn để đối phó với tính chất tạm thời của công việc là xem xét lại bản thân chúng ta với tư cách là nhà thiết…
Gamification trong thiết kế và những điều bạn cần biết! (Phần 2)
Gamification trong thiết kế và những điều bạn cần biết! (Phần 2)
Ở phần 1, chúng ta đã có bức tranh tổng thể về Gamification (Game hóa) mà ngày nay không ít doanh nghiệp sử dụng, giúp thu hút nhiều người dùng…
Gamification trong thiết kế và những điều bạn cần biết! (Phần 1)
Gamification trong thiết kế và những điều bạn cần biết! (Phần 1)
Hầu hết tất cả chúng ta đều đã nghe trò chơi điện tử có thể gây nghiện và chúng ta không nên chơi game quá nhiều. Nhưng liệu trong chúng…
5 yếu tố làm nên tính khả dụng (Usability)
5 yếu tố làm nên tính khả dụng (Usability)
Usability (tính khả dụng) là một nhân tố quan trọng trong thiết kế trải nghiệm người dùng. Theo như tiêu chuẩn của ISO 9241-11 định nghĩa Usability như sau: Usability…
/viết một tay/ Những lầm tưởng về kỳ vọng của người dùng trong thiết kế trải nghiệm
/viết một tay/ Những lầm tưởng về kỳ vọng của người dùng trong thiết kế trải nghiệm
Dưới đây là một trong số hàng trăm thông báo mà bạn có thể nhận được mỗi ngày. Quan sát một phần lớn các sản phẩm digital hiện nay, hầu…