Transcript C08_ThietKeLayNguoiDungLamTrungTam

CHƯƠNG 8
1
VC
&
BB
Nội dung
1
Định hướng thiết kế hướng đến người dùng
2
Phương pháp làm việc với người dùng
3
Làm việc với khách hàng
4
Thiết kế hướng đến người dùng
NMLT - Mảng hai chiều
2
VC
&
BB
Định hướng thiết kế hướng đến người dùng
 Những vấn đề chung
 Xem xét
 Bảy nguyên tắc
 Quy trình
 Làm việc với người dùng
3
VC
&
BB
Định hướng thiết kế hướng đến người dùng
Những vấn đề chung
 Thiết kế theo ngữ cảnh công việc
 Xem người sử dụng như là một thành viên của nhóm
thiết kế
 Người sử dụng cộng tác tích cực trong qui trình thiết
kế
 Người sử dụng tham gia vào nhóm thiết kế và có thể
đóng góp tích cực ở mọi giai đoạn của qui trình thiết
kế
 Dùng phương pháp lặp
4
VC
&
BB
Định hướng thiết kế hướng đến người dùng
Xem xét
 Khả năng sử dụng
 Sử dụng hướng dẫn
 Dùng ngôn ngữ
 Thiết kế trực quan
5
VC
&
BB
Định hướng thiết kế hướng đến người dùng
Khả năng sử dụng
 Cải thiện khả năng sử dụng của sản phẩm
 Cho phép thử nghiệm để quan sát và ghi lại các
hành động của người tham gia
 Cho phép thử nghiệm phân tích dữ liệu
 Thực hiện
 Quay phim
 Phỏng vấn
 Bảng câu hỏi
6
VC
&
BB
Định hướng thiết kế hướng đến người dùng
Sử dụng hướng dẫn
 Tầm nhìn
 Tra cứu danh mục
 Vấn đề Lỗi
 Dễ dùng, rõ ràng
7
VC
&
BB
Định hướng thiết kế hướng đến người dùng
Dùng ngôn ngữ
 Để rõ ràng cần sử dụng
 Câu ngắn
 Từ phổ thống thay cho từ kỹ thuật
 Hoạt động bằng giọng nói
 động từ
 Cấu trúc câu đơn giản
 Cẩn thận với sự mơ hồ trong các hình thức
 Hài hước
 Phép ẩn dụ
 Các biểu tượng
 Thành ngữ
8
VC
&
BB
Định hướng thiết kế hướng đến người dùng
Thiết kế trực quan
 Sử dụng lưới
 Đơn giản và gọn gàng
 Sử dụng đồ họa
 Minh họa/ Thông báo
 Tăng sự hài lòng của người sử dụng
 Có dung lượng nhỏ
 Nổi bật các yếu tố quan trọng nhất
 Xử dụng văn bản như là một yếu tố đồ họa
 Dè dặt với màu sắc
 Nhóm các yếu tố với nhau
9
VC
&
BB
Định hướng thiết kế hướng đến người dùng
Bảy nguyên tắc
 1. Sử dụng kiến thức trong đầu và trên thế giới
 2. Đơn giản cấu trúc nhiệm vụ
 3. Làm cho mọi điều dễ nhìn thấy
 4. Nhận quyền ánh xạ
 5. Khai thác sức mạnh của những khó khăn (tự
nhiên và nhân tạo)
 6. Thiết kế cho lỗi
 7. Tiêu chuẩn
10
VC
&
BB
Định hướng thiết kế hướng đến người dùng
Bảy nguyên tắc
 1. Sử dụng kiến thức trong đầu và trên thế giới
 2. Đơn giản cấu trúc nhiệm vụ
 3. Làm cho mọi điều dễ nhìn thấy
 4. Nhận quyền ánh xạ
 5. Khai thác sức mạnh của những khó khăn (tự
nhiên và nhân tạo)
 6. Thiết kế cho lỗi
 7. Tiêu chuẩn
11
VC
&
BB
Định hướng thiết kế hướng đến người dùng
Qui trình
 Tiêu chuẩn ISO 13407
 Con người là trung tâm của quy trình thiết kế
 Xác định một quá trình chung mà bao gồm cả con
người như một trung tâm hoạt động trong suốt chu
kỳ thiết kế
 Bốn hoạt động hình thức
 Các ngữ cảnh sử dụng
 Các yêu cầu
 Các giải pháp
 Thẩm định
12
VC
&
BB
Định hướng thiết kế hướng đến người dùng
Hiểu nhu cầu người dùng
 Câu lưu tâm người ta tốt hay xấu ở những điểm nào
 Quan tâm nhưng gì có thể giúp người ta theo cách
thức mà họ hiện đang làm việc
 Suy nghĩ qua những gì có thể cung cấp chất luợng
cho trải nghiệm của người dùng
 Lắng nghe những gì người dùng muốn và đưa chúng
vào thiết kế
 Thử và kiểm tra việc sử dụng theo phương pháp của
người sử dụng
13
VC
&
BB
Định hướng thiết kế hướng đến người dùng
Làm việc với người dùng
 Suy nghĩ cẩn thận về người sử dụng là ai
 Lắng nghe người dùng thảo luận về các giải pháp
thay thế
 Không phải tất cả các giải pháp thiết kế được đánh
giá bởi người sử dụng đều tốt cả
14
&
2
VC
Phân
tích
thiết
kế
UI
ở
mức
rất
cao
BB
Vòng đời kỹ nghệ giao diện người sử dụng.
Nhận biết ai là người sử dụng.
Đo lường tính sử dụng được.
Thiết kế tương tác hướng mục tiêu.
Thiết kế lặp, bao gồm: làm bản mẫu và đánh giá tính
sử dụng được.
 Nghiên cứu tính phản hồi




15
15
&
2
VC
Phân
tích
thiết
kế
UI
ở
mức
rất
cao
BB
Nhận biết người sử dụng (Know the User)
 Quan sát, phỏng vấn số đông, hình thành lý lịch
người dùng(user profile).
 Nhận biết các mục tiêu, quan điểm, thái độ của
user đối với phần mềm
 Họ có kỹ năng gì và mức độ tới đâu?
 Họ sử dụng hệ thống như thế nào?
 Hình thành các kịch bản người sử dụng điển
hình.
 Phân lớp người sử dụng theo kinh nghiệm, trình
độ học vấn, tuổi tác,…
16
16
&
2
VC
Phân
tích
thiết
kế
UI
ở
mức
rất
cao
BB
Đo tính sử dụng được (Benchmarking)
 Phân tích các sản phẩm hay phân tích các giao diện
cạnh tranh theo khám phá (heuristic:khả năng tích
lũy tri thức) và kinh nghiệm.
 Mục tiêu là xác định mức độ tính sử dụng được so
với các hệ thống khác
 Thiết lập mức độ tính sử dụng được đối với giao
diện đang thiết kế
Vd: Hệ thống hiện tại sinh 4.5 lỗi/giờ->Mục tiêu của hệ
thống mới sẽ là 3 lỗi/giờ hoặc trên website người
mới sử dụng mất 8 phút 21 giây mới đặt được vé,
mục tiêu của website mới là 6 phút cho công việc
này
17
17
&
2
VC
Phân
tích
thiết
kế
UI
ở
mức
rất
cao
BB
Thiết kế tương tác hướng mục tiêu (Goal-Oriented
Iteraction Design)
 ID đưa ra sự ghép nối giữa mã trình hệ thống và
người sử dụng. UI có trách nhiệm thực hiện việc
trao đổi thông điệp giữa chúng
 ID đề cập đến thiết kế chức năng, hành vi và thiết
kế trình diễn cuối cùng.
 GOID là thiết kế phần mềm trên cơ sở hiểu các
mục tiêu của con người.
18
18
&
2
VC
Phân
tích
thiết
kế
UI
ở
mức
rất
cao
BB
Thiết kế tương tác hướng mục tiêu (Goal-Oriented
Iteraction Design)
 Mục tiêu (goal) là cái đích, là trạng thái mà người
sử dụng muốn đạt tới.
 Nhiệm vụ (task) là con đường cụ thể để đạt tới
mục tiêu(cách thức), là con đường mà người sử
dụng muốn thực hiện.
 Ví dụ :Goal :cần có gì để ăn, Task: đến tiệm,
