Chuyển động trong giao diện: dùng đúng lúc

Chuyển động (hiệu ứng chuyển động trong giao diện số) là công cụ thiết kế có giá trị thật, nhưng dễ bị lạm dụng. Anh Chị sẽ gặp hai thái cực: trang không có hiệu ứng nào trông cứng và lạnh, trang có quá nhiều hiệu ứng thì loạn và chậm. Điểm đúng không phải ở giữa theo kiểu dung hòa, mà ở chỗ mỗi chuyển động phải có lý do rõ ràng để tồn tại.

Bốn việc chuyển động được phép làm

Sinh Vũ phân loại chuyển động hữu ích thành bốn nhóm, dựa trên tài liệu thực hành của Nielsen Norman Group:

• Phản hồi hành động: xác nhận khách vừa bấm, vừa gửi, vừa lưu. Ví dụ: nút đổi màu nhẹ khi nhấn, icon tích hiện ra sau khi hoàn thành.
• Báo đổi trạng thái: cho khách biết giao diện đang tải, đang xử lý, hay đã thay đổi nội dung. Không có tín hiệu này, khách không biết có chuyện gì đang xảy ra.
• Ẩn dụ không gian khi điều hướng: khi khách chuyển màn hình, một chuyển cảnh nhẹ giúp não định hướng: mình đang đi vào sâu hơn hay quay lại.
• Gợi ý cách tương tác: chuyển động nhỏ cho thấy thứ gì đó có thể kéo, vuốt, hoặc mở rộng, thay vì để khách tự đoán.

Chuyển động cũng giải quyết một vấn đề thực tế: hiện tượng mù thay đổi (change blindness), tức là mắt người dễ bỏ sót nội dung vừa cập nhật trên trang. Một chuyển động nhỏ đánh dấu vùng vừa thay đổi giúp khách không phải đọc lại toàn bộ trang để tìm điểm mới.

Khi nào nên bỏ qua chuyển động

Chuyển động trở thành gánh nặng trong ba tình huống sau:

• Trang trí thuần túy: hiệu ứng chạy khi trang vừa tải mà không phục vụ thông tin nào, chỉ để trông có vẻ sống động. Khách nhìn một lần thấy thú vị, lần thứ hai thấy chậm, lần thứ mười thấy bực.
• Thao tác lặp lại hằng ngày: nếu khách bấm một nút hai mươi lần mỗi phiên làm việc, hiệu ứng kéo dài 600 mili giây trên nút đó cộng dồn thành lãng phí thật sự. Thứ lặp lại nhiều phải nhanh.
• Nhiều thứ cùng chuyển động một lúc: mắt người chỉ theo dõi được một điểm chuyển động tập trung. Khi ba vùng cùng chạy hiệu ứng, kết quả là loạn, không phải phong phú.

Lỗi hay gặp nhất

• Thêm hiệu ứng vào vì trông sang, không vì nó giải quyết vấn đề gì.
• Chuyển động quá dài trên thao tác lặp lại, khiến khách phải chờ mỗi lần dùng.
• Dùng chuyển động làm mồi tâm lý: đồng hồ đếm ngược giả, hiệu ứng giả khan hiếm để ép khách quyết vội. Đây là thao túng, không phải thiết kế.
• Bỏ qua tùy chọn giảm chuyển động (prefers-reduced-motion), gây chóng mặt hoặc khó chịu cho người rối loạn tiền đình.

Chuyển động phục vụ khả dụng tốt nhất khi làm phản hồi tinh cho các vi tương tác (microinteraction), không phải để gây thích thú hay giải trí. Nên kín đáo, ngắn và tinh.

Nielsen Norman Group, The Role of Animation and Motion in UX

Góc nhìn của Sinh Vũ

Khi xây hệ chuyển động cho website thương hiệu, Sinh Vũ dùng một câu kiểm tra duy nhất trước mỗi hiệu ứng: hiệu ứng này giúp khách hiểu điều gì? Nếu không trả lời được, bỏ. Câu hỏi đó loại bỏ khoảng phân nửa ý tưởng ban đầu, và trang kết quả vừa nhẹ hơn vừa rõ hơn.

Sinh Vũ cũng coi việc tôn trọng tùy chọn giảm chuyển động là phần bắt buộc, không phải tuỳ chọn. Một sản phẩm số tử tế không để một nhóm khách cảm thấy không khỏe sau khi dùng nó.

Nếu Anh Chị đang xem xét lại hệ chuyển động hiện tại, bắt đầu bằng cách liệt kê tất cả hiệu ứng đang chạy và hỏi câu đó với từng cái. Những hiệu ứng không qua được câu hỏi là ứng viên cần cắt trước tiên.