Nguyên lý thiết kế giao diện

NGUYÊN LÝ THIẾT KẾ GIAO DIỆN
PGS.TS. ng V n cĐặ ă Đứ

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


Hướng dẫn thiết kế hệ thống có tính sử dụng

Mười kinh nghiệm của Nielsen

Mười sáu qui tắc của Tognazzini

Tám qui tắc vàng của Shneiderman

Qui trình thiết kế UI của Galitz

Tổng kết bài
3/29
1. Lỗi thiết kế?
dvduc-2007/10Bài 6: Nguyên lý thiết kế giao diện

In trong Microsoft Office theo ba
cách:

Chọn mục thực đơn File/Print

Nhấn phím Print trên thanh công cụ

Phím tắt Ctrl-P: Dành cho user có kinh
nghiệm (flexibility & efficiency)

Vấn đề: Cả 3 cách không làm việc
như nhau (internal inconsistency)

Chọn File/Print hiển thị Print dialog


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

của thiết bị điều khiển phải cân đối và
vừa với bàn tay người sử dụng.
dvduc-2007/10Bài 6: Nguyên lý thiết kế giao diện5/29
Lỗi thiết kế?

Sử dụng metaphor

“Desktop” là metaphor tốt,
được sử dụng lần đầu tại
Xerox, sau đó trên Apple và
Windows.

Việc sử dụng VCR làm
metaphor cho hộp thoại in là
không phù hợp trong phần
mềm của Mannesmann Tally
dvduc-2007/10Bài 6: Nguyên lý thiết kế giao diện6/29
Lỗi thiết kế?

Sử dụng Tooltip

Sử dụng Tooltip để giúp người mới sử
dụng học các chức năng của phím đồ họa.

Khi sử dụng các phím đồ họa chuẩn thì
không nên có tooltip

"People generally don't like to use stupid
applications"


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


Các hướng dẫn platform có xu hướng rất cụ thể

Ví dụ: Sử dụng menu Exit, không sử dụng Quit, Leave hay Go Away.
dvduc-2007/10Bài 6: Nguyên lý thiết kế giao diện8/29
Nhắc lại các hướng dẫn thiết kế đã biết

Thiết kế hướng người sử dụng

Xác định ai là người sử dụng

Hiểu rõ các nhiệm vụ của họ

Luật Fitts

Kích thước điều khiển liên quan đến tầm quan trọng của nó

Cạnh màn hình là quí giá

Các controls nhỏ rất khó chọn sử dụng

Bộ nhớ

Sử dụng chia đoạn (chunking) để đơn giản hóa việc nhớ thông
tin

Không quá tải Working memory

...
dvduc-2007/10Bài 6: Nguyên lý thiết kế giao diện9/29
Nhắc lại các hướng dẫn thiết kế đã biết


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

dụng khi users là chuyên gia trong lĩnh vực ứng dụng.

Ví dụ khi thiết kế giao diện cho các bác sỹ thì phải có các từ chuyên môn

Khi user được quyền đặt tên trong UI thì họ phải được tự do lựa
chọn tên. Nên tránh giới hạn độ dài và nội dung.

Khi thiết kế giao diện để user nhập lệnh hay từ khóa tìm kiếm,
UI cần hỗ trợ nhiều nhất có thể các từ đồng nghĩa vì user khác
nhau sẽ gọi đối tượng với các tên khác nhau.

Theo Furnas (CACM v30 n11, Nov. 1987) thì có khoảng 7-18% cặp người
thống nhất trong việc gọi tên đối tượng.

Lựa chọn metaphor thận trọng sẽ góp phần vào đáp ứng UI phù
hợp với thế giới thực.
dvduc-2007/10Bài 6: Nguyên lý thiết kế giao diện11/29
Kinh nghiệm thiết kế của Nielsen

Nhất quán và chuẩn

Kinh nghiệm thứ hai là nhất quán, hay còn gọi là “Principle of
Least Surprise”

Không được làm users ngạc nhiên với cách mà lệnh và đối tượng giao diện
hoạt động.

Những cái tương tự cần phải có hình dáng và hành vi tương tự.

Loại nhất quán quan trọng khác là cách diễn đạt thông qua toàn

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