hoặc gọi dịch vụ cơm hộp hoặc ra siêu thị mua về
nấu,… Có nhiều cách để đạt mục tiêu
 Nhiệm vụ thì thay đổi, mục tiêu thì không
19
19
&
2
VC
Phân
tích
thiết
kế
UI
ở
mức
rất
cao
BB
Thiết kế lặp (Iteractive Design)
 Thiết kế, kiểm thử, tái thiết kế: xây dựng, đánh
giá bản mẫu. Làm bản mẫu sẽ sớm phát hiện
những thiếu sót của tính sử dụng được.
 Thực hiện vòng lặp sau cho đến khi hết thời gian
hay hết kinh phí :
 Phát hiện các vấn đề liên quan đến tính sử dụng
được.
 Thực hiện sửa chữa các lỗi, hình thành các giao
diện mới.
 Thu thập và lưu trữ các lý do thay đổi thiết kế
 Cuối cùng là đánh giá phiên bản giao diện mới
20
20
&
2
VC
Phân
tích
thiết
kế
UI
ở
mức
rất
cao
BB
Bài tập: Dùng pp thiết kế lặp để thiết kế gd cho
phép user tra cứu sách trong thư viện
Vòng 1:
 Các vấn đề liên quan: thông tin về quyển sách
cần tra cứu, thường chỉ là tên quyển sách
 Thực hiện giao diện
 Lý do thay đổi thiết kế : độc gỉa muốn thông tin
về tác giả ?
 Đánh giá : tìm đúng loại sách và tác giả
21
21
&
2
VC
Phân
tích
thiết
kế
UI
ở
mức
rất
cao
BB
Bài tập: Dùng pp thiết kế lặp để thiết kế gd cho
phép user tra cứu sách trong thư viện
Vòng 2:
 Vấn đề liên quan: thông tin thêm về quyển sách
cần tra cứu-> nhà xuất bản
 Thực hiện giao diện
 Lý do thay đổi thiết kế : độc gỉa muốn thông tin
về nhà xuất bản ?
 Đánh giá phiên bản mới: tìm đúng loại sách và
tác giả, nhà xuất bản,…
Vòng 3 :
 Xuất hiện thêm: năm xuất bản, thêm loại như tạp
chí, tài liệu, …
22
22
&
2
VC
Phân
tích
thiết
kế
UI
ở
mức
rất
cao
BB
Bài tập:
Dùng pp thiết kế lặp để thiết kế gd Web
cho phép bán quần áo
Thiết kế gd Web bán mỹ phẩm
23
23
&
2
VC
Phân
tích
thiết
kế
UI
ở
mức
rất
cao
BB
Nghiên cứu tiếp theo (Follow-Up Studies)
 Các dữ liệu về tính sử dụng được cần được thu
thập sau khi phân phát sản phẩm là quan trọng
cho phiên bản tiếp theo.
 Để có dữ liệu này, ta thực hiện nghiên cứu bằng
các phương pháp phỏng vấn, quan sát, lấy ý kiến
của người sử dụng trên báo chí, email, dữ liệu
log từ phần mềm,…
24
24
VC
&
3
BB
Thiết kế hướng người sử dụng
 Mục đích của phương pháp thiết kế hướng người sử
dụng là để thiết kế ra hệ thống sao cho con người sử
dụng chúng một cách thuận tiện
 Khác với thiết kế truyền thống, thiết kế hướng người
sử dụng trước hết tập trung vào mục tiêu, mô hình
khái niệm, khả năng và ràng buộc của người dùng.
 Nó đòi hỏi phải giao tiếp với người sử dụng trong suốt
quá trình thiết kế.
 Để thiết kế thành công thì người thiết kế phải dành
nhiều thời gian với người sử dụng, quan sát công
việc họ làm, họ là đối tượng nào?
25
25
VC
&
3
BB
Thiết kế hướng người sử dụng
Các bước thiết kế hướng người sử dụng
 Người thiết kế hiểu sâu sắc/chi tiết về người sử dụng
cuối cùng, nhiệm vụ của họ, yêu cầu về tính sử dụng
được của hệ thống,…
 Người sử dụng cuối cùng đóng vai trò tích cực trong
đội ngũ thiết kế, trong giai đoạn phân tích và thiết kế.
Nếu chỉ tham gia phỏng vấn ở giai đoạn trước là
chưa đủ. Họ thường đưa ra câu hỏi:”Tôi sẽ sử dụng
cái này để thực hiện công việc của tôi như thế nào?”
 Lặp lại tiến trình thiết kế
 Người thiết kế và người sử dụng cùng nhau đánh giá
hệ thống, sau đó đưa ra đề xuất sớm nhất và thực
hiện hiệu chỉnh nếu cần.
26
26
VC
&
3
BB
Thiết kế hướng người sử dụng
Các bước thiết kế hướng người sử dụng
Chú ý:
 Việc tham gia của người sử dụng là đặc biệt quan
trọng nhưng người sử dụng không phải là người thiết
kế, họ không thiết kế cái gì và họ không phải luôn
luôn đúng. Hơn nữa, thông thường người sử dụng ít
hiểu biết và ít kinh nghiệm về thiết kế giao diện
 Tiến trình tương tác giữa người thiết kế và người sử
dụng trong quá trình phát triển UI được gọi là phân
tích người sử dụng và phân tích nhiệm vụ
27
27
VC
&
3
BB
Thiết kế hướng người sử dụng
Phân tích người sử dụng:
 Khẳng định tầm quan trọng của thiết kế lặp đối với
giao diện người sử dụng
 Sau một số lần lặp của thiết kế, chúng ta có thể có hệ
thống phần mềm với tính sử dụng cao. Nhưng khởi
đầu thiết kế như thế nào và thu thập thông tin cho
thiết kế ban đầu bằng cách nào?
 Tiến trình thu thập thông tin cho thiết kế lần đầu tiên
gọi là phân tích người sử dụng và phân tích nhiệm vụ.
28
28
VC
&
3
BB
Thiết kế hướng người sử dụng
Mục tiêu của phân tích người sử dụng :
 Nhận biết ai là người sử dụng hệ thống phần
mềm do ta thiết kế
 Họ có kỹ năng gì và mức độ của họ tới đâu?
 Họ sử dụng hệ thống như thế nào?
29
29
VC
&
3
BB
Thiết kế hướng người sử dụng
Hai 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:
 Tuổi, nam/nữ, dân tộc
 Học vấn
 Khả năng vật lý
 Kinh nghiệm sử dụng máy tính
 Các kỹ năng (gõ phím, đọc,…)
 Kinh nghiệm chuyên môn, nghiệp vụ
 Tần suất sử dụng hệ thống
 Môi trường làm việc và ngữ cảnh xã hội khác
 Quan hệ giao tiếp, nền văn hóa
30
30
VC
&
3
BB
Thiết kế hướng người sử dụng
Hai nhiệm vụ chính của phân tích người sử dụng:
 Phân nhóm người sử dụng theo các yếu tố, mỗi
nhóm cùng chia sẻ các đặc tính tương tự:
 Các mức độ kỹ năng sử dụng máy tính và kỹ
năng nghiệp vụ, phân nhóm người sử dụng thành
nhóm người mới bắt đầu, nhóm người học việc,
nhóm người có kinh nghiệm và nhóm chuyên gia.
 Các mức độ tần suất sử dụng hệ thống: phân
nhóm người sử dụng thành nhóm người sử dụng
thường xuyên và nhóm thỉnh thoảng sử dụng
phần mềm.
31
31
VC
&
3
BB
Thiết kế hướng người sử dụng
Bài tập:
 Cho biết các yếu tố quan trọng của user là trẻ em độ
tuổi từ 6->11.
 Các yếu tố quan trọng của user là người trưởng
thành
 Đối với người trưởng thành : phân chia theo độ tuổi,
trình độ học vấn, kỹ năng sử dụng máy tính, kỹ năng
chuyên môn,
 Nêu các kết quả phân tích người sử dụng là nhân
viên ngân hàng, nhân viên trực tổng đài điện thoại,
thu ngân, thủ thư, …
32
32
VC
&
3
BB
Thiết kế hướng người sử dụng
Ai là người sử dụng?
 Lý do để phân tích người sử dụng là rõ ràng : người
thiết kế không phải là người sử dụng, do đó phải tìm
ra ai thực sự là người sử dụng
 Có khi người phát triển UI cho rằng phân tích người
