Hiểu microinteractions trong thiết kế ứng dụng di động

58

Sự tiện dụng là 1 trong những yếu tố cốt lõi trong thiết kế UI mobile. Tính tiện dụng cao lại thường liên quan đến microinteractions – gồm những tương tác và hành vi nhỏ từ 1 giao diện, chỉ rõ cách sử dụng UI hợp lý. Những microinteractions này nhận diện các hành vi, tăng độ engagement, giúp người dùng biết được cách hoạt động của giao diện 1 cách trực quan.

Digital interfaces là trung gian giữa người dùng và nhu cầu muốn được đáp ứng của người dùng. Người thiết kế interface sẽ tạo ra các trải nghiệm hỗ trợ người dùng thực hiện 1 vài task nào đó. Ví dụ, 1 ứng dụng to-do sẽ có giao diện để sắp xếp các nhiệm vụ. Tương tự, ứng dụng Facebook sẽ có giao diện để người dùng tương tác với tài khoản Facebook của họ. Nếu được thực hiện đúng, microinteractions sẽ trở thành yếu tố bao quát toàn bộ trải nghiệm của người dùng mobile.

Sức mạnh của Microinteractions

Trong hầu hết các trường hợp, mục tiêu của 1 microinteraction là để phản hồi lại action của người dùng, để người dùng hiểu được cách interface đó di chuyển hoặc hoạt động 1 cách trực quan dù tất cả chỉ thuần là kỹ thuật số trên 1 màn hình phẳng.

Nhờ tạo được trải nghiệm huyền ảo mà microinteractions có sức ảnh hưởng lớn trong ứng dụng di động. Các thanh trượt on/off không thực sự di chuyển như các physical switches, nhưng chúng có thể di chuyển qua các diễn hoạt (animations) như hình bên dưới.

IOS Sliders Switches

Gửi đến bạn 1 trích dẫn hay về giá trị to lớn của microinteractions đối với các app mobile trong bài viết này:

“Các sản phẩm đỉnh nhất luôn làm rất tốt 2 việc này: tính năng và chi tiết. Tính năng là những gì thu hút mọi người đến với sản phẩm. Chi tiết là những gì giữ người dùng ở lại. Và  chi tiết là những gì thực sự khiến ứng dụng của bạn nổi bật hơn so với đối thủ cạnh tranh”

Đứng trên góc độ lập trình, những chi tiết nhỏ có thể không quá quan trọng, nhưng từ quan điểm của người dùng, chúng sẽ tạo nên sự khác biệt rõ rệt giữa 1 UI tốt và 1 UI xuất sắc.

Microinteractions tuyệt vời sẽ khiến người dùng có cảm giác được tưởng thưởng vì đã thực hiện 1 action. Những actions này có thể lặp đi lặp lại ngấm sâu vào hành vi của người dùng. Từ đó, users sẽ biết được cách sử dụng 1 ứng dụng dựa trên các microinteractions nhỏ hơn. Khi người dùng thực hiện 1 hành vi, các tương tác nhỏ này sẽ ra hiệu ngay: “Đúng rồi, bạn có thể tương tác với mình!”

Ví dụ, tài liệu material design specs của Google có 1 section phân tích toàn bộ về material motion. Spatial relationships – những tương quan về không gian – là 1 phần quan trọng trong công thức này, nhưng motion (chuyển động) còn có những nội dung quan trọng hơn các mối tương quan về không gian.

Dưới đây là trường hợp sử dụng animation và motion thông dụng nhất trong thiết kế UI/UX di động:

  • Hướng dẫn người dùng di chuyển giữa các trang khác nhau
  • Hướng dẫn người dùng hành vi nào đó qua interface
  • Đề xuất các actions/ hành vi có thể thực hiện trên 1 trang được đưa ra bất kì

Các ứng dụng di động có ít không gian màn hình hơn so với websites, vì vậy hướng dẫn cách dùng 1 ứng dụng sẽ gặp vài khó khăn. Nhưng nếu bạn biết cách thực thi microinteractions đúng thì mọi thứ lại trở nên rất đơn giản.

Cách hoạt động của Microinteractions

Một microinteraction đơn sẽ được kích hoạt bất cứ khi nào mà người dùng engage với 1 phần của giao diện. Hầu hết các microinteractions là những phản hồi animation đáp lại hành vì của người dùng. Vì vậy, 1 chuyển động quét qua sẽ phản hồi khác với 1 lần nhấn hoặc 1 lần kéo nhanh.

