Improve UX with delightful Microinteractions

Cách đây khá lâu, thời điểm smartphone chưa thịnh hành, ở trung tâm thành phố New York có một buổi biểu diễn rất lớn thu hút rất nhiều khán giả đến lắng nghe và tận hưởng cảm giác không gian âm nhạc tĩnh lặng nhẹ nhàng đó, họ sẵn sàng chi đến cả trăm dollars. Khi đang biểu diễn chợt có tiếng chuông vang lên, đám đông bắt đầu giận dữ, hỗn loạn, họ truy lùng la hét và thậm chí dừng hết toàn bộ dàn nhạc lại. Tờ New York Times hôm sau đưa tin, có 1 người đàn ông mới hôm trước được công ty cấp cho một chiếc iphone thay thế chiếc blackberry ông ta đang sử dụng. Dù trước buổi diễn ông ta đã chọn chế độ im lặng nhưng có một điều ông ta không biết là chiếc điện thoại vẫn báo thức ngay trong chế độ im lặng. Vì vậy khi chuông báo lên ông ta còn không biết đó là chiếc điện thoại của mình, đến khi phát thiện thì quá muộn: buổi diễn đã bị huỷ bỏ.

Điều này đã làm dấy lên tranh cãi rất nhiều sau đó, liệu có nên tắt tiếng tất cả mọi thứ khi ở chế độ im lặng. Bất kỳ ai cũng có lý lẽ riêng, ví dụ tối buổi tối họ chuyển chế độ im lặng đi kèm tắt báo thức, họ có thể sẽ ngủ quên vào sáng hôm sau.

Vậy, “Swich to silent mode” chính là microinteraction.

- Trích từ sách "Microinteractions: Designing with Details" của tác giả Dan Saffer

1. Microinteraction là gì?

“A microinteraction is any single task-based engagement with a device.” - Carrie Cousin

Microinteraction là những trải nghiệm nhỏ bên trong một sản phẩm hoặc một vùng nào đó trên website chỉ diễn ra khi user thực hiện một tương tác bất kỳ. Nó có thể nhàm chán và dễ quên, hoặc cũng có thể rất thú vị và hấp dẫn với user.

Microinteraction có thể là một phần của sản phẩm hoặc là tính năng chính của sản phẩm đó. Ví dụ app để xem thời tiết, hoặc app để thay đổi đơn vị đo lường, khối lượng. Hoặc khi ta kéo xuống cuối trang thì hộp popup nhỏ nhảy ra xin email hoặc quảng cáo deal giảm giá tới tay bạn. 

Các tương tác nhỏ thường được designer tận dụng ví dụ sau khi user di chuột hờ trên một nút hoặc mục nào đó, kéo cuộn trang hay click vào đâu đó. Hầu như trên tất cả các ứng dụng xung quanh chúng ta đều tập hợp rất nhiều microinteraction. 

(Nguồn Pinterest)

Ví dụ đầu tiên có thể thấy đó là "pull to refresh" trên thiết bị di động. Khi user giữ và kéo màn hình xuống sẽ xuất hiện hiệu ứng loading thể hiện sẽ load dữ liệu mới nhất.

Microinteraction thường tập trung vào một nhiệm vụ hoặc hành động cụ thể và được thiết kế để cung cấp phản hồi hoặc hướng dẫn user.

Một ví dụ khác đó là diễn giải độ phức tạp của field password. Ở trang đăng ký user, việc nhập mật khẩu kèm với message diễn giải độ phức tạp đi kèm sẽ giúp user hiểu nhanh chóng mức độ bảo mật của mật khẩu mà user đang nhập.

Có thể hiểu, microinteraction chính là những gì xảy ra khi mọi người sử dụng các chức năng nhỏ tồn tại trong một nơi có các tính năng lớn hơn.

Hoặc đơn giản khi ta tìm kiếm một từ nào đó trên trình duyệt Chrome, sẽ có những indicators trên thanh scrollbar giúp user nhận diện nhanh chóng vị trí của các kết quả.