sử dụng là hiển nhiên và bỏ qua bước này, có thể
dẫn đến làm hỏng giao diện hệ thống
 Việc hiểu biết về người sử dụng không chỉ có ý nghĩa
là hiểu biết về tính cách của từng cá nhân mà còn cả
về tình huống sử dụng hệ thống của họ. Họ sử dụng
phần mềm trong môi trường nào? Cái gì làm họ mất
tập trung? Ngữ cảnh xã hội là gì?
33
33
VC
&
3
BB
Thiết kế hướng người sử dụng
Ai là người sử dụng?
 Khía cạnh khác cần quan tâm về tình huống người sử
dụng là quan hệ của họ với người sử dụng khác trong
cùng tổ chức. Vấn đề là người sử dụng có thể giúp
đỡ nhau trong khi sử dụng hệ thống UI hay họ làm
việc độc lập?
 Mỗi ứng dụng có thể có nhiều nhóm người sử dụng
khác nhau.
34
34
VC
&
3
BB
Thiết kế hướng người sử dụng
Phân tích người sử dụng như thế nào?
 Tìm ra một số người đại diện và phỏng vấn họ, các
tính chất nổi bật có thể được bộc lộ sau khi trả lời
bằng bảng câu hỏi thăm dò
 Các chi tiết về ngữ cảnh và môi trường có thể được
thu thập bằng cách phỏng vấn trực tiếp người sử
dụng, tốt nhất là quan sát người sử dụng thực hiện
nhiệm vụ hằng ngày của họ như thế nào.
 Thực tế rất khó tiếp cận người sử dụng. Các công ty
có thể dựng nên các rào cản giữa người sử dụng và
người phát triển để bảo vệ lẫn nhau. Nếu biết ai là
người phát triển, thì người phát triển có thể bị quấy
rầy bởi các lỗi phần mềm và các câu hỏi về phần
mềm, mà lẽ ra để dành cho các nhân viên kỹ
35 thuật.
35
VC
&
3
BB
Thiết kế hướng người sử dụng
Thí dụ về phân tích người sử dụng :
 Giả sử nhiệm vụ đặt ra là thiết kế hệ thống cho
phép người mua tạp hóa và thanh toán tiền (tự
thanh toán). Kết quả phân tích người sử dụng
như sau:
 Ai là người sử dụng (đối tượng sử dụng):
 người mua tạp hóa, mua sắm
 Tuổi tác, khả năng hoạt động (năng động, thích
ứng, phù hợp,…)
 Kinh nghiệm sử dụng máy tính(căn bản, thường
xuyên,…)
 Không được đào tạo bài bản
 Có hiểu biết về thực phẩm nhưng không hiểu biết về
kỹ thuật phân loại thực phẩm, kỹ thuật kiểm
36 kê hàng
hóa,…
36
VC
&
3
BB
Thiết kế hướng người sử dụng
Thí dụ về phân tích người sử dụng :
 Giả sử nhiệm vụ đặt ra là thiết kế hệ thống cho
phép người mua tạp hóa và thanh toán tiền (tự
thanh toán). Kết quả phân tích người sử dụng
như sau:
 Nhóm người sử dụng chính:
 phụ nữ thường xuyên mua sắm thực phẩm cho gia
đình và thường dẫn theo trẻ em.
 Các đối tượng khác
 Nhân viên bán hàng giúp khách hàng
37
37
VC
&
3
BB
Thiết kế hướng người sử dụng
Ví dụ 2 về phân tích nhóm người sử dụng theo các
yếu tố quan trọng
Yêu cầu: phát triển hệ thống phần mềm kế toán cho
các doanh nghiệp nhỏ
 Mức độ kỹ 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 kế toán: bắt đầu (5%), học
việc(15%), kinh nghiệm(50%), thành thạo(30%)
 Tần suấ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%),
38
Macintosh(35%), khác(10%), không biết(5%)
38
VC
&
3
BB
Thiết kế hướng người sử dụng
 Từ số liệu thống kê trên, ta có thể tính toán tìm
ra nhóm người sử dụng chính của hệ thống như
sau:
 Tính xác suất cho từng tổ hợp các đặc tính của
người sử dụng
 Xác suất cao chỉ ra nhóm người sử dụng chính
39
39
VC
&
3
BB
Thiết kế hướng người sử dụng
STT
KỸ NĂNG
MÁY TÍNH
KỸ NĂNG
NGHIỆP VỤ
TẦN SUẤT
SỬ DỤNG
MÔI TRƯỜNG
TÍNH TOÁN
1
Experienced
Experienced
Frequent
Windows
2
Experienced
Experienced
Frequent
Windows
3
Novice
Experienced
Frequent
Windows
4
Experienced
Expert
Frequent
Windows
Expert
Beginner
Occasional
Don’t know
XÁC
SUẤT(%)
…
128
40
40
VC
&
3
BB
Thiết kế hướng người sử dụng
Phân tích nhiệm vụ.
 Là quá trình thu thập dữ liệu về nhiệm vụ mà người
sử dụng thực hiện và phân tích chúng để hiểu biết
sâu sắc về các nhiệm vụ đó.
 Phân tích nhiệm vụ tập trung vào các hành động bên
ngoài hệ thống của người sử dụng, còn phân tích hệ
thống hướng tới thiết kế bên trong hệ thống.
 Phân tích chi tiết các nhiệm vụ dẫn đến việc mô tả
nhiệm vụ rõ ràng, bảo đảm
41
41
VC
&
3
BB
Thiết kế hướng người sử dụng
Phân tích nhiệm vụ.
 UI phù hợp nhiệm vụ người sử dụng. Việc hiểu lầm
những gì mà người sử dụng muốn làm sẽ dẫn đến
thiết kế UI kém. Việc phân tích và mô tả nhiệm vụ
đầy đủ sẽ tránh sai sót.
 Nhiệm vụ (Task): là hành động mà người sử dụng
muốn thực hiện
 Mục tiêu (goal): là trạng thái mà người sử dụng muốn
đạt tới.
42
42
VC
&
3
BB
Thiết kế hướng người sử dụng
Sự khác nhau giữa phân tích hệ thống và phân tích
nhiệm vụ:
 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
43
43
VC
&
3
BB
Thiết kế hướng người sử dụng
Các câu hỏi cần trả lời khi phân tích nhiệm vụ là:
 Người sử dụng làm cái gì?
 Họ làm việc bằng công cụ gì?
 Họ cần phải hiểu biết những gì khi làm việc?
44
44
VC
&
3
BB
Thiết kế hướng người sử dụng
Nhiệm vụ :
Vd: Hệ thống quản lý thư viện
Mục tiêu: Mượn sách thư viện
Nhiệm vụ:?
 Đến thư viện
 Tìm sách trên hệ thống máy tính
 Đến giá để sách và lấy sách
 Đem sách đăng ký với quản thư trước khi
rời khỏi thư viện
45
45
VC
&
3
BB
Thiết kế hướng người sử dụng
Phân tích nhiệm vụ phân cấp (HTA Hierarchical Task
Analysis)
 Suy nghĩ tổng thể về vấn đề cần giải quyết đó là
nhiệm vụ mức đỉnh
 Sau đó phân chia chúng thành tập các nhiệm vụ con
(subtasks, subgoals), chúng là các bộ phận làm thỏa
mãn mục tiêu tổng thể
 Khi nhận ra danh sách các nhiệm vụ, ta phải bổ
sung chi tiết
 Mỗi nhiệm vụ trong phân tích nhiệm vụ có các thành
phần sau: mục tiêu, tiền điều kiện và phân rã nhiệm
vụ thành nhiệm vụ con
46
46
VC
&
3
BB
Thiết kế hướng người sử dụng
Phân tích nhiệm vụ phân cấp (HTA Hierarchical
Task Analysis)
 Mục tiêu: tên nhiệm vụ
 Tiền nhiệm vụ: là điều kiện cần thỏa mãn trước
khi thực hiện nhiệm vụ hiện hành
 Là những nhiệm vụ mà nhiệm vụ hiện hành phụ
thuộc vào
 Là thông tin hay sự vật mà người sử dụng cần
biết để thực hiện nhiệm vụ.
 Phân rã nhiệm vụ thành nhiệm vụ con
47
47
VC
&
3
BB
Thiết kế hướng người sử dụng
Qui tắc:
 Mỗi task phải là closure, nghĩa là task kết thúc với
