10 quy tắc vàng trong thiết kế giao diện người dùng

Dựa trên cuốn sách “Designing the User Interface” của Ben Shneiderman và cuốn “Ten Usability Heuristics” của Jakob Nielsen, sau đây là 10 quy tắc căn bản và quan trọng nhất trong thiết kế giao diện người dùng.

Chúng được gọi là “heuristics” bởi vì tính chất của chúng không phải quy tắc chỉ dẫn cụ thể mà thay vào đó là những quy tắc có thể áp dụng linh hoạt trong từng trường hợp khác nhau.


1. Theo đuổi sự đồng bộ trong thiết kế

Một thiết kế giao diện hiệu quả sẽ không khiến người dùng phải đặt ra các câu hỏi rằng liệu những từ ngữ, hoàn cảnh, hay hành động khác nhau có mang cùng một ý nghĩa hay không? Do vậy, để tránh gây bối rối cho người dùng, hãy sử dụng từ ngữ, ký hiệu hành động một cách thống nhất.

Nói cách khác, chúng ta nên sử dụng đồng bộ tất cả các yếu tố hiển thị. Ví dụ, ký hiệu cụ thể của nút bấm sẽ luôn thực hiện một hành động duy nhất hay thanh điều hướng cũng nên hiển thị có logic, hệ thống.

Khi áp dụng quy tắc này bạn nên cân nhắc đến những yếu tố sau:

  • Workflow/Quá trình
  • Chức năng
  • Hình dạng
  • Thuật ngữ

2. Hiển thị trạng thái của hệ thống hoặc cung cấp thông tin phản hồi

Hệ thống cần thông báo cho người dùng biết về những gì đang diễn ra theo một cách thích hợp và đúng thời điểm. Hãy nói cho họ biết chuyện gì đang xảy ra trước khi họ bắt đầu đưa ra phán đoán của mình.

Người dùng luôn muốn được kiểm soát tình hình, họ tin rằng hệ thống sẽ phản hồi như mong đợi. Điều đó cũng có nghĩa rằng họ không thích sự “bất ngờ”. Đối với những hành động nhỏ và thường xuyên, phản hồi của hệ thống có thể linh hoạt được đôi chút nhưng đối với những hành động chính và quan trọng, phản hồi nên truyền đạt một cách chính xác và hiệu quả những thông tin đến người dùng

Khi thiết kế nội dung phản hồi, bạn nên chú ý đến các vấn đề sau:

  • Phản hồi cần có sự liên quan
  • Phù hợp với độ quan trọng và cấp bách của nó
  • Dễ dàng hiểu được và có ý nghĩa với người dùng
  • Đặt trong bối cảnh thích hợp (Yếu tố thời gian và địa điểm)

3. Kết hợp hệ thống với hiển thị thực tế

Như đã nói, người dùng càng ít phải phán đoán càng tốt. Hệ thống nên hiển thị ngôn ngữ của người dùng (cụm từ, concept quen thuộc với người dùng) để giao tiếp với họ hơn là sử dụng những thuật ngữ đặc biệt của hệ thống.

Chuỗi các hành động liên tiếp nên được sắp xếp vào cùng một nhóm từ giai đoạn bắt đầu cho đến giai đoạn giữa và giai đoạn kết thúc. Khi một quá trình kết thúc, hãy thông báo cho người dùng về điều đó. Hãy cho họ biết rằng họ đã hoàn thành tất cả những điều cần thiết.

Một số lưu ý khi thiết kế:

  • Chuỗi các hành động
  • Thông báo hoàn thành một hành động
  • Thiết kế nội dung chỉ dẫn hành động tiếp theo một cách hiệu quả

4. Cho phép người dùng đảo ngược hành động

Shneiderman đã miêu tả như sau: “Chức năng này giúp người dùng xóa bỏ lo ngại khi họ biết rằng những lỗi đó có thể ‘ctrl-z’ ngay lập tức, nhờ vậy khuyến khích họ khám phá những tính năng khác mà họ chưa từng sử dụng”.

Trên nền tảng ứng dụng, điều này có thể được hiểu giống như chức năng ‘undo’ và ‘redo’. Việc thêm vào tính năng “emergency exit” cũng có thể giúp người dùng thoát ra khỏi tình trạng không may mà không phải nhận bất kỳ một thông báo mở rộng nào.

Đảo ngược hành động:

  • Không can thiệp đến quá trình làm việc
  • Nhiều không gian trống hơn cho người dùng
  • Sử dụng duy nhất một thao tác Undo và lịch sử hành động

5. Ngăn ngừa những lỗi có thể xảy ra

Không một ai thích gặp phải lỗi trong quá trình sử dụng, tệ hơn nữa là khi chúng ta có cảm giác rằng mình đã làm sai điều gì đó. Do vậy, hệ thống cần loại bỏ những lỗi dễ xảy ra cho người dùng, hoặc kiểm tra và thông báo giúp họ trước khi họ xác nhận hành động tiếp theo.

Hãy thiết kế một hệ thống hiệu quả nhất có thể để không một người dùng nào gặp phải những lỗi nghiêm trọng. Nếu một lỗi xuất hiện, hệ thống phải có chức năng phát hiện và đưa ra giải pháp đơn giản, dễ hiểu giúp người dùng xử lý lỗi đó.

