Những quy tắc vàng của thiết kế giao diện (2013)

Tám quy tắc vàng của thiết kế giao diện

• Theo đuổi tính nhất quán: trong các tình huống tương tự cần yêu cầu cùng một trình tự hành động, đồng thời phải sử dụng thống nhất thuật ngữ trong lời nhắc, menu, màn hình trợ giúp, cũng như màu sắc, bố cục, cách viết hoa/thường, phông chữ trên toàn bộ giao diện.
• Theo đuổi tính khả dụng phổ quát: cần nhận thức nhu cầu của nhiều nhóm người dùng khác nhau và thiết kế có cân nhắc từ người mới bắt đầu đến chuyên gia, độ tuổi, khuyết tật, khác biệt quốc tế và sự đa dạng công nghệ.
• Cung cấp phản hồi hữu ích: giao diện phải có phản hồi cho mọi hành động của người dùng; với các hành động thường xuyên và nhỏ thì phản hồi nên đơn giản, còn với các hành động hiếm gặp nhưng quan trọng thì cần phản hồi sâu hơn.
• Cung cấp tính hoàn chỉnh bằng thiết kế tương tác: cần tổ chức chuỗi hành động thành các nhóm và thông qua phản hồi về việc hoàn tất nhóm đó, mang lại cho người dùng cảm giác thành tựu và yên tâm.
• Ngăn ngừa lỗi: cần thiết kế giao diện để người dùng không mắc phải các lỗi nghiêm trọng, và khi lỗi xảy ra thì phải cung cấp hướng dẫn khôi phục đơn giản, cụ thể.
• Cho phép hoàn tác hành động một cách dễ dàng: nên cho phép hoàn tác hành động bất cứ khi nào có thể để khuyến khích người dùng khám phá các tùy chọn mới mà không sợ mắc sai lầm.
• Duy trì quyền kiểm soát của người dùng: người dùng có kinh nghiệm muốn giao diện phản ứng theo hành động của họ và không thay đổi các thao tác quen thuộc; họ sẽ cảm thấy khó chịu khi khó lấy được thông tin cần thiết hoặc không đạt được kết quả mong muốn.
• Giảm tải trí nhớ ngắn hạn: vì lượng thông tin con người có thể xử lý trong trí nhớ ngắn hạn là có hạn, nên cần tránh các giao diện buộc người dùng phải nhớ thông tin từ một màn hình để sử dụng ở màn hình khác.

Ý kiến của GN⁺

• Bài viết này trình bày các nguyên tắc cơ bản về thiết kế giao diện do Ben Shneiderman đề xuất, và những nguyên tắc này là điểm khởi đầu tốt cho các nhà thiết kế mobile, desktop và web.
• Những nguyên tắc này giúp cải thiện trải nghiệm người dùng bằng cách hỗ trợ họ hiểu hệ thống tốt hơn và sử dụng hệ thống hiệu quả hơn.
• Bài viết cung cấp những chỉ dẫn hữu ích để các kỹ sư phần mềm mới vào nghề tham khảo khi thiết kế giao diện thân thiện với người dùng.

[GN⁺]

Ý kiến trên Hacker News

• Hiệu năng không phải là một phần của thiết kế UI, nhưng thường có xu hướng bị xem nhẹ. Một UI có hiệu năng kém là vi phạm mọi nguyên tắc thiết kế.

  • Ví dụ, smart TV Android của Sony trông đẹp mắt nhưng UI quá chậm nên rất khó sử dụng.

• UI thiếu ổn định và thay đổi thường xuyên cũng vi phạm hầu hết các nguyên tắc. Smart TV đặc biệt tệ ở khía cạnh này, như việc bố cục màn hình chính và biểu tượng ứng dụng thường xuyên thay đổi mà không có lý do.

• Biểu tượng không có nhãn (thậm chí đôi khi còn không có tooltip) là một vấn đề ngày càng nghiêm trọng. Nếu phải lên Google để biết một nút làm gì thì đó là thiết kế UI tệ.

• Giải thích vì sao tính nhất quán lại quan trọng.

  • Không phải là theo đuổi những chi tiết cụ thể như bảng màu bị giới hạn hay lựa chọn phông chữ không gây chú ý.
  • Mà là để người dùng có thể sử dụng phần mềm một cách thành thạo.
  • Microsoft Office và (Neo)Vim không hẳn là những ví dụ xuất sắc về UI, nhưng lại rất đặc biệt ở khía cạnh tính ổn định.

• Điều quan trọng là truyền đạt rõ ràng mô hình khái niệm cho người dùng.

  • Nếu không hiểu mô hình khái niệm của sản phẩm, người dùng sẽ luôn bối rối ngay cả khi các biểu tượng được gắn nhãn rõ ràng.
  • UI nên được thiết kế để người dùng có thể suy ra mô hình khái niệm bằng cách khám phá giao diện.

• Khi người dùng nhập sai mã bưu chính, nên hướng dẫn họ chỉ sửa phần lỗi thay vì bắt nhập lại toàn bộ biểu mẫu họ tên-địa chỉ.

  • Điều này cũng nên áp dụng khi điền biểu mẫu qua lại giữa nhiều trang.
  • Hành động sai không nên làm thay đổi trạng thái của giao diện, hoặc phải cung cấp hướng dẫn về cách khôi phục trạng thái.

• Thay vì vô hiệu hóa các mục menu, nên hiển thị thông báo lỗi giải thích vì sao lệnh đó không thể sử dụng khi người dùng nhấp vào.

  • Việc để người dùng tự tìm ra lý do lệnh bị vô hiệu hóa có thể gây bực bội.

• 10 heuristic về usability của Nielsen đưa ra chỉ dẫn tốt cho thiết kế UI.

  • Bao gồm khả năng hiển thị trạng thái hệ thống, sự tương ứng với thế giới thực, quyền kiểm soát và tự do của người dùng, tính nhất quán và tiêu chuẩn, phòng ngừa lỗi, nhận biết thay vì ghi nhớ, tính linh hoạt và hiệu quả khi sử dụng, thiết kế tối giản, nhận biết và khôi phục lỗi, trợ giúp và tài liệu.

• Từ sau năm 2013, tính nhất quán bắt đầu sụp đổ, và với sự xuất hiện của UI dựa trên CSS, mỗi trang web và ứng dụng tự triển khai UX riêng của mình.

  • "Mystery meat navigation" từng bị cộng đồng UX chỉ trích khi Flash thịnh hành vào đầu những năm 2000 nay lại quay trở lại.

• Việc một thứ khác đột ngột xuất hiện thay cho mục người dùng định chọn, khiến họ chọn nhầm, là một lỗi đặc biệt nghiêm trọng.

• Các thành phần giao diện không nên di chuyển bất ngờ sau khi giao diện đã được vẽ xong.

  • Google đặc biệt nghiêm trọng với vấn đề này, nhưng không phải trường hợp duy nhất.

• Bàn luận về các quy tắc vàng của một thứ utopia hiển nhiên.

  • Hầu hết các lập trình viên đều từng làm việc trên những giao diện thường xuyên vi phạm các quy tắc này.
  • Không phải vì họ không hiểu, mà vì tại thời điểm đó chi phí để làm đúng là quá cao.
  • Ví dụ, chức năng hoàn tác chỉ khả thi khi cấu trúc dữ liệu bên dưới ứng dụng được xây dựng có tính đến điều đó. Việc ngăn ngừa lỗi cũng khó vì rất khó biết chính xác lỗi là gì, và việc cung cấp phản hồi hoàn hảo bằng ngôn ngữ của người dùng còn phức tạp hơn.