mục tiêu có ý nghĩa đối với người sử dụng.
 Mỗi task cần được thực hiện kể từ khi kích
hoạt(trigger) cho đến khi đóng(closure)
 Nếu task không tự kết thúc được thì người sử
dụng có khả năng kết thúc task đó
 Cân nhắc việc lựa chọn task cho hệ thống
48
48
VC
&
3
Thiết kế hướng người sử dụng
BB
Phân tích nhiệm vụ bằng cách nào?
 Cách tốt nhất để thu thập thông tin cho phân tích
người sử dụng là phỏng vấn và quan sát. Thông
thường người thiết kế quan sát cách người sử
dụng thực hiện nhiệm vụ.

Vd: quan sát thu ngân trong cửa hàng tạp hóa tính tiền để
hiểu được nhiệm vụ tính tiền tạp hóa
 Kết quả của phân tích nhiệm vụ là danh sách
nhiệm vụ hiện hành của người sử dụng, danh
sách các đối tượng mà người sử dụng nhìn thấy
vì nó là quan trọng đối với cái mà người sử dụng
làm
49
49
VC
&
3
BB
Thiết kế hướng người sử dụng
Mẫu mô tả nhiệm vụ của hệ thống quản lý khách sạn:
1.Tiếp tân:
 T1.1: Đặt phòng :
 T1.2: Check in : một số khách đã đặt trước, một số
không
 T1.3:Check out: Tính tiền, in báo giá. Vấn đề: hàng
đợi check out vào buổi sáng. Giải pháp : tự động
check out
 T1.4: Đổi phòng: có thể đổi phòng vào bất kỳ thời
điểm nào khi đang ở khách sạn
 T1.5: Dịch vụ giữ đồ và ăn sáng: ăn sáng hằng ngày,
dịch vụ giữ đồ vào bất kỳ thời điểm nào
50
50
VC
&
3
BB
Thiết kế hướng người sử dụng
Mẫu mô tả nhiệm vụ của hệ thống quản lý khách
sạn:
2.Nhân viên
 T2.1: Dọn phòng
 T2.2:
 T2.3:
 Mỗi nhiệm vụ cần được mô tả chi tiết hơn.
 Vd:
 T2.1: Check in
 Khởi đầu: khi khách đến, kiểm tra 1 số thủ tục, giấy tờ
 Kết thúc: Giao chìa khóa phòng cho khách. Bắt đầu
tính tiền
51
51
VC
&
3
BB
Thiết kế hướng người sử dụng
Tần số thực hiện nhiệm vụ:
Sự khó khăn xảy ra: khi khách đến theo đoàn
Mẫu mô tả nhiệm vụ:
 Task header: tiêu đề nhiệm vụ
 Number and Name: tên và số hiệu
 Start: bắt đầu nhiệm vụ
 End: Kết thúc(hoàn thành) nhiệm vụ. Nhiệm vụ có
thể không hoàn thành, hệ thống cần ứng xử cho
phù hợp
 Nhiệm vụ được thực hiện thường xuyên như thế
nào.
52
52
VC
&
3
BB
Thiết kế hướng người sử dụng
 Mô tả nhiệm vụ con(subtask): trọng tâm của việc mô
tả nhiệm vụ là mô tả các nhiệm vụ con
MÔ TẢ TRẬT TỰ CÁC NHIỆM VỤ CON BẰNG BiỂU ĐỒ
Vd: mô tả nhiệm vụ con cho nhiệm vụ “Mượn sách ở
thư viện” như sau:
1.Đi đến thư viện
2.Tìm sách mong muốn
2.1 Tìm trong catalogue
2.2 Tìm trên màn hình máy tính
2.3 Nhập các tiêu chí tìm kiếm
2.4 Nhận biết sách muốn mượn
(kiểm tra thông tin về sách:
tác giả,nxb, năm xb,…)
2.5 Ghi lại vị trí để sách
3.Đi đến giá sách và chọn lựa sách
4.Lấy sách ra đăng ký với thủ thư
53
53
VC
&
3
BB
Thiết kế hướng người sử dụng
Mượn sách
từ thư viện
Đi đến thư
viện
1
Tìm trong
Catalogue
2.1
Tìm sách
muốn
mượn 2
Tìm trên
màn hình
máy tính
2.2
Chọn lựa
sách từ giá
sách
3
Nhập các
tiêu chí tìm
kiếm 2.3
Đem sách
đến bàn
đăng ký với
thủ thư
4
Nhận dạng
sách muốn
mượn
2.4 54
Ghi lại vị
trí để sách
2.5
54
VC
&
3
BB
Thiết kế hướng người sử dụng
Phương pháp chuyển đổi sang thiết kế GUI
1. Ánh xạ yêu cầu người sử dụng trong luồng
nhiệm vụ vào các đối tượng nhiệm vụ
• Các thực thể của đối tượng nhiệm vụ
• Các thuộc tính của đối tượng nhiệm vụ
• Các hành động áp dụng vào các đối tượng
nhiệm vụ
• Quan hệ chính giữa các đối tượng nhiệm vụ
• Thử nghiệm tính sử dụng được của các đối
tượng nhiệm vụ đối với luồng nhiệm vụ
55
55
VC
&
3
BB
Thiết kế hướng người sử dụng
Phương pháp chuyển đổi sang thiết kế GUI
2. Ánh xạ đối tượng nhiệm vụ vào các đối tượng
GUI
• Các thực thể của đối tượng GUI
• Quan hệ chính giữa các đối tượng GUI
• Định nghĩa các cửa sổ của các đối tượng GUI
• Các khung nhìn của các đối tượng GUI
• Các lệnh trên các đối tượng GUI
• Thử nghiệm tính sử dụng được của các đối
tượng GUI đối với luồng nhiệm vụ.
56
56
VC
&
3
BB
Thiết kế hướng người sử dụng
PHÂN TÍCH CHỨC
NĂNG HAY PHÂN
TÍCH HƯỚNG ĐỐI
TƯỢNG
PHÂN TÍCH
NHIỆM VỤ
TRỌNG TÂM
Máy tính
Con người
MỤC TIÊU
Làm đầu vào cho tiến trình Làm đầu vào cho
thiêt kế phần mềm hay
thiết kế UI và tài liệu
cấu trúc dữ liệu
sử dụng
CÁC ĐỐI TƯỢNG
RA
Dữ liệu và các chức năng
Nhiệm vụ người sử
dụng
TÀI LIÊU RA
Đặc tả chức năng và đặc
tả kiến trúc
Đặc tả UI và hướng
dẫn phong cách 57
57
tương tác
VC
&
3
BB
Thiết kế hướng người sử dụng
Quan hệ giữa phân tích người sử dụng và phân tích nhiệm
vụ.
 Mục tiêu của phân tích nhiệm vụ và phân tích người
sử dụng là để có được bức tranh về mô hình trí tuệ
(metal model) của người sử dụng.
 Mô hình trí tuệ là tập các hiểu biết về hệ thống làm
việc như thế nào. Người sử dụng tương tác với hệ
thống thông qua tập các hiểu biết này
58
58
VC
&
3
BB
Thiết kế hướng người sử dụng
Quan hệ giữa phân tích người sử dụng và phân tích nhiệm
vụ.
 Mỗi người sử dụng có mô hình trí tuệ riêng đối với hệ
thống. Nhiệm vụ của người thiết kế là giúp người sử
dụng phát triển được mô hình trí tuệ hiệu quả. Mô
hình trí tuệ rất quan trọng đối với tính sử dụng được
của UI
 Mô hình trí tuệ được phát triển để hiểu, diễn giải và
thực hiện. Hơn nữa, trên cơ sở mô hình trí tuệ, người
sử dụng có khả năng dự báo hành động cần thiết để
thực hiện công việc khi quên hay khi chưa gặp các
59
hành động như vậy trước đây.
59
VC
&
2
BB
Phương pháp làm việc với người dùng
Phương pháp Sắp xếp thẻ (Card sorting)
Nguyên lý thiết kế của Nielsen
Bảy nguyên tắc thiết kế của Donald A. Norman
60
60
VC
&
2
BB
Phương pháp sắp xếp thẻ (card sorting)
 Thẻ phân loại là một kỹ thuật đơn giản trong sử dụng
