NGUYÊN LÝ THIẾT KẾ GIAO DIỆN
PGS.TS. ng V n cĐặ ă Đứ
[email protected]
HÀ NỘI – 2007/10
BÀI 6
Chủ đề môn học

Giới thiệu về HCI

Tính sử dụng được của hệ thống

Thiết kế hướng người sử dụng

Khả năng con người

Mô hình vào – ra dữ liệu

Nguyên lý thiết kế giao diện

Xây dựng prototype

Thiết kế đồ họa và tương tác

Đánh giá và kiểm thử giao diện

Các chủ đề nghiên cứu
dvduc-2007/10Bài 6: Nguyên lý thiết kế giao diện2/29
dvduc-2007/10Bài 6: Nguyên lý thiết kế giao diện
Nội dung bài này

Lỗi thiết kế trong hệ thống tương tác


Nhấn Print sẽ in trực tiếp

Ctrl-P sẽ hiển thị Print dialog

Tuy nhiên phím trên thanh công cụ
rất hữu ích
4/29
Lỗi thiết kế?

Điều khiển TV của hàng Tivo

Tính đơn giản: Không có quá nhiều
phím.

Các phím quan trọng phải đủ lớn (theo
luật Fitts) và có hình dạng duy nhất
(nhất quán).

Các phím liên quan với nhau phải
được sắp xếp theo nguyên tắc ánh xạ
tự nhiên (ví dụ các phím back/forward).
Phím chọn kênh và âm lượng phải
được ánh xạ theo chiều đứng.

Phím Pause phải lớn.

Thiết kế đồ họa tốt: Sử dụng ít màu.

Thiết kế công nghiệp tốt: Hình dáng

Hộp thoại chỉ ra user có thể
lựa chọn các fields để sắp xếp
dữ liệu

Nếu muốn sắp xếp theo số fields
ít hơn 3 thì sao?
dvduc-2007/10Bài 6: Nguyên lý thiết kế giao diện7/29
2. Thiết kế hệ thống có tính sử dụng

Hầu như, mỗi nhà nghiên cứu đều đề xuất tập hướng dẫn
thiết kế UI để lựa chọn

Các vấn đề cơ bản là như nhau

Việc tổ chức vào tập con của các luật là khác nhau.

Ví dụ

Jacob Nielsen có 10 kinh nghiệm (Usability Heuristics),

Tognazzini có 16 nguyên tắc (bao gồm cả sự gợi ý và luật Fitts),

Nguyên lý của Norman bao gồm sự gợi ý, rõ ràng, ràng buộc...

...

Hướng dẫn tuân thủ platform cũng rất quan trọng:

Mac, Windows, Gnom đều có tập hướng dẫn thiết kế riêng



Sử dụng màu

Không phụ thuộc mạnh vào việc phân biệt bằng màu

Tránh màu đỏ trên chữ xanh...

Tránh thể hiện các chi tiết bằng màu xanh

Nguyên lý của Norman về thao tác trực tiếp

Sự gợi ý

Ánh xạ tự nhiên

Rõ ràng

Phản hồi trực quan.
dvduc-2007/10Bài 6: Nguyên lý thiết kế giao diện10/29
3. Kinh nghiệm thiết kế của Nielsen

Phù hợp với thế giới thực

Nielsen gọi hướng dẫn này là “Speak the user’s language”

Nếu user nói tiếng Anh thì UI phải bằng tiếng Anh

Tránh biệt ngữ chuyên môn

Các từ chuyên môn có thể được sử dụng cho lĩnh vực ứng

bộ UI

Nếu sử dụng “share price” ở 1 nơi, “stock price” và “stock quote” thì user sẽ
do dự về 3 vấn đề khác nhau trong hệ thống.

“Phù hợp với thế giới thực” và “Nhất quán” có mâu thuẫn?

Phù hợp thế giới thực: Yêu cầu hỗ trợ từ động nghĩa (delete, erase và
remove) cho lệnh.

Nhất quán: Yêu cầu chỉ 1 tên cho cùng lệnh

Giải pháp: Khi user nói thì cho phép từ đồng nghĩa; khi UI nói thì phải nhất
quán, luôn sử dụng cùng 1 tên cho cùng 1 lệnh hay đối tượng.
dvduc-2007/10Bài 6: Nguyên lý thiết kế giao diện12/29