Blink UX từng viết 1 bài rất hay phân tích những chi tiết nhỏ trong microinteractions. Những diễn hoạt nhỏ này nên tuân theo 1 quy trình đoán được, từ đó người dùng mới có thể nhớ được mỗi tương tác trong ứng dụng. 

Microinteractions hướng dẫn người dùng qua giao diện bằng cách đưa ra các phản hồi đối với các hành vi. Một khi người dùng biết được 1 thanh trượt có thể di chuyển, họ sẽ biết được nó có tính tương tác. Dựa trên phản hồi, người dùng cũng sẽ biết thời điểm 1 cài đặt được bật hay tắt. Khi 1 button mà user nghĩ rằng có thể click vào thì theo bản năng, họ hiểu rằng họ có thể tương tác với nó.

Theo UXPin, mỗi microinteraction cơ bản có thể chia thành 4 bước, nhưng tôi tóm gọn quy trình thành 3 bước sau:

  1. Actionngười dùng làm cái gì đó như kéo nhanh, quét, nhấn & giữ hoặc vài tương tác khác.
  2. Reactiongiao diện phản hồi dựa trên những gì cần phải xảy ra. Quét 1 màn hình để trở lại trang lịch sử tìm kiếm hoặc nhấn vào thanh chuyển ON/OFF có thể tắt cài đặt
  3. Feedback – đây chính là kết quả của tương tác mà người dùng thực sự thấy. Khi user quét trở lại trình duyệt mobile, nó có thể khiến trang ở mục trước xuất hiện “ở trên” màn hình. Thanh chuyển on/off có thể trượt mượt mà hoặc kích thước to lên khi có áp lực đè lên màn hình.

Bạn có thể thực hiện những hành động rất nhỏ này mà không cần đến diễn hoạt, nhưng microinteractions đem đến cảm giác thực tế trên giao diện phẳng bằng digital. Microinteractions đã mang hơi thở của cuộc sống vào giao diện và kích thích nhiều tương tác từ phía người dùng hơn.

Chú trọng vào chi tiết

Khi nghiên cứu sâu những phân mảng nhỏ hơn của 1 thiết kế, bạn sẽ hiểu ra cách ứng dụng trả lời 1 hành vi cụ thể.

Pull to refresh là 1 ví dụ phổ biến về microinteractions. Khi mới ra mắt, đây không phải là phần quan trọng của iOS, nhưng rất nhiều ứng dụng đã lấy ý tưởng này và phát triển lên. Bây giờ, pull to refresh là 1 hành vi quen thuộc mà hầu hết người dùng cần phải biết khi duyệt qua 1 feed UI. Tương tự là hamburger menus di động đang ngày càng nổi tiếng.

Hãy làm cho mỗi microinteraction trở nên thực tế và đơn giản. Đừng lạm dụng nhiều diễn hoạt vì khi các diễn hoạt quá chi tiết hoặc bị sử dụng quá thường xuyên thì sẽ rất nhàm chán. Chẳng người dùng nào lại muốn hiệu ứng lấp lánh xuất hiện mỗi lần họ nhấn vào 1 menu icon. y tìm cách cân bằng với giá trị thực trong cách hoạt động của giao diện.

Một vài ví dụ

Tôi nghĩ cách tốt nhất để học cái gì đó là làm nó, và thứ 2 là nghiên cứu công trình của những người khác. Tôi đã sưu tầm một số diễn hoạt microinteraction để hiển thị giao diện trong mockup thực từ những người dùng tài ba của Dribbble.

Mỗi ứng dụng sẽ có những điểm khác nhau và có những nhu cầu khác nhau dựa trên chức năng của ứng dụng. Cuối cùng, hầu hết người dùng đều muốn 1 cùng thứ: 1 ứng dụng trực quan và đem đến trải nghiệm người dùng chất lượng cao với các microinteractions liên quan đến hành vi của họ.

1. Animated Event App UI

Ví dụ đầu tiên là tính năng card animation thuận tiện được Ivan Martynenko phát triển. Bạn sẽ nhận ra 1 nhóm các microinteractions trong thiết kế này, đặc biệt là card swiping và di chuyển qua các chi tiết.

Khi nhấn vào card, nó sẽ tăng kích cỡ. Và khi nhấn vào button Subscribe, hình đại diện của người dùng sẽ trượt vào danh sách những người đăng kí. Mọi thứ trên giao diện đều rất trực quan và tự nhiên.

Events UI Animations

2. Interactive Exercise Screen