kinh nghiệm thiết kế, nơi một nhóm các chuyên gia đề
ra hoặc "người sử dụng" không có kinh nghiệm với
thiết kế, được hướng dẫn để tạo ra một cây thể loại
hoặc folksonomy.
 Là một phương pháp hữu ích cho việc thiết kế
kiến ​trúc thông tin, quy trình công việc, cấu trúc menu,
hoặc đường dẫn điều hướng trang web.
61
61
VC
&
2
BB
Phương pháp sắp xếp thẻ (card sorting)
Các bước thực hiện:
1. Chuẩn bị các thẻ
 Tạo danh sách các chủ đề nội dung.
 Đối với một trang web mới, danh sách các chủ đề nội dung
của các loại thông tin mà bạn có thể có trên trang web
 Đối với một trang web hiện có, liệt kê / loại phổ biến quan
trọng nhất của nội dung
 Để tạo ra danh sách này:
• Xem xét nội dung của bạn được liệt kê trong hàng tồn kho nội
dung .
• Xác định các nội dung quan trọng nhất hoặc sử dụng thường
xuyên nhất
62
62
VC
&
2
BB
Phương pháp sắp xếp thẻ (card sorting)
2. Quyết định xem bạn có thể làm một loại thẻ vật lý hoặc sử dụng
phần mềm thẻ phân loại trực tuyến.
 Nếu bạn đang sử dụng phần mềm thẻ phân loại trực tuyến,
tham khảo ý kiến ​các hướng dẫn phần mềm.
 Nếu bạn sẽ được tiến hành một thẻ loại sử dụng thẻ vật lý,
viết từng chủ đề trên một thẻ chỉ số riêng biệt.
• Sử dụng nhãn tự dính và một trình xử lý. Các thẻ sẽ được gọn
gàng, rõ ràng, và nhất quán.Bạn sẽ có danh sách các chủ đề
trong máy tính để phân tích sau.
• Đánh số các thẻ ở góc dưới cùng hoặc trên lưng. Điều này giúp
bạn khi bạn bắt đầu phân tích các thẻ.
• Có thẻ trống có sẵn cho người tham gia để thêm chủ đề và đặt
tên cho nhóm họ làm khi họ sắp xếp các thẻ.
• Xem xét sử dụng một thẻ màu khác nhau để có người tham gia
đặt tên cho nhóm.
63
63
VC
&
2
BB
Phương pháp sắp xếp thẻ (card sorting)
Thiết lập phiên
 Kế hoạch khoảng một giờ cho mỗi phiên,
 Nếu bạn có nhiều thẻ, tổ chức không gian.
 Cho các loại thẻ giấy, đảm bảo người tham gia có đủ chỗ để
để có thể dán các thẻ này lên bảng hay tường một cách luân
phiên.
 Đối với các loại thẻ trực tuyến, đảm bảo có một máy tính với
kết nối internet cũng như phòng cho cả người tham gia (s) và
hỗ trợ để ngồi thoải mái.
 Kế hoạch người điều hành hoặc một thành viên trong nhóm khả
ghi chú các hoạt động hay phát biểu của những người tham gia.
64
64
VC
&
2
BB
Phương pháp sắp xếp thẻ (card sorting)
Dẫn phiên
 Các người tham gia các bộ thẻ. Giải thích rằng bạn đang yêu
cầu được giúp đỡ để tìm loại thông tin mà bạn cần.
 Trong một loại thẻ mở, giải thích rằng bạn muốn xem các thẻ
của những người tham gia, và nhóm của bạn nên đặt tên cho
từng nhóm thẻ.
Nếu bạn đang tiến hành một loại thẻ đóng, giải thích rằng bạn
muốn xem cách người tham gia để có thể phân loại thẻ cho phù
hợp.
 Yêu cầu người tham gia nói chuyện lớn tiếng trong khi làm
việc. Bạn muốn hiểu suy nghĩ của người tham gia, lý do, và thất
vọng.
65
65
VC
&
2
BB
Phương pháp sắp xếp thẻ (card sorting)
Dẫn phiên
 Trong quá trình tham gia cố gắng giảm thiểu sự gián
đoạn nhưng khuyến khích người tham gia suy nghĩ
lớn tiếng. Cho phép người tham gia:
 Thêm thẻ - ví dụ, để chỉ ra các siêu liên kết bên
hoặc các chủ đề bổ sung.
 Đưa thẻ sang một bên để chỉ ra chủ đề người
tham gia sẽ không muốn trên trang web.
 Nếu, cuối cùng, người tham gia có quá nhiều nhóm
cho trang chủ, yêu cầu có thể kết hợp một số nhóm
thành một.
66
66
VC
&
2
BB
Phương pháp sắp xếp thẻ (card sorting)
 Yêu cầu người tham gia để đặt tên cho mỗi thể loại.
 Trong một loại thẻ mở, cung cấp cho người tham gia
một chồng thẻ màu khác nhau. Yêu cầu người tham gia
sử dụng thẻ màu để đặt tên cho mỗi nhóm. Hãy hỏi
những gì từ người tham gia sẽ mong đợi để xem trên
trang chủ hay trang thứ hai cấp sẽ dẫn người tham gia
với nhóm cụ thể của mục nội dung.
 Trong một loại thẻ khép kín, hỏi về kỳ vọng từ, tổ chức
thẻ cuối cùng của họ, và theo dõi các câu hỏi khác có
thể cung cấp cái nhìn sâu sắc và quan sát có giá trị cho
nghiên cứu của bạn.
 Cuối cùng, cảm ơn những người tham gia.
67
67
VC
&
2
BB
Phương pháp sắp xếp thẻ (card sorting)
Sắp xếp Phiên từ xa
Tạo danh sách các chủ đề nội dung. Chủ đề có thể cụm từ, lời nói, vv, và
có thể rất cụ thể hoặc tổng quát.
 Chuẩn bị các thẻ theo hướng dẫn phần mềm.
 Gửi email tham gia của bạn một liên kết để nghiên cứu. Cung cấp
hướng dẫn cho các loại (cho dù mở hay đóng) và cho họ biết khoảng
bao lâu phiên nên làm để hoàn thành.
 Nếu một hộp bình luận có sẵn, đôn đốc, tham gia sử dụng lĩnh vực này
để ghi lại bất kỳ quan sát hoặc câu hỏi. Trong khi bạn sẽ không thể trả
lời cho họ trong thời gian thực cho người tham gia, những ý kiến ​có thể
hữu ích cho việc phân tích của bạn.
 Cảm ơn những người tham gia cho thời gian của mình
68
68
VC
&
2
BB
Phương pháp sắp xếp thẻ (card sorting)
Phân tích dữ liệu của bạn
 Chuẩn bị dữ liệu của bạn để phân tích.
 Nếu bạn sử dụng phần mềm thẻ phân loại trực
tuyến, tham khảo ý kiến ​các hướng dẫn phần
mềm. Các phần mềm sẽ phân tích dữ liệu tham
gia trong nhiều cách khác nhau.
 Nếu bạn sử dụng thẻ vật lý cho các kiểm tra, hoặc
chụp ảnh các loại hoặc sử dụng những con số trên
thẻ để nhanh chóng ghi lại những gì người tham
gia đã làm. Bức ảnh hoặc viết tên người tham gia
đã cung cấp cho mỗi nhóm và số lượng thẻ người
tham gia bao gồm dưới tên đó. Sau đó, bạn có thể
cải tổ các thẻ cho phiên tiếp theo.
69
69
VC
&
2
BB
Phương pháp sắp xếp thẻ (card sorting)
Phân tích dữ liệu của bạn
• Tạo ra một tập tin trên máy tính cho mỗi phiên để
thu thập một bức tranh hoàn chỉnh của bản đồ trang
web chi tiết mỗi người dùng tạo ra.
• Làm việc từ danh sách ban đầu của bạn về chủ đề
và di chuyển xung quanh chủ đề để tái tạo các
nhóm mỗi người tham gia và nhập tên của người
tham gia mà cho các nhóm.
• Nếu bạn sử dụng một loại thẻ vật lý, bạn cũng có
thể chụp một bức ảnh của thẻ loại thành để tham
khảo sau.
 Phân tích thông tin định tính dựa trên ý kiến ​của người
dùng.
70
70
VC
&
2
BB
Phương pháp sắp xếp thẻ (card sorting)
 Phân tích thông tin định lượng dựa trên:
 Mà thẻ xuất hiện cùng nhau thường xuyên nhất
 Thường xuyên xuất hiện trong thẻ chuyên mục cụ thể
 Đối với một phân tích chi tiết hơn về kết quả, sử dụng các ghi