Một số điều cần nhớ:

  • Ngăn ngừa lỗi sẽ hiệu quả hơn việc xử lý lỗi sau khi nó đã xảy ra
  • Tính năng tự động phát hiện lỗi
  • Thông báo rõ ràng, chính xác về lỗi gặp phải
  • Gợi ý về giải pháp cho vấn đề

6. Giảm tải bộ nhớ ngắn hạn

Như Nielsen đề cập, nhận biết một thứ gì đó sẽ dễ dàng hơn việc ghi nhớ nó. Hạn chế việc ghi nhớ của người dùng bằng cách thiết kế vật thể, hành động, các sự lựa chọn khả dĩ. Những chỉ dẫn cũng nên được hiển thị một cách rõ ràng.

Sử dụng biểu tượng và các yếu tố thị giác khác như màu nền và việc sắp đặt thống nhất các lựa chọn/tính năng để giúp người dùng cũ nhanh chóng tìm được chức năng cần thiết.

Để giảm thiểu việc ghi nhớ cần lưu ý:

  • Ứng dụng nên có một cấu trúc rõ ràng
  • Nhận biết điều gì đó sẽ dễ dàng hơn việc nhớ ra nó
  • Sự trợ giúp tiềm ẩn
  • Những hỗ trợ thị giác

7. Cho phép người dùng sử dụng phím tắt để thực hiện các thao tác thường xuyên

Cho phép người dùng chi phối và cá nhân hóa những thao tác thường xuyên trên ứng dụng/sản phẩm.

Những từ viết tắt, phím chức năng, lệnh ẩn hay những tài nguyên mở rộng sẽ đặc biệt hữu ích cho nhóm người dùng chuyên gia.

Từ khóa liên quan:

  • Bộ phím tắt
  • Những tính năng ‘Power User’
  • Cơ chế tự động thao tác

8. Thiết kế tối giản

Tối giản hóa không có nghĩa là hạn chế. Tất cả thông tin đều phải mang những ý nghĩa nhất định.

Tối giản hóa giao diện bằng cách loại bỏ những yếu tố/nội dung không cần thiết hoặc không có vai trò giúp đỡ người dùng.


9. Giúp người dùng nhận biết, chẩn đoán và khôi phục các lỗi

Những thông báo lỗi nên được thể hiện bằng ngôn ngữ đơn giản, dễ hiểu (không nên sử dụng các thuật ngữ của hệ thống để thông báo cho người dùng), biểu thị chính xác lỗi mà người dùng gặp phải và đưa ra gợi ý từng bước một để người dùng xử lý vấn đề.

Nói cho người dùng biết chính xác điều gì sẽ xảy ra cả trước và sau khi họ thực hiện một hành động.


10. Tài liệu trợ giúp

Mặc dù sẽ tốt hơn nếu giao diện được người dùng sử dụng một cách dễ dàng mà không cần đến tài liệu hướng dẫn, đây vẫn là một điều cần thiết để cung cấp cho người dùng sự giúp đỡ bất cứ khi nào họ cảm thấy bối rối. Các tài liệu hướng dẫn nên được thiết kế tối ưu cho việc tiếp cận, tra cứu, tập trung vào những thao tác của người dùng với danh sách các bước cụ thể và đương nhiên, chúng không nên quá dài.


Biên dịch: Limon
Nguồn: Medium

Cùng tác giả

#Tag

tips UI/UX ux UX designer ux research

iDesign Must-try

Thiết kế tương tác (Interaction Design) là gì?
Thiết kế tương tác (Interaction Design) là gì?
Thiết kế tương tác là một thành phần quan trọng trong chiếc ô khổng lồ của thiết kế trải nghiệm người dùng (UX). Trong bài viết này, hãy cùng iDesign tìm…
Tư duy thiết kế và những tính chất trong hệ thống
Tư duy thiết kế và những tính chất trong hệ thống
Một cách cơ bản hơn để đối phó với tính chất tạm thời của công việc là xem xét lại bản thân chúng ta với tư cách là nhà thiết…
Chút tâm tình tiếp lửa cho những freelancer vững bước
Chút tâm tình tiếp lửa cho những freelancer vững bước
Hãy vững tin vào con đường mà mình đã chọn và đừng dành quá nhiều thời gian để so sánh bản thân với những freelancer khác. Trong thời đại khủng…
Những điều mình chưa học ở trường thiết kế
Những điều mình chưa học ở trường thiết kế
Đi học thiết kế ở trường đại học là một trong những quyết định đúng đắn nhất cuộc đời mình. Ở đấy mình được gặp những giảng viên truyền cảm…
[UX / UI]: 5 thói quen đơn giản giúp bạn cải thiện khả năng UX research
[UX / UI]: 5 thói quen đơn giản giúp bạn cải thiện khả năng UX research
 Hôm nay, Joanna – một nhà thiết kế trải nghiệm người dùng tại Microsoft  sẽ làm sáng tỏ năm thói quen quan trọng cần thực hành trong khi tiến hành nghiên cứu…
7 hiện tượng tâm lý người dùng trong thiết kế UX
7 hiện tượng tâm lý người dùng trong thiết kế UX
Đừng trở nên xấu xa và lạm dụng tâm lý học để thao túng người dùng cuối của bạn. Khi nhìn vào meme thú vị này, bạn có tự hỏi…