Một nút Hủy khó chịu ở góc dưới bên phải có thể dạy gì về việc không phản bội trực giác
Khi thử một giao diện giống màn hình thanh toán, có một thao tác Hủy ở khu vực dưới bên phải.
Trong một khoảnh khắc, vị trí đó trông giống nơi người ta thường đặt nút Tiếp tục hoặc Xác nhận. Chỉ một lần suýt bấm nhầm cũng đủ gây khó chịu.
Bài học không phải là “Hủy tuyệt đối không được nằm bên phải”. Mỗi nền tảng và sản phẩm có quy ước khác nhau.
Vấn đề thật sự là điều người dùng dự đoán từ kinh nghiệm trước đây có khớp với hành vi thật của giao diện hay không.
Không ai bước vào mỗi màn hình như một tờ giấy trắng. Chúng ta mang theo kinh nghiệm từ điện thoại, website, quầy thanh toán, máy bán vé, điều khiển từ xa và thang máy. Khi thiết kế chống lại các kỳ vọng đó, giao diện có thể hiểu được sau khi suy nghĩ nhưng vẫn rất dễ bấm nhầm trong giây đầu tiên.
Nhiều lỗi hằng ngày không phải quyết định sai sau khi suy nghĩ kỹ. Chúng là những cú trượt do vội, quen tay, mệt, hoặc hai nút quá giống nhau và quá gần nhau.
Câu hỏi chính:
UI/UX thật sự thân thiện với con người trông như thế nào?
Câu trả lời không phải thêm nhiều hướng dẫn.
Đó là dễ dự đoán, khó bấm nhầm, dễ phục hồi và không ép người dùng xử lý lựa chọn chưa cần thiết.
0. Bản 30 giây: đừng chỉ hỏi vì sao người dùng sai
- Cùng một nhãn nên dẫn tới cùng loại kết quả.
- Hành động phổ biến nên theo vị trí và quy ước quen thuộc khi có thể.
- Hai hành động có hậu quả rất khác không nên trông giống nhau và nằm sát nhau.
- Hành động có chi phí cao nên có thể hoàn tác hoặc giải thích rõ hậu quả trước khi thực hiện.
- Mục tiêu chạm cần đủ lớn và có khoảng cách.
- Tính năng nâng cao có thể giữ lại nhưng không cần hiện tất cả ngay từ đầu.
- Không chỉ đếm số lựa chọn; hãy xem mức độ khó khi so sánh.
- Quan sát hành vi sửa ngay sau thao tác như quay lại lập tức hoặc bật rồi tắt ngay.
Giao diện không phải bài kiểm tra.
Mục tiêu là để người dùng thường làm đúng mà không phải dừng lại giải câu đố của UI.
1. “Trực quan” thường là tái sử dụng kinh nghiệm cũ
Người dùng tạo một mô hình trong đầu về cách sản phẩm có lẽ hoạt động. UX gọi đó là mental model.[1][2]
Kính lúp gợi ý tìm kiếm. Mũi tên trái gợi ý quay lại. Thùng rác gợi ý xóa. Tam giác gợi ý phát.
Chúng ta không suy luận lại từ đầu mỗi lần; ta mượn ngữ pháp đã học từ sản phẩm khác.
Vì thế sự mới lạ có thể đắt. Biến tìm kiếm thành một biểu tượng lạ có thể sáng tạo với người thiết kế nhưng thành câu đố với người dùng.
Các heuristic của NN/g nhấn mạnh sự phù hợp với thế giới thật và tính nhất quán với quy ước nền tảng, ngành.[1]
Tương thích không gian cũng quan trọng. Nghiên cứu về stimulus-response compatibility cho thấy lỗi tăng khi vị trí gợi ý và phản ứng cần thực hiện không phù hợp.[3]
Nguyên tắc:
Đừng bắt người dùng xóa sạch kinh nghiệm họ đã học.
2. Hiểu sai và trượt tay là hai vấn đề khác nhau
Người dùng có thể hiểu sai hệ thống rồi ra quyết định sai.
Hoặc họ hiểu đúng nhưng bấm nhầm.
NN/g phân biệt rộng thành mistake và slip.[1]
Nếu ai đó nghĩ nút là Lưu nhưng thật ra là Xóa, có thể là vấn đề hiểu.
Nếu họ biết đó là Xóa nhưng bấm nhầm vì nằm sát Lưu, đó gần với slip hơn.
Nói “hãy đọc kỹ hơn” là giải pháp yếu.
Mẫu nguy hiểm là đặt gần nhau những hành động có hậu quả rất khác: Lưu và Bỏ, Gửi và Hủy, tiến 10 giây và chuyển sang bài khác.
NN/g cũng cảnh báo việc đặt hành động phá hủy quá gần hành động xác nhận.[4]
Hậu quả khác nhau cần cách trình bày và vị trí khác nhau.
3. Trước khi thêm hộp xác nhận, hãy hỏi có hoàn tác được không
Xóa, hủy đăng ký, xóa tất cả, bỏ thay đổi.
Phản xạ thiết kế thường là thêm “Bạn có chắc không?”
Nhưng nếu việc gì cũng hỏi, người dùng sẽ học cách bấm xác nhận mà không đọc.
NN/g khuyến nghị dùng xác nhận cho hành động nghiêm trọng và khó phục hồi, mô tả hậu quả cụ thể, và cung cấp Undo nếu có thể.[5]
“Bạn có chắc? Có/Không” yếu hơn:
“3 mục sẽ bị xóa. Có thể khôi phục trong 30 ngày” “Xóa 3 mục” “Giữ lại”
Thiết kế thân thiện không hứa con người sẽ không bao giờ sai.
Nó làm giảm chi phí của sai sót.
4. Kích thước chỉ là một nửa; khoảng cách cũng quan trọng
WCAG 2.2 Target Size (Minimum) nhìn chung yêu cầu mục tiêu ít nhất 24×24 pixel CSS hoặc có khoảng cách đủ.[6]
Ví dụ của W3C mô tả người định bấm Submit nhưng lại chạm Cancel.
Tiêu chí Enhanced dùng 44×44 pixel CSS, và Apple thường khuyến nghị vùng nhấn ít nhất 44×44 point.[7][8]
Nhưng làm mọi nút lớn vẫn chưa đủ.
Cần xem kích thước, khoảng cách, mức độ nghiêm trọng, tần suất, cạnh màn hình và sự giống nhau của nút bên cạnh.
Hai nút Lưu và Xóa đều lớn vẫn có thể là bẫy nếu nằm sát và trông giống nhau.
5. “Có tính năng” khác với “phải hiện ngay”
Sản phẩm mạnh sẽ tích lũy tính năng.
Nghe, đọc nhanh, đánh dấu, danh sách phát, chuyển chương, bài trước, bài sau, học, cài đặt, ngoại tuyến.
Mỗi thứ đều có thể hữu ích.
Hiện tất cả cùng lúc biến màn hình thành triển lãm tính năng.
Progressive disclosure cho thấy chức năng cốt lõi trước và đưa chức năng nâng cao sang lớp sau. NN/g liên hệ cách này với khả năng học, hiệu quả và giảm lỗi.[9]
Quy tắc:
Không cần xóa. Hãy gấp lại trước.
6. Nhiều lựa chọn luôn tệ hơn? Không
Hick's law liên hệ thời gian phản ứng với số phương án hoặc mức độ bất định và vẫn quan trọng trong HCI.[10]
Nhưng tổng quan hiện đại cũng thảo luận ảnh hưởng của tương thích stimulus-response, luyện tập và tập lựa chọn rất lớn.[10]
Choice overload cũng phụ thuộc bối cảnh.
Meta-analysis năm 2010 tìm thấy hiệu ứng trung bình gần như bằng 0 và khác biệt lớn giữa các nghiên cứu.[11]
Meta-analysis năm 2015 xác định các yếu tố như độ phức tạp của tập lựa chọn, độ khó nhiệm vụ, bất định về sở thích và mục tiêu giảm nỗ lực.[12]
Vì vậy, 10 lựa chọn không tự động xấu.
10 lựa chọn khó phân biệt cho một người đang mệt và phải quyết định ngay thì dễ thành vấn đề hơn.
Kho lớn ở phía sau, bề mặt quyết định nhỏ ở thời điểm hiện tại.
7. Tự kiểm tra một website nội dung cũng tìm thấy các bẫy tương tự
7-1. Một từ trong tiêu đề kích hoạt bước tiếp theo sai
Một bài về phát triển AI tình cờ nhắc đến chuyển nhà và hệ thống hiển thị hành động về chuyển nhà trước nội dung. Đúng từ khóa, sai ý nghĩa.
7-2. Nhảy 10 giây, chuyển chương và chuyển bài nằm cùng một thanh
Biểu tượng đều giống điều hướng nhưng hậu quả quá khác. Điều hướng cục bộ và chuyển trang nên tách ra.
7-3. Cùng nhãn “Tìm bài viết” dẫn tới nơi khác nhau
Một nhãn với hành vi khác nhau buộc người dùng học lại.
7-4. Mục lục quá dài xuất hiện trước nội dung
Mục lục có ích nhưng 17 mục trước đoạn đầu tiên tạo nhiệm vụ so sánh trước khi đọc.
7-5. “Nghe tất cả kết quả” trở thành nút mạnh nhất
Đây là tính năng nâng cao hay, nhưng không phải lúc nào cũng là tác vụ chính của người tìm kiếm.
7-6. Cuối bài tích tụ liên quan, xếp hạng, tìm kiếm, bản tin và tác giả
Mọi thứ đều có thể hữu ích mà không cần ưu tiên ngang nhau trong cùng thời điểm.
7-7. Đăng ký và hủy thông báo ở quá gần nhau
Hành động ngược nhau cần khoảng cách và phân cấp khác nhau.
Điều buồn cười là sản phẩm quan tâm UX vẫn có thể tự cài bẫy cho chính mình.
8. Quảng cáo không tự động là UX xấu; chiếm mất nhiệm vụ đọc mới là vấn đề
Quảng cáo có thể tài trợ cho website.
Vấn đề là cạnh tranh chú ý.
Nghiên cứu eye-tracking về quảng cáo web cho thấy khoảng cách và chuyển động của banner ảnh hưởng hành vi thị giác và có thể gây nhiễu rõ hơn trong đọc để hiểu.[13]
Với trang bài viết, nên có ngân sách chú ý:
- không xếp quảng cáo, player, mục lục lớn và CTA đăng ký trước nội dung
- tách quảng cáo khỏi nút và liên kết
- thu gọn ô quảng cáo trống
- giữ khoảng cách tránh bấm nhầm
Câu hỏi chính:
Người dùng đến trang này để làm gì?
9. Checklist QC cho UI/UX thân thiện
Dễ dự đoán
- Cùng nhãn có cùng kết quả?
- Biểu tượng giữ ý nghĩa quen thuộc?
- Có phá quy ước nền tảng vô lý?
- Người mới có thể đoán kết quả trước khi bấm?
Ngăn bấm nhầm
- Hành động ngược nhau có nằm sát?
- Hành động phá hủy có nổi bật như hành động chính?
- Có thể hoàn tác?
- Xác nhận có mô tả hậu quả cụ thể?
Ngón tay và con trỏ
- Mục tiêu quan trọng đủ lớn?
- Mục tiêu nhỏ có quá dày?
- Cạnh màn hình có khó thao tác?
Tải thông tin
- Tác vụ chính có rõ?
- Tính năng nâng cao xuất hiện quá sớm?
- Mục lục, bộ lọc, đề xuất có thể mở dần?
Nhất quán
- Sản phẩm có cùng ngữ pháp tương tác?
- Có giữ kỳ vọng hữu ích từ sản phẩm khác?
10. Dữ liệu UX hữu ích có thể nằm ngay sau cú nhấp
CTR chỉ nói rằng có nhấp.
Hãy xem thêm:
- quay lại trong vài giây
- bật rồi tắt ngay
- chuyển trang rồi quay lại ngay
- bấm lặp tại cùng vị trí
- rời đi sau lỗi
- hoàn tất ở lần thử thứ hai
- mất quá lâu để đến nội dung chính
Đó là manh mối, không phải chẩn đoán.
Quan sát theo dữ liệu tổng hợp và bảo vệ riêng tư.
giả thuyết → thay đổi nhỏ → xem hành vi sửa → giữ nếu tốt hơn → hoàn tác nếu tệ hơn
11. Kết luận: thân thiện không phải giải thích nhiều hơn; là tạo ít bẫy hơn
UI tốt thường không giành sự chú ý.
Nút hoạt động. Quay lại được. Thứ được mong đợi nằm ở chỗ hợp lý.
UI xấu có thể trở thành nhân vật chính chỉ với một lần bấm nhầm:
“Tại sao Hủy lại nằm ở đó?”
Đừng bắt con người học logic riêng của máy. Hãy đưa máy gần hơn với kỳ vọng mà con người đã học.
Giữ tính năng nâng cao. Giữ thư viện nội dung lớn. Giữ kiếm tiền nếu cần.
Nhưng cho thấy điều quan trọng trước, tách hành động ngược nhau, phản ánh mức hậu quả bằng phân cấp thị giác và cho phép phục hồi.
UI/UX thân thiện với con người không đòi người dùng thông minh hơn. Nó cho phép người bình thường hành động bình thường mà ít gặp tai nạn hơn.
- Nielsen Norman Group nngroup.com
- Mental Models nngroup.com
- Christ et al. (2000) pubmed.ncbi.nlm.nih.gov
- Application-Design Mistakes nngroup.com
- Confirmation dialogs nngroup.com
- W3C Target Size (Minimum) w3.org
- W3C Target Size (Enhanced) w3.org
- Apple Buttons developer.apple.com
- Progressive Disclosure nngroup.com
- Proctor & Schneider (2018) pubmed.ncbi.nlm.nih.gov
- Scheibehenne et al. (2010) doi.org
- Chernev et al. (2015) doi.org
- Online advertising and visual attention pmc.ncbi.nlm.nih.gov
