All Slides

TRƯỜNG ĐẠI HỌC THỦY LỢI
Khoa Công nghệ thông tin – Bộ môn CNPM
TƯƠNG TÁC NGƯỜI - MÁY
Giảng viên:
Nguyễn Thị Phương Trà
Nguyễn Thị Thu Hương
Email/Mobile:
phuongtra.hci@gmail.com/098309186
huongnt@tlu.edu.vn/0916052179
1
TỔNG QUAN MÔN HỌC
▪ Tên môn học: Tương tác người – máy

▪ Mã môn học: CSE 460
▪ Số tín chỉ: 3
▪ Số tiết: 45 tiết (30 tiết lý thuyết+ 15 tiết bài tập)
2
▪ Cách đánh giá:

▪ Điểm quá trình: 50%
▪ Kiểm tra giữa kỳ: 15%
▪ Bài tập lớn: 25% gồm 02 bài (bài tập cá nhân 5% và bài
tập làm theo nhóm 20%)
▪ Chuyên cần:10%
▪ Điểm thi cuối kỳ: 50% (Vấn đáp)
3
▪ Bài tập lớn:

➢ Bài số 1: Sinh viên làm bài tập ở nhà, nộp bài tập cho giảng viên ở
tuần thứ 3
➢ Bài số 2: Làm bài tập lớn theo nhóm
- Nhóm từ 3 – 4 sinh viên.
- Lựa chọn 1 đề tài phù hợp.
- Hoàn thành các công việc theo tiến độ bài giảng.
- Nộp báo cáo trước khi kết thúc môn học 2-3 ngày.
- Kết thúc học phần: Thi vấn đáp
4
MỤC TIÊU MÔN HỌC
▪ Nhận thức được tầm quan trọng của thiết kế giao diện người
dùng.
▪ Hiểu quy trình thiết kế giao diện người dùng.
▪ Có khả năng thiết kế tốt cho những hệ thống tương tác ở các
mức kỹ thuật, tính năng và nhận thức thông qua sự hiểu biết về
các thách thức đang đối mặt với người sử dụng của một hệ
thống.
▪ Có khả năng nhận xét đánh giá giao diện, bố cục, sắp đặt… của
các hệ thống phục vụ các hoạt động của con người.
▪ Vận dụng được kiến thức môn học vào các hoạt động khác trong
cuộc sống.
5
NỘI DUNG MÔN HỌC
Phần 1: Tổng quan về giao diện người sử dụng

➢ Tầm quan trọng của giao diện người sử dụng.
➢ Các đặc trưng của giao diện người sử dụng đồ họa và
Web.
6
Phần 2: Quy trình thiết kế giao diện người sử dụng

➢ Một số khái niệm chung.
➢ Bước 1: Hiểu rõ người sử dụng/ khách hàng
➢ Bước 2: Hiểu rõ chức năng hoạt động.
➢ Bước 3: Hiểu thấu đáo những nguyên tắc thiết kế giao
diện và màn hình hợp lý.
➢ Bước 4: Phát triển các menu hệ thống và lược đồ điều
hướng.
➢ Bước 5: Chọn loại cửa sổ thích hợp.
➢ Bước 6: Chọn thiết bị tương tác phù hợp.
7
Phần 2: Quy trình thiết kế giao diện người sử dụng (tiếp)

➢ Bước 7: Lựa chọn các điều khiển thích hợp trên màn hình.
➢ Bước 8: Viết văn bản và thông báo rõ ràng.
➢ Bước 9: Cung cấp thông tin phản hồi, hướng dẫn và hỗ trợ hiệu quả.
➢ Bước 10: Cung cấp sự quốc tế hóa và tính năng truy cập hiệu quả.
➢ Bước 11: Kiến tạo đồ họa, biểu tượng và hình ảnh có nghĩa.
➢ Bước 12: Chọn màu phù hợp.
➢ Bước 13: Tổ chức, bố trí các trang và cửa sổ.
➢ Bước 14: Kiểm thử.
8
TÀI LIỆU MÔN HỌC
❖ Tài liệu chính:

[1] Những hướng dẫn thiết yếu cho thiết kế giao diện người sử
dụng: Tập 1; Nguyễn Thị Phương Trà biên dịch; Đào Thị
Minh hiệu đính.
[2] Những hướng dẫn thiết yếu cho thiết kế giao diện người sử
dụng : Tập 2; Nguyễn Thị Phương Trà biên dịch; Đào Thị
Minh hiệu đính
9
TÀI LIỆU MÔN HỌC
❖ Tài liệu tham khảo

[1] Giao diện người - máy //Đặng Văn Đức, Nguyễn Thị
Phương Trà - Hà Nội: Khoa học tự nhiên và công nghệ,
2009.
[2] Tương tác người máy/Trần Mạnh Tuấn chủ biên, Trần Thị
Ngân,... [và những người khác] - Hà Nội: Xây dựng, 2018.
10
TẦM QUAN TRỌNG CỦA GIAO
DIỆN NGƯỜI SỬ DỤNG
11
Nội dung
▪ Một số khái niệm cơ bản về HCI

▪ Các lĩnh vực liên quan đến HCI
▪ Nhiệm vụ thiết kế của HCI
▪ Tại sao phải thiết kế giao diện người máy
▪ Tầm quan trọng của giao diện người sử dụng
▪ Ai là người tham gia thiết kế giao diện
▪ Lịch sử phát triển
12
Một số khái niệm cơ bản
▪ HCI (Human-Computer Interaction)

- Là nghiên cứu về sự tương tác (giao tiếp) giữa con người
(người dùng) và máy tính.
- Là giao diện giữa người – máy (Man – Machine Interface).
▪ HCI là mở rộng của hai lĩnh vực khoa học máy tính và công thái
học (ergonomics).
- Công thái học (còn gọi là Nhân tố con người – Human
Factors) là một nhánh của tâm lý học.
Công thái học: Khoa học về việc thiết kế các máy móc, các công cụ, các máy tính
và khu vực làm việc vật lý, sao cho mọi người dễ tìm thấy chúng và thoải mái
trong sử dụng.
- Nghiên cứu HCI bao hàm nghiên cứu khoa học máy tính và
tâm lý học.
13
Một số khái niệm cơ bản (tiếp)
▪ HCI là lĩnh vực liên quan đến thiết kế, đánh giá và cài đặt hệ
thống tính toán, tương tác để con người sử dụng chúng, và liên
quan đến nghiên cứu các hiện tượng chủ yếu xảy ra xung quanh
chúng.
(ACM SIG CHI – Special Interest Group on Computer-Human Interaction)
▪ HCI là nghiên cứu các quan hệ tồn tại giữa người sử dụng và hệ
thống máy tính để thực hiện các nhiệm vụ khác nhau của người
sử dụng.
(Chris Shaw, Faulkner)
▪ HCI liên quan đến các khía cạnh vật lý, tâm lý và lý thuyết của
tiến trình tương tác từ góc nhìn của người sử dụng.
(Dix et al)
14
▪ Giao diện người sử dụng (user interface - UI) là một tập hợp
con của lĩnh vực nghiên cứu của tương tác người máy .
▪ Phạm vi của môn học này là tập trung vào thiết kế giao diện
người - máy (giao diện người sử dụng).
15
Giao diện người sử dụng được hiểu là tiến trình thiết kế phần
mềm ghép nối sao cho hệ thống máy tính trở nên hiệu quả, dễ
sử dụng và làm được những gì con người muốn chúng làm.
16
Các thành phần trong giao diện người sử dụng

Giao diện người dùng về cơ bản có hai thành phần: đầu vào và
đầu ra.
▪ Đầu vào là cách một người truyền đạt nhu cầu hoặc mong
muốn của họ với máy tính.
➢ Một số thành phần đầu vào phổ biến là bàn phím, chuột, ngón
tay và giọng nói của một người,…
▪ Đầu ra là cách máy tính truyền đạt kết quả tính toán và các
yêu cầu của nó cho người dùng.
➢ Cơ chế đầu ra phổ biến nhất đầu ra của máy tính là màn hình
hiển thị, tiếp theo là cơ chế tận dụng khả năng thính giác của một
người: giọng nói và âm thanh.
17
Các lĩnh vực liên quan đến HCI
Tâm lý học Xã hội học

Trí tuệ nhân Nghệ thuật
tạo
Modelling
the user Groupware
Aesthetic appeal
Help Understanding the user (attract)
systems
Công thái học Interface layout Thiết kế

Equipment design
HCI Faster machines,

User body
faster systems
shape
Nhân loại học Language for Building better
Physical commands interfaces Kỹ nghệ
capabilities
Khoa học
Sinh lý học Ngôn ngữ máy tính
học
18
Các lĩnh vực liên quan đến HCI (tiếp)
▪ HCI nghiên cứu về:
▪ Hình thức: các hình thức giao tiếp giữa người và máy;
▪ Chức năng: các chức năng mới trong giao tiếp người – máy;
▪ Cài đặt: Cài đặt các giao diện;
▪ HCI liên quan đến nhiều ngành:
▪ Tâm lý học, Xã hội học, Triết học: chức năng;
▪ Sinh lý học, Công thái học: chức năng, hình thức;
▪ Thiết kế đồ họa và công nghiệp, thiết kế âm thanh,
▪ hình ảnh: hình thức, chức năng và cài đặt;
▪ Công nghệ phần mềm: chức năng và cài đặt;
▪ Kỹ thuật điện, điện tử: cài đặt;
▪ Và các lĩnh vực khác .
19
Các nhiệm vụ thiết kế của HCI
▪ Hiểu các đặc tính cơ bản của con người mà nó tác động đến
quá trình tương tác của họ với máy tính.
▪ Phân tích những công việc được con người thực hiện bằng
máy tính thông qua giao diện của chúng, hiểu được nhiệm vụ
và các yêu cầu của người sử dụng.
▪ Xác định các phương pháp mà giao diện phải hoạt động, phải
trả lời người sử dụng và phải xuất hiện như thế nào khi tương
tác.
20
Các nhiệm vụ thiết kế của HCI
▪ Thiết kế giao diện máy tính sao cho phù hợp với mục đích
và đặc điểm của con người.
▪ Thiết kế các công cụ trợ giúp các nhà thiết kế giao diện
người máy, sử dụng các công cụ này vào việc xây dựng
các giao diện tốt hơn.
▪ Đánh giá các tính năng của giao diện người-máy và tác
động của hệ thống vừa được thiết kế đối với con người.
21
Tại sao phải quan tâm tới thiết kế UI?
▪ Ngoài tính năng mạnh, phần mềm thắng lợi có thể phụ
thuộc vào tính tiện dụng→ Phần mềm nào có giao diện tốt -
phần mềm đó thắng lợi.
▪ UI là thành phần cơ bản của nhiều hệ thống máy tính
• Mã trình UI chiếm tới 50% mã trình của toàn hệ thống
▪ UI thường là khó thiết kế, khó lập trình

• Nếu UI (cả tương tác) thiết kế tồi: giá phần mềm sẽ cao, không hiệu
quả, kém hấp dẫn...
▪ Các phương pháp phát triển phần mềm trước đây chỉ tập
trung chủ yếu vào phân tích thiết kế toàn bộ hệ thống nhưng
chưa tập trung vào thiết kế UI.
22
Tại sao phải quan tâm tới thiết kế UI?
Phần mềm máy tính làm bạn mệt

mỏi?
Bạn không thấy thoải mái, vui

vẻ và hiệu quả với giao diện
phần mềm?
23
Tại sao phải nghiên cứu HCI
▪ Trong thực tế đã có quá nhiều thiết kế HCI gây khó khăn cho
người sử dụng.
▪ Thiết kế HCI tốt tạo ra khả năng con người dễ hiểu quá trình
tương tác với hệ thống trên cơ sở máy tính và cho con người khả
năng sử dụng máy tính một cách hiệu quả hơn.
▪ Một giao diện thiết kế nghèo nàn có thể là nguyên nhân người sử
dụng gây ra các lỗi "thảm khốc".
▪ Thiết kế giao diện tồi là một trong các lý do nhiều hệ thống phần
mềm không bao giờ được sử dụng.
24
❖ Ví dụ: Phiếu bầu tổng thống Mỹ, 2000
25
26
▪ Giảm thời gian lập trình;

▪ Giảm chi phí cho các trục trặc giao diện;
▪ Tăng khả năng bán được sản phẩm;
▪ Tăng năng suất và hiệu quả công việc;
▪ Giảm những bệnh nghề nghiệp do dùng máy tính;
▪ Giảm những lỗi nguy hiểm đến tính mạng;
▪ Tăng sự hài lòng của khách hàng
▪ …
27
▪ Thiết kế giao diện tốt → giảm thời gian lập trình

▪ Một phần lớn mã trình liên quan đến giao diện (50%)
▪ Nếu thiết kế giao diện sai/không hợp lý → phải làm đi làm lại vì
nếu không được sửa người sử dụng phải làm việc giao diện tồi →
kéo dài thời gian hoàn thành dự án, làm tăng sức lao động của các
bộ phận liên quan…
▪ Xét về tính kinh tế: Giao diện tốt sẽ
▪ Tăng năng suất lao động;
▪ Giảm chi phí đào tạo người sử dụng;
▪ Giảm thiểu lỗi của người sử dụng;
▪ Tăng sự hài lòng của khách hàng;
▪ Tăng hiệu quả lao động
28
▪ Tăng khả năng bán được của sản phẩm

▪ Windows và Explorer đem lại cho Microsoft lợi nhuận cực lớn;
▪ Giao diện đẹp dễ nhận được hợp đồng;
▪ Giao diện tồi có thể bị loại ngay từ đầu cho dù sản phẩm có chức
năng tốt đến mấy.
▪ Tạo ra những sản phẩm có chất lượng cao hơn (hiệu suất
lao động tăng)
▪ Người sử dụng tiết kiệm thời gian khi sử dụng giao diện nên có thể
tập trung vào công việc chính của họ;
▪ Giảm thiểu thời gian tìm kiếm thông tin, định dạng văn bản...
29
❖Ví dụ: Giao diện phần mềm phù hợp?
30
Giao diện người sử dụng là phần quan trọng nhất của

bất kỳ hệ thống máy tính nào.
Tại sao vậy?
Bởi đây là phần hướng tới hầu hết người sử dụng.
Phần này có thể được nhìn thấy,được nghe thấy và
được tác động vào nó. Còn phần lớn mã nguồn phần
mềm là không nhìn thấy mà ẩn phía sau các màn
hình, bàn phím và chuột.
31
Mục đích của việc thiết kế giao diện rất đơn giản: làm cho con
người có thể làm việc với máy tính một cách dễ dàng, hữu ích và
thích thú.
Theo Galitz
32
Các yếu tố xem xét khi thiết kế UI
▪ Sự kết hợp của các cơ chế đầu vào và đầu ra được thiết kế tốt
để thỏa mãn nhu cầu, khả năng và hạn chế của người sử dụng.
▪ Cho phép người sử dụng tập trung vào thông tin và tác vụ của
mình.
33
Tầm quan trọng của thiết kế phù hợp
▪ Thiết kế tương tác có nghĩa là thiết kế các sản phẩm tương

tác để hỗ trợ mọi người trong cuộc sống hàng ngày và làm
việc của họ.
▪ Giao diện được thiết kế tốt sẽ rất hữu ích cho người dùng để
phân tích hiệu suất của hệ thống.
▪ Nó là một thành phần hiển thị một số hoạt động phức
tạp được cung cấp cho hệ thống.
34
▪ Với các công cụ và công nghệ hiện nay, cùng với sự thúc đẩy
của chúng ta để tạo ra các màn hình và giao diện thực sự tiện
dụng và hiệu quả, tại sao chúng ta vẫn tiếp tục cho ra các hệ
thống hoạt động không hiệu quả, khó hiểu hoặc tệ nhất là
không sử dụng được?
▪ Nguyên nhân là:
1. Chúng ta không thực sự quan tâm?
2. Chúng ta không có giác quan thông thường?
3. Chúng ta không có thời gian?
4. Chúng ta vẫn không biết cái gì thực sự tạo ra thiết kế
tiện dùng?
35
Ý kiến của tác giả thì nguyên nhân gốc gác là nguyên nhân số 4,
cộng thêm với nguyên nhân số 3.
Chúng ta đã rất quan tâm. Nhưng chúng ta dường như không bao
giờ có thời gian để tìm hiểu cái gì tạo ra một thiết kế phù hợp hoặc
không áp dụng nó một cách hợp lý.
Nói tóm lại, rất nhiều người trong chúng ta có nhiều việc khác để
làm ngoài việc thiết kế các màn hình và giao diện.
Do vậy mặc dù chúng ta đã ép mình bỏ nhiều công sức và thời
gian nhưng kết quả thường không được đền đáp xứng đáng.
36
Ví dụ - Màn hình những năm 70
37
38
39
Ví dụ - Màn hình những năm gần đây
40
Có những giao diện như thế…
41
Những ví dụ về thảm họa trong thiết kế
42
43
44
Có những giao diện như thế…
45
Tác động của thiết kế không phù hợp
✓ Nếu thiết kế rất phức tạp, khó hiểu và không đủ đầy đủ thì
mọi người sẽ gặp khó khăn trong công việc và phạm nhiều
lỗi hơn.
✓ Thiết kế không phù hợp có thể gây ra sự thất vọng ở mọi

người đối với hệ thống và họ có thể ngừng sử dụng nó.
✓ Một số vấn đề sức khỏe cũng có thể phát sinh
46
Thiết kế phù hợp
▪ Thiết kế phù hợp là sự kết hợp tốt của các quy trình đầu vào và
đầu ra để để đáp ứng các yêu cầu của người dùng một cách hiệu
quả nhất.
▪ Đặc điểm của thiết kế phù hợp:
✓ Nó cho phép người dùng tập trung vào dữ liệu và tác vụ,…
✓ Nó cung cấp dữ liệu cho người dùng để thực hiện các tác vụ
của họ.
47
Các yếu tố xem xét khi thiết kế UI
▪ Những gì người sử dụng muốn và mong đợi

▪ Những giới hạn về thể chất và khả năng mà con người sở hữu
▪ Hệ thống xử lý thông tin hoạt động như thế nào.
▪ Những gì mọi người thấy thú vị và hấp dẫn.
▪ Các đặc tính kỹ thuật và hạn chế của phần cứng và phần mềm
máy tính cũng phải được xem xét
48
Ai tham gia xây dựng giao diện
▪ Chuyên gia thiết kế đồ họa

▪ Người thiết kế giao diện
▪ Người làm tài liệu kỹ thuật
▪ Nhân viên tiếp thị
▪ Kỹ sư kiểm thử
▪ Kỹ sư phần mềm
49
Lịch sử phát triển giao diện người máy
Steve Jobs
VT80, 1977
Apple iMac, 2002

Xerox Star, 1981
IBM7030, 1961 IBM-PC, 1981

Time
50
❖ Trước 70
▪ UI không được xem là quan trọng vì máy tính ít chức năng.
Không có khả năng đồ họa.
❖ Đầu những năm 70:
▪ Xuất hiện khái niệm Man-Machine Interface (MMI), User
Interface (UI)
▪ Xerox có ý tưởng ban đầu về thiết kế đồ họa cho hệ thống
tương tác.
Giao diện phi đồ họa

Giao diện dòng lệnh
51
❖ Cuối những năm 70 – đầu những năm 80:

▪ Khái niệm GUI.
▪ PC thương mại đầu tiên có GUI: Xerox Star
❖ Những năm 80:
▪ Khái niệm HCI thường được sử dụng thay cho khái niệm UI
▪ MS Windows với GUI trên IBM-PC
❖ Những năm 90 - đến nay
▪ Nghiên cứu về thực tại ảo,
▪ Nhận dạng và tổng hợp tiếng nói
▪ Nhận dạng chữ viết tay...
52
Tổng kết
▪ Các khái niệm cơ bản về HCI

▪ Nhiệm vụ của thiết kế HCI
▪ Tầm quan trọng của HCI
▪ Ai là người tham gia thiết kế giao diện
▪ Lịch sử phát triển của giao diện người - máy
53
CÁC ĐẶC TRƯNG CỦA GIAO DIỆN
NGƯỜI SỬ DỤNG ĐỒ HOẠ VÀ WEB
Giảng viên: Nguyễn Thị Phương Trà

1
Nội dung
▪ Các kiểu tương tác.

▪ Giao diện người sử dụng đồ họa.
▪ Giao diện người sử dụng Web.
▪ Sự kết hợp của các Hệ thống đồ họa thương mại và Web.
▪ Các nguyên tắc thiết kế giao diện người sử dụng
2
Kiểu tương tác
▪ Tương tác được xem như đối thoại giữa máy tính và
▪ Một kiểu tương tác, đơn giản chỉ là một phương thức
hay nhiều phương thức mà người sử dụng và hệ thống
máy tính giao tiếp với nhau.
▪ Ngày nay, các nhà thiết kế được lựa chọn nhiều kiểu
tương tác trong hệ thống đồ họa hay trang Web và các
thiết kế ứng dụng.
3
Các kiểu tương tác
▪ Các dòng lệnh

▪ Lựa chọn menu
▪ Điền biểu mẫu (điền form)
▪ Thao tác trực tiếp
▪ Thuyết hình người
4
Dòng lệnh
▪ Người sử dụng phải nhấn một phím chức năng nhất

định hoặc gõ một dòng lệnh vào vùng nhập được
thiết kế trên màn hình
▪ Có thể nhập lệnh thông qua:
▪ Các chữ viết tắt
▪ Ký tự
▪ Các từ
▪ Tổ hợp từ
▪ Các loại mã
5
Lựa chọn menu
▪ Là phương pháp hiện thị tập hợp các lựa chọn cho người
sử dụng chọn
▪ Các phương pháp lựa chọn trong menu:
▪ Mũi tên
▪ Kí tự, con số
▪ Con trỏ (kéo xuống, cuộn, kích)
6
Điền biểu mẫu
▪ Được sử dụng trong thu thập và khôi phục dữ liệu

▪ Rõ ràng, trực quan
▪ Yêu cầu:
▪ Thiết kế tốt, trong sáng
▪ Tính bảo mật
7
Thao tác trực tiếp
▪ Cho phép người sử dụng thao tác trực tiếp với các
thành phần đã được hiển thị trên màn hình
▪ Các thao tác sử dụng: Chỉ cần con trỏ chuột /bàn di
chuột, nhấn vào biểu tượng, đường link hoặc vị trí
của đối tượng
8
Thuyết hình người
▪ Cố gắng tương tác với con người như con người tương
tác với nhau.
▪ Giao diện thuyết hình người gồm:
▪ Các cuộc hội thoại bằng ngôn ngữ nói tự nhiên
▪ Cử chỉ bằng tay
▪ Các biểu lộ khuôn mặt
▪ Các động thái của mắt
9
ưu điểm: Tự nhiên; Khuyết điểm:
Giao diện đồ họa
▪ Giao diện người sử dụng đã được mô tả như là tập hợp

các kỹ thuật và các cơ chế để tương tác với đối tượng
nào đó.
▪ Trong một giao diện đồ họa, cơ chế tương tác cơ bản là
một thiết bị trỏ ‐ là một thiết bị điện tử phù hợp với tay
người.
10
Giao diện đồ họa
▪ Tập hợp những phần tử mà người sử dụng sẽ tương

tác là các đối tượng (objects). Chúng có thể được
nhìn thấy, nghe thấy, cảm nhận thấy hay có thể nhận
biết được bằng các cách khác.
▪ Con người thực hiện các thao tác (gọi là các hành
động) lên các đối tượng. Các thao tác gồm việc truy
cập và sửa đổi các đối tượng bằng việc trỏ, lựa chọn
và thao tác.
11
Tính phổ biến của các hệ thống đồ họa
▪ Các hệ thống đồ họa xuất hiện mang lại một sự thay

đổi rất lớn.
▪ Các giao diện được đơn giản hóa, đã trình bày theo
lối suy nghĩ là giảm yêu cầu phải nhớ cho người sử
dụng, làm cho việc sử dụng hiệu quả hơn các năng
lực xử lý thông tin và làm giảm đáng kể các yêu cầu
phải học về hệ thống.
12
▪ Các màn hình đồ họa được giả định trông giống

không gian ba chiều.
▪ Thông tin hiển thị trên các cửa sổ, các hộp chữ nhật
nhỏ như được nổi lên trên nền mặt phẳng. Các cửa
sổ cũng có thể hiển thị nổi phía trên các cửa sổ khác.
▪ Các điều khiển xuất hiện nổi lên phía trên màn hình
và chuyển động khi được kích hoạt. Các dòng xuất
hiện được khắc vào màn hình.
13
▪ Thông tin có thể xuất hiện và biến mất khi cần thiết,
đồng thời trong một số trường hợp văn bản có thể
được thay thể bằng các hình ảnh đồ họa gọi là các
biểu tượng (icon). Những biểu tượng này có thể đại
diện cho các đối tượng hoặc các hành động.
▪ Sự điều hướng màn hình và các lệnh được thực

hiện thông qua các thanh menu (menu bar) và menu
xổ xuống (pull‐ down menu). Các menu “sẽ xuất hiện
bất ngờ” trên màn hình.
14
Tính phổ biến của màn hình đồ họa
▪ Bên trong màn hình, các trường lựa chọn như nút
radio (radio button), hộp kiểm tra (check box), hộp
danh sách (list box) và các bảng màu (pallette) cùng
hiển thị với trường nhập văn bản (text) trước đây.
▪ Các đối tượng và hành động của màn hình thường

được lựa chọn thông qua sử dụng các thiết bị trỏ,
chẳng hạn như chuột hay cần điều khiển, thay vì sử
dụng bàn phím truyền thống.
15
▪ Cấu hình của máy tính ngày càng mạnh và có nhiều

cải tiến trong lĩnh vực hiển thị
→ cho phép một hệ thống phản ứng với các hành động
của người sử dụng một cách nhanh chóng, năng động
và có ý nghĩa.
▪ Giao diện mới này được mô tả như hiển thị màn hình
"desktop" của máy tính với các ghi chú nằm rải rác,
các trang và các đối tượng như các file, khay tài liệu
(tray) và thùng rác (trash can) được sắp xếp xung
quanh màn hình. Đôi khi người ta gọi tắt là giao diện
WIMP (windows, icons, menus, and pointers – cửa
sổ, biểu tượng, menu và thiết bị con trỏ)
16
▪ Hiển thị thông tin bằng đồ họa tận dụng các khả
năng xử lý thông tin của con người.
▪ Có thể làm giảm yêu cầu về ghi chép và tổ chức lại
thông tin bằng nhận thức và trí óc, giảm tải bộ nhớ
→ Tạo cơ hội truyền thông tin nhanh hơn giữa các
máy tính và con người; biểu diễn nhiều thông tin
hơn; đơn giản hóa nhận thức về cấu trúc.
▪ Các phương thức đồ họa có thể tạo thêm sự hấp
dẫn, lôi cuốn cho giao diện; cho phép tùy biến nhiều
hơn
17
Khái niệm thao tác bằng tay trực tiếp
Các hệ thống “thao tác bằng tay trực tiếp (direct

manipulation)” - Theo Shneiderman, 1982- có các đặc
tính sau:
1. Hệ thống được miêu tả sinh động như phạm vi của thế
giới thực.
2. Các đối tượng và các hành động được hiển thị liên tục
3. Các hành động có tốc độ nhanh và tăng dần với hiển thị
trực quan các kết quả.
4. Các hành động phát sinh có thể hủy bỏ dễ dàng
18
Thao tác bằng tay gián tiếp
Trong thực tế giao tiếp bằng tay trực tiếp toàn bộ các
đối tượng và hành động của màn hình có thể không
khả thi vì các lý do sau:
▪ Khó định nghĩa thao tác trong hệ thống đồ họa.
▪ Khả năng đồ họa của hệ thống có thể bị hạn chế.
▪ Khoảng không gian sẵn có để đặt các điều khiển
thao tác bên trong cửa sổ có thể bị hạn chế.
▪ Có thể gây khó khăn cho người sử dụng để học
và nhớ tất cả các thao tác và hành động cần thiết.
Khi điều này xảy ra, thao tác bằng tay gián tiếp (indirect
manipulation) sẽ được cung cấp.
19
Thao tác bằng tay gián tiếp…
Thao tác bằng tay gián tiếp sẽ sử dụng từ và văn bản

(gõ thay vì trỏ)
Ví dụ:
Các menu xổ xuống (pull‐ down) hay menu bật lên
(pop‐ up), dùng các ký hiệu (symbols) và sử dụng hành
động gõ thay cho hành động trỏ.
20
Câu hỏi
Hãy tìm ví dụ minh họa cho khái niệm

Thao tác bằng tay trực tiếp
Và
Thao tác bằng tay gián tiếp
21
Lưu ý
Hầu hết các hệ thống window là sự kết hợp của cả thao

tác bằng tay trực tiếp và thao tác bằng tay gián tiếp.
Chọn kiểu tương tác nào ‐ thao tác trực tiếp, thao tác
gián tiếp hay kết hợp cả hai – sẽ là tốt nhất, dưới những
điều kiện nào và dùng cho người nào, sẽ vẫn còn là
một câu hỏi mà câu trả lời vẫn vượt quá sự hiểu biết
của chúng ta (Galitz)
22
Ưu và nhược điểm của các hệ thống đồ họa
Ưu điểm:
▪ Các ký hiệu (biểu tượng) được nhận thức nhanh hơn là
văn bản (text).
▪ Học tập nhanh hơn.
▪ Sử dụng và giải quyết vấn đề nhanh hơn.
▪ Ghi nhớ dễ dàng hơn.
▪ Tự nhiên hơn
▪ Tận dụng các ký hiệu có tính trực quan/không gian.
▪ Khuyến khích tư duy cụ thể hơn.
▪ Cung cấp ngữ cảnh.
▪ Ít lỗi hơn.
23
Ưu điểm (tiếp)
▪ Cảm giác kiểm soát tăng lên
▪ Thông tin phản hồi ngay lập tức
▪ Có thể đoán được phản ứng của hệ thống
▪ Dễ dàng hủy bỏ các hành động
▪ Giảm lo lắng khi sử dụng
▪ Thu hút hơn
▪ Tốn ít không gian
▪ Thay thế ngôn ngữ các quốc gia
▪ Tăng thêm dễ dàng với hiện thị bằng văn bản
▪ Giảm các yêu cầu đánh máy
▪ Chuyển tiếp dễ dàng từ hệ thông ngôn ngữ lệnh
24
Nhược điểm:
1. Thiết kế phức tạp hơn
2. Việc học là cần thiết
3. Thiếu thực tiễn từ các nguyên tắc thiết kế
4. Sự không nhất quán trong kỹ thuật và thuật ngữ
5. Có mặt trong lúc làm việc
6. Không phải luôn luôn quen thuộc
7. Sự hiểu biết của con người là có giới hạn
8. Các yêu cầu thao tác cửa sổ
9. Sự hạn chế về xây dựng các biểu tượng
10. Không nhiều các biểu tượng tồn tại được kiểm thử
25
Nhược điểm:
11. Không hiệu quả đối với nhân viên đánh máy trực
tiếp
12. Không hiệu quả với người sử dụng có kinh nghiệm
13. Không phải lúc nào tương tác cũng được yêu thích
14. Kiểu tương tác không phải lúc nào cũng nhanh nhất
15. Tăng sự hỗn loạn và nhầm lẫn
16. Nhân tố chơi bời (futz) và tầm phào (fiddle).
17. Có thể tốn không gian màn hình.
18. Các hạn chế phần cứng.
26
Lưu ý
▪ Nghiên cứu và kinh nghiệm đã chỉ ra rằng các hình

thức giao diện khác nhau cũng có các thế mạnh và
điểm yếu khác nhau.
▪ Một số khái niệm và nhiệm vụ rất khó có thể truyền tải
hình tượng và dường như không phù hợp với sự trình
bày thuần túy bằng đồ họa. Tuy nhiên, các khái niệm và
nhiệm vụ khác lại phù hợp hơn với các tiếp cận như
vậy.
▪ Các nhiệm vụ mà được coi là phù hợp nhất với các
những kiểu cách tương tác vẫn cần phải tiếp tục nghiên
cứu.
▪ Nhiều người sử dụng có thể không thích tất cả các khía
cạnh của một hệ thống đồ họa.
27
Tóm lại
▪ Thiết kế một giao diện (chứ không phải kiểu cách tương
tác của nó) sẽ là nhân tố quyết định tốt nhất về tính dễ
dàng sử dụng.
▪ Những ưa thích của người sử dụng phải được xem xét
bằng cách chọn một hình thức tương tác nhất định.
▪ Đa số các trường hợp, các từ ngữ thường làm người sử
dụng dễ hiểu hơn các biểu tượng.
▪ Nội dung của một màn hình đồ họa là quan trọng với tính
hữu ích của nó. Sự hiển thị sai hay hiển thị lộn xộn trên
thực tế có thể gây ra rắc rối nhiều hơn.
▪ Một hệ thống đồ hoạ thành công phụ thuộc vào các kỹ
năng của những người thiết kế ra nó theo các nguyên tắc
về tính tiện dùng.
28
Giao diện ngươi sử dụng web
▪ Việc mở rộng Trang tin toàn cầu (World Wide Web‐

W W W ) có từ đầu những năm 1990 đã thực sự gây
ngạc nhiên
▪ Thoạt đầu W W W chỉ đơn giản là một phương tiện
dành cho các nhà khoa học và các nhà nghiên cứu,
nhưng W W W đã nhanh chóng lan truyền sau vào
các doanh nghiệp, tổ chức và nhiều gia đình trên thế
giới.
▪ Những mục đích Web được xuất phát trong một xã
hội định hướng thị trường khao khát sự tiện lợi và
thông tin
29
▪ Ban đầu, thiết kế giao diện Web chủ yếu là việc thiết
kế sự điều hướng và sự hiển thị các thông tin. Nó
bao gồm nội dung, chứ không có dữ liệu.
▪ Sau này, những tiêu điểm thứ yếu đã được quan tâm
đặc biệt ‐ đó là thiết kế các ứng dụng Web. Việc phát
triển các ứng dụng trước đó sử dụng các hệ thống
đồ họa ngày nay dần chuyển hướng đến Web với
những nền tảng của ứng dụng đó.
30
▪ Thiết kế giao diện chú trọng đến nội dung ‐ hay

thông tin‐ thường được gọi là thiết kế trang Web
(Web page).
▪ Một giao diện chú trọng đến ứng dụng thường được
dẫn chiếu là thiết kế ứng dụng Web (Web
application).
▪ Thiết kế trang Web và thiết kế ứng dụng Web đều
có chung những tính năng tương tự, đều nặng về
đồ họa và thông tin phong phú. Nhưng, cũng có
những sự khác biệt đáng kể.
31
▪ Thiết kế giao diện trang Web có một vấn đề lớn về việc

cân bằng hợp lý cấu trúc và các mối quan hệ của các
menu, nội dung và những tài liệu, các hình ảnh đồ họa
liên kết khác.
▪ Trang Web là một môi trường điều hướng để người
xem có thể di chuyển giữa các trang thông tin một cách
liên tục.
32
Giao diện ngươi sử dụng web (tiếp)
▪ Một ứng dụng Web thường được thiết kế để tập hợp

và xử lý dữ liệu.
▪ Ranh giới giữa thiết kế trang Web và ứng dụng Web
không phải lúc nào cũng rõ ràng. Tuy nhiên, nhìn
chung mục đích thiết kế của một trang Web chủ yếu
là cung cấp thông tin. Một ứng dụng Web cho phép
một người làm và lưu lại một số thứ.
33
Tính phổ biến của Web
Nếu như việc giao diện người sử dụng đồ họa đã làm

cuộc cách mạng về giao diện người sử dụng, thì web
cũng làm cuộc cách mạng điện toán.
▪ Nó cho phép hàng triệu người sống rải rác nhiều nơi
trên toàn thế giới có thể giao tiếp được với nhau, truy
cập thông tin, xuất bản và có thể nghe thấy được.
▪ Nó cho phép con người điều khiển nhiều nội dung
hiển thị và diễn tả lại các trang Web.
34
Tính phổ biến của Web
▪ Con người cũng có thể thay đổi các diện mạo như : kỹ
thuật trình bày bản in và màu sắc, tắt chức năng đồ
họa, quyết định truyền hay không truyền dữ liệu qua
các kênh truyền không an toàn, và chấp nhận hay từ
chối các cookie.
▪ Không lúc nào trong lịch sử điện toán mà con người
được kiểm soát nhiều như vậy.
▪ Thế mạnh của Web là ở chỗ năng lực làm chủ các ứng
dụng của nó, liên kết các cơ sở dữ liệu và xử lý sự kiện
xảy ra trên nhiều loại máy móc của một công ty hay
một tổ chức
35
Sự kết hợp các hệ thống đồ họa
thương mại và web
▪ Trong một hệ thống khép kín, các truy vấn dùng cho
các cơ sở dữ liệu có thể được thực hiện, thông tin
liên lạc nội bộ được thực hiện, và các thông tin hữu
ích dùng cho nhân viên có thể luôn sẵn sàng.
▪ Các hệ thống hiện tại cũng có thể được triển khai với
nhiều giao diện đồ hoạ truyền thống hơn.
▪ Các hệ thống đồ họa thương mại và Web đang được
kết hợp vào trong một thực thể thông dụng. Những
hệ thống Web này được gọi là mạng nội bộ
(Intranet).
36
So sánh các đặc tính của Intranet và Internet
Một mạng nội bộ Intranet có nhiều đặc tính giống với

mạng Internet. Tuy nhiên chúng khác nhau ở một số
cách thức quan trọng.
1. Người sử dụng (users).
2. Các tác vụ (tasks).
3. Các loại thông tin (typeofinformation).
4. Khối lượng thông tin (amountofinformation).
5. Phần cứng và phần mềm.
6. Xu thế thiết kế
37
Các nguyên tắc thiết kế giao diện người
sử dụng
▪ Trong lịch sử của tương tác người ‐ máy, nhiều nhà

nghiên cứu và các tác giả đã cố gắng định nghĩa một bộ
các nguyên tắc chung cho thiết kế giao diện
▪ Tập hợp các nguyên tắc được chỉ ra đó chỉ phản ảnh
những gì chúng ta thấy hiện nay, mà còn những gì mà
chúng ra nghĩ hiện này.
▪ Nhiều nguyên tắc được dựa trên nghiên cứu, các
nguyên tắc khác dựa trên tư duy tổng hợp của những
người chuyên làm việc với các giao diện người sửdụng.
▪ Những nguyên tắc này sẽ tiếp tục phát triển, mở rộng
và được chắt lọc thành kinh nghiệm của chúng ta với
các giao diện đồ hoạ và Web ngày càng tăng lên.
38
Các nguyên tắc tổng quát
▪ Đây là những nguyên tắc cơ bản cho việc thiết kế và

triển khai thực hiện tất cả các giao diện hiệu quả, bao
gồm cho cả giao điện đồ hoà và giao diện web.
▪ Những nguyên tắc này là các đặc tính tổng quát của
giao diện, và chúng áp dụng cho tất cả các trường hợp.
▪ Các nguyên tắc cụ thể làm thế nào để thực hiện được
nhiều mục tiêu này được trình bày trong phần 2.
▪ Những nguyên tắc này được trình bày theo thứ tự bảng
chữ cái tiếng Anh chứ không theo thứ tự ưu tiên nào
cả.
39
Các nguyên tắc tổng quát (tiếp)
1 . Khả năng tiếp cận (acce ssibility): Bốn đặc tính về thiết kế
có khả năng tiếp cận là khả năng nhận biết, khả năng thao tác, tính
đơn giản và tính khoan dung.
2. Hài lòng về tính thẩm mỹ (Aesthetically Pleasing)
3. Tính khả dụng (Availability)
4. Tính rõ ràng (Clarity)
5. Tính tương hợp – khả năng tương thích (Compatibility)
6. Khả năng cấu hình (Configurability)
7. Tính nhất quán (Consistency)
8. Điều khiển (Control)
9. Tính trực tiếp (Directness)
40
10. Tính hiệu quả (Efficiency)

11. Tính quen thuộc (Familiarity )
12. Tính mềm dẻo, linh hoạt (Flexibility)
13. Tính khoan dung (Forgiveness)
14. Sự đam mê (Immersion)
15. Tính rõ ràng (Obviousness)
16. Khả năng thực hiện(Operability)
17. Khả năng nhận thức (Perceptibility)
18. Ấn tượng tích cực đầu tiên (Positive First Impression)
41
18. Có thể dự đoán trước (Predictability)

19. Khả năng khôi phục (Recovery)
20. Khả năng đáp ứng (Responsiveness)
21. An toàn (Safety)
22. Tính đơn giản (Simplicity)
23. Tính trong suốt (Transparency)
24. Các thỏa hiệp (Trade‐ Offs)
25. Tính trực quan (Visibility)./.
42
Tổng kết bài
Kiến thức học:

▪ Các kiểu tương tác.
▪ Giao diện người sử dụng đồ họa.
▪ Giao diện người sử dụng Web.
▪ Sự kết hợp của các Hệ thống đồ họa thương mại và
Web.
▪ Các nguyên tắc thiết kế giao diện người sử dụng
43
TÍNH TIỆN DÙNG CỦA HỆ
THỐNG TƯƠNG TÁC

1
Nội dung
1. Các lỗi trong thiết kế UI cho hệ thống tương tác
2. Một số nguy cơ tiềm ẩn trong thiết kế UI
3. Tính tiện dùng là gì?
4. Các tính chất của tính tiện dùng
5. Nguyên lý thiết kế hệ thống có tính tiện dùng
2
Lỗi trong thiết kế tương tác
3
Zoc uses multi-row tab control
4
5
Một số nguy cơ tiểm ẩn trong thiết kế UI
❖ Không phân tích và thấu hiểu nhu cầu mong muốn

của người dùng
❖ Chỉ tập trung vào tính năng và các thành phần thiết kế
“đơn giản” hay “phù phiếm”
❖ Ít hoặc không sáng tạo trong các nguyên mẫu thành
phần của bản thiết kế
❖ Không kiểm thử tính tiện dùng
❖ Đội thiết kế chưa có tầm nhìn chia sẻ với mục tiêu
thiết kế giao diện, người sử dụng
❖ Trao đổi giữa các thành viên trong đội thiết kế chưa
đầy đủ
6
Tính tiện dùng của hệ thống
❖ Khái niệm tính tiện dùng (usability/usable) được Bennett

đề xuất lần đầu vào năm 1979.
❖ Năm 1991,Shacked định nghĩa tính tiện dùng: “khả năng
hệ thống được sử dụng bởi con người một cách dễ dàng
và hiệu quả”.
❖ Tính tiện dùng được xác định bởi “người sử dụng có thể
sử dụng tốt các chức năng hệ thống như thế nào”
❖ Định nghĩa của ISO 9241-11:
Tính tiện dùng được xem như phạm vi trong đó sản
phẩm được sử dụng bởi nhóm người xác định để đạt
được những mục tiêu xác định với tính hiệu quả
(effectiveness), năng suất (efficiency) và sự thỏa mãn
(satisfaction) trong ngữ cảnh sử dụng xác định.
7
Các khái niệm liên quan
❖ Mục tiêu (Goal): Kết quả dự kiến.
❖ Effectiveness: Đem lại kết quả đúng như dự kiến. Đạt được
mục tiêu một cách chính xác và đầy đủ (ví dụ tốc độ thực hiện
cao, không lỗi).
❖ Hiệu suất (Efficiency): Tiêu hao năng lượng và tài nguyên phù
hợp để đạt được mục tiêu một cách chính xác và đầy đủ. Là
thước đo mức độ cố gắng của người sử dụng để đạt được
mục tiêu đề ra.
❖ Sự thỏa mãn: Không bực dọc, lo lắng và có quan điểm tích cực
với việc sử dụng sản phẩm.
❖ Ngữ cảnh ứng dụng: Người sử dụng, nhiệm vụ, thiết bị (phần
cứng, phần mềm,...), môi trường vật lý, xã hội.
❖ Nhiệm vụ (task): Các hoạt động cần thiết để đạt được mục
tiêu.
8
Ví dụ về tính tiện dùng trong cuộc sống
9
Các vấn đề tiện dùng thường gặp
Năm 1994, Mandel theo báo cáo của các chuyên gia tại hãng IBM đã liệt kê 10
vi phạm ảnh hưởng đến tính tiện dùng:
1. Menu và biểu tượng nhập nhằng;
2. Ngôn ngữ chỉ cho phép đi theo một hướng trong hệ thống;
3. Hạn chế đầu vào và thao tác trực tiếp;
4. Hạn chế lựa chọn và điểm nổi bật;
5. Trình tự các bước không rõ ràng;
6. Nhiều bước quản lý giao diện hơn thực hiện nhiệm vụ;
7. Liên kết phức tạp với các ứng dụng khác và giữa các ứng
dụng;
8. Phản hồi và khẳng định không phù hợp;
9. Hệ thống kém đề phòng và kém thông minh;
10. Các thông điệp lỗi, trợ giúp, tài liệu không phù hợp.
10
Một nghiên cứu của Ceaparu (2004) cho thấy: người sử

dụng đã dùng đến 40% thời gian sử dụng máy tính của
họ để thử làm cho máy tính làm việc hoặc làm cho máy
tính hoạt động tốt hơn.
Cài đặt khó khăn, những vấn đề cần giải quyết về virus,
và kết nối đã gây khó khăn cho con người.
Các hệ thống gây trì hoãn cho công việc của người sử
dụng hầu như là do các vấn đề về hệ điều hành, thư điện
tử và trình duyệt Web.
11
Galitz tổng kết các lỗi về tính tiện dụng trong website đặc biệt là gây
lãng phí thời gian và thường gây ức chế cho người sử dụng:
▪ Gây nhiễu thị giác
▪ Làm giảm khả năng đọc thông tin
▪ Nhiều chi tiết khó hiểu
▪ Nhiều trò gây bực mình
▪ Sự điều hướng lẫn lộn
▪ Điều hướng không hiệu quả
▪ Tổ chức hoạt động không hiệu quả
▪ Thanh cuộn quá dài và không hiệu quả
▪ Quá tải thông tin
▪ Sự không nhất quán trong thiết kế
▪ Thông tin quá cũ hoặc không đề ngày tháng
▪ Thiết kế lỗi thời gây nên bởi sự mô phỏng các tài liệu hướng dẫn
đã in và hệ thống cũ
12
Gây nhiễu thị giác
✓ Sự thiếu đi “không gian trống”, nhiều đồ họa vô

nghĩa, cách trang trí không cần thiết và lãng
phí→website bố trí các thành phần hỗn độn.
✓ Nội dung có ý nghĩa khó tìm → người sử dụng mất

thời gian tìm.
✓ Các phần tử hiển thị vô dụng.
13
Làm giảm khả năng đọc thông tin
✓ Việc sử dụng quá nhiều các loại kiểu chữ, màu sắc
biến ảo thất thường làm màn hình như cuộc chiến
hỗn độn→ giảm tập trung của người sử dụng, giảm
khả năng đọc của người sử dụng.
✓ Các nền của giao diện có màu sắc sáng hay có
những bức tranh hoặc các mẫu hoa văn sẽ làm giảm
đi tính dễ đọc của các dòng chữ được viết phía trên.
14
Nhiều chi tiết khó hiểu
✓ Một số chi tiết tiết kế không liên quan tới chức năng,
người sử dụng, xa rời mục đích sử dụng và không rõ
ràng.
✓ Các nút hay các vùng lệnh mà không biểu thi trực
quan→ người sử dụng khó phát hiện.
✓ Ngôn ngữ cũng thường xuyên bị lẫn lộn với các thuật
ngữ được người phát triển sử dụng chứ không phải
là những từ ngữ dành cho người sử dụng.
15
Nhiều trò gây bực mình
✓ Các chi tiết chuyển động không ngừng, các dòng chữ
chạy cuộn lên cuộn xuống, nhấp nháy hay những hình
ảnh hoạt hình chạy lòng vòng sẽ ganh đua với các nội
dung có ý nghĩa nhằm thu hút sự chú ý của người sử
dụng
✓ Nhạc nền hay bất kỳ âm thanh gì tự động bật lên sẽ làm
gián đoạn sự tập trung của người sử dụng, hay các cửa
sổ không được yêu cầu tự động bật lên (pop-up
windows) làm mất nhiều thời gian hơn của người sử
dụng.
→ Khi giác quan người sử dụng bị tác động quá nhiều, thì
hậu quả là tầm nhìn của họ bị giới hạn đi nhiều
16
Sự điều hướng lẫn lộn
✓ Cấu trúc của một trang Web thường giống với một mê
cung gồm rất nhiều trang đan xoắn vào nhau→ làm người
sử dụng lạc vào trong đó.
✓ Nghèo nàn, tủn mủn và thiếu sự tổ chức tồn tại giữa các
trang hay kích cỡ và độ sâu của nhiều trang Web thậm
chí có thể dẫn đến “mất cảm giác không gian”.
✓ Các đường liên kết điều hướng sẽ dẫn đến các “ngõ cụt”
(hay các điểm chết) mà từ đó bạn không thể quay trở lại
được, hoặc đưa bạn đến nơi mà bạn chẳng biết là đâu.
→Sự điều hướng lẫn lộn (hay định vị phức tạp) làm hỏng
những kỳ vọng của người sử dụng và gây ra hành vi không
mong muốn.
17
Điều hướng không hiệu quả.
✓ Người sử dụng phải đi ngang

qua những trang có nội dung vô
nghĩa để tìm trang có nội dung
cần thiết.
✓ Toàn bộ màn hình được dùng

để trỏ tới trang khác.
→Đó là sự lãng phí lớn không gian
đồ họa và chỉ làm gia tăng số trang
một cách không cần thiết.
✓ Đường dẫn qua mê cung điều hướng đó thường dài và

chán ngắt. Rất nhiều dữ liệu vô ích phải được sàng lọc qua
trước khi nhu cầu được đáp ứng. Việc sử dụng hàng loạt
các trang nhỏ cùng với rất ít nội dung sẽ thường sẽ tạo ra
cảm giác khó chịu 18
Tổ chức hoạt động không hiệu quả
Thời gian bị lãng phí vào làm những việc vô ích:

✓ Thời gian tải một trang về có thể kéo quá dài.
Ví dụ, các trang chứa nhiều hình đồ họa hay bản đồ
lớn, các tiêu đề nặng nề ,hoặc quá nhiều màu sắc sẽ
kéo dài thời gian tải xuống hơn là so với các trang
hầu như chỉ có văn bản.
✓ Thông tin bị phân mảnh quá mức: có thể đòi hỏi
điều hướng đến một chuỗi dài các đường liên kết để
tới được nội dung cần thiết, và điều đó càng nhanh
chóng làm người sử dụng dễ mất phương hướng
hơn.
19
Thanh cuộn quá dài và không hiệu quả.
Những trang dài quá đòi hỏi phải có thanh cuộn

✓ Người sử dụng có thể mất đi ngữ cảnh nội dung.
Ngoài tầm nhìn thì sẽ ở ngoài tâm trí.
✓ Nếu các nhân tố định vị và nội dung quan trọng bị
ẩn đi ở phía dưới, chúng có thể hoàn toàn bị bỏ
qua.
✓ Phải cuộn thanh cuộn xuống để thực hiện và hoàn
thành các tác vụ có thể gây khó chịu cho người sử
dụng…
20
Quá tải thông tin
Thông tin được tổ chức kém hoặc khối lượng thông tin quá
lớn sẽ bắt người sử dụng phải nhớ nhiều và có thể vượt
quá khả năng nhớ của người đó.
Trí óc bị quá tải do:
✓ Phải quyết định chọn hay bỏ liên kết nào trong khi có quá
nhiều lựa chọn trước mắt.
✓ Xác định thông tin nào là quan trọng và thông tin nào thì
không.
✓ Xác nhận vị trí thông tin trong một rừng thông tin dày đặc.
✓ Người sử dụng phải học để có thể sử dụng được trang Web.
21
Sự không nhất quán trong thiết kế.
▪ Chủ nhân của Website luôn muốn có đặc tính nhận

dạng riêng cho trang Web của mình. Tuy nhiên,
website rất khó chỉ phục vụ cho một nhóm nhỏ người
dùng chính.
▪ Để bảo đảm lợi ích của người sử dụng, một vài tính
nhất quán cần phải có để tạo sự gắn kết liền mạch
giữa các Website.
Ví dụ tính nhất quán phải có đối với vị trí của phần
tử điều hướng trên một trang hay hình dạng của các
nút điều hướng (được để nổi lên).
▪ GUI trong thiết kế cần phải được tuân thủ.
22
Thông tin quá cũ hoặc không đề ngày tháng
Một trong những giá trị quan trọng của Website là “tính
thời sự” của nó. Thông tin quá cũ hay không có ngày
tháng cụ thể sẽ phá vỡ sự tin cậy dành cho Website
trong tâm trí người sử dụng, cho nên tính thời sự là cần
thiết.
23
Các thiết kế lỗi thời
Trang Web là môi trường mới cùng với tương tác người
sử dụng được mở rộng và khả năng hiển thị thông tin.
Trong khi phần lớn những gì chúng ta được học trong
thế giới in ấn và thiết kế giao diện của các hệ thống
thông tin cũ lại có thể được ứng dụng cho Web.
→ Phải có cách nhìn mới, cách nghĩ mới khi thiết kế
trang Web, bằng cách sử dụng các kỹ thuật thiết kết
hích hợp và mạnh nhất đã có
24
Hướng dẫn thiết kế có tính tiện dùng
❖ Thực tế là đã có nhiều chuyên gia về HCI đưa ra các hướng

dẫn thiết kế. Các nhà nghiên cứu đều thống nhất về việc
đóng góp vào xây dựng UI tốt, chỉ khác nhau ở chỗ: tổ chức
như thế nào những cái đã biết vào tập con của các luật.
▪ Jakob Nielsen có 10 heuristics (Phương pháp giải quyết vấn đề
bằng kinh nghiệm).
▪ Bruce Tognazzini đề xuất 16 nguyên tắc, bao gồm cả sự gợi ý và
luật Fitts.
▪ Norman đề xuất tập hướng dẫn bao gồm tính rõ ràng, sự gợi ý,
ràng buộc, phản hồi…
▪ Hướng dẫn về môi trường làm việc (platform) cũng rất quan trọng,
có ích và người thiết kế nên tuân thủ chúng, đảm bảo sự nhất quán
giữa các ứng dụng khác nhau chạy trên cùng platform.
▪ Mac, Windows, Gnom… đều có tập hướng dẫn thiết kế riêng
25
Nguyên lý thiết kế hệ thống có tính tiện dùng
Don Norman đã mô tả trong quyển sách “The Design of

Everyday Things” đề xuất 6 nguyên lý thiết kế để hệ
thống có tính tiện dùng, bao gồm:
▪ Sự rõ ràng (Visibility)
▪ Phản hồi (Feedback)
▪ Ràng buộc (Constraints)
▪ Ánh xạ (Mapping)
▪ Nhất quán (Consistency)
▪ Gợi ý (Affordance)
26
Một số nguyên lý
❖ Thiết kế hướng người sử dụng ❖ Hướng dẫn sử dụng màu

▪ Xác định ai là người sử dụng ▪ Không phụ thuộc mạnh vào
▪ Hiểu được các nhiệm vụ của việc phân biệt các màu
họ ▪ Tránh màu đỏ trên nền xanh
❖ Luật Fitts ▪ Tránh chi tiết là màu xanh nhỏ
▪ Kích thước của các điều khiển ❖ Nguyên lý Norman về thao tác
liên quan đến tầm quan trọng trực tiếp
của nó
▪ Sự gợi ý
▪ Các điều khiển nhỏ rất khó
▪ Ánh xạ tự nhiên
chọn sử dụng
▪ Rõ ràng
❖ Bộ nhớ
▪ Phản hồi
▪ Sử dụng chia đoạn để đơn
giản hóa trình diễn thông tin
▪ Tối ưu hóa bộ nhớ làm việc
27
Một số nguyên lý
Mười hướng dẫn của Nielsen

1. Phù hợp thế giới thực
2. Nhất quán và chuẩn
3.Trợ giúp và tài liệu
4. Người sử dụng làm chủ
5. Quan sát trạng thái hệ thống
6. Trực quan trạng thái hệ thống
7. Mềm dẻo và hiệu quả
8. Quản lý lỗi
9. Nhận dạng, không hồi tưởng
10. Thiết kế mỹ thuật và tối thiểu
28
Làm rõ các nguyên lý thiết kế có tính
tiện dùng thông qua các ví dụ
29
Ví dụ
Sự rõ ràng
▪ Phần của hệ thống liên quan đến tương tác phải được
nhìn thấy
▪ Giúp người sử dụng nhận biết trạng thái hiện hành
▪ Cần được biết sẽ thực hiện thao tác nào tiếp theo
Ví dụ: Khi di chuột đến một vị trí bất kỳ trên màn
hình, người sử dụng cần được biết cái gì xảy ra khi nhấn
chuột.
Sự phản hồi
▪ Là cái hệ thống thể hiện khi user hành động. Hình thức:
Âm thanh, hình ảnh, hộp thông báo văn bản...
Ví dụ: Gõ phím, xóa tệp...
▪ Thận trọng khi thiết kế phản hồi, âm thanh quá lớn khi gõ
phím 30
Ví dụ
Sự ràng buộc
▪ Độ khó sử dụng của hệ thống phụ thuộc vào tổng số khả năng
▪ Các loại ràng buộc: Vật lý, Ngữ nghĩa, Văn hóa và Logic
Ổ cắm máy tínhổ Đồ chơi gắn máy 12 chi tiết
Vật lý: Bánh trước chỉ lắp vừa vào một vị trí;
Ngữ nghĩa: Tài xế ngồi trên ghế và mặt quay
phía trước;
Văn hóa :Đèn đỏ lắp phía sau, đèn vàng lắp
phía trước;
Logic:Hai đèn xanh, hai mẩu trắng đi với nhau
31
Ví dụ
Ánh xạ
▪ Ánh xạ là quan hệ giữa điều khiển (controls) và ảnh hưởng của
nó trên hệ thống. Trong GUI, điều khiển là khái niệm liên quan
đến các đối tượng đồ họa (ví dụ: phím nhấn).
▪ Ánh xạ tự nhiên: Tương ứng vật lý và chuẩn văn hóa
▪ Ví dụ:
▪ Xoay tay lái ô tô về phía phải để rẽ phải
▪ Sử dụng âm thanh lớn hơn để nhập số lớn hơn và ngược lại trong
UI sử dụng âm thanh
▪ Bố trí công tắc trên bếp điện
32
Ví dụ
Quy ước
Qui ước là ràng buộc về văn hóa. Các ràng buộc này
ban đầu là tùy ý, nhưng được chấp nhận dần theo thời
gian. Tuy nhiên, các qui ước vẫn còn rất khác nhau, nó
phụ thuộc theo các nền văn hóa khác nhau.
Màu đỏ:
Tắt công tắc đèn – Mỹ: Nguy hiểm
Mở van vòi nước
– Mỹ: Bật xuống – Ấn Độ: Sống
– Mỹ: Vặn ngược chiều
– Anh: Bật lên – Ai Cập: Chết chóc
– Anh: Vặn theo chiều kim đồng hồ
– Trung Quốc: Hạnh phúc
33
Ví dụ
Nhất quán
❖ Nhất quán trong việc nhìn và cảm giác là yếu tố mấu chốt
trong HCI tốt
❖ Ví dụ: Bố trí thực đơn nhất quán với chuẩn Windows
34
Ví dụ
Sự gợi ý
Là việc đề cập đến khả năng mà User xác định được cách
sử dụng đối tượng như thế nào chỉ bằng quan sát nó.
Ví dụ: Windows sử dụng nhiều khả năng gợi ý
35
Một vài phép đo tính tiện dùng
Tính tiện dùng, có thể được hiểu thông qua quan sát đơn
giản của người sử dụng, hoặc thảo luận với người đang sử
dụng giao diện. Các phép đo này thiếu tính chính xác khoa
học nhưng chúng sẽ cung cấp dấu hiệu về tính tiện dùng.
1. Có phải người sử dụng hỏi nhiều câu hỏi hoặc thường
dùng sổ tay hướng dẫn?
2. Họ luôn có phản ứng tiêu cực?
3. Có nhiều hành động không liên quan đang được thực
hiện?
4. Có nhiều thứ đã bị bỏ qua?
5. Có phải ai cũng muốn dùng sản phẩm của bạn ko?
36
Các tiêu chí đo tính tiện dùng của Tyldesley
37
Kỹ nghệ hệ thống có tính sử dụng
❖ Mấu chốt của kỹ nghệ hệ thống có tính sử dụng là tiến

trình thiết kế lặp. Các giai đoạn lặp:
▪ Thiết kế
▪ Cài đặt
▪ Đánh giá
❖ Sử dụng kết quả đánh giá để tái thiết kế UI, xây dựng
prototype mới và tiếp tục đánh giá
❖ Qua một số lần lặp ta có thể có UI đủ tính tiện dụng
như mong đợi. Design
Evaluate
Implement
38
Quy trình thiết kế UI
Phân tích và
Tạo bản mẫu Cùng người
tìm hiểu các
thiết kế trên dùng đánh giá
hoạt động của
giấy thiết kế
người dùng
Cùng người
Bản mẫu Tạo bản mẫu dùng đánh giá
thiết kế thiết kế động thiết kế
Cài đặt
Bản mẫu
giao diện người
chạy được
dùng cuối cùng
39
Tổng kết bài
▪ Trả lời câu hỏi "Tính tiện dùngcủa hệ thống là gì?“

▪ Tính chất của tính tiện dùng
▪ Các nguyên tắc thiết kế hệ thống có tính sử dụng
▪ Qui trình thiết kế lặp để tạo ra hệ thống tương tác có
tính tiện dùng.
→Tính tiện dùng là quan trọng, nhưng nó chỉ là một
trong các thuộc tính của hệ thống như chức năng, giá,
an ninh, kích thước, độ tin cậy và tuân thủ chuẩn của
hệ thống.
40
HIỂU RÕ NGƯỜI SỬ DỤNG
(Bước 1)

1
Nội dung
▪ Hiểu rõ người sử dụng
▪ Tâm lý học nhận thức và HCI
▪ Mô hình bộ xử lý của con người (MHP)
▪ Các đặc tính quan trọng của con người trong thiết kế.
▪ Những mối quan tâm về con người trong thiết kế
▪ Các phương pháp để đạt được sự hiểu biết người sử dụng
2
Hiểu rõ người sử dụng
Wilbert O. Galitz wrote:

“ Chặng đường để đến được thiết kế giao diện và quá trình
thiết kế màn hình phải bắt đầu với sự hiểu biết về người sử
dụng hệ thống,đó là phần quan trọng nhất của bất kỳ hệ
thống máy tính nào. Người sử dụng cần một hệ thống được
tạo ra để phục vụ cho họ.
Hiểu rõ người sử dụng và những cái họ làm là một quá trình
khó khăn và vẫn bị đánh giá thấp nhưng lại cực kỳ quan
trọng bởi luôn có khoảng cách về hiểu biết, kỹ năng và cách
nhìn nhận giữa người sư ̉ dụng hệ thống và người phát triển
hệ thống đó…”
3
Để tạo ra một hệ thống hữu dụng thật sự, người thiết kế

luôn phải tuân thủ những quy tắc sau:
1) Hiểu rõ người sử dụng tương tác với máy tính như thế nào.
2) Hiểu rõ những đặc điểm quan trọng của con người có ảnh
Hưởng đến thiết kế.
3) Nhận biết được trình độ hiểu biết và kinh nghiệm của người sử
dụng.
4) Nhận biết được những đặc điểm về nhu cầu, nhiệm vụ và
công việc của người sử dụng.
5) Nhận biết đặc điểm tâm lý của người sử dụng.
6) Nhận biết đặc điểm tự nhiên của người sử dụng.
7) Sử dụng các phương pháp khuyến nghị để có được sự hiểu biết
về người sử dụng.
4
Chu trình hành động của con người

▪ Con người có xu hướng đi theo mục tiêu đã định sẵn,
muốn đạt được một mục tiêu cụ thể khi tham gia một
hành động hay thực hiện một tác vụ nào đó.
▪ Các hành động và tác vụ có thể dựa trên kinh nghiệm
hoặc là theo bản năng tự nhiên.
▪ Chu trình hành động bao gồm 3 giai đoạn:
(1) Hình thành mục tiêu;
(2) Thực hiện các hoạ động để đạt được mục tiêu;
(3) Đánh giá các kết quả của hành động.
▪ Một chu trình hành động đơn giản có thể chỉ kéo dài trong
vài giây, tuy nhiên những chu trình khác lại có thể mất
đến vài giờ để hoàn thành.
5
Một số khó khăn của người sử dụng khi thao tác với
máy tính
1. Quá nhiều tính linh hoạt.
2. Ngôn ngữ khó hiểu.
3. Thiết kế không rõ ràng.
4. Những điểm khác biệt nhỏ.
5. Cách biệt trong các chiến lược giải quyết vấn đề.
6. Thiết kế không nhất quán.
6
Những phản ứng với thiết kế không hợp lý

❖ Những phản ứng tâm lý: ❖ Những phản ứng tự nhiên:
1. Sự nhầm lẫn. 1. Từ bỏ sử dụng hệ thống.
2. Sự khó chịu. 2. Sử dụng từng phần của hệ
3. Sự thất vọng. thống.
4. Sự hoang mang và ức chế. 3. Sử dụng hệ thống một cách
5. Sự buồn tẻ gián tiếp.
4. Sửa đổi tác vụ.
5. Hoạt động thêm vào.
6. Sử dụng sai hệ thống.
7. Lập trình trực tiếp
7
Các đặc tính quan trọng trong thiết kế
Con người là thực thể đầy phức tạp cùng với nhiều
thuộc tính có ảnh hưởng quan trọng tới thiết kế giao
diện.
Những điểm đáng chú ý trong thiết kế gồm sự nhận
thức, trí nhớ, tính sắc bén trực quan, khả năng nhìn
trung tâm và ngoại vi, sự tích lũy cảm giác, xử lý thông
tin, học (lĩnh hội), kỹ năng, và các khác biệt của cá
nhân.
8
Tâm lý học nhận thức với HCI
▪ Áp dụng những nguyên tắc và hướng dẫn thiết kế

được suy ra từ các học thuyết tâm lý học.
▪ Các học thuyết tâm lý học còn giúp chúng ta xây
dựng những mô hình để mô phỏng người sử dụng→
thiết kế tốt hơn.
▪ Các học thuyết tâm lý học giúp chúng ta đánh giá
thiết kế và hệ thống của chúng ta.
9
Tại sao phải nghiên cứu tâm lý học nhận thức?
▪ Để nhận biết khả năng và hạn chế của con người khi
sử dụng cái mà ta thiết kế ra (giao diện).
▪ Từ đó có thể thiết kế các sản phẩm thân thiện và dễ
sử dụng, mục tiêu là đáp ứng yêu cầu người sử
dụng.
10
Các khía cạnh của tâm lý học nhận thức ảnh hưởng
đến thiết kế giao diện người sử dụng:
▪ Cách con người tiếp nhận thông tin xung quanh họ;
▪ Cách con người lưu trữ thông tin;
▪ Cách con người xử lý thông tin và giải quyết vấn đề
→ Nhận biết khả năng của con người trong HCI là rất
quan trọng khi thiết kế vì khả năng của con người khác
nhau và có ảnh hưởng khác nhau đến việc sử dụng ứng
dụng (quan tâm đến các đặc điểm của con người liên
quan tới HCI)
11
Mô hình xử lý thông tin MHP
▪ Để làm được điều đó, chúng ta sẽ nghiên cứu con

người ở một mô hình đơn giản hơn – Con người
được xem như hệ thống thông tin:
▪ Thông tin được thu nhận và các đáp ứng thông
qua các kênh vào/ra.
▪ Thông tin được lưu trữ trong bộ nhớ;
▪ Thông tin được xử lý và áp dụng theo nhiều cách
khác nhau.
❖ Mô hình MHP (Model Human Processor)
12
Mô hình bộ xử lý con người (MHP)
Mô hình bộ xử lý của con người do Card, Moran &

Newell đề xuất (1983)
13
Mô hình bộ xử lý con người (MHP)
▪ Ba phân hệ tương tác của MHP

✓ Bộ xử lý cảm nhận (perceptual - read/scan): tiếp nhận thông
tin bằng các giác quan (tai, mắt...)
✓ Bộ xử lý nhận thức (cornitive - think): xử lý thông tin
✓ Bộ xử lý vận động (motor - respond): điều khiển hoạt động
đáp ứng thông tin đầu vào (thí dụ ngón tay)
▪ MHP xử lý thông tin như thế nào?

✓ Đôi khi hành động được thực hiện nối tiếp
Phát tiếng còi (ánh sáng) bằng cách nhấn phím
✓ Đôi khi hành động được th ực hiện song song
Vừa lái xe, vừa đọc biển báo hiệu, vừa nghe radio
14
Các kênh vào/ra của MHP
▪ Thành phần vào:

▪ Thị giác
▪ Thính giác
▪ Xúc giác
▪ Thành phần ra:
▪ Thông qua một số các cơ quan như tay, chân,
mắt, đầu và hệ thống tiếng nói.
▪ Khi giao tiếp với máy tính, hiện nay tay vẫn đóng
vai trò chính trong việc gõ bàn phím và điều
khiển chuột
▪ Tiếng nói, ánh mắt và chuyển động của đầu đang
được nghiên cứu để điều khiển máy tính.
15
Thành phần vào – Thị giác
Về mặt vật lý, mắt người có khả năng nhận biết kích
thước, chiều sâu, độ sáng và màu sắc các đối tượng.
Hai giai đoạn của quá trình tiếp nhận thị giác
▪ Tiếp nhận kích thích (stimulus) vật lý
▪ Xử lý và diễn giải kích thích (xây dựng hình ảnh thu
nhận từ các thông tin không đầy đủ).
16
▪ Mắt người có: Võng mạc (retina) thu nhận ảnh và các tế
bào nhậy cảm với ánh sáng
▪ Có 2 loại tế bào trong võng mạc:
• Tế bào hình que (rods) cho thị giác ánh sáng thấp:Đơn
sắc; Nhạy cảm với toàn bộ phổnhìn thấy; Nhỏ; Phản
ứng nhanh; Phân tán trên toàn bộ võng mạc.
• Tế bào hình nón (cons) cho thị giác màu: Nhạy cảm
với ba màu R. G. B; Mỗi loại cảm nhận với giải giới
hạn của ánh sáng nhìn thấy; Tế bào này lớn hơn tế
bào hình que; Ít nhạy cảm hơn; Tập trung chủ yếu ở
hố mắt (Fovea).
Mắt người có khả năng diễn giải thông tin thu nhận được
17
Ví dụ về cảm nhận thị giác (theo ngữ cảnh)
18
❖ Ví dụ cảm nhận thị giác (theo ngữ cảnh)
What do you see?

19
Ví dụ cảm nhận thị giác (Ảo quang học)
Ponzo
Muller Lyer
20
Đọc
❖ Các giai đoạn xử lý đọc
• Thu nhận mẫu ký tự trên trang giấy, màn hình
• Giải mã bằng cách đối chiếu với các mẫu cơ bản
ngôn ngữ
• Phân tích cú pháp và ngữ nghĩa, phân tích cụm
từ hoặc câu.
❖ Tốc độ đọc của người trưởng thành 250
từ/phút
❖ Văn bản dễ đọc (qua thực nghiệm)
• Kích thước font: 9 đến 12 points
• Chiều dài của dòng chữ: 58-132 mm
❖ Đọc trên màn hình chậm hơn
❖ Cần quan tâm đến độ tương phản khi hiển thị
21
22
Thành phần VÀO:Thính giác
Nghe
▪ Cung cấp thông tin về môi trường: Khoảng cách,
hướng,đối tượng...
▪ Các tham số quan trọng
▪ Pitch (độ cao thấp)- sound frequency (tần số âm
thanh)
▪ Loudness (ầm ĩ)- amplitude (biên độ)
▪ Timbre (âm sắc)- type or quality (loại hoặc chất
lượng)
▪ Con người có thể nghe được các tần số: 20 Hz đến15
kHz. Phân biệt âm thanh ít chính xác hơn với tần số
cao.
▪ Tai người có khả năng lọc âm thanh (lựa chọn âm
thanh để nghe).
23
Thành phần VÀO:Thính giác
HCI với thính giác:

▪ Thường sử dụng âm thanh để thông báo/cảnh báo:
▪ Thông báo khi vào Windows;
▪ Thông báo một thao tác không hợp lệ/gõ nhầm nút;
▪ Hiện nay âm thanh đang được nghiên cứu và triển khai:
▪ Sử dụng âm thanh để điều khiển
▪ Tổng hợp tiếng nói=> nghe đọc tài liệu thay vì nhìn
tài liệu=> phục vụ người khiếm thị
▪ Dùng âm nhạc để tạo ra các hiệu ứng trong trình
diễn nội dung
24
Thành phần VÀO: Xúc giác
▪ Xúc giác là khả năng phát hiện và hiểu được những

thông tin cảm nhận được từ da
▪ Cung cấp phản hồi quan trọng vềmôi trường
▪ Rụt tay lại khi chạm vào 1 vật nhọn/Buông tay ra
khi nắm vào cốc nước nóng…
▪ Các nghiên cứu đã chỉ ra: khả năng cảm nhận bằng
xúc giác của trẻ nhỏ có thể đã được phát triển trước
khả năng phân biệt vật thể bằng thị giác;
▪ Đặc biệt quan trọng với những người khiếm thị.
▪ Bộ máy xúc giác nhận kích thích thông qua da
▪ Có những vùng nhạy cảm hơn:đầu ngón
25
Thành phần VÀO: Xúc giác
▪ Ba loại cảm nhận bằng xúc giác:

▪ Sức ép: Mạnh/Nhẹ;
▪ Nhiệt độ: Lạnh/Nóng;
▪ Mức độ đau: Nhọn/Tù.
▪ Xúc giác với HCI:
▪ Thông qua vùng da nhạy cảm ở các ngón tay mà ta
cảm nhận được phím (keyboard/mouse) được bấm;
▪ Các thiết bị mới đang được nghiên cứu và triển khai
thử nghiệm.
26
Thành phần VÀO: Vận động
Thời gian cần thiết khi di đến đích trên màn hình (theo
Fitts)
Mt = a + b log2 (D/S+1)
a, b là hằng số theo kinh nghiệm
Mt là thời gian dịch chuyển
D là khoảng cách
S là kích thước
log2(2D/S+1) độ khó của nhiệm vụ dịch chuyển
Tổng quát: Đích cần đủ lớn, khoảng cách cần đủ nhỏ
Áp dụng trong thiết kế UI:
• Menu và Icon đủ lớn
• Menu, Icon nào hay được sử dụng cần đặt gần điểm
bắt đầu của người sử dụng nhất (thí dụ, đỉnh menu).
27
Thành phần RA: Vận động
Vận động
▪ Thời gian đáp ứng kích thích:
▪ thời gian phản ứng + thời gian vận động
▪ Thời gian vận động phụ thuộc tuổi tác, tình trạng sức
khỏe,...
▪ Thời gian phản ứng phụ thuộc vào loại kích thích
• Thị giác: 200 ns
• Thính giác: 150 ns
• Da: 700 ns
28
Các loại bộ nhớ
▪ Bộ nhớ giác quan (sensory) là “vùng đệm đầu vào” của các giác
quan. Vùng đệm dành cho:
▪ Kích thích thị giác (iconic);
▪ Kích thích thính giác (echoic)
▪ Kích thích cảm giác (haptic).
▪ Tính chất của bộ nhớ
▪ Mã hóa: Loại sự vật lưu trữ
▪ Kích thước: Tổng số sự vật được lưu trữ
▪ Thời gian loãng (decay): Thời gian nhớ
▪ Lưu trữ đầu vào unrecognized mới nhất (luôn ghi đè lên nhau).
▪ Thời gian và dung lượng lưu trữ khác nhau tùy theo loại giác quan:
Thị giác: Dung lượng: trong dải [7-17] ký tự;
Thời gian loãng: ~ 200 ms [70-1000 ms]
Thính giác: Dung lượng: 5 ký tự văn bản [4.4-6.6] ký tự;
Thời gian loãng: ~ 1500 ms [900-3500 ms] 29
❖ Bộ nhớ ngắn hạn STM (sort term – working memory)

▪ Suy nghĩ, cân nhắc nhận biết
▪ Dung lượng nhỏ (7±2 chunks) – Theo thực nghiệm của Miller
▪ Xâm nhập nhanh (~ 70ms) & loãng tin nhanh (~200 ms)
→Thông tin được chuyển đến LTM sau vài giây
❖ Bộ nhớ dài LTM (Long-term memory)
▪ Nhớ lâu dài, nhớ mọi thứ đã xảy ra quanh ta
▪ Dung lượng khổng lồ (có thể nói là vô hạn)
▪ Thời gian xâm nhập chậm (~100 ms) và loãng tin chậm.
▪ Hai loại bộ nhớ dài hạn
✓ Nhớ đoạn (episodic) – Nhớ nối tiếp các sự kiện
✓ Nhớ ngữ nghĩa (semantic) – Bộ nhớ cấu trúc về các sự
việc, khái niệm và các kỹ năng đạt được.
30
Tại sao nghiên cứu bộ nhớ?
➢ Hiểu rõ bản chất các kỹ thuật ứng dụng trong HCI
➢ Dự báo cái mà người sử dụng sẽ hiểu.
31
Bộ xử lý
Theo Galitz có viết:
❖ Thông tin mà những giác quan của chúng ta thu thập

phải được xử lý theo một vài cách thức có ý nghĩa.
❖ Có 2 cấp xử lý thông tin:
▪ Cấp cao nhất
▪ Cấp xử lý thông tin cấp thấp hơn
32
Bộ xử lý
▪ Xử lý thông tin cấp cao:

▪ Được xác định cùng với trí nhớ tạm thời
▪ Cấp này bị giới hạn, chậm chạp và liên tục
▪ Được sử dụng để đọc, hiểu
▪ Các yếu tố ảnh hưởng: Nhiễu xung đột, nhiễu ban đầu, nhiễu
sau
▪ Xử lý thông tin cấp thấp hơn:
▪ Chưa có giới hạn năng lực của nó
▪ Xử lý thông tin nhanh nhất, song song với cấp cao hơn
▪ Không có nỗ lực nhận thức
→ Cả hai cấp hoạt động đồng thời, cấp cao hơn thực hiện
lập luận và giải quyết vấn đề, cấp thấp hơn nhận thức
trạng thái tự nhiên của thông tin đã cảm nhận được
33
Những mối quan tâm của con người trong thiết kế
▪ Kiến thức và kinh nghiệm người sử dụng
▪ Những tác vụ và nhu cầu người sử dụng
▪ Đặc tính tâm lý người sử dụng
▪ Những đặc tính tự nhiên của người sử dụng
34
Câu hỏi
Tuổi: Năm 2006, một nghiên cứu đưa ra thống kê độ tỷ

lệ tuổi người sử dụng Internet là:
46 - 55 tuổi 86%
56 - 65 tuổi 75%
66 tuổi trở lên 41%
Độ tuổi có thể tác động lớn đến khả năng sử dụng máy
tính, hệ thống và Web như thế nào?
35
Những ảnh hưởng đến tính tiện dùng

Giới tính: có thể có tác động đến sự thực hiện mang tính vận
động và mang tính nhận thức.
+ Phụ nữ không được mạnh mẽ như nam giới, cho nên di
chuyển nhiều hiển thị hoặc các điều khiển có thể là khó khăn
hơn.
+ Tay nữ giới cũng nhỏ hơn nam giới nên việc thiết kế các
điều khiển cho cỡ tay của giới này lại không phù hợp với giới
kia.
+ Cảm nhận màu sắc của nam giới kém hơn phụ nữ, cho
nên nữ giới có thể thực hiện các tác vụ tốt hơn nếu các màn
hình sử dụng mã hóa màu.
Một nghiên cứu đã chỉ ra rằng nam giới làm tốt hơn nữ giới
một cách đáng kể về những tác vụ điều hướng. 36
Tay thuận của người sử dụng (có thể là tay phải hoặct
ay trái) có thể tác động đến sự dễ dàng sử dụng các
thiết bị đầu vào, phụt huộc vào sự dễ dàng đã được tối
ưu hóa cho tay này hay tay kia. Nghiên cứu đã chỉ ra
Rằng đối với những người sử dụng trưởng thành:
+87% thuận tay phải.
+13% thuận tay trái hoặc có thể sử dụng tốt cả hai tay.
Thuận tay phải hay trái không phân biệt giới tính hay
tuổi tác.
37
Những khiếm khuyết như bị mù, nhìn kém, mù màu,

điếc, và những bất lợi vận động có thể ảnh hưởng tới
sự thực hiện một hệ thống không được thiết kế chuyên
biệt cho những người khiếm khuyết đó.
Những người sử dụng với các nhu cầu đặc biệt cần
phải được xem xét trong thiết kế.
Điều này đặc biệt đúng với các hệ thống như Web là hệ
thống không giới hạn sự truy cập số lượng người dung.
38
Các phương pháp để đạt được sự hiểu biết
của người sử dụng
1) Đến thăm nơi làm việc để biết về môi trường làm

việc của user.
2) Nói chuyện với users về các vấn đề của họ, những
khó khăn, mong muốn, và hiện tại cái gì đang hoạt
động tốt.
3) Thiết lập mối liên hệ trực tiếp.
4) Quan sát users đang làm việc để hiểu họl àm cái gì,
những khó khan và các vấn đề của họ.
5) Ghi băng hình users đang làm việc hay đang thực
hiện một tác vụ để minh họa và nghiên cứu các vấn
đềvà khó khăn của user.
39
Các phương pháp để đạt được sự hiểu biết
của người sử dụng
6) Tìm hiểu về cơ quan, tổ chức mà ở đó hệ thống có

thể được cài đặt.
7) Cần có suy nghĩ của users một cách rõ ràng. Thử tự
mình làm một công việc nào đó để bộc lộ ra những khó
khăn mà users đã không biết hoặc không thể hiện được.
8) Chuẩn bị các cuộc khảo sát và bản các câu hỏi điều
tra đểt hu lượm được một lượng mẫu lớn về các ý kiến
của user.
9) Thiết lập các mục đích nhằm đến hành vi có thể kiểm
thử được.
40
Tổng kết bài
▪ Hiểu người sử dụng tương tác với máy tính như thế
nào.
▪ Hiểu những đặc điểm quan trọng của con người có
ảnh hưởng đến thiết kế.
▪ Sử dụng các phương pháp khuyến nghị để có sự
hiểu biết về người sử dụng.
41
HIỂU RÕ CHỨC NĂNG HOẠT ĐỘNG
(BƯỚC 2)

1
Đặt vấn đề
Từ sự hiểu biết thấu đáo người sử dụng, mục tiêu tiếp

theo cần xác định các chức năng và các hoạt động. Để
xác đinh được các chức năng, các yêu cầu phải được
xác định và các hoạt động của người sử dụng phải mô
tả qua phân tích tác vụ/nhiệm vụ của người sử dụng.
2
Nội dung
▪ Phân tích người sử dụng

▪ Các kỹ thuật thu thập yêu cầu
▪ Những khó khăn thu thập yêu cầu
▪ Phân tích nhiệm vụ
3
Phân tích người sử dụng
▪ Phân tích người sử dụng:

Là quá trình thu thập thông tin về người sử dụng cho
bản thiết kế đầu tiên.
▪ Mục tiêu của phân tích người sử dụng
▪ Ai là người sử dụng thực sự của ứng dụng này?
▪ Người sử dụng có vai trò gì trong tổ chức?
▪ Người sử dụng có mức độ kỹ năng nào?
▪ Người sử dụng ứng dụng như thế nào?
▪ Nhiệm vụ chính của phân tích người sử dụng
▪ Nhận biết các yếu tố quan trọng của người sử
dụng.
▪ Phân nhóm người sử dụng theo các yếu tố chủ
yếu, mỗi nhóm có cùng một số đặc trưng tương tự.4
Phân tích người sử dụng
Xác định một số yếu tố phân tích chung

▪ Vai trò trong tổ chức của người sử dụng
▪ Kỹ năng sử dụng máy tính
▪ Kỹ năng trong lĩnh vực ứng dụng
▪ Nền tảng về văn hóa / xã hội
▪ Tần suất sử dụng ứng dụng
5
Yếu tố phân tích người sử dụng
Vai trò
▪ Chức vụ và trách nhiệm kèm theo đặc trưng cho vai trò
người sử dụng trong tổ chức. Vai trò cụ thể của người sử
dụng được xác định bởi nhiệm vụ mà họ thực hiện.
▪ Thiết kế UI trên cơ sở vai trò người sử dụng làm nâng
cao tính sử dụng của UI.
▪ Cấu trúc tổ chức xác định quan hệ giữa con người. Đội
ngũ người sử dụng với vai trò khác nhau có thể cùng làm
việc để thực hiện mục tiêu của tổ chức.
▪ Vai trò người sử dụng khác nhau → các nhiệm vụ khác
nhau. Một số nhiệm vụ có thể chồng chéo giữa các người
sử dụng, một số khác có thể là duy nhất với vai trò cụ thể.
6
Ví dụ vai trò của người sử dụng
7
Sự khác nhau về tổ chức

▪ Các cơ quan khác nhau có cấu trúc và quan hệ giữa
con người khác nhau để hoàn thành các nhiệm vụ
của họ.
▪ Một cơ quan có thể thường xuyên được tái tổ chức
lại để cho hoạt động hiệu quả hơn. Tổ chức lại dẫn
đến thay đổi mục tiêu, cấu trúc và con người → các
chức năng phần mềm thay đổi theo.
8
Kỹ năng sử dụng máy tính

▪ Kỹ năng sử dụng các thiết bị vào (chuột, bàn phím...)
▪ Hiểu biết về mô hình tương tác người – máy và môi
trường GUI
▪ Phân người sử dụng thành bốn nhóm
9
Theo kỹ năng sử dụng máy tính
1. Người bắt đầu:

▪ Có ít tri thức về môi trường UI
▪ Biết ít cách sử dụng các thiết bị vào để tương tác với
máy tính.
▪ Cần các công cụ hỗ trợ học on-line help, tutorial....
2. Người mới:
▪ Có một số kinh nghiệm sử dụng ứng dụng máy tính,
▪ Còn thiếu kinh nghiệm sử dụng môi trường UI cụ thể.
▪ Hay gây ra lỗi khi tương tác với UI → cần các công
cụ học như beginners.
10
Theo kỹ năng sử dụng máy tính
3. Người có kinh nghiệm:

▪ Có đáng kể các kinh nghiệm ứng dụng phần mềm có
GUI.
▪ Họ không đòi hỏi các công cụ hỗ trợ như người mới bắt
đầu và người mới
▪ Họ muốn có UI tương tác nhanh với ứng dụng.
4. Người thành thạo:
▪ Có nhiều kinh nghiệm sử dụng các ứng dụng với GUI.
▪ Cần UI mạnh với khả năng tương tác nhanh (shortcuts)
11
Kỹ năng trong lĩnh vực ứng dụng

▪ Vì phát triển ứng dụng là để phục vụ người sử dụng
thực hiện nhiệm vụ của họ, cho nên người sử dụng
phải có đủ tri thức về nhiệm vụ và biết cách thực
hiện các nhiệm vụ đó.
▪ Trong nhiều lĩnh vực ứng dụng đòi hỏi phải có huấn
luyện.
▪ Có thể chia người sử dụng theo bốn mức độ kỹ năng
trong lĩnh vực ứng dụng
12
Theo kỹ năng ứng dụng
1. Người mới bắt đầu:

▪ Không có tri thức về lĩnh vực ứng dụng
▪ Đòi hỏi công cụ hỗ trợ tích cực, chỉ ra cách thực hiện
từng nhiệm vụ (khác sử dụng UI)
▪ Hướng dẫn rõ ràng cách xử lý các lỗi, khôi phục khi gặp
lỗi (họ thường xuyên gặp lỗi).
2. Người mới:
▪ Có một vài tri thức về lĩnh vực ứng dụng
▪ Vẫn còn hay gây ra lỗi khi thực hiện nhiệm vụ ứng
dụng.
▪ Đòi hỏi công cụ hỗ trợ tích cực như Beginners.
13
Theo kỹ năng ứng dụng
3. Người có kinh nghiệm:

▪ Có tri thức đáng kể về lĩnh vực ứng dụng
▪ Họ biết khá tốt về cách thực hiện nhiệm vụ bằng ứng
dụng.
4. Người thành thạo:
▪ Có tri thức rộng về lĩnh vực ứng dụng, biết nhiều
cách thức để thực hiện nhiệm vụ
▪ Đòi hỏi công cụ mạnh để bổ sung mở rộng khả
▪ năng của hệ thống ứng dụng
14
Tần suất sử dụng ứng dụng
▪ Phụ thuộc vào cách thức cụ thể của việc ứng dụng
các ứng dụng mà kỹ năng máy tính của người sử
dụng thay đổi hàng ngày.
▪ Chia người sử dụng thành hai nhóm theo tần suất sử

dụng ứng dụng.
15
Tần suất sử dụng máy tính
1. Người dùng không thường xuyên:

▪ Không nâng cao kỹ năng sử dụng máy tính theo thời
gian;
▪ Vì thiếu thực hành cho nên kỹ năng có thể bị giảm.
2. Người dùng thường xuyên:
▪ Có thêm nhiều kinh nghiệm theo thời gian;
▪ Nâng cao dần trình độ kỹ năng máy tính;
▪ Có nhu cầu cao hơn về sử dụng các kỹ năng tương
tác mạnh với máy tính;
▪ Nhu cầu sử dụng các công cụ hỗ trợ ngữ cảnh và
học sử dụng giảm dần
16
Sự khác nhau về văn hóa và xã hội

▪ Mỗi nền văn hóa có ngôn ngữ, tôn giáo, tín ngưỡng,
nghệ thuật và lễ hội hàng năm.
▪ Thương mại, nghệ thuật và các hoạt động khác của
con người thường vượt qua biên giới dân tộc, do vậy
▪ Nhiều ứng dụng phần mềm được thương mại khắp
trên thế giới.
▪ Nội địa hóa phần mềm cho các nước khác nhau là
quan trọng (hỗ trợ bản ngữ; phong cách giao diện đồ
họa…)
▪ Sự khác biệt về văn hóa
17
Phát hiện các yếu tố quan trọng khác

Có thể còn rất nhiều yếu tố khác, quan trọng với ứng
dụng. Hãy thử phát hiện các nhân tố khác để bổ sung
vào kết quả phân tích người sử dụng.
Ước lượng phân bổ người dùng cho mỗi yếu tố
quan trọng
Hãy tìm kiếm sự phân bổ cho mỗi nhóm người dùng
theo nhân tố quan trọng với ứng dụng.
18
Các kỹ thuật thu thập yêu cầu
Phương pháp trực tiếp:

▪ Phỏng vấn trực diện cá nhân
▪ Nhóm trọng tâm truyền thống
▪ Thảo luận đơn giản
▪ Nghiên cứu thực tế
▪ Tạo mẫu sẵn cho các yêu cầu
▪ Tạo nguyên mẫu người sử dụng
▪ Kiểm thử tính tiện dùng trong phòng thí nghiệm
▪ …
19
Các kỹ thuật thu thập yêu cầu
Phương pháp gián tiếp

▪ Trả lời bảng câu hỏi thăm dò (questionnaires) để có
được các tính chất nổi trội (bản câu khảo sát trên
giấy, hoặc trên mạng)
▪ Qua email, bản tin, lưu bút
▪ Phân tích đối thủ
▪ …
20
Những khó khăn khi phân tích người sử dụng
▪ Khó tiếp cận người sử dụng (không đủ người sử

dụng, khách hàng và những nhóm quan tâm tham
gia)
▪ Thiếu sự quản lý và kết hợp yêu cầu
▪ Các vẫn đề giao tiếp giữa người tham gia
▪ Việc nắm bắt thông tin liên quan còn khó khăn
▪ Những hiểu biết vấn đề còn miễn cưỡng
▪ Chênh lệch về hiểu biết
▪ Có sự thay đổi môi trường kinh tế, môi trường làm
việc và vai trò của nhân viên
▪ Các nhân tố về tổ chức, chính trị và chương trình
nghị sự có thể ảnh hưởng tới quá trình
21
Ví dụ về phân tích người sử dụng
▪ Nhiệm vụ: Xây dựng phần mềm kế toán cho doanh

nghiệp nhỏ
▪ Sau khi khảo sát người sử dụng ta có các thông tin:
▪ Mức độ kỹ năng năng sử dụng máy tính
• Bắt đầu: 15%
• Học việc: 30%
• Kinh nghiệm: 45%
• Thành thạo: 10%
▪ Mức độ kỹ năng lĩnh vực kế toán
• Bắt đầu: 5%
• Học việc: 15%
• Kinh nghiệm: 50%
• Thành thạo: 30%
22
Ví dụ về phân tích người sử dụng
Sau khi khảo sát người sử dụng ta có các thông tin:
▪ Tần xuất sử dụng hệ thống

• Người ít dùng: 20%
• Người hay dùng: 80%
▪ Sở thích môi trường đồ họa
• Windows: 50%
• MacIntosh: 35%
• Khác: 10%
• Không biết: 5%
23
Ví dụ
▪ Phân nhóm người sử dụng

Kỹ năng Kỹ năng Tần suất Môi trường
TT Xác suất (%)
máy tính nghiệp vụ sử dụng tính toán
1 Experenced Experenced frequent Windows 9.00
2 Experenced Experenced frequent Windows 6.30

3 Novice Experenced frequent Windows 6.00
4 Experenced Expert frequent Windows 5.40
... ...
128 Expert Beginner Occasional Don't know 0.05
▪ Kết luận: Giao diện phần mềm cần được thiết kế cho
những ai có kinh nghiệm về máy tính, kinh nghiệm về
nghiệp vụ, thường xuyên sử dụng và chạy trên Windows.
24
Xác định các chức năng hoạt động cơ bản
Là một bản mô tả chi tiết về những gì sản phẩm sẽ

thực hiện cần chuẩn bị. Nó bao gồm:
- Những chức năng hệ thông chính được liệt kê và mô
tả (bao gồm các thông tin đầu vào và đầu ra của hệ
thống).
- Một biểu đồ tiến trình các chức năng được phát triển.
25
Phân tích nhiệm vụ
▪ Phân tích nhiệm vụ?

▪ Là tiến trình phân tích cách mà người sử dụng thực hiện
nhiệm vụ của họ với hệ thống.
▪ Có nhiều phương pháp phân tích nhiệm vụ, được chia
thành hai nhóm chính
▪ Tiệm cận hướng hành động: Mô tả các khía cạnh hành động
ở mức độ chi tiết khác nhau
• Phân tích nhiệm vụ phân cấp (HTA)
• Cây sự kiện hành động
• Biểu đồ luồng quyết định/hành động
▪ Tiệm cận hướng nhận thức (cognitive): Tập trung vào các tiến
trình trí tuệ, là cơ sở của các hành động
• Kỹ thuật ước lượng quyết định và hành động tới hạn
• Hệ thống đánh giá và mô hình ảnh hưởng
26
▪ Phân tích nhiệm vụ và phân tích hệ thống?

▪ Phân tích nhiệm vụ hướng tới hành động bên ngoài của người sử
dụng
▪ Phân tích hệ thống hướng tới thiết kế bên trong hệ thống
▪ Câu hỏi cần trả lời khi phân tích nhiệm vụ
▪ Người sử dụng làm cái gì?
▪ Họ làm việc bằng công cụ gì?
▪ Họ cần có hiểu biết gì khi làm việc?
▪ Kỹ thuật phân tích nhiệm vụ
▪ Phỏng vấn, quan sát người sử dụng thực hiện công việc hàng
ngày
▪ Phân rã chức năng
• Suy nghĩ tổng thể về vấn đề cần giải quyết: Mức đỉnh
• Phân chia chúng thành các task và subtasks.
27
▪ Sự khác biệt giữa nhiệm vụ (task) và mục tiêu (goal)

▪ Nhiệm vụ: Là hành động mà người sử dụng sẽ thực hiện
▪ Mục tiêu: Là trạng thái mà người sử dụng muốn đạt tới
▪ Ví dụ:
▪ Mục tiêu: Mượn sách ở thư viện
▪ Nhiệm vụ:
• Đi đến thư viện
• Duyệt để tìm sách muốn mượn trên máy tính
• Đến giá sách để lấy sách
• Mang sách đến đăng ký với thủ thư
▪ Mỗi nhiệm vụ cần phải
▪ Có ý nghĩa
▪ Kết hợp với mục tiêu
▪ Được nhận biết bởi người sử dụng.
28
Vi dụ mô hình HTA
Mô tả nhiệm vụ (phân rã chức năng) bằng biểu đồ phân cấp

HTA (Hierarchical Task Analysis)
▪ John Annett & Keith Duncan đề xuất HTA năm 1967
▪ Chia nhỏ các các nhiệm vụ thành nhiệm vụ con và
thao tác (hành động)
▪ Biểu diễn các thành phần nhiệm vụ bởi đồ thị phân
cấp
▪ Thông qua HTA, người phát triển giao diện có thể biết
được mục tiêu, nhiệm vụ, nhiệm vụ con, các hành
động và kế hoạch chủ yếu của các hoạt động
▪ Đầu ra của HTA là phân cấp nhiệm vụ, nhiệm vụ con;
Kế hoạch mô tả thứ tự và điều kiện mà nhiệm vụ con
được thực hiện
29
Mô tả phân rã chức năng bằng văn bản

0. Clean the house
1. Get the vacuum cleaner out
2. Get the appropriate attachment
3. Clean the rooms
3.1. Clean the hall
3.2. Clean the living rooms
3.3. Clean the bedrooms
4. Empty the dust bag
5. Put vacuum cleaner and attachments away
Plans
Plan 0: do 1 - 2 - 3 - 5 in that order. When the dust bag gets full
do 4
Plan 3: do any of 3.1, 3.2 or 3.3 in any order depending on which
rooms need cleaning
30
Phân tích nhiệm vụ: mô hình HTA
❖ Ví dụ mô tả phân rã chức năng bằng biểu đồ HTA
0.
Clean the house
Plan 0: do 1 - 2 - 3 - 5 in that order.
when the dust bag gets full do 4
1. 2. 3. 4. 5.
Get the vacuum Fix the appropriate Clean the Empty the Put vacuum cleaner and
cleaner out attachment rooms dust bag attachments away
Plan 3: do any of 3.1, 3.2 or 3.3 in any
order depending on which rooms need
cleaning
3.1. 3.2 3.3.

Clean the Clean the Clean the
hall living room bedrooms
31
Các bước tạo lập phân cấp

▪ Nhận biết nhiệm vụ chính để phân cấp
• Ví dụ: clean house, purchase a flight ticket online
▪ Tách các nhiệm vụ chính thành nhiệm vụ con
• Những nhịm vụ con nào được hoàn thành để có được nhiệm
vụ chính
• Nơi tìm kiếm nhiệm vụ con: Quan sát trực tiếp, ý tưởng chuyên
gia, tài liệu...
▪ Quyết định mức độ chi tiết khi tách nhiệm vụ
• Theo một số qui tắc dừng
▪ Tiếp tục tiến trình phân rã
• Tiếp tục phân rã và đánh số nhất quán
▪ Nhóm một vài nhiệm vụ (nếu quá chi tiết) thành nhiệm vụ con mức
cao hơn.
▪ Giới thiệu phân cấp với chuyên gia lĩnh vực để kiểm tra xem có bị
lỗi hay nhầm lẫn không.
32
Xác định các chức năng hoạt động cơ bản
Hiểu rõ người sử dụng và phân tích nhiệm vụ cho các

hoạt động của họ sẽ giúp việc xây dựng được một bản
mô tả chi tiết về những gì sản phẩm sẽ thực hiện cần
chuẩn bị.
Nó bao gồm:
- Những chức năng hệ thông chính được liệt kê và mô
tả (bao gồm các thông tin đầu vào và đầu ra của hệ
thống).
- Một biểu đồ tiến trình các chức năng được phát triển.
33
Tổng kết bài
▪ Phân tích người sử dụng nhằm thu thập yêu

cầu người sử dụng và phân lớp người sử dụng
▪ Phân tích nhiệm vụ người sử dụng
34
Bài tập
Làm việc theo nhóm để phân tích người sử

dụng cho đề tài đã đăng ký
35
HIỂU THẤU ĐÁO CÁC NGUYÊN TẮC THIẾT
KẾ GIAO DIỆN VÀ MÀN HÌNH HỢP LÝ
(Bước 3)

1
Đặt vấn đề
Một giao diện và màn hình được thiết kế tốt phải đạt
các yêu cầu sau:
✓ Phản ánh khả năng, nhu cầu và nhiệm vụ của người
dùng.
✓ Được phát triển trong các ràng buộc vật lý được áp đặt
bởi phần cứng mà nó được hiển thị.
✓ Sử dụng hiệu quả các khả năng của phần mềm điều
khiển của nó.
✓ Đạt được các mục tiêu kinh doanh của hệ thống mà nó
được thiết kế.
→ Để thực hiện được những mục tiêu này, trước tiên người
thiết kế phải hiểu các nguyên tắc của thiết kế giao diện và
màn hình tốt 2
Nội dung
▪ Cân nhắc yêu tố con người trong thiết kế giao diện và

màn hình.
▪ Cân nhắc công nghệ trong thiết kế giao diện
3
Cân nhắc yêu tố con người trong thiết kế
màn hình
Việc sử dụng màn hình/trang Web/hệ thống bị ảnh

hưởng bởi nhiều yếu tố:
✓ Lượng thông tin được trình bày
✓ Cách tổ chức thông tin
✓ Ngôn ngữ được sử dụng để giao tiếp với người
dùng,
✓ Cách hiển thị rõ ràng của các thành phần
✓ Tính thẩm mỹ
✓ Mức độ nhất quán của một màn hình/trang với các
màn hình/trang khác.
4
Những điều làm người sử dụng nản lòng
▪ Barnett đã đưa ra danh sách các nhân tố mà khi bị

thiết kế không hợp lý sẽ gây cản trở đến việc sử
dụng các hình thức tài liệu bằng giấy, tài liệu điện tử
(electronic forms), các màn hình và cả các trang
Web…
▪ Howlett dựa vào những kinh nghiệm của mình tại
Microsoft, đã đưa ra các lỗi thường gặp nhất đối với
việc thiết kế giao diện trực quan.
▪ Các trang Web cũng đưa đến cho người sử dụng
hàng loạt các sự xao nhãng, bối rối vì sự tích hợp
các hình đồ họa quá lớn. Nielsen đã dành hơn 10
năm để soạn ra danh sách các lỗi hàng đầu trong
thiết kế trang Web.
5
Người sử dụng muốn gì ở giao diện?
▪ Một diện mạo có thứ tự, ngăn lắp, không lộn xộn
▪ Một dấu hiệu rõ ràng về những gì đang được hiển thị
và những gì cần người sử dụng cần thao tác với nó
một cách rõ ràng
▪ Thông tin mong đợi nằm ở vị trí cần thiết
▪ Thể hiện rõ ràng các thông tin liên quan đến nhau
trên giao diện, bao gồm tùy chọn, tiêu đề, chú thích,
dữ liệu, v.v.
▪ Các từ ngữ bằng tiếng Anh đơn giản
▪ Đơn giản để tìm kiếm và lấy các nội dung
▪ Dấu hiệu rõ ràng về thời điểm một hành động có thể
tạo ra thay đổi vĩnh viễn trong dữ liệu hoặc hệ thống
6
Những mục tiêu thiết kế giao diện
Để tạo ra một giao diện dễ sử dụng và dễ chịu, mục

tiêu trong thiết kế là:
▪ Giảm bớt công việc bằng mắt nhìn
▪ Giảm bớt các công việc thuộc về trí óc
▪ Giảm bớt công việc về trí nhớ
▪ Giảm bớt công việc phải vận động
▪ Giảm tối thiểu hoặc loại trừ tất cả các gánh nặng hay
chỉ dẫn bị áp đặt bởi công nghệ
7
Ý nghĩa và mục đích của màn hình, trang Web
▪ Tất cả các thành phần giao diện phải có ý

nghĩa với người sử dụng và phục vụ mục
đích thực hiện các tác vụ hoặc đáp ứng được
yêu cầu phải hoàn thành.
▪ Nếu một thành phần không có ý nghĩa đối với
người sử dụng thì không cho nó vào giao
diện vì nó là những thông tin nhiễu.
8
Ý nghĩa và mục đích của màn hình, trang Web
▪ Từng thành phần. ▪ Từng màu sắc.
▪ Mọi loại điều khiển. ▪ Mọi hình đồ họa.
▪ Mọi loại văn bản. ▪ Mọi màn hình động.
▪ Tổ chức màn hình. ▪ Từng thông báo.
▪ Mọi kiểu nhấn mạnh ▪ Mọi hình thức thông tin

phản hồi…
Phải:
- Có ý nghĩa với người sử dụng
- Phục vụ mục đích thực hiện các tác vụ 9
Tín hiệu và nhiễu
▪ Tín hiệu là những thông tin có ích.
▪ Nhiễu là những thông tin vô nghĩa.
Nhiễu làm giảm sự rõ ràng của màn hình /trang Web

bởi vì những thông tin hữu ích bị làm loãng bởi các
thông tin nhiễu.
Chúng gây sự xao nhãng, cạnh tranh để được người

đọc chú ý và góp phần làm quá tải thông tin.
10
Tín hiệu và nhiễu
Ví dụ về nhiễu
→ Mục tiêu của thiết kế là giảm thiểu các thông tin nhiễu
11
Tổ chức các thành phần một cách rõ ràng
và có ý nghĩa
▪ Khi các thành phần hiển thị được tổ chức và trình bày
một cách có ý nghĩa, dễ hiểu và dễ nhận biết thì đạt
được sự rõ ràng trực quan.
▪ Tổ chức một cách rõ ràng và thoáng sẽ giúp nhận ra
các thành phần thiết yếu của màn hình và bỏ qua
những thông tin thứ yếu.
▪ Tránh: tạo ra sự hỗn loạn thị giác bởi các thành phần
không dễ thấy, vị trí tùy tiện và các kiểu mẫu dễ gây
nhầm lẫn.
12
Tổ chức các thành phần một cách rõ ràng
và có ý nghĩa
Sự rõ ràng bị ảnh hưởng bởi các nhân tố
✓ Sự nhất quán trong thiết kế,
✓ Kết cấu trực quan ưa nhìn,
✓ Sắp xếp thông tin có thứ tự và ngăn nắp,
✓ Trình bày lượng thông tin phù hợp,
✓ Các phân nhóm và sự sắp xếp các mục trên màn hình
13
Sự nhất quán
▪ Cung cấp sự̣ nhất quán về chức năng và thẩm mỹ

trong thiết kế
▪ Cung cấp tính nhất quán trong thế giới thực
▪ Cung cấp tính nhất quán nội bộ
▪ Các thủ tục điều hướng và vận hành
▪ Nhận dạng hình ảnh hoặc chủ đề
▪ Thành phần
▪ Tổ chức
▪ Trình bày
▪ Cách sử dụng
▪ Các vị trí
▪ Tuân theo các quy ước giống nhau
▪ Chỉ sai lệch khi có lợi ích rõ ràng cho người dùng
14
Sự nhất quán
Ví dụ: Lệnh in của MicroSoft Office
15
Điểm bắt đầu
Hiển thị văn bản

✓ Khi xem thông tin hiển thị ở dạng văn bản, mắt
thường di chuyển ngay lên phía trên bên trái trung
tâm của văn bản, sau đó nhanh chóng di chuyển
trong văn bản theo chiều kim đồng hồ.
✓ Định vị mục tiêu ở góc phần tư phía trên bên trái của
màn hình là nhanh nhất và định vị ở góc phần tư
phía dưới bên phải là lâu nhất (tStreveler và
Wasserman - 1984)
✓ Thói quen định hướng từ trên xuống dưới, từ trái
sang phải được cho rằng là do thói quen đọc văn
bản
16
Hiển thị đồ họa và web

(Hornoff và Halverson -2003) Hiển thị đồ họa làm thay
đổi hành vi đọc lướt do những gợi ý thêm bằng trực
quan. Nghiên cứu cho thấy: các chi tiết trực quan như
khoảng trống hay các thành phần đứng tách riêng nổi
bật hơn so với các thành phần khác luôn tạo ra lợi thế.
Các nghiên cứu cũng cho thấy:
✓ Con người có khuynh hướng nhìn văn bản trước, chứ
✓ không phải là hìnhảnh.
✓ Kiểu chữ to lấn át các kiểu chữ nhỏ hơn.
✓ Thông tin có sự thay đổi được nhìn trước các thông tin
✓ không có sự thay đổi.
17
18
Nghiên cứu cả Nielsen (2006) đã tìm ra rằng con người đọc

các trang Web theo kiểu hình chữ F: hai hàng ngang và một
hàng dọc:
▪ Mắt người nhìn vào hàng ngang đầu tiên trước, thường là đọc
qua phần trên của nội dung
▪ Tiếp theo, người ta chuyển cái nhìn xuống dưới trang và sau đó
nhìn vào hàng ngang thứ 2, bao phủ một khoảng ngắn hơn lần
di chuyển mắt trước đó
▪ Cuối cùng, mắt người ta quét qua phần nội dung phía bên trái
theo chiều dọc. Tốc độ quét có thể thay đổi, thỉnh thoảng chậm
và có hệ thống, lúc khác thì lại nhanh
Kiểu di chuyển không phải luôn luôn theo hình chữ F,đôi khi
đọc từ trên xuống dưới theo kiểu chữ L hay kiểu chữ E.
19
Bố cục hình chữ F là lối thiết kế các khối nội dung trên web
theo đúng điểm nhìn đặc trưng của hầu hết mọi người ghé
thăm các site
20
Ví dụ về trang web bố trí kiểu chữ F
21
Sắp xếp có trật tự dữ liệu và nội dung
▪ Chia thông tin thành các đơn vị có ý nghĩa và hợp lý.

▪ Tổ chức theo mức độ tương quan giữa dữ liệu hoặc thông tin.
▪ Quy định cách sắp xếp có trật tự các đơn vị và các thành phần
thông tin trên màn hình được ưu tiên theo mong đợi và nhu cầu
của người dùng.
▪ Các lược đồ sắp xếp theo trật tự có thể bao gồm:
- Theo quy ước
- Trình tự sử dụng.
- Tần suất sử dụng.
- Chức năng
- Tầm quan trọng.
- Từ tổng quát đến cụ thể
22
▪ Hình thành các nhóm có thể bao gồm tất cả các khả
năng.
▪ Đảm bảo rằng thông tin phải được so sánh đồng thời
về mặt trực quan.
▪ Đảm bảo rằng chỉ có thông tin liên quan đến nhiệm
vụ hoặc nhu cầu của người dùng được hiển thị trên
màn hình.
23
Hãy quan sát cách bố trí có trật tự, nhất quán, theo thứ ưu
tiên về mức độ sử dụng…của hộp thoại Page Setup
24
Sắp xếp có trật tự các trang Web
Việc thiết kế và sắp xếp có trật tự một trang Web cần phải
phản ánh được tầm quan trọng của các thành phần tạo nên
trang Web đó đối với người xem. Những nguyên tắc chỉ dẫn
dưới đây đã được Koyani et al. đưa ra năm 2004, bao gồm:
✓ Thiết lập theo mức độ quan trọng.
✓ Đặt các thông tin rất quan trọng gần phía trên cùng của Website.
✓ Đặt các mục quan trọng ở phía trên cùng của trang.
✓ Tổ chức thông tin một cách rõ ràng.
✓ Sắp xếp các mục quan trọng một cách nhất quán.
✓ Tạo thuận lợi cho việc đọc lướt thông tin (scanning).
✓ Cấu trúc dễ so sánh.
25
Sự định hướng và phân luồng
▪ Trình tự sử dụng có thể được thực hiện rõ ràng hơn

thông qua sự kết hợp của các đường bao xung
quanh các phân nhóm thông tin liên quan với nhau
hoặc các điều khiển màn hình.
▪ Các đường bao sẽ cung cấp những tín hiệu gợi ý
bằng trực quan liên quan đến việc sắp xếp các thành
phần của màn hình, bởi vì mắt sẽ có xu hướng ở lại
trong phạm vi đường bao để hoàn thành một tác vụ.
▪ Sắp các thành phần thẳng hàng cũng sẽ giảm thiểu
việc đọc lướt qua màn hình và các chuyển động định
hướng
26
❖ Trong thiết lập chuyển động của mắt qua toàn bộ màn
hình, cũng phải xem xét đến mắt có xu hướng di chuyển
theo tuần tự, ví dụ:
▪ Từ những vùng tối sang vùng sáng
▪ Từ những đối tượng lớn sang đối tượng nhỏ.
▪ Từ những hình không quen thuộc sang những hình thông dụng.
▪ Từ những màu sắc có độ đậm cao sang màu nhạt.
❖ Những kỹ thuật này có thể được sử dụng ban đầu để tập
trung sự chú ý của một người đến một khu vực của màn
hình và sau đó hướng sự chú ý đi nơi khác.
27
▪ Duy trì từ trên xuống dưới, từ trái sang phải qua màn
hình.
▪ Hướng từ trên xuống dưới này được khuyến nghị vì:
− Sự di chuyển mắt giữa các mục sẽ ngắn hơn.
− Sự di chuyển điều khiển giữa các mục sẽ ngắn hơn
− Các phân nhóm làm cho cảm giác rõ rang hơn
− Khi mắt của một người di chuyển ra khỏi màn hình rồi quay
lại, nó sẽ quay trở lại cùng vị trí mà nó đã rời đi, ngay cả khi
nó đang tìm kiếm mục tiếp theo theo trình tự.
28
Ví dụ
29
Vận dụng: Điều gì tạo ra sự khác biệt cơ bản giữa 2

hộp hội thoại này?
30
Một bố cục ưa nhìn
Một bố cục ưa nhìn và có tính thẩm mỹ có các phẩm

chất sau:
✓ Cân bằng
✓ Đối xứng
✓ Đồng đều
✓ Có thể dự đoán được
✓ Liên tục
✓ Tiết kiệm
✓ Đồng nhất
✓ Tỷ lệ cân xứng
✓ Đơn giản
✓ Phân nhóm được.
31
Cân bằng
Tạo ra sự cân bằng bằng cách cung cấp một trọng lượng
bằng nhau giữa các thành phần của màn hình, trái, phải,
trên và dưới
Cân bằng
Không ổn định
32
Đối xứng
Tạo đối xứng bằng cách bằng cách sao chép các thành
phần bên trái và bên phải qua trục màn hình
Đối xứng
Không đối xứng
33
Đồng đều
▪ Tạo ra sự đồng đều bằng cách thiết lập chuẩn và các

điểm sắp thành hang nằm cách nhau một cách nhất quán
theo chiều ngang và chiều dọc
▪ Sử dụng kích thước, màu sắc, khoảng cách của các
thành phần tương tự
Đồng đều
Không đồng đều
34
Có thể dự đoán được
Tạo ra sự dự đoán được bằng cách kiên định và tuân

theo những trật tự hoặc sắp xếp có tính quy ước
Khả năng có thể

dự đoán
Sắp xếp tự nhiên
35
Sự liên tục
Cung cấp sự liên tục bằng cách sắp xếp các thành
phần để hướng mắt người qua toàn bộ màn hình theo
một cách hợp lý, rõ ràng, nhịp nhàng và hiệu quả
Sự liên tục
Sự ngẫu nhiên
36
Sự tiết kiệm
Cung cấp sự tiết kiệm bằng cách dùng một ít kiểu cách,
kỹ thuật hiển thị và màu sắc…
Sự tiết kiềm
Sự phức tạp
37
Sự đồng nhất
▪ Sử dụng các kích cỡ, hình dạng hay màu sắc tương tự
cho các thông tin liên qua đến nhau
▪ Để lại khoảng trống ít hơn giữa các thành phần của một
màn hình so với khoảng trống của các lề bên trái
Sự đồng nhất
Sự phân mảnh
38
Tỷ lệ cân xứng
▪ Tạo ra các cửa sổ và các phân nhóm dữ liệu hay văn

bản với các tỷ lệ hài hòa về mặt thẩm mỹ
Marcus (1992) mô tả những hình dạng trên là những hình dạng mang tính
thẩm mỹ
39
Đơn giản
▪ Tối ưu hóa số lượng các thành phần trên màn hình,

trong phạm vi giới hạn rõ ràng
▪ Tối thiểu hóa các điểm căn chỉnh sắp hàng, đặc biệt
là theo phương ngang hoặc theo phương cột
Sự đơn giản
Sự phức tạp
40
Phân nhóm
❖ Phân nhóm các thành phần của màn hình sẽ hỗ trợ cho
việc thiết lập cấu trúc, các mối quan hệ và các biểu
mẫu có ý nghĩa. Ngoài việc đem lại yếu tố thẩm mỹ ra,
các nghiên cứu trước đây đã chỉ ra rằng phân nhóm sẽ
hỗ trợ trong việc gợi nhớ thông tin và cho phép tìm
kiếm trên màn hình nhanh hơn.
❖ Hãy cung cấp các phân nhóm chức năng cho các thành
phần liên quan với nhau để tăng cường tính trực quan.
❖ Phân nhóm bằng:
✓ Khoảng trắng;
✓ Đường viền;
✓ Màu của nền
41
Phân nhóm
Phân nhóm bằng khoảng trắng:
✓ Hãy cung cấp sự ngăn cách vừa đủ giữa các thành

phần thông qua sử dụng tùy ý khoảng trắng.
✓ Với các trang Web, hãy cân nhắc thật kỹ lưỡng việc
cân bằng giữa khoảng trắng màn hình với yêu cầu
dùng thanh cuộn trang.
42
Phân nhóm
Phân nhóm bằng đường viền:

Kết hợp các đường viền để tập trung sự chú ý vào các
phân nhóm hay những thông tin có liên quan và định
hướng mắt người sử dụng vào màn hình.
✓ Không nên vượt quá 3 loại độ dày của đường kẻ
hoặc 2 kiểu đường kẻ trên một màn hình.
✓ Tạo ra các đường kẻ nhất quán về chiều cao và độ
dài.
✓ Để lại khoảng trống đệm vừa đủ giữa thông tin và
các đường viền xung quanh
43
Phân nhóm
Phân nhóm bằng đường viền (tiếp):

✓ Sắp thẳng hàng các đường viền ở bên trên, bên phải, bên
trên trái, bên dưới.
✓ Sử dụng vừa phải các đường kẻ thẳng và các đường
viền.
✓ Trong thiết kế trang Web:
▪ Thận trọng khi sử dụng các đường kẻ ngang như là
những thành phần chia tách giữa các phần của trang;
▪ Để dành các đường kẻ ngang cho những trường hợp
giữa các vùng liền kề cần phải được nhấn mạnh
44
Phân nhóm
Phân nhóm bằng màu nền:

▪ Hãy cân nhắc khoảng 25% xám cho nền màn hình.
▪ Duy trì sự tương phản cao hơn cho các thành phần
màn hình cần được sự quan tâm đến.
45
Hiển thị thông tin đơn giản và đủ nghĩa
✓ Cung cấp tính rõ ràng, thông tin phải dễ chú ý và

phải khác biệt.
✓ Cung cấp tính dễ đọc: Thông tin phải dễnhận biết, rõ
ràng và lôi cuốn.
✓ Hiển thị thông tin ở dạng dễ sử dụng: Dịch, chuyển
đổi và tham chiếu tới tài liệu ko nên bị yêu cầu phải
diễn giải và hiểu thông tin.
✓ Sử dụng các tính năng hiển thị tương phản để lôi
cuốn và gợi chú ý tới các thành phần khác nhau của
màn hình.
✓ Tạo ra các đường kẻ trực quan, cả các đường ẩn và
đường hiện để hướng ánh mắt nhìn.
✓ Nhất quán theo diện mạo và cách sử dụng.
46
Các kiểu và các họ font

▪ Sử dụng các font đơn giản, thông dụng và quen thuộc để
đạt được tốc độ đọc tốt nhất.
▪ Tránh các font đặc biệt hoặc “gây ấn tượng”.
▪ Sử dụng không quá hai họ font, tương thích về độ dày
của nét, chiều cao ký tự viết hoa,…
▪ Ấn định một mục đích riêng rẽ với mỗi họ font.
▪ Cho phép một họfont chiếm ưu thế.
▪ Dường như không có những khác biệt rõ ràng về tốc độ
đọc cho những người trưởng thành khi sử dụng các font
thông dụng.
▪ Hầu như mọi người thích các font không chân của Arial
và Verdana
47
Một họ các kiểu font được thiết kế nhằm bổ sung cho

nhau, tạo nên sự thống nhất trong thiết kế
Họ font times
48
Cỡ chữ:
Các cỡ chữ được mô tả theo đơn vị point - khoảng
cách tính từ điểm đầu nhô cao nhất của một chữ cái
đến điểm thấp nhất của chữ cái đó. Một point = 1/12
inch. Các cỡ chữ nên đủ lớn để đọc được trên các màn
hình tiêu chuẩn.
✓ Sử dụng không quá ba cỡ chữ.
✓ Hãy quan tâm đến chiều cao chữ “x”.
✓ Không bao giờ thay đổi cỡ chữ đã được thiết lập để
cố nhét thêm nội dung.
49
Đối với loại tài liệu in ra giấy

Tiêu đề chương: 24 - point đậm
Tiêu đề mục: 18- point đậm
Tiêu đề tiểu mục: 14 - point đậm
Tiêu đề cho đoạn: 12 - point đậm
Văn bản: 10 - point đậm
Chú thích/chú giải: 8 - point đậm
50
Hướng dẫn của Galitz về font size đối với:

✓ Hệ thống đồ họa
• Cỡ chữ 12 point cho chữ cho menu
• Cỡ chữ 10 point cho chữ trên cửa sổ
✓ Đối với các trang Web.
• Cỡ chữ 12 đến 14 point cho chữ trong trang
• Cỡ chữ 18 đến 36 point cho chữ dùng làm các đầu đề và
tiêu đề
→ Kết luận của tác giả về nghiên cứu “cỡ chữ hợp lý có
thể ảnh hưởng bởi lứa tuổi”;
51
Một số hướng dẫn về kiểu chữ và hiệu ứng đậm, nghiêng.

▪ Không sử dụng nhiều hơn:
▪ Hai kiểu chữ trong cùng họ
▪ Tiêu chuẩn và in nghiêng
▪ In nghiêng được trình bày tốt nhất với kiểu chữ có chân
▪ Hai độ đậm khác nhau
▪ Thường và đậm
▪ Tô đậm được trình bày tốt nhất với kiểu chữ không chân
▪ Sử dụng chữ in nghiêng khi muốn gây chú ý
▪ Sử dụng chưa in đậm khi muốn gây chú ý hoặc tạp sự phân
cấp
▪ Trong web, sử dụng các chữ có đường gạch chân để chỉ ra
các đường liên kết điều hướng
52
Một số hướng dẫn sử dụng chữ hoa/thường

✓ Sử dụng kiểu chữ hỗn hợp cho: Chú giải của điều
khiển, dữ liệu, các mô tả lựa chọn của điều khiển,
chữ viết, các thông báo thông tin, thông tin chỉ dẫn,
các mô tả menu, các mô tả các nút lệnh
✓ Xem xét sử dụng toàn chữ hoa: Đầu tiêu đề, các tiêu
đề mục, các tiêu đề tiểu mục, các chú ý/cảnh báo,
các từ hoặc cụm từ có cỡ chữ nhỏ
✓ Sử dụng toàn bộ chữ thường cho các lời cảnh báo
53
Một số lưu ý
✓ Với ứng dụng đồ họa, sử dụng font chữ hệ thống tiêu
chuẩn.
✓ Với các trang web và các ứng dụng, thiết kế theo
font mặc định của trình duyệt.
✓ Cân nhắc các trường hợp người sử dụng thay đổi
font
→ Cỡ chữ hợp lý có thể ảnh hưởng bởi lứa tuổi
54
Các thành phần ứng dụng màn hình
- Đầu đề
- Các chú giải, tên nhãn
- Các tiêu đề
- Các ký hiệu đặc biệt
- Các chỉ dẫn
- Các chỉ thị bổ trợ hoàn tất
55
Đầu đề
Một đầu đề đủ nghĩa sẽ cung cấp một lộ trình hỗ trợ

cho việc hiểu về cách tổ chức của ứng dụng và các
thức điều hướng.
Với các cửa sổ của ứng dụng:
✓ Đầu đề đặt ở trên cùng của cửa sổ
Với các trang web
✓ Các đầu đề đặt trên thanh đầu đề của trình duyệt và
trên chính các trang nội dung.
✓ Các đầu đề phải:
• Có tính mô tả
• Thống nhất, khác nhau về nghĩa so với các trang khác
• Ngắn gọn
56
Các chú giải/tên nhãn
▪ Các chú giải hoặc tên nhãn phù hợp là cực kỳ quan trọng.
▪ Theo kết quả nghiên cứu của Resnick và Sanchez (2004)
trên 2 lược đồ tổ chức website, đã đưa ra ba mức ghi nhãn:
tốt, bình thường và kém. Nghiên cứu đã chỉ ra rằng các tên
nhãn tốt có tác động sâu rộng hơn về mặt chất lượng. Các
tên nhãn tốt có kết quả:
• Tác động hơn 90% để tìm một mục.
• Dưới 25% thao tác click để hoàn thành một tác vụ.
• Lỗi giảm đáng kể(lạc ra khỏi đường đi tối ưu).
• Các mục được tìm thấy nhiều hơn đáng kể.
• Cấp độ làm hài lòng người sửdụng tăng cao hơn nhiều.
→ Các tên nhãn phù hợp là chìa khóa cho kiến trúc site hợp lý
và sự điều hướng mở rộng.
57
Các chú giải/tên nhãn
Chú giải của điều khiển – Căn lề trường dữ liệu

Giải pháp thứ nhất: Căn trái cho cả chú giải và trường
dữ liệu. Để lại một khoảng trống giữa chú giải dài nhất
và cột trường dữ liệu
Giải pháp thứ hai: Căn trái các trường dữ liệu và căn
phải các chú giải so với các trường dữ liệu. Để lại một
khoảng trống ở giữa chú giải và trường dữ liệu
58
Các tiêu đề
Tiêu đề của đề mục
Tiêu đề của đề mục/tiêu đề

hàng
Tiêu đề của đề nhóm của

trường dữ liệu
59
Các ký hiệu đặc biệt, các chỉ dẫn
Các ký hiệu đặc biệt:

▪ Được xem xét để nhấn mạnh hay gây
chú ý tới thành phần trên màn hình.
▪ Các ký hiệu nên được phân tách với
các từ ngữ bằng một dấu cách.
Các chỉ dẫn (hướng dẫn):
▪ Vị trí ngay trước phần hoặc các thành
phần của màn hình mà chúng hỗ trợ
▪ Theo cách phân biệt được bằng trực
quan
▪ Ở vị trí mà sẽ phân biệt được chúng
bằng trực quan
▪ Sử dụng kiểu font tổng hợp
60
Chỉ thị hỗ trợ hoàn tất
✓ Nằm ở phía bên phải của điều khiển mục nhập text
mà chúng ta hỗ trợ
✓ Phân biệt được bằng trực quan: Hiển thị trong dấu
ngoặc đơn, font chữ thống nhất
✓ Nên bố trí khoảng cách giưa các điều khiển với chỉ
thị bổ trợ phải phù hợp
✓ Căn trái các chỉ thị bổ trợ thành cột tương ứng các
điều khiển
61
Đầu ra dữ liệu
1.Đầu ra dữ liệu bao gồm những gì?

2.Các hướng dẫn viết báo cáo.
3.Các hướng dẫn thể hiện bảng biểu
62
Căn chỉnh dữ liệu
Căn chỉnh trái các định dạng text và vừa text vừa chữ số
Căn chỉnh phải các danh sách dữ liệu bằng chữ số
Tạo ra một “thang” dữ liệu
63
Hiển thị dữ liệu
❖ Xem xét không hiển thị các dữ liệu mà giá trị của chúng là
trống hoặc bằng 0
❖ Xem xét các bản kê dữ liệu trong đó chú giải và dữ liệu

được kết hợp với nhau
64
Web – các website và các trang web
▪ Kích thước của một website

▪ Cách người sử dụng tương tác với web
▪ Trải nghiệm web
▪ Trang chủ
65
Kích thước của một website
▪ Web gần như là nguồn cung cấp thông tin không có giới hạn đối
với những người có thể tìm thấy nó. Tuy nhiên khó khăn đối với
người sử dụng là họ không biết làm thế nào để điều hướng
được trong Web, tìm kiếm giữa một biển thông tin hiện ra trước
mắt, và cuối cùng là tìm thấy cái mình cần.
▪ Các Website thường biến đổi theo ba phương diện: cấu trúc,
điều hướng và nội dung thông tin.
✓ Các vấn đề cấu trúc quan trọng bao gồm cách thức thông tin trên
một trang Web được tổ chức, số lượng các trang và độ dài mỗi trang.
✓ Các vấn đề điều hướng chủ yếu tập trung vào cách thức người sử
dụng di chuyển xung quanh site, kể cả các phương pháp được sử
dụng và sự hỗ trợ site sẽ cung cấp để trợ giúp cho việc điều hướng.
✓ Các vấn đề nội dung thông tin là thông tin nào được đưa vào trang
Web, cách thức thông tin được đưa vào và cách thức trình bày thông
tin.
66
Cách người sử dụng tương tác với Web
Nghiên cứu về phân tích tác vụ của người sử dụng có hiểu

biết đã chỉ ra ba cách tương tác Web khác nhau:
✓ Duyệt là cách lướt Web không rõ ràng. Người ta di
chuyển qua một Website theo cách của họ và theo mối
quan tâm riêng của họ.
✓ Tìm kiếm thông tin liên quan tới việc tìm kiếm các câu trả
lời cụ thể cho những câu hỏi cụ thể hay nhu cầu nào đó.
Nielsen đưa ra bằng chứng cho thấy chẳng có Website
đơn lẻ nào kết hợp được tất cả các trải nghiệm của người
sử dụng.
✓ Thu thập thông tin liên quan đến việc thực hiện thăm dò
trước cho những hoạt động trong tương lại cần được
thực hiện, hoặc thông tin được tìm kiếm về sau.
67
Trải nghiệm Web
▪ Những kỳ vọng: Đáp ứng những kỳ vọng của người sử dụng về

nội dung, cách tổ chức và sự điều hướng.
▪ Các tác vụ
▪ Đảm bảo rằng thiết kế phản ánh được các năng lực cũng
như những hạn chế của người sử dụng.
▪ Chuẩn hóa các chuỗi tác vụ.
▪ Cung cấp tính dễ dàng sử dụng.
▪ Diện mạo nhìn bên ngoài: Cung cấp một diện mạo nhìn bên ngoài
mà sẽ: Thu hút và Nhất quán.
▪ Nội dung thông tin
▪ Bảo đảm rằng nội dung thông tin đáp ứng được tất cả nhu
cầu của người sử dụng.
▪ Bảo đảm các thông tin quan trọng nhất: Được đặt ở vị trí
nổi bật nhất. Được hiển thị ra ngay mà không cần cuộn.
▪ Bảo đảm rằng nội dung thông tin được cập nhật thường
xuyên.
68
Trang chủ
✓ Trang chủ của một site là trang quan trọng nhất của
Website.
✓ Trang chủ tạo cho người xem ấn tượng đầu tiên về một
site.
✓ Ấn tượng đầu tiên mang tính tiêu cực có thể khiến cho
người sử dụng bỏ đi, ấn tượng đầu tiên mang tính tích cực
có thể kích thích họ khám phá sâu hơn.
✓ Một nghiên cứu cho biết khi mọi người được đề nghị tìm
các site chất lượng cao thì khoảng một nửa trong số họ chỉ
nhìn vào trang chủ.
✓ Một trang chủ phải được nhận biết một cách dễ dàng rằng
đó là trang chủ.
✓ Mọi người kỳ vọng tìm thấy những thành phần nhất định
được hiển thị trên trang chủ và các hành động sẵn dùng
trên trang chủ. 69
Cân nhắc công nghệ trong thiết kế giao diện
Thiết kế giao diện cũng chịu ảnh hưởng bởi:

- Các đặc tính của phần cứng đang sử dụng
- Phần mềm điều khiển giao diện
70
Với các hệ thông đồ hoạ - Thiết kế mà hình phải tương

thích với:
▪ Năng lực của hệ thống (công suất hệ thống, kích
thước và độ phân giải của màn hình, các đặc điểm
hiển thị khác).
▪ Năng của nền tảng hệ thống đang sử dụng, công cụ
phát triển và chỉ dẫn kiểu nền tảng đang sử dụng.
71
Với các hệ thống web

- Hiểu rõ trình độ hiện tại của công nghệ web
- Thiết kế theo cấu hình được nhiều người sử dụng
nhất
- Không tuỳ tiện sử dụng các công nghệ hàng đầu
72
Thảo luận
Các chỉ dẫn của Galitz cho thiết kế website

1- Các chỉ dẫn cho thiết kế trang chủ.
▪ Mục đích của trang chủ;
▪ Nội dung;
▪ Kích cỡ;
▪ Các thành phần được đưa vào.
2- Các nguyên tắc chỉ dẫn phương tiện tìm kiếm.
3- Cân nhắc công nghệ trong thiết kế giao diện.
4- Các mối quan tâm khác cho thiết kế các trang web.
73
HỆ THỐNG MENU VÀ CỬA SỔ
(BƯỚC 4 + 5)

1
Nội dung
➢ Phát triển hệ thống menu
➢ Lược đồ điều hướng
➢ Lựa chọn loại cửa sổ thích hợp
2
Bước 4:
Phát triển hệ thống menu
3
4
Menu
Ưu điểm:
Mang lại hiệu quả làm việc vì chúng sử dụng khả năng
nhận thức của con người mà khả năng đó mạnh hơn
khả năng hồi tưởng.
Làm việc với menu sẽ nhắc cho con người các tùy chọn
và thông tin có sẵn mà họ có thể không quan tâm hoặc
đã quên.
5
Menu
Ví dụ về tính tiện dụng của Menu
6
Menu
7
Menu
8
Menu
Nhược điểm:
Người mới sử dụng hệ thống và thiếu kinh nghiệm có
thể thấy khó khăn khi học sử dụng các hệ thống lớn:
➢ Thông tin trên menu thường phải được ghi nhớ và
tích hợp qua một loạt các màn hình.
➢ Nếu mỗi menu được xem một cách riêng biệt thì các
mối quan hệ giữa các menu có thể khó nắm bắt.
➢ Các từ và cụm từ có nhiều ý nghĩa cũng có thể bị
hiểu sai, vì người sử dụng khó có thể thấy các mối
quan hệ giữa các menu.
➢ Thường thì người sử dụng sẽ mắc các lỗi và có thể
bị lạc trong cấu trúc phân cấp.
9
Menu
Ví dụ về tính không thuận lợi của menu
10
Menu
Nhược điểm (tiếp)

➢ Người sử dụng hệ thống có kinh nghiệm:
Thấy menu nhàm chán khi học sử dụng hệ
thống.
➢ Phải đi từng bước liên tục qua một loạt các
menu để tới được mục tiêu mong muốn có
thể tốn thời gian và gây bực bội.
→ Việc thiết kế các hệ thống menu phải xem
xét các nhu cầu mâu thuẫn nhau của cả người
sử dụng thiếu kinh nghiệm và có kinh nghiệm.
11
Các cấu trúc của một menu
Menu khác nhau về hình thức từ đơn giản đến rất phức
tạp.
➢ Có thể là các hộp thoại nhỏ yêu cầu người sử dụng
chọn một trong hai khả năng
➢ Có thể là các lược đồ cây phân cấp với nhiều nhánh
và các mức có độ sâu nhất định.
Cấu trúc của một menu xác định số lượng điều khiển
cung cấp cho người sử dụng thực hiện một tác vụ
12
Các cấu trúc của một menu
Các cấu trúc phổ biến nhất là:

▪ Menu đơn (Single menus)
▪ Menu tuyến tính tuần tự (Sequential Linear Menus)
▪ Menu đồng thời (Simultaneous Menus)
▪ Menu thứ bậc hoặc tuần tự (Hierarchical/Sequential
Menus)
▪ Menu liên kết (Connected Menus)
▪ Menu bẫy sự kiện (Event-trapping Menus)
13
Các cấu trúc của menu
Menu đơn
Menu tuần tự tuyến tính
14
Menu đồng thời
Menu liên kết
15
Menu thứ bậc hay tuần tự
16
Chức năng của menu
Menu có thể được sử dụng để thực hiện các chức

năng:
➢ Điều hướng đến một menu mới;
➢ Thực thi một hành động hoặc một thủ tục;
➢ Hiển thị thông tin;
➢ Nhập dữ liệu hoặc các tham số
17
Nội dung của menu
Một menu gồm 4 thành phần:

➢ Ngữ cảnh (context): Ngữ cảnh của menu cung cấp thông tin để
giữ người sử dụng được định hướng. Loại thông tin này là rất quan
trọng trong các hệ thống menu phức hợp hoặc thứ bậc.
➢ Tiêu đề (title): Tiêu đề của menu cung cấp ngữ cảnh cho thiết lập
hiện tại các lựa chọn. Tiêu đề phải phản ánh sự lựa chọn dựa trên
menu hiển thị trước đó;
➢ Các mô tả lựa chọn (choice descriptions): Các mô tả lựa

chọn là những lựa chọn thay thế có sẵn cho người sử dụng;
➢ Các chỉ dẫn hoàn thành (completion instructions): Các

chỉ dẫn rõ ràng có thể cần thiết cho lần sử dụng đầu tiên/người sử
dụng bình thường. Người sử dụng có kinh nghiệm sẽ thấy hướng dẫn
quá dài dòng không cần thiết
18
Định dạng Menu
Nhất quán: Định dạng, cách dùng từ, cách chọn các
lựa chọn và điều hướng của menu phải nhất quan
xuyên suốt một hệ thống đồ họa hoặc trang Web;
Hiển thị: Hiển thị menu liên tục hoặc theo yêu cầu
được xác định bởi tần suất sử dụng của menu. Luôn
luôn hiển thị các menu cố định mà thường xuyên được
tham khảo;
Trình bày: Đảm bảo rằng một menu và các lựa chọn
của nó là rõ ràng cho người sử dụng bằng cách trình
bày chúng theo một cấu trúc, vị trí và/hoặc kỹ thuật hiển
thị độc đáo và nhất quán;
19
Định dạng menu
Độ phức tạp: cung cấp cả đơn giản và phức tạp. SAA

CUA của IBM gọi những menu này là menu ngắn và menu
đầy đủ.
Sắp xếp mục:
▪ Dọc: trên xuống và canh lề trái;
▪ Ngang: trái sang phải;
Sắp xếp thứ tự: theo thứ tự tự nhiên, theo số thứ tự, tần
suất xuất hiện; theo cấp độ quan trọng; ngữ nghĩa…
Phân nhóm: Tăng khoảng cách giữa các nhóm, tạo
đường kẻ mỏng;
20
Định dạng menu
Các đường kẻ phân cách: Kẻ các đường nét liền hoặc nét
đứt và mảnh giữa các nhóm.
Các menu hỗ trợ lựa chọn: menu chia tách, menu nếp
gấp, menu thời gian.
Menu truyền
thống Menu chia tách Menu nếp gấp Menu thời gian
21
Diễn đạt menu
Một menu phải truyền đạt tới người sử dụng những

thông tin về:
➢ Bản chất và mục đích của chính menu
➢ Bản chất và mục đích của mỗi lựa chọn được hiển
thị
➢ Cách thức chọn lựa hoặc các lựa chọn thích hợp
22
Các phím tắt của bàn phím
Các phím tắt cho phép thực hiện các hành động qua bàn
phím thay vì dùng chuột.
Các phím tắt bao gồm:
➢ Phím tương đương (keyboard equivalents). Microsoft
Windows gọi là phím truy cập (access keys).
➢ Phím chọn nhanh (keyboard accelerators). SAA CUA
của IBM và Microsoft Windows gọi là phím tắt (shortcut
keys). Chúng còn được gọi là phím nóng (hot keys)
→ Trong một nghiên cứu, các phím tắt đã cho thấy là
nhanh hơn và chính xác hơn đáng kể so với việc click
chuột, và hầu như tất cả người sử dụng đều thích phím tắt
hơn (Jorgensen và các cộng sự, 2002).
23
Các phím tắt của bàn phím
Ví dụ:
Các phím tương đương Các phím chọn nhanh
24
Điều hướng website
Điều hướng là phương pháp được dùng để tìm nội dung

mong muốn trong một trang Web.
Điều hướng, và một cấu trúc điều hướng hiệu quả là
yếu tố quan trọng nhất trong tính tiện dùng của hệ
thống.
Một cấu trúc điều hướng đơn giản và rõ ràng là xương
sống mà trên đó đặt tất cả các tính năng hệ thống.
Để điều hướng tới một đích đến, người ta dùng thông
tin có sẵn về không gian và môi trường, một quá trình
gọi là tìm đường (wayfinding)
25
Điều hướng website
Tìm đường (wayfinding) liên quan đến bốn giai đoạn:

➢ Định hướng (orientation);
➢ Quyết định lộ trình (route decision);
➢ Theo dõi lộ trình (route monitoring);
➢ Xác nhận điểm đến (destination recognition)
26
Các vấn đề điều hướng website
▪ Các vấn đề về kỹ thuật

▪ Các vấn đề về cách sử dụng
27
Các vấn đề kỹ thuật
Ứng dụng hệ thống đồ họa Website

Các màn hình có xu hướng đi theo một Một trang Web bao gồm nhiều trang, về mặt lý
cách có trật tự và có thể dự đoán được. thuyết mỗi trang lại có thể được liên kết với bất kỳ
trang nào khác trong site
Người sử dụng bắt đầu một quá trình tại Người sử dụng có thể thực hiện các tác vụ hoặc
một điểm khởi đầu đã quy định trước và sẽ đáp ứng các nhu cầu theo ý muốn, dễ dàng di
tiếp tục tuần tự cho đến khi hoàn thành quá chuyển giữa đa số các trang hoặc sang hẳn
trình hoặc tác vụ ấy website khác khi cần thiết.
Người sử dụng hệ thống đồ họa chỉ phải đối Người sử dụng Web phải đương đầu với hai hệ
phó với một hệ điều hành có các đặc tính thống điều hướng, một của trình duyệt đang sử
định hướng tiêu chuẩn và khá nhất quán. dụng và một của trang Web đang xem
Do bản chất phát triển và mở rộng nhanh chóng

của Web, các trang Web còn có một xu hướng
phát triển liên tục, các trang mới được bổ sung vào
→ Cơ cấu menu hợp lý ban đầu bị thay đổi
28
Các vấn đề về cách sử dụng
➢ Hai vấn đề người sử dụng nghiêm trọng nhất trong việc

điều hướng Web:
▪ Phải tiếp nhận một lượng thông tin quá lớn
▪ Thường có cảm giác mất phương hướng không gian.
➢ Trên một trang web thường có quá nhiều liên kết được
thể hiện, nhiều liên kết trong số đó ý nghĩa không rõ
ràng→ Người sử dụng dễ có hành vi “thử”.
➢ Cảm giác mất định hướng rất dễ xảy ra khi người ta "bị
lạc trong không gian Web."
29
Thành phần điều hướng
Một Website chứa ít nhất ba cấp độ các thành phần

điều hướng:
➢ Tổng quát (global) hoặc toàn site (site-wide);
➢ Cục bộ (local) và dành riêng (specific);
➢ Nhỏ (minor) hay ghi chú chân trang (footnote).
→ Phân biệt rõ ràng những nhân tố điều hướng này với
nhau và đặt chúng một cách nhất quán từ trang
nàysang trang khác.
30
Các vị trí các thành phần điều hướng trên web
31
Những cấu trúc điều hướng phổ biến nhất theo nghiên
cứu Kingsburg và Andre (2004):
(1) Một lựa chọn ban đầu được tạo ra từ bảng điều
hướng trên đầu trang, được tiếp theo bởi một lựa chọn,
và các lựa chọn con kế tiếp, từ bảng điều hướng phía
bên trái (TLL);
(2) Các lựa chọn ban đầu và kế tiếp đều được thực
hiện từ bảng bên trái (LLL).
32
Cấu trúc được khuyến nghị sử dụng:

- Tách các thành phần điều hướng này khỏi nội dung
- Thói quen của người sử dụng web là tìm những
thành phần điều hướng quan trọng ở trên đầu trang
và ở các bảng phía bên trái và phải.
Bailey (2006) nghiên cứu về hiệu suất trong sử dụng và
sự ưa thích của người sử dụng về tùy chọn điều hướng
website gồm:
- Tùy chọn đặt trên đầu trang [Top - T]
- Tùy chọn phía cuối bên trái trang [Left - L],
- Tùy chọn phía cuối bên phải trang [Right - R]
33
Người sử dụng ưa thích:

▪ Lựa chọn đầu tiên được thực hiện ở bảng bên trái.
▪ Cả hai lựa chọn đầu tiên và thứ hai đều được thực
hiện trên cùng một bảng, đầu trang hoặc bên trái.
▪ Các lựa chọn thứ hai và thứ ba, hoặc thứ nhất, thứ
hai và thứ ba được thực hiện trên cùng một bảng.
Các cấu trúc cho khả năng thực thi tốt nhất và
được ưa thích nhất là:
▪ Trái-Trái-Trái (left-left-left - LLL).
▪ Trái-Trên-Trên (left-top-top - LTT)
34
Những cấu trúc điều hướng đạt được khả năng thực thi
chậm hơn và có các tỷ suất ưa thích thấp hơn là:
▪ Trên-Trên-Trên (Top-Top-Top - TTT),
▪ Trên-Trái-Trên (Top-Left-Top - TLT),
▪ Phải-Trên-Phải (Right-Top-Right - RTR).
Có thể những cấu trúc thay thế này cho hiệu quả thấp
vì tính tổ chức kém hiệu quả trong việc rà soát (TTT),
đòi hỏi nhiều chuyển động mắt và chuột (TLT, RTR),
hoặc ngược với luồng đọc của mắt (RTR).
35
Các dạng menu đồ họa
Thanh menu
Thanh menu tạo bằng văn bản
Thanh menu tạo bằng các nút
36
Menu kéo xổ xuống (pull – down menu)
Menu bật lên (pop-up menu)
37
Menu xếp tầng (cascading menu)
Chỉ báo xếp tầng
38
Menu biểu tượng (Iconic menu)
Menu hình bánh (pie menu)
39
Menu bật ra (tear-off menu)
40
Bước 5:
Lựa chọn loại cửa sổ thích hợp
41
Cửa số
42
Cửa số
Cửa sổ (window) là:

▪ Một vùng trên màn hình, thường có hình chữ nhật
▪ Xác định bởi đường viền chứa một vùng hiển thị
riêng biệt của máy tính hoặc một phần của một
hội thoại giữa người với máy tính.
▪ Có thể được di chuyển và hoàn trả lại một cách
độc lập trên màn hình.
43
Cửa sổ
▪ Một cửa sổ có thể có:

▪ Kích thước nhỏ dùng để chứa một thông điệp
ngắn hay một trường nhập thông tin đơn lẻ.
▪ Kích thước lớn, chiếm hầu hết hoặc toàn bộ
không gian hiển thị hiện có.
▪ Một màn hiển thị có thể chứa một, hai, hoặc nhiều
hơn số lượng cửa sổ bên trong các đường bao của
nó
44
Các đặc điểm của cửa sổ
▪ Tên hay tiêu đề để nó được nhận dạng.

▪ Kích cỡ về chiều cao và chiều rộng (có thể biến đổi).
▪ Trạng thái, có thể truy cập hay hoạt động, hoặc
không truy cập được.
▪ Phần hiển thị - phần có thể nhìn thấy được.
▪ Vị trí liên quan tới đường biên hiển thị
45
Các đặc điểm của cửa sổ (tiếp)
▪ Sự sắp xếp của nó trong mối tương quan với các

cửa sổ khác. Nó có thể được xếp liền kề (tile), xếp
chồng (overlap), hoặc xếp tầng (cascade).
▪ Các khả năng điều khiển, những phương thức dùng
để thao tác cửa sổ trên màn hình.
▪ Phần đánh dấu là những phần được lựa chọn.
▪ Chức năng, nhiệm vụ hoặc ứng dụng nhất định được
dành riêng cho nó.
46
Sức hấp dẫn của cửa sổ
▪ Giá trị của việc tạo cửa sổ được thấy rõ nhất trong
ngữ cảnh của một tác vụ, một công việc.
▪ Nó cho phép hiển thị không gian gần gũi.
▪ Các cửa sổ hoạt động như là những bộ nhớ ngoài →
sự mở rộng bộ nhớ trong của con người.
▪ Việc chuyển đổi giữa các tác vụ một cách dễ dàng
và giữ nguyên ngữ cảnh.
▪ Các cửa sổ sẽ cung cấp truy cập thông tin nhiều hơn
so với mức thông thường nếu hiển thị cửa sổ có
cùng kích thước một cách đơn lẻ
47
Sức hấp dẫn của cửa sổ (tiếp…)
Cửa sổ được xem là hữu dụng vì:

1. Biểu diễn các cấp độ thông tin khác nhau;
2. Biểu diễn nhiều dạng thông tin;
3. Biểu diễn liên tiếp các cấp độ hoặc các dạng thông
tin;
4. Truy cập vào những nguồn thông tin khác nhau;
5. Kết hợp nhiều nguồn thông tin;
6. Thực hiện nhiều tác vụ cùng một lúc;
7. Nhắc nhở;
8. Giám sát, điều khiển;
9. Nhiều hiển thị của cùng một tác vụ;
48
Những điều kiện ràng buộc trong thiết kế cửa sổ
▪ Những cân nhắc mang tính lịch sử

▪ Tập trung quan tâm đến việc giải quyết các vấn đề về
phần cứng
▪ Nghiên cứu nhỏ về thiết kế và khả năng sử dụng của hệ
thống cửa sổ
▪ Một vài các nguyên tắc chỉ dẫn cụ thể về thiết kế cửa sổ
được đặt ra để hỗ trợ các nhà thiết kế → Không có tiêu
chuẩn
▪ Các giới hạn phần cứng
▪ Kích thước màn hình: tồn tại nhiều thiết bị hiển thị không
đủ rộng
▪ Tốc độ xử lý chậm, kích thước bộ nhớ nhỏ
▪ Độ phân giải màn hình và khả năng đồ họa thấp
49
Các giới hạn của con người

Với hệ thống cửa sổ phức tạp, con người phải học và
sử dụng nhiều thao tác hơn để làm chủ các cửa sổ
Có trường hợp thời gian giải quyết tác vụ ngắn hơn
thời gian giải quyết tác vụ trên các cửa sổ. Có thể bởi
nhược điểm yêu cầu thao tác cửa sổ quá nhiều
→ Để thực sự hiểu quả, người dùng mong muốn thao
tác cửa sổ xảy ra hoàn toàn như là kết quả của các
hành động thực hiện tác vụ, chứ không như là kết quả
của các hoạt động quản lý cửa sổ bởi người sử dụng
50
▪ Các hạn chế khác

▪ Đường biên của cửa sổ tiêu tốn không gian giá trị
của màn hình
▪ Các cửa sổ nhỏ cúng cấp số lượng thông tin thì
sẽ gây khó chịu cho người dung khi phải kéo
thanh cuộn quá nhiều.
▪ Cân bằng lợi ích?
Chúng ta cần dối mặt với những hạn chế của cửa sổ và
tận dụng lợi ích của chúng đưa tới cho người sử dụng
51
Các thành phần của cửa sổ (tiếp…)
1) Khung (Frame)
2) Thanh tiêu đề (Title Bar)
3) Biểu tượng thanh tiêu đề (Title Bar Icon)
4) Các nút chỉnh kích thước cửa sổ
5) Nút What’s This?
6) Thanh menu (Menu Bar)
7) Thanh trạng thái (Status Bar)
8) Thanh cuộn (Scroll Bar)
9) Hộp chia tách (Split Box)
10) Thanh công cụ (Toolbar)
11) Vùng lệnh (Command Area)
12) Kẹp kích thước (Size Grip)
13) Vùng làm việc (Work Area)
52
Các thành phần của cửa sổ (tiếp…)
53
Các kiểu cách trình bày cửa sổ
Các cửa sổ xếp kề nhau (Tiled windows)
Các cửa sổ xếp tầng Các cửa sổ xếp chồng

(Cascading windows) (Overlapping windows)
54
Các loại cửa sổ
▪ Cửa sổ gốc
▪ Cửa sổ thứ cấp
▪ Modal and Modeless
▪ Xếp tầng và trải rộng ra
▪ Các bảng thuộc tính và kiểm soát thuộc tính
▪ Các hộp thông báo (Message Box)
▪ Các cửa sổ bảng màu
▪ Các cửa sổ Pop-Up
55
Cửa sổ gốc
Cửa sổ gốc (cửa sổ ứng dụng)
56
Các loại cửa sổ thứ cấp
57
Trải rộng
Xếp tầng
58
59
Web và trình duyệt
▪ Trình duyệt là giao diện người sử dụng cho World

Wide Web.
▪ Về cấu trúc nó tương tự với một cửa sổ tiêu chuẩn ở
rất nhiều khía cạnh, nhưng cũng có nhiều khác biệt.
▪ Một số trình duyệt web phổ biến: Google Chrome,
Mozilla Firefox, Microsoft Edge, Internet Explorer,
Netscape, Lynx, Opera, Safari, …
60
Web và trình duyệt
61
Các thành phần của trình duyệt
Internet Explorer:
Các hành động của thanh công cụ chuẩn bao gồm như sau:
▪ Back – Hiển thị trang vừa được xem phía trước.
▪ Forward – Hiển thị trang tiếp theo trong chuỗi theo dõi
nếu trang đó đã được xem rồi.
▪ Stop – Dừng trang đang được tải về.
▪ Refresh – Làm mới và tái hiển thị trang đang được xem.
▪ Home – Tái hiển thị trang chủ của Website.
▪ Search – Hiển thị một trường Tìm kiếm.
▪ Favourites – Hiển thị danh sách các URL được ưa dùng
đã
▪ được lưu lại.
▪ History – Hiển thị lịch sử các trang đã được xem.
62
Các cửa sổ pop- up
Popup window trên webpage - cửa sổ mà người sử dụng không

mong đợi
63
Tổng kết bài
Nắm được kiến thức:
✓ Phát triển hệ thống menu
✓ Điều hướng website
✓ Lựa chọn loại cửa sổ thích hợp
64
LỰA CHỌN CÁC THIẾT BỊ PHÙ HỢP
(BƯỚC 6)

1
Nội dung
➢ Thiết bị đầu vào
➢ Thiết bị đầu ra
2
Thiết bị tương tác
Thiết bị tương tác là:

▪ Các cơ cấu hoặc thiết bị đầu vào (input) mà
thông qua đó con người sẽ truyền tải những
nhu cầu và mong muốn của họ tới máy tính;
▪ Các cơ cấu hoặc thiết bị đầu ra (output) mà
thông qua đó máy tính trả lời con người.
3
Lựa chọn thiết bị tương tác
▪ Lựa chọn thiết bị phù hợp để thực hiện công việc cần
thiết là nhân tố mấu chốt cho thành công của hệ
thống.
▪ Sự phối ghép tốt giữa người sử dụng và thiết bị điều
khiển sẽ dẫn tới việc thực hiện thao tác nhanh, chính
xác.
▪ Sự phối ghép không tốt sẽ dẫn đến hiệu năng thấp,
tạo ra nhiều lỗi hơn và làm gia tăng sự mệt mỏi của
4
Thiết bị đầu vào
▪ Bàn phím (keyboard)

▪ Thiết bị chuột (mouse)
▪ Thiết bị bi xoay (trackball)
▪ Thiết bị cần điều khiển (joystick)
▪ Bảng đồ họa (graphic tablet) và ô cảm ứng (trackpad)
▪ Bút quang (light pen)
▪ Màn hình cảm ứng (touch screen)
▪ Giọng nói (voice), …
▪ v..v…
5
Thiết bị đầu vào
Hình ảnh các thiết bị đầu vào
6
Các đặc tính của thiết bị đầu vào
Một số tác vụ tiêu biểu được thực thi bằng việc sử dụng
các thiết bị đầu vào là:
▪ Để chỉ vào một đối tượng trên màn hình.
▪ Để chọn đối tượng/xác định nó như là trọng tâm chú ý.
▪ Để kéo một đối tượng qua màn hình.
▪ Để vẽ một hình dạng tự do nào đó trên màn hình.
▪ Để theo dõi/theo dấu một đối tượng đang di chuyển.
▪ Để định hướng/định vị một đối tượng.
▪ Để nhập/thao tác dữ liệu hay thông tin.
7
Các thiết bị khác nhau ở cách chúng có thể thực thi những
thao tác ở mức độ nào. Có 2 nhân tố rất quan trọng:
➢ Thứ nhất, cơ cấu này là thiết bị trỏ trực tiếp hay gián tiếp?
Thiết bị trực tiếp được thực hiện trên chính màn hình (bút
cảm ứng, ngón tay và giọng nói). Thiết bị gián tiếp được
thực hiện ở vị trí khác màn hình, thông thường nhất là
trên bàn (thiết bị chuột, bi xoay và bàn phím).
➢ Thứ hai, mối tương quan giữa sự chuyển động của thiết
bị điều chỉnh bằng tay với sự chuyển động tương ứng của
con trỏ trên màn hình về hướng, khoảng cách và tốc độ.
Chuyển động của con trỏ có theo được chuyển động điều
khiển một cách chính xác không?
8
Bàn phím
Bàn phím là một thiết bị đầu vào chuyên biệt, gõ

chữ tiêu chuẩn và các phím di chuyển cursor
9
Bàn phím (tiếp)

Ưu điểm:
- Quen thuộc, chính xác, không chiêm nhiều không gian trên bàn,
hữu dụng và thuận lợi
Nhược điểm:
- Chậm đối với người đánh máy không gõ phím
- Chậm hơn so với các thiết bị khác để trỏ đối tượng hoặc thông
tin trên màn hình
- Yêu cầu các hành động rời rạc để thao tác
- Không có mối tương quan trực tiếp giữa chuyển động của bàn
tay, ngón tay với chuyển động của con trỏ trên màn hình
Nguyên tắc chỉ dẫn bàn phím
- Cung cấp các phím tang tốc trên bàn phím
- Cung cấp các phím tương đương
- Cung cấp điều hướng cửa sổ bằng cách sử dụng các phím trên
bàn phím 10
Thiết bị chuột
Mô tả:
- Điều khiển để bàn, có thể di chuyển, có chứa từ một đến ba nút dùng
để thao tác với các đối tượng và thông tin trên màn hình.
- Chuyển động của con trỏ màn hình bắt chước chuyển động của
chuột.
Ưu điểm:
- Mối quan hệ trực tiếp giữa chuyển động của tay và con trỏ về hướng,
khoảng cách và tốc độ.
- Cơ chế lựa chọn được bao gồm trên chuột.
- Không che khuất tầm nhìn của màn hình.
Nhược điểm: Bản nguyên mẫu
đầu tiên của
- Chuyển động là gián tiếp, trong một mặt phẳng khác chuột máy tính
với màn hình.
- Yêu cầu phải lấy tay khỏi bàn phím.
- Yêu cầu thêm không gian bàn, yêu cầu quãng đường di chuyển dài
- Yêu cầu mức độ phối hợp giữa mắt và tay. 11
Các nguyên tắc chỉ dẫn chuột:

▪ Cung cấp "vùng nóng" xung quanh các đối tượng
nhỏ hoặc mỏng, có thể yêu cầu định vị chuột cực
chính xác.
▪ Không bao giờ sử dụng double-clicks or double-
drags như là phương tiện duy nhất để thực hiện các
hoạt động cơ bản.
▪ Không sử dụng kết hợp chuột và tổ hợp phím.
▪ Không yêu cầu người sử dụng phải trỏ vào mục tiêu
đang di chuyển.
12
Thiết bị xoay
Mô tả:
▪ Một vật hình cầu (hòn bi) lăn tự do theo mọi hướng trong hốc của
nó
▪ Hướng và tốc độ được điều khiển và chuyển đồi thành chuyển
động của con trỏ nháy
Ưu điểm:
▪ Mối quan hệ trực tiếp giữa chuyển động của bàn tay và con trỏ
trong về hướng và tốc độ.
▪ Không che khuất tầm nhìn
▪ Không yêu cầu thêm không gian trên bàn
13
Thiết bị xoay (tiếp…)

Nhược điểm:
▪ Chuyển động gián tiếp, theo mặt phẳng khác với màn hình
▪ Không có mỗi tương quan trực tiếp giữa chuyển động của tay
và con trỏ theo khoảng cách
▪ Yêu cầu một mức độ phối hợp mắt – tay nhất định
▪ Yêu cầu rời tay khỏi các phím của bàn phím.
▪ Yêu cầu các chuyển động khác của tay
▪ Yêu cầu tay phải rời khỏi bảng phím (nếu không được gắn trên
bàn phím).
▪ Yêu cầu thêm không gian bàn (nếu không được gắn trên bàn
phím)
▪ Có thể khó kiểm soát.
▪ Có thể mệt mỏi khi sử dụng trong thời gian dài.
14
Thiết bị cần điều khiển

Mô tả:
▪ Một thiết bị hình gậy hoặc dạng cần được gắn ở đáy.
▪ Kích thước khác nhau, kích thước nhỏ hơn được vận hành bằng
ngón tay, lớn hơn yêu cầu cả bàn tay .
▪ Hướng và độ áp lực lên được chuyển thành hướng và tốc độ
chuyển động của con trỏ
▪ Thay đổi mức độ chuyển động cho phép, chỉ theo phương
ngang-dọc đến liên tục.
Ưu điểm:
▪ Mối quan hệ trực tiếp giữa chuyển động của bàn tay và con trỏ
về phương.
▪ Không che khuất tầm nhìn của màn hình.
▪ Không yêu cầu thêm không gian bàn (nếu gắn trên bàn phím).
15
Thiết bị cần điều khiển (tiếp…)

Nhược điểm:
- Chuyển động gián tiếp, trong mặt phẳng khác với màn hình
- Mối tương quan gián tiếp giữa tay và con trỏ theo tốc độ và khoảng
cách
- Yêu cầu mức độ phối hợp giữa mắt và tay
- Yêu cầu tay rời khỏi các phím và bàn phím, cần những chuyển
động tay khác nhau để sử dụng
- Yêu cầu thêm không gian trên bàn (nếu không được lắp gắn trên
phím)
- Có thể gây mệt mỏi trong thời gian dài
- Có thể chậm và thiếu chính xác
16
Bảng đồ họa hoặc ô cảm ứng

Mô tả:
- Các bề mặt nằm ngang nhạy cảm với lực ấn, nhiệt độ, ánh sang
- Có thể điều khiển bằng ngón tay, bút quang hoặc các vật như bút trỏ,
bút chì
- Con trỏ mô phỏng theo các chuyển động trên tablet
Ưu điểm:
- Mối tương quan trực tiếp (chuyển động tiếp xúc với chuyển động của
con trỏ)
- Mặt phẳng nằm ngang
- Không che khuất tầm nhìn của màn hình
Nhược điểm:
- Chuyển động gián tiếp
- Yêu cầu tay rời khỏi các phím và bàn phím, cần những chuyển động
tay khác nhau để sử dụng
- Yêu cầu thêm không gian trên bàn
- Ngón tay lớn có thể ảnh hưởng tới độ chính xác với các đối tượng nhỏ 17
Màn hình cảm ứng

Mô tả: Màn hình cảm ứng là một thiết bị sử dụng trong máy vi
tính hoặc các thiết bị cầm tay thông minh. Một bề mặt đặc biệt trên màn hình
nhạy cảm với tiếp xúc ngón tay và bút trỏ
Ưu điểm:
- Có tương quan trực tiếp giữa ngón tay, vị trí con trỏ theo hướng, khoảng
cách và tốc độ
- Chuyển động trực tiếp, trên cùng mặt phẳng với màn hình
- Không yêu cầu không gian trên bàn
- Chịu đựng tốt trong môi trường sử dụng nhiều
Nhược điểm:
- Ngón tay có thể che khuất 1 phần màn hình
- Ngón tay thể quá lớn để thao tác chính xác các đối tượng
- Yêu cầu tay di chuyển xa bàn phím
- Rất mệt mỏi trong thời gian dài phải sử dụng
- Có thêt làm bẩn hoặc hư màn hình
18
Bút quang
Bề mặt đặc biệt trên màn hình nhạy cảm với sự tiếp xúc của bút trỏ
hoặc bút cảm ứng đặc biệt.
Ưu điểm:
- Có tương quan trực tiếp giữa ngón tay, vị trí con trỏ theo
hướng, khoảng cách và tốc độ
- Chuyển động trực tiếp, trên cùng mặt phẳng với màn hình
- Không yêu cầu không gian trên bàn
- Chịu đựng tốt trong môi trường sử dụng nhiều
Nhược điểm:
- Bàn tay có thể che khuất một phần màn hình
- Yêu cầu phải nhấc tay lên để sử dụng và tay phỉa rời khởi bàn
phím.
- Rất mệt mỏi trong thời gian dài phải sử dụng
19
Âm thanh
Mô tả:
Sự nhận dạng tiếng nói tự động thông qua các thiết bị như máy tính,
điện thoại,…
Ưu điểm:
▪ Đơn gian và trực tiếp
▪ Tiện dụng cho những người không có khả năng sử dụng bàn phím
▪ Tiện dụng khi tay người sử dụng đang bận rộn
Nhược điểm:
▪ Tỷ lệ lỗi cao vì những khó khăn: nhận dạng từ được nói, ranh giới
từ bị nhòa đi
▪ Lưu lượng thông tin đưa vào chậm hơn so với việc nhập bằng gõ
phím
▪ Khó sử dụng trong môi trường ồn ào
▪ Không thực dụng trong môi trường yên tĩnh
20
Những thiết bị đầu vào khác

Như với nhiều tiến bộ của công nghệ, các loại thiết bị đầu vào khác
có nhiều hình thức phát triển khác nhau.
▪ Bộ nhận dạng cử chỉ (gesture) liên quan đến việc hiểu các cử
chỉ mà con người sử dụng trong giao tiếp hàng ngày.
▪ Thiết bị theo dõi mắt (eye tracking) có thể được sử dụng để
điều khiển một tương tác. Cursor được di chuyển tới nơi người
sử dụng đang nhìn. Một hành động được thực hiện bằng việc
nhìn vào nút thích hợp.
▪ Thiết bị nhận dạng vân tay (fingerprint) có thể được sử dụng để
xác minh xem bạn có đúng là người mà bạn tự nhận hay không.
▪ Chữ viết tay (handwriting) được nhận diện chính xác và có thể
được sử dụng để nhập dữ liệu hoặc thông tin.
21
Lựa chọn thiết bị đầu vào phù hợp
▪ Rất nhiều nghiên cứu đã được thực hiện để so sánh

các thiết bị đầu vào khác nhau dành cho tất cả các
tác vụ văn phòng. Những phát hiện nổi bật gồm có:
▪ 1- Bàn phím so với chuột.
▪ 2- Nghiên cứu điều khiển.
▪ Từ đó tác giả đưa ra:
▪ 1- Các nguyên tắc chỉ dẫn cho việc chọn thiết bị
đầu vào phù hợp.
▪ 2- Các nguyên tắc chỉ dẫn con trỏ
22
Bàn phím so với chuột
Tại sao rất nhiều người đánh máy thành thạo thích dùng bàn phím hơn chuột?
Tốc độ là một lý do
Bàn phím Chuột

Các phím trên bàn phím luôn luôn ở Chuột chậm hơn và nó có khuynh
một điểm cố định, người có kinh hướng di chuyển quanh bàn. Vị trí
nghiệm sẽ nhớ được vị trí của các của nó không thể ghi nhớ được.
phím trên bàn phím.
Tốc độ gõ phím trở nên đặc biệt Sử dụng chuột, thời gian để người
nhanh và được nắm bắt tốt.Một sử dụng di chuyển tay từ bàn phím,
người đánh máy cực kỳ thành thạo cầm lấy con chuột và di chuyển con
có thể gõ được từ 13 đến 15 ký tự trỏ tới đối tượng trên màn hình kéo
trong thời gian 1.5 đến 3 giây đó và dài từ 1.5 tới 3 giây
một người đánh máy thông thường
có thể gõ từ 4 đến 6 ký tự.
23
Nghiên cứu điều khiển
▪ Những công cụ di chuyển trỏ nhanh nhất để trỏ vào các

mục tiêu cố định trên màn hình là những thiết bị cho phép
trỏ trực tiếp: màn hình cảm ứng và bút quang.
▪ Theo tốc độ và độ chính xác của việc trỏ dùng cho

những mục tiêu cố định, những thiết bị trỏ gián tiếp –
chuột, bi xoay và bảng đồ họa – sẽ không khác
biệt nhiều so với nhau. Cần điều khiển (cần chỉnh)
là chậm nhất, mặc dù nó cũng chính xác như những
thiết bị khác (lựa chon theo sự phù hợp của nó với tác vụ
và môi trường làm việc của người sử dụng).
24
Nghiên cứu điều khiển
▪ Một hành động khẳng định riêng biệt (mà phải tuân theo
việc chỉ hướng của con trỏ) sẽ làm tăng độ chính xác
của việc chỉ hướng nhưng lại làm giảm tốc độ. Chuột
sẽ cung cấp một hình dáng thiết kế rất hiệu quả cho các
tác vụ yêu cầu sự khẳng định này.
▪ Đối với những mục tiêu hiệu chỉnh nhỏ, di chuyển chậm,
chuột, bi xoay và bảng đồ họa sẽ được ưa dùng hơn
so với màn hình cảm ứng và bút quang vì hai thiết bị
màn hình cảm ứng và bút quang có thể che khuất tầm
nhìn mục tiêu của người sử dụng.
25
Xem xét đến đặc tính của các tác vụ
Cung cấp các bàn phím dùng cho những tác vụ có liên
quan đến:
▪ Nhập và thao tác văn bản rất nhiều;
▪ Di chuyển qua các chuỗi có cấu trúc bao gồm vài
đối tượng riêng biệt
26
Cung cấp một thiết bị trỏ thay thế dùng cho những
tác vụ vẽ hoặc đồ họa.
▪ Thiết bị chuột – trỏ, chọn, vẽ và kéo rê.
▪ Cần điều khiển – chọn và hiệu chỉnh.
▪ Bi xoay – trỏ, chọn và hiệu chỉnh.
▪ Màn hình cảm ứng – trỏ và chọn.
▪ Bảng vẽ đồ họa - trỏ, chọn, vẽ và kéo rê
27
Cung cấp màn hình cảm ứng dưới những điều kiện sau:
▪ Cơ hội cho việc đào tạo là rất ít.
▪ Các mục tiêu rất lớn, riêng biệt và được mở rộng.
▪ Tần suất sử dụng thấp.
▪ Thiếu không gian trên bàn.
▪ Không có hoặc ít yêu cầu nhập văn bản .
28
Xem xét đến các đặc tính môi trường
▪ Thiết bị có dễ dàng phù hợp với môi trường làm việc ko?
▪ Nếu cần phải có không gian trên bàn, liệu không gian đó
có không và nó có đủ rộng không?
▪ Một vài thiết bị đòi hỏi rất ít không gian (bi xoay, cần điều
khiển và bảng đồ họa).
▪ Một thiết bị chuột yêu cầu không gian nhiều hơn đáng kể.
▪ Những hệ thống truy cập công cộng sẽ yêu cầu một thiết
bị chắc chắn, chẳng hạn như màn hình cảm ứng.
▪ Một chiếc bút hoặc bút trỏ rất dễ bị hỏng hoặc bị đánh
cắp.
▪ Các màn hình cảm ứng làm việc tốt trong môi trường sử
dụng bụi bặm
29
Xem xét các yếu tố khác
Linh hoạt: Cung cấp hơn một loại thiết bị sẽ tạo cho người
sử dụng các lựa chọn để làm thế nào đạt được bất cứ tác vụ
cần được thực thi một cách hiệu quả nhất. Một bàn phím đi
kèm với một loại thiết bị trỏ khác hầu như luôn luôn cần thiết.
Tối thiểu hoá chuyển động của mắt và tay: Khi nhiều loại
thiết bị được sử dụng, chuyển động mắt và tay giữa chúng
cần được giảm thiểu. Nếu có thể, hãy cấu trúc tác vụ để cho
phép người sử dụng ở nguyên trong một vùng hoạt động.
Nếu cần có sự chuyển đổi thì tần suất chuyển đổi được giảm
một cách tối đa.
Quy tắc chung là hơn 80% thời gian của các tác vụ nên có
thể thực hiện chỉ bằng một thiết bị
30
Các nguyên tắc chỉ dẫn con trỏ
▪ Mục tiêu chú ý của người sử dụng thường là con trỏ. Vì

thế, hình ảnh con trỏ nên được sử dụng để cung cấp phản
hồi liên quan đến chức năng đang được thực thi, phương
thức hoạt động và trạng thái của hệ thống.
▪ Một con trỏ nên tương phản phù hợp với nền (background)
của nó và luôn luôn có thể được nhìn thấy vào mọi lúc.
Người sử dụng luôn luôn có thể điều khiển được vị trí con
trỏ trên màn hình.
▪ Hình dạng của con trỏ nên chỉ ra mục đích và ý nghĩa của
nó một cách rõ ràng. Luôn luôn sử dụng những hình dạng
có sẵn do các hệ thống đồ họa cung cấp.
▪ Con trỏ hình động không nên làm phân tâm người xem và
ngăn cản khả năng tương tác của người đó với hệ thống
31
Thiết bị đầu ra
Máy tính giao tiếp với người sử dụng thông qua

các thiết bị đầu ra.
▪ Màn hình hiển thị;
▪ Loa.
32
Hình ảnh của thiết bị đầu ra
33
Màn hình
▪ Máy tính giao tiếp với người sử dụng thông qua các thiết
bịđầu ra. Loại thông dụng nhất là màn hình hiển thị.
▪ Màn hình rất hữu dụng để hiển thị một phạm vi rộng những
thành phần trực quan và dữ liệu phức tạp. Chúng đã là bộ
phận đáng tin cậy của hệ thống máy tính trong nhiều thập kỷ.
▪ Các loại màn hình:
1- Màn hình ống cathode (CRT)
2- Màn hình tinh thể lỏng (Liquid Crystal Display - LCD)
3- Màn hình cảm ứng
4- Màn hình sử dụng công nghệ OLED
34
Những đề xuất nên được cân nhắc
trong việc chọn một màn hình
▪ Hình ảnh: Hình ảnh cần phải được chi tiết đến mức độ
nào? Với những ứng dụng đồ họa cao có sử dụng các
bức tranh và ảnh chụp → cần màn hình độ phân giải cao;
Công việc về văn bản và những kích thước ký tự lớn hơn
→ màn hình độ phân giải thấp hơn là đủ...
▪ Màu sắc: Có bao nhiêu màu sắc cần thiết? Nhu cầu này
phụ thuộc vào ứng dụng.
▪ Không gian sử dụng: Màn hình CRT cần chỗ đặt màn
hình lớn hơn rất nhiều. Màn hình LCD chiếm ít diện tích
hơn. Những chiếc bàn chật chội và môi trường đông đúc
sẽ nhận thấy lợi ích của màn hình LCD. Những đề xuất
nên được cân nhắc trong việc chọn
35
Những đề xuất nên được cân nhắc
trong việc chọn một màn hình
▪ Kích thước: Giống như các máy thu hình, kích thước màn
hình được đo theo đường chéo. Các kích thước màn hình
thường thấy là 17, 19 và 21”.
▪ Màn hình càng lớn thì ưu điểm càng nhiều. Hiển thị
được nhiều thông tin hơn, có thể hiển thị văn bản và
hình ảnh cỡ lớn hơn.
▪ Kích thước sẽ dựa vào những nhu cầu của ứng dụng
và nhu cầu của người sử dụng. Một người thị lực kém
có thể muốn những hình ảnh và con chữ lớn hơn.
▪ Các thiết bị cầm tay sẽ yêu cầu những màn hình nhỏ
hơn nhiều.
▪ Tính lưu động: Liệu màn hình có cần lưu động không?
Màn hình CRT nặng và không di chuyển được. Màn hình
LCD nhẹ và rất lưu động.
36
Loa
❖ Âm thanh của máy tính đã nâng cấp từ tiếng bíp

đơn giản đến sự tái tạo lại giọng nói, âm nhạc và
những hiệu ứng âm thanh.
❖ Chất lượng của loa có thể phản ánh chất lượng của
âm thanh được trình bày
37
Tổng kết bài
Nắm được kiến thức:
▪ Thiết bị đầu vào
✓ Các đặc tính của thiết bị đầu vào
✓ Lựa chọn thiết bị đầu vào phù hợp
▪ Thiết bị đầu ra
38
XÂY DỰNG PROTOTYPE

1
Nội dung
▪ Khái quát về prototype

▪ Kỹ thuật xây dựng prototype giấy
▪ Kỹ thuật xây dựng prototype máy tính
▪ Tổng kết bài
2
Khái quát về prototype
▪ Prototype (nguyên mẫu) được sử dụng trong nhiều

lĩnh vực thiết kế khác nhau và chúng có độ trung
thực khác nhau.
▪ Prototype là một mô hình thu nhỏ. Nó là bản thảo
hay mô phỏng với khả năng dễ thay đổi của một
phần UI.
3
Tại sao xây dựng prototype?
▪ Giảm chi phí

▪ Prototype được xây dựng nhanh hơn nhiều so với cài đặt thiết
kế cuối cùng, ta có thể đánh giá và nhận được phản hồi sớm về
những điểm tốt và xấu của thiết kế.
▪ Nếu có vấn đề thiết kế nào mà khó quyết định, thì có thể xây
dựng nhiều prototype chứa các giải pháp khác nhau để xem
xét, so sánh và đánh giá.
▪ Nếu vấn đề trong thiết kế được phát hiện thì có thể
• Dễ dàng thay đổi prototype thiết kế nếu cần.
• Không cần debugging.
• Dễ dàng quyết định vứt bỏ prototype nếu thiết kế có thiếu sót
nghiêm trọng (quyết định khó khăn với mã trình đã được
debug).
▪ Prototype hỗ trợ việc giao tiếp giữa các đội ngũ phát triển và
người sử dụng giao diện phần mềm.
4
Các loại prototype
▪ Dãy các phác họa màn hình.

▪ Storyboard (dãy các phác họa).
▪ Powerpoint slideshow.
▪ Video mô phỏng sử dụng hệ thống.
▪ Makét bằng bìa cứng.
▪ Đoạn chương trình với chức năng hạn chế được viết
bằng ngôn ngữ lập trình như C#, Java... Hay ngôn
ngữ mô tả của Director (Flash).
▪ Mô hình vật lý.
5
Xây dựng prototype giấy
▪ Xây dựng Prototype giấy là lựa chọn tuyệt vời cho

những vòng lặp thiết kế đầu tiên.
▪ Prototype giấy là mô hình vật lý của giao diện làm từ
giấy.
▪ Giao diện được phác họa bằng tay trên các mẩu giấy.
▪ Mẩu giấy biểu diễn các phần tử khác nhau như thực đơn,
hộp thoại hay cửa sổ.
▪ Tương tác
▪ Trỏ bằng ngón tay tương ứng với trỏ bằng chuột;
▪ Viết trên các mẩu giấy tương ứng với gõ bàn phím.
▪ Prototype giấy có độ trung thực thấp trong cả hai
khía cạnh là hình dáng và cảm giác.
▪ Có giá rẻ.
6
Tại sao sử dụng prototype giấy?
▪ Phác họa bằng tay trên giấy sẽ nhanh hơn việc viết
mã trình hay phác họa bằng máy tính.
▪ Giấy là dễ thay đổi
• Giữa các công đoạn kiểm thử của user hay cả trong khi user
kiểm thử
▪ Xây dựng nhanh:
• Người thiết kế không mất thời gian để tập trung vào các chi
tiết như font, màu, căn chỉnh, khoảng cách…
• Khách hàng đưa ra các gợi ý sáng tạo, không "xoi mói"
▪ Phác họa bằng tay làm tăng phản hồi nhận được từ
▪ Không đòi hỏi kỹ năng đặc biệt nào
• Không cần nhà thiết kế đồ họa, chuyên gia về tính sử dụng
được, thậm chí user cũng có thể tạo ra prototype 7
Ví dụ prototype giấy
8
9
10
11
Công cụ xây dựng prototype giấy
❖ Bảng áp phích trắng (11” x14”)

▪ Làm nền, khung cửa sổ
❖ Số lượng lớn các thẻ chỉ mục (4” x 6” , 5” x8”)
▪ Làm menus, window contents, và dialog boxes
❖ Hồ dán
▪ Để dán các mẩu giấy
❖ Băng giấy trắng
▪ Để làm text fields, checkboxes, short messages
❖ Giấy bóng kính
▪ Để highlighting. Mục đích khác là người sử dụng “typing” (viết lên
chúng)
❖ Máy sao chụp
▪ Để tạo ra nhiều phần tử trong bản mẫu.
❖ Bút, kéo và băng giấy
12
Ích lợi của prototype giấy
▪ Mô hình khái niệm:

▪ Người sử dụng có hiểu UI không?
▪ Chức năng:
▪ Nó có làm cái cần phải làm không? Thiếu đặc trưng
không?
▪ Dẫn đường và luồng nhiệm vụ:
▪ Người sử dụng có thể tìm ra cách sử dụng? Phù hợp
với thông tin tiền điều kiện?
▪ Thuật ngữ:
▪ Người sử dụng có hiểu các nhãn không?
▪ Nội dung màn hình:
▪ Những cái gì cần xuất hiện trên màn hình?
13
Hạn chế của prototype giấy
❖ Prototype giấy có độ trung thực thấp về trực giác (look)

▪ Đôi khi người sử dụng rất khó nhận ra các widgets mà họ vẽ
bằng tay hay các nhãn mà họ vừa mô tả một cách vội vàng.
❖ Có độ trung thực thấp về cảm giác (feel)
▪ Hành động di và nhả chuột.
▪ Các vấn đề liên quan đến luật Fitts như phím quá nhỏ, controls
quá gần nhau hay quá xa nhau đều không thể được nhận biết
trên prototype giấy.
❖ Có độ trung thực thấp về phản hồi
▪ Ví dụ không thể có thanh progress chuyển động.
❖ Có độ trung thực thấp về thời gian đáp ứng
▪ Không thể đo thời gian thực hiện nhiệm vụ
❖ Có độ trung thực thấp về ngữ cảnh sử dụng
▪ Không thể đem nó ra cửa hàng tạp hóa, tàu điện ngầm, …
14
Xây dựng prototype bằng máy tính
▪ Prototype máy tính là mô phỏng phần mềm tương tác

▪ Prototype máy tính điển hình là loại prototype theo chiều ngang
▪ Có độ trung thực cao về hình dáng và cảm giác,
▪ Có độ trung thực thấp theo chiều sâu.
▪ Hai kỹ thuật xây dựng prototype máy tính
▪ Storyboard
• Là trình tự của các màn hình cố định
▪ Form builder
• Là công cụ để vẽ các giao diện thực
15
Prototype bằng máy tính
▪ Có mọi thứ như prototype giấy và hơn nữa.

▪ Bố trí màn hình
▪ Rõ ràng, phức tạp hay làm rối bời hay không?
▪ Người sử dụng có thể tìm thấy các phần tử quan trọng?
▪ Màu, font, icon và các phần tử khác
▪ Lựa chọn phù hợp chưa?
▪ Phản hồi tương tác
▪ Có khả năng thông báo với người sử dụng bằng thông điệp,
thanh trạng thái, thay đổi hình dáng con chạy và cách phản
hồi khác.
▪ Luật Fitts
▪ Các điều khiển đủ lớn chưa? Có quá gần nhau không?
Danh sách trượt có quá dài?
16
Kỹ thuật xây dựng Storyboard
▪ Storyboard: Là trình tự của các màn hình cố định.

▪ Mỗi màn hình có một hoặc nhiều hotspots (hyperlink)
▪ StoryBoard được sử dụng cho các kịch bản, chuyển dần
đến chi tiết hơn.
▪ Là dãy các phác thảo/khung hình cơ bản.
▪ Lợi thế của storyboard
▪ Có thể vẽ bất kỳ cái gì trên storyboard.
▪ Nó cho phép tự do sáng tạo mà Form builder không thể có
(với widgets cố định).
▪ Bất lợi là từ bản chất tĩnh của storyboard
▪ Chỉ có thể nhấn phím chuột, không có thể nhập text.
▪ Text box, scrollbars, list boxes, và buttons chỉ là những bức
tranh, thụ động.
17
Công cụ xây dựng Storyboard
▪ PowerPoint
▪ Mỗi slide show là một màn hình cố định mà nó được vẽ bởi trình
vẽ hay vẽ trực tiếp bằng PowerPoint.
▪ PowerPoint storyboard có các hyperlink để nhảy đến slide bất kỳ
trong trình diễn.
▪ Macromedia Flash
▪ Là công cụ giúp xây dựng giao diện đa phương tiện.
▪ Đặc biệt hữu hiệu cho các giao diện prototype với giàu thông tin
phản hồi chuyển động.
▪ HTML
▪ Mỗi màn hình là một bản đồ ảnh (image map).
▪ Macromedia Dreamweaver hỗ trợ tốt cho việc xây dựng bản đồ
ảnh của HTML.
▪ Chúng đều có ngôn ngữ mô tả: Basic, Ligo và Javascript.
18
Xây dựng UI bằng Form Builder
▪ Form builder: Là công cụ để vẽ các giao diện thực

▪ Thực hiện bằng di các widgets (buttons, text fields, labels, …)
từ palette và đặt nó trên cửa sổ.
▪ Công cụ xây dựng Form
▪ HTML
• Là công cụ xây dựng ứng dụng Web.
• Có thể tổ hợp các trang HTML tĩnh để mô phỏng các đáp ứng
động của giao diện Web.
• Có thể gõ phím vào form, sử dụng thanh trượt…
▪ GUI Builder
• Visual Basic là Form Builder kinh điển.
• .NET Windows Forms,
• Java Form Builders: Eclipse Visual Editor, Borland JBuilder, Sun
NetBeans
• Mac Interface Builder.
19
GUI Design Studio
▪ Là công cụ hỗ trợ thiết kế giao diện đồ họa

▪ Không đòi hỏi viết mã trình
▪ Sử dụng GUI Design Studio để
▪ Thiết kế toàn bộ ứng dụng
▪ Làm tài liệu sản phẩm
▪ Đề xuất dự án
▪ Thu thập yêu cầu
▪ Tạo lập prototype màn hình
▪ Đặc tả chi tiết ứng dụng cho người phát triển,…
▪ Tạo lập trình diễn bằng GUI Design Studio để
▪ Kiểm chứng thiết kế
▪ Phát hiện các giải pháp có thể
▪ Đánh giá các kịch bản sử dụng khác nhau.
20
GUI Design Studio
21
Tổng kết bài
▪ Tầm quan trọng của việc xây dựng prototype

▪ Các loại prototype
▪ Kỹ thuật xây dựng prototype giấy
▪ Kỹ thuật xây dựng prototype máy tính
▪ Các công cụ xây dựng prototype giấy và máy tính
22
LỰA CHỌN CÁC ĐIỀU KHIỂN THÍCH
HỢPTRÊN MÀN HÌNH
(BƯỚC 7)

1
Nội dung
▪ Điều khiển có khả năng thi hành.

▪ Các điều khiển nhập văn bản/chỉ đọc.
▪ Các điều khiển lựa chọn.
▪ Các điều khiển kết hợp nhập/chọn.
▪ Các điều khiển thao tác khác.
▪ Các điều khiển trình diễn.
▪ Lựa chọn các điều khiển thích hợp.
2
Các điều khiển trên màn hình
▪ Điều khiển (control),đôi khi được gọi là widget, là

những thành phần cấu thành phần chính yếu của
màn hình.
▪ Chúng là các đối tượng đồ họa thể hiện những tính
chất/hoạt động của các đối tượng khác.
▪ Một điều khiển có thể:
▪ Cho phép nhập vào/lựa chọn một giá trị cụ thể;
▪ Cho phép thay đổi/chỉnh sửa một giá trị cụ thể;
▪ Hiển thị chỉ một phần văn bản, giá trị/đồ họa cụ thể;
▪ Làm cho một lệnh được thực thi;
▪ Có một cửa sổ pop-up theo ngữ cảnh
3
Các điều khiển trên màn hình
▪ Người thiết kế được giới thiệu để lựa chọn từ một

dãy các điều khiển có sẵn.
▪ Lựa chọn một điều khiển đúng cho người sử dụng và
tác vụ thường là khó khăn.
▪ Một sự cân đối hợp lý giữa người sử dụng và điều
khiển sẽ dẫn đến tác vụ được thực hiện nhanh và
chính xác.
▪ Ngược lại nếu sự cân đối không hợp lý sẽ dẫn đến
hiệu suất thấp hơn, nhiều lỗi hơn và cả sự thất vọng
từ phía người sử dụng
→ Lựa chọn thiết kế điều khiển đúng là rất quan trọng
để hệ thống thành công.
4
Các loại điều khiển (Controls)
Các controls (buttons) kích hoạt

hành động hay chỉ ra trạng thái.
▪ Radio buttons – Cho khả năng
lựa chọn loại trừ.
▪ Check boxes – Lựa chọn không
loại trừ.
▪ Palettes – Chỉ ra tập các mode
có thể và mode hiện hành (thông
thường là tập các biểu tượng)
5
▪ Hộp thoại là cửa sổ pop-up để người sử dụng thu

thập thông tin vào theo yêu cầu hoặc hệ thống thông
báo các sự kiện quan trọng.
▪ Slider là hộp thoại cho phép người sử dụng trượt

theo chiều này hay chiều ngược lại.ds
6
7
Liệt kê các loại điều khiển
1- Các điều khiển có khả năng thi hành:

▪ Nút lệnh;
▪ Thanh công cụ.
2- Các điều khiển nhập văn bản/chỉ đọc:
▪ Text box
3- Các điều khiển lựa chọn
▪ Radio button;
▪ Check box;
▪ Các bảng màu;
▪ List box;
▪ Các hộp danh sách dạng Drop-down/Pop-up
8
Liệt kê các loại điều khiển (tiếp…)
4- Các điều khiển kết hợp nhập/chọn:

▪ Các hộp tăng giảm;
▪ Các hộp kết hợp (combo box);
▪ Các hộp kết hợp dạng drop-down/pop-up.
5- Các điều khiển thao tác khác:
▪ Thanh trượt (slider);
▪ Các thẻ (tabs);
▪ Điều khiển dạng chọn ngày tháng (date-piker);
▪ Biểu đồ dạng cây (Tree View);
▪ Thanh cuộn (scroll bar).
9
Liệt kê các loại điều khiển (tiếp…)
6- Các điều khiển tùy biến

7- Các điều khiển trình diễn
▪ Các trường text tĩnh;
▪ Các hộp nhóm;
▪ Các tiêu đề cột;
▪ Các chú giải công cụ (tooltips);
▪ Các chú giải ghi lời (balloon tips);
▪ Các thanh chỉ báo tiến trình;
▪ Hộp mẫu;
▪ Các dấu hiệu cuộn (scrolling ticker)…
10
Các điều khiển có khả năng thi hành
Các nút lệnh
Các nút công cụ không có tên nhãn
Thanh công cụ với các nút lệnh có tên nhãn
Một nút ký hiệu Một nhóm nút ký hiệu
11
1. Các điều khiển có khả năng thi hành
(tiếp…)
1. Cách sử dụng 10.Các mặc định

2. Cấu trúc 11.Các lựa chọn không sẵn sàng
3. Tên nhãn 12.Các phím tương đương và
phím chọn nhanh
4. Kích cỡ
13.Cuộn lên xuống
5. Số lượng (chỉ áp dụng cho
nút lệnh trong hộp hội thoại) 14.Kích hoạt nút
6. Vị trí và bố trí sắp đặt 15.Sự tùy biến (áp dụng cho
thanh công cụ)
7. Tổ chức
8. Các chỉ báo chú ý
9. Các nút lệnh mở rộng
12
Nút lệnh
Cách sử dụng:
▪ Để cung cấp truy cập nhanh tới các lệnh nằm trên thanh menu
▪ Để cung cấp truy cấp tới các lệnh của cửa sổ
Cấu trúc:
▪ Hình dạng của nút có thể thay đổi, thông thường là để hình chữ
nhật với tên nhãn ghi trên đó; Nút nên thể hiện lồi lên
▪ Duy trì tính nhất quán xuyên suốt ứng dụng
Tên nhãn:
Các tên nhãn của nút lệnh nên được ghi thật đơn giản, cùng với
những mô tả cụ thể, các hành động chúng sẽ thực hiện.
Kích cỡ:
Cung cấp nút lệnh có kích thước phù hợp, duy trì nhất quán về
chiều rộng và chiều cao.
Số lượng (chỉ áp dụng cho nút lệnh trong hộp hội thoại/cửa sổ):
hạn chế ở 6 nút hoặc ít hơn
13
Nút lệnh
Vị trí và bố trí sắp đặt

▪ Nếu một nút có một mối quan hệ ngẫu nhiên với một/một
nhóm các điều khiển→ Đặt các nút ở bên dưới hoặc bên
phải các điều khiển liên quan
▪ Nếu có hạn chế về không gian,

các nút có tính năng thoát khỏi,
mở rộng/gọi ra phải đặt cùng
nhau
▪ Nếu đặt bên dưới hãy đặt nút
thoát ra ở bên phải
▪ Nếu ở bên phải hãy đặt nút
thoát ra ở dưới
14
Nút lệnh
Vị trí và bố trí sắp đặt (tiếp)

▪ Cung cấp khoảng trắng
▪ Cung cấp khoảng trắng bằng nhau, nhất quán giữa
các nút nút lệnh và các nhóm nút lệnh kề sát nhau
▪ Đối với trang web dài hơn một trang màn hình: Lặp
lại các nút ở đỉnh và dưới đáy trang.
15
Nút lệnh
Tổ chức:
▪ Các nút lệnh nên đặt theo trình tự sắp xếp hợp lý (theo
tần suất sử dụng, theo trình tự sử dụng, theo tầm quan
trọng,…)
▪ Theo hàng ngang: Sắp theo trật tự từ trái qua phải
▪ Theo cột dọc: Sắp xếp theo trật tự từ trên xuống dưới
▪ Các nút có liên quan nhóm lại với nhau
▪ Tách các nút có tính năng hủy bỏ ra khỏi lựa chọn thường
xuyên
▪ Các nút lệnh sử dụng cho nhiều cửa sổ nên đặt ở vị trí
nhất quán
▪ Với những hành động loại trừ lẫn nhau nên sử dụng 2 nút
lênh cùng tên nhãn mô tả rõ hai hành động
16
Nút lệnh
Các chỉ báo chú ý

▪ Nút lệnh thực hiện hành động ngay lập tức,
không cần chỉ báo chú ý
▪ Nút lệnh dẫn đến hộp thoại xếp tầng, đặt chỉ
báo (…) sau nhãn
▪ Nút lệnh dẫn đến menu, đặt dấu trỏ hình (>)
theo hướng menu xuất hiện.
▪ Nút lệnh dẫn đến một hộp thoại mở rộng, đặt
dấu mũi tên (>>) cùng với tên nhãn.
▪ Nút lệnh có mỗi quan hệ ngẫu nhiên với các
điều khiển khác mà cần chỉ ra, đặt chỉ báo là
mũi tên đơn (->)
17
Nút lệnh
Các nút lệnh mở rộng

▪ Tô xám hoặc làm mờ nút lệnh sau khi mở rộng
▪ Cung cấp nút thi gọn nếu cần
Các mặc định
▪ Mục đích: Khi một cửa sổ màn hình
hiển thị lần đầu tiên, cung cấp một
hành động mặc định (nếu cần thiết)
▪ Lựa chọn: Mặc định nên là hành động có khả năng xảy ra
nhất.
▪ Thể hiện: Chỉ ra mặc định bằng cách hiển thị nút với
đường viền đậm hoặc kép
▪ Thủ tục: Mặc định có thể thay đổi bởi người sử dụng tướng
tác với màn hình/định hướng tới một nút lệnh. Nên sử
dụng phím enter để kích hoạt nút mặc định khi nó không
dùng cho điều khiển khác 18
Nút lệnh
Các lựa chọn không sẵn sàng: Các lựa chọn tạm thời
chưa sẵn sàng nên làm mờ đi hoặc được tô xám
Các phím tương đương và các phím chọn nhanh:

▪ Ấn định một phím tương đương chó mỗi nút
▪ Nên lấy ký tự đầu tiên của tên nhãn nút (nếu bị
trùng thì lấy phụ âm tiếp theo)
▪ Gạch châm ký tự đó
▪ Duy trì nhất quán trên các cửa sổ màn hình
▪ Ấn định 1 phím chọn nhanh cho mỗi nút lệnh
19
Nút lệnh
Cuộn lên xuống
▪ Nếu cửa sổ màn hình có thể cuộn lên xuống, không được
cuộn các nút lệnh
▪ Sử dụng các nút lệnh di chuyển trước các trang, không
sử dụng các thanh cuộn
Kích hoạt nút
Trỏ chuột:
▪ Làm nổi bật nút theo một cách phân biệt trực quan khi
con trỏ đang ở trên nút và sẵn sàng cho người sử dụng
chọn
Kích hoạt:
▪ Gợi ý đến nút theo cách phân biệt trực quan khi nút đã
được chọn (làm mờ đi/được tô xám nút)
▪ Nếu một nút được nhấn liên tục thì cho phép chuột được
giữ và hành động lặp lại.
20
Thanh công cụ
Thanh công cụ là bộ sưu tập các lệnh, hành động hoặc

các chức năng, thường theo câu trúc đồ họa, đôi khi là
văn bản, được nhóm với nhau để truy cập nhanh.
21
Thanh công cụ
Cách sử dụng:
▪ Cung cấp truy cập nhanh, dễ dàng đến những lệnh hoặc
các tùy chọn được sử dụng thường xuyên
▪ Gọi ứng dụng nhỏ trong phạm vi một ứng dụng nào đó
▪ Sử dụng thay thế các mục nào đó của menu
Cấu trúc:
▪ Hình ảnh: kích cỡ các nút như nhau, tạo biểu tượng (icon)
duy nhất và có nghĩa, căn giữa hình ảnh trong phạm vi
nút, làm diện mạo nổi bật, đảm bảo thanh công cụ thấy rõ
trên các hình ảnh đồ họa
▪ Văn bản: Tên nhãn có ý nghĩa, tuân theo nguyên tắc chỉ
dẫn tên nhãn cho nút, tạo các nút lệnh trên thanh công cụ
có kích cỡ bằng nhau
▪ Tính nhất quán
22
Thanh công cụ
Kích cỡ:
Một nút của thanh công cụ nên để rộng nhưng cần tính
đến số lượng nút cần được hiển thị.
▪ Nút:
- 24 (w) x 22 (h) pixel, bao gồm cả đường viền.
- 32 (w) x 30 (h) pixel, bao gồm cả đường viền.
- Các nút lớn hơn có thể được sử dụng trên màn hình hiển thị có
độ phân giải cao.
▪ Nhãn:
- 16 (w) x 16 (h) pixel.
- 14 (w) x 24 (h) pixel.
▪ Mặc định: Qui định kích thước cỡ nhỏ như là kích cỡ mặc định
với tùy chọn người dùng để thay đổi.
▪ Hình ảnh:
- Căn giữa hình ảnh trong nút. 23
Thanh công cụ
Tổ chức
▪ Sắp xếp trật tự các nút lệnh dựa trên các lược đồ chúng
và lược đồ phân bố nhóm tùy chọn
▪ Giữ các nút có liên quan nhóm lại với nhau
▪ Tách các nút có tính năng hủy bỏ ra khỏi lựa chọn thường
xuyên
▪ Cho phép người sử dụng cấu hình tổ chức các nút
24
Thanh công cụ
Vị trí
▪ Đặt các tính năng và chức năng chính nằm ngang
với đỉnh cửa sổ, ngay dưới thanh menu
▪ Đặt các thanh tác vụ con và tính năng con dọc theo
các cạnh của cửa sổ màn hình
▪ Cho phép người sử dụng thay đổi vị trí của thanh.
▪ Cho phép người dùng bật hoặc tắt hiển thị thanh
25
Thanh công cụ
Các mục kích hoạt
▪ Chỉ làm cho các mục sẵn có hiện tại của thanh công cụ
sẵn sàng hoạt động
▪ Các mục tạm thời chưa sẵn sáng hoạt động có thể hiển
thị xám nhạt đi
Sự tùy biến
▪ Cho phép thanh công cụ được bật/tắt bởi người sử dụng
▪ Cho phép thay đổi tùy biến các thanh công cụ (nên cung
cấp mặc định)
Các phím tương đương và phím chọn nhanh
Kích hoạt nút 26
2. Các điều khiển nhập văn bản/chỉ đọc
▪ Một điều khiển nhập văn bản (text entry) sẽ chứa text, dạng
tự nhiên mà chuyên được dùng để nhập hoặc chỉnh sửa
bằng bàn phím.
▪ Một điều khiển chỉ đọc (read-only) sẽ chứa text hoặc các giá
trị đang được thể hiện để đọc hoặc chỉ cho các mục đích
hiển thị mà thôi.
→ Trong thuật ngữ hệ thống đồ họa, chúng được gọi là các hộp
text (text boxes).
▪ Một text box trong đó thông tin có thể được nhập vào được
gọi là trường không được bảo vệ (unprotected field).
▪ Một text box được sử dụng chỉ cho các mục đích hiển thị mà
không thể nhập vào thì gọi là trường được bảo vệ (protected
field).
27
Text boxes
Text boxes có 2 dạng: dạng một dòng (single-line) và

nhiều dòng (multiple-line)
▪ Text box một dòng thường được sử dụng khi thông tin
chứa trong nó có thể được giới hạn với một dòng màn
hình
▪ Text box nhiều dòng được sử dụng khi thông tin đó vượt
hơn một dòng 28
Text boxes
Với các trường đơn:

Đặt các chú giải/tên nhãn bên trái hoặc góc trên bên
trái của các hộp text.
Lưu ý:
Đặt dấu (:) ngay sau chú giải
29
Text boxes
Các trường nhiều sự kiện
▪ Nếu các hộp text nhập vào/sửa đổi
→ Đặt chú giải ở dòng căn bên trái phía trên cột
▪ Nếu hộp text để hiển thị /chỉ đọc (dữ liệu dài,
cố định/độ dại bằng nhau)
→ Căn giữa chú giải ở phía trên dữ liệu
▪ Nếu dữ liệu được hiển thị theo: thứ tự

bảng chữ cái và số, ngắn hoặc có độ dài
biến đổi
→ Căn trái chú giải ở phía trên dữ liệu được
hiển thị của hộp text
▪ Nếu trường dữ liệu là dạng số có độ dài

khác nhau
→ Căn phải chú giải ở phía trên dữ liệu được
hiển thị của hộp text
30
Text boxes
Các trường dữ liệu

▪ Trình bày các hộp text dùng để nhập vào/sửa đổi được
bao quang bởi đường kẻ viền
▪ Trình bày các hộp text dùng để hiển thị/đọc dựa trên nền
màn hình
▪ Phân đoạn các hộp text dài:

✓ Kết hợp dùng dấu (/), (-), dấu
cách hoặc các dấu hiệu phân
cách thông dụng
✓ Nếu dữ liệu có độ dài cố định
→ phân đoạn thành các ô hợp lý
bằng cách sử dụng tự động nhảy
để di chuyển giữa các đoạn 31
3. Các điều khiển lựa chọn
Một điều khiển lựa chọn thể hiện tất cả các khả năng lực
chọn thay thế, các điều kiện hoặc các lựa chọn có thể tồn
tại đối với một thực thể, thuộc tính hoặc giá trị.
Radio buttons: các lựa chọn loại trừ Checkbox: các lựa chọn đồng thời
Hộp danh sách lựa chọn đơn
32
Hộp danh sách dạng drop-down/pop-up
Hộp danh sách nhiều lựa chọn
33
Điều khiển lựa chọn: bảng màu

Một điều khiển bao gồm một loạt các lựa chọn thay thế
đồ họa. Các lữa chọn bản than đã tự mô tả bằng cacsc
màu sắc, mẫu tô hoặc hình ảnh
34
4. Các điều khiển kết hợp nhập/chọn
Một điều khiển có đặc tính nhập vừa là trường text và

vừa là trường chọn.
Hộp tăng giảm Hộp tăng giảm dạng drop-

down/popup
Hộp kết hợp

(Combo Box)
35
5. Các điều khiển thao tác khác
Hộp trượt (Slide)
Tab
36
5. Các điều khiển thao tác khác
Date – picker Tree view

control control
Scroll Bar
control
37
6. Các điều khiển trình diễn
Các điều khiển trình diễn hoàn toàn mang tính thông tin.
Các trường text tĩnh

(Static text field control)
Hộp nhóm (group box

control)
38
Tooltip là cung cấp thông tin mô tả sơ bộ về một điều khiển

khi chức năng của nó phải được nhận biết một cách nhanh
chóng
39
Chú giải ghi lời (balloon tip) Để cung cấp thêm thông tin
mô tả hoặc thông tin trạng thái về một thành phần của
màn hình .
40
Thanh chỉ báo tiến trình

(Progress Bar/Progress indicator)
41
Hộp mẫu (sample box)
42
Preview
Previews là hiệu quả KHI

▪ Phải trình diễn danh sách lựa chọn mà ý nghĩa
không rõ ràng;
▪ Trình diễn một vài lựa chọn khó phân biệt và so sánh
với nhau (document styles);
▪ Trình diễn lựa chọn đòi hỏi thời gian xử lý (ảnh);
▪ Yêu cầu thực hiện lệnh mà phải trả giá khi nhầm lẫn
(in).
▪ Previews giúp users lựa chọn và kiểm tra kết quả
bằng cách cho lại phản hồi trực quan tức thì trước
khi users quyết định sử dụng.
43
Các loại Preview
Các nhóm Previews chính

▪ Preview biểu tượng (Iconic): Sử dụng bitmap cố định
để chỉ ra trừu tượng kết quả lựa chọn.
▪ Preview trừu tượng: Sử dụng bitmap biến đổi để chỉ
ra trừu tượng kết quả lựa chọn cụ thể.
▪ Preview mẫu (Sample): Previews dữ liệu mẫu, nó chỉ
ra chính xác kết quả lựa chọn.
▪ Preview bản sao xấp xỉ: Biểu diễn xấp xỉ kết quả của
lựa chọn.
▪ Preview bản sao chính xác: Biểu diễn chính xác kết
quả lựa chọn từ dữ liệu cụ thể của người sử dụng
44
Preview biểu tượng
Sử dụng bitmap cố định để chỉ ra trừu tượng kết quả.

Bitmap không thay đổi, không phụ thuộc vào lựa
chọn khác hay dữ liệu của users
45
Preview trừu tượng
Sử dụng bitmap biến đổi để chỉ ra trừu tượng kết quả lựa
chọn hay tổ hợp với lựa chọn khác
46
Preview mẫu
▪ Sử dụng dữ liệu mẫu, chỉ ra chính xác kết quả lựa chọn.
▪ Dữ liệu mẫu có thể cố định hay phản ánh dữ liệu cụ thể
của Users
47
Preview bản sao xấp xỉ
Biểu diễn xấp xỉ kết quả lựa chọn dữ liệu của User.
Tiết kiệm thời gian và không gian
48
Preview bản sao chính xác
Biểu diễn chính xác kết quả lựa chọn từ dữ liệu cụ thể của
Ví dụ: Sử dụng khi previewing toàn bộ tài liệu (Print Preview).
49
Lựa chọn các điều khiển thích hợp
Các lưu ý khi lựa chọn điều khiển

▪ Chọn các điều khiển quen thuộc
▪ Xem xét tác vụ
▪ Giảm số lượng "nhấp chuột“
▪ Hiển thị nhiều lựa chọn điều khiển nhất có thể
→Nghiên cứu của Couper(2004):
✓ Mọi người có xu hướng chọn từ các tùy chọn được trình bày
và nhìn thấy đầu tiên
✓ Hiếm khi nỗ lực để tìm các tùy chọn bổ sung bằng cách
cuộn
50
So sánh giữa nhập vào hay chọn dữ liệu

❖ Chọn loại điều khiển
▪ Đối với dữ liệu quen thuộc, có ý nghĩa, hãy chọn kỹ thuật
mà theo lý thuyết, yêu cầu số lần nhấn phím ít nhất để
hoàn thành
▪ Nếu dữ liệu không quen thuộc hoặc dễ bị lỗi đánh máy,
hãy chọn kỹ thuật chọn
❖ Mục nhập được hỗ trợ hay không hỗ trợ:
Cung cấp mục nhập được hỗ trợ bất cứ khi nào có thể
▪ Rút gọn những lần nhấn phím bằng bàn phím thừa và
không cần thiết.
▪ Cung cấp tín hiệu âm thanh tự động báo tác vụ đã
được hoàn thành.
51
So sánh giữa nhập vào hay chọn dữ liệu (tiếp)

❖ Mục nhập hỗ trợ cũng được ưa dùng hơn và nhanh
hơn so với nhiều phương pháp lựa chọn.
→ Kết luận: Khi có thể được thì hãy dùng nhập hỗ trợ cho
các trường mục nhập text.
▪ Nhập tự động sẽ giảm thiểu công sức của người sử
dụng bằng cách giảm thiểu thời gian nhập và gõ
nhập bằng bàn phím.
▪ Nó cũng làm người sử dụng đánh giá cao hệ thống
đó
52
So sánh giữa nhập vào hay chọn dữ liệu (tiếp)

Một số lưu ý khi dùng nhập hỗ trợ:
✓ Nếu dùng mục nhập được hỗ trợ thì những lần nhấn
phím thêm cần được hệ thống rút gọn.
✓ Phần mềm sẽ kết thúc việc đánh vần một từ nhanh
hơn nhiều so với những ngón tay đánh máy của một
người có thể dừng cử động.
✓ Hãy cung cấp một vài loại âm thanh báo hiệu rằng
nhập tự động đã bắt đầu.
53
So sánh các điều khiển GUI

7 loại điều khiển được dùng để:
❖ Thao tác trực tiếp
1. Kéo và thả vào
2. Kéo và thả giữa
❖ Lựa chọn
3. Các biểu tượng
4. Các nút radio
5. Menu (hộp danh sách thả xuống)
❖ Mục nhập
6. Một vùng nhập
7. Bốn vùng nhập
Tulis và Kodimer - 1992
54
So sánh các điều khiển GUI (tiếp)

❖ Phương pháp nhanh nhất
▪ Các nút radio (radio buttons)
▪ Một trường nhập
❖ Phương pháp ưu tiên:
▪ Hộp danh sách thả xuống (Drop-down list boxes)
- Tullis và Kodimer (1992)
Các quyết định lựa chọn được đưa ra theo quy ước và
trực giác có thể không nhất thiết mang lại kết quả tốt
nhất
- Tullis (1993)
55

▪ Hộp kiểm (Check boxes)
▪ Hộp danh sách thả xuống (Drop-down list boxes)
▪ Hộp kết hợp dạng thả xuống (Drop-down combination
boxes)
▪ Hộp văn bản (Text boxes)
▪ Hộp danh sách (List boxes)
▪ Các nút radio (Radio buttons)
▪ Thanh trượt (Sliders)
▪ Hộp tăng giảm (Spin boxes)
- Johnsgard và cộng sự. (1995)
56

❖ Các điều khiển lựa chọn loại trừ
Cho một:
• Bộ tùy chọn (5)
• Bộ trung bình (12)
• Bộ lớn (30)
→ Các nút radio nhanh hơn đáng kể
❖ Các điều khiển lựa chọn không loại trừ lẫn nhau
Cho một:
• Bộ tùy chọn nhỏ (5) với 2 lựa chọn được chọn
• Bộ trung bình (12) với 3 lựa chọn được chọn
• Bộ lớn (30) với 8 lựa chọn được chọn
→ Các hộp kiểm tra nhanh hơn đáng kể
57

❖ Các điều khiển kết hợp chọn và nhập
Với
▪ Hộp kết hợp dạng drop -down
▪ Các nút radio, với một trường nhập text
→ Các nút radio có trường nhập văn bản nhanh nhất,
chính xác nhất và được ưu tiên
❖ Các điều khiển để chọn một giá trị trong một phạm vi
▪ Nút tăng giảm (Spin button)
▪ Trường nhập text
▪ Thanh trượt (Slider)
→ Nút tăng giảm chính xác nhất, trường nhập văn
bản nhanh nhất và ưu tiên nhất
58
Các tiêu chí lựa chọn điều khiển (tiếp)

Cân nhắc dữ liệu
▪ Thuộc tính hoặc dữ liệu loại trừ lẫn nhau hay không loại
trừ lẫn nhau?
▪ Thuộc tính hoặc dữ liệu là rời rạc hay liên tục?
▪ Thuộc tính hoặc dữ liệu là hạn chế hoặc không bị hạn chế
về phạm vi?
▪ Thuộc tính hoặc dữ liệu là cố định hay biến đổi?
▪ Thuộc tính hoặc dữ liệu có được sắp xếp theo kiểu có thể
đoán trước được hay không?
▪ Thuộc tính hoặc dữ liệu có thể được biểu diễn bằng hình
ảnh không?
59

Cân nhắc nhiệm vụ
▪ Một mục được nhập hoặc chọn với tần suất thế nào?
▪ Một mục được thay đổi thường xuyên như thế nào?
▪ Mục phải được nhập hoặc chọn chính xác như thế
nào?
60

Cân nhắc của Người sử dụng:
▪ Thời gian đào tạo thao tác điều khiển cho người sử dụng?
▪ Tính chất hoặc dữ liệu là như nào là đủ nghĩa hoặc được
hiểu biết bởi người sử dụng?
▪ Tính chất hoặc dữ liệu như thế nòa để được người sử
dụng ghi nhớ hoặc dễ học?
▪ Hệ thống sẽ được sử dụng thường xuyên như thế nào?
▪ Người dùng có phải là người đánh máy có kinh nghiệm
không?
Cân nhắc về Hiển thị
Có bao nhiêu không gian màn hình là sẵn dùng để hiển thị
các điều khiển khác nhau?
61
Chọn một hình thức điều khiển (tiếp)

Chọn giữa các nút và menu cho các lệnh
Cân nhắc:
▪ Lệnh có phải là một trong các lệnh của bộ công cụ tiêu
chuẩn hay không
▪ Tổng số lệnh trong ứng dụng?
▪ Độ phức tạp của các lệnh
▪ Tần suất sử dụng các lệnh
▪ Lệnh có được sử dụng cùng với một điều khiển khác hay
không?
62
Ví dụ
Hai ví dụ thỏa mãn tính đơn giản trong bố trí các

phần tử trên giao diện
63
Một số hình ảnh và nhận xét
64
65
66
Một số hình ảnh
67
68
69
70
Câu hỏi
Nhận dạng 1 điều khiển thông qua:

▪ Mô tả chung về 1 điều khiển;
▪ Phân tích ưu điểm/nhược điểm của 1 điều khiển;
▪ Đặc điểm khác biệt nhất của 1 điều khiển;
▪ Các hướng dẫn thiết kế cho 1 điều khiển về: tổ
chức, về số lượng, về cách trình bày.
71
Tổng kết bài
❖Hiểu về khái niệm điều khiển

❖Các loại điều khiển
❖Hướng dẫn lựa chọn điều khiển thích hợp
72
VIẾT VĂN BẢN VÀ THÔNG BÁO RÕ RÀNG
(BƯỚC 8)

1
Nội dung
▪ Các nguyên tắc chỉ dẫn chung lựa chọn từ ngữ, câu, thông
báo và văn bản
▪ Tính dễ đọc.
▪ Lựa chọn các từ thích hợp.
▪ Viết câu và tin nhắn.
▪ Các loại tin nhắn.
▪ Trình bày và viết văn bản.
▪ Các chỉ dẫn cụ thể cho Web
▪ Trình bày và viết nội dung trang web
▪ Viết liên kết và tiêu đề.
▪ Viết hướng dẫn và thông báo lỗi
2
Giới thiệu
▪ Cách diễn đạt bằng từ ngữ của giao diện và màn

hình là hình thức giao tiếp cơ bản với người sử
dụng.
▪ Từ ngữ, thông báo, văn bản rõ ràng và có ý nghĩa sẽ
làm tăng tính tiện dùng của hệ thống và giảm thiểu
nhầm lẫn của người sử dụng.
▪ Mục tiêu của bước này sẽ trình bày những nguyên
tắc chỉ dẫn chung để lựa chọn các từ ngữ phù hợp,
viết các thông báo và văn bản rõ ràng.
3
Một ví dụ trong thực tế
4
Một ví dụ trong thực tế
5
Viết văn bản và thông báo rõ ràng
▪ Các giao tiếp nên cung cấp thông tin một cách đơn giản, rõ
ràng và lịch sự nhưng vẫn phải sử dụng hệ thống một cách
hiệu quả.
▪ Thiết kế của các giao tiếp như vậy cần tính đến kinh nghiệm,
hiểu biết của người sử dụng về chủ đề của hệ thống và cần
bao nhiêu thông tin nhất định để người sử dụng tương tác
với hệ thống một cách hiệu quả.
▪ Giống như tất cả các khía cạnh của thiết kế giao diện, việc
hiểu biết về người sử dụng là bước đầu tiên trong việc lựa
chọn các từ ngữ thích hợp và tạo ra các văn bản và thông
báo có thể chấp nhận được.
6
Những nguyên lý chỉ dẫn:
Lựa chọn từ ngữ, câu, thông báo, văn bản
7
Tính dễ đọc
Mức độ có thể hiểu được đoạn văn xuôi dựa

trên sự tổ hợp của các từ và các câu trong
đoạn văn đó gọi là tính dễ đọc.
8
Các yêu tố ảnh hưởng tới tính dễ đoc
Tính phổ biến

Độ dài từ Độ dài câu
của từ
Tổ chức,
Số lượng các cách bố trí,
âm tiết định dạng thông
tin
9
Đo tính dễ đọc
▪ Các công thức đo tính dễ đọc đã được phát triển gần

100 năm trước.
▪ Ngày nay, một số công thức đo tính dễ đọc được sử
dụng gồm các chỉ số
▪ Automated Readability Index,
▪ Gunning-Fog Index,
▪ Dale-Chall-Flesch Reading Ease và
▪ Flesch - Kincaid Grade Level.
▪ Hầu hết các công thức đo tính dễ đọc bao gồm 2 yếu tố:
▪ (1) Số lượng âm tiết hoặc các ký tự trong một từ;
▪ (2) Số lượng các từ trong một câu.
→ Người có trình độ học cao hơn sẽ có các kỹ năng đọc
tốt hơn
10
Các nguyên tắc chỉ dẫn về tính dễ đọc
(1) Hãy viết ở trình độ dễ đọc dưới trình độ kỹ năng đọc

của các đối tượng định hướng tới
(2) Áp dụng tất cả các nguyên lý khác để viết và trình
bày văn bản rõ ràng
11
Chọn các từ thích hợp
Không sử dụng:
(1) Thuật ngữ chuyên môn,
(2) Các tên và các chữ viết tắt (trừ khi chúng quen thuộc),
(3) Các dạng rút gọn và rút ngắn…
Sử dụng:
(1) Các từ ngữ ngắn, quen thuộc,
(2) Các ký tự trong bảng chữ cái chuẩn,
(3) Các từ ngữ viết đầy đủ,
(4) Các thuật ngữ khẳng định,
(5) Các từ hành động đơn giản,
(6) Sử dụng cách nói hơn (more) thay vì nói kém (less)
(7) Tính nhất quán,
(8) Sử dụng dấu chấm câu
12
Các tên và các chữ viết tắt.

▪ Không bao giờ giả định một người sử dụng sẽ hiểu những
gì viết tắt của một tên hoặc một từ viết tắt.
▪ Tránh sử dụng các từ viết tắt trừ khi chúng là các từ hoặc
các cụm từ quen thuộc.
13
▪ Các tên viết tắt và các từ viết tắt nếu được sử dụng, thì phải tuân
theo các nguyên tắc chỉ dẫn:
✓ Luôn luôn sử dụng dạng viết đầy đủ của từ đó ở lần gặp đầu tiên
trong giao diện.
✓ Trình bày tên và từ viết tắt trong dấu ngoặc đơn theo sau dạng
viết đầy đủ. Sử dụng các từ viết tắt này vị trí tiếp theo trong hộp
thoại một cách trực tiếp (từ điểm bắt đầu nó được định nghĩa).
✓ Các từ viết tắt không được định nghĩa (không có dạng viết ra
đầy đủ) thì không được sử dụng tên hoặc từ viết tắt;
✓ Chỉ sử dụng một tên viết tắt nếu nó ngắn hơn đáng kể so với viết
ra đầy đủ và nếu nó tiết kiệm không gian màn hình cần thiết.
14
Các từ ngữ nên có ý nghĩa, được hiểu và được chấp nhận

cho tất cả người sử dụng.
Nên tránh:
- Các từ hoặc thuật ngữ hay dùng trong ngành máy tính/tin
học. (filespec - đặc trưng file , abend - hủy bỏ, spool -lưu
trữ tạm thời).
- Các từ có ý nghĩa đặc biệt gay gắt hoặc liên quan tới liên
tưởng không thú vị (abort – thoát ra, execute, kill – bỏ dở,
chấp hành, tiêu diệt)
- Các từ có ý nghĩa mập mờ (abend, boot – hủy bỏ, khởi
động).
15
16
Viết các câu và các thông báo
Các câu và các thông báo phải:

▪ Đơn giản và ngắn gọn.
▪ Hạn chế không nhiều hơn 20 từ trong một câu.
▪ Hạn chế không nhiều hơn 6 câu trong một đoạn.
▪ Viết ở trình độ lớp 8 hoặc thấp hơn cho phần đông dân số.
▪ Có thể sử dụng trực tiếp và ngay lập tức.
▪ Là câu nói khẳng định.
▪ Bằng một lối nói tích cực.
▪ Theo trình tự thời gian các sự kiện.
▪ Được cấu trúc sao cho các chủ đề chính ở gần đầu câuhay
đoạn văn.
17
Các thông báo và câu phải có phong thái phù hợp:

▪ Không độc đoán.
▪ Không đe dọa.
▪ Không ra lệnh bề trên.
▪ Không trừng phạt.
▪ Thận trọng trong việc sử dụng các câu hài hước.
▪ ...
18
Đơn giản và tóm tắt: Một thông báo mà cần phải được
giải thích thì không phải là 1 thông báo.
19
Vận dụng và phân tích
Câu khẳng định: Các câu khẳng định dễ hiểu hơn các
câu phủ định.
Ví dụ, “Hãy hoàn thành việc nhập dữ liệu trước khi quay trở lại
menu” dễ hiểu hơn “Đừng quay lại menu trước khi hoàn thành việc
nhập dữ liệu”.
→ Hãy chỉ cho người sử dụng những công việc họ phải

làm chứ không phải những công việc họ tránh làm.
Lối nói chủ động: Cung cấp ngôn ngữ trực tiếp và
đơn giản. Lối nói chủ động sẽ dễ hiểu và thường chính
xác hơn những lối nói bị động.
Ví dụ, “Gửi tin nhắn bằng cách nhấn phím Transmit” sẽ dễ hiểu
hơn “Tin nhắn sẽ được gửi đi khi nhấn phím Transmit”
20
▪ Trình tự thời gian: Nếu câu mô tả trình tự thời gian

của các sự kiện, thì thứ tự của các từ nên tương ứng
với trình tự thời gian này.
Nên nói một lời nhắc “Điền đầy đủ địa chỉ và chuyển đến trang
tiếp theo” hơn là nói “Chuyển đến trang tiếp theo sau khi điền đầy
đủ địa chỉ”.
▪ Khởi đầu là chủ đề chính: Thông tin cần phải ghi nhớ
nên được đặt lên đầu của thông báo hoặc câu. Một
người có thể nhớ điều gì đó lâu nếu nó xuất hiện ngay
lúc bắt đầu. Các nội dung nằm ở giữa câu hay thông
báo thường khó nhớ.
21
▪ Không độc đoán: Điều này có nghĩa rằng hệ thống

đang chờ sự chỉ đạo của người sử dụng, chứ không
phải hệ thống đang chỉ đạo người sử dụng.
Ví dụ, cách diễn đạt của một thông báo như “Sẵn sàng cho
lệnh tiếp theo”, chứ không nói “Hãy nhập lệnh kế tiếp”.
▪ Không đe dọa: Các âm báo hoặc các hành động

phủ định hoặc các đe dọa thường không có tính thân
thiện
22
Ví dụ về hộp thông báo của một website (Midwest Microwave) khi

người sử dụng muốn xem danh mục chi tiết các sản phẩm. Thông
điệp này xuất hiện trước khi hiển thị danh mục theo yêu cầu của
23
Một số nhận xét về thông báo này như sau:

▪ Nội dung của hộp thông báo gây cho người sử dụng
có cảm giác nặng nề, mệt mỏi. Họ khó khăn để nhận
ra cái gì quan trọng và cái gì không quan trọng →vi
phạm nguyên tắc thiết kế tối thiểu;
▪ Về bố trí hộp thông báo: không chia đoạn, không có
tiêu đề, khoảng trắng để chỉ dẫn thị giác → ít quan
tâm đến yếu tố thiết kế mỹ thuật;
24
▪ Không tổ chức thành các đoạn để có thể nhìn lướt

qua, để tìm ra những cái mà người sử dụng chưa
biết → thiếu tính mềm dẻo và hiệu quả;
▪ Thông tin không hữu ích và ngoài ngữ cảnh mà
người sử dụng thực hiện nhiệm vụ →không hợp lý
về trợ giúp và cung cấp tài liệu cho người sử dụng;
▪ Là hộp thoại modal, do vậy mọi thông tin sẽ mất đi
khi người sử dụng có được danh mục →Vi phạm
nguyên tắc thiết kế giảm thiểu tải bộ nhớ;
▪ Trong thông báo có sử dụng các khái niệm kỹ thuật
như “modem V.90” →chưa đáp ứng yêu cầu nói theo
ngôn ngữ của người sử dụng .
25
Thông báo này quá ngắn gọn
Thông báo lạm dụng chữ in đậm
26
Sử dụng nền trang trí ảnh hưởng đến

việc đọc thông báo
Không nên sử dụng toàn bộ chữ in hoa
27
28
29
Thông báo (Messages)
▪ Thông báo (messages) là đầu mối giao tiếp được

cung cấp trên màn hình với người sử dụng.
▪ Tồn tại nhiều loại thông báo khác nhau và chúng có
thể được hiển thị theo những dạng thức và vị trí khác
nhau.
▪ Một thông báo nên có sắc thái và phong cách hợp lý,
nhất quán với chính nó và với các thông báo khá
30
Các loại thông báo
Messages được chia thành 2 nhóm phổ biến:

❖ Các thông báo hệ thống (system messages):
▪ Được tạo ra bởi hệ thống để chuyển tới người sử dụng thông
tin về trạng thái và các hoạt động của hệ thống.
▪ Chúng thông thường hiển thị trong các hộp thông báo.
❖ Các thông báo chỉ dẫn (instructional messages)

đôi khi được gọi là các thông báo nhắc (prompting
messages).
▪ Các thông báo nói với người sử dụng cách thức làm việc hoặc
hoàn thành như thế nào và được hiển thị trên màn hình.
▪ Chúng có thể được cung cấp trong các hộp thông báo và cũng
có thể trong chính màn hình
31
Thông báo chỉ dẫn
(instructional messages)
- Cung cấp thông báo chỉ dẫn đến mức cần thiết cho người
dùng.
- Đặt thông tin ở vị trí chiến lược trên màn hình
- Hiện thị thông tin trực quan, khác biệt với các thành phần
khác của màn hình
- Viết thông báo tuân theo nguyên tắc chỉ dẫn liên quan đến
viết từ, câu và thông báo
32
Thông báo hệ thống (system messages)
▪ Thông báo hệ thống bao gồm nhiều loại, mỗi loại

phản ánh một mục đích khác nhau.
▪ Các thành phần của hộp thông báo gồm: một biểu
tượng tiêu chuẩn để hỗ trợ việc nhận biết nhanh loại
thông báo, nội dung thông báo và các nút lệnh tiêu
chuẩn
33
Thông báo hệ thống (system messages)
Các loại thông báo phổ biến:
Các thông báo mang tính

Các thông báo trạng thái
thông tin
(Status messages)
(Informational messages)
Các thông báo nghiêm

Các thông báo dạng Các thông báo dạng
trọng
cảnh báo hỏi
(Critical/action
(Warning messages) (Question messages )
messages)
34
1- Status messages
Thông báo dạng này:

- Cung cấp thông tin liên quan đến tiến trình của một hoạt động
kéo dài.
- Thường chứa một chỉ báo tiến trình và một thông điệp ngắn gọn
mô tả loại hình hoạt độngđang thực hiện.
- Thường chỉ gồm một nút Cancel, để dừng các hoạt động đang
được thực hiện, có thể có nút Pause và nút Resume (nếu cần
thiết).
- Có thể loại bỏ khi nó không có nghĩa hay thay thế bằng phản
hồi trực quan khác.
Ví dụ: sử dụng Status bar để thay thế cho một Status message
boxes). 35
1- Status messages (tiếp)
36
2- Informational messages
Thông báo dạng này:

- Cung cấp thông tin tình trạng của hệ thống (khi nó không ngay
lập tức rõ ràng với người sử dụng tại thời điểm đó).
- Có thể xác nhận tiến trình không rõ ràng đang xảy ra hoặc đã
hoàn tất.
- Có thể được sử dụng để cung cấp phản hồi ngay lập tức khi
phản hồi thông thường bị trì hoãn.
- Không có hành động nào của người sử dụng là cần thiết cho
những loại thông báo này, mặc dù việc chứng thực rằng thông
báo đã được xem có thể bị yêu cầu
37
2- Informational messages (tiếp)
Flash boxes
▪ Tương tự Informational messages nhưng không có
Button.
▪ Hộp thông báo tự mất sau vài giây
38
3- Warning messages
Các thông báo dạng này:

- Cảnh báo gây sự chú ý đến một tình huống có thể không mong
đợi.
- Chúng thường được hiển thị bởi một biểu tượng dấu chấm than
(!) phía bên trái thông báo.
- Người sử dụng phải xác định được tình trạng thực tế là một
vấn đề và có thể được đề nghị tư vấn hệ thống nên tiếp tục
thực hiện hoặc không thực hiện
39
4- Action messages
Các thông báo nghiêm trọng, đôi khi được gọi là các
thông báo hành động (action):
- Kêu gọi sự chú ý đến các tình trạng mà sẽ yêu cầu người
sử dụng hành động trước khi hệ thống thực thi.
- Một thông báo mô tả tình trạng sai lầm thường được hiển
thị như một thông báo nghiêm trọng.
40
Error messages
▪ Thông báo cho users vấn đề cần chỉnh sửa trước khi
công việc tiếp tục
▪ Thiết kế UI sao cho ngăn cản users gây ra lỗi -> loại
bỏ thông báo lỗi.
▪ Vô hiệu lệnh menu và điều khiển không hợp lệ;
▪ Ngăn cản user nhập dữ liệu không hợp lệ;
▪ Cung cấp mặc định thích hợp;
▪ Sử dụng thao tác trực tiếp;
▪ Nếu sửa lỗi tự động, hãy thực hiện rõ ràng;
▪ Cho user khả năng viết đè lên thay đổi tự động;
▪ Sử dụng các đặc trưng tự động nhưng user luôn phải
có cảm giác làm chủ
41
Error messages
42
5- Question messages
Các thông báo dạng hỏi:

- Một thông báo dạng hỏi sẽ hỏi một câu hỏi và cung cấp một lựa
chọn các tùy chọn để người sử dụng chọn.
- Nó được thiết kế bởi một biểu tượng dấu hỏi “?” đi trước phần
văn bản của thông báo (lưu ý khi sử dụng biểu tượng “?”- dễ nhầm
lẫn với hộp thoại dạng hỗ trợ (Microsoft Window khuyến cáo).
43
Một số lưu ý
▪ Thanh đầu đề:

▪ Xác định rõ ràng nguồn gốc thông báo
• Tên của đối tượng mà thông báo đề cập đến
• Tên của ứng dụng mà thông báo đề cập đến
▪ Không đưa vào một chỉ báo về loại thông báo.
▪ Sử dụng kiểu chữ hỗn hợp theo phong cách tiêu đề
▪ Hộp thông báo:
▪ Cung cấp mô tả rõ ràng và ngắn gọn về nguyên nhân dẫn
đến sự xuất hiện hộp thông báo.
▪ Không dài quá hai hoặc ba dòng
▪ Đưa biểu tượng liên quan tới thông báo đặt bên trái nội
dung thông báo
▪ Đặt nội dung thông báo vào giữa cửa sổ
44
Một số lưu ý (tiếp)
Các điều khiển hộp thông báo

▪ Các nút lệnh
▪ Nếu thông báo không yêu cầu lựa chọn được thực hiện, mà
chỉ xác nhận – Hãy đưa vào nút Ok
▪ Nếu tin nhắn yêu cầu lựa chọn, hãy cung cấp nút lệnh cho
mỗi tùy chọn
• Cung cấp nút OK và Cancel khi người dung phải quyết định
tiếp tục hoặc dừng
• Cúng cấp nút Yes và No khi người dùng phải quyết định tiếp
tục như thế nào
• Cung cấp tên nút là tên hành động phù hợp với các lựa chọn
chưa rõ ràng
▪ Nếu thông báo cho phép người dùng khởi đầu một hành
động sửa chữa tình huống thì tên nút phù hợp với hành
động chỉnh sửa
45
▪ Các nút lệnh (tiếp)

▪ Nếu thông báo mô tả một tiến trình bị gián đoạn và trạng thái không
thể trả lại - Cung cấp nút Stop.
▪ Nếu thông báo cung cấp một cơ hỏi để hủy một tiến trình (thực hiện
hoặc không thực hiện một hành động) - Cung cấp nút Canel.
▪ Nếu biết thêm chi tiết về chủ đề của thông điệp phải được trình bày
- Cung cấp nút Help
▪ Chọn lựa chọn thường xuyên nhất hoặc lựa chọn phá hoại nhất
như mặc định
▪ Chỉ hiển thị hộp thông báo khi cửa sổ ứng dụng đang hoạt động
▪ Chỉ hiển thị một hộp thông báo cho một số điều kiện nhất định
▪ Đóng hộp thoai thông báo: cho phép có ô close trên thanh đầu đề
chỉ khi một thông báo có nút cancel
46
▪ Vị trí của thông báo

▪ Sử dụng dòng thông báo cho các thông báo mà không được
gây trở ngại đến thông tin trên màn hình
▪ Các cửa sổ pop-up có thể được sử dụng cho tất cả các loại
thông báo, nếu có thể dùng được.
▪ Các thông báo nghiêm trọng luôn luôn được sử dụng bằng
các cửa sổ pop-up.
▪ Những lưu ý xem xét khác của thông báo
▪ Nên viết tắt, hoặc sử dụng từ ngữ ngắn gọn hơn cho các
thông báo.
▪ Những vấn đề phải được ghi nhớ nên đặt ở đầu văn bản
thông báo.
▪ Không đưa các con số mã hóa trong các thông báo
47
48
Tình bày và viết văn bản
Văn bản, theo một định nghĩa rất chung chung, là bất
kỳ thành phần văn bản nào xuất hiện trên màn hình,
bao gồm chú thích trường, tiêu đề, từ, câu, tin nhắn và
hướng dẫn.
49
Trình bày văn bản
Các font chữ:
▪ Font chữ trơn và đơn giản
▪ Kích thước tối thiểu 12 đến 14 point
Căn lề:
▪ Căn trái (không căn phải)
▪ Không gạch nối các từ
Độ dài dòng:
▪ Nếu cần đọc nhanh, hãy sử dụng 75-100 ký tự
▪ Nếu ưu tiên người người sử dụng là quan trọng, có thể chấp
nhận 50-60
▪ Tránh các cột quá hẹp
Kết thúc dòng
▪ Trùng với ranh giới ngữ pháp
Khoảng cách dòng
▪ Tăng khoảng cách dòng để dễ đọc và rõ ràng hơn
Nội dung: Tiêu đề, phân tách đoạn văn, trình bày chủ đề, nhấn
mạnh,… 50
Viết văn bản
Các câu:
- Sử dụng câu ngắn
- Sử dụng các từ quen thuộc
Đoạn văn:
- Duy trì các đoạn văn ngắn
- Hạn chế một đoạn văn chỉ có một ý tưởng duy nhất
Phong cách:
- Viết như bạn đang nói
51
Những nguyên lý cơ bản về:
NỘI DUNG VÀ VĂN BẢN

DÙNG CHO CÁC TRANG WEB
52
Nội dung và văn bản dùng cho các trang Web
▪ Nội dung là phần quan trọng nhất của một Website,

viết tốt nội dung site là một việc cần thiết. Nội dung
viết nghèo nàn có thể làm tăng sự nhầm lẫn, tăng
các lỗi đọc hiểu, tăng thời gian đọc và giảm sự hài
lòng của người sử dụng.
▪ Văn bản dùng cho các trang Web nhìn chung sẽ tuân
theo các nguyên tắc chỉ dẫn đã được trình bày về
các từ ngữ, các câu văn, các thông báo, các lời chỉ
dẫn và văn bản.
53
Trang Web yêu cầu một tập hợp riêng biệt về các
nguyên tắc chỉ dẫn bổ sung cho nhiều chủ đề về Web:
▪ Cách sử dụng từ ngữ
▪ Cách trình bày thông báo lỗi
▪ Cách viết văn bản,
▪ Cách viết đầu đề và tiêu đề,
▪ Cách viết các liên kết
Văn bản của trang Web phải được viết đúng cách và
hợp lý cho phương tiện truyền đạt
54
▪ Tính dễ đọc của văn bản có thể là một vấn đề

nghiêm trọng nếu không đủ độ tương phản giữa văn
bản và nền của văn bản. Các nền văn bản được
trang trí hoa văn có thể ảnh hưởng nghiêm trọng đến
tính dễ đọc của văn bản vì do quá nhiều màu sắc.
▪ Một đặc tính chung của những Website tốt nhất là
văn bản có độ tương phản cao với nền.
→ Sự kết hợp tốt nhất là chữ màu đen trên nền màu
trắng.
55
Foreground vs Background
56
Chỉ dẫn văn bản cho các webiste
Cần nắm được các hướng dẫn về

▪ Các từ ngữ
▪ Văn bản (chữ) của trang Web
▪ Cách trình bày
▪ Văn phong (cách viết)
▪ Đầu đề trang
▪ Các tiêu đề mục và các tựa đề
▪ Các chỉ dẫn
▪ Các thông báo lỗi
▪ Các liên kết
▪ .v.v..
để có trang web được trình bày tốt.
57
Từ và cách trình bày
Các từ ngữ
▪ Hạn chế sử dụng các từ ngữ thu hút chú ý đến trang
web
Cách trình bày
▪ Cung cấp văn bản tương phản cao với nền
58
Văn bản của trang web
Phong cách:
▪ Sử dụng một phong cách phản ánh nhu cầu của người
sử dụng trang web.
▪ Sử dụng tổ chức kim tự tháp ngược
▪ Ngắn gọn, chỉ sử dụng khoảng một nửa số từ của văn
bản thông thường
▪ Mỗi đoạn nên ngắn gọn và chỉ chứa một ý chính
Liên kết:
▪ Giảm thiểu các liên kết trong văn bản
▪ Đặt chúng ở đầu hoặc cuối của đoạn văn hoặc các phần
của văn bản
59
Văn bản của trang web
Đọc lướt văn bản:
▪ Tăng khả năng đọc lướt văn bản bằng cách dụng
▪ Danh sách đánh dấu đầu dòng
▪ Các bảng
▪ Tiêu đề và tiêu đề con
▪ Các vấn đề quan trọng được làm nổi bật và nhấn
mạnh
▪ Đoạn văn ngắn gọn
Đối tượng quốc tế:
▪ Xem xét nhu cầu quốc tế hóa
Kiểm thử:
▪ Kiểm tra tính có thể đọc và dễ đọc
60
Đầu đề trang
Cung cấp tiêu đề trang

▪ Có các từ khóa có ý nghĩa
▪ Từ đầu tiên của trang là mô tả quan trọng nhất của
trang
▪ Tạo cảm giác nhất định khi xem hoàn toàn bên ngoài
ngữ cảnh
▪ Khác với các tiêu đề trang khác
▪ Được viết theo kiểu chữ hỗn hợp bằng cách sử dụng
kiểu tiêu đề mục
Không đánh dấu từ khóa
61
Các tiêu đề mục và đề tựa
▪ Các tiêu đề và tiêu đề tựa có ý nghĩa

▪ Tạo từ đầu tiên mang một thông tin quan trọng
62
Các chỉ dẫn
▪ Không sử dụng cách diễn đạt chỉ ra thứ tự trang hay

luồng thông tin nhất định
▪ Giải thích vị trí mà “Up” (Tiến tới) sẽ dẫn tới
▪ Giảm thiểu chỉ dẫn “Click here” (Kích tại đây)
▪ Hãy nói “Select this link” (Hãy chọn liên kết này)
63
Các thông báo lỗi
▪ Cung cấp các thông báo lỗi có ích và chính xác cho:
▪ Dữ liệu không được chọn, nhập, chèn một cách
đầy đủ, chính xác
▪ Các yêu cầu đối với các tài liệu không tồn tại hoặc
không thể tìm
▪ Hiển thị lại thông báo trên trang tương ứng
▪ Hiển thị thông báo lỗi một cách trực quan, gây chú ý
64
Các liên kết
▪ Tạo liên kết:

▪ Có tính mô tả.
▪ Có thể phân biệt được.
▪ Dự đoán.
▪ Tạo các liên kết có từ ngữ ngắn gọn.
▪ Các liên kết nhúng được tích hợp trôi chảy vào văn
bản.
▪ Chỉ một vài từ trở thành liên kết hoạt động.
▪ Không rải liên kết qua hai dòng.
▪ Các liên kết độc lập không được dài quá một câu.
▪ Cung cấp các chứ giải cho liên kết
65
Các liên kết
66
67
Tổng kết bài
▪ Các chỉ dẫn về nguyên tắc viết từ, câu, thông báo và
văn bản hiển thị trên màn hình
▪ Các chỉ dẫn cụ thể cho nội dung hiện thị web
68
CUNG CẤP THÔNG TIN PHẢN HỒI,
HƯỚNG DẪN VÀ HỖ TRỢ HIỆU QUẢ
(BƯỚC 9)

1
Nội dung
▪ Cung cấp thông tin phản hồi

▪ Thời gian phản hồi có thể chấp nhận được
▪ Đối phó với sự chậm trễ thời gian
▪ Nhấp nháy thu hút sự chú ý
▪ Việc sử dụng âm thanh
▪ Cung cấp thông tin hướng dẫn và hỗ trợ
▪ Ngăn ngừa lỗi và quản lý sự cố
▪ Các loại hướng dẫn và hỗ trợ
2
Đặt vấn đề
▪ Hành động của người sử dụng phải được phản ứng

lại theo một số cách nhất định.
▪ Thông tin phản hồi sẽ định hình sự thực hiện của con
người. Nếu không có nó, người ta không thể học tập
được.
▪ Để hỗ trợ cho việc học tập của người sử dụng và
tránh sự ức chế, cung cấp hướng dẫn và hỗ trợ triệt
để, kịp thời là rất quan trọng.
3
Cung cấp thông tin phản hồi thích hợp
Thời gian phản hồi: Sự phản hồi của hệ thống nên

phù hợp với tốc độ và luồng xử lý suy nghĩ của con
người.
- Dưới 1 hoặc 2 giây nếu cần tư duy liên tục và tập trung
cao
- Từ 2 đến 4 giây nếu tác vụ không cần tập trung cao, yêu
cầu bộ nhớ ngắn hạn vừa phải bị áp đặt
- Từ 4 đến 15 giây nếu tác vụ tồn tại, yêu cầu bộ nhớ ngắn
hạn tối thiểu bị áp đặt
- Hơn 15 giây nếu người sử dụng có thể làm việc khác và
trở lại khi thuận tiện
Thời gian trễ bất biến được ưa thích hơn thời gian
trễ khả biến
4
Thời gian tải về một trang web
Những người tham gia thử nghiệm đánh giá thời gian phản
hồi với các kết quả sau:
▪ Cao (Tốt): Lên đến 5 giây
▪ Trung bình: Từ 6 đến 10 giây
▪ Thấp (Kém): Trên 10 giây
Các nghiên cứu khác đã phát hiện ra những điều sau:
▪ Thời gian trì hoãn lâu hơn được chấp nhận bởi:
• Người dùng mới, người dùng lớn tuổi, những người chưa có kinh
nghiệm với kết nối băng thông rộng, khách truy cập mới vào trang
web, những ngnười thực hiện các nhiệm vụ quan trọng, những
người thực hiện nhiệm vụ thành công, nội dung tốt hơn
▪ Các trang web quá chậm có thể khiến mọi người tin rằng họ đã mắc lỗi
5
▪ Thời gian tải xuống tối đa nên nằm trong khoảng 10s
▪ Sử dụng hiển thị hình ảnh tăng dần hoặc lớn dần.
▪ Các hình ảnh phải:
▪ Nhỏ.
▪ Có các thông số ảnh thấp (mật độ bit, độ phân giải
thấp, sử dụng ít màu sắc hơn,...).
▪ Có thể tái sử dụng được.
▪ Có chứa các thông số chiều cao và chiều rộng theo
pixel trong một thẻ nhãn.
▪ Sử dụng các hình ảnh thu nhỏ để xem trước các hình ảnh
lớn hơn.
▪ Sử dụng các hình ảnh nền đơn giả
6
Hiển thị tối thiểu → Nhanh
Hiển thị đầy đủ theo nhu cầu người sử dụng
7
Xử lý với thời gian trễ
▪ Xác nhận bằng cách click vào nút bấm (trong khoảng
1/10s);
▪ Đợi dưới 10 giây:
▪ Hãy đưa ra một tín hiệu “busy” cho tới khi thao tác hoàn thành. –
Hãy Con trỏ động của đồng hồ cát
▪ Đợi từ 10 giây đến 1 phút:
Nếu một thao tác cần hơn 10 giây để hoàn tất, hãy iển thị:
▪ Một con lăn có các vạch xoắn khác màu hoặc đối tượng sinh
động khác có kích thước lớn.
▪ Thêm một thanh chỉ báo tiến độ, thông báo lượng phần trăm
hoàn thành, hoặc thông báo về thời gian đã trôi qua.
8
Xử lý với thời gian trễ (tiếp)
Đợi dưới 10 giây
9
Đợi từ 10 giây đến 1 phút
Các hình ảnh vui mắt chuyển

tới người sử dụng để làm thời
gian trễ dường như ngắn lạ
10
Đợi hơn 1 phút:

▪ Hiển thị một ước tính về thời gian phải chờ.
▪ Hiển thị một thanh chỉ báo tiến độ, thông báo lượng
phần trăm hoàn thành, hoặc thông báo về thời gian
đã trôi qua.
▪ Khi một thao tác kéo dài được hoàn tất, hãy đưa ra
một xác nhận là nó đã hoàn tất.
• Một hiển thị màn hình thay đổi đáng kể.
• Một giai điệu âm thanh.
11
▪ Nếu một thao tác mất nhiều thời gian hơn

▪ Chia nhỏ các thao tác thành các tác vụ nhỏ hơn
và cung cấp các chỉ báo tiến độ cho mỗi tác vụ
▪ Cho phép người sử dụng bắt động hoạt đông mới
trong chờ đợi
Người sử dụng được làm việc khác trong thời gian chờ và sẽ được
thông báo khi tác vụ được hoàn tất bằng âm thanh
12
▪ Các thao tác lâu và ko thể nhìn thấy được là đã hoàn

thành: hãy đưa ra một xác nhận hoàn thành, như
một thông báo/một giai điệu âm thanh.
▪ Thanh chỉ báo tiến độ;
▪ Thông báo lượng phần trăm hoàn thành;
▪ Thông báo thời gian đã trôi qua;
▪ Tải về từ trang Web:
▪ Đối với các trang yêu cầu thời gian tải về lớn hơn
5s, hãy cho người sử dụng một điều gì đó để làm
trong khi chờ đợi:
• Nhanh chóng hiển thị, ở phía trên cùng của trang tải về,
một hình ảnh, văn bản hoặc các liên kết;
▪ Tư vấn rằng thời gian tải về sẽ lâu
13
Nháp nháy thu hút chú ý
▪ Thu hút sự chú ý bằng cách nhấp nháy chỉ báo khi
ứng dụng không hoạt động nhưng phải hiển thị thông
báo cho người dùng.
▪ Để cung cấp một chỉ báo tin nhắn bổ sung, hãy cung
cấp một tín hiệu thính giác (một hoặc hai tiếng bíp).
▪ Hiển thị thông báo
14
Sử dụng âm thanh
▪ Sử dụng âm thanh luôn kết hợp với chỉ dẫn trực quan.
▪ Sử dụng không quá sáu âm thanh khác nhau.
▪ Không sử dụng:
▪ Đoạn nhạc hoặc giai điệu
▪ Tín hiệu lớn.
▪ Sử dụng tông màu một cách nhất quán.
▪ Cung cấp tần số tín hiệu từ 500 đến 1.000 Hz.
▪ Cho phép người dùng điều chỉnh âm lượng hoặc tắt hoàn toàn
âm thanh.
▪ Kiểm tra âm thanh với người dùng trong thời gian dùng thử
kéo dài.
▪ Sử dụng âm thanh một cách tiết kiệm
▪ Nên ít sử dụng âm thanh (gây phiền nhiễu, dễ dàng bị lạm
dụng, không đáng tin cậy)
15
Hướng dẫn và sự hỗ trợ
1. Ngăn chặn các lỗi

2. Quản lý vấn đề
3. Cung cấp hướng dẫn và hỗ trợ
4. Các chỉ dẫn hoặc lời nhắc
5. Phương tiện trợ giúp (Help)
6. Trợ giúp theo ngữ cảnh
7. Trợ giúp định hướng theo tác vụ
8. Trợ giúp tham khảo (Reference Help)
9. Các thuật sĩ (wizad)
10. Các gợi ý hoặc lời mách nước (hints & tips)
16
Ngăn chặn các lỗi
Kết quả của hành vi tự động

Lỗi sơ
xảy ra, không theo ý muốn
suất (slip)
(thường dễ phát hiện)
Lỗi
Kết quả từ việc hình thành mô

Lỗi sai lầm hình hoặc mục tiêu sai và sau
(mistake) đó thực hiện
(thường không dễ phát hiện)
Mọi người đều mắc sai lầm, vì vậy mọi sai lầm đều nên sửa
chữa.
17
Ngăn chặn các lỗi
▪ Con người thường phát hiện ra lỗi sơ suất vì nó

thường dễ chú ý.. Các lỗi sơ suất thường (nhưng
không phải luôn luôn) được sửa chữa khá dễ dàng
→ Chúng có thể được giảm đi khi thiết kế các ứng
dụng phù hợp với các yếu tố con người
▪ Một sai lầm có thể không được phát hiện dễ dàng bởi
vì các hành động có thể là thích hợp cho mục tiêu
được nhận thức – chính mục tiêu mới là sai (khó dự
đoán sai trong thiết kế.
→ Có thể làm giảm đi những sai lầm bằng cách loại
bỏ sự mơ hồ trong thiết kế (kiểm thử tính tiện dùng).
18
Quản lý vấn đề - Phòng ngừa
▪ Vô hiệu hoá các lựa chọn không thể áp dụng được.

▪ Sử dụng lựa chọn thay thế cho các mục gõ nhập.
▪ Sử dụng mục nhập được bổ sung thêm.
▪ Chấp nhận lỗi chính tả thông thường
▪ Trước khi một hành động được thực hiện: Cho phép
nó được xem xét lại/Cho phép nó được thay đổi
hoặc làm lại.
▪ Cung cấp một cơ chế hành động thông dụng.
▪ Yêu cầu confirm hành động mang tính phá hủy. Cho
phép người sử dụng có kinh nghiệm vô hiệu hóa các
yêu cầu khẳng định ít quan trọng hơn.
▪ Cung cấp chức năng Save tự động và liên tục 19
Sử dụng hộp lựa chọn để hạn chế lỗi nhập liệu
20
Sử dụng hộp thông báo (message box) để hạn chế lỗi
21
Quản lý vấn đề - Phát hiện
▪ Dùng cho các hộp hội thoại, thẩm định tính hợp lệ các mục
nhập gần nhất với điểm mục nhập: Ở cấp độ ký tự/Ở cấp độ
điều khiển/Khi giao dịch hoàn thành hoặc cửa sổ đóng lại.
▪ Dùng cho mục nhập dữ liệu tốc độ cao, không gây chú ý
(head-down). Khi giao dịch được hoàn thành hoặc cửa sổ
được đóng lại.
▪ Để lại cửa sổ mở.
▪ Duy trì mục đang bị lỗi trên màn hình.
▪ Làm nổi bật bằng trực quan mục đang bị lỗi.
▪ Hiển thị thông báo lỗi trong 1 cửa sổ. Không làm mờ mục bị lỗi.
▪ Xử lý các lỗi càng nhẹ nhàng càng tốt. Lỗi càng lớn, cảnh báo
càng nên nghiêm trọng.
▪ Sử dụng các tín hiệu âm thanh ở mức độ vừa phải
22
Quản lý vấn đề - Phát hiện
Thông báo lỗi một cách rõ ràng.

Đưa ra gợi ý xử lý. Giữ nguyên
cửa sổ nơi phát sinh lỗi
23
Quản lý vấn đề - Sửa chữa
▪ Giữ được càng nhiều công việc của người sử dụng càng tốt.
▪ Khi thẩm định tính hợp lệ ở cấp độ cửa sổ, hãy sử dụng hộp
thoại không theo kiểu để hiển thị một danh sách lỗi. Làm nổi
bật lỗi đầu tiên trong danh sách/Đặt con trỏ tại điều khiển
đầu tiên có lỗi/Cho phép sửa chữa một lỗi và tiếp tục cho lỗi
tiếp theo.
▪ Luôn cung cấp cho người ta một cái gì đó để làm khi gặp lỗi.
Một cái gì đó để nhập/lưu lại/lùi lại/ Một nút Trợ giúp (Help
button)/ Ai đó để gọi.
▪ Cung cấp một thông báo sửa chữa có tính xây dựng nói
rằng:Vấn đề gì đã được phát hiện ra/Những chi tiết nào có
lỗi/Hành động khắc phục nào là cần thiết.
▪ Tiến hành một hộp thoại làm rõ nếu cần thiết.
24
Quản lý vấn đề - Sửa chữa
Cung cấp một thông báo có tính xây dựng…
25
Cung cấp hướng dẫn và hỗ trợ
▪ Người dùng mới phải trải qua một quá trình học tập
liên quan đến việc phát triển một mô hình khái niệm
hoặc tuy duy để giải thích hành vi của hệ thống và
nhiệm vụ đang được thực hiện.
▪ Mặc dù ta mong muốn rằng giao diện người-máy tự
nó đã rõ ràng và thông minh để mọi người không bao
giờ gặp khó khăn khi sử dụng, nhưng mục tiêu này
sẽ không thể đạt được trong tương lai gần.
→ nên đặt trọng tâm vào việc xây dựng nội dung
hướng dẫn và hỗ trợ tốt, quản lý các rắc rối có thể xảy
ra.
26
Cung cấp hướng dẫn và hỗ trợ
▪ Một khảo sát cho thấy tài liệu hướng dẫn và hỗ trợ là yếu
tố quan trọng thứ hai ảnh hưởng đến quyết định mua một
cái gì đó (chất lượng là quan .trọng nhất).
▪ Thông tin hướng dẫn hoặc hỗ trợ được đặt trong phần
nội dung của màn hình.
▪ Nó có thể ở dạng tin nhắn hoặc lời khuyên khác, chẳng
hạn như các giá trị được nhập vào một trường.
27
Cung cấp hướng dẫn và hỗ trợ (tiếp)
▪ Hướng dẫn có thể mô tả trong

- Dạng bản in ra giấy của hệ thống
- Tài liệu trực tuyến
- Đào tạo dựa trên máy tính,thông báo hướng dẫn hoặc
nhắc nhở
- Thông báo hệ thống,
▪ Hướng dẫn hữu ích và hỗ trợ trả lời các câu hỏi sau:
- Cái này là cái gì?
- Nó làm gì?
- Làm thế nào để cho nó làm điều đó?
- Vai trò của nó trong tổng thể chương trình là gì?
Các vấn đề với tài liệu
Có 4 yếu tố khác góp phần vào việc tài liệu hướng dẫn
chưa tốt.
▪ Các nhân tố có tính tổ chức: Người viết tài liệu là người
làm kỹ thuật → quan tâm đến các khía cạnh kỹ thuật…
▪ Quy mô thời gian → thời gian dành cho viết tài liệu ko
đủ…
▪ Cơ sở hợp lý về mặt lý thuyết →không có cơ sở nào để
biết nên đưa cái gì vào, cái gì không.
▪ Các nguồn lực → cần thiết để đưa những người có kỹ
năng khác nhau vào trong quá trình xây dựng tài liệu. Buộc
phải có những người giỏi về thiết kế trực quan, viết, kiểm
thử và đánh giá. Hiếm khi một người có thể có nhiều
những kỹ năng này
29
Người sử dụng tương tác với tài liệu
như thế nào?
Người đọc tương tác với tào liệu qua 3 giai đoạn rõ ràng:
Tìm kiếm thông tin có liên quan
Hiểu những gì được viết trong tài liệu
Áp dụng sự hiểu biết đó với tác vụ hiện tại để

giải quyết vấn đề
30
Các hướng dẫn và hỗ trợ
Các chỉ
dẫn hoặc
lời nhắc
Các gợi ý Phương
hoặc lời tiện trợ
mách giúp
Trợ giúp
định
hướng
theo tác vụ
Trợ giúp
Các thuật
theo ngữ
sĩ (wizad)
cảnh
Trợ giúp
tham
khảo
31
Các chỉ dẫn hoặc lời nhắc
▪ Chỉ dẫn được đặt trong phần thân của màn hình
▪ Nhắc nhở được cung cấp để hỗ trợ một người cung
cấp những gì cần thiết để hoàn thành màn hình (hữu
ích với người thiếu kinh nghiệm và cần học hệ
thống).
→ Để phù hợp với nhiều trình độ kinh nghiệm khác

nhau, các lời chỉ dẫn/lời nhắc nên có thể lựa chọn
được, có khả năng bật hoặc tắt khi cần thiết. 32
Phương tiện trợ giúp (Help)
❖ Hình thức phổ biến nhất của tài liệu trực tuyến là hệ
thống Trợ giúp (Help system).
❖ Mục tiêu tổng thể của help là giúp người ta nhớ phải
làm gì.
❖ Lợi ích của help nâng cao tính tiện dùng của hệ
thống, cung cấp sự bảo hiểm đề phòng các lỗ hổng
thiết kế có thể xảy ra, và thích ứng với những khác
biệt có thể có giữa những người sử dụng (người mới
sử dụng với người có kinh nghiệm).
❖ Các phương pháp điển hình gọi help:
▪ Gõ lệnh
▪ Nhấn phím hoặc ấn nút Help
▪ Chọn Help trên thanh menu đa mục
▪ Help cũng có thể xuất hiện tự động 33
Các chỉ dẫn thiết kế help:

▪ Loại (thu thập dữ liệu để xác định loại Help cần thiết)
▪ Đào tạo (thông báo mục đích của help, tình trạng sẵn có)
▪ Tình trạng sẵn có
▪ Cấu trúc
▪ Tương tác
▪ Vị trí (giảm thiểu che khuất nội dung màn hình)
▪ Nội dung
▪ Phong cách
▪ Nhất quán
▪ Đầu đề (đặt từ help cho tất cả các đầu đề của màn hình help)
34
35
Trợ giúp theo ngữ cảnh
▪ Trợ giúp theo ngữ cảnh cung cấp thông tin trong ngữ
cảnh của một tác vụ đang được thực hiện hoặc tác
vụ đang được thao tác.
▪ Các loại thường gặp của Help theo ngữ cảnh:
- Nút lệnh của Help
- Các thông báo trên thanh trạng thái
- Chú giả công cụ (Tooltip)
- Lệnh “What’s this”
36
Nút lệnh của Help

▪ Mô tả:
- Một nút lệnh.
▪ Mục đích:
- Cung cấp tổng quan, hỗ trợ tóm tắt hoặc thông tin giải
thích về mục đích hoặc nội dung của một cửa sổ đang
được hiển thị.
▪ Hướng dẫn thiết kế:
- Trình bày Trợ giúp trong cửa sổ phụ hoặc hộp thoại
37
Các thông báo trên thanh trạng thái

▪ Mô tả:
- Thông báo viết ngắn gọn, phù hợp với ngữ cảnh, liên
quan đến mục màn hình đang là trọng tâm.
- Xuất hiện trên thanh trạng thái của cửa sổ khi nhấn
nút chuột chính trên một mục (hoặc được thực hiện
bằng bàn phím).
▪ Mục đích:
- Cung cấp thông tin giải thích về đối tượng đang là
trọng tâm.
▪ Hướng dẫn thiết kế
- Mang tính cấu trúc, không đơn giản là mô tả
- Ngắn gọn, dễ hiểu
38
- Bắt đầu bằng động từ
Chú giải công cụ (tooltip)
▪ Mô tả:
– Một cửa sổ pop –up nhỏ xuất hiện liền kề cạnh điều
khiển.
– Hiện ra khi con trỏ đặt trên một điều khiển trong một
khoảng thời gian ngắn.
▪ Mục đích:
– Sử dụng để hiển thị tên của điều khiển khi điều khiển
không có nhãn văn bản.
▪ Hướng dẫn thiết kế:
– Làm cho các tooltips dành riêng cho ứng dụng nhất
quán với các tooltips do hệ thống cung cấp.
– Sử dụng cài đặt màu sắc hệ thống cho tooltips ở trên
để phân biệt chúng.
39
Lệnh “What’s this”

Mô tả:
- Một lệnh đặt trên menu help dạng drop - down trên cửa sổ
chính.
- Một nút trên thanh tiêu đề của cửa sổ thứ cấp.
- Một lệnh trên menu pop-up cho một đối tượng cụ thể.
- Một nút trên thanh công cụ
Mục đích:
- Sử dụng để cung cấp thông tin theo ngữ cảnh về bất kỳ đối
tượng màn hình nào.
Hướng dẫn thiết kế:
- Cụm từ để trả lời câu hỏi “What’s this?“
- Nêu hành động liên kết với mục.
- Bắt đầu mô tả bằng một động từ.
40
Trợ giúp định hướng theo tác vụ
▪ Mô tả.
- Trợ giúp định hướng theo tác vụ (Task-oriented Help), đôi
khi còn gọi là Trợ giúp thủ tục, được trình bày trên một
cửa sổ chính và được truy cập thông qua hộp thoại của
trình duyệt các chủ đề trợ giúp (Help Topics) trong
Microsoft Windows.
- Nó bao gồm một tập hợp các nút lệnh đặt ở trên cùng:
▪ Một nút để hiển thị hộp thoại trình duyệt Help Topics
▪ Một nút Back để quay lại chủ đề trước đó
▪ Các nút cung cấp quyền truy cập vào các chức năng
khác như Copy hoặc Print.
41
▪ Mục đích:
- Để mô tả các bước thủ tục nhằm thực hiện một tác
vụ
- Tập trung vào cách làm điều gì đó
▪ Các nguyên tắc chỉ dẫn thiết kế
- Cung cấp một thủ tục để hoàn thành một nhiệm vụ,
đơn giản nhất và phổ biến nhất.
- Cung cấp giải thích về các mục tiêu của nhiệm vụ và
cơ cấu tổ chức khi bắt đầu.
- Chia hướng dẫn thủ tục thành các bước nhỏ.
- Trình bày từng bước theo thứ tự thực hiện.
42
43
Trợ giúp tham khảo
▪ Mô tả:
- Một cuốn sách tham khảo trực tuyến.
- Thường được truy cập thông qua:
• Lệnh trong menu Help dạng drop – down
• Nút trên thanh công cụ.
▪ Mục đích:
- Để trình bày thông tin Trợ giúp tham khảo, hoặc định
hướng hướng dẫn người sử dụng
▪ Các nguyên tắc chỉ dẫn thiết kế:
- Cung cấp một phong cách trình bày nhất quán, tuân theo
tất cả các hướng dẫn đã trình bày trước đó.
- Bao gồm sự kết hợp của Trợ giúp theo ngữ cảnh và Trợ
giúp theo định hướng nhiệm vụ, nếu cần.
- Bao gồm các hiệu ứng văn bản, đồ họa, hoạt ảnh, video và
âm thanh
44
Trợ giúp tham khảo
45
Các thuật sĩ (Wizard)
▪ Mô tả:
- Một wizard là một tập hợp có cấu trúc các màn hình
làm nhiệm vụ hướng dẫn người sử dụng thông qua
việc ra quyết định hoặc quá trình nhập dữ liệu.
- Wizard được hiển thị trong một cửa sổ thứ cấp. Màn
hình bao gồm các điều khiển để thu thập đầu vào, và
các nút lệnh điều hướng được đặt ở dưới cùng trang
(Back, Next, Finish, và Cancel).
- Wizard thường được truy cập thông qua các nút trên
thanh công cụ hoặc các biểu tượng.
46
▪ Mục đích:
- Để thực hiện một loạt các bước phức tạp.
- Để thực hiện một nhiệm vụ đòi hỏi phải đưa ra một
số quyết định quan trọng.
- Để nhập dữ liệu quan trọng và sử dụng khi chi phí
sai sót cao.
- Để thực hiện một nhiệm vụ không thường xuyên
được hoàn thành.
▪ Các chỉ dẫn thiết kế:
- Cung cấp số lượng lớn màn hình đơn giản, cùng
kích thước với ít lựa chọn
47
▪ Các chỉ dẫn thiết kế (tiếp)

- Đưa vào trang đầu tiên: Hình minh họa chủ đề bên
trái và một đoạn giải thích những gì thuật sĩ thực
hiện bên phải
- Đưa vào trang tiếp theo: văn bản hướng dẫn, các
điều khiển làm đầu vào cho người dùng
- Duy trì sự nhất quán trong thiết kế
- Không yêu cầu người sử dụng rời khỏi thuật sĩ để
hoàn thành một tác vụ khác
- Đưa nút Finish (kết thúc) ở điểm tác vụ có thể hoàn
thành
48
49
50
Các gợi ý hoặc lời mách nước
▪ Mô tả.
- Gợi ý (hint) hoặc Lời mách nước (tip) là một nút lệnh
được đặt trên một màn hình và ghi tên nhãn như vậy.
▪ Mục đích.
- Để cung cấp một số mục thông tin quan trọng theo ngữ
cảnh, nhưng cụ thể, liên quan đến màn hình đang hiển
thị.
▪ Các nguyên tắc chỉ dẫn thiết kế.
- Cung cấp hướng dẫn chỉ có hai hoặc ba điểm quan
trọng, đặt nút gần với vị trí mà sự hướng dẫn sẽ áp dụng,
viết ngắn gọn và đi vào trọng điểm
51
Các gợi ý hoặc lời mách nước
52
Tổng kết bài
▪ Các chủ đề thông tin phản hồi
▪ Xem xét về hướng dẫn và hỗ trợ (ngăn chặn

các lỗi, quản lý vấn đề và cung cấp các loại
hướng dẫn, hỗ trợ)
53
CUNG CẤP SỰ QUỐC TẾ HÓA VÀ
TÍNH NĂNG TRUY CẬP HIỆU QUẢ
(BƯỚC 10)

1
Đặt vấn đề
▪ Một hệ thống cũng phải được thiết kế để có thể sử

dụng không giới hạn phạm vi người sử dụng, có thể
truy cập bởi bất kỳ ai muốn sử dụng nó.
▪ Các khái niệm thiết kế được sử dụng để đạt được
những các mục tiêu được gọi là quốc tế hóa và khả
năng tiếp cận
2
Nội dung
▪ Những cân nhắc xem xét về mặt quốc tế hóa

▪ Địa phương hóa
▪ Cân nhắc về văn hóa liên quan đến từ ngữ, ký
hiệu, hình ảnh, màu sắc...
▪ Tính năng truy cập
3
Đặt vấn đề
▪ Một hệ thống cũng phải được thiết kế để có thể sử

dụng không giới hạn phạm vi người sử dụng, có thể
truy cập bởi bất kỳ ai muốn sử dụng nó.
▪ Các khái niệm thiết kế được sử dụng để đạt được
những các mục tiêu được gọi là quốc tế hóa và khả
năng tiếp cận
4
Những cân nhắc xem xét về mặt quốc tế hóa
▪ Quốc tế hóa là quá trình tác các thành phần đặc

trưng của văn hóa ra khỏi một sản phẩm
▪ Đại phương hóa là quá trình chuyển một ngữ cảnh

văn hóa đặc trưng vào một sản phẩm đã được quốc
tế hóa trước đó
5
Địa phương hóa
▪ Khi nào thì làm:

▪ Khi người dùng có ít / không có tiếng Anh
▪ Khi luật pháp / tập quán yêu cầu dịch thuật
▪ Khi cần thị trường rộng nhất có thể
▪ Khi nào không nên:
▪ Khi thị trường có thể nói tiếng Anh
▪ Khi chi phí trang bị thêm hoặc viết lại phần mềm
là rất cao
6
Những cân nhắc khi xem xét văn hóa
▪ Khoảng cách quyền lực

▪ Chủ nghĩa cá nhân và chủ nghĩa tập thể
▪ Tính vị nam (so với tính vị nữ)
▪ Tránh sự rủi ro
▪ Định hướng dài hạn (so với ngắn hạn)
7
Quốc tế hóa – Các từ ngữ và văn bản
Sử dụng tiếng Anh đơn giản

▪ Phát triển vốn từ vựng hạn chế
▪ Chỉ sử dụng các cấu trúc: danh từ-động từ-tân ngữ
Tránh xa:
▪ Từ viết tắt và chữ viết tắt
▪ Cụm từ lóng hoặc khó hiểu
▪ Ghép chuỗi ba danh từ cùng nhau
▪ Biệt ngữ địa phương và thuật ngữ máy tính
▪ Phong cách viết điện báo
▪ Phong cách viết quá thân thiện
▪ Những ví dụ cụ thể về văn hóa
▪ Những ám chỉ, dẫn chiếu về quốc gia, sắc tộc, tôn giáo
và những khuôn mấu định kiến về giới tính
8
▪ Tuân thủ thành ngữ ngôn ngữ người dùng địa phương
và ngữ cảnh văn hóa.
▪ Giữ nguyên từ gốc cho những từ không thể dịch được.
▪ Cho phép thêm không gian màn hình cho bản việc dịch.
- Theo chiều dọc - Theo chiều ngang
▪ Khi dịch sang các ngôn ngữ khác, trước tiên hãy làm:
- Châu Âu: Tiếng Đức. - Trung Đông: tiếng Ả Rập.
- Viễn Đông: Nhật Bản.
▪ Đặt các chú thích của biểu tượng bên ngoài hình ảnh.
▪ Thay đổi kỹ năng ghi nhớ để truy cập bàn phím.
▪ Tuân thủ tuyệt đối các định dạng cho ngày, giờ, tiền, số
đo, địa chỉ và số điện thoại địa phương. 9
10
11
Quốc tế hóa – Hình ảnh và ký hiệu
▪ Tôn trọng các chuẩn mực văn hóa và xã hội của địa
phương.
▪ Sử dụng các ký hiệu được quốc tế chấp nhận.
▪ Phát triển hình ảnh khái quát
▪ Đặc biệt cẩn trọng với:
▪ Biểu tượng tôn giáo (hình thập tự và ngôi sao).
▪ Cơ thể con người.
▪ Phụ nữ.
▪ Cử chỉ bàn tay.
▪ Cờ.
▪ Bản đồ địa lý gây tranh cãi
▪ Dấu gạch chéo và dấu tích cho các hộp kiểm tra
▪ Xem xét các hình ảnh đồ họa được đề xuất sớm
trong chu trình thiết kế.
12
Quốc tế hóa – Hình ảnh và ký hiệu
13
Quốc tế hóa – Màu sắc, trình tự, chức năng
▪ Tuân thủ các ý nghĩa và quy ước về màu sắc địa

phương.
▪ Cung cấp trình tự thông tin hợp lý hơn.
▪ Cung cấp chức năng hợp lý hơn.
▪ Loại bỏ tất cả các tham chiếu đến các tính năng
không được hỗ trợ.
14
Tính năng truy cập
▪ Định nghĩa: là một hệ thống

phải được thiết kế để có thể
sử dụng được bởi hầu hết mọi
người, về cơ bản là bất kỳ ai
muốn sử dụng nó.
▪ Mục tiêu: Giảm thiểu tất cả các
rào cản gây khó khăn hoặc
không thể sử dụng hệ thống
15
Thiết kế có tính năng truy cập
▪ Xem xét các vấn đề về khả năng truy cập trong quá
trình lập kế hoạch, thiết kế và thử nghiệm hệ thống
▪ Cung cấp khả năng tương thích với các tiện ích trợ
năng đã cài đặt
▪ Cung cấp giao diện có thể tùy biến
▪ Tuân theo các quy ước của Windows tiêu chuẩn
▪ Sử dụng các điều khiển Windows tiêu chuẩn
▪ Đảm bảo biểu mẫu đơn giản trực tuyến có thể được
hoàn thiện dễ dàng
16
▪ Trên toàn thế giới, một số lượng đáng kể người bị

khuyết tật ở dạng này hay dạng khác
▪ Khuyết tật có thể là tạm thời hoặc vĩnh viễn, hoặc
đơn giản là kết quả của quá trình lão hóa.
▪ Khuyết tật có thể được nhóm thành nhiều loại lớn: thị
giác, thính giác, chuyển động tự nhiên, suy giảm khả
năng nói hoặc ngôn ngữ, rối loạn nhận thức và rối
loạn co giật.
→ Khi thiết kế giao diện cần lưu ý đến các khả năng
tương thích và tùy biến với người sử dụng
17
18
Thiết kế tính năng truy cập web
Các trang
▪ Cung cấp một bố cục đơn giản và nhất quán
▪ Đặt thông tin quan trọng ở đầu trang
▪ Cung cấp hình nền đơn giản tương phản tốt với văn bản
▪ Cung cấp liên kết “Skip to main content” (nhảy về nội
dung chính) ở đầu mỗi trang
▪ Cấu trúc các bài viết có hai hoặc ba cấp độ tiêu đề
▪ Kết thúc các câu, tiêu đề và các mục danh sách bằng dấu
chấm câu
▪ Cung cấp các đầu đề khung
▪ Cung cấp kích thước và kiểu phông chữ có thể điều chỉnh
bởi người dùng, màu sắc, thuộc tính đồ họa và âm lượng
▪ Tránh nhấp nháy hoặc liên tục thay đổi các yếu tố
19
▪ Các điều khiển

- Cung cấp các nút lớn
▪ Các liên kết
- Cung cấp các tiêu đề mô tả mục đầy đủ
- Tách biệt các liên kết liền nhau bằng một ký tự dấu
cách
▪ Các bảng khung và cột
- Không lạm dụng
- Cung cấp các cách thay thế để truy cập các mục
chứa trong các bảng
20
▪ Các hình ảnh

- Cung cấp các chữ liên quan
▪ Âm thanh- Chứa một hoặc nhiều nội dung sau đây:
- Một chú giải hoặc cửa sổ văn bản pop –up
- Một bản sao lại nội dung bằng chữ
- Mô tả bằng văn bản
- Đối với các mô tả hoặc bản sao nội dung dài dòng, hãy cung cấp
một liên kết đến một trang riêng biệt.
▪ Video: Chứa một hoặc nhiều nội dung sau đây ở cả dạng chữ
và dạng âm thanh:
- Một bản sao nội dung (transcript)
- Một bản mô tả (description)
- Đối với các mô tả hoặc bản sao nội dung dài dòng, hãy cung cấp
một liên kết đến một trang riêng biệt.
21
▪ Các bản đồ hình ảnh

- Cung cấp các menu bằng chữ tương đương
▪ Hình động:
Cung cấp một tùy chọn để hiện thị ở chế độ trình bày
không động
22
23
Tổng kết bài
Các chỉ dẫn thiết kế giao diện khi xem xét đến:
▪ Tính quốc tế hóa và
▪ Tính năng truy cập hiệu quả
24
KIẾN TẠO ĐỒ HỌA, BIỂU TƯỢNG
VÀ HÌNH ẢNH CÓ Ý NGHĨA
(BƯỚC 11)

1
Đặt vấn đề
▪ Đồ họa xuất hiện trên màn hình ở nhiều dạng. Chúng

có thể là hình ảnh, biểu tượng, mục điều hướng, bản
đồ và biểu trưng,….
▪ Đồ họa màn hình, nếu được sử dụng hợp lý, có thể
là:
▪ Một kỹ thuật giao tiếp và thu hút sự chú ý mạnh
với người sử dụng
▪ Giữ được sự chú ý và quan tâm của người sử
dụng;
▪ Hỗ trợ tương tác với máy tính;
▪ Giúp vượt qua những rào cản ngôn ngữ.
▪ Thúc đẩy khả năng học và nhớ.
2
Nội dung
▪ Các biểu tượng.

▪ Đa phương tiện (multimedia)
▪ Các hình đồ hoạ
3
Đặt vấn đề
▪ Tuy nhiên việc sử dụng đồ họa không hợp lý có thể:

▪ Gây nhầm lẫn cho người sử dụng,
▪ Dẫn tới việc thiếu khả năng điều hướng và bị
phân tán.
→ Đồ họa màn hình phải luôn luôn phục vụ một mục
đích hữu dụng
4
Biểu tượng
▪ Các biểu tượng (icons) là những hình vẽ tượng trưng

thường được dùng để biểu diễn các đối tượng và
hành động mà người sử dụng có thể tương tác hoặc
thao tác với chúng. Các biểu tượng có thể đứng riêng lẻ
trên màn hình (desktop) hoặc trong một cửa sổ, hoặc
được nhóm vào cùng nhau trong một thanh công cụ.
▪ Công dụng thứ hai của biểu tượng là để nhấn mạnh
những thông tin quan trọng.
Ví dụ: biểu tượng cảnh báo trong một hộp thông báo
hội thoại (dialog message box).
5
Các loại biểu tượng
Marcus (1984) cho rằng các biểu tượng rơi vào các loại
sau:
▪ Biểu tượng (icon): Những thứ trông tương tự với
hàm ý nó mang.
▪ Chỉ dẫn (index): Một dấu hiệu bị gây ra bởi thứ mà
chỉ dẫn sẽ dẫn chiếu tới.
▪ Ký hiệu (symbol): Một dấu hiệu có thể hoàn toàn tuỳ
ý theo hình dáng
Một biểu tượng thực sự là một cái gì đó giống như ý
nghĩa của nó. Nó mang tính đại diện và dễ hiểu.
6
7
Rogers (1989) cung cấp một định nghĩa mở rộng cho

các loại biểu tượng.
▪ Tương đồng (resemblance) – Một hình ảnh trông
giống hàm ý nó mang.
▪ Tượng trưng (symbolic)– Một hình ảnh trừu tượng
thể hiện một sự vật, hiện tượng.
▪ Mẫu (exemplar) – Một hình ảnh minh họa vật mẫu
hoặc đặc tính của một sự vật hiện tượng.
▪ Tùy ý (arbitrary) – Một hình ảnh hoàn toàn tùy ý theo
hình dạng của nó mà ý nghĩa của nó cần phải được
học.
▪ Tương tự (analogy) – Một hình ảnh liên quan về mặt
vật lý hoặc ngữ nghĩa với sự vật hiện tượng
8
Tương đồng Tượng trưng

Mẫu
Tùy ý Tương tự
9
Các đặc tính của biểu tượng
Một biểu tượng có những đặc tính kỹ thuật về cú pháp,

ngữ nghĩa và tính thực tế.
▪ Cú pháp (Syntactic) chỉ cấu trúc vật lý của biểu
tượng. Nó có hình vuông, hay tròn, đỏ hay xanh, to hay nhỏ?
Những đặc tính tương tự và khác biệt có rõ ràng không?
▪ Ngữ nghĩa (Semantic) là ý nghĩa của biểu tượng. Nó

chỉ đến cái gì? Nó có rõ ràng không?
▪ Tính thực tế (Pragmatic) là cách các biểu tượng

được tạo ra và được mô tả. Độ phân giải màn hình có đủ
để minh họa biểu tượng một cách rõ ràng hay không.
→ Cú pháp, ngữ nghĩa và tính thực tế xác định sự hiệu

quả và tính tiện dùng của biểu tượng
10
Xem xét tính tiện dùng của biểu tượng
▪ Cung cấp một biểu tượng trên màn hình sẽ không

mang lại lợi ích cụ thể nào, trừ khi nó được thiết kế
cẩn thận để trình bày một cách tự nhiên và có ý
nghĩa.
▪ Các biểu tượng được đưa vào vì “đây là việc cần
làm” trong hệ thống đồ họa.
→ thiết kế biểu tượng hợp lý có vai trò rất quan trọng
cho sự chấp nhận, thiếp thu và viễn cảnh về năng suất
thực hiện.
11
Các nhân tố ảnh hưởng tới tính tiện dùng của biểu
tượng:
▪ Quen thuộc.
▪ Sáng sủa và rõ ràng.
▪ Đơn giản.
▪ Nhất quán.
▪ Trực tiếp.
▪ Hiệu quả.
▪ Dễ phân biệt.
▪ Ngữ cảnh trong đó biểu tượng được sử dụng.
▪ Sự mong đợi của người sử dụng.
▪ Tính phức tạp của tác vụ
12
13
Tính quen thuộc

▪ Tính quen thuộc sẽ làm giảm thời gian tiếp thu.
▪ Việc thiếu tính quen thuộc sẽ đòi hỏi phải học về ý
nghĩa của biểu tượng.
▪ Những biểu tượng quá lạ sẽ đòi hỏi phải học nhiều hơn
14
Tính rõ ràng
▪ Hình dạng, cấu trúc và kỹ thuật hình thành trên màn
hình có cho phép hiển thị rõ ràng và dễ hiểu không?
▪ Các biểu tượng phải xuất hiện chính xác và nhất
quán bất kể loại màn hình nào được sử dụng.
▪ Nếu màu được sử dụng, nó phải tương phản tốt với
nền.
▪ Độ rõ nét kém sẽ dẫn đến lỗi nhận dạng và hiệu suất
chậm hơn.
15
Tính đơn giản

▪ Biểu tượng có đơn giản không?
▪ Hình dạng của nó có rõ ràng và tránh khỏi những
yếu tố rườm rà không cần thiết không?
▪ Quá nhiều bộ phận chỉ làm người sử dụng lúng túng
16
Tính nhất quán
▪ Các biểu tượng cùng họ có nhất quán về hình dạng
và cấu trúc không?
▪ Các biểu tượng giống nhau có được biểu hiện nhất
quán về hình dạng và cấu trúc trên những màn hình
khác nhau không?
▪ Các biểu tượng giống nhau được thể hiện ở các kích
cỡ khác nhau có nhất quán về cấu trúc và hình dạng
hay không?
17
Tính trực tiếp.

▪ Nó truyền đạt ý nghĩa muốn truyền tải ra sao?
▪ Các biểu tượng có dễ dàng truyền đạt các khái niệm
như lớn hơn, nhỏ hơn, rộng hơn hoặc hẹp hơn
không?
Hiệu quả.
▪ Trong một số tình huống, màn hình đồ họa có thể
kém hiệu quả hơn, tiêu tốn nhiều không gian hiển thị
trên màn hình hơn là một từ
▪ Trong các tình huống khác, các biểu tượng có thể
hiệu quả hơn các từ trong việc truyền đạt các khái
niệm trong một diện tích không gian nhỏ hơn.
18
Ngữ cảnh của một ký hiệu có thể làm thay đổi

ý nghĩa của nó.
Liệu ký hiệu hình con thỏ trong hình

Hình con thỏ được đặt trong công viên
thì có được hiểu là đi nhanh được
không?
→ Từ quan điểm về ngữ cảnh, các biểu tượng sẽ tương tự với

các từ ngữ.
.
19
Sự mong đợi
Sự mong đợi là cái người dử dụng được làm chứ không
phải cái họ cấm “không được làm”.
Một nghiên cứu về biển giao thông quốc tế chỉra rằng 8% các tài
xế không bao giờ thấy được dấu gạch chéo“không được làm” qua
một ký hiệu trên một tấm biển đường
20
Mức độ phức tạp của tác vụ

▪ Ký hiệu càng trừu tượng và khó hiểu thì nó càng khó
để rút ra hoặc diễn giải được ý nghĩa đã định sẵn.
▪ Các thông báo bằng đồ họa càng cụ thể thì sẽ dễ
hiểu hơn so với những ký hiệu trừu tượng. Vì thế các
biểu tượng không thể thay thế hoàn toàn các từ ngữ
trong những trường hợp phức tạp hơn.
21
Lựa chọn các biểu tượng
Biểu tượng thành công khi:

▪ Trông khác biệt so với tất cả các biểu tượng khác
▪ Phải thể hiện rõ ràng cái mà nó thực hiện hoặc đại
diện cho.
▪ Có khả năng nhận ra được ngay cả khi ở kích thước
nhỏ hơn 16 pixel vuông.
▪ Nhìn hợp lý cả ở dạng trắng đen cũng như dạng có
màu sắc.
22
23
▪ Kích thước.
Thông thường, các biểu tượng có ba loại kích thước
tiêu chuẩn: 16, 32 và 48 pixel vuông. Để rõ ràng,16x16
nên là kích thước tối thiểu của một biểu tượng. Sự kết
hợp hiệu quả cho một hình ảnh là một biểu tượng
24x24 hoặc 26x26 với diện tích 32 pixel vuông.
▪ Màu sắc.
Nếu 256 màu sắc được sử dụng cho các biểu tượng,
người ta cho rằng nên luôn luôn cung cấp định dạng 16
màu tiêu chuẩn. Sử dụng các màu sắc từ bảng màu hệ
thống nhằm đảm bảo các biểu tượng nhìn chính xác
trong tất cả các cấu hình màu.
24
▪ Lựa chọn biểu tượng.

Để lựa chọn dễ dàng nên sử dụngcác kích thước biểu
tượng tối thiểu như sau: với một bút trỏ hoặc bút bi: 15
pixel vuông; với chuột: 20 pixel vuông; với ngón tay
người: 40 pixel vuông.
▪ Vùng nóng (hot zone).
Một vùng nóng của biểu tượng, vùng mà trong đó cho
phép biểu tượng được lựa chọn, nên rộng hết mức như
có thể, tốt nhất là chiếm toàn bộ kích thước biểu tượng.
Điều này cho phép việc lựa chọn dễ dàng hơn.
25
Chọn hình ảnh cho biểu tượng
Tuân thủ nguyên tắc:

▪ Sử dụng những biểu tượng hiện có khi sẵn dùng.
▪ Sử dụng các hình ảnh dùng cho danh từ, không phải
cho động từ.
▪ Sử dụng hình ảnh truyền thống.
▪ Cân nhắc tới những quy chuẩn văn hoá và xã hội
của người sử dụng
26
Quá trình thiết kế biểu tượng
▪ Xác định mục đích và công dụng của biểu tượng.

▪ Thu thập, đánh giá, và phác thảo các ý tưởng.
▪ Vẽ đen trắng.
▪ Vẽ ra bằng cách sử dụng tiện ích chỉnh sửa biểu
tượng hoặc một gói phần mềm vẽ.
▪ Kiểm thử với người sử dụng về: Sự trông đợi/Sự
nhận thức/Sự tiếp thu.
▪ Kiểm thử tính rõ ràng.
▪ Đăng ký các biểu tượng mới trong bảng đăng ký của
hệ thống
27
Thiết kế biểu tượng (icon)
Một Icon thường bao gồm các phần tử sau:

Đường viền, nền, ảnh và nhãn
28
Một số lưu ý khi thiết kế icons
1. Giúp người sử dụng nhận dạng và nhớ lại.

2. Chọn lựa ẩn dụ (metaphor) tốt, quen thuộc với
3. Chọn đối tượng cụ thể mỗi khi có thể, các khái niệm
và hành động trừu tượng là khó hiển thị.
4. Sử dụng tiết kiệm màu. Sử dụng màu vô cớ gây ra
quá tải đối với người sử dụng. Nên sử dụng gam
màu xám (grey) và thêm 1, 2 màu. Trước hết sử
dụng màu đen, trắng, sau đó bổ sung màu nếu cần.
29
Đa phương tiện (Multimedia)
▪ Tính linh hoạt đồ họa của Web cho phép đưa vào cả
những phương tiện khác vào màn hình, bao gồm các
hình ảnh, ảnh chụp, video, biểu đồ, hình vẽ và âm
thanh giọng nói.
▪ Tuy nhiên khả năng dùng những thành phần giao
diện bổ sung này là con dao hai lưỡi. Một mặt, các
phương tiện khác nhau có thể là những kỹ thuật giao
tiếp và thu hút chú ý rất mạnh.
▪ Đa phương tiện có thể nắm giữ được sự chú ý của
người sử dụng, bổ sung thêm mối quan tâm đến
màn hình, giải trí và truyền đạt thông tin nhanh chóng
hơn so với chỉ thực hiện bằng chữ.
30
Đa phương tiện (Multimedia)
▪ Nó cũng có thể khiến cho Web có khả năng truy cập

cao hơn cho những người khuyết tật.
▪ Các nghiên cứu gần đây đã chỉ ra những Website khó
dùng nhất là Website lạm dụng quá nhiều đồ họa và
những Website hang đầu được đặc trưng bởi dùng ít
hoặc không có đa phương tiện.
▪ Các nghiên cứu cũng phát hiện ra rằng với nhiều người
sử dụng, chữ là bộ phận quan trọng hơn nhiều của
Website so với các hình đồ họa.
→ Thiết kế giao diện hợp lý ngày nay nên sử dụng đa
phương tiện một cách thận trọng và thích hợp. Mục tiêu là
thiết kế tương tác hợp lý, chứ không phải là “loè loẹt.”
31
Các hình đồ họa
Sử dụng các hình đồ họa để:
▪ Bổ sung nội dung bằng chữ chứ không phải để thay thế
chữ.
▪ Truyền tải thông tin không thể đạt được hiệu quả bằng cách
chỉ sử dụng văn bản.
▪ Nâng cao điều hướng: Thể hiện sự tổng quan về site; Nhận
dạng các trang của site; Nhận dạng các vùng nội dung.
▪ Hạn chế việc sử dụng các hình đồ họa đòi hỏi nhiều thời
gian để nạp tải.
▪ Kết hợp đồ họa với tất cả những thành phần khác của
trang.
▪ Các hình đồ họa không nên trông như các thành phần trang
trí vô lý hoặc các quảng cáo tựa đề lớn (banner ads).
32
Các hình ảnh đồ họa được sử dụng với nhiều mục đích
khác nhau:
▪ Điều hướng: Để xác định các liên kết có thể được
theo sau
▪ Tính đại diện: Để minh họa các mục được đề cập
trong văn bản
▪ Tính tổ chức: Để mô tả các mục được đề cập trong
văn bản
▪ Giải thích: Để thấy mọi thứ hoặc quy trình hoạt động
▪ Trang trí: Để mang lại sự hấp dẫn và nhấn mạnh về
mặt trực quan
33
▪ Các hình ảnh: nên truyền tải thông điệp dự định của họ
▪ Các bản đồ hình ảnh: để cung cấp các liên kết điều hướng
đến nội dung khác
▪ Ảnh chụp/ Tranh vẽ: được sử dụng khi mọi khía cạnh của
hình ảnh là có liên quan
▪ Video: để hiển thị mọi thứ chuyển động / thay đổi theo thời
gian
▪ Các sơ đồ: để hiển thị cấu trúc / mối quan hệ của các đối
tượng
▪ Các hình vẽ: khi các bộ phận được chọn cần được nhấn
mạnh /đại diện
▪ Hình động: để giải thích các ý tưởng liên quan đến sự thay
đổi về thời gian / vị trí
▪ Âm thanh: như một phần bổ sung cho văn bản và đồ họa
34
Các hình ảnh
▪ Hình ảnh phải truyền tải các thông điệp đã dự

định: Người sử dụng có xu hướng chọn những hình
ảnh quen thuộc nhất trong khi nhà thiết kế lại thích
những hình ảnh có tính mỹ thuật hơn.
▪ Hãy sử dụng hình ảnh tiêu chuẩn: Điều này sẽ
nâng cao tính nhất quán xuyên suốt hệ thống, có
được tất cả các lợi thế thực thi do sự nhất quán cung
cấp.
▪ Sử dụng hình ảnh trông giống các đối tượng của
thế giới thực.
▪ Tính nhất quán: Sử dụng nhất quán một hình ảnh
xuyên suốt một ứng dụng hay một Website.
35
Các hình ảnh
Tính rõ ràng: Tạo ra những hình ảnh rõ ràng để có thể

nhận dạng dễ dàng từ nhiều khoảng cách và góc nhìn khác
nhau.
Sử dụng văn bản hoặc tên nhãn mô tả: thay cho hình ảnh
khi cần thiết
Các hình ảnh điều hướng và trang trí: Hãy chỉ ra một cách
rõ ràng những hình ảnh nào trên màn hình được sử dụng
cho mục đích điều hướng bằng cách cung cấp chỉ báo bằng
trực quan rằng hình ảnh đó có thể tương tác hoặc có thể
click được.
Tối thiểu số lượng hình ảnh: Càng nhiều hình ảnh thể
hiện trên trang Web, thời gian tải càng chậm hơn (hãy sử
dụng văn bản, chỉ dùng ảnh khi chúng tạo thêm giá trị và làm
tăng sự rõ ràng cho thông tin của Website)
36
Các hình ảnh
▪ Tối thiểu kích thước của các hình ảnh:

▪ Các hình ảnh đơn lẻ < 5KB,
▪ Các hình ảnh toàn trang <=20KB.
▪ Một file cỡ 200KB có thể cần nhiều phút để tải.
▪ Không nên thêm các đường bao xung quanh một hình
ảnh vì chúng cũng làm tăng kích cỡ file.
▪ Nên có kích thước ảnh thu nhỏ (thumbnail size).
▪ Tối thiểu hoá hình động.
▪ Hình ảnh không liên quan hoặc không có lý do:
Các hình ảnh cần nhiều thời gian tải hơn văn bản, và
những người sử dụng Web thích văn bản hơn
37
Các hình ảnh
▪ Giảm thiểu số lượng màu sắc để giảm kích thước

của các file ảnh.
▪ Định dạng phù hợp: Tạo ra các hình ảnh với định
dạng thích hợp nhất, định dạng GIF hoặc JPEG.
▪ Quốc tế hoá: Khi thiết kế cho nhiều người sử dụng
mang tính quốc tế hoặc nói nhiều ngôn ngữ khác
nhau, việc sử dụng các hình ảnh có thể rút bớt sự
cần thiết phải dịch ngôn từ.
▪ Giới hạn nằm phía trên phần nếp gấp của trang:
Không lấp đầy cả màn hình với một hình ảnh khi một
trang được thể hiện lần đầu
38
Các hình ảnh
▪ Các hình ảnh dùng làm background:

▪ Hãy ít sử dụng những hình ảnh làm background
(làm chậm thời gian tải xuống ra/gây khó đọc).
▪ Hãy cung cấp những hình ảnh nhỏ, đơn giản trải
đều, và/hoặc giữ cho hình ảnh có độ phân giải
thấp.
▪ Tái sử dụng hình ảnh: Lặp lại các hình ảnh giống
nhau trên nhiều trang. Các hình lặp lại sẽ được lưu
trong một bộ nhớ truy cập nhanh (cache). Tải một
hình ảnh từ cache sẽ giảm đáng kể thời gian tải hình
ảnh
39
Video
Các công dụng:

▪ Video đặc biệt phù hợp để trình diễn những sự vật
đang chuyển động hoặc thay đổi theo thời gian.
▪ Tuy nhiên do khả năng thu hút sự chú ý cao, video
chỉ nên được sử dụng để giúp truyền đạt hoặc hỗ trợ
cho thông điệp hoặc nội dung của Website mà thôi.
▪ Quan trọng là phải có những lý do rõ ràng và hữu ích
cho việc sử dụng nó. Bằng không, nó sẽ là sự gây
mất tập trung không cần thiết.
40
Video
Nhược điểm:
▪ Các video tốn nhiều kinh phí để sản xuất, làm chậm
quá trình tải về và xem chúng.
▪ Chúng cũng nhỏ và bị giới hạn về mức độ chi tiết mà
chúng có thể thể hiện.
▪ Luôn luôn cho người sử dụng biết kích thước của
một video cũng như lựa chọn có tải chúng hay không
để thực hiện.
▪ Tùy thuộc vào mục đích của video, tính hình động
của nó cũng có thể làm người sử dụng mất tập trung.
41
Video
Các nguyên tắc chỉ dẫn:
▪ Không tự động tải xuống một video vào một trang Web
đangtải.
▪ Hãy tạo ra những phân đoạn ngắn (giữ độ dài của video từ
60 ‐ 90 phút)
▪ Với tất cả các file có thể xem video được, hãy cung cấp các
điều khiển sau: Play (Xem), Pause/Resume (Tạm dừng/tiếp
tục xem), Stop (Dừng), Rewind (Tua lại), Fast Forward (Tua
đi nhanh), và Volume (Âm lượng).
▪ Nên cân nhắc:
• sử dụng những video sẵn →giảm chí phí)
• Chỉ dùng âm thanh (audio alone) →hiệu quả không kém video
• Một trình diễn slide có âm thanh (audio slide show) →nhanh, hiệu
quả
42
Các bản đồ hình ảnh
Thuận lợi:
▪ Có thể được sắp xếp theo một cấu trúc có ý nghĩa và rõ
ràng.
▪ Tải nhanh hơn các hình ảnh riêng biệt.
Nhược điểm:
▪ Tốn dung lượng màn hình đáng kể.
▪ Các điểm nóng (hot spots) không phải lúc nào cũng rõ
ràng.
▪ Vị trí của một người trong bản đồ hình ảnh không phải
lúc nào cũng rõ ràng.
Nguyên tắc chỉ dẫn:
▪ Cẩn trọng khi sử dụng
▪ Cung cấp các dấu hiệu trực quan hiệu quả và sự nhấn
mạnh để giúp dễ dàng xác định liên kết ranh giới. 43
Ảnh chụp/ Tranh vẽ
Nguyên tắc chỉ dẫn:

▪ Sử dụng định dạng JPEG.
▪ Trên trang đầu tiên:
▪ Trên trang khởi tạo, hiển thị một phiên bản nhỏ.
▪ Một hình ảnh kích thước hình thu nhỏ.
▪ Phóng to chi tiết có liên quan nhất.
▪ Liên kết đến các ảnh lớn hơn hiển thị nhiều chi tiết
nếu cần
44
Các sơ đồ - Hình vẽ
Nguyễn tắc chỉ dẫn các sơ đồ:

▪ Cung cấp các sơ đồ đơn giản.
▪ Cung cấp sơ đồ cấu trung bên trong (cutaway) hoặc
các khung nhìn phóng to để minh họa các điểm
chính
Nguyên tắc chỉ dẫn hình vẽ:
▪ Cung cấp các bản vẽ đơn giản thể hiện chi tiết tối
thiểu.
▪ Cung cấp một liên kết đến một bản vẽ hoàn chỉnh
45
Hình động
Nguyên tắc chỉ dẫn

▪ Chỉ sử dụng khi là một phần không thể thiếu của nội
dung.
▪ Giới thiệu hình động
▪ Tạo các phân đoạn ngắn.
▪ Cung cấp một chế độ khung hình dừng (freeze
frame), dừng (stop) hoặc xem lại (replay).
▪ Tránh hình ảnh động gây mất tập trung.
46
Âm thanh

▪ Khi các từ được nói (đơn giản, tốc độ khoảng 160
phút/từ)
▪ Khi được sử dụng để giới thiệu ý tưởng hoặc khái niệm
mới, bài tường thuật nên chậm lại.
▪ Tường thuật ngoài màn hình nên được sử dụng thay vì
tường thuật trên màn hình.
▪ Trừ khi người diễn giả là người có uy tín về chủ đề đó
▪ Tạo các phân đoạn ngắn.
▪ Cung cấp các phân khúc có chất lượng cao.
▪ Cung cấp các điều khiển âm thanh.
▪ Chạy âm thanh nền nhẹ nhàng.
47
Tổng kết bài
1. Những loại biểu tượng có thể dùng, các đặc điểm và

ảnh hưởng tới tính tiện dùng của chúng.
2. Chọn các biểu tượng và quá trình thiết kế biểu tượng
như thế nào.
3. Các nguyên tắc chỉ dẫn dùng cho hàng loạt những
phương tiện đồ họa khác bao gồm hình ảnh, ảnh chụp,
tranh vẽ, biểu đồ, hình vẽ, âm thanh và hình động.
48
CHỌN MÀU PHÙ HỢP
(BƯỚC 12)

1
Nội dung
▪ Màu sắc
▪ Màu sắc và thị giác của con người
▪ Chọn các màu sắc cho màn hình đồ họa
▪ Chọn màu sắc dùng cho các trang Web.
▪ Sử dụng màu sắc cần tránh
▪ Những xem xét dùng cho những người có các khuyết
tật nhìn màu;
▪ Những cân nhắc xem xét về văn hóa, kỷ luật và khả
năng tiếp cận
2
Màu sắc
▪ Màu sắc thêm cảm giác không gian, hay tính hiện
thực cho khả năng sử dụng của màn hình.
▪ Màu sắc thu hút sự chú ý vì nó thu hút mắt người
nhìn.
▪ Nếu được sử dụng hợp lý, nó có thể nhấn mạnh tổ
chức hợp lý của thông tin, tạo điều kiện cho việc
nhận biết các thành phần màn hình, nhấn mạnh sự
khác biệt giữa các thành phần và làm cho mà hình
hiện thị trở nên thú vị và hấp dẫn hơn.
▪ Nếu sử dụng không đúng cách, màu sắc có thể gây
rối mắt và có thể gây mệt mỏi về mặt thị giác, làm
giảm khả năng sử dụng của hệ thống
Theo Galitz
3
Màu sắc – Các hệ màu
RGB – Đỏ (Red) Xanh lá cây

(Green) và Xanh da trời (Blue).
Đây là hệ màu được sử dụng
nhiều nhất. Và cũng là hệ màu
căn bản và phổ biến nhất trong
thiết kế website và chỉnh sửa
hình ảnh.
Với 3 màu cơ bản này chúng ta
có thể phối thành hàng tỉ màu
khác, tùy vào mục đích sử
dụng.
4
CMYK: Hệ màu này chủ yếu

được dung trong in ấn sách
báo, tạp chí, v.v.
Là sự phối hợp giữa Cyan
(da trời), Magenta (tím),
Yellow (vàng) và Black (đen).
5
Lab – là một không

gian màu độc lập.
Chỉnh sửa màu trong
hệ của nó là một công
việc thú vị vì một sự di
chuyển nhẹ nhàng trên
kênh a hoặc kênh b
cũng tạo ra những thay
đổi mạnh mẽ nhất về
màu sắc. Lab là hệ
màu rất thích hợp trong
chỉnh sửa ảnh KTS.
6
▪ Hệ màu HSB (còn gọi

là SHV) - Hue liên
quan đến màu sắc,
Saturation (độ thấm
qua) xác định số
lượng màu sắc và
Brightness (độ chói)
liên quan đến số
lượng ánh sáng có
trong màu sắc.
▪ HSB thường được
dùng trong việc chỉnh
sửa ảnh chân dung 7
Các gam màu sắc
Có 8 gam màu
▪ Màu lạnh
▪ Màu nóng
▪ Màu tương phản
▪ Màu tương đồng
▪ Màu vô sắc
▪ Màu bổ túc
▪ Màu sắc độ
▪ Màu sắc điệu
8
Các gam màu sắc
Màu nóng gồm 2 màu chính là

đỏ và vàng cùng các màu tương
cận của chúng như cam, hồng,
tím đỏ, vàng, xanh lục…
Màu lạnh đối lập với màu nóng,

là những màu cho ta cảm giác
mát mẻ, như: xanh lam, xanh lá
cây, đen, tím…
9
Các gam màu sắc
❖ Màu tương phản thường là những màu gốc hoặc có

tính gốc cao. Bản thân các màu này có độ mạnh thị
giác cao, nên khi đặt cạnh nhau trong một bố cục,
các màu sẽ tạo nên thị cảm mạnh. Với những màu
nóng và lạnh đứng cạnh nhau, sự tương phản sẽ dịu
hơn nếu được thay đổi độ sáng tối
→ Tương phản và trực quan:

Lựa chọn màu sắc tương phản
mang lại hiệu quả cho thiết kế
10
Các công dụng của màu sắc
▪ Sử dụng màu sắc để hỗ trợ việc đinh dạng màn hình

- Liên quan hoặc ràng buộc các phần thành nhiều phân nhóm
- Tách rời hẳn các phân nhóm thông tin riêng biệt
- Liên kết thông tin bị nằm cách xa nhau trên màn hình
- Làm nổi bật hoặc thu hút sự chú ý đến thông tin quan trọng
bằng cách cho nó nổi bật lên so với các thông tin khác
▪ Sử dụng màu sắc như là mã màu trực quan để xác định
- Thành phần bộ phận của màn hình
- Cấu trúc logic của các ý tưởng, quy trình hoặc trình tự
- Các nguồn thông tin
- Tình trạng của thông tin
▪ Sử dụng màu sắc để
- Chân thực các đối tượng tự nhiên
- Tăng sự lôi cuốn trên màn hình
11
Những vấn đề có thể xảy ra với màu sắc
▪ Khả năng thu hút chú ý cao

▪ Gây nhiễu vào việc sử dụng các màn hình khác
▪ Độ nhạy cảm khác nhau của mắt đối với các màu sắc
khác nhau
▪ Những khuyết tật về nhìn màu: mù màu
▪ Ý nghĩa màu sắc: khác nhau giữa các quốc gia, khác quy
ước…
▪ Những khác biệt giữa chế độ kỷ luật và nền văn hóa
12
Những vấn đề có thể xảy ra với màu sắc
▪ Sự hấp dẫn của màu sắc cũng mang tính chủ quan.
▪ Việc sử dụng đúng màu sắc đòi hỏi phân tích về
những kỳ vọng và những trải nghiệm của người xem
màn hình.
→ Việc sử dụng màu sắc trong thiết kế phải luôn chú ý
tới những vấn đề này một cách rõ ràng. Các nhà thiết
kế phải làm sao để giảm thiểu các tác động phá vỡ và
không có tính xây dựng của chúng.
13
Các ý nghĩa của các màu sắc thông dụng
Màu sắc Khẳng định Phủ định

Tích cực, hấp dẫn, chiếm ưu thế, kích thích, thêm sinh Hung hăng, gây hoang
Đỏ (red)
lực, có uy quyền, khoẻ mạnh mang, mạnh mẽ
Kiêng khem, có kiểm soát, sâu sắc, mơ mộng, chung thuỷ, Hung hăng, lạnh lùng,
Xanh lam (Blue)
hoà thuận, trí tuệ, sự dịu dàng, có lý trí, xét đoán,… hướng nội, u sầu
Xanh lam – Xanh lá
Các biệt, lạnh lùng, bướng
cây hoặc ngọc lam
Làm cho dễ chịu và thích thú bỉnh, cằn cỗi, không cảm
(Blue green or
xúc
turquoise)
Xanh lá cây Bình tĩnh, gần gũi với tự nhiên, hoà giải, mềm mỏng, hoà Đố kỵ, thiếu kinh nghiệm,
(Green) thuận, lạc quan, làm cho dễ chịu và thích thú, kiên quyết ghen tuông
Vui vẻ, nhiều màu sắc, hướng ngoại, vui hết cỡ, sáng sủa, Nhát gan, cường điệu, rỗng
Vàng
sôi động, trẻ trung tuếch, kiêu ngạo
(Yellow)
Còn sống, sinh động, cởi mở, thích trò chuyện, trực tiếp, Rẻ, đáng kính, riêng tư, kín
Da cam
thẳng thắn, làm náo động, hứng thú, hân hoan, vui sướng, đáo, ích kỷ, chiếm hữu,
(Orange)
ấm áp mạnh mẽ, đầy sinh lực
Tím Sang trọng, lỗng lẫy, xa hoa, vương giả, long trọng,
Buồn 14
(Purple) nghiêm trọng, nghiêm trang
Màu sắc - Nghiên cứu cho thấy gì
❖ Màu đã được hiển thị
▪ Để cải thiện hiệu suất (Kopala, 1981; Nagy và Sanchez, 1992; Sidorsky,
1982)
▪ Để cải thiện thời gian tìm kiếm trực quan (Christ, 1975; Carter, 1982)
▪ Hữu ích cho việc tổ chức thông tin (Engel, 1980), hỗ trợ trí nhớ
(Marcus,1986b),
▪ Để phân ranh giới một phần của màn hình (trái ngược với các dòng hoặc
kiểu phông chữ, Wopking et al.,1985)
❖ Màu sắc:
▪ Không cải thiện hiệu suất (Tullis, 1981),
▪ Không ảnh hưởng đến việc đọc văn bản (Legge và Rubin, 1986),
▪ Có thể làm giảm hiệu suất (Christ và T, 1973; Christ, 1975),
▪ Ít quan trọng hơn khoảng cách hiển thị (Haubner và B, 1983).
Đối với các màn hình đơn giản, màu sắc có thể không có tác
động mạnh. Tuy nhiên, khi độ phức tạp của màn hình tăng lên,
giá trị của màu sắc cũng tăng theo. Để có hiệu quả, màu sắc
phải được sử dụng đúng cách
15
Màu sắc và thị giác con người
Mống mắt (iris) Màng cứng

(sclerotic)
Võng mạc
Giác mạc (retina)
(cornea) Thủy tinh
thể (Lens) Màng trạch
Thể dịch nước
(aqueous Dịch thủy tinh (choroid)
humour) (Vitreous humour)
Cơ mi Thần kinh
(ciliary muscle) thị giác
(optic nerve)
Dây treo (suspensory ligament)
Các thành phần của mắt - thuỷ tinh thể và võng mạc - chi phối các
lựa chọn và sự kết hợp, màu sắc được hiển thị trên màn hình.
Màu sắc phù hợp sẽ nâng cao hiệu suất; màu sắc không phù hợp
sẽ có tác dụng ngược lại, cũng như tăng khả năng gây mỏi thị
giác.
16
Chọn các màu sắc
Màu chữ:
▪ Việc thể hiện chữ với các yếu tố như cỡ chữ, khoảng
cách dòng hay kể cả màu sắc chữ đều liên quan đến
tính dễ đọc của nội dung.
▪ Nếu bạn để màu chữ sáng thì hãy đặt phông nền có
màu tối và ngược lại. Trắng và đen là sự kết hợp phổ
biến nhất trong khi đỏ và xanh dương lại hay được sử
dụng làm màu cho các đường link và các đoạn chữ
được bôi highlight.
▪ Sự tương phản là khá quan trọng trong việc làm nổi bật
dòng chữ sao cho người ta dễ đọc, vì vậy bạn hãy tránh
để phông nền và chữ có các tông màu gần giống nhau
17
Ví dụ về phối màu
Lựa chọn màu sắc tương phản

mang lại hiệu quả cho thiết kế
18
Minh hoạ
19
Áp dụng và phân tích
20
Áp dụng và phân tích
21
Foreground
▪ Màu cho foreground nên đối lập tối đa với màu của
background
▪ Với màu cho chữ được khuyến nghị nhiều nhất là màu
đen trình bày trên một background tô màu sáng màu có
cường độ sáng thấp, trắng nhờ hoặc là màu xám sáng.
▪ Những màu sắc không đậm nằm ở trung tâm quang phổ
như màu trắng, vàng, hoặc xanh lá cây, trên các
background màu tối cũng rất tốt.
▪ Màu sắc đậm quá sẽ kích thích quá mức đến. Lý thuyết
màu cũng cho rằng nên sử dụng các màu sắc ấm hơn,
tích cực hơn cho các foreground. Các màu sắc ấm hơn
sẽ mang tính thúc đẩy, buộc phải chú ý đến (lưu ý khi
dùng màu đỏ và cam)
22
Background
▪ Chọn các màu sắc background không cạnh tranh với
các màu của foreground.
▪ Với background được tô màu sáng có cường độ
thấp: màu trắng nhờ hoặc màu xám kết hợp với chữ
màu đen.
▪ Các background không đậm. Tuy nhiên, các màu sắc
của foreground phải được lựa chọn có cân nhắc đến
màu của background.
23
Minh hoạ
24
Background (tiếp)
▪ Với background tối hay sử dụng các màu sắc mát, tối.
▪ Màu xanh lam là đặc biệt tốt vì mắt thiếu nhạy cảm với
màu xanh lam trong vùng trung tâm của võng mạc và
độ nhạy với màu xanh lam tăng lên tại vùng ngoại vi.
▪ Trong một nghiên cứu đã cho thấy các màu background
tốt nhất là màu đen và màu xanh lam. Một nghiên cứu
tương tự, thấy rằng màu sắc mát, xanh lam và màu lục
lam nhẹ, được ưa thích hơn để dùng cho các màn hình
background tối.
25
Minh hoạ
26
Minh hoạ
27
28
Chọn màu sắc
Kết hợp foreground và background
29
Chọn màu sắc
Xem xét cho người khuyết tật nhìn màu

▪ Sử dụng các kết hợp màu sắc mà có thể phân biệt
dễ dàng.
▪ Đảm bảo rằng độ tương phản độ sáng giữa các màu
foreground cao.
▪ Tăng độ tương phản độ sáng giữa các màu sắc ở 2
đầu quang phổ (các màu lam và màu đỏ).
▪ Tránh kết hợp các màu sáng ở hai đầu quang phổ
với các màu tối ở giữa quang phổ.
▪ Sử dụng công cụ để xem các màn hình sẽ trông như
thế nào với người xem có khuyết tật về màu.
30
Chọn màu Sắc
Xem xét tác động tới văn hoá, kỷ luật, khả năng tiếp
cận
Sử dụng màu sắc cần xét:
▪ Người sử dụng của nền văn hoá khác nhau
▪ Người sử dụng của chế độ kỷ luật khác nhau
▪ Người sử dụng dựa trên các tiện ích của khả năng
tiếp cận
31
Chọn các màu sắc cho màn hình đồ họa
Để hiển thị dữ liệu, văn bản và các ký hiệu trên màn

hình đồ họa, các màu sắc được lựa chọn nên có tầm
nhìn, ý nghĩa, độ tương phản và sự hài hòa thích hợp.
▪ Sử dụng có hiệu quả các kết hợp màu foreground
với background.
▪ Sử dụng có hiệu quả các kết hợp màu foreground.
▪ Đầu tiên, hãy chọn màu background.
▪ Hiển thị không quá bốn màu sắc tại một thời điểm.
▪ Sử dụng các màu sắc trên thanh công cụ một cách
tiết kiệm.
▪ Kiểm thử các màu sắc đã chọn
32
Vận dụng màu sắc trong thiết kế
Sự thành công của sản phẩm phụ thuộc phần lớn vào các màu
sắc được lựa chọn cho thiết kế. Màu sắc được lựa chọn đúng
cách giúp tâm trí người dùng bắt buộc họ phải hành động.
33
Tối đa là 4 màu
▪ Theo kinh nghiệm (chưa kiểm chứng), sử dụng nhiều
hơn 4 màu trên một màn hình văn bản cùng một lúc
sẽ gây cảm giác “quá nhiều”.
▪ Theo Marcus (1986a) gợi ý một cách tiếp cận thậm
chí còn thận trọng hơn, chỉ sử dụng hai đến ba màu
là thông dụng nhất.
→ không nên hiển thị quá 4 màu cùng một lúc trên một
màn hình duy nhất. Đối với hầu hết các trường hợp, hãy
hạn chế số lượng màu sắc chỉ là 2 hoặc 3 màu.
34
Màu sắc trên các thanh công cụ

▪ Các biểu tượng trên thanh công cụ thường có kích
thước nhỏ. Việc trình bày chúng bằng màu sắc hiếm
khi là có lợi, mà hầu như là làm mất tính rõ ràng.
▪ Hãy sử dụng màu sắc trong các biểu tượng trên
thanh công cụ một cách đơn giản và thận trọng, chỉ
khi màu sắc sẽ hỗ trợ cho việc nhận dạng biểu
tượng, giúpphân biệt các biểu tượng dễ dàng hơn,
hoặc thêm ý nghĩa cho các biểu tượng.
▪ Một thư mục file có màu vàng hoặc một biểu tượng
"Stop" có màu đỏ là những ví dụ về những công
dụng có ích của màu sắc.
35
Chọn màu sắc cho trang web
▪ Màu sắc phải luôn có mục đích có ý nghĩa nhất định

▪ Sử dụng bảng màu 216 màu của trình duyệt
▪ Trình bày:
– Giảm thiểu số lượng màu sắc được trình bày
– Luôn cân nhắc màu sắc trong ngữ cảnh
– Sử dụng các cách phối màu tương tự hoặc giống
nhau từ đầu đến cuối
– Đối với foregrounds: Sử dụng màu đen hoặc màu
mạnh cho văn bản và tiêu đề
– Đối với backgrounds: Sử dụng các màu tương
phản yếu hơn như trắng nhờ hoặc xám sáng
36
Chọn màu sắc cho trang web
– Sử dụng một màu đồng nhất trong diện tích lớn

– Thành phần càng nhỏ thì càng cần nhiều độ
tương phản hơn giữa nó và backgroup
▪ Các hình ảnh lớn hơn nên sử dụng (các màu sắc an
toàn cho web, đơn điệu; Ít màu hơn hình ảnh nhỏ)
Chọn màu để dễ dàng tái tạo lại theo các màu đen
trắng
▪ Sử dụng màu mặc định cho các liên kết (màu xanh
lam cho liên kết chưa chọn/chưa truy cập và màu tía
cho liên kết đã chọn/đã truy cập)
▪ Không hiển thị văn bản không liên kết bằng màu liên
kết
▪ Kiểm tra tất cả các màu
37
Sử dụng màu sắc cần tránh
▪ Chỉ dựa hoàn toàn vào màu sắc
▪ Quá nhiều màu được hiển thì tại một thời điểm
▪ Dùng những màu sắc quá đậm, nằm ở hai đầu quang
phổ màu: Đỏ và xanh, vàng và tím
▪ Màu sắc có độ sáng thấp để xem mở rộng hoặc người
xem lớn tuổi hơn
▪ Các màu sắc có cùng độ sáng
▪ Các màu sắc thiếu độ tương phản:
Ví dụ: vàng và trắng; đen và nâu; đỏ, xanh lam, nâu so
với backgroup sáng
▪ Các màu sắc đậm hoàn toàn cho văn bản hoặc các
thành phần thường xuyên được đọc khác của màn
hình.
38
Sử dụng màu sắc cần tránh
▪ Màu xanh lam thuần tuý cho văn bản, các đường kẻ mảnh
và hình dạng nhỏ.
▪ Các màu có trong diện tích nhỏ
▪ Các màu dùng cho chi tiết tinh vi
▪ Các màu đối lập nhau
▪ Màu đỏ và xanh lá cây ở ngoại vi của màn hình hiện thị ở
quy mô lớn.
▪ Các màu sắc kề nhau mà chỉ khác nhau về lượng sắc tố
màu xanh lam chúng có trong thành phần
▪ Nhưng phân biệt duy nhất bằng màu cho người sử dụng mù
màu
▪ Sử dụng màu sắc theo những cách bất ngờ.
▪ Sử dụng màu sắc để cải thiện tính rõ ràng của văn bản có
mật độ dày đặc.
39
Kết luận
▪ Màu sắc là công cụ hữu hiệu cho một nhà thiết kế

website. Nó có thể chính là thứ đầu tiên mà một
người truy cập chú ý tới hay mang đến cho bạn một
khách hàng mới.
▪ Hai trang web sử dụng hai màu sắc chủ đạo khác
nhau sẽ mang đến những tác động khác nhau đáng
kể đối với người xem.
▪ Hãy cân nhắc cẩn thận về sắc màu ngay từ bước
đầu trong quá trình hình thành nên trang web và bạn
sẽ thấy những lời khuyên này là chính xác
40
Tổng kết bài
▪ Màu sắc và lựa chọn màu sắc

▪ Lựa chọn màu sắc cho ứng dụng đồ hoạ
▪ Lựa chọn màu sắc cho trang web
▪ Sử dụng sắc màu cần tránh
41
TỔ CHỨC, BỐ TRÍ CÁC TRANG
TRÊN MÀN HÌNH
(BƯỚC 13)

1
Nội dung
▪ Tổ chức và bố trí màn hình

▪ Các nguyên tắc chỉ dẫn chung
▪ Các nguyên tắc chỉ dẫn về tổ chức
▪ Sự điều hướng điều khiển
▪ Các nguyên tắc chỉ dẫn cửa sổ
▪ Các nguyên tắc chỉ dẫn thiết kế cho trang web
▪ Các ví dụ về màn hình
2
Đặt vấn đề
Trình bày và cấu trúc màn hình hợp lý sẽ giúp người sử

dụng:
- Lĩnh hội thông tin và sử dụng điều khiển nhanh
chóng và chính xác
- Thực hiện các tác vụ và chức năng nhanh nhất có
thể
- Nâng cao khả năng chấp nhận
3
Đặt vấn đề
▪ Trong các giao diện đồ họa, các thành phần được

đưa vào cửa sổ gồm có một đầu đề, các điều khiển
màn hình, các tiêu đề mục, các nội dung khác của
màn hình và có thể có các thông báo mang tính chất
hướng dẫn
▪ Cách tổ chức màn hình và cách thông tin thực tế
được hiển thị trên đó là điều cốt yếu để đạt được
mục đích thiết kế bao gồm sự lĩnh hội và thực thi
điều khiển nhanh chóng và chính xác.
4
Đặt vấn đề
▪ Trên nhiều trang Web, các thành phần được đưa vào
trang bao gồm đầu đề trang, nội dung bằng chữ, các
hình đồ họa, các tiêu đề mục, các điều khiển màn
hình, các liên kết và các thành phần cần thiết khác.
▪ Các trang Web được tổ chức hợp lý, bố trí thận trọng
và nhất quán sẽ cho phép người sử dụng nắm bắt
cấu trúc site nhanh chóng, cho phép họ có thể đọc
lướt nhanh và hiệu quả các trang, và gây hứng thú
quan tâm đến nội dung của site.
▪ Theo một nghiên cứu, sự bố trí có ảnh hưởng tới sự
hài long của người sử dụng trang Web.
5
Tổ chức và bố trí màn hình
▪ Các nguyên tắc chỉ dẫn chung

▪ Các nguyên tắc chỉ dẫn về tổ chức
▪ Sự điều hướng điều khiển
▪ Các nguyên tắc chỉ dẫn cửa sổ
▪ Các nguyên tắc chỉ dẫn thiết kế cho trang web
6
Các nguyên tắc chỉ dẫn chung
▪ Khối lượng thông tin:

▪ Tổ chức và luồng thông tin;
▪ Tổ chức dựa trên mức độ tương quan giữa các dữ
liệu hoặc các thông tin với nhau.
▪ Cung cấp theo một trật tự;
▪ Sắp đặt điều khiển;
▪ Sự điều hướng;
▪ Thẩm mỹ;
▪ Ngăn ngừa sự lộn xộn trực quan;
▪ Trọng tâm và nhấn mạnh.
▪ Sự nhất quán.
7
Bạn nghĩ sao với một giao diện được

thiết kế ban đầu như thế này?
8
Giao diện được tổ chức và bố trí lại
9
Các nguyên tắc chỉ dẫn về tổ chức
Các nguyên tắc chỉ dẫn về tổ chức màn hình là những

nguyên tắc liên quan đến:
▪ Tạo các phân nhóm
▪ Các đường bao
▪ Các điều khiển phụ thuộc
▪ Căn chỉnh và cân đối
10
Tạo các phân nhóm
▪ Cung cấp phân nhóm cho các thành phần liên quan với
nhau:
▪ Các thành phần gồm một điều khiển bằng radio hoặc
hộp kiểm tra
▪ Hai hoặc nhiều trường liên quan tới nhau.
→ Các phân nhóm sẽ trợ giúp người sử dụng lĩnh hội và cung
cấp sự lôi cuốn trực quan.
▪ Phân nhóm có thể tạo bằng cách:
▪ Khoảng trắng
▪ Các tiêu đề mục
▪ Đường bao
11
Khoảng trắng:
- Đóng vai trò quan trọng trong tổ hợp các giao diện.
- Thiếu khoảng trắng sẽ gây những hiệu ứng không
mong muốn:
• Tạo sự khó khăn, mệt mỏi khi quan sát.
• Ảnh hưởng đến qua trình thiếp thu nhanh khi nhìn thoáng
qua
- Chỉ dẫn khoảng trắng trong tạo phân nhóm:
▪ Cung cấp sự phân tách cân xứng các phân nhóm
▪ Để lại khoảng trắng thích hợp xung quanh các nhóm hoặc
điều khiển liên quan, giữa nhóm và đường viền cửa sổ.
▪ Khoảng cách giữa các phân nhóm phải lớn hơn khoảng
cách giữa các trường trong một nhóm
12
Ví dụ: Hộp thoại không có lề xung quanh, các điều khiển quá
gần nhau
13
Nguyên tắc chỉ dẫn - Tạo các phân nhóm
Ví dụ: Tạo phân nhóm sử dụng khoảng trắng
14
Khoảng trắng (tiếp)

Nhưng phải luôn cân nhắc kỹ lưỡng giữa việc tạo ra
khoảng trống để:
▪ Tiết kiệm không gian màn hình;
▪ Không tạo ra nhiễu; Không gây hiệu ứng buồn tẻ
(thưa thớt, lạc lõng các controls…) trên màn hình
15
Nguyên tắc chỉ dẫn - Tạo các phân nhóm
Các tiêu đề mục:

▪ Tiêu đề mục cũng được sử dụng để cung cấp sự
nhận dạng những phân nhóm các điều khiển hoặc
thông tin.
→ Điều này hỗ trợ việc hiểu và lĩnh hội xem nội dung gì
được hiển thị trên màn hình
▪ Các chỉ dẫn về tiêu đề mục
▪ Cung cấp tiêu đề mục và tiêu đề mục con cho nhiều phân
nhóm điều khiển
▪ Cung cấp tiêu đề mục mô tả đủ nghĩa và ngắn gọn bản chất
của các trường liên quan với nhau
16
Ví dụ: Tạo phân nhóm sử dụng tên đề mục
17
Các đường bao
▪ Các phân nhóm có thể được cải thiện hơn nữa thông
qua việc sử dụng các đường bao.
▪ Vẽ những đường bao thẳng xung quanh các thành
phần có một điều khiển đơn chẳng hạn như nút radio
hoặc hộp kiểm tra và/hoặc các nhóm điều khiển hoặc
những trường có liên quan với nhau.
▪ Các đường bao của điều khiển riêng lẻ nên khác biệt
trực quan với các đường bao mô tả các phân nhóm
gồm nhiều trường hoặc nhiều điều khiển.
▪ Hãy cung cấp một đường bao mảnh xung quanh các
điều khiển đơn và một đường bao dày hơn một chút
xung quanh các nhóm gồm nhiều trường hoặc nhiều
điều khiển.
18
Các đường bao
▪ Các đường bao có thể được sử dụng phân nhóm

cho những điều khiển có liên quan.
▪ Các tiêu đề mục nên được đặt phía trên bên trái và
bên trong chính đường bao, nên viết chữ hoa.
▪ Không đặt đường bao điều khiển hoặc các trường
riêng lẻ
- Các trường nhập đơn
- Các hộp danh sách đơn
- Hộp kết hợp (combination box) đơn
- Các hộp tang giảm (spin box) đơn
- Các thanh trượt (slider) đơn
▪ Không đặt đường bao xung quang nhóm các nút ấn
lệnh
19
Các đường bao
Ví dụ: Những điều khiển được sắp theo phương ngang có

đường bao và không có đường bao
20
Các đường bao
Ví dụ: Những điều khiển được sắp theo phương đứng có

đường bao và không có đường bao
21
Các đường bao
Phân biệt đường bao điều khiển và đường bao của

mục
22
Các đường bao
Ví dụ: Các trường hợp không nên sử dụng đường bao
23
Căn chỉnh các thành phần của màn hình
▪ Tối thiểu hóa các điểm căn chỉnh trên một cửa sổ:
• Theo phương thẳng đứng
• Theo phương nằm ngang
▪ Ít các điểm căn chỉnh trên màn hình sẽ làm giảm độ
phức tạp, làm cho màn hình hấp dẫn về mặt trực
quan hơn.
▪ Căn chỉnh các thành phần cũng sẽ làm cho di
chuyển mắt và di chuyển trỏ chuột qua màn hình rõ
ràng hơn, làm giảm khoảng cách di chuyển cho cả
hai.
▪ Việc tổ chức màn hình cũng sẽ nhất quán và có thể
dễ đoán trước hơn. 24
Định hướng thẳng đứng
Các điều khiển nhiều cột với một đường phân chia
25
Định hướng theo phương nằm ngang
Các nút radio được dàn hàng ngang với sự phân biệt giữa các mục kém
26
Định hướng theo phương nằm ngang
Các mục của điều

khiển được dàn
hàng ngang có sự
căn chỉnh và phân
biệt.
Các mục của điều

khiển được dàn
ngang, đường bao
để cải thiện khả
năng đọc.
27
Cân đối các thành phần
Cố gắng giữ cho màn hình đạt được cân đối nhất có thể
28
Sự điều hướng điều khiển
Phím tab/các phím mũi tên:

Sử dụng phím tab để di chuyển giữa các điều khiển
cửa sổ đang hoạt động theo trật tự logic mà các điều
khiển đã được tổ chức.
▪ Không dùng phím tab để tới các chú giải của điều
khiển.
▪ Các nút radio (radio buttons): Sử dụng các phím mũi
tên để di chuyển qua một dãy các nút.
29
Phím tab/các phím mũi tên (tiếp)

▪ Các hộp kiểm tra (check boxes):
▪ Sử dụng phím tab để di chuyển giữa chúng khi
chúng là các điều khiển độc lập.
▪ Khi các hộp kiểm tra được đặt trong một đường
bao hoặc một group, sử dụng các phím mũi tên để
di chuyển giữa các hộp kiểm tra khi chúng trông
như là nhóm logic.
▪ Các hộp danh sách
Luôn luôn sử dụng các phím mũi tên để điều hướng
bên trong một danh sách các lựa chọn
30
Các nút lệnh

▪ Sử dụng các nút lệnh thoát hoặc mở rộng/hộp thoại
tính năng.
▪ Lưu ý: thứ tự nhảy điều khiển màn hình sử dụng
phím tab cho các nút này là cuối cùng.
▪ Sử dụng nút tab tới các nút lệnh có quan hệ liên tiếp
trong thân cửa sổ phải theo thứ tự hợp lý.
31
Các phím tương đương
▪ Sử dụng các phím tương đương (các thuật nhớ) để
truy xuất trực tiếp tới mỗi điều khiển của cửa sổ bất
cứ khi nào có thể.
▪ Chỉ định thuật nhớ phải là duy nhất trong phạm vi
một cửa sổ.
Lư ý: Các nút lệnh OK và Cancel thường không được
ấn định như là các thuật nhớ, mà phím Enter và Esc
được sử dụng thay thế.
32
Các nguyên tắc chỉ dẫn cửa sổ
▪ Luôn luôn tổ chức nhiều cửa sổ để hỗ trợ cho các

tác vụ, theo trình tự các bước thực hiện hiệu quả
nhất.
▪ Giảm thiểu số lượng cửa sổ cần thiết nhằm hoàn
thành một mục tiêu.
▪ Nên hiển thị tất cả thông tin liên quan trong một cửa
sổ đơn.
▪ Một cửa sổ nên đủ lớn để chứa được khối lượng dữ
liệu mà người ta thường kỳ vọng nhìn thấy được.
▪ Nên hạn chế việc cuộn lên xuống trên một cửa sổ.
33
Các nguyên tắc chỉ dẫn cửa sổ
▪ Nếu tất cả các điều khiển hoặc dữ liệu liên quan

không thể đặt trọn vẹn trong một cửa sổ đơn, hãy đặt
phần thông tin ít sử dụng sang một cửa sổ khác.
▪ Không nên để kích thước mặc định của một cửa sổ
chiếm toàn bộ màn hình. Nên tồn tại tùy chọn để mở
rộng cửa sổ.
▪ Dùng các cửa sổ chính, cửa sổ thứ cấp và hộp
thoạimột cách nhất quán.
34
Các nguyên tắc chỉ dẫn thiết kế web
Bố trí trang
▪ Các trang Web được tổ chức hợp lý, bố trí thận trọng
và nhất quán sẽ cho phép người sử dụng nắm bắt
cấu trúc site nhanh chóng, cho phép họ có thể đọc
lướt nhanh và hiệu quả các trang, và gây hứng thú
quan tâm đến nội dung của site.
▪ Sự bố trí có ảnh hưởng tới sự hài lòng của người sử
dụng.
35
Bố trí trang
▪ Một trang Web thiết kế tốt phải có những phẩm chất sau:
▪ Tính hiệu quả
▪ Tính logic và tính nhất quán
▪ Dễ hiểu
▪ Có thể đọc lướt nhanh
▪ Cân bằng hợp lý
36
Bố trí dạng ô kẻ
▪ Bố trí dạng ô kẻ cung cấp cả cấu trúc lẫn tính nhất
quán cho một Website.
▪ Nhiều ô kẻ tương tự nhau là cần thiết cho các trang
của site với những mục đích khác nhau hoặc độ
phức tạp khác nhau.
▪ Các thành phần điều hướng của trang (như các tiêu
đề mục, text, đồ họa) sẽ được đặt vào các ô kẻ này.
→ Hãy luôn nhớ rằng càng ít ô kẻ thì càng tốt, và nếu
buộc phải sử dụng nhiều ô kẻ, thì hãy duy trì tính nhất
quán hết sức có thể giữa các sơ đồ bố trí dạng ô kẻ
37
Bố trí ô kẻ kém Bố trí ô kẻ tốt
38
39
40
41
Các thành phần

▪ Để giữ cho các trang đơn giản, hãy hạn chế số lượng các
thành phần chức năng riêng biệt trên một trang.
▪ Các thành phần đưa vào như đầu đề, thanh điều
hướng, danh sách liên kết dạng text tới các vùng
chính của site, nội dung dạng text, các hình đồ họa
và phần chân trang…
▪ Càng có nhiều thành phần trên một trang, thì các

thành phần đó càng dễ xung đột với nhau gây mất
tập trung cho người sử dụng.
▪ Có quá nhiều thành phần thậm chí sẽ nhấn chìm hệ

thống xử lý thông tin của người sử dụng.
42
Kích thước
▪ Độ dài trang: Giảm thiểu độ dài trang, giới hạn nó
trong hai hoặc ba màn hình thông tin
▪ Lường trước các đoạn ngắt trang
▪ Cuộn ngang: Tránh phải dung cuộn theo chiều ngang
Tổ chức:
▪ Đặt các thông tin quan trọng ở vị trí đầu trang
▪ Xếp các thành phần còn lại theo mức độ quan trọng
▪ Giảm độ phức tạp
43
Định dạng
▪ Khoảng trắng đầy đủ và hợp lý
▪ Độ dài dòng văn bản ngắn
▪ Chữ (không quá 50 đến 60 ký tự/dòng)
▪ Căn chỉnh tốt hơn và kết nối trực quan giữa các thành
phần
Nhiều độc giả:
Nếu có nhiều dạng độc giả→Trình bày thông tin ở các mức
độ chi tiết khác nhau cho từng loại độc giả.
Các nền tảng (Platform):
▪ Dự đoán và thiết kế các tảng và các màn hình khác nhau
▪ Chỉ ra một vùng hình ảnh của màn hình sẽ luôn nhìn thấy
bởi tất cả các xem
44
Các thành phần điều hướng

▪ Cung cấp thanh điều hướng chung ở đầu mỗi trang
▪ Cung cấp một hạng mục cục bộ hoặc thanh điều hướng
liên kết theo chủ đề ở phía bên trái của trang
▪ Theo tùy chọn, cung cấp một cột điều hướng thứ cấp ở
phía bên phải của trang
▪ Đặt các liên kết minh họa, ngoặc đơn hoặc chú thích nhỏ
ở cuối
▪ Đối với các trang dài, hãy cung cấp liên kết "danh sách
nội dung“
▪ Tạo một chủ đề chung và nhất quán
▪ Không bao giờ tạo các trang mà không có các tùy chọn
điều hướng
45
Trang chủ
▪ Giới hạn ở một màn hình
▪ Xác định rõ ràng nội dung và mục đích của trang web
▪ Yếu tố cần bao gồm:
▪ Nhan đề nổi bật của trang và dòng giới thiệu, tên trang
web, mô tả ngắn gọn về trang web,
▪ Tóm tắt nội dung thông tin then chốt
▪ Liên kết điều hướng đến hầu hết các trang web hoặc
phần chính của trang
▪ Sơ đồ trang web
▪ Tóm tắt các tin tức hoặc quảng cáo mới nhất
▪ Phương tiện tìm kiếm
46
Các ví dụ về màn hình
47
48
49
50
Hướng nhìn của mắt
51
52
của mắt
53
54
Hướng nhìn của mắt
55
Tổng kết bài
Hướng dẫn cách tổ chức và bố trí các màn hình đồ họa

và web để khuyến khích việc hiểu thông tin nhanh chóng
và chính xác và kiểm soát việc thực thi.
56
KIỂM THỬ, KIỂM THỬ
VÀ KIỂM THỬ LẠI
(BƯỚC 14)

1
Nội dung
▪ Các loại kiểm thử.

▪ Phát triển và tiến hành một quá trình kiểm thử.
▪ Phân tích, sửa đổi và kiểm thử lại.
▪ Đánh giá hệ thống đang hoạt động
2
Đặt vấn đề
Kiểm thử là một công cụ để đo xác định một điều gì đó.

“Điều gì đó” có thể gồm:
▪ Sự phù hợp với một yêu cầu
▪ Sự tuân thủ với các nguyên tắc chỉ dẫn dùng cho
thiết kế hợp lý
▪ Xác định các vấn đề thiết kế
▪ Dễ dàng tiếp thu được hệ thống
▪ Ghi nhớ lâu nội dung đã tiếp thu được
▪ Tốc độ hoàn thành tác vụ
▪ Tốc độ đáp ứng cần thiết
▪ Tỷ lệ lỗi
▪ Sự hài lòng chủ quan của người dùng
3
Đặt vấn đề
Tầm quan trọng của việc kiểm thử tính tiện dùng
▪ Nhà phát triển và người sử dụng có các mô hình khác nhau
▪ Trực giác của nhà phát triển không phải lúc nào cũng chính
xác
▪ Không có người dùng và nhà phát triển trung bình
▪ Không thể đoán được khả năng tiện dùng từ vẻ ngoài
▪ Các tiêu chuẩn và hướng dẫn thiết kế là không đủ
▪ Phản hồi không chính thức không đầy đủ
▪ Các vấn đề được phát hiện muộn sẽ khó sửa chữa hơn và
tốn kém hơn.
▪ Những ưu thế trên sán phẩm cạnh tranh có thể đạt được
4
Các loại kiểm thử
▪ Đánh giá theo các nguyên tắc chỉ dẫn và tiêu chuẩn:
Đánh giá giao diện theo tiêu chuẩn và hướng dẫn thiết kế
của tổ chức
▪ Đánh giá mang tính phỏng đoán theo kinh nghiệm
(phương pháp Heuristic) : Đánh giá chi tiết hệ thống bởi
các chuyên gia thiết kế giao diện để xác định các vấn đề
tồn tại
▪ Kiểm tra từng bước dưạ trên kiến thức: Đánh giá giao
diện trong bối cảnh tác vụ người dùng thực hiện
▪ Đánh giá nói ra ý nghĩ: Người dùng vừa thực hiện các
tác vụ cụ thể vừa nói ra suy nghĩ
Các loại kiểm thử
▪ Quá trình kiểm thử về tính tiện dùng: Đánh giá

giao diện trong điều kiện thế giới thực hoặc kiểm
soát
▪ Các thử nghiệm cổ điển: So sánh khách quan của
hai hoặc nhiều nguyên mẫu giống hệt nhau về mọi
mặt ngoại trừ một vấn đề thiết kế
▪ Các nhóm trọng tâm: Thảo luận với người dùng về
các nguyên mẫu hoặc nhiệm vụ thiết kế giao diện
6
Đánh giá theo các nguyên tắc chỉ dẫn
và tiêu chuẩn
Ưu điểm:
▪ Có thể được thực hiện bởi các nhà phát triển
▪ Chi phí thấp
▪ Có thể xác định các vấn đề chung và lặp lại
▪ Đặc biệt hữu ích để xác định các vấn đề về thiết kế
và bố cục màn hình
Nhược điểm:
Có thể bỏ sót các vấn đề nghiêm trọng về khái niệm,
điều hướng và vận hành
7
Đánh giá mang tính phỏng đoán theo
kinh nghiệm
Ưu điểm:
▪ Dễ thực hiện
▪ Chi phí tương đối thấp
▪ Không lãng phí thời gian của người dùng
▪ Có thể xác định được nhiều vấn đề
Nhược điểm:
▪ Người đánh giá phải có chuyên môn về thiết kế giao diện
▪ Người đánh giá có thể không có hiểu biết đầy đủ về các nhiệm
vụ và cộng đồng người dùng
▪ Khó xác định các vấn đề cấu trúc trên toàn hệ thống
▪ Khó phát hiện các lối ra và các yếu tố giao diện còn thiếu
▪ Khó xác định quan trọng nhất trong số tất cả các vấn đề đã xác
định
▪ Không cung cấp cách có hệ thống để đưa ra giải pháp cho các
vấn đề
8
kinh nghiệm

▪ Sử dụng 3 đến 5 chuyên gia đánh giá
▪ Chọn những người hiểu biết
▪ Quen thuộc với tình hình dự án
▪ Có mối quan hệ lâu dài với tổ chức
9
kinh nghiệm
Nhắc lại 10 heuristics của Nielsen
Đáp ứng mong đợi Lỗi

1. Phù hợp thế giới thực 7. Tránh lỗi
2. Nhất quán và chuẩn 8. Nhận dạng, không hồi
3. Trợ giúp và tài liệu tưởng
Người sử dụng là “ông 9. Báo cáo lỗi, phát hiện và
chủ” phục hồi
4. Người sử dụng điều Tính đơn giản
khiển ứng dụng và tự do 10.Thiết kế đẹp và tối thiểu
5. Tính trực quan của
trạng thái hệ thống
6. Mềm dẻo và hiệu quả
10
kinh nghiệm
Các bước đánh giá

▪ Người đánh giá khám phá UI, đánh giá nó trên cơ sở
heuristics
▪ Lập ra danh sách các vấn đề phát hiện liên quan đến
tính sử dụng được.
Kỹ thuật
▪ Cần phải diễn giải tại sao nó vi phạm heuristic.
▪ Liệt kê đầy đủ các vấn đề mà đã tìm thấy trong bảng.
▪ Kiểm tra giao diện ít nhất hai lần.
▪ Hiệu chỉnh mọi vấn đề trong GUI nhờ các hướng dẫn
thiết kế đã nghiên cứu (không giới hạn bởi 10
heuristics của Nielsen).
11
kinh nghiệm
Ví dụ
12
Kiểm tra từng bước dưạ trên kiến thức
Ưu điểm:
▪ Cho phép đánh giá sớm và rõ ràng luồng tác vụ trong quá
trình thiết kế
▪ Không yêu cầu nguyên mẫu về chức năng hoạt động
▪ Chi phí thấp
▪ Có thể được sử dụng để đánh giá các giải pháp thay thế
▪ Nhà phát triển có thể thực hiện
▪ Đánh giá theo cấu trúc hơn so với đánh giá phỏng đoán
theo kinh nghiệm
▪ Hữu ích để đánh giá “học tập khám phá”
Nhược điểm:
▪ Thực hiện tẻ nhạt
▪ Có thể bỏ sót sự mâu thuẫn và các vấn đề chung và lặp
lại
13
Nguyên tắc:
▪ Cần thiết để thực hiện hướng dẫn là:
▪ Mô tả chung về người dùng hệ thống được đề
xuất và kiến thức liên quan của họ
▪ Mô tả cụ thể về một hoặc nhiều nhiệm vụ cốt lõi
hoặc đại diện sẽ được thực hiện
▪ Danh sách các hành động chính xác để hoàn
thành từng nhiệm vụ
14
Nguyên tắc (tiếp)

▪ Xem xét đánh giá
▪ Một số tác vụ cốt lõi hoặc đại diện trong một loạt
các chức năng
▪ Các nhiệm vụ được đề xuất đặc biệt quan tâm
▪ Các nhà phát triển phải được giao các vai trò:
▪ Ghi chép để ghi lại kết quả của hành động
▪ Người hỗ trợ để duy trì đánh giá
▪ Bắt đầu với những công việc đơn giản
▪ Đừng sa lầy vào các giải pháp đòi hỏi
▪ Giới hạn phiên làm việc trong 60 đến 90 phút
15
Ví dụ
Ví dụ giao diện của một máy tự động bán vé tàu hỏa
16
Đánh giá nói ra ý nghĩ
Ưu điểm:
▪ Sử dụng các tác vụ đại diện thực tế.
▪ Cung cấp thông tin chi tiết về lý lẽ của người dùng.
Nhược điểm:
▪ Có thể khó khiến người dùng nói ra suy nghĩ
▪ Người tham gia có thể bị kiệt sức
Nguyên tắc:
▪ Tiến triển:
▪ Một số tác vụ cốt lõi hoặc đại diện.
▪ Nhiệm vụ đặc biệt quan tâm.
▪ Giới hạn buổi học từ 60 đến 90 phút.
17
Quá trình kiểm thử về tính tiện dụng
Ưu điểm:
▪ Tận dụng môi trường làm việc thực tế.
▪ Xác định các vấn đề nghiêm trọng hoặc tái diễn.
Nhược điểm:
▪ Chi phí thành lập cơ sở cao.
▪ Yêu cầu người dẫn thử nghiệm có chuyên môn về
giao diện người dùng.
▪ Nhấn mạnh việc sử dụng hệ thống lần đầu tiên.
▪ Kém thích hợp để phát hiện các vấn đề không nhất
quán
18
Các thử nghiệm cổ điển
Ưu điểm:
▪ Thu được các thước đo khách quan về hiệu suất
▪ Có thể thu được các thước đo chủ quan về sự hài
lòng của người dùng.
Nhược điểm:
▪ Yêu cầu một thí nghiệm được kiểm soát chặt chẽ để
tiến hành đánh giá.
▪ Người thực hiện thí nghiệm phải có chuyên môn
trong việc thiết lập, chạy và phân tích dữ liệu thu
thập được.
▪ Yêu cầu tạo nhiều nguyên mẫu.
19
Các thử nghiệm cổ điển
Nguyên tắc:
▪ Nêu một giả thuyết rõ ràng và có thể kiểm tra được.
▪ Chỉ định một số lượng nhỏ các biến độc lập được thao
tác.
▪ Cẩn thận chọn phép đo.
▪ Lựa chọn những người tham gia nghiên cứu một cách
hợp lý và phân công họ một cách cẩn thận hoặc ngẫu
nhiên theo các nhóm.
▪ Kiểm soát xu hướng các nhân tố
▪ Thu thập dữ liệu trong một môi trường được kiểm soát.
▪ Áp dụng các phương pháp thống kê để phân tích dữ liệu.
▪ Giải quyết vấn đề dẫn đến việc tiến hành thử nghiệm
20
Các nhóm trọng tâm
Ưu điểm:
▪ Hữu ích cho việc:
▪ Có được những suy nghĩ ban đầu của người dùng.
▪ Tiến hành kiểm tra các ý tưởng.
▪ Dễ dàng thiết lập và hoạt động
▪ Giá thấp.
Nhược điểm:
▪ Yêu cầu người điều hành có kinh nghiệm.
▪ Không hữu ích cho việc thiết lập:
▪ Cách mọi người thực sự làm việc.
▪ Những loại vấn đề về tính tiện dung mà mọi người gặp phải.
Nguyên tắc:
▪ Giới hạn kích thước nhóm từ 8 đến 12.
▪ Thời lượng giới hạn từ 90 đến 120 phút.
▪ Ghi âm lại phiên cho phân tích chi tiết sau này.
21
Các bước tiến hành kiểm thử
Phát triển và tiến hành kiểm thử

1. Phát triển kế hoạch kiểm thử;
2. Chọn lựa người tham gia;
3. Chuẩn bị vật liệu kiểm thử
4. Thực hiện kiểm thử thí điểm (Pilot Test);
5. Tiến hành kiểm thử và thu thập dữ liệu (Real Test)
Phân tích và báo cáo cuối cùng
6. Phân tích, sửa đổi và kiểm thử lại
7. Đánh giá hoạt động của hệ thống
22
Phát triển kế hoạch kiểm thử
▪ Xác định phạm vi của quá trình kiểm thử
▪ Xác định mục đích của quá trình kiểm thử
▪ Các mục tiêu hiệu suất
▪ Quá trình kiểm thử được dự định hoàn thành những gì
▪ Tạo thời một lịch trình thời gian cho quá trình kiểm thử
▪ Xác định phương pháp luận cho quá trình kiểm thử
▪ Loại thử nghiệm được thực hiện
▪ Giới hạn của quá trình kiểm thử
▪ Những người tham gia phát triển
▪ Phát triển các kịch bản để đáp ứng mục đích của quá
trình kiểm thử
▪ Chọn người tham gia kiểm thử
▪ Xác định và lên lịch cho cơ sở hoặc địa điểm kiểm thử
▪ Chạy một kiểm thử thí điểm
23
Chọn lựa người tham gia
▪ Tập hợp những người thích hợp để tham gia Cân

nhắc cho phép người dùng làm việc theo cặp
▪ Chọn số lượng người tham gia thích hợp
▪ Cân nhắc việc cung cấp bồi thường hoặc cung cấp
ưu đãi
24
Chuẩn bị vật liệu kiểm thử
▪ Trong một môi trường chính thức

– Phòng thí nghiệm về tính tiện dụng
▪ Trong một môi trường không chính thức

– Văn phòng hoặc phòng họp
– Một khu vực tại địa điểm làm việc thực tế
▪ Kiểm thử từ xa có kiểm duyệt
25
Chuẩn bị vật liệu kiểm thử - Ví dụ
Đây là phòng kiểm thử chuẩn của Microsoft tại cơ quan đầu
não ở Seattle. Microsoft có 25 phòng kiểm thử như vậy. Người
sử dụng đi vào từ phía phải, người phát triển đi vào từ phía trái
26
Thực hiện kiểm thử thí điểm (Pilot Test)
▪ Chọn một người tham gia

▪ Thiết kế và lắp ráp môi trường kiểm thử
▪ Chạy kiểm thử thí điểm
▪ Phân tích và diễn giải dữ liệu để xem liệu có điều gì
quan trọng bị bỏ qua hay không
▪ Tuyển dụng những người tham gia kiểm thử khi kết
thúc kiểm thử
27
Tiến hành kiểm thử và thu thập dữ liệu
Trước khi bắt đầu kiểm thử:

▪ Giải thích rằng mục tiêu là để kiểm thử phần mềm,
không phải những người tham gia.
▪ Giải thích cách sử dụng các tài liệu và hồ sơ kiểm
thử
▪ Nếu một thỏa thuận đồng ý được ký kết, hãy giải
thích tất cả các thông tin trên đó.
▪ Nếu các giao thức bằng lời nói sẽ được thu thập, hãy
để người tham gia luyện tập cách suy nghĩ.
▪ Đảm bảo rằng tất cả các câu hỏi của người tham gia
đều được trả lời và người tham gia cảm thấy thoải
mái với tất cả các thủ tục.
28
Trong quá trình kiểm thử:

▪ Giảm thiểu số lượng người sẽ tương tác với những
người tham gia.
▪ Nếu những người quan sát sẽ ở trong phòng, hãy
giới hạn họ ở hai hoặc ba người
▪ Cung cấp danh sách kiểm tra để ghi lại
▪ Ghi lại các kỹ thuật và mẫu tìm kiếm mà người tham
gia sử dụng khi cố gắngđể vượt qua một khó khăn.
▪ Nếu người tham gia đang suy nghĩ lớn, hãy ghi lại
các giả định và suy luận được đưa ra
29
Trong quá trình kiểm thử (tiếp):

▪ Ghi lại phiên làm việc bằng máy ghi âm hoặc máy
quay phim.
▪ Không ngắt lời người tham gia trừ khi thực sự cần
thiết.
▪ Nếu người tham gia cần giúp đỡ, hãy cung cấp một
số phản hồi
▪ Theo dõi cẩn thận các dấu hiệu căng thẳng ở những
người tham gia
▪ Duy trì một thái độ tích cực, không có vấn đề gì xảy
ra.
30
Sau quá trình kiểm thử:

▪ Tổ chức một cuộc phỏng vấn cuối cùng với những
người tham gia;
- Cho người tham gia biết những gì đã học được
trong bài kiểm tra.
▪ Cung cấp một bảng câu hỏi tiếp theo yêu cầu người
tham gia đánh giá sản phẩm hoặc các nhiệm vụ
được thực hiện.
▪ Nếu quay video, chỉ sử dụng băng theo những cách
thích hợp
31
Phân tích, sửa đổi và kiểm thử lại
▪ Tổng hợp dữ liệu từ tất cả những người tham gia

thử nghiệm.
▪ Liệt kê những vấn đề mà người tham gia gặp phải.
▪ Sắp xếp các vấn đề theo mức độ ưu tiên và tần suất.
▪ Phát triển các giải pháp cho các vấn đề.
▪ Sửa đổi nguyên mẫu khi cần thiết.
▪ Kiểm thử hệ thống một lần nữa và lại một lần nữa...
32
Đánh giá hệ thống đang hoạt động
▪ Thu thập thông tin về việc sử dụng hệ thống thực tế

thông qua:
▪ Các cuộc phỏng vấn và thảo luận nhóm tập trung.
▪ Các cuộc khảo sát.
▪ Đường dây hỗ trợ.
▪ Hộp thư góp ý trực tuyến hoặc báo cáo sự cố.
▪ Bảng tin trực tuyến.
▪ Các bản tin và hội nghị người dùng.
▪ Ghi nhật ký dữ liệu hiệu suất của người sử dụng
▪ Phản hồi những người sử dụng đã cung cấp phản
hồi
33
Tổng kết bài
▪ Các loại kiểm thử

▪ Các bước kiểm thử
34

All Slides

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

All Slides

Uploaded by

Copyright:

Available Formats

TRƯỜNG ĐẠI HỌC THỦY LỢI

Khoa Công nghệ thông tin – Bộ môn CNPM

TƯƠNG TÁC NGƯỜI - MÁY

▪ Tên môn học: Tương tác người – máy

▪ Cách đánh giá:

▪ Bài tập lớn:

▪ Hiểu quy trình thiết kế giao diện người dùng.

Phần 1: Tổng quan về giao diện người sử dụng

Phần 2: Quy trình thiết kế giao diện người sử dụng

Phần 2: Quy trình thiết kế giao diện người sử dụng (tiếp)

❖ Tài liệu chính:

❖ Tài liệu tham khảo

▪ Một số khái niệm cơ bản về HCI

▪ HCI (Human-Computer Interaction)

Các thành phần trong giao diện người sử dụng

Tâm lý học Xã hội học

Công thái học Interface layout Thiết kế

HCI Faster machines,

▪ UI thường là khó thiết kế, khó lập trình

Phần mềm máy tính làm bạn mệt

Bạn không thấy thoải mái, vui

❖ Ví dụ: Phiếu bầu tổng thống Mỹ, 2000

▪ Giảm thời gian lập trình;

▪ Thiết kế giao diện tốt → giảm thời gian lập trình

▪ Tăng khả năng bán được của sản phẩm

❖Ví dụ: Giao diện phần mềm phù hợp?

Giao diện người sử dụng là phần quan trọng nhất của

▪ Thiết kế tương tác có nghĩa là thiết kế các sản phẩm tương

✓ Thiết kế không phù hợp có thể gây ra sự thất vọng ở mọi

✓ Một số vấn đề sức khỏe cũng có thể phát sinh

▪ Những gì người sử dụng muốn và mong đợi

▪ Chuyên gia thiết kế đồ họa

Apple iMac, 2002

IBM7030, 1961 IBM-PC, 1981

Giao diện phi đồ họa

❖ Cuối những năm 70 – đầu những năm 80:

▪ Các khái niệm cơ bản về HCI

Giảng viên: Nguyễn Thị Phương Trà

▪ Các kiểu tương tác.

▪ Giao diện người sử dụng Web.

▪ Sự kết hợp của các Hệ thống đồ họa thương mại và Web.

▪ Các nguyên tắc thiết kế giao diện người sử dụng

▪ Các dòng lệnh

▪ Người sử dụng phải nhấn một phím chức năng nhất

▪ Được sử dụng trong thu thập và khôi phục dữ liệu

▪ Giao diện người sử dụng đã được mô tả như là tập hợp

▪ Tập hợp những phần tử mà người sử dụng sẽ tương

▪ Các hệ thống đồ họa xuất hiện mang lại một sự thay

▪ Các màn hình đồ họa được giả định trông giống

▪ Sự điều hướng màn hình và các lệnh được thực

▪ Các đối tượng và hành động của màn hình thường

▪ Cấu hình của máy tính ngày càng mạnh và có nhiều

Các hệ thống “thao tác bằng tay trực tiếp (direct

Thao tác bằng tay gián tiếp sẽ sử dụng từ và văn bản

Hãy tìm ví dụ minh họa cho khái niệm

Hầu hết các hệ thống window là sự kết hợp của cả thao

▪ Nghiên cứu và kinh nghiệm đã chỉ ra rằng các hình

▪ Việc mở rộng Trang tin toàn cầu (World Wide Web‐

▪ Thiết kế giao diện chú trọng đến nội dung ‐ hay

▪ Thiết kế giao diện trang Web có một vấn đề lớn về việc

▪ Một ứng dụng Web thường được thiết kế để tập hợp

Nếu như việc giao diện người sử dụng đồ họa đã làm

Một mạng nội bộ Intranet có nhiều đặc tính giống với

▪ Trong lịch sử của tương tác người ‐ máy, nhiều nhà