Microinteraction 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. Và chi tiết không chỉ là chi tiết; chúng đều là thiết kế. Các chi tiết có thể khiến việc tương tác với sản phẩm trở nên dễ dàng hơn, thú vị hơn - ngay cả khi chúng ta không cố ý ghi nhớ chúng. 

Microinteraction khác với feature gồm cả: size và scope. Feature có xu hướng phức tạp, đa chức năng, mất nhiều thời gian để thực hiện và hấp dẫn với user hơn. Microinteraction hầu như sẽ đơn giản, dễ dàng và tốn rất ít effort để user tương tác.

2. Vì sao ta nên sử dụng Microinteraction?

“The details are not the details. They make the design.” -  Charles Eames

Các microinteraction thường ít được chú ý. Chúng được thiết kế rất lặng lẽ và được sử dụng để cung cấp phản hồi đúng trong một thời gian hợp lý. Với sự hỗ trợ của hoạt ảnh microinteraction, user sẽ nhận thức được các yếu tố của giao diện. Chúng tạo ra một tâm điểm chú ý và tiết kiệm thời gian mà không làm user mất tập trung.

Các microinteraction User Experience (UX) hoạt động để đáp ứng nhu cầu tự nhiên của user. User 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 user hiểu hơn 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 user 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.

Các microinteraction dựa trên phương pháp thiết kế lấy user làm trung tâm. Như ta thường nghe về mindset User Focus. 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ự không hài lòng của user về mặt lâu dài.

Microinteraction giúp cho việc cải thiện UX bằng cách biến những giao diện user trở nên nhân cách hóa hơn, bớt khô khan hơn. 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 microinteraction, đặc biệt khi sản phẩm có rất nhiều sự cạnh tranh trên thị trường. Khi có sự tương đương về tính năng, nếu một sản phẩm tốt đến đâu nhưng có rất nhiều microinteraction chưa tốt gây khó chịu cho user, họ sẽ dễ dàng đánh giá thấp và khó để quay lại sử dụng, ngược lại, user sẽ chấp nhận và trung thành với thương hiệu đó.

3. Mechanics

Để tổng hợp tất cả mọi thứ, ta nên kết hợp các bước để biến một cái gì đó nhàm chán thành một UX thân thiện giúp user thoải mái khi sử dụng sản phẩm của bạn.

Theo như cuốn sách “Microinteractions: Designing with details” của tác giả Dan Saffer, cơ chế của microinteraction được chia ra làm 4 phần, các trigger để khởi tạo microinteraction, các rule để xác định cách thức hoạt động để tạo feedback, và các loop và mode xác định những gì xảy ra theo thời gian với microinteraction

- Trigger là bất cứ thứ gì để kích hoạt một microinteraction. Thường được hiển thị dưới dạng float icon khuyến khích user vuốt, nhấp, chạm, cuộn hoặc kéo.

- Rule xác định các cách thức hoạt động được thực hiện sau khi microinteraction được kích hoạt. Nó được coi là thành công nếu user cảm giác tự nhiên khi sử dụng, ngược lại sẽ gây nên sự không thoải mái, khi đó ta phải xem xét lại từ đầu.

- Feedback cho phép user biết chính xác điều gì đang xảy ra sau khi trigger microinteraction. Ví dụ như thanh loading bar, fill color icon hoặc icon animation. Bất cứ điều gì user nhìn thấy hoặc nghe thấy trong quá trình tương tác vi mô đều được coi là feedback. Có ba loại feedback chính: hình ảnh, âm thanh và cảm nhận. Có một lưu ý, ta nên focus phần hình ảnh vì chúng ta có xu hướng nhìn vào những gì chúng ta đang tương tác. 

 - Loop and mode là bước cuối cùng, xác định các nguyên tắc cụ thể của một microinteraction, chẳng hạn như thời gian hiển thị. Các microinteraction có thể thay đổi theo thời gian nên mỗi tương tác đều có loop và mode riêng. Hãy tính đến những điều sẽ xảy ra khi user quay lại nhiều lần, đặc biệt là các params ta truyền vào cho từng microinteraction để cho trải nghiệm người dùng tốt nhất.

4. Những tips giúp ta cải thiện Microinteraction

“Your UI isn’t a Disney Movie” - Sophie Paxton