chú và ghi tên của người tham gia và số thẻ dưới tên của mỗi
người bạn để tìm sự tương đồng từ các phiên khác nhau.
 Đối với một phân tích chi tiết hơn, hãy xem xét sử dụng một
bảng tính Excel để hiển thị các mối quan hệ giữa các thẻ hoặc
sử dụng một trong các chương trình phần mềm có sẵn để phân
tích dữ liệu của bạn.
 Sau khi phân tích các dữ liệu từ phân loại thẻ, bạn cần phải có
thông tin hữu ích cho cơ cấu kiến ​trúc thông tin của trang
web. Bạn nên sử dụng các kết quả của loại thẻ của bạn để giúp
bạn xác định chuyển hướng trang web của bạn.
71
71
VC
&
2
BB
Phương pháp sắp xếp thẻ (card sorting)
Thực tiễn tốt nhất cho cả các loại thẻ
 Hạn chế số lượng thẻ. Nó là hấp dẫn để muốn tham gia để sắp
xếp "ALL" nội dung của bạn, nhưng hãy chú ý của người tham
gia mệt mỏi. Chúng tôi muốn giới thiệu 30 đến 40 ở bên ngoài
tuyệt đối, đặc biệt là đối với một loại mở.
 Nếu có thể, ngẫu nhiên tự trình bày để mỗi phần nội dung có
một cơ hội để được sắp xếp trước đó trong phiên giao dịch.
 Cung cấp những người tham gia với một ước tính bao lâu các
loại thẻ sẽ mất trước khi bắt đầu phiên giao dịch để giúp họ đánh
giá tốt hơn thời gian và nỗ lực cần thiết.
72
72
VC
&
2
BB
Phương pháp sắp xếp thẻ (card sorting)
Thực tiễn tốt nhất cho cả các loại thẻ
 Xem xét các lợi ích của việc yêu cầu người tham gia để hoàn
thành sắp xếp của bạn. Đối với một loại mở, nếu có thể xem xét
yêu cầu họ để sắp xếp các thẻ, nhưng có lẽ không ghi nhãn, vì
đó có thể là một phần khó khăn hơn trong những nhiệm vụ, cung
cấp cho bạn đã giới hạn các mục của bạn như đề nghị.
 Hãy xem xét một loại mở như phần 1 và loại đóng như phần 2
của quá trình của bạn. Một cho phép bạn tìm hiểu những gì đi
cùng với nhau, trong khi 2 cho phép bạn thực sự kiểm tra nhãn
của bạn để xem họ là trực quan để tham gia của bạn.
73
73
VC
&
BB
Kinh nghiệm thiết kế của Nielsen
 Phù hợp với thế giới thực
 Nielsen gọi hướng dẫn này là “Speak the user’s
language”
 Nếu user nói tiếng Anh thì UI phải bằng tiếng Anh
 Tránh biệt ngữ chuyên môn
 Các từ chuyên môn có thể được sử dụng cho lĩnh
vực ứng dụng khi users là chuyên gia trong lĩnh vực
ứng dụng.
• Ví dụ khi thiết kế giao diện cho các bác sỹ thì phải có các từ
chuyên môn
 Khi user được quyền đặt tên trong UI thì họ phải
được tự do lựa chọn tên. Nên tránh giới hạn độ dài
và nội dung.
Bài 6: Nguyên lý thiết
kế giao diện
74/29
dvduc-2007/10
 Khi thiết kế giao diện để user nhập lệnh hay từ khóa
74
VC
&
BB
Kinh nghiệm thiết kế của Nielsen
 Nhất quán và chuẩn
 Kinh nghiệm thứ hai là nhất quán, hay còn gọi là “Principle of
Least Surprise”
• Không được làm users ngạc nhiên với cách mà lệnh và đối
tượng giao diện hoạt động.
 Những cái tương tự cần phải có hình dáng và hành vi tương
tự.
 Loại nhất quán quan trọng khác là cách diễn đạt thông qua
toàn bộ UI
• Nếu sử dụng “share price” ở 1 nơi, “stock price” và “stock quote”
thì user sẽ do dự về 3 vấn đề khác nhau trong hệ thống.
 “Phù hợp với thế giới thực” và “Nhất quán” có mâu thuẫn?
• Phù hợp thế giới thực: Yêu cầu hỗ trợ từ động nghĩa (delete,
erase và remove) cho lệnh.
• Nhất quán: Yêu cầu chỉ 1 tên cho cùng lệnh
• Giải pháp: Khi user nói thì cho phép từ đồng nghĩa; khi UI nói thì
phải nhất quán, luôn sử dụng cùng 1 tên cho
cùng 1 lệnh
hay
Bài 6: Nguyên lý thiết
kế giao diện
75/29
đối tượng.
75
VC
&
BB
Kinh nghiệm thiết kế của Nielsen
 Nhất quán và chuẩn (tt)
 Thứ tự lệnh-đối số là loại nhất quán khác, thực tế đã sử dụng
cả hai loại như sau:
• Thứ tự danh từ-động từ trong GUI: User chọn đối tượng sau đó
chọn lệnh tác động trên đối tượng.
• Thứ tự động từ-danh từ: Kích hoạt lệnh trước sau đó chọn đối số.
 Các loại nhất quán
• Nhất quán trong: Nhất
quán ngay trong ứng
dụng
• Nhất quán ngoài : Nhất
quán giữa các ứng dụng
trong cùng platform.
• Nhất quán ẩn dụ: Nhất
quán trong việc chọn
ẩn dụ
76/29
Bài 6: Nguyên lý thiết kế giao diện
76
VC
&
BB
Kinh nghiệm thiết kế của Nielsen
 Trợ giúp và tài liệu
 Users không đọc trợ giúp và tài liệu, chí ít cho đến
thời điểm trước khi sử dụng UI.
• Họ muốn dành thời gian để làm việc ngay để đạt mục tiêu,
không học về cách hoạt động của hệ thống.
 Cẩm nang sử dụng và hướng dẫn trực tuyến là sống
còn
• Thông thường khi users bị “tắc” khi sử dụng họ mới mở đến
tài liệu.
 Trợ giúp cần phải có các khả năng sau
•
•
•
•
•
Tìm kiếm theo chủ đề
Phù hợp ngữ cảnh
Hướng nhiệm vụ
Cụ thể
Ngắn gọn
77/29
Bài 6: Nguyên lý thiết kế giao diện
77
VC
&
BB
Kinh nghiệm thiết kế của Nielsen
 Người sử dụng làm chủ
 Nielsen còn gọi kinh nghiệm này là “Clearly Marked
Exits”
 Phải cung cấp khả năng Undo
 Các thao tác cần nhiều thời gian thì phải có khả năng
hủy (cancelable)
 Tất các các hộp thoại nên có phím Cancel.
 Ví dụ Nhận xét hộp thoại sau:
78/29
Bài 6: Nguyên lý thiết kế giao diện
78
VC
&
BB
Kinh nghiệm thiết kế của Nielsen
 Quan sát trạng thái hệ thống
 Kinh nghiệm này còn được gọi là “Feedback”.
 Luôn thông báo Users về trạng thái của hệ thống.
 Các dấu hiệu (idioms)
• Thay đổi hình dạng con chạy
• Highlight.
• Thanh trạng thái và chỉ báo (progress).
 Không nên cài đặt “dày đặc” phản hồi
• Ví dụ hộp thoại không phù hợp.
 Khuyến cáo sử dụng
• Hành động <0.1 s, cảm giác hành động xảy ra tức thì
• Hành động xảy ra trong khoảng 0.1-1.0 s, người sử dụng nhận ra
hành động nhưng không cần phản hồi
• Hành động trong khoảng 1-5s, hiển thị con chạy “busy”
• Hành động kéo dài trên 5 s, hiển thị Progress bar.
79/29
Bài 6: Nguyên lý thiết kế giao diện
79
VC
&
BB
Kinh nghiệm thiết kế của Nielsen
 Mềm dẻo và hiệu quả (Efficiency)
 Còn gọi là “Shortcuts”
 Cần cung cấp các “đường tắt” để thực hiện các thao
