Professional Documents
Culture Documents
TK TT DPT
TK TT DPT
TƯƠNG TÁC
ĐA PHƯƠNG TIỆN
Nguyễn Văn Sáu
Khoa CNTT2
saunv@ptithcm.edu.vn
2017
NỘI DUNG
2
Các khái niệm
Thiết kế:
○ Thiết: Sắ p đặ t, Kế: trù tính
○ Thiết kế là việc tạ o ra mộ t kế hoạ ch hoặ c quy ướ c cho việc
xây dự ng mộ t đố i tượ ng hoặ c mộ t hệ thố ng
○ Kết quả củ a quá trình thiết kế là mẫ u, mô hình, mô tả …
Thiết kế tương tá c (TKTT):
○ Tương tá c: Tương là lẫ n nhau, tá c là tá c độ ng
○ TKTT là TK cá c sả n phẩ m tương tá c để trợ giú p con ngườ i
trong cuộ c số ng thườ ng ngày
○ Quá trình TKTT cầ n đến tri thứ c củ a nhiều lĩnh vự c
3
Các khái niệm
Đa phương tiện
○ Là sự tích hợ p củ a vă n bả n, â m thanh, cá c loạ i hình ả nh và
cá c phầ n mềm điều khiển đượ c, trong mộ t mô i trườ ng
thô ng tin số .
○ Dữ liệu đa phương tiện gồ m dữ liệu về (i) vă n bả n; (ii) hình
ả nh; (iii) â m thanh; và (iv) hình độ ng
Thiết kế đa phương tiện:
○ Là thiết kế trong mô i trườ ng đa phương tiện, cụ thể là thiết
kế cá c sả n phẩ m hình ả nh, â m thanh và hình độ ng
4
Các khái niệm
Thiết kế tương tá c đa phương tiện:
○ Là thiết kế tương tá c trong mô i trườ ng đa phương tiện, cụ
thể vớ i cá c phương tiện vă n bả n, hình ả nh, â m thanh và
hình độ ng
5
Các khái niệm
Về mố i liên quan giữ a thiết kế tương tá c và thiết kế
đa phương tiện
○ Thiết kế đa phương tiện dù ng nhiều phương tiện khá c
nhau, để hướ ng đến tương tá c ngườ i dù ng.
Thiết kế tương tá c tậ p trung và o ngườ i dù ng, và o cá c đố i
tượ ng trong quá trình tương tá c.
○ Đều tuâ n theo nhữ ng nguyên tắ c chung về nghe, nhìn và cá c
nguyên tắ c thẩ m mỹ
○ Đều thuộ c và o lĩnh vự c rộ ng hơn; đó là thiết kế tương tá c
tá c ngườ i-máy (HCI - Human-Computer Interaction)
6
Giao diện người dùng (user interface) tốt
7
Giao diện người dùng (user interface) tốt
Giao diện ngườ i dù ng là mộ t phầ n củ a hệ thố ng mà
ngườ i dù ng có thể tiếp xú c và tương tá c vớ i nó
Giao diện đượ c thiết kế tố t là giao diện phù hợ p, hò a
trộ n đượ c cá c cơ chế nhậ p, xuấ t đã đượ c thiết kế tố t,
nhằ m đá p ứ ng nhu cầ u ngườ i dù ng
Giao diện tố t là giao diện cho phép ngườ i dù ng chú
trọ ng và o thô ng tin và nhiệm vụ , thay vì chú trọ ng và o
cơ chế mang thô ng tin và thự c hiện nhiệm vụ
Đố i vớ i nhiều ngườ i dù ng, giao diện là cả hệ thố ng
Giao diện thiết kế khô ng tố t sẽ tố n kém (có khi là rấ t
nhiều) cho ngườ i dù ng và tổ chứ c củ a họ
8
Hiểu người dùng
Dễ họ c, dễ nhớ sử dụ ng đú ng Nhanh thà nh thạ o
Mềm dẻo giú p ngườ i dù ng sử dụ ng theo cá ch tố i ưu
An toà n cho sứ c khỏ e, tiết kiệm thờ i gian, cô ng sứ c
Có nhiều tiện ích tố t;
Giú p ngườ i dù ng hiểu đượ c mình đang ở đâ u trong hệ thố ng
○ Hiển thị trạ ng thá i hệ thố ng;
○ Khớ p giữ a hệ thố ng và thế giớ i thự c;
Thể hiện đượ c vai trò điều khiển củ a ngườ i dù ng;
Hỗ trợ ngườ i dù ng nhậ n dạ ng, chẩ n đoá n và sử a lỗ i;
Giao diện có thẩ m mỹ;
Giao diện có trợ giú p và có tư liệu đi kèm.
9
Những yếu tố làm nên một thiết kế tốt
10
Những yếu tố làm nên một thiết kế tốt
11
Những yếu tố làm nên một thiết kế tốt
12
Những yếu tố làm nên một thiết kế tốt
13
Những yếu tố làm nên một thiết kế tốt
14
Những yếu tố làm nên một thiết kế tốt
15
Những yếu tố làm nên một thiết kế tốt
16
Những yếu tố làm nên một thiết kế tốt
17
Những yếu tố làm nên một thiết kế tốt
Thaor luaanj:
1. Sinh viên hãy tìm ra một sản phẩm có thiết kế
tốt?
2. SV TÌM 1 SP CÓ TK THÔNG MINH
3. SV TÌM 1 SP CÓ TIỆN ÍCH ĐẶC BIỆT
18
Vai trò của TKTTDPT
TKTT trong kinh doanh
Mục tiêu của TKTT: Khả năng sử dụng và thói
quen người dung
Mối liên hệ giữa TKTT và thiết bị đa phương tiện
19
TKTT trong kinh doanh
TK Sản phẩm TT là xu thế
Sáng tạo, thiết kế và xây dựng các đoạn phim
trực tuyến bao gồm phim quảng cáo, trò chơi, các
trang web có khả năng tương tác cao…
20
Khả năng sử dụng (Usability)
Hiệu quả sử dụ ng
Hiệu suấ t sử dụ ng
Độ an toà n sử dụ ng
Tiện ích sử dụ ng
Dễ hiểu
Dễ nhớ
21
Khả năng sử dụng (Usability)
Hiệu quả sử dụ ng
Là mụ c tiêu rấ t rộ ng và nó liên hệ tớ i nhữ ng thiết kế
tố t như thế nà o thô ng qua việc thiết kế sả n phẩ m đó
có thể hướ ng dẫ n ngườ i dù ng ra sao và chỉ cho
ngườ i dù ng là m thế nà o
22
Khả năng sử dụng (Usability)
Hiệu suấ t sử dụ ng
Là cá ch thiết kế hướ ng đến hỗ trợ ngườ i sử dụ ng
thự c hiện đượ c mụ c đích củ a họ nhanh nhấ t
○ Ví dụ : nghe tin nhắ n thoạ i
○ Thiết kế phả i giả m thiểu tố i đa số bướ c thự c hiện để đạ t
đượ c mụ c tiêu
23
Khả năng sử dụng (Usability)
Dễ hiểu và dễ nhớ :
○ Là cá ch thiết kế giú p ngườ i dù ng có thể sử dụ ng sả n phẩ m
theo cá ch đơn giả n nhấ t
○ Thờ i gian để ngườ i dù ng hiểu và sử dụ ng 1 sả n phẩ m tương
tá c đơn giả n chỉ nên trong vò ng 10 phú t (trừ nhữ ng hệ
thố ng hoặ c sả n phẩ m phứ c tạ p)
24
Khả năng sử dụng (Usability)
Khả nă ng ghi nhớ
○ Nguyên lý 7 ± 2:
Trí nhớ ngắn hạ n củ a con ngườ i chỉ có thể có giữ lạ i khoảng 5-9
thứ cù ng mộ t lú c. Khi phải duyệt qua 1 danh sách dài các mụ c,
ngườ i dù ng chỉ giữ lạ i trong đầu từ 5-9 mụ c
○ Ưu tiên nguyên tắ c nỗ lự c ít nhấ t cho ngườ i dù ng
Nguyên tắ c 3-CLICK
Nguyên tắ c 8s
Khả nă ng di chuyển
25
Thói quen người dùng (UX User – Experience)
○ Sự thỏ a mã n
○ Sự thích thú
○ Vui vẻ
○ Giả i trí
○ Có ích
○ Thoả i má i
○ Có độ ng lự c
26
Thói quen người dùng (User – experience)
Biểu tượ ng (icon) cũ ng cầ n á p dụ ng như tiêu chí củ a
khả nă ng sử dụ ng
○ Gầ n gũ i
○ Rõ rà ng và đặ c trưng
○ Đơn giả n
○ Ổ n định (đồ ng nhấ t)
○ Trự c tiếp
27
Thói quen người dùng (User – experience)
Biểu tượ ng (icon) cũ ng cầ n chú ý đến nhữ ng yếu tố
sau:
○ Mô i trườ ng mà biểu tượ ng sử dụ ng
○ Sự mong đợ i củ a ngườ i dù ng
○ Độ nghiêm trọ ng củ a chứ c nă ng
○…
28
Thói quen người dùng (User – experience)
Mộ t biểu tượ ng (icon) đượ c coi là thà nh cô ng nếu
○ Có sự khá c biệt
○ Thể hiện rõ nộ i dung muố n nó i
○ Có thể nhậ n ra khi độ phâ n giả i nhỏ hơn 16px
○ Đều thể hiện rõ tạ i đen trắ ng hoặ c mà u
29
Màu sắc
Mà u sắ c có ý nghĩa rấ t lớ n trong thiết kế tương tá c
Mỗ i mà u sắ c có nhữ ng quy luậ t sử dụ ng, mụ c đích và
cá ch kết hợ p riêng
Ví dụ :
○ Thể hiện hà nh độ ng và việc cầ n thiết, nhưng tô ng mà u nên
dù ng là mà u ấ m như: đỏ , và ng và cam
○ Thể hiện mà u nền để hiện thị thô ng tin nên dù ng tô ng mầ u
má t/lạ nh như: xanh lá , xanh biển, tím…
30
Văn bản
Vă n bả n hoặ c tin nhắ n cầ n phả i ngắ n gọ n, đơn giả n
Giớ i hạ n khô ng quá 20 từ trong 1 câ u
Giớ i hạ n khô ng quá 6 câ u trong 1 vă n bả n
31
Các dạng tương tác cơ bản
Giao tiếp dạ ng Menu selection
Giao tiếp dạ ng Audio Menu
Giao tiếp dạ ng Menu trong mà n hình nhỏ
Giao tiếp dạ ng hỏ i đá p truy vấ n
Giao tiếp dạ ng điền theo mẫ u
Điều khiển trự c tiếp và ngữ cả nh tương tá c
32
Giao tiếp dạng Menu selection
Có 3 dạ ng menu hay sử dụ ng:
○ Menu đơn (single menu)
○ Menu cấ u trú c ngang hà ng (linear menu)
○ Menu cấ u trú c cây (tree structured menu)
33
Giao tiếp dạng Menu selection
Ưu điểm:
○ Giao tiếp này thích hợ p vớ i ngườ i dù ng khô ng thườ ng
xuyên
○ Tố n ít cô ng đà o tạ o
Nhượ c điểm:
○ Chiếm khô ng gian mà n hình
○ Thiếu tính mềm dẻo (ngườ i dù ng chỉ đượ c sử dụ ng nhữ ng
cá i đã có sẵ n trên menu)
34
Giao tiếp dạng Menu selection
Hướ ng dẫ n khi là m Menu selection:
○ Xá c định mụ c tiêu sử dụ ng để phâ n loạ i menu (menu đơn,
menu ngang hà ng, menu cấ u trú c cây)
○ Vị trí phả i đượ c chỉ rõ bằ ng đồ họ a, con số hay bằ ng tiêu đề
○ Liệt kê tấ t cả cá c items
○ Nhó m cá c items
○ Ưu tiên mứ c độ tă ng dầ n củ a menu (từ đơn giả n tớ i chi tiết)
○ Sử dụ ng Items như tiêu đề cho mỗ i subtree
○ Sử dụ ng từ ngữ viết tắ t khi muố n mô tả vắ n tắ t items
○ Sử dụ ng đồ ng nhấ t ngữ phá p, hình thứ c và thuậ t ngữ
○ Phả i có khả nă ng quay trở lạ i Main menu hoặ c menu trướ c
35
Giao tiếp dạng Menu selection
BÀ I TẬ P (FILE WORD)
36
Giao tiếp dạng Audio Menu
Ví dụ : 1900xxxx
Giớ i hạ n số lượ ng chọ n lự a chỉ cò n 3 hoặ c 4 lự a chọ n
Chú ý giả i quyết vấ n đề ghi nhớ củ a hệ thố ng
37
Giao tiếp dạng Menu trong màn hình nhỏ
Ứ ng dụ ng menu mà n hình nhỏ đó là :
○ Giả i trí (trò chơi trên Nintendo, IPhone…)
○ Cung cấ p thô ng tin (Lịch điện tử , sổ danh bạ …)
○ Hỗ trợ (thiết bị y tế…)
○ Máy in kỹ thuậ t số …
Menu cung cấ p cho cá c ứ ng dụ ng hầ u hết tố i đa 2
nú t điều hướ ng chính và 1 nú t Select
Mộ t số thiết bị có mà n hình nhỏ , nó sẽ có 2 nú t điều
hướ ng mềm (soft key), đượ c đặ t bên cạ nh hoặ c dướ i
mà n hình
38
Giao tiếp dạng Menu trong màn hình nhỏ
Hướ ng dẫ n:
○ Xá c định loạ i ứ ng dụ ng để thiết kế
○ Chỉ rõ thiết bị để xá c định loạ i ngườ i dù ng
○ Xá c định chứ c nă ng (chứ c nă ng nà o quan trọ ng hoặ c ngượ c
lạ i)
○ Tậ p trung và o chứ c nă ng quan trọ ng
○ Xem xét khả nă ng thiết kế có tính chấ t responsive
39
Giao tiếp dạng hỏi đáp truy vấn
Đặ c điểm:
○ Câ u hỏ i mô tả theo: Yes/No, bar lự a chọ n, dạ ng nhấ n số
○ Giao tiếp này tự nhiên, dễ thiết kế (k phair deex tinhs)
○ Thích hợ p cho ngườ i dù ng mớ i, thiếu kinh nghiệm
○ Ngô n ngữ truy vấ n diễn đạ t ngô n ngữ tự nhiên nhưng cầ n
có yêu cầ u cú phá p
○ Có á p dụ ng đồ họ a trong dạ ng giao tiếp truy vấ n
○ Wizard, trouble shoot, decision tree
40
Giao tiếp dạng điền theo mẫu
Tiêu đề phả i ý nghĩa
Bao hà m toà n diện cá c chỉ dẫ n
Lậ p nhó m theo lĩnh vự c
Hình thứ c thể hiện củ a form
Sử dụ ng nhữ ng label thô ng dụ ng
Đồ ng nhấ t thuậ t ngữ
Hiển thị ô trố ng rõ rà ng khi điền form
41
Giao tiếp dạng điền theo mẫu
Con trỏ di chuyển đả m bả o thuậ n lợ i (đố i vớ i online)
Ngă n chặ n lỗ i tố i đa có thể (đố i vớ i online)
Cả nh bá o khi có giá trị k hợ p lý (đố i vớ i online)
Có chú ý cho nhữ ng phầ n khô ng bắ t buộ c
Có phầ n giả i thích ý nghĩa
Luô n có nhữ ng dấ u hiệu để cho ngườ i dù ng biết
hoà n thiện.
42
Điều khiển trực tiếp
Đặ c điểm:
○ Rấ t phổ biến trong thiết kế cá c hệ thố ng vă n phò ng
○ Là kiểu giao tiếp WYSIWYG (What You See Is What You Get)
○ Dễ dù ng, dễ hiểu cho hầ u hết cá c đố i tượ ng ngườ i dù ng
Nhượ c điểm:
○ Trá nh sự nhậ p nhằ ng khi gắ p thả
Khô ng đượ c á p dụ ng trong thiết kế cô ng nghiệp
43
Các hình thức tương tác đa phương tiện
Nhậ n dạ ng vâ n tay
Nhậ n dạ ng đô i mắ t
Nhậ n diện khuô n mặ t
Nhậ n diện giọ ng nó i
Nhậ n diện â m thanh
Nhậ n diện chuyển độ ng
45
QUY TRÌNH THIẾT KẾ TƯƠNG TÁC
Cá c khá i niệm
Cá c mô hình quy trình thiết kế tương tá c
Bà i họ c vậ n dụ ng
46
Quy trình thiết kế tương tác- Các khái niệm
Cá c loạ i thiết kế:
○ Thiết kế giao diện
○ Thiết kế kiến trú c
○ Thiết kế phầ n mềm…
Thiết kế tương tá c thuộ c lĩnh vự c thiết kế và tậ p
trung và o việc lấy người dùng làm trung tâm để
phá t triển
47
Quy trình thiết kế tương tác- Các khái niệm
Trong quy trình thiết kế tương tá c luô n bao gồ m 4
hoạ t độ ng:
○ Xá c định nhữ ng yêu cầ u
○ Phá t triển nhiều thể loạ i thiết kế
○ Xây dự ng nhiều phiên bả n khá c nhau để kiểm tra, đá nh giá
○ Đá nh giá
48
Quy trình thiết kế tương tác- Các khái niệm
Xá c định yêu cầ u:
○ Vớ i nhiệm vụ thiết kế bấ t kỳ sả n phẩ m nà o phụ c vụ hỗ trợ
ngườ i dù ng. Ta đều cầ n xá c định đố i tượ ng ngườ i dù ng là ai,
mụ c đích sử dụ ng củ a họ là gì và họ cầ n hỗ trợ như thế
nà o…
○ Ngườ i dù ng luô n là mụ c tiêu hướ ng tớ i củ a thiết kế tương
tá c
49
Quy trình thiết kế tương tác- Các khái niệm
Phá t triển nhiều thể loạ i thiết kế:
○ Hoạ t độ ng này vô cù ng quan trọ ng trong việc phá t triển
thiết kế sau này
○ Thể loạ i thiết kế có thể phâ n chia là m 2 dạ ng chính:
Thiết kế mô hình
Thiết kế vậ t lý
○ Thiết kế mô hình:
Mô tả hình dạ ng sản phẩm sẽ phát triển và cách sử dụ ng
○ Thiết kế vậ t lý:
Đi vào chi tiết củ a sản phẩm như màu sắc, âm thanh…
50
Quy trình thiết kế tương tác- Các khái niệm
Xây dự ng nhiều phiên bả n thiết kế:
○ Mụ c đích tạ o cơ hộ i cho sự thích ứ ng củ a sả n phẩ m vớ i
nhiều mô i trườ ng sử dụ ng khá c nhau
○ Lầ n thử nghiệm đầ u tiên lầ n “n” thử nghiệm sả n phẩ m
"hoà n chỉnh".
51
Quy trình thiết kế tương tác- Các khái niệm
Đá nh giá :
○ Sau khi hoà n thiện cá c phiên bả n, sả n phẩ m sẽ đượ c đá nh
giá thô ng qua cá c yếu tố như: chứ c nă ng, dữ liệu, khả nă ng
sử dụ ng, lỗ i khi ngườ i dù ng mắ c phả i…
52
Các mô hình quy trình thiết kế tương tác
Nhữ ng hoạ t độ ng trong quy trình thiết kế tương tá c
sẽ đượ c liên kết thô ng qua nhữ ng mô hình:
○ Mô hình đơn giả n
○ Mô hình thá c nướ c
○ Mô hình ngô i sao
○…
53
Các mô hình quy trình thiết kế tương tác
Mô hình đơn giả n
54
Các mô hình quy trình thiết kế tương tác
Mô hình thá c nướ c
55
Phương pháp xác định nhu cầu tương tác của người dùng
56
Lý do xác định và hình thành nhu cầu của người dùng
57
Lí do xác định và hình thành nhu cầu của người dùng
58
Lí do xác định và hình thành nhu cầu của người dùng
Kết quả của việc phân tích xác định yêu cầu là:
○ Vấn đề của hệ thống hiện tại là gì?
○ Yêu cầu của hệ thống (mới) là gì?
○ Yêu cầu của hệ thống bao gồm:
Các yêu cầu về chức năng, xác định điều hệ thống cần
làm
Các yêu cầu về dữ liệu, xác định cấu trúc hệ thống và dữ
liệu cần thiết
Các yêu cầu về tính sử dụng được (Usability)
59
Phương pháp phỏng vấn
60
Phương pháp phỏng vấn
61
Phương pháp phỏng vấn
62
Phương pháp phỏng vấn
63
Phương pháp phỏng vấn
64
Phương pháp phỏng vấn
65
Phương pháp phỏng vấn
66
Phương pháp phỏng vấn
67
Phương pháp phỏng vấn
68
Phương pháp phỏng vấn
69
Phương pháp phỏng vấn
Ưu nhược điểm của PP phỏng vấn cá
nhân:
Ưu điểm
○ Có cơ hội hỏi thêm về những gì vừa mới biết
Khuyết điểm
○ Có thể có mâu thuẫn ý kiến riêng giữa các cá
nhân
○ Tốn nhiều thời gian nếu cần phỏng vấn nhiều
người
70
Phương pháp phỏng vấn
Ưu nhược điểm của PP phỏng vấn nhóm:
Ưu điểm
○ Ít tốn thời gian hơn phỏng vấn từng người
○ Gia tăng sự trao đổi về các “findings” giữa những người tham
gia phỏng vấn
○ Hạn chế bớt sự mâu thuẫn ý kiến cá nhân
Khuyết điểm:
○ Khó thu xếp cho cuộc phỏng vấn
○ Do khoảng cách về kiến thức chuyên môn
○ Sắp xếp thời điểm và địa điểm họp cho nhiều người cùng
một lúc
○ Do quan hệ giữa các cá nhân
71
Phương pháp quan sát
72
Phương pháp quan sát
73
Phương pháp phân tích tài liệu
74
Phương pháp phân tích tài liệu
75
Phương pháp phân tích tài liệu
76
Phương pháp phân tích tài liệu
77
Phương pháp phân tích tài liệu
78
Phương pháp brain storming
79
Yêu cầu về dữ liệu
SẼĐƯỢC HỌC TRONG CÁC MÔN HỌC
“PHÂN TÍCH THIẾT KẾ HTTT” VÀ “CƠ
SỞ DỮ LIỆU”
80
Yêu cầu về tính sử dụng được
Xem phần trước (USABILITY)
81
Giải thích và phân tích dữ liệu
Việcgiả i thích và phâ n tích dữ liệu sau khi
thô ng tin đượ c thu thậ p là rấ t quan trọ ng.
Vì:
○ Có 1 cá ch nhìn khá ch quan nhấ t về dữ liệu
○ Khô ng bị ả nh hưở ng bở i cá c chiều hướ ng khá c
○ Có thể tìm ra nhiều cá ch nhìn khá c nhau về dữ
liệu
82
Giải thích và phân tích dữ liệu
Mụ c đích củ a giả i thích và phâ n tích dữ liệu:
○ Hình thà nh nộ i dung, ý tưở ng củ a bả n thiết kế
○ Thô ng tin sẽ đượ c sắ p xếp rõ rà ng hơn
○ Yêu cầ u sẽ đượ c cụ thể hơn
83
Bài kiểm tra
1. Hãy nêu cá c tiêu chí về khả nă ng sử dụ ng
(Usability) củ a mộ t giao diện tương tá c đa
phương tiện?
2. Hãy chỉ ra mộ t số yêu cầ u cơ bả n cho chứ c nă ng
tương tá c “chuyển tiền” củ a máy ATM?
Hiện nay máy ATM củ a Agribank có quy trình
chuyển tiền như sau:
...Nhậ p số TK nhậ n -> Nhậ p số tiền -> Xá c nhậ n tên
ngườ i nhậ n, số tiền -> OK để xá c nhậ n -> In bill.
Theo bạ n, có cầ n cả i tiến gì cho quy trình trên khô ng?
84
Bài học vận dụng xác định yêu cầu
Hãy chỉ ra mộ t số yêu cầ u cơ bả n cho chứ c
nă ng tương tá c “chuyển tiền” củ a máy ATM:
○ Yêu cầu chức năng?
○ Yêu cầu dữ liệu?
○ Yêu cầu về tính dùng được?
○ Yêu cầu về trải nghiệm người dùng?
○ Chúng ta đã biết đầy đủ các yêu cầu chưa? Làm thế
nào để biết được các yêu cầu? Khi nào thì mới gọi là
biết đầy đủ?
85
Bài kiểm tra
Hãychỉ ra mộ t số yêu cầ u cơ bả n cho giao
diện tương tá c "Đă ng ký tiêm vaccine ngừ a
Covid 19" củ a ứ ng dụ ng Sổ sứ c khỏ e điện tử
(SSKĐT) củ a Bộ Y Tế.
Gợ i ý:
○ Yêu cầu chức năng, yêu cầu dữ liệu, yêu cầu về tính
dùng được,yêu cầu về trải nghiệm người dùng
86
Bài học vận dụng
Chứ c nă ng:
○Nhậ p tk nhậ n, số tiền cầ n chuyển
○Security, confirm, check...
○Report...
Dữ liệu:
○DL xá c thự c user
○DL số dư…
87
Bài học vận dụng
Usability:
○ Hiệu quả :
Yes/No?: TK đủ tiền k? Máy ATM có tiền k?
If Yes: Rú t là phả i đượ c
○ Hiệu suấ t:
Thao tá c ít, vd chỉ liệt kê cho chọ n nhữ ng giá trị
có thể đá p ứ ng đc
Liệt kê nhữ ng tr.hợ p k đá p ứ ng đc, bá o sớ m
Bà n phím dễ bấ m, tiếng beep khi ấ n phím
88
Bài học vận dụng
○An toà n:
Hỏ i mậ t khẩ u
Lờ i chà o có nêu tên chủ thẻ
Xá c nhậ n cá c số tiền bằ ng giấy và SMS
Bà n phím kín đá o (nhưng phả i dễ thao
tá c)
89
Bài học vận dụng
○Tiện ích:
In sao kê
Thấ u chi
Đa ngô n ngữ
○Dễ hiểu:
Chữ lớ n rõ
Thô ng bá o rõ nghĩa, đú ng vớ i thự c tế
90
Bài học vận dụng
UX:
○Thỏ a mã n cá c yêu cầ u trên
○Lấy thẻ trướ c hay lấy tiền trướ c?
○…?
91
Xây dựng prototype
Prototype là gì?
Tạ i sao sử dụ ng Prototype?
Cá c loạ i Prototype
Xây dự ng Prototype
Bà i họ c vậ n dụ ng
92
Prototype là gì?
Chỉ khi sử dụ ng sả n phẩ m, ngườ i ta mớ i có thể phá t hiện
ra nhữ ng khiếm khuyết củ a nó
Cà ng sử dụ ng nhiều, ngườ i dù ng cà ng có nhiều ý kiến giú p
hoà n thiện sả n phẩ m hơn
Prototype có thể giú p ngườ i dù ng “trả i nghiệm” sả n phẩ m
trướ c khi nó ra đờ i
Mộ t Prototype có thể là :
○ Mộ t hình dạ ng phá c thả o trên giấy (paper-based outline) củ a
mộ t chuỗ i cá c mà n hình
○ Mộ t chuỗ i cá c hình ả nh trên máy tính
○ Mộ t đoạ n video mô phỏ ng mộ t cô ng việc
○ Mộ t sả n phẩ m giả lậ p (mock-up) bằ ng bìa, gỗ …
93
Tại sao sử dụng Prototype?
Prototype hỗ trợ tố t cho nhó m thiết kế:
○ Kiểm chứ ng tính hợ p lý và khả thi củ a cá c ý tưở ng thiết
kế
○ Dễ dà ng thả o luậ n về sả n phẩ m tương lai
○ Là m rõ cá c yêu cầ u cò n mơ hồ
○ Lấy ý kiến đá nh giá củ a ngườ i dù ng
○ Kiểm tra khả nă ng tương thích củ a sả n phẩ m vớ i phầ n
cò n lạ i củ a hệ thố ng
Tù y theo mụ c đích khá c nhau mà Prototype đượ c
xây dự ng khá c nhau, và có thể tương tá c đượ c hay
khô ng
94
Prototype của một
thiết bị cầm tay hỗ
trợ trẻ em tự kỷ
Vỏ nhẹ
95
Các loại Prototype
Low-fidelity prototype (phá c thả o độ trung
thự c thấ p)
High-fidelity prototype (phá c thả o độ trung
thự c cao)
96
Low-fidelity prototype (1)
Khô ng giố ng y như sả n phẩ m thậ t, ví dụ là m
bằ ng giấy bìa thay vì kim loạ i và mà n hình
điện tử
Đơn giả n, chi phí thấ p dễ chỉnh sử a
Đặ cbiệt hữ u ích trong giai đoạ n đầ u phá t
triển sả n phẩ m, là giai đoạ n khá m phá ý
tưở ng
Để mô tả cá c quá trình tương tá c, ta dù ng
cá c phâ n cả nh (Storyboard)
97
Low-fidelity prototype (2)
Storyboard chứ a mộ t chuỗ i cá c hình vẽ
(sketch) biểu diễn cá c thao tá c củ a ngườ i
dù ng trên thiết bị để thự c hiện 1 cô ng việc
Sketch: Khô ng có bấ t kỳ quy định nà o cho
cá c sketch. Nhà thiết kế có thể vẽ sao cho
ngườ i khá c hiểu là đượ c
Ví dụ mộ t số sketch đơn giả n:
98
Low-fidelity prototype (3)
Ví dụ mộ t storyboard dù ng cá c sketch:
99
Low-fidelity prototype (4)
Hạ n chế:
○ Ngườ i dù ng khô ng tương tá c đượ c mà phả i dù ng
cô ng cụ hoặ c ngườ i thiết kế
○ Khô ng phá t hiện đượ c mộ t số lỗ i
○ Thiếu mô tả chi tiết
○ Hạ n chế kiểm tra khả nă ng sử dụ ng
100
High-fidelity prototype (1)
Gầ nnhư là sả n phẩ m thậ t vớ i đầy đủ chứ c
nă ng và khả nă ng tương tá c vớ i user
Nếu sả n phẩ m phầ n cứ ng thì sử dụ ng vậ t
liệu gầ n như thậ t
Nếu là sả n phẩ m phầ n mềm thì sử dụ ng cá c
cô ng cụ phầ n mềm hỗ trợ như Adobe
Director, Visual Basic, Smalltalk... để mô
phỏ ng
101
High-fidelity prototype (2)
Hạ n chế:
○ Chi phí cao
○ Khô ng dù ng đượ c cho mứ c độ thể hiện ý tưở ng
○ Khô ng phù hợ p cho giai đoạ n thu thậ p yêu cầ u
○ Khi độ trung thự c cao, cá c yếu tố bề ngoà i thu hú t
ngườ i dù ng thử , khiến họ bỏ quên cá c yếu tố nộ i dung
○ Nhà phá t triển có cả m giá c tiếc nếu phả i thay đổ i
Cá c chuyên gia thườ ng khuyến khích sử dụ ng
low-fidelity hơn vì nó giú p xem xét kỹ nộ i dung
và cấ u trú c củ a sả n phẩ m
102
Bài học vận dụng
Xây dự ng low-fidelity prototype cho bả n
thiết kế “gậy hỗ trợ ngườ i mù đi bộ”
○GỢ I Ý:
Yêu cầu chức năng?
Yêu cầu dữ liệu?
Yêu cầu về tính dùng được?
Yêu cầu về trải nghiệm người dùng?
Viết
storyboard mô tả quá trình tương tá c
“Qua lộ tạ i ngã tư và o ban đêm”
103
Bài học vận dụng
XEM THÊ M Ở SLIDE #118
104
THIẾT KẾ TƯƠNG TÁC
LẤY NGƯỜI DÙNG LÀM
TRUNG TÂM
105
TKTT lấy người dùng làm trung tâm
106
Tầm quan trọng của việc người dùng tham gia vào thiết kế
Hiểu rõ kỳ vọ ng củ a ngườ i dù ng
Ngườ i dù ng cả m thấy họ có vai trò trong
quá trình phá t triển sả n phẩ m
107
Các mức độ lôi kéo người dùng
Tham gia nhó m thiết kế, toà n thờ i gian hoặ c bá n
thờ i gian: Độ thâ n thuộ c vớ i sả n phẩ m sẽ khá c
nhau tù y mứ c độ tham gia
Tham gia vớ i vai trò ngườ i gó p ý
Sả n phẩ m đượ c thiết kế cho mộ t tổ chứ c cụ thể sẽ
dễ dà ng mờ i hầ u hết ngườ i dù ng cù ng tham gia
Microsoft có mộ t bộ phậ n gọ i là “Usability lab”
là m nhiệm vụ thu thậ p hoạ t độ ng củ a ngườ i dù ng
để cả i tiến sả n phẩ m liên tụ c (đọ c thêm TLTK
trang 282)
108
Cách tiếp cận lấy người dung làm trung tâm (user-
centered approach)
Ngườ i sử dụ ng và mụ c tiêu củ a họ , chứ
khô ng chỉ cô ng nghệ, là độ ng lự c phá t triển
sả n phẩ m
Mộ t hệ thố ng đượ c thiết kế tố t là dự a trên
kỹ nă ng và thó i quen củ a ngườ i dù ng
Hỗ trợ hơn là hạ n chế ngườ i sử dụ ng
Ba nguyên tắ c là m nên "mộ t hệ thố ng hữ u
ích và dễ sử dụ ng"
109
Cách tiếp cận lấy người dung làm trung tâm (user-
centered approach)
Ba nguyên tắ c là m nên "mộ t hệ thố ng hữ u
ích và dễ sử dụ ng“:
1. Tậ p trung và o ngườ i dù ng và cô ng việc củ a họ
2. Đo lườ ng thự c nghiệm
3. Thiết kế lặ p lạ i
110
Tập trung vào người dùng và công việc của họ
111
Đo lường thực nghiệm
Cho ngườ i dù ng tương tá c vớ i prototype, ghi
nhậ n phả n ứ ng củ a ngườ i dù ng và đo lườ ng
cá c chỉ số hiệu suấ t
Có thể sử dụ ng cá c cô ng cụ đo lườ ng hiện có
trên thị trườ ng hoặ c phả i tự thiết kế cô ng cụ
đo lườ ng đặ c thù (thậ m chí là bí mậ t so vớ i
đố i thủ cạ nh tranh) riêng
112
Thiết kế lặp lại
Chu trình "thiết kế, thử nghiệm, đo lườ ng và
thiết kế lạ i" đượ c lặ p lạ i nhiều lầ n đến khi
nà o loạ i sả n phẩ m đó khô ng cò n cầ n thiết
cho xã hộ i nữ a mớ i thô i (ví dụ chu trình này
hiện nay khô ng cò n á p dụ ng cho máy nhắ n
tin nữ a vì ngày nay khô ng cò n ai dù ng máy
nhắ n tin nữ a)
113
Bài học vận dụng (xem trang 287)
Giả sử rằ ng bạ n đang tham gia và o việc phá t
triển mộ t website thương mạ i điện tử bá n cây
cả nh. Hãy đề xuấ t cá c cá ch á p dụ ng cá c nguyên
tắ c trên trong nhiệm vụ này
Cụ thể:
1. Ngườ i dù ng là nhữ ng ai? Có thể tìm thấy họ ở đâ u?
Cô ng việc củ a họ là gì? Nêu 3 tình huố ng sử dụ ng
website này và kế hoạ ch tương tá c vớ i họ trong từ ng
tình huố ng như thế nà o?
2. Có thể đo lườ ng thự c nghiệm cá c thiết kế website
bằ ng nhữ ng cá ch nà o?
114
Hiểu công việc của người dùng bằng “phương pháp
Ethnography”
Ngườ i thiết kế cầ n hò a mình trong mô i trườ ng củ a
ngườ i dù ng và tham gia và o cô ng việc hà ng ngày, cá c
cuộ c trò chuyện, cá c cuộ c họ p, đọ c tà i liệu,…
Ngườ i dù ng thườ ng khô ng nhìn thấy tầ m quan trọ ng củ a
cá c hà nh độ ng hoặ c sự kiện quen thuộ c, do đó họ khô ng
nó i ra khi đượ c hỏ i
Phương phá p Ethnography là mộ t trả i nghiệm chứ
khô ng phả i là phương phá p thu thậ p dữ liệu. Tuy nhiên
cầ n đượ c ghi lạ i và chia sẻ trong nhó m thiết kế
Sinh viên đọ c thêm câ u chuyện về “thu thậ p thô ng tin
dâ n tộ c họ c ở mộ t cô ng ty truyền thô ng” trong TLTK
trang 289
115
Thiết kế theo ngữ cảnh (Contextual Design)
116
Người dùng cùng tham gia thiết kế (Participatory Design)
117
Bài tập vận dụng
1. Hỏ i ngườ i bá n xô i và ghi lạ i mô tả củ a chị
ấy về quá trình bá n mộ t hộ p xô i
2. Là m phụ giú p ngườ i bá n xô i và chú ý ghi
lạ i nhữ ng gì chị ấy hướ ng dẫ n bạ n là m
3. So sá nh 2 kết quả
118
BÀI TẬP
1. Xây dự ng low-fidelity prototype cho
giao diện nhậ n xe và o bã i củ a mộ t
bã i giữ xe thô ng minh (bã i này giữ
cá c loạ i xe: xe ô tô con, xe ca, xe tả i
đủ loạ i, xe container)
2. Viết story board miêu tả quá trình
tương tá c “nhậ n xe và o bã i”
119
BÀI TẬP
1. Xây dự ng low-fidelity prototype cho
giao diện ngườ i dù ng củ a quá n
“smart café” (đây là quá n hoà n toà n
tự phụ c vụ cá c loạ i thứ c ă n và nướ c
uố ng chế biến sẵ n)
2. Viết story board miêu tả quá trình
tương tá c “lấy mó n”
120
NỘI DUNG THI 60'
1. Xây dự ng menu tương tá c
2. Low fidelity Prototype
3. Storyboard
4. Đưa ra cá c yêu cầ u thiết kế cho mộ t
sả n phẩ m/ ứ ng dụ ng nà o đó
5. Hãy đề xuấ t cá c cô ng việc cầ n là m để
thự c hiện nguyên tắ c thiết kế "Lấy
ngườ i dù ng là m trung tâ m" trong việc
thu thậ p yêu cầ u.
121
Thiết kế tương tác đa phương tiện
ĐÁNH GIÁ
122
NỘI DUNG
1. Giớ i thiệu
2. Cá c phương phá p đá nh giá
3. Cá c kỹ thuậ t đá nh giá
4. Mố i liên hệ giữ a phương phá p đá nh
giá và kỹ thuậ t đá nh giá
5. Mô hình DECIDE
123
Giới thiệu
Đá nhgiá là quá trình thu thậ p dữ liệu
có hệ thố ng nhằ m biết nhậ n định củ a
mộ t ngườ i dù ng hoặ c mộ t nhó m ngườ i
dù ng cụ thể, sử dụ ng sả n phẩ m cho
mộ t nhiệm vụ cụ thể, và trong mộ t mô i
trườ ng cụ thể
124
CÁC PHƯƠNG PHÁP ĐÁNH GIÁ
Phương phá p “quick-dirty”
Phương phá p kiểm thử khả nă ng sử
dụ ng
Phương phá p nghiên cứ u thự c địa
Phương phá p dự đoá n
Mố i liên hệ giữ a cá c p.phá p đá nh giá
125
PHƯƠNG PHÁP “QUICK-DIRTY”
Phương phá p này phả i hoà n thà nh trong thờ i
gian ngắ n
Thô ng qua phả n hồ i củ a ngườ i dù ng
Có thể thự c hiện tạ i bấ t cứ thờ i điểm nà o củ a
quá trình thiết kế
Ngườ i thiết kế có thể tậ p hợ p yêu cầ u bằ ng
cá ch trao đổ i trự c tiếp hoặ c khô ng chính thứ c
vớ i ngườ i dù ng đưa ra bả n thiết kế hoà n
thiện bả n thiết kế trong cá c quy trình tiếp theo
126
PHƯƠNG PHÁP KIỂM THỬ KHẢ NĂNG SỬ DỤNG (Usability
testing)
Phương phá p này phả i cầ n phả i có sự kết hợ p
củ a nhữ ng ngườ i dù ng nhấ t định. Xá c định rõ
rà ng định lượ ng về nhữ ng nhiệm vụ mà ngườ i
dù ng đó thự c hiện vớ i sả n phẩ m thiết kế
Phương phá p này đượ c kiểm soá t rấ t chặ t chẽ
bở i ngườ i đá nh giá khô ng đượ c xảy ra lỗ i khi
ngườ i đá nh giá là ngườ i đưa ra quyết định cuố i
Định lượ ng củ a phương phá p này (cá c hoạ t
độ ng sử dụ ng sả n phẩ m đều đượ c ghi lạ i) sử
dụ ng là m dữ liệu phâ n tích
127
PHƯƠNG PHÁP NGHIÊN CỨU THỰC ĐỊA (Field Studies)
128
PHƯƠNG PHÁP DỰ ĐOÁN
Phương phá p tậ p trung và o nhữ ng bả n
đá nh giá , khá m phá nhữ ng vấ n đề mà
thiết kế gặ p phả i chỉ ra vấ n đề về tính
khả dụ ng củ a thiết kế
Phương phá p này sử dụ ng nhiều cô ng cụ
phầ n mềm và thiết bị để phụ c vụ cho
việc đá nh giá nhữ ng bả n thiết kế khở i
nguồ n, ví dụ như: cá c form mẫ u đá nh
giá , checklist…
129
MỐI LIÊN HỆ
Cá c
phương phá p đá nh giá này đều có
yếu tố liên hệ để xá c định:
○Đặ c điểm ngườ i dù ng
○Địa điểm
○Khi nà o sử dụ ng
○Loạ i dữ liệu
○Phả n hồ i bằ ng cá ch nà o
130
CÁC KỸ THUẬT ĐÁNH GIÁ
Kỹ thuậ t tiếp cậ n ngườ i dù ng
Kỹ thuậ t hỏ i ý kiến ngườ i dù ng
Kỹ thuậ t hỏ i ý kiến chuyên gia
Kỹ thuậ t kiểm thử tính khả dụ ng
Kỹ thuậ t mô hình hó a nhiệm vụ ngườ i
dù ng để cả i thiện giao diện
131
MỘT SỐ MỐI LIÊN HỆ
Liên hệ “quick-dirty” vớ i kỹ thuậ t tiếp
cậ n ngườ i dù ng tậ p trung và o việc
quan sá t biểu hiện trạ ng thá i tự nhiên
củ a ngườ i dù ng
Liên hệ “quick-dirty” vớ i kỹ thuậ t hỏ i ý
kiến ngườ i dù ng tậ p trung và o nhữ ng
ngườ i dù ng tiềm nă ng hoặ c nhó m
ngườ i dù ng
132
MÔ HÌNH DECIDE
Mô hình DECIDE đượ c mô tả cho nhữ ng
việc sau:
○ Chỉ ra mụ c tiêu cầ n đá nh giá
○ Tìm kiếm câ u trả lờ i cho nhữ ng câ u hỏ i cụ thể
○ Lự a chọ n phương phá p và kỹ thuậ t để đưa ra
câ u trả lờ i
○ Xá c định nhữ ng vấ n đề thự c tế
○ Giả i quyết nhữ ng vấ n đề về đạ o đứ c
○ Đá nh giá , giả i thích và trình diễn dữ liệu
133
MÔ HÌNH DECIDE
Chỉ ra mụ c tiêu cầ n đá nh giá :
○ Kiểm tra ngườ i đá nh giá có hiểu đượ c yêu cầ u
ngườ i dù ng
○ Chỉ ra nhữ ng biểu tượ ng, hình tượ ng tạ i thiết
kế khở i đầ u
○ Kiểm tra chắ c chắ n giao diện cuố i cù ng ổ n định
○ Kiểm nghiệm mứ c độ cô ng nghệ có thể á p dụ ng
○ Chỉ ra nhữ ng điểm có thể á p dụ ng qua nhữ ng
sả n phẩ m đã thiết kế trướ c đó
134
MÔ HÌNH DECIDE
Tìm kiếm câ u trả lờ i cho nhữ ng câ u hỏ i cụ thể
Ví dụ :
Mụ c tiêu khi tìm câ u trả lờ i cho việc khá ch hà ng
thích mua vé máy bay tạ i quầy hay trên mạ ng
nhữ ng câ u hỏ i đặ t ra:
○ thá i độ củ a khá ch hà ng khi cầ m vé là gì?
○ Khá ch hà ng khô ng tin tưở ng online hay yêu thích
quầy bá n hà ng?
○ Khi bay họ cầ n mang theo vé máy bay khô ng?
○ Uy tín củ a hệ thố ng bá n vé online có tố t khô ng?
135
MÔ HÌNH DECIDE
Ví dụ : (tt)
Tá ch nhỏ nhữ ng câ u hỏ i trên ra nhữ ng
câ u hỏ i chi tiết:
○Giao diện ngườ i dù ng có khô ng tố t?
○Hệ thố ng có khó điều khiển?
○Phả n hồ i có lâ u khô ng?
○Có dễ nhầ m lẫ n khô ng?
136
MÔ HÌNH DECIDE
Chọ n phương phá p và kỹ thuậ t thích hợ p:
○ Sau khi đã xá c định đượ c câ u hỏ i và mụ c tiêu
tiếp theo chọ n phương phá p và kỹ thuậ t
phù hợ p
Xá c định nhữ ng vấ n đề thự c tế:
○ Ngườ i dù ng
○ Thiết bị
○ Kế hoạ ch và kinh phí
○ Chuyên gia
137
MÔ HÌNH DECIDE
Giả i quyết vấ n đề đạ o đứ c:
○ Nếu thự c hiện lấy thô ng tin từ ngườ i dù ng
cầ n phả i giữ bí mậ t cho ngườ i dù ng
○ Khi thự c hiện cầ n rõ rà ng thô ng tin cho ngườ i
tham gia như:
Chỉ rõ mụ c đích thự c hiện khả o sá t
Chắ c chắ n cá c kiểm tra, đá nh giá về ngườ i tham
gia cầ n đượ c giữ bí mậ t
Ngườ i tham gia có thể dừ ng việc đá nh giá bấ t kỳ
lú c nà o
138
MÔ HÌNH DECIDE
Đá nh giá , giả i thích và trình diễn dữ
liệu cầ n lưu ý:
○Độ tin cậy
○Độ chính xá c
○Ướ c lượ ng
○Phạ m vi
○Sinh thá i
139
TRÂN TRỌNG CẢM ƠN
14
0