Đôi lúc vì sự sáng tạo quá lớn đến từ người thiết kế hoặc người làm giao diện sẽ làm giảm đi hệ thống phân cấp và đánh mất thông điệp ta mong muốn.

Bạn không nên biến mọi câu trong bài viết thành một tiêu đề. Nguyên tắc tương tự áp dụng cho animation. Mọi yếu tố animation trong UI của bạn tương đương với tiêu đề trong văn bản. Nó chỉ nên được sử dụng để báo hiệu tầm quan trọng của một yếu tố nào đó. Bên cạnh đó, lạm dụng animation sẽ ảnh hưởng rất lớn đến performance, cũng như trải nghiệm của user.

• K.I.S.S (Keep it simple, stupid!). Tạo sự hài hòa về mặt hình ảnh với các thành phần UI và ngữ cảnh xung quanh. Nó phải tồn tại khi sử dụng lâu dài và phải luôn thú vị.

(Nguồn Pinterest)

Việc thiết kế một microinteraction quá phức tạp có thể làm mất thời gian trong quá trình tải và làm giảm trải nghiệm người dùng UX.

Bất kỳ sự sáng tạo nào cũng nên follow với general style của application và những UI elements khác để mang đến sự hài hoà về nhận thức. Ta có thể đặt câu hỏi liệu sau 5 lần 8 lần hoặc n lần sử dụng thì user có thấy hữu ích và hấp dẫn khi tương tác với microinteraction đó hay không. 

Cũng như việc, xu hướng thiết kế ngày nay luôn đặt nặng yếu tố simple (giống như flat icons…), rất hiếm sử dụng màu nổi lên hoặc background linear gradient nữa.

• Speak human: sử dụng các biểu tượng cảm xúc cho các microinteraction vui vẻ hơn.

Đừng để mọi thứ quá khô khan và nhạt nhẽo. Ví dụ như, do lỗi hệ thống hoặc network, hoặc input sai URL, … ta có thể lồng ghép những hình ảnh mang cảm xúc vào hơn. 

(Nguồn Pinterest)

Hoặc ví dụ như, đừng luôn luôn show error là “Something went wrong”, “Invalid data”...  - yes, tôi biết thừa ở đó là đang lỗi rồi nhưng lỗi gì, cụ thể như thế nào, … khi đó, việc ta kèm câu “Sorry…” hoặc “Please try again in 5 minutes” sẽ khiến user bớt căng thẳng hơn. 

Và, hãy luôn đặt câu hỏi liệu microinteraction có thật sự hữu dụng và mang lại giá trị cho user không.

• Trải nghiệm của người dùng.

(Nguồn Pinterest)

Khi ta thử trên tệp khách hàng nhỏ 50, 100 người, có thể số điểm đánh giá sẽ cao nhưng khi ta tăng lên con số 10k người sẽ có kết quả rất khác. Ví dụ như mua hàng trên các sàn điện tử, hoặc đặt đồ ăn hàng ngày ta thường thấy, rất khó để đạt con số tuyệt đối và hài lòng tất cả user. Liệu, cùng 1 món ăn, quán dc đánh 4.7 sao với 100 người có ngon hơn quán 4.3 sao những > 1.5K người đặt?

Vì vậy, việc thử nghiệm các microinteraction khác nhau trong ứng dụng của bạn và thu thập phản hồi của user sẽ giúp ta có thể khắc phục, sửa chữa những điều bất hợp lý, sai nhận thức và giúp cho sản phẩm tốt hơn.

Tổng kết

Hãy ghi nhớ rằng chúng ta có một điểm chung rất lớn với user, đó là chúng ta đều là con người. Trải nghiệm tổng thể của một sản phẩm phụ thuộc rất nhiều vào các microinteraction của nó. Hãy tạo ra những trải nghiệm tuyệt vời, hấp dẫn và đáng nhớ cho user.

Các microinteraction giúp cải thiện UX của sản phẩm và giúp user ghi nhớ thương hiệu của chúng ta. 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ề user và nhu cầu của họ. Và đây chính xác là những gì họ muốn cảm nhận.

Nguồn tham khảo

    "Microinteractions: Designing with Details" by Dan Saffer