tác thường xuyên
•
•
•
•
•
Phím lệnh cấp tốc (Ctrl+C, Ctrl+B, Ctrl+O...)
Viết tắt dòng lệnh
Phong cách
Bookmarks
Lịch sử thực hiện
80/29
Bài 6: Nguyên lý thiết kế giao diện
80
VC
&
BB
Kinh nghiệm thiết kế của Nielsen
 Tránh lỗi
 Tránh lỗi
• Giải pháp có thể: Chọn lệnh thay nhập bàn phím. Chọn lệnh bằng
chuột ít xảy ra lỗi hơn gõ lệnh từ bàn phím. Nhưng tránh cực đoan.
• Ẩn các lệnh không cần thiết
 Các loại lỗi chính
• Lỗi mô tả: Xảy ra khi hai hành động tương tự nhau (pha sữa – ngũ cốc,
các thực đơn gần nhau có hình dáng tương tự nhau)
• Lỗi thu hút: Khi hai hành động có giai đoạn bắt đầu khởi động như
nhau
• Lỗi phương thức: Ví dụ với text editor vi, ở insert mode, các phím ký tự
được chèn vào tệp văn bản, trong khi ở command mode (mặc định),
phím ký tự kích hoạt editing commands.
 Thông báo lỗi
• Chính xác: Không “Cannot open file”, mà phải sử dụng “Cannot open
file named paper.docx”
• Nói bằng ngôn ngữ của người sử dụng
• Đưa ra hỗ trợ mang tính xây dựng. Tại sao xảy ra, loại bỏ bằng cách
nào.
Bài 6: Nguyên lý thiết
kế giao diện
81/29
• Lịch sự: Không sử dụng “fatal error” và “illegal”
81
VC
&
BB
Kinh nghiệm thiết kế của Nielsen
 Nhận dạng – không hồi tưởng
 Kinh nghiệm này còn được gọi là “Minimize Memory Load”
 Hãy sử dụng thực đơn, không sử dụng dòng lệnh
 Sử dụng Combo Box, không sử dụng Text Box nơi chọn
lệnh
 Sử dụng những lệnh chung những nơi có thể (ví dụ Open,
Save, Copy Paste)
 Tất cả các thông tin cần thiết phải được nhìn thấy.
 Hộp thoại Modal trong MS Word: Quá nhiều thông tin phải
nhớ.
82/29
Bài 6: Nguyên lý thiết kế giao diện
82
VC
&
BB
Kinh nghiệm thiết kế của Nielsen
 Thiết kế thẩm mỹ và tối thiểu
 Kinh nghiệm cuối cùng là tập qui tắc thiết kế đồ họa
tốt. Triết lý ở đây là “Less is More”.
 Bỏ đi các thông tin, đặc trưng đồ họa và các tính chất
xa lạ, không cần thiết.
 Ví dụ thiết kế đơn giản:
83/29
Bài 6: Nguyên lý thiết kế giao diện
83
VC
&
BB
Kinh nghiệm thiết kế của Nielsen
 Thiết kế thẩm mỹ và tối thiểu (tt)
 Lựa chọn màu và font phù hợp
 Nhóm bằng dấu cách
 Gán các điều khiển hợp lý
 Sử dụng ngôn ngữ phù hợp, bố trí hợp lý
84/29
Bài 6: Nguyên lý thiết kế giao diện
84
VC
&
BB
Kinh nghiệm thiết kế của Nielsen
 Tóm tắt 10 kinh nghiệm của Nielsen theo các nhóm
 Phù hợp sự chờ đợi:
• Phù hợp thế giới thực
• Nhất quán và chuẩn
• Trợ giúp và tài liệu
 Người sử dụng làm chủ
• Người sử dụng điều khiển UI và tự do
• Trực quan trạng thái hệ thống
• Mềm dẻo và hiệu quả
 Quản lý lỗi
• Tránh lỗi
• Nhận dạng, không hồi tưởng
• Thông báo, kiểm tra và phục hồi lỗi
 Thiết kế đơn giản
• Thiết kế đẹp và tối thiểu.
85/29
Bài 6: Nguyên lý thiết kế giao diện
85
VC
&
BB
Mười sáu qui tắc của Tognazzini
 Danh sách 16 qui tắc thiết kế UI tốt của Tognazzini
1.
2.
3.
4.
5.
6.
7.
8.
Anticipation
Autonomy
Color blindness
Consistency
Defaults
Efficiency
Explorable interfaces
Fitts s Law
9.
10.
11.
12.
13.
14.
15.
16.
Human interface objects
Latency reduction
Learnability
Metaphors
Protect users work
Readability
Track state
Visible navigation
 Nhiều qui tắc trong danh sách đã được xem xét
 Khảo sát một số qui tắc mới của Tognazzini
 Anticipation: Nên bố trí các thông tin và công cụ cần thiết
vào nơi người sử dụng dễ xâm nhập
 Defaults: Là đường tắt cho users mới và users hay sử dụng
UI.
• Sử dụng "Restore Initial Settings", "Restore Factory Settings",
"Standard Settings" hay Home trong khi duyệt Web. 86/29
86
VC
&
BB
Mười sáu qui tắc của Tognazzini
 Khảo sát một số qui tắc mới của Tognazzini (tt)
 Protect users work: Đây thuộc nguyên lý tránh lỗi.
• Lỗi gây ra phá hủy công việc của người sử dụng là loại
lỗi nguy hiểm nhất
• Cần đầu tư thích đáng vào kỹ nghệ để phòng chống lỗi
này.
 Track state: Là hình thức cung cấp đường tắt, cho phép
user khôi phục trạng thái của phiên giao dịch cuối cùng.
• Ví dụ sử dụng lệnh Print. UI cần nhớ lại bộ tham số mà
user thiết lập trước đó trong hộp thoại in.
 Visible navigation: Thuộc nhóm trực quan trạng thái hệ
thống.
• Trên trang Web, user rất dễ bị lạc lối.
• Tránh việc này bằng cách hiển thị vị trí của user. Một kỹ
thuật là chỉ dẫn trên " Navigation bars"
87/29
Bài 6: Nguyên lý thiết kế giao diện
87
VC
&
BB
Tám qui tắc vàng của Shneiderman
 Danh sách 8 qui tắc vàng thiết kế UI của Shneiderman
1.
2.
3.
4.
Consistency
Shortcuts
Feedback
Dialog closure
5.
6.
7.
8.
Simple error handling
Reversible actions
Put user in control
Reduce short-term memory load
 Khảo sát qui tắc mới của Shneiderman
 Dialog closure: Trình tự các hành động có thể được tổ chức
thành các nhóm (begin - middle - end).
 Vi dụ với Drag end Drop
• Bắt đầu: Người sử dụng nhấn chuột và thấy đối tượng được nhấc
lên cùng với con chạy chuột
• Giữa: Di đối tượng trên màn hình. Phản hồi là đối tượng chuyển
dịch
• Cuối: Nhả phím chuột. Phản hồi ở đây là thấy hiệu ứng nhả đối
tượng.
 Phản hồi cần được cho lại ở cuối mỗi nhóm và cho biết đã hoàn
thành task. Người sử dụng có thể chuyển đễn task khác.
88
88/29
Bài 6: Nguyên lý thiết kế giao diện
VC
&
BB
Qui trình thiết kế UI của Galitz
Galitz đề xuất 14 bước trong qui trình phát triển GUI
 Bước 1: Nhận biết ai là người sử dụng
 Bước 2: Hiểu rõ các chức năng nghiệp vụ
 Bước 3: Hiểu rõ nguyên lý thiết kế màn hình tốt
 Bước 4: Phát triển thực đơn hệ thống và lược đồ dẫn đường
 Bước 5: Lựa chọn loại cửa sổ phù hợp
 Bước 6: Lựa chọn các điều khiển phần cứng phù hợp
 Bước 7: Lựa chọn các Controls trên màn hình phù hợp
 Bước 8: Viết text và thông điệp rõ ràng
 Bước 9: Cung cấp phản hồi, hướng dẫn và hỗ trợ hiệu quả
89/29
Bài 6: Nguyên lý thiết kế giao diện
89
VC
&
BB
Qui trình thiết kế UI của Galitz
 Bước 10: Cung cấp khả năng quốc tế hóa và khả năng sử dụng
rộng rãi
 Bước 11: Tạo lập đồ họa, biểu tuwongj và ảnh có ý nghĩa
 Bước 12: Chọn màu phù hợp
 Bước 13: Tổ chức và bố trí cửa sổ và các trang màn hình
 Bước 14: Kiểm thử hệ thống.