Mobile exercise animation của designer Vitaly Rubtsov demo cảnh người dùng lưu kết quả luyện tập cho 1 set squats.

Mỗi diễn hoạt có cùng hiệu ứng nảy đàn hồi khi menu mở và snap được đóng lại. Hiệu ứng này cũng tương tự như khi 1 hành động được check “Done”. Tính đồng nhất rất quan trọng với microinteractions vì chúng mang đến cảm giác kết nối cùng 1 giao diện.

Exercise Screen Animations

3. Search app Microinteractions

Ngắn gọn và đi thẳng vào vấn đề. Đó chính là những từ ngữ miêu tả về search app microinteractions do Lukas Horak thiết kế. Mỗi diễn hoạt vừa nhanh vừa dễ thấy. 

Đây cũng là phương châm tránh phức tạp vấn đề mà bạn cần ghi nhớ khi thiết kế microinteractions. Nếu giao diện tải nhanh hơn mà không có diễn hoạt, vậy bạn có cần thêm diễn hoạt đó vào nữa không? Những diễn hoạt nhanh sẽ không làm chậm tốc độ trải nghiệm.

Search App Animations

4. Fitness Goal Microinteraction

Jakub Antalík thực sự đã làm rất tốt với Fitness Goal Microinteraction. Tất cả màn hình của fitness goal microinteraction đều mang đến cảm giác dịu dàng vì tất cả các hình khối đều chuyển động rất êm ái.

Đặc biệt, giao diện trông rất mạnh mẽ và khả dụng. Nó thể hiện rằng microinteractions được cài đặt thủ công vẫn có thể vừa có giao diện bắt mắt vừa hoàn thành tốt chức năng của nó.

Analytics Goal Animation

5. Pull to Refresh Animation

Đây là 1 trong những diễn hoạt pull-to-refresh yêu thích của tôi được đội ngũ tại Ramotion xây dựng. Không chỉ bắt chước dạng chất lỏng với thao tác kéo mà animation phản hồi cũng kết nối mượt mà từ dạng giọt nước bắn tung tóe sang dạng tròn loading.

Tập trung vào chi tiết như thế này sẽ mang đến vẻ đẹp thực sự trong microinteractions của mobile app.

Pull to Refresh Animation

6. Tab Microinteraction
Vì kích thước màn hình nhỏ nên tabbed widgets rất thông dụng với các ứng dụng di động. Mặc dù microinteraction này của John Noussis hoạt động hiệu quả hơn ở tốc độ nhanh hơn, nhưng bản thân diễn hoạt khá bắt mắt và đã được designer thiết kế cẩn thận.

Khi có nội dung mới nảy lên từ bên phải thì mũi tên mỏ neo lướt qua phải, giống như toàn bộ màn hình đang di chuyển vật lý sang phải. Animation này tuy tinh tế, nhưng lại rất chậm nên có thể nhiều người dùng sẽ khó chịu sau vài ngày sử dụng.

Tabbed Microinteraction

7. Preloading Animation

Tuy tôi chưa đề cập nhiều về loading bars trong bài viết này, nhưng chúng cũng đóng vai trò quan trọng đối với trải nghiệm chung. Hầu hết người dùng không muốn đợi data tải về, nhưng nó cũng không muốn nhìn vào màn hình trắng toát khi nó đang tải.

Bret Kurtz đã preloading screen 1 cách ấn tượng, vừa vui vừa truyền tải được thông tin, Người dùng sẽ cảm thấy khuây khỏa khi xem diễn hoạt lặp lại này, thấy an tâm hơn khi ứng dụng vẫn đang tải dữ liệu và chưa bị crash.

iOS Loading Animation

Kết

Tất cả các ví dụ trên đều là minh chứng rõ nét cho giá trị của các microinteractions. Mobile apps thường sẽ nhận được nhiều lợi ích từ microinteractions hơn vì người dùng tự mình chạm ngón tay vào màn hình. Người dùng không nhấn vào màn hình máy tính để bàn hay màn hình laptop nhưng sẽ nhấn vào smartphones vì đây là trạng thái tương tác mặc định.

Vì có nhiều trải nghiệm cá nhân hơn nên thiết kế ứng dụng mobile sẽ là quy trình mang nhiều sắc thái hơn. Nếu thực hiện đúng, việc bổ sung microinteractions mobile phù hợp có thể xây dựng trải nghiệm ứng dụng huyền ảo, mạnh mẽ, bên cạnh pixels và chuyển động.

Nguồn: IDE Academy via Hongkiat