90/29
Bài 6: Nguyên lý thiết kế giao diện
90
VC
&
BB
Làm việc với khách hàng
 Phân loại hành vi của con người
 Các hoạt động
91/29
Bài 6: Nguyên lý thiết kế giao diện
91
VC
&
BB
Phân loại hành vi của con người
1. Hành vi bản năng
2. Hành vi kỹ xảo
3. Hành vi đáp ứng
4. Hành vi trí tuệ
92/29
Bài 6: Nguyên lý thiết kế giao diện
92
VC
&
BB
Phân loại hành vi của con người
Hành vi bản năng
 Thoả mãn nhu cầu sinh lý của cơ thể
 Có thể là tự vệ
 Mang tính lịch sử
 Mang tính văn hoá mỗi quốc gia vùng miền
93/29
Bài 6: Nguyên lý thiết kế giao diện
93
VC
&
BB
Phân loại hành vi của con người
Hành vi kỹ xảo
 Là hành vi mới tự tạo trên cơ sở luyện tập
 Có tính mềm dẻo và biến đổi
 Nếu được định hình trên vỏ não và củng cố thì sẽ bên vững không
thay đổi
 Ví dụ: tập viết, làm xiếc…..
94/29
Bài 6: Nguyên lý thiết kế giao diện
94
VC
&
BB
Phân loại hành vi của con người
Hành vi đáp ứng
 Là hành vi ứng phó để tồn tại, phát triển và là nhữnghành vi ngược
lại với sự tự nguyện của bản thân và không có sự lựa chọn.
dvduc-2007/10
95/29
Bài 6: Nguyên lý thiết kế giao diện
95
VC
&
BB
Phân loại hành vi của con người
Hành vi trí tuệ
 Là hành vi đạt được do hoạt động trí tuệ nhằm nhận thức được bản
chất của các mối quan hệ xã hội có quy luật của sự vật hiện tượng
để đáp ứng và cải tạo thế giới
96/29
Bài 6: Nguyên lý thiết kế giao diện
96
VC
&
BB




Các hoạt động - Tư vấn cho khách hàng
Tư vấn đúng nhu cầu
Giải thích rõ ràng
Hướng dẫn khách hàng tỉ mỉ
Nắm bắt tâm lý và mong muốn của khách hàng luôn là yếu
tố quan trọng hàng đầu trong bất cứ chiến lược chăm sóc
khách hàng nào. Chỉ khi nào bạn biết được khách
hàngthực sự mong muốn những gì thì lúc đó bạn mới
chăm sóc khách hàng một cách hiệu quả và chu đáo nhất
97/29
Bài 6: Nguyên lý thiết kế giao diện
97
VC
&
BB
Các hoạt động - Tư vấn cho khách hàng
Biết Lắng nghe
 Biết lắng nghe những gì khách hàng nói
 Các khách hàng thường có ấn tượng không tốt với những
ai chỉ biết giải quyết các lời phàn nàn mà không thực sự
lắng nghe những gì họ nói.
 Hãy giữ một thái độ cởi mở cũng như kiềm chế những thôi
thúc khiến bạn cắt ngang lời nói bằng một câu trả lời. Cũng
thật sự quan trọng khi cho khách hàng thấy bạn đang chăm
chú lắng nghe những gì họ nói
98/29
Bài 6: Nguyên lý thiết kế giao diện
98
VC
&
BB
Các hoạt động - Tư vấn cho khách hàng
Giữ mối quan tâm của khách hàng
 Hãy cho khách hàng thấy khách hàng thực sự quan trọng
với bạn.
 KH biết rằng công ty bạn có rất nhiều khách hàng khác
nhau nhưng họ chỉ thực sự yêu quí bạn và Cty bạn nếu bạn
khiến họ cảm thấy họ thực sự quan trọng với bạn
 (VD: chị là người đầu tiên em thông báo thông tin…)
99/29
Bài 6: Nguyên lý thiết kế giao diện
99
VC
&
BB
Các hoạt động - Tư vấn cho khách hàng
Giữ mối quan tâm của khách hàng
 Hãy cho khách hàng thấy khách hàng thực sự quan trọng
với bạn.
 KH biết rằng công ty bạn có rất nhiều khách hàng khác
nhau nhưng họ chỉ thực sự yêu quí bạn và Cty bạn nếu bạn
khiến họ cảm thấy họ thực sự quan trọng với bạn
 (VD: chị là người đầu tiên em thông báo thông tin…)
100/29
Bài 6: Nguyên lý thiết kế giao diện
10
VC
&
BB
Thiết kế hướng đến người dùng
1. Nguyên lý thiết kế tương tác người dùng
2. Thiết kế tiện dụng
101/29
Bài 6: Nguyên lý thiết kế giao diện
10
VC
&
BB
Các lưu ý trong thiết kế tương tác người dùng
 Feedback to user - signal that selection has been made
 The user should be in control – no situation where the user
can not abort an action
 Predictability – avoid modes that change the action invoked by
an input
 Transparency – the user can “see” what is happening
 Never interrupt the user – avoid pop-ups that change the
action
102/29
Bài 6: Nguyên lý thiết kế giao diện
10
VC
&
BB
Các lưu ý trong thiết kế tương tác người dùng
 Can I guess what the user wants? – use text continuations
carefully
 Error tolerance – the computer can not guess incorrectly
 WYSIWYG – the user may want to see actual as well as
processed
 Speak the user's language – messages should use terms the
user will understand
 Design should reflect the user's logic, not the constructor's
logic – the design reflects how work is done
103/29
Bài 6: Nguyên lý thiết kế giao diện
10
VC
&
BB
Các lưu ý trong thiết kế tương tác người dùng
 The design of a button should reflect its importance – make
often used buttons bigger
 Provide alternative ways out of a situation – this allows the
user to choose the best one for them
 Accessibility to handicapped users - each action has multiple
means of invocation
 Novices versus experienced users – different levels of
interface for different users
 Standardization – standard arrangements of buttons or other
input devices
 Open standards – standards such as de facto and proprietary
104/29
Bài 6: Nguyên lý thiết kế giao diện
10
VC
&
BB
Thiết kế tiện dụng
 Ứng dụng cố gắng liệu trước được mong muốn và nhu cầu của
người dung
 Kỹ thuật về trạng thái phải cho người dùng nhận thức và nhận
thông tin
 Thông tin trạng thái phải hợp thời và dễ nhìn
 Dùng màu sắc để chuyển tải thông tin trong giao diện phải rõ
ràng, và dành cho những người chưa có kinh nghiệm
 Sự toàn vẹn quan trọng nhất là sự toàn vẹn với sự mong đợi
của người dùng
 Nhìn ở năng suất người dùng, không là của máy
105/29
Bài 6: Nguyên lý thiết kế giao diện
10
VC
&
BB
Thiết kế tiện dụng
 Giữ người dùng quan tâm (Keep the user occupied)
 Giao diện phải che dấu kiến trúc cơ bản của hệ thống với thể
hiện bề mặt
 Thời gian để đạt được một đích là hàm số của khoảng cách và
kich thước của đích
 Bất cứ nơi nào có thể, phải cho những những quá trình ngầm
vào nền (backbround)
 Chọn phương pháp ẩn dụ tốt cho phép người dùng nắm ngay
được những chi tiết tốt nhất của mô hình khái niệm
 Văn bản cần đọc phải tương phản cao
106/29
Bài 6: Nguyên lý thiết kế giao diện
10
VC
&
BB
Nguyên lý tiện dụng
 Tương tự như nguyên lý thíết kế
 Cơ sở cho việc đánh giá hệ thống
 Framework cho đánh giá heuristic
107/29
Bài 6: Nguyên lý thiết kế giao diện
10
VC
&
BB







Đích của trải nghiệm người dùng
Satisfying - rewarding
Fun - support creativity
Enjoyable - emotionally fulfilling
Entertaining …and more
Helpful
Motivating
Aesthetically pleasing
108/29
Bài 6: Nguyên lý thiết kế giao diện
10
VC
&
BB







Đích của trải nghiệm người dùng
Satisfying - rewarding
Fun - support creativity
Enjoyable - emotionally fulfilling
Entertaining …and more
Helpful
Motivating
Aesthetically pleasing
109/29
Bài 6: Nguyên lý thiết kế giao diện
10