Tổng hợp bài giảng môn học Thiết kế tương tác đa phương tiện | Học viện Công nghệ Bưu chính Viễn thông
Tổng hợp bài giảng môn học Thiết kế tương tác đa phương tiện của Học viện Công nghệ Bưu chính Viễn thông với những kiến thức và thông tin bổ ích giúp sinh viên tham khảo, ôn luyện và phục vụ nhu cầu học tập của mình cụ thể là có định hướng ôn tập, nắm vững kiến thức môn học và làm bài tốt trong những bài kiểm tra, bài tiểu luận, bài tập kết thúc học phần, từ đó học tập tốt và có kết quả cao cũng như có thể vận dụng tốt những kiến thức mình đã học vào thực tiễn cuộc sống. Mời bạn đọc đón xem!
Môn: Thiết kế tương tác đa phương tiện (MUL1425)
Trường: Học viện Công Nghệ Bưu Chính Viễn Thông
Thông tin:
Tác giả:
Thông tin :
Môn:
Thiết kế tương tác đa phương tiện (MUL1425)
Trường:
Học viện Công Nghệ Bưu Chính Viễn Thông
Tác giả:
Preview text:
HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG ***** BÀI GIẢNG
(Phương pháp đào tạo theo tín chỉ)
TÊN MÔN HỌC: THIẾT KẾ TƯƠNG TÁC ĐA PHƯƠNG TIỆN Mã môn học: MUL1425 (02 tín chỉ) Biên soạn KHOA ĐA PHƯƠNG TIỆN ThS. Bùi Thị Thu Huế LỜI NÓI ĐẦU
Bài giảng “Thiết kế tương tác đa phương tiện” dùng cho sinh viên tham khảo, trong
chuyên ngành công nghệ đa phương tiện, thuộc lĩnh vực Đa phương tiện”, với hai đơn
vị học trình. Nội dung của tài liệu đề cập (i) Tổng quan về thiết kế tương tác đa phương
tiện; (ii) Quy trình thiết kế tương tác đa phương tiện; và (iii) Các kỹ thuật trong thiết kế
tương tác đa phương tiện.
Tài liệu được đánh số chương mục theo chữ số Ả rập. Một số hình vẽ và bảng biểu trong
các chương có giá trị minh hoạ. Một số hình vẽ được trích từ các tài liệu tham khảo, để
tiện đối chiếu và có thông tin sâu hơn.
Bài giảng này trình bày mạch lạc về các vấn đề thực tiễn của việc tạo ra các hệ thống và
sản phẩm tương tác đa phương tiện từ góc độ người dùng làm trung tâm. Nó được phát
triển dựa tên nguyên tắc và phương pháp của tương tác người máy (HCI) và thiết kế
tương tác (Interaction Design – ID) để phù hợp với các sản phẩm đa phương tiện của
thế kỷ XXI. Thiết kế hệ thống tương tác liên quan đến việc thiết kế các trang web, các
ứng dụng máy tính để bàn, ứng dụng trên điện thoại thông minh, hệ thống thực tại ảo và
hệ thống để hỗ trợ hợp tác giữa con người.
Tác giả xin chân thành cám ơn các cán bộ khoa Đa phương tiện, Học viện Công nghệ
bưu chính viễn thông PTIT đã trợ giúp để hoàn thành tài liệu này. 1 MỤC LỤC LỜI NÓI ĐẦU 0 MỤC LỤC 2 DANH MỤC HÌNH VẼ 5 DANH MỤC BẢNG BIỂU 10
Chương 1. TỔNG QUAN VỀ THIẾT KẾ TƯƠNG TÁC ĐA PHƯƠNG TIỆN 10
1.1 Giới thiệu về thiết kế tương tác và thiết kế tương tác đa phương tiện 11
1.1.1 Các định nghĩa và khái niệm 11
1.1.2 Vai trò của thiết kế tương tác đa phương tiện 16
1.1.3 Ví dụ về thiết kế tương tác đa phương tiện 17
1.2 Những yếu tố trong thiết kế tương tác 20 1.2.1 Con người 20
1.2.1.1 Đặc điểm vật lý 21
1.2.1.2 Đặc điểm tâm lý 24
1.2.1.3 Đặc điểm xã hội 25 1.2.2 Hoạt động 26 1.2.3 Ngữ cảnh 27 1.2.4 Công nghệ 28 1.2.4.1 Đầu vào 29 1.2.4.2 Đầu ra 33
1.3 Mục tiêu của thiết kế tương tác 36 1.3.1 Khả năng sử dụng 36 1.3.1.1 Dễ dùng 37
1.3.1.2 Hiệu suất sử dụng 39 1.3.1.3 Dễ nhớ 40 1.3.1.4 Lỗi 42 1.3.1.5 Sự hài lòng 43
1.3.2 Trải nghiệm người dùng (User Experience – UX) 44
1.4 Một số dạng tương tác cơ bản 47
1.4.1 Giao tiếp Menu selection 48 1.4.2 Giao tiếp Audio menu 50
1.4.3 Giao tiếp menu trên màn hình nhỏ 50 1.5 Câu hỏi ôn tập 59
Chương 2. QUY TRÌNH THIẾT KẾ TƯƠNG TÁC 62 2
2.1 Giới thiệu các pha trong quy trình thiết kế tương tác 62
2.2 Các mô hình thiết kế và phát triển sản phẩm tương tác tương tác 63 2.2.1 Mô hình đơn giản 64 2.2.2 Mô hình thác nước 65 2.2.3 Mô hình RAD 65 2.2.4 Mô hình xoắn ốc 67 2.2.5 Mô hình ngôi sao 67
2.3 Các đặc điểm chính của quy trình thiết kế tương tác 67 2.4 Case study 68 2.4.1 Case study 1 68 2.4.2 Case study 2 75 2.5 Bài tập 83
Chương 3. CÁC KỸ THUẬT TRONG THIẾT KẾ TƯƠNG TÁC 83
3.1 Xác định yêu cầu (Indentifying needs and Establishing requirements) 84
3.1.1 Xác định đối tượng người dùng 85
3.1.2 Các phương pháp thu thập dữ liệu 86 3.1.2.1 Phỏng vấn 86 3.1.2.2 Đặt câu hỏi 87 3.1.2.3 Nhóm mục tiêu 89 3.1.2.4 Quan sát tự nhiên 90
3.1.2.5 Nghiên cứu tài liệu 90 3.2 Personas 91 3.3 Phân tích nhiệm vụ 93
3.3.1.1 Phân tích mục đích, nhiệm vụ và các hành động 93
3.3.1.2 Phân tích nhiệm vụ 94
3.4 Kịch bản sử dụng (Scenarios) 97
3.5 Thiết kế kiến trúc thông tin 99
3.5.1 Mô hình hoá đối tượng (Object model) 100 3.5.2 Kiến trúc thông tin 106
3.6 Thiết kế ý tưởng (concept design) 108 3.7 Thiết kế vật lý 110
3.7.1 Ngôn ngữ thiết kế 111
3.7.2 Một số nguyên tắc thiết kế 113
3.7.3 Thiết kế giao diện 117
3.8 Xây dựng bản mẫu tương tác 118 3
3.8.1 Mẫu thử với độ trung thực thấp (Lo-fi Prototype): 119
3.8.2 Mẫu thử với độ trung thực cao (Hi-fi Prototype): 120
3.8.3 Ví dụ về phương pháp xây dựng mẫu thử trên giấy 122 3.9 Đánh giá 123
3.9.1 Phương pháp chuyên gia đánh giá 125
3.9.2 Phương pháp người dùng đánh giá 129 3.10 Bài tập 131 TÀI LIỆU THAM KHẢO 134 4 DANH MỤC HÌNH VẼ
Hình 1-1. Phạm vi của thiết kế tương tác ...................................................................... 10
Hình 1-2. Thiết kế giao diện của trang chủ Netflix ...................................................... 13
Hình 1-3: iPhone ........................................................................................................... 14
Hình 1-4: Facebook ....................................................................................................... 15 Hình 1-5: Wii
................................................................................................................ 15
Hình 1-6: Second life .................................................................................................... 16
Hình 1-7: I Robot -Q ..................................................................................................... 17
Hình 1-8: Góc thị giác. .................................................................................................. 19
Hình 1-9: Mô hình cấu trúc bộ nhớ ............................................................................... 22
Hình 1-10: Thiết kế đảm bảo an toàn khi người dùng nhầm lẫn .................................. 24
Hình 1-11: Bàn phím máy tính ..................................................................................... 26
Hình 1-12: Bàn phím Keypad được thiết kế co thiết bị điện thoại cầm tay. ................. 26
Hình 1-13: Màn hình cảm ứng của máy tính bảng ....................................................... 27
Hình 1-14: Bút trỏ ......................................................................................................... 28
Hình 1-15: Chuột với 2 nút bấm và bánh xe thumbwheel ............................................ 28
Hình 1-16: Chuột ma thuật (magic mouse) của Apple. ................................................ 29
Hình 1-17: Một Game Joystick ..................................................................................... 29
Hình 1-18: Hiển thị các lựa chọn cho chế độ màn hình ................................................ 30
Hình 1-19: Máy chiếu di động ...................................................................................... 31
Hình 1-20: Thiết kế đảm bảo người dùng có thể dự đoán hành động (Nguồn: Smashing 5 Magazine)
...................................................................................................................... 34
Hình 1-21: Thiết kế trên màn hình nhỏ cần chú ý đến kích thước và khoảng cách các nút
....................................................................................................................................... 35
Hình 1-22: Giao diện website thể hiện rõ các chuyên mục trên thanh menu ............... 35
Hình 1-23: Tiện ích gợi ý của google ........................................................................... 37
Hình 1-24: Biều tượng cần được thiết kế gần gũi với người dùng ............................... 38
Hình 1-25: Thiết kế thống nhất trong 2 hệ điều hành khác nhau .................................. 38
Hình 1-26: Thiết kế cần thống nhất một kiểu trình bày trên một sản phẩm ................. 39
Hình 1-27: Cảnh báo giúp người dùng tránh được những lỗi khi sử dụng ................... 40
Hình 1-28: Thiết kế responsive cho website sẽ cung cấp khả năng sử dụng cho người
dùng ở các loại thiết bị khác nhau. ................................................................................ 41
Hình 1-29: Quy trình quyết định sự lỗi thời của thiết kế (Nguồn: Smashing Magazine)
....................................................................................................................................... 42
Hình 1-30: Sảm phẩm Mac Air của Apple ................................................................... 42
Hình 1-31: Menu selection trên Microsoft .................................................................... 45
Hình 1-32: Các menu phụ thuộc nhau. ......................................................................... 46
Hình 1-33: Menu trên màn hình nhỏ. ............................................................................ 47
Hình 1-34: Giao diện menu trên mobile game .............................................................. 48
Hình 1-35: Phím cứng trên điện thoại hỗ trợ giao tiếp menu selection ........................ 48
Hình 1-36: Thay đổi bố cục sắp xếp menu trên các màn hình kích thước khác nhau. . 49
Hình 1-37: Giao tiếp dạng hỏi đáp đơn giản ................................................................. 50 6
Hình 1-38: Giao tiếp dạng hỏi đáp yêu cầu người dùng cần trả lời các câu hỏi của hệ
thống .............................................................................................................................. 50 Hình 1-39: Giao tiếp dùng ngôn ngữ truy vấn
.............................................................. 51
Hình 1-40: Giao diện nhập theo khuôn dạng ................................................................ 52
Hình 1-41: WIMP ......................................................................................................... 53
Hình 1-42: Một số dạng con trỏ chuột trong MS Windows, theo ngữ nghĩa khác nhau.
....................................................................................................................................... 54
Hình 1-43. Điều khiển nhận dạng cử chỉ trong thời gian thực. ..................................... 55
Hình 2-1: Mô hình đơn giản .......................................................................................... 59
Hình 2-2: Mô hình thác nước ........................................................................................ 60
Hình 2-3: Mô hình RAD. .............................................................................................. 60
Hình 2-4: Mô hình xoắn ốc ........................................................................................... 61
Hình 2-5: Mô hình ngôi sao .......................................................................................... 62
Hình 2-6: Khung nhìn Micro và Macro với nguyên mẫu giấy .................................... 64
Hình 2-7: Màn hình theo luồng .................................................................................... 65
Hình 2-8 Phần và nội dung ........................................................................................... 66
Hình 2-9 Thiết kế thay thế ............................................................................................ 66
Hình 2-10 Các sự cố mạng ............................................................................................ 67
Hình 2-11. Thời gian chờ đợi và phản hồi của người dùng .......................................... 68
Hình 2-12 Phương pháp điều trị thiết kế trực quan ....................................................... 69
Hình 2-13: Trang chủ được thiết kế lại của Hubsport .................................................. 70
Hình 2-14. Phân tích hành vi người dùng bằng công cụ phân tích dữ liệu ................... 71 7
Hình 2-15 Bản đồ heat và bản đồ cuộn trang ................................................................ 72
Hình 2-16: Bảng tài liệu thua thập ................................................................................ 73
Hình 2-17: Sử dụng công cụ phân tích dữ liệu ............................................................. 74
Hình 2-18: Giao diện vẽ wireframe .............................................................................. 75
Hình 2-19: Một yếu tố thú vị khác của cấu trúc lưới không điển hình là khung ảnh. .. 76
Hình 2-20: Mã code cho trang Hubsport ...................................................................... 77
Hình 2-21 Dùng bản đồ Heat map để đánh giá lại trang chủ ........................................ 78
Hình 3-1: Các kỹ thuật trong thiết kế và phát triển sản phẩm Đa phương tiện tương tác
....................................................................................................................................... 79
Hình 3-2: Ví dụ về một persona .................................................................................... 87
Hình 3-3. Cấu trúc phân cấp chức năng việc mượn sách trong thư viện ...................... 90
Hình 3-4. Phân cấp chức năng login ............................................................................. 90
Hình 3-5. Use case ........................................................................................................ 91
Hình 3-6: Mô hình GOMS ............................................................................................ 92
Hình 3-7. IA được mô tả trong các nhóm, nhóm con và các siêu dữ liệu của nội dung
....................................................................................................................................... 94
Hình 3-8. Ví dụ về nội dung có cấu trúc và không cấu trúc ......................................... 96
Hình 3-9. Các sự kiện sắp tới sẽ được sắp xếp theo ngày ............................................. 98
Hình 3-10. Lịch sử được trình bày theo chuỗi thời gian ............................................... 98
Hình 3-11. Trang contact được sắp xếp theo bảng chữ cái ........................................... 99 8
Hình 3-12. Phân loại thông tin theo vùng địa lý ........................................................... 99
Hình 3-13. Trang Learn How to D.I.Y được phân chia theo định dạng các loại hình 100
Hình 3-14. Ứng dụng kế toán được sắp xếp theo nhiệm vụ ....................................... 100
Hình 3-15. Phân loại theo các nhóm ........................................................................... 101
Hình 3-16. Cấu trúc phân cấp ..................................................................................... 101
Hình 3-17. Cấu trúc tuyến tính .................................................................................... 102
Hình 3-18. Cấu trúc dạng Chuyên mục ....................................................................... 102
Hình 3-19. Cấu trúc dạng Hub .................................................................................... 102
Hình 3-20: Không gian thiết kế ................................................................................... 104
Hình 3-21: Storyboard ................................................................................................ 105
Hình 3-22: Ngôn ngữ thiết kế trong giao diện ............................................................ 107
Hình 3-23: Ngôn ngữ thiết kế của Apple .................................................................... 108
Hình 3-24 Khoảng cách các nút bấm bằng nhau trong Windows XP ......................... 108
Hình 3-25 Các nút bấm được tổ chức với luật gần nhau trong Mac OS X ................. 109
Hình 3-26: Tổ chức file với tính chất tương tự ........................................................... 109
Hình 3-27: Cửa sổ new Finder trong Mac OS X ........................................................ 110
Hình 3-28: Các khu vực nội dung khác nhau trên trang Amazon ............................... 110
Hình 3-29: Trước và sau khi nhóm các hộp thoại ....................................................... 111
Hình 3-30: Ví dụ về một hộp thông báo ..................................................................... 111
Hình 3-31: Ví dụ về sử dụng màu trong thiết kế tương tác ........................................ 111 9
Hình 3-32. Thiết kế giao diện người dùng .................................................................. 113
Hình 3-33: Paper Prototype ......................................................................................... 114 Hình 3-34: Hi-fi Prototype
.......................................................................................... 115 Hình 3-35: Các mẫu nội
dung trên giấy ...................................................................... 116
Hình 3-36: Tổ chức các mẫu giấy thành kịch bản tương tác ...................................... 117
Hình 3-37: Video prototype ........................................................................................ 117
Hình 3-38: Thiết kế điều khiển từ xa. ......................................................................... 121
Hình 3-39: Thiết kế biểu tượng với hai phong cách khác nhau .................................. 124
Hình 3-40: Kết quả theo dõi chuyển động mắt trên màn hình cho thấy khu vực được tập
trung nhìn nhiều nhất. ................................................................................................. 125
Hình 3-41: Máy đo sinh lý .......................................................................................... 125
DANH MỤC BẢNG BIỂU
Bảng 3-1: Tổng quan về các kĩ thuật thu thập dữ liệu trong khi thu thập nhu cầu người dùng.
.............................................................................................................................. 86
Bảng 3-2: Bảng quy ước màu ở các nước phương tây ................................................ 112
Bảng 3-3: Bảng so sánh ưu nhược điểm của lo-fi và hi-fi prototype .......................... 116
Chương 1. TỔNG QUAN VỀ THIẾT KẾ TƯƠNG TÁC ĐA PHƯƠNG TIỆN
Đa phương tiện tương tác là một loại hình sản phẩm đa phương tiện đặc biệt do
những sản phẩm này có giao diện để giao tiếp với người sử dụng. Thiết kế sản phẩm đa
phương tiện tương tác không phải chỉ là tạo ra hình ảnh trực quan, mà cần phải kiến thức
về thiết kế tương tác và các lĩnh vực có liên quan. Chương 1 sẽ cung cấp những kiến
thức nền tảng về thiết kế tương tác, và các dạng tương tác trong thiết kế. 10
1.1 Giới thiệu về thiết kế tương tác và thiết kế tương tác đa phương tiện
1.1.1 Các định nghĩa và khái niệm
Thuật ngữ “Tương tác” được hiểu như quá trình truyền thông giữa hai đối tượng,
chẳng hạn giữa người dùng với máy tính. Vấn đề cần xét là những hành động con người
thực hiện trong tương tác với máy tính. Nhiều kiểu thiết bị khác nhau sẽ có các giao diện tương tác khác nhau.
Định nghĩa: tương tác là loại hành động có sự phản hồi xảy ra do hai đối tượng
tác động qua lại với nhau.
Tương tác trong cùng một hệ thống giữa các phần tử riêng lẻ có thể tạo nên tác
động như hội tụ các tác động và nó tạo thành một hệ thống tương tác. Các hành động có
nhiều dạng, chẳng hạn gửi thư điện tử, thu thập thông tin, điều khiển… Các loại sản
phẩm tương tác như điện thoại, máy tính, tivi, máy ATM, máy photocopy,...Các lĩnh
vực cần đến thiết kế tương tác như phát triển các ứng dụng đa phương tiện, môi trường
thực tại ảo, các thiết bị trợ giúp con người,...
Vấn đề chính trong thiết kế tương tác là cách thức tối ưu tương tác của người dùng
với hệ thống, môi trường hay sản phẩm, để chúng khớp với hoạt động của người dùng.
Khi đó người ta cần xem xét:
● Sự phù hợp của người dùng;
● Phương thức có thể trợ giúp người dùng;
● Đảm bảo trải nghiệm người dùng có chất lượng;
● Sử dụng các kĩ thuật của trí tuệ nhân tạo, để có hệ thống tốt trong quá trình thiết kế.
Định nghĩa: Thiết kế tương tác là thiết kế các sản phẩm có tính tương tác với các
hành vi sử dụng hấp dẫn để trợ giúp con người trong cuộc sống thường ngày và trong công việc của họ.
Thiết kế tương tác là tạo nên một thói quen tiện dụng cho người dùng. Và quan hệ
thống tương tác, người dùng có thêm kinh nghiệm khi sử dụng, làm việc với hệ thống.
Người thiết kế tương tác phải hiểu được giao tiếp giữa người dùng và công nghệ. Với
sự hiểu biết này, họ có thể dự đoán người dùng sẽ tương tác với sản phẩm như thế nào,
và sớm tìm ra những vấn đề trong sử dụng, cũng như sáng tạo ra những cách thức mới để làm việc.
Sản phẩm đa phương tiện là sản phẩm được tích hợp các phương tiện truyền thông
như văn bản, âm thanh, các loại hình ảnh và các phần mềm, trong một môi trường thông
tin số. Trong sản phẩm đa phương tiện sẽ có những sản phẩm có tính tương tác với người 11
dùng. Nói cách khác là người dùng có thể điều khiển các phương tiện truyền thông trong
sản phẩm đa phương tiện này. Khi đó người ta sẽ gọi là sản phẩm Đa phương tiện tương tác.
Như vậy có thể định nghĩa: Thiết kế tương tác đa phương tiện là lĩnh vực thiết kế
cho các sản phẩm đa phương tiện tương tác. Những tương tác này cho phép người dùng
có thể tác động với các dữ liệu với mục địch nhất định.
Thiết kế tương tác quan trọng nhất là xác định được tầm quan trọng của việc hiểu
cách người dùng hành động, phản ứng trước sự kiện và cách họ liên lạc, tương tác với
nhau. Điều đó yếu cầu người thiết kế cần các tri thức tâm lý học, xã hội học…. Tương tự
như vậy, việc xác định được hiểu biết về cách thiết kế các kiểu tương tác khác nhau và
cách lựa chọn hình ảnh khác nhau sẽ cho phép nhiều kiểu thiết kế tương tác, tương ứng
cần có kiến thức về thiết kế đồ họa, nghệ thuật, thiết kế sản phẩm,… 12
Hình 1-1. Phạm vi của thiết kế tương tác
Lĩnh vực thiết kế tương tác liên quan đến rất nhiều các lĩnh vực khác như tương
tác người máy, thiết kế âm thanh, thiết kế hình ảnh, thiết kế kinh nghiệm người dùng,
kiến trúc thông tin,… Trong đó tương tác người máy (Human Computer Interaction –
HCI) là nền tảng của thiết kế tương tác, và thiết kế kinh nghiệm người dùng (User
experience – UX) là trái tim của thiết kế tương tác. Ngoài ra còn có nhiều lĩnh vực khác
và có nhiều thuật ngữ khác khác nhau có liên quan. Thiết kế tương tác là sự tích hợp
nhiều lĩnh vực khác nhau, do đó khi làm việc người thiết kế cần hiểu và nắm rõ về các
khái niệm có liên quan. Các lĩnh vực có liên quan đến thiết kế tương tác như:
Human Computer Interaction – HCI (Tương tác người máy)
Thiết kế tương tác người máy đề cập đến 3 vấn đề đó là người dùng, thiết bị và các
nhiệm vụ được thực hiện. Hệ thống tương tác phải hỗ trợ các nhiệm vụ của người dùng.
Tức là nó tập trung vào khả năng sử dụng (Usability). Một hệ thống mà bắt người dùng
phải thực hiện một nhiệm vụ và nó không chấp nhận được thì không có khả năng sử
dụng. Cũng có nhiều tổ chức và chuyên gia đã đưa ra định nghĩa về HCI, tuy nhiên có
thể xem xét hai định nghĩa sau được tham chiếu nhiều nhất. 13
Định nghĩa về HCI của Backer và Buxton nêu ra năm 1987 : “Tương tác người
máy là tập hợp các quá trình, đối thoại và các hành động, qua đó người dùng sử dụng
và máy tính có thể tương tác với nhau”.
Định nghĩa về HCI do hiệp hội công nghệ phần mềm SIGCHI đưa ra: “Tương tác
người máy là một lĩnh vực liên quan đến thiết kế, đánh giá và cài đặt hệ thống máy tính
tương tác cho con người sử dụng và nghiên cứu các hiện tượng xảy ra trên đó”.
Cho đến cuối năm 1970, con người chỉ có tương tác với máy tính trong trường hợp
họ là các chuyên gia công nghệ thông tin và người có sở thích riêng. Điều này đã thay
đổi khi xuất hiện máy tính cá nhân vào những năm sau đó. Máy tính cá nhân, bao gồm
cả phần mềm cá nhân (các ứng dụng chẳng hạn như soạn thảo văn bản và bảng tính, và
các trò chơi máy tính tương tác) và các nền tảng máy tính cá nhân (hệ điều hành, ngôn
ngữ lập trình và phần cứng), và nó dành cho tất cả mọi người trên thế giới muốn sử dụng
máy tính như một công cụ. Thiết kế tương tác người máy trở nên quan trọng hơn và trở nên phổ biến.
User Experience – UX (Trải nghiệm người dùng).
Thiết kế trải nghiệm người dùng - UX là tập trung vào vấn đề làm thế nào để người
sử dụng cảm thấy thoải mái nhất, tiện dụng nhất, dễ sử dụng nhất, hành vi sử dụng hấp
dẫn,…khi người dùng tương tác với sản phẩm để đạt được mục tiêu nào đó của họ.
Định nghĩa:“Trải nghiệm người dùng là nhận thức và phản ứng của người dùng
từ việc sử dụng sản phẩm, dịch vụ”. (ISO 9241-210).
Như Dewey nói trải nghiệm là tối giản của những hành động, cảm nhận, suy nghĩ,
cảm xúc và ý nghĩa bao gồm cả nhận thức và cảm giác của người dùng trong bối cảnh
sử dụng (trích trong McCarthy và Wright, 2004). Trải nghiệm là có liên quan với tất cả
những phẩm chất của một hoạt động mà người dùng thực sự muốn kéo dài thời gian,
như cảm giác cuốn hút khi đọc một cuối sách hay, xem một bộ phim hấp dẫn. Trải
nghiệm người dùng bao gồm tất cả những cảm xúc của người dùng, niềm tin, sở thích,
nhận thức, phản ứng thể chất và tâm lý, hành vi và thành tích xảy ra trước, trong và
sau khi sử dụng sản phẩm. Khi được đáp ứng các nhu cầu, từ nhu cầu vật chất đến nhu
cầu tình cảm, tâm sinh lí, người dùng sẽ cảm thấy thích sản phẩm. Việc này đòi hỏi khơi
dậy bản chất của trải nghiệm người dùng. Do vậy thiết kế trải nghiệm người dùng là tìm
những giải pháp thiết kế cho sản phẩm. Trải nghiệm là cả một quá trình sử dụng sản phẩm của người dùng.
User Interface – UI (Giao diện người dùng)
Khi người dùng tương tác với hệ thống máy tính hoặc một phần mềm ứng dụng
thì cần thông qua một giao diện người dùng (UI – User Interface). UI là toàn bộ những
gì người dùng có thể nhìn thấy được và tương tác được trên hệ thống. UI là hình dáng 14
của sản phẩm, là phần bao bọc bên ngoài sản phẩm, nó mang lại những cái cảm nhận về
nhìn và cảm giác cho người dùng. Thiết kế giao diện tốt sẽ tạo hứng thú và sự tin tưởng
của người dùng với sản phẩm hơn.
Information Architeture – IA (Kiến trúc thông tin)
Kiến trúc thông tin là bao gồm việc tổ chức nội dung và các đối tượng. Mô tả chi
tiết các đối tượng và cung cấp cách để người dùng tìm thấy chúng.
Kiến trúc thông tin luôn là điều quan trọng. Kiến trúc thông tin ảnh hưởng trực
tiếp đến vấn đề tính dễ sử dụng của một sản phẩm. Khi lượng thông tin tăng lên, kiến
trúc thông tin lại càng trở nên quan trọng hơn. Kiến trúc thông tin tốt sẽ giúp mọi người
có thể tìm ra cách tìm kiếm thông tin nhanh nhất và bỏ qua những gì không liên quan.
Ví dụ phân tích các lĩnh vực liên quan đến thiết kế một sản phẩm đa phương tiện tương tác.
Ví dụ trong Hình 1-2 là thiết kế giao diện trang chủ của Netflix. Giao diện này
đưa ra những mục như Popular, Top Picks, Western TV Dramas, US TV shows,…
- Những phân loại đó là kiến trúc thông tin
- Những bộ phim được gợi ý bên trong đó dựa trên phân tích dữ liệu từ người
dùng, để đưa ra những bộ phim phù hợp với người dùng nhất. Mỗi người dùng
khác nhau, thì nội dung trong các mục này là khác nhau. Đó chính là thiết kế UX.
- Di chuột vào mỗi hình ảnh thì video sẽ chạy bản trailer của bộ phim, click vào
bức ảnh thì sẽ đưa người dùng tới trang để xem bộ phim đó,…đó là thiết kế tương tác
- Trên giao diện chúng ta thấy có icon hình kính lúp, logo của Netflix màu đỏ,
các bộ phim được xếp thành hàng ngang trong các mục,… là thiết kế giao diện người dùng. 15
Hình 1-2. Thiết kế giao diện của trang chủ Netflix
1.1.2 Vai trò của thiết kế tương tác đa phương tiện
Thiết kế tương tác đóng vai trò quan trọng trong định hướng chiến lược của nhiều
công ty. Một sản phẩm không chỉ cần được hoạt động tốt mà nó cần có các hành vi sử
dụng hấp dẫn, dễ dùng, hiệu suất sử dụng cao, giao diện bắt mắt,… Nó sẽ giúp tăng
doanh thu của công ty. Một ví dụ về công ty thời trang quần áo DOT.COM đã bị phá
sản vì lý do không coi trọng thiết kế tương tác cho trang web của mình. Trang web tập
trung vào giao diện hình họa 3D, nhưng không tính đến thời gian tải trang lâu và độ
phức tạp khi đăng ký form online. Điều đó đã khiến khách hàng cảm thấy thất vọng, họ
sử dụng một lần và không muốn quay lại.
Những sản phẩm đa phương tiện hiện nay đang hướng đến là tính tương tác giữa
con người và sản phẩm. Do đó thiết kế tương tác là lĩnh vực nhiều công ty rất chú trọng
đến. Thiết kế sản phẩm không chỉ chú trọng đến giao diện, mà còn phải quan tâm đến
khả năng sử dụng cũng như trải nghiệm của người dùng. Sự thành công của sản phẩm
phụ thuộc vào việc sản phẩm đó có số lượng người sử dụng cao là một phần, phần quan
trọng là sự trung thành của người dùng với sản phẩm. Người dùng ở lại với sản phẩm
lâu hơn, thì khả năng khai thác cũng như mang lại doanh thu nhiều hơn cho doanh
nghiệp. Người thiết kế tương tác cần nắm được các kiến thức liên quan đến nhiều lĩnh
vực khác nhau như UX, UI, HCI, IA, chiến lược thông tin, và nhiều lĩnh vực khác. 16
1.1.3 Ví dụ về thiết kế tương tác đa phương tiện
Thiết kế tương tác đa phương tiện là có liên quan với nhiều loại sản phẩm khác
nhau. Ví dụ như thiết kế hệ thống phần mềm chạy trên một máy tính, thiết kế trang web,
game, các sản phẩm nghe nhạc MP3, máy ảnh kỹ thuật số, và các ứng dụng cá nhân kỹ
thuật số (PDA). Nó được thiết kế trong môi trường điện thoại, PDA, máy tính xách tay,
máy chiếu kỹ thuật số, các thiết bị liên lạc khác, thông qua đó mọi người có thể tương
tác với nhau. Các sản phẩm tương tác được ứng dụng trong nhiều lĩnh vực, trong dịch
vụ gia đình, cho công việc, hỗ trợ cộng đồng, …Dưới đây là một số ví dụ về sản phẩm
tương tác đang phát triển gần đây. Ví dụ 1: iphone
Trong năm 2007, Apple thay đổi bộ mặt của công nghệ điện thoại di động khi họ
giới thiệu iPhone (Hình 1-3). IPhone có một giao diện thiết kế để nhằm mục đích sử
dụng các ngón tay như các thiết bị đầu vào. Nó đã trở thành một cuộc cách mạng màn
hình cảm ứng cho phép cảm ứng đa điểm ở đầu vào. Điều này tạo điều kiện sáng tạo cho
kỹ thuật tương tác mới như di chuyển thu các ngón tay lại với nhau để làm cho hình ảnh
nhỏ hơn, và di chuyển các ngón tay ra để làm cho hình ảnh lớn hơn. Nhiều thiết bị di
động và màn hình lớn hơn hiện nay đã áp dụng công nghệ này, nhưng iPhone là thiết bị
bắt đầu cho công nghệ đó. Iphone cũng có nhiều cảm ứng trong đó ví dụ cảm ứng xoay,
giúp màn hình có thể hiển thị ngang, dọc và nghiêng. Năm 2008, App store đã được đưa
ra, biến iPhone thành một nền tảng mở cho các nhà phát triển thiết kế và sản xuất ra
những phần mềm chạy trên điện thoại. Kết hợp với dịch vụ iTunes, đã biến iPhone thành
một thiết bị đa phương tiện đa năng với hàng ngàn ứng dụng, từ game giải trí đến các
ứng dụng tiện ích. Nó đã tạo ra những trải nghiệm mới và dịch vụ mới cho một tập khách hàng mới. 17
Hình 1-3: iPhone Ví dụ 2: Facebook
Facebook (Hình 1-4) là một trang web rất phổ biến mà cho phép mọi người giữ
liên lạc với bạn bè của họ. Được biết đến như các trang web mạng xã hội, có rất nhiều
trang web mạng xã hội tương tự xung quanh. Nhưng Facebook là phổ biến nhất. Mọi
người có thể lưu trữ và chia sẻ hình ảnh, viết ghi chú cho nhau và được cập nhật thường
xuyên về những gì bạn bè của họ đang làm.
Hình 1-4: Facebook Ví dụ 3: Wii
Cũng trong năm 2007 Nintendo giới thiệu Wii (Hình 1-5). Wii là một nhà cách
mạng trò chơi mới mà sử dụng cảm biến hồng ngoại gắn liền với một TV hoặc thiết bị
hiển thị khác để theo dõi một cây gậy truyền tín hiệu hồng ngoại. Hệ thống mới này
được sử dụng cho các trò chơi hành động như bowling, quần vợt,…Khái niệm về trò
chơi trên máy tính đã thay đổi hoàn toàn, từ những người trẻ tuổi chơi trò chơi bắn quái
vật, hoặc đua xe tưởng tượng, đến những người già tập thể dục giảm cân với wii đã được giới thiệu. 18 Hình 1-5: Wii
Ví dụ 4. Second Life
Second Life (Hình 1-6) là một cộng đồng trực tuyến lớn với người dùng của các
hình ảnh ảo. Nó bao gồm mô phỏng các tòa nhà, công viên, bờ biển, các nhà máy, các
trường đại học và mọi thứ khác người ta có thể tìm thấy trong thế giới thực (và nhiều
người khác bên cạnh). Người ta tạo ra các avatar đại diện cho mình trong thế giới ảo
này. Họ có thể xác định kích thước, hình dạng, giới tính và những gì họ muốn để dùng.
Chúng được điều khiển bởi những người sử dụng Internet, tương tác với các nhân vật
khác, vào các điểm thăm quan ảo.
Hình 1-6: Second life Ví dụ 5: i Robo-Q
Các đồ chơi i Robo-Q là một ví dụ về đồ chơi trẻ em mới ngày nay (Hình 1-7). Đồ
chơi được sử dụng tất cả các cách thức của các công nghệ mới để nâng cao kinh nghiệm
của trẻ em. Họ sử dụng robot có tiếng nói và một loạt các cảm biến để cung cấp tương
tác hấp dẫn cho người chơi. 19
Hình 1-7: I Robot -Q
1.2 Những yếu tố trong thiết kế tương tác
Một phần quan trọng của phương pháp tiếp cận thiết kế tương tác đó là lấy người
dùng làm trung tâm. Người dùng là yếu tố đầu tiên. Những yếu tố trong thiết kế tương
tác PACT (People, Activity, Context, Technology) là khung sườn để xây dựng các sản
phẩm tương tác. Thiết kế cần phải hiểu con người sẽ sử dụng các hệ thống và sản phẩm.
Họ cần phải hiểu các hoạt động mà con người muốn thực hiện và các bối cảnh mà các
hoạt động diễn ra. Nhà thiết kế cũng cần phải biết về tính năng của công nghệ tương tác
và làm thế nào để tiếp cận thiết kế hệ thống tương tác.
Con người sử dụng các công nghệ để thực hiện các hoạt động trong bối cảnh. Ví
dụ, một người sử dụng điện thoại di động để gửi tin nhắn cho bạn bè của họ trong khi
đang ngồi trên một xe buýt. Một cô thư ký sử dụng Microsoft Word để viết các tài liệu
trong một công ty. Một người phụ nữ khoảng 70 tuổi nhấn nút để thiết lập hệ thống báo
động kẻ xâm nhập vào nhà cô ta. Một số người sử dụng Facebook để tiếp xúc với bạn
bè khi đang ngồi trong một quán cà phê Internet. Trong tất các ví dụ trên ta thấy người
dùng sử dụng công nghệ để thực hiện các hoạt động trong các bối cảnh khác nhau và có
những tương tác rất đa dạng. Qua đó ta thấy thiết kế hệ thống tương tác là rất khó để hấp dẫn người dùng. 1.2.1 Con người
Con người là nhân vật trung tâm trong bất kỳ cuộc thảo luận về hệ thống tương
tác. Các yêu cầu của người sử dụng nên được ưu tiên hàng đầu. Thiết kế một cái gì đó
cũng cần phải hiểu rõ khả năng và hạn chế của người dùng. Cần phải nắm rõ những thứ
mà người dùng thấy khó khăn, thậm trí là không thể thực hiện được. Đồng thời cũng cần 20
biết những gì khiến người dùng cảm thấy dễ dàng thực hiện thì cần kích thích những
điều đó. Chúng ta cũng cần xem xét đến vấn đề tâm lý trong con người. Tức là làm thế
nào con người nhận thức được thế giới xung quanh họ, làm thế nào họ lưu trữ và xử lý
thông tin, giải quyết vấn đề, làm thế nào họ có thể xác định các thao tác với các đối
tượng.Trình độ nhận thức, kinh nghiệm của người dùng cũng ảnh hưởng đến sản phẩm
thiết kế. Do vậy chúng ta cũng cần phải hiểu và xác định rõ đúng mục tiêu hướng tới.
1.2.1.1 Đặc điểm vật lý
Con người khác nhau về đặc tính vật lý như chiều cao và cân nặng. Biến đổi trong
năm giác quan: thị giác, thính giác, xúc giác, khứu giác và vị giác có một ảnh hưởng lớn
đến khả năng tiếp cận, sử dụng một công nghệ trong các ngữ cảnh khác nhau. Ví dụ,
bệnh mù màu (thường là không có khả năng phân biệt chính xác giữa màu đỏ và màu
xanh lá cây) ảnh hưởng đến khoảng 8% nam giới. Ở châu Âu có 2,8 triệu người dùng xe
lăn sẽ khiến các nhà thiết kế phải xem xét đến công nghệ liên quan đến việc sử dụng các ngón tay.
Sự tương tác của một người với thế giới bên ngoài xảy ra thông qua các thông tin
được nhận và gửi: đầu vào và đầu ra. Trong một tương tác với một máy tính, người sử
dụng nhận được thông tin đó là đầu ra của máy tính, và đáp ứng bằng cách cung cấp
nhập vào máy tính - đầu ra của người dùng sẽ trở thành đầu vào của máy tính và ngược
lại. Do đó việc sử dụng thuật ngữ đầu vào và đầu ra có thể dẫn đến sự nhầm lẫn nên
chúng ta sẽ tập trung vào các kênh liên quan. Ví dụ, thị giác có thể được sử dụng chủ
yếu trong việc tiếp nhận thông tin từ máy tính, nhưng nó cũng có thể được sử dụng để
cung cấp thông tin cho các máy tính.
Đầu vào trong con người xảy ra chủ yếu thông qua các giác quan và đầu ra thông
qua các điều khiển động cơ của các cơ quan tác động. Có năm giác quan chính: thị giác,
thính giác, xúc giác, vị giác và khứu giác. Trong số này, có ba giác quan đầu tiên là quan
trọng nhất để thiết kế tương tác. Tương tự như vậy có một số cơ quan tác động, bao gồm
cả các chi, các ngón tay, mắt, đầu và tai. Trong tương tác với máy tính, các ngón tay có
vai trò chính, thông qua đánh máy hoặc điều khiển chuột, một số sử dụng giọng nói,
mắt, đầu và vị trí cơ thể.
Ví dụ bằng cách sử dụng một máy tính cá nhân (PC) với một con chuột và bàn
phím. Ứng dụng bạn đang sử dụng có một giao diện đồ họa, với các menu, biểu tượng
và cửa sổ. Trong tương tác của bạn với hệ thống này, bạn nhận được thông tin chủ yếu
bằng mắt, từ những gì xuất hiện trên màn hình. Tuy nhiên, bạn cũng có thể nhận được
thông tin bởi tai: có tiếng ‘bíp’ khi bạn thực hiện sai một nhiệm vụ, hay một lời bình có
tiếng nói trong một bài trình bày đa phương tiện. Thông tin phản hồi đóng vai trò quan
trọng trong quá trình bạn thực hiện. 21 − Kênh thị giác:
Thị giác của con người là một hoạt động rất phức tạp với một loạt các giới hạn vật
lý và cảm giác, nhưng nó là nguồn thông tin chính cho con người. Chúng ta có thể cảm
nhận thị giác chia thành hai giai đoạn: cảm nhận vật lý của các kích thích từ thế giới bên
ngoài, và việc xử lý các kích thích. Tính chất vật lý của mắt và hệ thống thị giác nghĩa
là có những điều kiện nhất định để mắt người có thể nhìn thấy. Còn xử lý thông tin là
khả năng diễn giải và xử lý hình ảnh cho phép liên kết hình ảnh thành thông tin đầy đủ.
Chúng ta cần phải hiểu cả hai giai đoạn như những ảnh hưởng của nó đến cách chúng ta
làm thiết kế cho các hệ thống tương tác.
Kích thước và khoảng cách xác định một góc nhìn. Hình 1-8 minh họa các góc
nhìn được tính. Góc thị giác bị ảnh hưởng bởi kích thước của các đối tượng và khoảng
cách từ mắt. Do đó, nếu hai đối tượng đang ở cùng một khoảng cách, vật thể lớn hơn sẽ
có góc nhìn lớn hơn. Tương tự như vậy, nếu hai đối tượng có kích thước tương tự được
đặt ở những khoảng cách khác nhau từ mắt, vật thể xa hơn sẽ có góc nhìn nhỏ hơn. Góc
nhìn có thể ảnh hưởng đến nhận thức của con người đến kích thước của vật thể. Nếu góc
nhìn quá nhỏ, chúng ta sẽ không thể cảm nhận được hết tất cả hình ảnh. Do vậy trong
thiết kế, nếu chúng ta muốn một đối tượng có một kích thước nhất định thì cần tính
khoảng cách tới người dùng đảm bảo đối tượng nằm trong góc nhìn của người dùng.
Hình 1-8: Góc thị giác.
Nhận thức màu sắc là yếu tố thứ ba mà chúng ta cần phải xem xét. Màu thường
được coi như được tạo thành bởi ba thành phần: hue (sắc màu), intensity (cường độ) và
saturation (bão hòa). Hue được xác định bằng các bước sóng quang phổ của ánh sáng
(có khoảng 150 sắc màu khác nhau có thể được phân biệt bởi mắt người). Intensity là
độ sáng của màu sắc, và Saturation là độ trắng trong màu sắc. Bằng cách thay đổi hai
trong số ba thành phần của màu sắc, chúng ta có thể cảm nhận được 7 triệu màu sắc khác 22
nhau. Chúng ta cần lưu ý có khoảng 8% nam giới và 1% nữ giới bị mù màu, họ không
phân biệt được màu đỏ và màu xanh lá cây nhưng họ có thể phân biệt hai màu này nếu
nó có cường độ màu hoặc độ bão hòa màu khác nhau.
Nhận thức và xử lý văn bản là một trường hợp đặc biệt quan trọng để thiết kế giao
tiếp. Có một số giai đoạn trong quá trình đọc. Đầu tiên, các mô hình trực quan được cảm
nhận. Sau đó nó được giải mã với tham chiếu đến một đại diện nội bộ của ngôn ngữ.
Các giai đoạn cuối cùng là phân tích cú pháp và ngữ nghĩa. Chúng ta quan tâm đến giai
đoạn đầu tiên của quá trình này và làm thế nào tạo được ảnh hưởng trong thiết kế giao
diện. Giai đoạn đầu, nhận thức sẽ diễn ra quá trình định hình. Mắt sẽ nhìn ngược trên
đoạn văn bản, được gọi là quy hồi. Nếu văn bản phức tạp, quá trình quy hồi bị lặp lại
nhiều lần. Người lớn đọc khoảng 250 từ/phút. Không chắc rằng các từ sẽ được quét tuần
tự. Thay vào đó các từ quen thuộc sẽ được công nhận với hình dạng chữ. Điều này có
nghĩa là có thể loại bỏ các dạng chữ gây bất lợi cho tốc độ đọc và độ chính xác.
Tốc độ phụ thuộc vào kích thước văn bản tạo nên sự dễ đọc. Các thí nghiệm chỉ ra
rằng kích thước font tiêu chuẩn 9-12 point là dễ đọc, được đưa ra tỷ lệ thuận với khoảng
cách các dòng. Tương tự như vậy độ dài dòng ở khoảng 2.3 và 5.2 inch (58 và 132 mm)
là dễ đọc. Sự tương phản trong hình ảnh cũng là một yếu tố để tạo nên sự dễ đọc. − Kênh âm thanh:
Thính giác bắt đầu với những rung động trong không khí hoặc sóng âm thanh. Các
hệ thống thính giác thực hiện một số bộ lọc của các âm thanh nhận, cho phép bỏ qua
tiếng ồn nền và tập trung vào các thông tin quan trọng. Tuy nhiên, nếu âm thanh quá
lớn, hoặc tần số quá tương tự nhau, chúng không thể phân biệt được âm thanh. Âm thanh
có thể truyền đạt một số lượng đáng kể các thông tin. Nó hiếm khi được sử dụng trong
thiết kế giao diện, thường được sử dụng làm âm thanh cảnh báo và các thông báo. Trường
hợp ngoại lệ là các sản phẩm đa phương tiện, trong đó có thể bao gồm âm nhạc, bình
luận bằng giọng nói và các hiệu ứng âm thanh. Tuy nhiên, tai có thể phân biệt khá tinh
tế âm thanh và có thể nhận ra âm thanh quen thuộc mà không tập trung chú ý vào nguồn
âm thanh. Điều này cho thấy rằng âm thanh có thể được sử dụng rộng rãi hơn trong thiết
kế giao diện, để truyền đạt thông tin về tình trạng hệ thống. − Kênh xúc giác:
Giác quan thứ ba mà chúng ta sẽ xem xét là cảm ứng hay nhận thức chạm. Cảm
ứng cung cấp cho chúng ta thông tin quan trọng về môi trường của chúng ta. Nó cho
chúng ta có cảm nhận về môi trường. Ví dụ trong trò chơi thực tại ảo, nếu chỉ có thể
nhìn qua kính mà không có cảm nhận của tay về hình dáng thì tốc độ và độ chính xác
của hành động sẽ giảm đi. Do đó chạm là một phương tiện quan trọng của thông tin phản 23
hồi. Đặc biệt nó là nguồn cung cấp thông tin thứ cấp cho những người có giác quan khác bị suy giảm.
Da có chứa ba loại cảm giác: cảm thụ nhiệt cảm nhận với nóng và lạnh; cảm thụ
đau đáp ứng với cường độ áp suất cao và đau đớn; và cảm thụ va chạm đáp ứng với các
áp lực. Trong thiết kế tương tác người ta quan tâm đến đến cảm thụ va chạm. Người ta
có nghiên cứu và chỉ ra rằng các ngón tay và đặc biệt là ngón tay cái có khả năng cảm thụ cao nhất.
1.2.1.2 Đặc điểm tâm lý
Về mặt tâm lý, những người khác nhau có những khả năng khác nhau. Ví dụ, những
người có khả năng không gian tốt sẽ tìm thấy đối tượng dễ dàng hơn và ghi nhớ một
trang web nhanh hơn so với những người có khả năng kém. Nhà thiết kế nên thiết kế
cho những người có khả năng nghèo kinh nghiệm bằng cách cung cấp bảng chỉ dẫn tốt
và hướng dẫn rõ ràng. Sự khác biệt ngôn ngữ là rất quan trọng để hiểu biết, và sự khác
biệt văn hóa ảnh hưởng đến cách mọi người giải thích sự việc.
Con người cũng có khả năng khác nhau về bộ nhớ và chúng có thể thay đổi tùy
thuộc vào các yếu tố như căng thẳng và mệt mỏi. Không ai có thể nhớ số nguyên dài hay
những hướng dẫn phức tạp. Một số người có thể nhanh chóng nắm bắt được cách làm
việc gì đó trong khi đối với những người khác nó có thể mất nhiều thời gian hơn.
Mọi hoạt động của con người đều dựa trên bộ nhớ. Nó cho phép chúng ta lặp lại
hành động, sử dụng ngôn ngữ, và sử dụng các thông tin mới nhận được thông qua các
giác quan. Nó cũng cho chúng ta cảm giác về bản sắc, bằng cách lưu giữ thông tin từ
kinh nghiệm trong quá khứ. Có 3 loại bộ nhớ: Cảm giác (bộ nhớ đệm), trí nhớ ngắn hạn
hoặc bộ nhớ làm việc, và trí nhớ dài hạn. Những ký ức tương tác, với các thông tin được
xử lý và sự chuyển giữa các bộ nhớ, như thể hiện trong Hình 1-9. Bộ nhớ cảm giác như
bộ đệm cho các kích thích nhận được thông qua các giác quan như nhìn, nghe, sờ. Những
ký ức liên tục ghi đè bởi các thông tin mới tới ở trên những kênh này. Thông tin được
chuyển từ bộ nhớ cảm giác vào bộ nhớ ngắn hạn qua sự chú ý, qua đó lọc các tác nhân
kích thích để chỉ lấy những thông tin được quan tâm tại một thời điểm nhất định. Chú ý
là sự tập trung của tâm trí vào một trong số một số kích thích hoặc suy nghĩ. Thông tin
nhận được bởi những ký ức cảm giác một cách nhanh chóng, nó có thể được lưu trữ vĩnh
viễn, hoặc ghi đè, hoặc biến mất.
Bộ nhớ ngắn hạn cũng có một hạn chế. Người ta đã làm nghiên cứu về khả năng
ghi nhớ của con người là nguyên tắc 7 ± 2. Con người chỉ nhớ được từ 5 cho đến 9 đối
tượng liên tiếp. Người ta áp dụng nguyên tắc này để tối ưu hóa cho các thao tác với máy
tính. Qua đó người dùng có thể nhớ được các thao tác liên tục và hoàn thành nhiệm vụ.
Bộ nhớ dài hạn dành cho việc lưu trữ thông tin lâu dài. Thông tin từ bộ nhớ ngắn hạn 24
được lưu trữ trong bộ nhớ dài hạn qua tập luyện. Việc lặp đi lặp lại với một kích thích
nó sẽ được chuyển vào bộ nhớ dài hạn. Thông tin bị mất từ bộ nhớ thông qua can thiệp
nào đó. Ví dụ như chúng ta thay đổi một chiếc điện thoại mới, thì dần dần những thói
quen sử dụng chiếc điện cũ của chúng ta sẽ mất đi. Tuy nhiên bộ não có khả năng lọc
những thông tin tích cực, và nói biết được cần lưu giữ lại những thông tin gì. Thông tin
có thể không được nhắc lại nhưng có thể được công nhận, hoặc tìm kiếm. Để người dùng
có thể dễ dàng tìm kiếm thông tin thì chúng ta cần biết tổ chức thông tin, phân loại thông
tin một cách hợp lý, qua đó họ sẽ dễ dàng nhớ và dễ dàng tìm kiếm ra thông tin đó.
Hình 1-9: Mô hình cấu trúc bộ nhớ
Tinh thần cũng ảnh hưởng điến khả năng của con người. Nếu mọi người không có
một tinh thần tốt, họ chỉ có thể thực hiện các hành động thuộc lòng. Nếu có điều gì sai
họ sẽ không biết lý do tại sao và sẽ không thể phục hồi. Một nguyên tắc thiết kế là thiết
kế để nhiều người hình thành mô hình trí tuệ của họ để làm việc một cách chính xác và
hữu ích. Con người phát triển mô hình trí tuệ thông qua tương tác với hệ thống, quan sát
mối quan hệ giữa hành động và hành vi của các hệ thống. Vì vậy, điều quan trọng là các
nhà thiết kế cung cấp đầy đủ thông tin trong giao diện cho mọi người để tạo thành một
mô hình tinh thần chính xác.
1.2.1.3 Đặc điểm xã hội
Con người sử dụng các hệ thống, các sản phẩm và dịch vụ cho các lý do khác nhau.
Họ có những mục tiêu khác nhau trong việc sử dụng hệ thống. Họ có những động cơ
khác nhau để sử dụng hệ thống. Một số người sẽ rất quan tâm đến một hệ thống đặc biệt,
những người khác sẽ chỉ muốn có được một công việc đơn giản hoàn thành. Những động
cơ thúc đẩy thay đổi tại thời điểm khác nhau. Những người không có kinh nghiệm và
các chuyên gia của một công nghệ thường sẽ có mức độ kiến thức rất khác nhau và do
đó yêu cầu cho các tính năng thiết kế cũng khác nhau. Các chuyên gia sử dụng một hệ
thống thường xuyên và tìm hiểu tất cả các loại chi tiết, trong khi một người mới bắt đầu
sẽ cần phải được hướng dẫn thông qua sự tương tác. Thiết kế cần phải lôi kéo người
dùng sử dụng hệ thống của họ. Thiết kế cho các nhóm đồng nhất và các nhóm không
đồng nhất là khác nhau. Các trang web có để phục vụ cho các nhóm không đồng nhất và
có mối quan tâm thiết kế đặc biệt như một kết quả. Một mạng nội bộ của công ty, tuy 25
nhiên, có thể là được thiết kế để đáp ứng các nhu cầu cụ thể của người cụ thể. Các đại
diện từ một nhóm tương đối đồng nhất - thư ký hoặc người quản lý hoặc các nhà khoa
học trong phòng thí nghiệm, do đó cung cấp nhiều chi tiết đầu vào hơn. 1.2.2 Hoạt động
Con người sẽ sử dụng sản phẩm để thực hiện một nhiệm vụ, công việc nào đó cho
mục đích của họ. Những hoạt động của họ trên sản phẩm cũng là một yếu tố cần quan
tâm. Các hoạt động được sử dụng cho các nhiệm vụ rất đơn giản cũng như phức tạp,
hoạt động lâu dài, vì vậy thiết kế cần phải cẩn thận khi xem xét các đặc điểm của các
hoạt động. Dưới đây là danh sách các đặc điểm quan trọng của các hoạt động mà các
nhà thiết kế cần phải xem xét. Đầu tiên các nhà thiết kế nên tập trung vào mục đích tổng
thể của hoạt động này, sau đó các tính năng chính:
− Khía cạnh thời gian: Hoạt động được xảy ra thường xuyên hay không thường xuyên.
Thiết kế cho các hoạt động này là khác nhau. Mọi người sẽ dễ dàng thực hiện cuộc
gọi bằng cách sử dụng một điện thoại di động, nhưng có thể sẽ gặp những khó
khăn khi nói đến việc thay đổi pin hay nâng cấp hệ điều hành. Nhà thiết kế phải
đảm bảo rằng nhiệm vụ thường xuyên là dễ dàng để làm, nhưng họ cũng cần phải
đảm bảo rằng công việc không thường xuyên là dễ dàng để tìm hiểu (hoặc nhớ)
làm thế nào để làm. Các tính năng quan trọng khác của các hoạt động bao gồm áp
lực thời gian. Một thiết kế hoạt động tốt khi được thực hiện lúc yên tĩnh nhưng lại
gặp khó khăn khi người dùng đang bận rộn. Một số hoạt động có thể diễn ra liên
tục, trong khi đó những người khác lại bị gặp những khoảng thời gian gián đoạn.
Nếu mọi người đang bị gián đoạn khi thực hiện một số hoạt động, thiết kế cần đảm
bảo rằng họ có thể tìm lại vị trí của mình khi quay lại với ứng dụng. Nó sẽ đảm
bảo rằng người dùng sẽ không bị bỏ sót những thông tin và những bước quan trọng
trong hoạt động của họ. Thời gian phản ứng cần thiết phải được xem xét. Nếu một
trang web mất hai phút để truy cập vì máy chủ đang bận nó sẽ gây bực bội cho
người dùng. Cũng có nhiều thông tin khẩn cấp cần được truy cập ngay lập tức. Một
quy luật chung, mọi người mong đợi một thời gian phản ứng của khoảng 0.1 ms
cho các hoạt động phối hợp tay và mắt. Bất kể điều gì mà mất hơn 5s sẽ khiến
người dùng mất tập trung (Dix, 2003).
− Hợp tác: Một tính năng quan trọng của hoạt động là họ sẽ thực hiện công việc này
một mình hay có liên quan đến người khác. Các vấn đề về nhận thức của người
khác và thông tin liên lạc, phối hợp của họ với nhau cũng là một vấn đề cần phải xem xét.
− Phức tạp: Thiết kế cần xác định rõ nhiệm vụ của hoạt động đơn giản hay phức tạp.
Một hành động phức tạp, yêu cầu người dùng phải thực hiện nhiều thao tác để có 26
được thông tin mà họ mong muốn cần phải chú ý. Người thiết kế cần thiết kế thành
các bước đơn giản để người dùng cảm thấy dễ dàng nhất.
− An toàn: Sản phẩm thiết kế cần tạo được sự tin tưởng, chắc chắn cho người dùng
nó. Ngoài ra sự an toàn còn được nhà thiết kế chú ý đến việc đảm bảo cho người
dùng tránh được những sai lầm nghiêm trọng khi hành động. Ví dụ như một hành
động xóa file, luôn có thông báo cho người dùng để xác minh lại hành động đó là
chủ động hay nhầm lẫn (Hình 1-10).
− Thuộc tính của nội dung: Cũng cần chú ý đến yêu cầu của dữ liệu hoạt động. Nếu
số lượng dữ liệu nhập chữ cái lớn phải được nhập từ bàn phím là điều chắc chắn.
Một số hoạt động khác cần nhu cầu hiển thị video, hoặc hình ảnh đồ họa cũng cần
phải xác định rõ thuộc tính của đối tượng. Người ta có thể sử dụng công nghệ khai
thác các tính năng của hoạt động ví dụ như công nghệ quét mã vạch.
Hình 1-10: Thiết kế đảm bảo an toàn khi người dùng nhầm lẫn 1.2.3 Ngữ cảnh
Các hoạt động luôn luôn xảy ra trong một bối cảnh, tình huống nào đó. Có thể với
cùng một người, sử dụng cùng một sản phẩm nhưng họ có thể sử dụng nó trong các bối
cảnh khác nhau. Do đó cần phải phân tích hành động và ngữ cảnh cùng với nhau. Ví dụ
một người đang muốn đặt bàn tại một quán ăn thông qua một ứng dụng trước khi họ đến
cửa hàng đó. Và một tình huống khác là một người đến cửa hàng, ngồi trước bàn ăn, và
muốn đặt món ăn thông quan ứng dụng. Cả hai ngữ cảnh này, người dùng đều mong
muốn được đặt các món ăn mà họ mong muốn, tuy nhiên nó diễn ra ở các bối cảnh khác
nhau. Nó có thể bị tác động bởi các loại ngữ cảnh sau:
- Ngữ cảnh về mặt tổ chức: là những quy định và chính sách của tổ chức. Hay
nó thể hiện những điều kiện cho từng đối tượng người dùng khi thực hiện các 27
hành động trên sản phẩm. Ví dụ như bạn bị phân quyền trong tổ chức đó không?
Bạn được phép làm gì trong các ngữ cảnh đó.
- Ngữ cảnh về mặt xã hội: Đó là những yếu tố về con người, quan điểm hay trình
độ, văn hoá xã hội xung quanh trong ngữ cảnh đó. Bạn có thể nhận được sự
giúp đỡ trong môi trường này. Có thể có hướng dẫn sử dụng, trợ giúp hoặc các
chuyên gia để tư vấn hoặc hỏi đáp nếu người dùng gặp rắc rối. Ví dụ như Khi
bạn đặt bàn ở nhà, khi đó chỉ có một mình bạn, không bị tác động bởi người
xung quanh. Nhưng khi bạn đến nhà hàng thì có thể bạn sẽ bị tác động bởi
những người đi cùng. Hay một ví dụ khác như trong môi trường văn phòng,
những tín hiệu âm thanh là không được sử dụng thường xuyên. Nên có những
chế độ để người dùng lựa chọn. Chế độ âm thanh chỉ có thể hiệu quả khi người
dùng làm việc một mình.
- Ngữ cảnh về mặt vật lý: đó là yếu tố về mặt ánh sáng, nhiệt độ, địa lý,… Các
môi trường vật lý trong đó hoạt động xảy ra là rất quan trọng. Ví dụ, mặt trời
chiếu trên một màn hình máy ATM có thể làm cho nó không đọc được. Môi
trường có thể rất ồn ào, lạnh, ẩm ướt hoặc bẩn. Các hoạt động tương tự ví dụ
như đăng nhập vào một website có thể được thực hiện trong môi trường là khu
vực địa lý xa xôi, nơi Internet truy cập chậm, hay là một thành phố lớn với tốc độ mạng nhanh.
Ví dụ với một hoạt động "rút tiền mặt từ máy ATM”, phân tích ngữ cảnh sẽ bao
gồm những thứ như vị trí của thiết bị, tác dụng của ánh nắng mặt trời vào khả năng đọc
màn hình, và vấn đề bảo mật. Ngữ cảnh về xã hội sẽ là có nhiều người xung quan bạn
hay không? Bạn có phải chờ đợi không? Thời gian bạn phải đợi một giao dịch là bao
lâu? Ngữ cảnh tổ chức cho hoạt động này sẽ đi vào xem xét các tác động vào cách ngân
hàng làm việc và mối quan hệ của nó với khách hàng. Ví dụ như nếu bạn là khách hàng
VIP bạn có được ưu tiên không? Điều quan trọng là phải xem xét một loạt các ngữ cảnh
và môi trường trong đó các hoạt động có thể xảy ra.
Do đó khi thiết kế tương tác, chúng ta luôn đặt ra các tình huống sử dụng khác
nhau của người dùng. Để từ các tình huống đó, chúng ta tìm các giải pháp thiết kế giúp
người dùng tương tác hiệu quả hơn. 1.2.4 Công nghệ
Thiết kế tương tác là thiết kế các giao tiếp giữa con người và sản phẩm (máy móc,
công nghệ). Do đó quan tâm đến yếu tố con người, thì người thiết kế cũng cần chú ý đến
yếu tố công nghệ. Đầu vào của con người là đầu ra của sản phẩm, đầu ra của con người
là đầu vào của sản phẩm. Hệ thống tương tác có thể thực hiện chức năng khác nhau và
thường chứa một lượng dữ liệu lớn, hoặc nội dung thông tin. Nhà thiết kế tương tác cần 28
hiểu các công nghệ mà họ làm việc cùng. Công nghệ tương tác thay đổi với một tốc độ
nhanh chóng do đó các nhà thiết kế cần phải thường xuyên bám sát và cập nhật thường
xuyên. Ví dụ, màn hình cảm ứng đa điểm trên iPod Touch cho phép cách thức hoàn toàn
khác nhau để điều khiển các bộ sưu tập âm nhạc so với điều khiển dạng bánh xe trên
một nano iPod. Thiết kế cần phải nhận thức được khả năng khác nhau cho đầu vào, đầu
ra, thông tin liên lạc và nội dung. Thiết kế tương tác đòi hỏi phát triển kế hoạch nhằm
vào sản phẩm, lĩnh vực mục tiêu. 1.2.4.1 Đầu vào
Thiết bị đầu vào có liên quan với cách mọi người nhập dữ liệu và hướng dẫn vào một hệ thống an toàn.
− Dữ liệu chữ thường là đầu vào của một thiết bị tương tác thông qua một bàn phím
"QWERTY", được phát minh bởi C.L. Sholes vào năm 1868. Vào thời điểm đó,
máy chữ được sản xuất tương đối thô sơ các chữ cái của các phím được sắp xếp.
Những thiết kế đó vẫn còn được sử dụng đến ngày nay. Hình 1-11 là thiết kế bàn
phím được sử dụng phổ biến cho các màn hình máy tính ngày này. Thiết kế sắp
xếp các phím theo bảng chữ cái cho thiết bị nhỏ không phù hợp. Do diện tích quá
nhỏ, do vậy họ đã ghép chung 3 chữ cái vào một phím như Hình 1-12.
Hình 1-11: Bàn phím máy tính 29
Hình 1-12: Bàn phím Keypad được thiết kế co thiết bị điện thoại cầm tay.
− Màn hình cảm ứng sẽ sử dụng tương tác với các ngón tay. Mọi hoạt động thông qua
hồng ngoại hoặc cảm ứng điện dung. Vì họ thiếu bộ phận chuyển động hoặc bộ
phận có thể tháo rời, nên những màn chúng cảm ứng thích hợp cho các ứng dụng
dành cho nơi công cộng. Ngày nay khi công nghệ màn hình cảm ứng phát triển, đa
số các thiết bị như điện thoại thông minh, màn hình máy tính, tivi đều có cảm ứng
đa điểm. Có loại cảm ứng một điểm chỉ cho phép chạm một lần duy nhất tại một
thời điểm. Nhưng màn hình cảm ứng đa điểm cho phép tương tác nhiều ngón tay,
như phóng to hay xoay ảnh,…Loại màn hình cảm ứng rất tiện lợi, vì người dùng
không phải mang theo bất cứ thứ gì, họ luôn có những ngón tay để tương tác vào
sản phẩm. Hình 1-13 là màn hình cảm ứng của máy tính bảng được Microsoft giới thiệu. 30
Hình 1-13: Màn hình cảm ứng của máy tính bảng
− Bút trỏ là loại thiết bị để xác định vị trí trên màn hình. Đối với công nghệ màn hình
sử dụng bút trỏ sẽ đỡ tốn kém hơn màn hình cảm ứng. Các hình thức của thiết bị
trỏ bao gồm bút stylus được sử dụng trên thiết bị hiển thị rất nhỏ khi một ngón tay
là quá lớn để chạm vào các đối tượng. Khi đó dùng bút trỏ sẽ chính xác hơn là
dùng các ngón tay. Bút stylus còn được sử dụng để nhận dạng chữ viết. Về lý
thuyết, đây là một cách nhập dữ liệu hấp dẫn vào một thiết bị tương tác với một
bút viết trực tiếp lên màn hình của máy tính hoặc máy tính bảng một cách tự nhiên.
Tuy nhiên, nó là khá chậm và có thể không chính xác. Nó đòi hỏi người dùng phải
cài đặt các thiết bị để nhận dạng chữ viết tay của họ trong đó cải thiện tính chính
xác của phần mềm là rất khó. Nhiều người có thể gõ nhanh hơn là viết bằng tay. Hình 1-14: Bút trỏ
− Một trong số những thiết bị phổ biến nhất là chuột, được phát triển tại Phòng thí
nghiệm nghiên cứu Đại học Stanford vào giữa những năm 1960. Chuột là thiết bị
vừa vặn bàn tay và di chuyển trên một bề mặt phẳng như bàn làm việc. Hai bánh
xe dịch chuyển của chuột chuyển thành tín hiệu mà máy tính nó kết nối có thể giải
mã. Có hai nút bấm trên chuột và hoạt động với ngón tay của người dùng. Chuột
đã trở thành thiết bị trỏ mặc định. Nhiều thiết kế con chuột hiện đại bao gồm một
thumbwheel (bánh xe với chức năng cuộn), để di chuyển qua các tài liệu hoặc trang
Web, xem Hình 1-16. Năm 2009 Apple giới thiệu “Magic mouse", nó kết hợp chức
năng truyền thống của chuột với khả năng cảm ứng đa điểm cho phép một loạt các
cử chỉ cảm ứng mới để tương tác. 31
Hình 1-15: Chuột với 2 nút bấm và bánh xe thumbwheel
Hình 1-16: Chuột ma thuật (magic mouse) của Apple.
− Một Joystick (Hình 1-17) là một điều khiển xử lý mà xoay từ một điểm trung tâm.
Thiết bị này có thể được di chuyển về phía bắc, phía nam, phía đông và phía tây
(và tất cả các điểm giữa) để kiểm soát một con trỏ trên màn hình hoặc bất kỳ đối
tượng khác trên màn hình. Joystick được sử dụng chủ yếu cho các trò chơi máy
tính, hệ thống ứng dụng VR (thực tại ảo). Với sự ra đời của Nintendo Wii trong
năm 2007, đã tạo ra một thế hệ hoàn toàn mới của đầu. Các Wii sử dụng tia hồng
ngoại để bắt các chuyển động của một cây đũa thần. Điều này cho phép các cử chỉ
để được nhận dạng. Các hệ thống khác nhận ra cử chỉ thông qua theo dõi cử động
chân tay bởi gắn cảm biến trên các chi hoặc bằng cách theo dõi bằng camera. Có
rất nhiều loại cảm biến khác nhau mà hiện nay có sẵn như là cơ chế đầu vào. Cảm
biến áp suất không khí, cảm biến âm thanh, rung động máy dò chuyển động hồng
ngoại, và gia tốc tất cả đều sẵn sàng cho thiết kế để phát hiện cụ thể các tương tác. 32
Hình 1-17: Một Game Joystick
- Một số thiết bị đầu vào khác có thể được cài đặt sẵn có trong các loại thiết bị để tự
động lấy dữ liệu đầu vào như các cảm biến tích hợp trong các thiết bị di động.
Những thiết bị này không cần sự tác động của con người, mà nó tự động tiếp
nhận thông tin. Một số dạng cảm biến như cảm biến chuyển động, cảm biến gia
tốc, cảm biến độ cao, cảm biến nhiệt độ,… Nắm được nguyên tắc hoạt động của
các cảm biến này, nó sẽ giúp chúng ta khai thác và tạo nên những tương tác hấp
dẫn hơn cho sản phẩm của mình. 1.2.4.2 Đầu ra
Công nghệ hiển thị nội dung để con người có thể tiếp nhận được chủ yếu dựa vào
ba giác quan thị giác, thính giác và xúc giác.
− Các thiết bị đầu ra cơ bản nhất là các màn hình. Các công nghệ màn hình một vài
năm trước có thể kể đến công nghệ CRT (sử dụng ống tia cathode). Ngày nay các
màn hình phẳng sử dụng công nghệ plasma hay TFT (Thin Film Transistor) hay
LCD (Liquid Crystal Display – Màn hình tinh thể lỏng). Một số loại có thể cung
cấp màn hình có kích thước rất lớn và cung cấp các kinh nghiệm tương tác khác
nhau. Các thiết bị đầu ra được điều khiển bởi phần cứng (card đồ họa) nó sẽ quyết
định hình ảnh hiển thị, số lượng màu sắc có thể hỗ trợ. 33
Hình 1-18: Hiển thị các lựa chọn cho chế độ màn hình
− Một cách để giải quyết vấn đề về hạn chế của màn hình hiển thị là sử dụng một máy
chiếu. Máy chiếu thường có độ phân giải ít hơn so với một màn hình, nhưng kết
quả hình ảnh hiển thị sẽ rất lớn. Hiện nay có máy chiếu dữ liệu di động (Hình 1-
19). Nó hứa hẹn có một tác động lớn về thiết kế tương tác trên di dộng và các thiết
bị hiển thị khác. Hình ảnh có thể được chiếu lên bất kỳ bề mặt bởi một camera.
Bằng cách này, bất kỳ bề mặt có tiềm năng có thể trở thành một màn hình cảm ứng đa điểm.
Hình 1-19: Máy chiếu di động
− Bên cạnh các hình ảnh hiển thị của nội dung, thì âm thanh là một thành phần quan
trọng của đầu ra. Ví dụ với một hệ thống TTS (Text to Speech), chỉ cần một tin
nhắn văn bản và kết quả đầu ra là âm thanh giọng nói.
− Máy in là một thiết bị in văn bản hoặc hình minh họa trên giấy. Máy in mô phỏng
bằng một loạt các chấm điểm liên tục để hiển thị nội dung. 34
Ví dụ phân tích PACT của ứng dụng Live TRAFIK. Ứng dụng cung cấp thông tin
giao thông thời gian thực ở Thụy Điển. Người dùng di động có thể xem thông tin giao
thông với thiết bị di động Android của họ, họ cũng có thể chia sẻ thông tin giao thông nơi họ đang đến.
● Con người: ứng dụng nhắm mục tiêu hướng tới những người lái xe có trình điều
khiển. Đặc biệt xe tải người dành phần lớn thời gian của họ trên đường. Người
sử dụng ứng dụng điện thoại di động nên có kiến thức về sử dụng điện thoại thông
minh và trong khi lái xe họ nên có quyền truy cập vào điện thoại của họ, vì họ
đang sử dụng nó thay vì một hệ thống GPS để điều hướng và báo cáo lưu lượng truy cập.
● Hoạt động: Live TRAFIK có hai hoạt động chính là báo cáo và xem thông tin
giao thông. Hoạt động báo cáo là hoạt động riêng rẽ bởi những người dùng từ xa,
chỉ hoạt động khi GPS trên thiết bị di động đang hoạt động và người sử dụng
đang đi trên đường. Trong những trường hợp này, nó có thể chọn từ một danh
sách các tùy chọn có sẵn để báo cáo: Tai nạn, ùn tắc giao thông, điều kiện đường
xá, hoặc đậu xe. Hoạt động xem thông tin giao thông, tất cả người dùng ứng dụng
có thể xem báo cáo từ các người dùng. Ứng dụng cũng thông báo cho họ biết
những vụ tai nạn giao thông, thông điệp được cảnh báo dưới dạng âm thanh. Hệ
thống sử dụng vị trí GPS để xác định vị trí chính xác của các báo cáo để giảm khản năng giả mạo.
● Ngữ cảnh: Các môi trường vật lý ảnh hưởng đến việc sử dụng các ứng dụng. Ví
dụ, trong thời tiết xấu, người dùng sẽ không thể sử dụng điện thoại di động do tín
hiệu xấu. TRAFIK đã sử dụng kết nối 3G để kết nối đến máy chủ và nhận được
kết quả cập nhật, nó sẽ cho phép người dùng cập nhật mà không cần sử dụng
internet trong điều kiện xấu. Sử dụng điện thoại di động trong khi lái xe không
phải là một thói quen tốt, vì điều này có thể gây mất tập trung cho người lái xe.
Live TRAFIK có một thiết kế thân thiện với lái xe, cho phép các báo cáo lưu
lượng chỉ tối đa ba lần chạm trên màn hình mà không cần phải viết bất cứ điều
gì trên bàn phím. Điều này làm giảm nguy cơ tai nạn và làm cho các ứng dụng dễ sử dụng.
● Công nghệ: Gửi báo cáo lưu lượng truy cập dựa trên các thông tin giao thông dễ
dàng, ngay cả khi lái xe thông qua màn hình cảm ứng. Đối với ứng dụng lý do an
toàn được quan tâm, nên ứng dụng cũng vô hiệu hóa bàn phím của điện thoại
trong khi lái xe. Các thông tin được hiển thị trên Google Maps bên trong ứng
dụng Live TRAFIK và nó vẫn không ngừng cập nhật vị trí của người dùng bằng
cách sử dụng GPS để cung cấp thông tin giao thông mới nhất của môi trường 35
xung quanh. Tất cả các báo cáo được đặt trên bản đồ dưới dạng các biểu tượng
nhỏ, giống hệt tín hiệu giao thông, để người dùng dễ dàng sử dụng. Trình điều
khiển cho phép nhận được thông tin gần nhất mà không cần phải chạm vào điện
thoại di động hoặc tương tác với ứng dụng bằng bất kỳ cách nào. Đối với giao
tiếp ứng dụng, người dùng chỉ cần GPS và công nghệ 3G, cho phép kết nối với internet.
1.3 Mục tiêu của thiết kế tương tác
Một phần của quá trình tìm hiểu nhu cầu của người dùng, đối với việc thiết kế một
hệ thống tương tác để hỗ trợ họ, là phải rõ ràng về mục tiêu chính. Thiết kế một hệ thống
hiệu quả sẽ giúp cho công việc của họ đạt năng suất cao, hoặc thiết kế một hệ thống mà
thách thức và làm động lực thúc đẩy họ học tập hiệu quả hay làm cái gì khác. Mối quan
tâm hàng đầu của người thiết kế là mục tiêu khả năng sử dụng (Usability) và mục tiêu
trải nghiệm người dùng (User Experience- UX). Mục tiêu về khả năng sử dụng là liên
quan đến khả năng vận hành sản phẩm (ví dụ như sự hiệu quả), mục tiêu về trải nghiệm
người dùng phần lớn liên quan đến việc giải thích những chất lượng, cảm xúc của người
dùng (ví dụ như tính thẩm mỹ, hiểu người dùng). 1.3.1 Khả năng sử dụng
Khả năng sử dụng luôn luôn là trung tâm của thiết kế tương tác người máy HCI.
Định nghĩa về khả năng sử dụng của hệ thống tương tác đó là mức độ mà một sản phẩm
có thể được sử dụng bởi người dùng quy định để đạt được mục tiêu cụ thể với hiệu quả,
hiệu suất và sự hài lòng trong một bối cảnh sử dụng (ISO).
Mục tiêu về khả năng sử dụng thường được coi là đảm bảo rằng các sản phẩm
tương tác là dễ dùng, hiệu quả sử dụng, dễ nhớ, khắc phục lỗi và sự hài lòng từ quan
điểm của người sử dụng. Nó liên quan đến tối ưu hóa sự tương tác giữa người với sản
phẩm để cho phép họ thực hiện các hoạt động của họ tại nơi làm việc, trường học, và
trong cuộc sống hàng ngày của họ:
− Dễ dùng: là làm thế nào để người dùng có thể dễ dàng sử dụng để thực hiện các
nhiệm vụ cơ bản ở lần đầu tiên mà họ tiếp cận.
− Hiệu suất sử dụng: là khi người dùng đã học được thì làm thế nào để họ có thể hoàn
thành nhiệm vụ một cách nhanh chóng.
− Dễ nhớ: là khi người dùng quay trở lại thiết kế sau một khoảng thời gian không sử
dụng nó, làm thế nào để họ có thể dễ dàng thiết lập lại sự thành thạo.
− Khắc phục lỗi: Có bao nhiêu lỗi mà người dùng tạo ra, mức độ nghiêm trọng của
các lỗi, và làm thế nào để họ có thể khôi phục lại những sai sót. 36
− Sự hài lòng: là sự vừa ý của người dùng khi sử dụng sản phẩm 1.3.1.1 Dễ dùng
Dễ dùng liên quan đến các tính năng của hệ thống tương tác cho phép người dùng
mới làm quen để hiểu làm thế nào có thể sử dụng nó lúc ban đầu. Dưới đây là một số
hướng dẫn thiết kế để đạt được khả năng dễ dùng cho người dùng.
− Khả năng dự báo: Trừ khi tương tác với một số game, người dùng không mất nhiều
thời để bất ngờ. Khả năng dự báo của một hệ thống tương tác có nghĩa là kiến thức
của người sử dụng tương tác là đủ để xác định kết quả của sự tương tác tương lai
của mình. Người dùng sẽ không phải nhớ bất cứ điều gì khác ngoài những gì hiện
đang quan sát. Cần có những dấu hiệu nhận biết được kết quả của người dùng. Ví
dụ như Hình 1-20, khi nhìn vào trang web này người dùng có thể xác định được
những khu vực nào là liên kết, những khu vực nào không phải liện kết. Trên trang
web này, các khu vực 1, 3, 4, 6, 7 và 11 là các liên kết, còn 2, 5, 8, 9 và 10 thì
không. Sẽ có nhiều người dùng bị nhầm lẫn, và không dự đoán được khu vực nào
là liên kết nếu họ không thử click. Điều đó sẽ làm giảm hiệu suất sử dụng. Để tránh
điều này cần lưu ý sau: văn bản không liên kết thì không để nó có màu sắc khác
biệt với các văn bản khác. Đồ họa có liên kết cần được nhúng văn bản. Đồ họa liên
kết tiếp cận với văn bản thì văn bản đó cũng phải là một phần của liên kết.
Hình 1-20: Thiết kế đảm bảo người dùng có thể dự đoán hành động (Nguồn: Smashing Magazine) 37
− Khả năng nhận biết: Cần phải thiết kế để đảm bảo người dùng có thể nhìn thấy và
thể hiện một cách rõ ràng các chức năng và những gì mà hệ thống đang hoạt động.
Việc thể hiện ở đây không chỉ là giúp cho người dùng có thể nhìn thấy hành động
của họ mà nó còn được thể hiện làm sao cho người dùng có thể dễ dàng hành động.
Trong ví dụ Hình 1-21 thiết kế ứng dụng trên màn hình nhỏ như chiếc điện thoại
cần chú ý đến kích thước và khoảng cách giữa các đối tượng mục tiêu. Điều này
đảm bảo người dùng có thể thoải mái nhấn một nút với ngón tay của mình. Nếu
bạn đặt các nút quá gần nhau, người dùng có thể vô tình nhấn nhầm sang nút khác.
Một ví dụ khác về website, trang chủ là của một website là trang quan trọng nhất,
và phần đầu trang là khu vực mà người thiết kế chú ý nhất, vì ở khu vực này người
dùng có thể nắm bắt được sơ qua về cấu trúc và nội dung của một trang web Hình 1-22.
Hình 1-21: Thiết kế trên màn hình nhỏ cần chú ý đến kích thước và khoảng cách các 38 nút
Hình 1-22: Giao diện website thể hiện rõ các chuyên mục trên thanh menu
1.3.1.2 Hiệu suất sử dụng
Khi người dùng đã được học hỏi và trải nghiệm sản phẩm, người thiết kế phải làm
sao để họ có thể sử dụng nhanh chóng, rút ngắn được thời gian sử dụng. Một số nguyên
tắc thiết kế để nâng cao hiệu suất sử dụng.
− Điều hướng: Cung cấp khả năng di chuyển xung quanh các bộ phận trong hệ thống.
Điều hướng trong hệ thống tương tác cũng giống như một bản đồ giúp cho người
dùng xác định được vị trí của họ, cũng như nơi mà họ muốn đến. Thiết kế điều
hướng tốt sẽ làm rút ngắn được con đường của người dùng. Ví dụ như thanh điều
hướng chính của một website luôn được đặt ở phía trên cùng, và xuất hiện ở tất cả
các trang. Nó sẽ giúp người dùng quay trở lại hoặc xác định lại đường đi một cách nhanh nhất.
− Điều khiển: Cho phép người dùng có thể kiểm soát được hành động cũng như nội
dung của sản phẩm. Thiết kế tương tác là thiết kế ra những sản phẩm nhằm mục
đích phục vụ cho cuộc sống của con người. Do đó sản phẩm tương tác phải đảm
bảo để người dùng có thể làm chủ được nó, điều khiển nó. Ví dụ như một ứng dụng
cho phép người dùng sử dụng GPS để tìm địa điểm, nó phải có chức năng để người
dùng bật hoặc tắt chế độ location. Khi bật chế độ location, nó sẽ khiến cho ứng 39
dụng chạy chậm hơn. Nếu như người dùng không có nhu cầu sử dụng thì điều đó là không cần thiết.
− Phản hồi: Nhanh chóng phản hồi lại thông tin từ hệ thống để người dùng biết những
gì xảy ra, nó cũng giúp nâng cao hiệu quả hành động. Không những vậy mà phản
hồi liên tục và nhất quán sẽ tăng cường cảm giác được kiểm soát. Ví dụ đối với
các trang web thương mại điện tử, mỗi một giao dịch của khách hàng, cần phải có
thông tin phản hồi để người dùng có thể biết được họ đã giao dịch thành công hay chưa.
− Sự thông minh: Những giải pháp tiện ích cho sản phẩm sẽ giúp người dùng rút ngắn
được những thao tác trong sử dụng sản phẩm. Hình 1-23 mô tả tiện ích gợi ý của
google, với tiện ích này nó sẽ giúp cho người dùng không cần phải nhớ chính xác
và đầy đủ nội dung. Nó giúp người dùng nhập nội dung tìm kiếm một cách nhanh chóng.
Hình 1-23: Tiện ích gợi ý của google 1.3.1.3 Dễ nhớ
Dễ nhớ là mục tiêu của thiết kế khả năng sử dụng. Đối với người dùng đầu tiên,
khả năng dễ nhớ cũng giúp người dùng dễ dàng tiếp cận với sản phẩm. Khi người dùng
đã từng sử dụng sản phẩm, quay trở lại sử dụng sản phẩm sau một thời gian, thì thiết kế
phải đảm bảo làm sao để người dùng vẫn nhớ được các thao tác sử dụng, và sử dụng 40
một cách thành thạo, hiệu quả. Để đạt được tiêu chí này thì chúng ta có thể thực hiện theo các nguyên tắc sau:
− Sự quen thuộc: Đối với người sử dụng mới, họ sẽ tương tác với hệ thống bằng những
kiến thức, hay những thói quen đã tích lũy ở các sản phẩm khác để có thể tương
tác hiệu quả. Do vậy thiết kế với giao diện, tương tác quen thuộc sẽ giúp người
dùng dễ tiếp cận với sản phẩm mới hơn. Sự xuất hiện của những đối tượng quen
thuộc sẽ kích thích hành vi của người dùng. Ví dụ Hình 1-24, khi thiết kế các biểu
tượng để sử dụng cho sản phẩm cần lưu ý hình ảnh phải quen thuộc với người
dùng. Tránh sử dụng những biểu tượng gây khó hiểu.
Hình 1-24: Biều tượng cần được thiết kế gần gũi với người dùng
− Tính nhất quán: liên quan đến các hành vi phát sinh từ những tình huống tương tự
hoặc nhiệm vụ tương tự. Tính nhất quán là nguyên tắc áp dụng rộng rãi nhất trong
thiết kế giao diện.Tính nhất quán có thể được biểu diễn thống nhất trong một ứng
dụng, hoặc được biểu diễn thống nhất ở các đầu ra khác nhau của thiết bị. Ví dụ
như trong Hình 1-25 là thiết kế của cùng một ứng dụng trên 2 hệ điều hành khác
nhau. Từ màu sắc đến các biểu tượng, cũng như những tương tác đều được thống
nhất ở cả 2 hệ điều hành. Điều này sẽ đảm bảo người dùng dễ dàng nhận ra ứng
dụng. Hình 1-26 thể hiện thiết kế của những chiếc điều khiển. Trong một chiếc
điều khiển, họ sẽ luôn đặt text ở phía trên các nút bấm. Nếu có một nút bấm được
bố trí khác đi với thống nhất này sẽ khiến người dùng khó có thể nhớ được cách
sử dụng, hoặc cảm thấy bối rối về chức năng của nó. 41
Hình 1-25: Thiết kế thống nhất trong 2 hệ điều hành khác nhau
Hình 1-26: Thiết kế cần thống nhất một kiểu trình bày trên một sản phẩm 1.3.1.4 Lỗi
Người thiết kế cần dự đoán được có bao nhiêu lỗi do người dùng tạo ra khi sử dụng
sản phẩm, mức độ nghiêm trọng của những lỗi này, và cách để người dùng có thể khắc
phục được nó. Thiết kế với mục tiêu kiểm soát được lỗi của người dùng là cách thiết kế
bảo vệ người sử dụng, tạo nên sự an toàn khi sử dụng sản phẩm. 42
− Cảnh báo: cần đưa ra những cảnh báo cho người dùng về những nguy cơ mà họ có
thể gặp phải do những sai lầm trong hành động của họ. Ví dụ như Hình 1-27 miêu
tả một cảnh báo khi người dùng xóa những tin nhắn.
− Tự động bảo vệ: Hệ thống có thể có những chế độ bảo vệ tự động để giúp người
dùng tránh được những nguy hiểm do những lỗi gây ra. Ví dụ như Khi chụp
Xquang thì bộ phần điều khiển luôn được nối cùng máy tính để có thể tự động ngắt khi gặp sự cố.
− Khả năng phục hồi: Cần có chức năng giúp người dùng phục hồi lại những dữ liệu
quan trọng mà họ làm mất do những sai lầm gây ra. Ví dụ như trong hệ thống gửi
email, nếu người dùng xóa đi một email. Email đó vẫn được lưu trong hòm thư
rác. Nó sẽ cho phép người dùng lấy lại thư đó nếu họ cần.
Hình 1-27: Cảnh báo giúp người dùng tránh được những lỗi khi sử dụng 1.3.1.5 Sự hài lòng
Sự hài lòng của người dùng về sản phẩm là sản phẩm có thỏa mãn được nhu cầu
sử dụng của họ hay không. Điều đó có nghĩa là chúng ta cần phải biết được mong muốn
của người dùng, để sản phẩm có thể trả về những kết quả phù hợp với sự mong muốn
và kỳ vọng đó của họ. Một số nguyên tắc để đảm bảo sự hài lòng của người dùng với sản phẩm là:
− Tính linh hoạt: Cho phép nhiều cách làm việc cho những người có trình độ khác
nhau về kinh nghiệm và sự quan tâm đến hệ thống. Cung cấp cho người dùng có
cơ hội để thay đổi cách tương tác và biểu diễn của hệ thống. Ví dụ như Hình 1-28
là thiết kế responsive cho website. Nó sẽ đảm bảo cho người dùng có thể sử dụng
trang web ở bất cứ thiết bị có màn hình to hay nhỏ. Do đó người dung sẽ luôn được
phản hồi lại những kết quả thoả mãn mong đợi của họ. 43
− Phong cách: Những mẫu thiết kế cần thể hiện được phong cách và hấp dẫn tùy vào
từng đối tượng người dùng mục tiêu. Ví dụ như thiết kế cho đối tượng người dùng
là trẻ em thì cần sử dụng nhiều màu sắc sặc sỡ, hình ảnh ngộ nghĩnh.
− Hệ thống tương tác phải thân thiện và dễ chịu, tránh những thay đổi đột ngột, làm
gián đoán quá trình tương tác của người dùng.
Hình 1-28: Thiết kế responsive cho website sẽ cung cấp khả năng sử dụng cho người
dùng ở các loại thiết bị khác nhau.
1.3.2 Trải nghiệm người dùng (User Experience – UX)
Thiết kế tương tác ngày càng đi xa hơn, không chỉ có thể đảm bảo khả năng sử
dụng mà cần phải có thiết kế cung cấp những trải nghiệm sử dụng tuyệt vời. Những ứng
dụng trên điện thoại di động không những phải được cung cấp nhiều chức năng hơn mà
cần phải có hành vi sử dụng hấp dẫn, thú vị. Trang web để thu hút và có nhiều khách
hàng hơn để tăng lợi nhuận, ngoài việc có chức năng và nội dung phù hợp, nó phải khiến
người dùng thưởng thức được khi sử dụng chúng.
Trải nghiệm người dùng bao gồm tất cả những cảm xúc của người dùng, niềm tin,
sở thích, nhận thức, phản ứng thể chất và tâm lý, hành vi và thành tích nào xảy ra trước,
trong và sau khi sử dụng sản phẩm. Khi được đáp ứng các nhu cầu, từ nhu cầu vật chất
đến nhu cầu tình cảm, tâm sinh lí, người dùng sẽ cảm thấy thích sản phẩm. Việc này đòi
hỏi khơi dậy bản chất của kinh nghiệm người dùng. Mục tiêu về kinh nghiệm người
dùng khác với mục tiêu về khả năng sử dụng ở chỗ cách người dùng trải nghiệm sản
phẩm tương tác theo cách nhìn của họ, thay vì đi tìm cách thức hữu hiệu với cách nhìn
của họ. Một số cảm xúc của người dùng với thói quen sử dụng của họ là: sự thỏa mãn,
sự thích thú, sự vui vẻ, giải trí, có ích, thoải mái, và có động lực. 44
Điểm nhấn mạnh của thiết kế tương tác là lấy người dùng làm trung tâm, tuy nhiên
cũng cần nâng cao trải nghiệm người dùng. Những người thiết kế thường thiết kế dựa
trên những gì mà họ nghĩ là tuyệt vời hơn là những gì khác hàng muốn xem. Họ không
suy nghĩ đến người dùng sẽ cảm nhận thế nào về sản phẩm của họ. Không có một nguyên
tắc khoa học nào đằng sau những thiết kế UX này, người thiết kế sáng tạo ra những hành
vi mà những người dùng họ muốn.
Hình 1-29: Quy trình quyết định sự lỗi thời của thiết kế (Nguồn: Smashing Magazine)
Người thiết kế cần phải hiểu về tâm lý và cảm xúc của người dùng để có thể đưa
ra những giải pháp phù hợp. Biết được cảm xúc của người dùng xuất phát từ đâu thì
chúng ta có thể kích hoạt những cảm xúc đó khi người dung sử dụng sản phẩm. Người
ta chia cảm xúc của người dùng thành các dạng như sau:
− Cảm xúc vật lý: là những cảm xúc được tiếp nhận bởi các giác quan của con người.
Ví dụ như chạm vào, trải nghiệm sản phẩm mới
− Cảm xúc xã hội: sản phẩm tạo ra và cải thiện các mối quan hệ trong xã hội, hay tạo
cho họ một sự chú ý trong xã hội. Ví dụ như gửi tin nhắn, đăng status, hình ảnh
lên mạng xã hội sẽ giúp con người gắn kết với nhau hơn.
− Cảm xúc tâm lý: đề cập đến nhận thức và cảm xúc trong một khuôn khổ để kéo dài
niềm vui của người dùng. Ví dụ trinh phục cấp độ trong một trò chơi.
− Cảm xúc ý thức: Liên quan đến giá trị của con người như tình yêu, ý nghĩa và sự
khát vọng. Ví dụ như giá trị cốt lõi của sản phẩm, đặc điểm riêng biệt của sản
phẩm, hay thương hiệu của người thiết kế, công ty tạo nên niềm tin, tình yêu trong người dùng 45
Hình 1-30: Sảm phẩm Mac Air của Apple
Ví dụ về phân tích cảm xúc của người dùng khi sử dụng sản phẩm Mac Air của
Apple. Cảm xúc về vật lý là kết cấu vỏ titan, ánh sáng từ các nút bấm. Cảm xúc về xã
hội là khi người dùng sở hữu một chiếc máy Mac Air họ có thể được nổi bật, thể hiện
đẳng cấp riêng. Cảm xúc về tâm lý là sản phẩm cung cấp một thiết kế liền mạch giữa
các phương tiện truyền thông khác nhau, tạo được sự hài lòng với tính tinh giảm, tối
giảm các nhiệm vụ. Cảm xúc về mặt ý thức là sản phẩm vẫn giữ một nguyên tắc thiết kế
của Apple, hiện thân của sự độc lập, sáng tạo, và tự do tư tưởng, và người dùng cảm
nhận được điều đó ở sản phẩm
Đặt điểm của thiết kế UX:
− Thiết kế UX sẽ không áp dụng một nguyên tắc cho tất cả: Thiết kế UX sẽ không
hoạt động trong mọi tình huống cho mỗi người sử dụng bởi vì mỗi người đều có
đặc điểm và sở thích khác nhau. Điều gì có thể làm cho một người thích thú thì có
thể có tác dụng ngược với người khác. Điều tốt nhất chúng ta có thể làm là thiết
kế cho những kinh nghiệm cụ thể và thúc đẩy hành vi nhất định, nhưng chúng ta
không thể sản xuất, áp đặt hoặc dự đoán kinh nghiệm thực tế từ bản thân. Chúng
ta cũng không thể tái tạo các trải nghiệm người dùng cho một sản phẩm chính xác
trên một sản phẩm khác. Kinh nghiệm người dùng sẽ khác nhau giữa các sản phẩm.
Một thiết kế phải phù hợp với các mục tiêu, giá trị, quy trình sản xuất của sản phẩm đó.
− Thiết kế UX không được đánh giá trực tiếp bằng số liệu: Bạn không thể xác định
hiệu quả của một thiết kế trải nghiệm người dùng hoàn toàn dựa trên số liệu thống
kê như tỷ lệ lỗi, tỷ lệ chuyển đổi. Chúng ta có thể làm cho các giả định, và có thể
yêu cầu người dùng đưa ra những cảm nhận của họ. Và có thể ghi lại các số liệu
thống kế trải nghiệm của người dùng trực tiếp. 46
1.4 Một số dạng tương tác cơ bản
Điều khiển trực tiếp: Tương hiện nay giữa người dùng và sản phẩm đều là những
tương tác trực tiếp. Trước đây muốn máy tính thực hiện một lệnh nào đó cho chúng ta
thì người dùng sẽ phải gõ một lệnh trên máy tính để yêu cầu đến hệ thống. Ví dụ, Trong
các hệ thống trước đó, chẳng hạn như WordStar, bạn xác định văn bản với các lệnh gõ
như và để thay đổi diện mạo của nó. Chỉ khi bạn in tài liệu ra bạn
mới thấy những thay đổi được thực hiện một cách chính xác và theo ý thích của bạn.
Khi giao diện người dùng ra đời, thiết kế cần đảm bảo người dùng có thể dễ dàng thực
hiện những tương tác đó.
Điều khiển trực tiếp sẽ khiến cho người dùng cảm thấy hào hứng và thích thú hơn
khi sử dụng giao diện loại này: + Làm chủ giao diện;
+ Đủ khả năng thực hiện thao tác hệ thống;
+ Dễ dàng thích nghi với hệ thống và nắm bắt nhanh chóng các chức năng nâng cao;
+ Tự tin vào khả năng làm chủ hệ thống;
+ Thích thú khi sử dụng;
+ Háo hức trình diễn hệ thống với những người khác;
+ Mong muốn khám phá những khả năng khác của hệ thống.
Thao tác trực tiếp mô tả hệ thống có đặc điểm sau:
+ Thấy được các đối tượng mong muốn;
+ Hành động nhanh, tinh chỉnh được;
+ Thay thế được cú pháp câu lệnh phức tạp bằng các thao tác trực tiếp trên các đối tượng quan tâm.
Những điều khiển đó được gọi là điều khiển trực tiếp. Có hai loại điều khiển trực tiếp:
- WYSIWYG (What You See Is What You Get): có nghĩa là người dùng có thể
giao tiếp thông qua bất cứ biểu tượng có sẵn trên màn hình. Ví dụ để di chuyển
một đối tượng tệp hay thư mục (folder) từ một mục này sang mục khác, người
dùng có thể lựa chọn “move” trong menu và chọn thư mục muốn di chuyển tới.
Hay trên giao diện màn hình có nút “delete” giúp bạn có thể bấm vào nút đó để
xoá đi một tệp nào đó. Đây là một dạng điều khiển khá là phổ biến trong thiết kế 47
tương tác. Giao tiếp kiểu này đơn giản, tự nhiên và dễ dùng cho hầu hết các đối
tượng người dùng. Người dùng chỉ việc lựa chọn những gì xuất hiện trên màn
hình, người thiết kế cần thiết kế sao cho các đối tượng tương tác thể hiện đúng
mục tiêu của người dùng. Nó được hiểu giống như cái tên của nó, tức là những
gì bạn thấy là những gì bạn có được. Các loại tương tác này chủ yếu dựa trên
hoạt động giữa người dùng và sản phẩm.
- WYGIWYS (What You Get Is What You See): Ngày nay khi giao diện người
dùng đã hướng đến kết quả, những gì hiển thị như menu, thanh công cụ sẽ bị xóa
bỏ. Trọng tâm của thiết kế là cho phép người dùng xác định các kết quả theo cách
mà họ muốn, thay vì tập trung vào các hoạt động để đạt được mục tiêu của họ thì
tập trung vào đối tượng và đặc điểm của đối tượng khi thiết kế tương tác. Ví dụ
để di chuyển một tệp sang một thư mục khác, ngoài cách thực hiện ở trên thì
người dùng có thể “gắp thả” để di chuyển trực tiếp đối tượng đến thư mục đích.
Hay khi bạn muốn xoá một đối tượng, bạn chỉ cần kéo nó vào thùng rác như bạn
vứt một thứ gì đó vào thùng rác trong đời sống hàng ngày. Các sản phẩm thiết kế
hiện này hướng tới nhiều thiết kế dạng này hơn vì nó gần gũi với những hành
động hàng ngày của người dùng. Ví dụ như đối với sản phẩm smart Tivi ngày
nay, người dùng không cần phải nhìn thấy hành động cần thực hiện trên chiếc
điều khiển và màn hình để chuyển kênh, mà họ có thể sử dụng các cử chỉ di
chuyển để thay đổi các kênh. Chính vì vậy mà mô hình tương tác này đã được
đảo ngược thành “Những gì bạn có là những gì bạn thấy” – WYGIWYS.
Dưới đây là một số dạng tương tác trong các sản phẩm phần mềm.
1.4.1 Giao tiếp Menu selection
Menu seletion là dạng tương tác cung cấp danh sách cho người dùng lựa chọn.
Người dùng không phải thực hiện lệnh từ bộ nhớ, cũng không phải nhớ chi tiết những
gì mà họ cần làm mà chỉ cần ghi nhận. Một Menu là một tập hợp các tùy chọn hiển thị
trên màn hình mà việc lựa chọn thực hiện một (hoặc nhiều hơn) các kết quả lựa chọn
làm thay đổi trạng thái của giao diện (Paap và Roske-Hofstrand, năm 1989, trích dẫn
trong Preece et al., 1994). Sử dụng một hệ thống dựa trên menu selection, người dùng
chọn một lệnh từ một lựa chọn được xác định trước, các lệnh được sắp xếp trong các
menu. Các nhãn trên menu được trình bày dễ hiểu để người dùng có thể thực hiện được
nhiệm vụ của mình. Để tiết kiệm không gian màn hình các mục menu thường được biểu
diễn dạng drop-down hoặc menu pop-up. Ví dụ về menu selection được hiển thị ở Hình
1-31 là một dạng drop-down. 48
Hình 1-31: Menu selection trên Microsoft − Ưu điểm:
● Giao tiếp này phù hợp với người mới và không thường xuyên.
● Có thể hấp dẫn người dùng có kinh nghiệm, chuyên gia nếu màn hình và cơ
chế lựa chọn nhanh chóng và tích hợp phím tắt.
● Người dùng không phải nhớ tên của một lệnh và chính tả của ngôn ngữ lệnh để ra quyết định.
● Cho phép hỗ trợ dễ dàng xử lý các lỗi đầu vào của người dùng. − Nhược điểm:
● Quá nhiều menu có thể dẫn đến tình trạng quá tải thông tin hay khiến thông tin phức tạp.
● Có thể được gây chậm đối người sử dụng thường xuyên.
● Chiếm không gian màn hình, có thể không phù hợp cho màn ảnh nhỏ.
● Thiếu tính mềm dẻo (người dùng chỉ được lựa chọn những cái có sẵn trong menu).
Thông thường người ta dùng một số thực đơn phụ thuộc nhau có thể được sử dụng
để hướng dẫn người dùng qua một chuỗi các lựa chọn tuần tự trong thực đơn cùng mức.
Ví dụ như in một tài liệu, có một thực đơn tuyến tính cùng mức phải lựa chọn các tham
số, như cổng in, đặt khoảng cách dòng, số trang (Hình 1-32). Khi thực hiện một quyết
định phức tạp các menu cùng mức được hiển thị trên màn hình cùng một lúc, một vài 49
menu được đưa vào hộp thoại đơn, điều này làm cho giao diện của người dùng đơn giản
hơn, cho phép người dùng chọn ở bất kỳ vị trí nào và tốc độ cũng nhanh hơn.
Hình 1-32: Các menu phụ thuộc nhau. 1.4.2 Giao tiếp Audio menu
Audio menu là một dạng của giao tiếp menu selection. Tuy nhiên các mục trong
menu sẽ không phải là các tiêu đề để người dùng nhìn thấy và lựa chọn mà nó là các tín
hiệu âm thanh. Audio menu thường được sử dụng trong các hệ thống trả lời tự động,
hoặc tổng đài dịch vụ. Một ví dụ đơn giản về hệ thống trả lời tự động trong dịch vụ tin
nhắn thoại, nếu người được gọi không nhấc máy, hệ thống trả lời tự động sẽ thông báo
cho bạn bằng tín hiệu âm thanh, hướng dẫn bạn đưa ra quyết định lựa chọn.
Để ghi nhớ một danh sách các lựa chọn bằng âm thanh sẽ khiến cho người dùng
khó có thể nhớ hết được. Không giống như menu dạng văn bản, cùng một lúc người
dùng có thể duyệt được nhiều mục trong một menu. Nhưng đối với dạng Audio menu,
tại một thời điểm người dùng chỉ có thể nghe được một tín hiệu âm thanh, và họ người
không có khả năng quay lại các tín hiệu đã được nghe trước đó. Do đó khuyến nghị chỉ
nên đưa ra 3 đến 4 lựa chọn cho giao tiếp audio selection.
1.4.3 Giao tiếp menu trên màn hình nhỏ
Đối với màn hình nhỏ giao tiếp menu có những cách để biểu diễn khác biệt với
giao tiếp trên màn hình rộng.Trên thiết bị điện thoại tính năng thường 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 (soft key) và một nút Select
(Lựa chọn) được đặt cạnh dưới màn hình (Hình 1-33). 50
Hình 1-33: Menu trên màn hình nhỏ.
Hiện nay, công nghệ điện thoại phát triển nhanh chóng, đa số người dùng sử dụng
điện thoại màn hình cảm ứng.Thiết kế giao tiếp trên màn hình kích thước nhỏ nhưng
tương tác chạm trực tiếp vào các mục trong menu, tương tự như việc sử dụng chuột trên
máy tính. Do vậy trong thiết kế menu người ta sẽ không cần đến các nút điều hướng như
thiết kế cũ. Một số lưu ý khi thiết kế giao tiếp menu trên màn hình nhỏ:
− Cần xác định loại ứng dụng để thiết kế menu thích hợp (game, ứng dụng tiện ích,…)
− Xác định loại thiết bị và hướng dẫn thiết kế của các hệ điều hành. Một số hệ
điều hành di động có các quy tắc riêng để người thiết kế sử dụng. Ví dụ như
trên điện thoại Android có phím cứng “Option”, người thiết kế có thể tận
dụng phím cứng này vào thiết kế menu selection cho ứng dụng (Hình 1-35).
Còn trong iphone, điện thoại chỉ có phím cứng là nút home, nên bắt buộc
người thiết kế phải thiết kế menu trên giao diện ứng dụng.
− Xác định các chức năng, phân loại các nhóm menu để lựa chọn cách giao tiếp menu phù hợp
− Thiết kế responsive là cách sắp xếp lại menu khi chuyển từ giao diện màn
hình rộng sang màn hình nhỏ (Hình 1-36). 51
Hình 1-34: Giao diện menu trên mobile game
Hình 1-35: Phím cứng trên điện thoại hỗ trợ giao tiếp menu selection 52
Hình 1-36: Thay đổi bố cục sắp xếp menu trên các màn hình kích thước khác nhau.
1.4.3.1 Giao tiếp hỏi đáp và truy vấn
Hỏi đáp là một cơ chế đơn giản nhằm cung cấp dữ liệu cho một ứng dụng của một
lĩnh vực riêng nào đó. Người dùng được yêu cầu bởi một loạt các câu hỏi. Các câu hỏi
được miêu tả trong nhiều dạng khác nhau: Yes/No, dạng đa lựa chọn, dạng nhấn số.
Việc tương tác này được tiến hành qua nhiều bước. Kiểu giao tiếp này khá tự nhiên, dễ
thiết kế và rất thích hợp cho người dùng mới, thiếu kinh nghiệm. Hình 1-37 là dạng giao
tiếp hỏi đáp đơn giản yêu cầu người dùng trả lời để xác nhận trước khi vào ứng dụng.
Hình 1-38 là một quá trình cài đặt một hệ thống, chu trình cài đặt này, hệ thống yêu cầu
người dùng phải trả lời các câu hỏi để hoàn thành cài đặt. 53
Hình 1-37: Giao tiếp dạng hỏi đáp đơn giản
Hình 1-38: Giao tiếp dạng hỏi đáp yêu cầu người dùng cần trả lời các câu hỏi của hệ thống
Các ngôn ngữ truy vấn, được sử dụng để xây dựng các truy vấn lấy thông tin từ
một cơ sở dữ liệu. Chúng sử dụng các cách diễn đạt kiểu ngôn ngữ tự nhiên, nhưng thực
tế lại yêu cầu cú pháp rõ ràng, cũng như hiểu biết về cấu trúc dữ liệu. Các truy vấn
thường yêu cầu người sử dụng chỉ rõ một thuộc tính hay nhiều thuộc tính để tìm trong
cơ sở dữ liệu. Điều này sẽ đơn giản khi có một thuộc tính đơn, nhưng trở nên phức tạp
khi có nhiều thuộc tính được đề cập, ví dụ Hình 1-39, nếu người dùng muốn hiển thị các
tên có thuộc tính department = “accounts” và salary > 15000 thì cần viết một lệnh yêu
cầu truy vấn đến cơ sở dữ liệu. Hầu hết các ngôn ngữ truy vấn không cung cấp trực tiếp
sự xác nhận những cái gì đã được yêu cầu, vì vậy chỉ xác nhận tính hợp lệ mới làm cho
người sử dụng có kết quả tìm kiếm. Do đó, để sử dụng hiệu quả các ngôn ngữ truy vấn
yêu cầu phải có một chút kinh nghiệm. Nhiều ngôn ngữ truy vấn đã có cải tiến đáng kể
bằng cách cung cấp giao diện đồ họa để người dùng điền thông tin vào. Việc sinh ra câu
lệnh với cú pháp đầy đủ được thực hiện bởi phần mềm và trong suốt với người dùng. 54
Hình 1-39: Giao tiếp dùng ngôn ngữ truy vấn
1.4.3.2 Giao tiếp điền theo mẫu
Điền theo mẫu sử dụng bàn phím để nhập các dữ liệu theo một số mẫu, tại một số
vị trí trên màn hình. HCI loại này bắt đầu vào những năm 70 của thế kỉ XX. Ưu điểm
của tiếp cận này là ít sai, dễ theo dõi, thể hiện được tương quan dữ liệu.
Menu đạt được hiệu quả trong việc lựa chọn một mục từ danh sách, nhưng với một
số công việc lại trở thành nặng nề. Nếu dữ liệu nhập vào là những tên người hay các giá
trị số thì việc nhập vào bằng bàn phím có hiệu quả cao hơn. Khi nhiều trường dữ liệu có
ý nghĩa thiết thực, và có tương tác với nhau, người ta sử dụng giao tiếp điền theo mẫu.
Điền theo mẫu là một phần quan trọng trong giao diện văn bản.
Giải pháp điền theo mẫu có ưu điểm ở chỗ nó thể hiện thông tin một cách hoàn
chỉnh, làm cho người dùng có cảm giác đang điều khiển hội thoại. Một số chỉ dẫn cũng
cần thiết vì cách thể hiện giống như các văn bản quen thuộc. Bên cạnh đó người sử dụng
phải thông thạo việc sử dụng bàn phím, phím TAB hay chuột để di chuyển con trỏ, sửa
lỗi bằng phím quay lại, ý nghĩa của tên trường, nội dung của các trường, và sử dụng phím Enter.
Sử dụng giao diện điền theo mẫu không khó, nhưng cũng cần lưu ý khi thiết kế
giao diện này. Galtiz, 1993, Brown, 1988, cho rằng không có nhiều kinh nghiệm làm
việc với mẫu điền, nhưng cũng có một số nguyên tắc nổi bật rút ra từ những người đang
thực hành với loại giao diện này. Ogden và Boyle, 1982, so sánh của cơ sở dữ liệu cập
nhật bằng việc điền khuôn dạng và bằng câu lệnh đã chứng minh tốc độ và sự ưu việt
thuộc về điền khuôn dạng. Người ta đã có công cụ phần mềm đơn giản, trợ giúp chất
lượng đảm bảo... tạo điều kiện bảo trì giao diện và nâng tốc độ tương tác. Nhưng thậm
chí ngay cả với công cụ hoàn hảo nhất, người thiết kế vẫn phải giải quyết nhiều công việc phức tạp. 55
Hình 1-40: Giao diện nhập theo khuôn dạng
Mặc dù thiết kế dạng tương tác này rất đơn giản nhưng các nhà thiết kế vẫn thường
hay bị mắc lỗi. Một số lỗi điển hình: − Bỏ sót tiêu đề;
− Các dấu hiệu kết thúc;
− Tên file máy tính không cần thiết; − Các ký tự lạ;
− Các chỉ dẫn khó hiểu;
− Nhóm các trường không trực quan;
− Các thể hiện lộn xộn;
− Các tên trường không rõ nghĩa;
− Mâu thuẫn giữa các chữ viết tắt hay các định dạng trường;
− Con trỏ hiện thời bất tiện;
− Các thủ tục sửa lỗi phức tạp;
− Các thông báo lỗi không thân thiện.
1.4.3.3 WIMP (Windows, Icons, Menus, Pointers)
Hiện nay hầu hết các môi trường chung cho tương tác máy tính là dạng giao tiếp
WIMP (Windows, Icons, Menus, Pointer). WIMP là hệ thống cửa sổ đơn giản bao gồm
cửa sổ, biểu tượng, các menu và con trỏ. 56 Hình 1-41: WIMP Windows
Hệ thống cửa sổ được coi như để quản lí vào/ ra như thể hiện màn hình, thiết bị
nhập, cho phép đặt kích thước, di chuyển cửa sổ. Một cửa sổ thường chứa văn bản hoặc
đồ họa và có thể được di chuyển hay chỉnh lại kích thước theo ý muốn trong giới hạn
cho phép. Có thể có nhiều cửa sổ trên một màn hình trong cùng một lúc, cho phép các
công việc khác nhau được xuất hiện cùng lúc. Người dùng có thể thao tác trên các cửa
sổ khác nhau. Ví dụ họ có thể chuyển từ một dòng công việc này sang một dòng công việc khác.
Nếu có một cửa sổ chồng lấn lên cửa sổ khác thì cửa sổ phía sau sẽ bị mờ đi một
phần và sau khi được chọn lại nó lại xuất hiện. Thông thường các cửa sổ có thể kết hợp
với những thành phần khác nhằm tăng sự tiện ích, ví dụ như thanh cuộn để tăng tính linh
hoạt, cho phép người dùng di chuyển nội dung cửa sổ lên hoặc xuống, từ cạnh trái sang
cạnh phải. Trên cửa sổ thường có thanh tiêu đề người dùng nhận dạng các cửa sổ khác
nhau. Ở góc cửa sổ có các nút giúp tùy chỉnh kích thước và đóng của sổ. Trong một số
hệ thống, cho phép cửa sổ nằm trong cửa sổ khác. Icons
Biểu tượng là một hình ảnh nhỏ miêu tả một cho một liên kết hoặc một hành động.
Biểu tượng được sử dụng trong giao tiếp WIMP có thể thấy ngay là một thành phần của
cửa sổ để phóng to, thu nhỏ, hay đóng cửa sổ. Trong các thanh công cụ nó được sử dụng
biểu diễn cho một lệnh. Những biểu tượng sử dụng cần thiết kế dễ hiểu và gần gũi với
người dùng. Tuy nhiên cũng có những biểu tượng mang tính chất chuyên môn, và yêu
cầu người dùng có kinh nghiệm và chuyên gia trong lĩnh vực đó. 57 Menus
Trên cửa sổ làm việc thường có các thanh công cụ điển hình gồm các ô, các biểu
tượng với lời chú thích, ở dạng menu. Menu cung cấp cho người dùng các lựa chọn để
thao tác trên cửa sổ làm việc. Nó có chức năng như một lệnh điều khiển cho công việc
đang được thực hiện trên cửa sổ làm việc. Nó có thể làm thay đổi giao diện hiển thị, liên
kết đến một trang khác hoặc thực hiện một lệnh làm việc nào đó. Pointers
Con trỏ là một phần quan trọng trong WIMP, nó dùng để định vị và lựa chọn. Có
rất nhiều loại hình dạng con trỏ (Hình 1-42). Các dạng con trỏ khác nhau thường được
dùng để phân biệt các chế độ, ví dụ con trỏ bình thường có thể là một mũi tên, nhưng
khi vẽ một đường thẳng nó có thể chuyển thành mũi tên hai đầu. Con trỏ cũng được sử
dụng để báo cho người dùng biết vệ sự hoạt động của hệ thống, ví dụ biểu tượng đồng
hồ cát báo hiệu trạng thái chờ đợi. Các con trỏ đều có một điểm nóng, nó xác định vị trí mà nó trỏ vào.
Hình 1-42: Một số dạng con trỏ chuột trong MS Windows, theo ngữ nghĩa khác nhau.
1.4.3.4 Một số dạng tương tác khác
Hiện nay một số dạng đã trở nên đa dạng hơn, vì người thiết kế luôn sáng tạo để tạo
ra những tương tác cho người dùng. Những dạng tương tác này dựa trên công nghệ mới
như điều khiển bằng giọng nói, điều khiển nhận diện khuôn mặt, điều khiển bằng âm
thanh, điều khiển bằng mắt,… hay dựa trên các loại cảm biến trong thiết bị như cảm
biến chuyển động, cảm biến gia tốc,… Những tương tác này thường là dạng điều khiển
WYGIWYS, vì trên giao diện người dùng không có bất kể dấu hiệu, biểu tượng đại diện
cho những tương tác này. Hình 1-43 là một dạng điều khiển bẳng cử chỉ của ngón tay.
Điều khiển bằng cử chỉ dựa trên giải pháp phần cứng tăng cường sử dụng các cảm biến. 58
Với cảm biến gia tốc, máy ảnh, và cảm biến khác hiện nay cho phép việc sử dụng các
cử chỉ để điều khiển hoặc cung cấp đầu vào môi trường xung quanh. Kết hợp các công
nghệ cử chỉ vận động với phần cứng cố định cho phép tạo ra những tương tác trong không gian thực.
Hình 1-43. Điều khiển nhận dạng cử chỉ trong thời gian thực.
1.5 Câu hỏi ôn tập
1. Định nghĩa thiết kế tương tác đa phương tiện?
2. Phân biệt UX, UI và Tương tác. Phân tích yếu tố UX, UI trong ví dụ dưới đây?
3. PACT trong thiết kế tương tác bao gồm những yếu tố nào?
4. Hãy kể các mục tiêu về khả năng sử dụng trong thiết kế tương tác và cho ví dụ? 59
5. Mục tiêu của thiết kế UX là gì? Cho ví dụ?
6. Những lưu ý khi thiết kế dạng tương tác giao tiếp menu selection, audio menu,
và menu trên thiết bị màn hình nhỏ
7. Giao tiếp dạng hỏi đáp và truy vấn là gì?
8. Giao tiếp điền theo mẫu cần lưu ý những gì khi thiết kế?
9. Hãy cho biết giao tiếp dạng WYSIWYG và WYGIWYS khác gì nhau và cho ví dụ.
10. Phân tích các yếu tố PACT trong ứng dụng nghe nhạc Zing MP3.
11. Em hãy thiết kế một giao diện giao tiếp dạng điền cho một trang đăng ký tài
khoản với các nội dung: Họ tên, user name, password, ngày sinh, địa chỉ, công việc.
12. Nhận xét thiết kế dưới đây với các tiêu chí về khả năng sử dụng. 60
Xem$xu$hướng$thời$trang$$ $$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$ $ 61
Chương 2. QUY TRÌNH THIẾT KẾ TƯƠNG TÁC
Thiết kế tương tác phải trải qua nhiều giai đoạn khác nhau từ nghiên cứu, phân tích
yêu cầu đến giai đoạn thiết kế và thẩm định thiết kế. Thiết kế tương tác là quá trình thiết
kế lặp lại, tức là phải được thực hiện lặp lại nhiều lần để ra được bản thiết kế tốt nhất.
Chương 2 sẽ đề cập đến các công việc chính trong thiết kế tương tác và giới thiệu các
mô hình thiết kế trên thực tế.
2.1 Giới thiệu các pha trong quy trình thiết kế tương tác
Có nhiều cách khác nhau để mô tả các hoạt động liên quan đến quá trình thiết kế.
Người thiết kế là người phải hiểu rất nhiều thứ, một mớ hỗn độn các loại thông tin. Họ
quan sát cách thức sản phẩm sẽ được sử dụng. Thiết kế ra sản phẩm là để người dùng sử
dụng, do vậy họ phải hình dung ra được những hành động của những quyết định đó. Quy
trình là cách giúp cho các nhà thiết kế đối phó với những vấn đề lộn xộn của thiết kế
tương tác. Quy trình thiết kế sẽ bao gồm 4 hoạt động chính.
− Xác định yêu cầu: Để thiết kế một cái gì đó chúng ta phải biết đối tượng mục tiêu
sẽ sử dụng sản phẩm, những kỹ thuật, công nghệ hỗ trợ, ngữ cảnh sử dụng sản
phẩm. Những nhu cầu này hình thành cơ sở yêu cầu của sản phẩm và củng cố cho
công việc thiết kế và phát triển tiếp theo. Hoạt động này là nền tảng cho cách tiếp
cận người dùng làm trung tâm, và rất quan trọng trong thiết kế tương tác. Để xác
định yêu cầu cần thiết cho thiết kế, chúng ta cần thực hiện các kỹ thuật thu thập
thông tin từ các nguồn khác nhau và thực hiện phân tích thông tin.
− Thiết kế: Đây là hoạt động cốt lõi của thiết kế tương tác, cho thấy những ý tưởng để
đáp ứng các yêu cầu. Hoạt động này có thể được chia thành hai tiểu hoạt động:
thiết kế mô hình (concept design) và thiết kế vật lý (physical design). Concept
design liên quan đến việc xác định hình dạng sản phẩm sẽ phát triển, nó có những
chức năng gì, cách sử dụng. Physical design xem xét các chi tiết của sản phẩm bao
gồm cả màu sắc, âm thanh, và hình ảnh để sử dụng, thiết kế menu, và biểu tượng….
− Xây dựng bản mẫu tương tác (Prototype): Thiết kế tương tác liên quan đến việc thiết
kế các sản phẩm tương tác. Cách hợp lý nhất cho người sử dụng để đánh giá thiết
kế là để cho họ tương tác với sản phẩm. Điều này đòi hỏi một phiên bản tương tác
của thiết kế được xây dựng, nhưng điều đó không có nghĩa là một phần mềm hoàn
chỉnh. Có những kỹ thuật khác nhau để đạt được "sự tương tác", ví dụ, prototype
trên giấy rất nhanh chóng và rẻ tiền để xây dựng và rất hiệu quả để xác định các
vấn đề trong giai đoạn đầu của thiết kế, và thông qua người sử dụng để nhận được
những phản hồi có ý nghĩa. 62
− Đánh giá: là quá trình xác định khả năng sử dụng và sự chấp nhận của sản phẩm
hoặc thiết kế được đo trong điều kiện của một loạt các tiêu chí bao gồm cả số lượng
lỗi của người sử dụng tạo ra, làm thế nào để nó hấp dẫn người dùng, làm thế nào
để phù hợp với yêu cầu,... Thiết kế tương tác đòi hỏi một mức độ cao của sự tham
gia của người sử dụng trong suốt quá trình phát triển, và điều này làm tăng cơ hội
của một sản phẩm có thể chấp nhận được chuyển giao. Trong hầu hết các tình
huống thiết kế, bạn sẽ tìm thấy một số hoạt động liên quan đến việc bảo đảm chất
lượng và kiểm tra để chắc chắn rằng sản phẩm cuối cùng là phù hợp với mục đích.
Đánh giá không thay thế các hoạt động này, nhưng bổ sung và tăng cường cho
chúng. Các hoạt động phát triển nhiều loại thiết kế, xây dựng các phiên bản tương
tác của thiết kế, và đánh giá được đan xen nhau. Lặp lại các bước là một trong
những đặc điểm quan trọng của quá trình thiết kế tương tác.
2.2 Các mô hình thiết kế và phát triển sản phẩm tương tác tương tác
Hiểu được các hoạt động trong thiết kế tương tác là bước đầu tiên để thực hiện
thiết kế, nhưng điều quan trọng là phải biết các hoạt động đó liên quan đến nhau nhau
như thế nào trong một vòng đời đầy đủ phát triển sản phẩm. Mỗi mô hình hoạt động đều
có đặc điểm riêng, và tùy vào từng điều kiện và hoàn cảnh mà người ta sẽ lựa chọn
những mô hình khác nhau để áp dụng vào dự án.
Các mô hình hiện có các mức độ khác nhau của sự tinh tế và sự phức tạp. Đối với
các dự án liên quan đến chỉ một vài nhà phát triển có kinh nghiệm, một mô hình đơn
giản có lẽ sẽ đảm bảo đầy đủ khả năng để thực hiện. Tuy nhiên, đối với các hệ thống lớn
hơn liên quan đến hàng chục hoặc hàng trăm nhà phát triểnvới hàng trăm hoặc hàng
ngàn người sử dụng, một mô hình đơn giản chỉ là không đủ để cung cấp các cơ cấu quản
lý và kỷ luật cần thiết để thiết kế một sản phẩm có thể sử dụng. Vì vậy, một cái gì đó là
cần thiết mà sẽ cung cấp nhiều hình thức và kỷ luật hơn. Tuy nhiên đơn giản hay phức
tạp nó xuất hiện ở bất kỳ mô hình nào kể cả mô hình đơn giản, vì sự phức tạp của phiên
bản thực tại. Do đó, bất kỳ một dự án nào áp dụng mô hình nào vào thực tế sẽ cần phải
thêm một số chi tiết để phù hợp với hoàn cảnh cụ thể và văn hóa của mình.
Dưới đây là một số mô hình vòng đời được áp dụng trong thiết kế tương tác, nó là
sự kết hợp của các vòng đời phát triển phần mềm và HCI. 2.2.1 Mô hình đơn giản.
Mô hình đơn giản xem các hoạt động của thiết kế tương tác như là có liên quan
đến nhau, thể hiện Hình 2-1. Mô hình này không phải là nguyên tắc, có nghĩa là không
phải tất cả các sản phẩm tương tác đều phát triển theo mô hình đó.
Hầu hết các dự án bắt đầu với việc xác định yêu cầu. Dự án có thể đã phát sinh do
một số đánh giá đã được thực hiện, nhưng vòng đời mới của sản phẩm có thể được coi 63
như bắt đầu vào thời điểm này. Từ hoạt động này, một số thiết kế khác được tạo ra trong
một nỗ lực để đáp ứng các nhu cầu và yêu cầu đã được xác định. Sau đó, các phiên bản
tương tác của các mẫu thiết kế được phát triển và đánh giá. Dựa trên những phản hồi từ
các đánh giá, các nhóm có thể cần phải quay trở lại để xác định nhu cầu hoặc yêu cầu
lọc, hoặc nó có thể đi thẳng vào thiết kế lại. Nó có thể là nhiều hơn một thiết kế thay thế
sau các chu kỳ lặp lại. Từ ý tưởng thô ban đầu sẽ hình thành bản thiết kế cuối cùng.
Hình 2-1: Mô hình đơn giản 2.2.2 Mô hình thác nước
Vòng đời thác nước là mô hình đầu tiên thường được biết đến trong công nghệ
phần mềm và là cơ sở của nhiều vòng đời sử dụng ngày nay. Nó là một mô hình tuyến
tính, trong đó mỗi bước phải được hoàn thành trước khi đến bước tiếp theo (Xem Hình
2-2). Ví dụ như phải hoàn thành xong bước phân tích yêu cầu mới chuyển sang bước thiết kế. 64
Hình 2-2: Mô hình thác nước
Vòng đời sẽ được bắt đầu từ pha phân tích yêu cầu, sau đó nó được chạy tuần tự
qua các pha tiếp theo, như thiết kế, lập trình, kiểm thử và cuối cùng là bảo trì. Nhược
điểm của mô hình này là cách tiếp cận, yêu cầu thay đổi theo thời gian, khi doanh nghiệp,
môi trường hoạt động thay đổi nhanh chóng. Điều này có nghĩa là nó không phù hợp
nếu dự án chạy trong nhiều tháng, hoặc nhiều năm. 2.2.3 Mô hình RAD
Mô hình RAD – Rapid Applications Development với cách tiếp cận lấy người sử
dụng làm trung tâm và giảm thiểu rủ ro do yêu cầu thay đổi trong quá trình dự án. Mô
hình RAD xuất hiện vào đầu những năm 1990, để khắc phục bản chất không phù hợp
của mô hình thác nước. Hai tính năng chính của một dự án RAD là:
− Chu kỳ giới hạn thời gian khoảng sáu tháng, hệ thống phải được bàn giao. Điều
này được gọi là thời gian-boxing. Trong thực tế, một dự án lớn có thể bị tách ra
thành nhiều dự án nhỏ hơn mà có thể tăng cường sự linh hoạt trong điều kiện
phát triển kỹ thuật sử dụng và bảo trì hệ thống cuối cùng.
− JAD (Joint Application Development ) workshop, trong đó người sử dụng và các
nhà phát triển ngồi lại với nhau để tìm ra được các yêu cầu của hệ thống. 65
Hình 2-3: Mô hình RAD.
Một vòng đời RAD cơ bản có năm giai đoạn (xem Hình 2-3): Thiết lập dự án,
hội thảo JAD, thiết kế lặp đi lặp lại và xây dựng, thử nghiệm mẫu, kiểm tra thực hiện. 2.2.4 Mô hình xoắn ốc
Năm 1988 Barry Boehm đã đề xuất mô hình xoắn ốc của phát triển phần mềm
(Hình 2-4). Trong mô hình này có hoạt động thường xuyên được lặp lại đó là phân tích
rủi ro và tạo mẫu. Mỗi lần lặp quanh xoắn ốc có thể dựa trên một vòng đời khác nhau
và có thể hoạt động khác nhau. Mô hình này thường được áp dụng cho những dự án lớn
kéo dài 1 năm hoặc nhiều hơn. Nó tập trung vào các rủi ro có liên quan trong việc phát
triển. Lựa chọn thay thế được xem xét và các vấn đề tiềm năng gặp phải sẽ được giải quyết. 66
Hình 2-4: Mô hình xoắn ốc 2.2.5 Mô hình ngôi sao.
Năm 1989, các mô hình vòng đời sao được đề xuất bởi Hartson và Hix (1989) (xem
Hình 2-5). Điều này xuất hiện từ một số công việc thực nghiệm họ đã nhìn vào cách
thiết kế giao diện trong công việc của họ. Họ đã xác định hai chế độ hoạt động khác
nhau: chế độ phân tích và chế độ tổng hợp. Không giống như các mô hình vòng đời giới
thiệu ở trên, mô hình ngôi sao không xác định bất kỳ thứ tự của các hoạt động. Trong
thực tế, các hoạt động được đánh giá cao kết nối với nhau. Đánh giá là trung tâm của
mô hình này, và bất cứ khi nào một hoạt động được hoàn thành, kết quả của nó phải
được đánh giá. Vì vậy, một dự án có thể bắt đầu với yêu cầu thu thập, hoặc nó có thể bắt
đầu bằng việc đánh giá một sản phẩm hiện có, hoặc bằng cách phân tích các tác vụ hiện hành.
Hình 2-5: Mô hình ngôi sao
2.3 Các đặc điểm chính của quy trình thiết kế tương tác
Có ba đặc điểm quan trọng của quy trình tương tác mà chúng ta luôn phải quan tâm đến. Đó là:
− Người dùng làm trung tâm: Sự cần thiết phải tập trung vào người dùng sẽ luôn được
nhấn mạnh trong suốt quá trình thiết kế. Khuyến khích tập trung vào các vấn đề
của người dùng. Luôn lắng nghe nhu cầu của người dùng và đẩy mạnh việc thu
thập thông tin phải hồi của người dùng.
− Mục tiêu khả năng sử dụng và trải nghiệm người dùng cần phải được xác định cụ
thể, ghi chép rõ ràng, và thống nhất ở đầu dự án. Chúng giúp các nhà thiết kế có
thể đưa ra quyết định lựa chọn giữa các phiên bản thiết kế khác nhau và kiểm tra
về tiến độ sản phẩm.
− Thiết kế lặp đi lặp lại dựa trên phản hồi, khi người dùng và người thiết kế tham gia
thảo luận về yêu cầu, nhu cầu, hi vọng và khát vọng. Lặp đi lặp lại không bao giờ
tránh khỏi vì nhà thiết kế không bao giờ có được giải pháp ngay ở lần đầu tiên. 67
Họ phải mất thời gian nghiên cứu, dùng thử, gặp những lỗi sai,…Họ sẽ đưa ra
những ý tưởng từ sự phản hồi nhiều lần này. 2.4 Case study 2.4.1 Case study 1
“Thiết kế ứng dụng cho người hâm mộ Manchester United trên di động”
Dự án thiết kế ứng dụng trên điện thoại di động cho người hâm mộ câu lạc bộ
Manchester United. Case study này cung cấp các vấn đề khác nhau được xem xét khi thiết kế ứng dụng.
Kịch bản thiết kế
Hãy tưởng tượng chúng ta được yêu cầu thiết kế một 'trải nghiệm nội dung phong
phú' cho một công ty khai thác dịch vụ viễn thông di động. Họ muốn nhắm mục tiêu về
lợi ích cá nhân của khách hàng và cung cấp cho họ 'chủ đề' có thể tải xuống. Nhà điều
hành muốn khuyến khích khách hàng sử dụng các dịch vụ trực tuyến - như tải hình ảnh
nền và kiểm tra thông tin trực tuyến. Ý tưởng là 'chủ đề' sẽ thay đổi màn hình điện thoại
của khách hàng cũng như cung cấp các tính năng nội dung mới.
Ví dụ cho kịch bản này là chủ đề đội bóng đá 'Manchester United', nhắm đến người
hâm mộ của đội bóng đá. Chủ đề cũng có thể là một nghệ sĩ âm nhạc, một bộ phim bom
tấn, một nhân vật nổi tiếng, ….
1. Tập trung vào người dùng: Xác định mục tiêu người dùng
Bước đầu tiên trong quy trình thiết kế sẽ là xác định mục tiêu chính của người dùng mà
dịch vụ sẽ hỗ trợ. Các mục tiêu người dùng cung cấp một điểm tham chiếu thiết kế trong
suốt quá trình tạo mẫu giấy. Một số ví dụ về mục tiêu người dùng sẽ bao gồm:
- Kiểm tra các hình nền mới nhất có thể được tải xuống
- Tải hình nền đã chọn
- Thay đổi cài đặt hình nền của điện thoại thành hình nền mới tải về
- Kiểm tra các tiêu đề tin tức đội
- Kiểm tra một câu chuyện tin tức cụ thể
- Kiểm tra kế hoạch sắp tới của đội
- Kiểm tra vị trí và điểm số của đội trong bảng đấu
2. Cấu trúc nội dung: Xác định các tính năng và nội dung
Cũng như xem xét mục tiêu của người dùng, chúng tôi cần phải chi tiết hóa nội
dung và tính năng của sản phẩm. Điều này bao gồm xác định nội dung có sẵn, các tính 68
năng mong muốn và trải nghiệm người dùng tổng thể mà nhà điều hành muốn đạt được.
Đối với dự án này, một số lĩnh vực cần xem xét sẽ là:
Mục đích của công ty điều hành : - Cho phép cá nhân hóa -
Khuyến khích khách hàng sử dụng nội dung trực tuyến Nội dung và tính năng -
Hình ảnh hình nền Manchester United -
Thông tin kế hoạch Manchester United - Tin tức Manchester United -
Cập nhật bảng đấu của Manchester United
Cân nhắc trải nghiệm người dùng
- Quá trình tải xuống và mua hàng
- Quá trình cài đặt cho chủ đề
- Việc chuyển đổi giữa nhiều chủ đề
- Sự điều hướng của chủ đề và nội dung của nó
Mục tiêu của chúng tôi sẽ là giải pháp thiết kế để đáp ứng nhu cầu của cả công ty điều
hành và người dùng mục tiêu. Giai đoạn đầu của quá trình thiết kế này sẽ bao gồm một
giai đoạn động não, trong đó chúng tôi xem xét tất cả các nội dung và tính năng có thể
riêng lẻ, cũng như cách chúng hoạt động cùng nhau như một sản phẩm hoàn chỉnh.
3. Nguyên mẫu giấy đầu tiên: Lặp lại thiết kế đầu tiên
Một khi mục tiêu, nội dung và tính năng của người dùng được vạch ra, nguyên
mẫu giấy đầu tiên có thể được tạo. Các hình ảnh trong các phần sau minh họa các nguyên
mẫu giấy và cách chúng được sử dụng cho các quyết định thiết kế khác nhau. Nhìn vào
Hình 2-6 bạn có thể thấy rằng tạo mẫu giấy cho phép chúng ta xem ứng dụng mà chúng
ta đang thiết kế ở cả cấp độ 'macro' và 'micro'. Chế độ xem macro cho thấy toàn bộ ứng
dụng và xem nó cùng một lúc. Chế độ xem micro là phóng to vào các chi tiết của các
phần ứng dụng cụ thể. Trong hình ảnh này, chúng tôi xem xét các chi tiết về các tùy
chọn xuất hiện cho người dùng khi họ chọn một 'Tùy chọn' tại màn hình cụ thể nào đó.
Khi chúng tôi thiết kế, chúng tôi chuyển đổi giữa hai quan điểm này liên tục. Một
lợi ích chính của việc phóng to là nó cho phép chúng ta thấy việc sử dụng các yếu tố 69
trong thiết một cách nhất quán. Tính nhất quán cũng quan trọng với thiết kế giao diện
người dùng di động như với bất kỳ giao diện người dùng nào khác, vì vậy so sánh hai
chế độ giúp giải quyết vấn đề này trong một thiết kế.
Hình 2-6: Khung nhìn Micro và Macro với nguyên mẫu giấy 4. Luồng màn hình
Chúng tôi làm việc để vẽ ra từng màn hình, trạng thái và chế độ xem mà người
dùng sẽ thấy trên thiết bị cuối cùng. Vì vậy, ở đây hình 2 -7 chẳng hạn, chúng tôi đã bắt
đầu tại thời điểm người dùng chọn 'thẻ cầu thủ' - một trong những tính năng của ứng
dụng. Họ xem bản xem trước toàn màn hình, họ tải xuống, liên kết với màn hình trình
duyệt WAP, chờ quá trình tải xuống và nhận thẻ của họ. Điều quan trọng là phải nắm
bắt mọi giai đoạn và trạng thái, vì nguyên mẫu giấy là mô hình trải nghiệm người dùng
của chúng tôi rất chi tiết. 70
Hình 2-7: Màn hình theo luồng
5. Phần và nội dung
Từng phần của ứng dụng được rút ra chi tiết (Hình 2-8). Điều này cho phép chúng
tôi bắt đầu khám phá nội dung. Ví dụ, những gì người dùng sẽ mong đợi khi họ xem
hình nền cho của họ? Họ muốn nhìn thấy 20 thẻ trên màn hình cùng một lúc hay chỉ 9
thẻ? Những vấn đề thiết kế nào nêu lên dựa trên thiết kế trực quan, sự tương tác, quan
điểm tiếp thị và quan điểm của nhà điều hành mạng? Mỗi quyết định thiết kế cần đáp
ứng một số yêu cầu của các bên liên quan khác nhau. 6.
Thiết kế thay thế
Điểm mạnh chính của tạo mẫu giấy là khả năng so sánh các phương án thiết kế
(Hình 2 -9 ). Ở đây ví dụ cho thấy cách chúng tôi xem xét hai thiết kế cho các mục menu
Tùy chọn sẽ được hiển thị. Tạo mẫu bằng giấy cho phép chúng tôi so sánh hai thiết kế
và xem chúng cạnh nhau, trong bối cảnh của toàn bộ ứng dụng. Sau đó chúng tôi có thể
loại bỏ thiết kế kém hiệu quả hơn một khi quyết định được đưa ra để theo đuổi. 71
Hình 2-8 Phần và nội dung
Hình 2-9 Thiết kế thay thế
7. Các sự cố mạng điện thoại di động
Các sự cố di động (quá trình tải xuống, mất kết nối, v.v.) thường khó xem xét hơn
ở giai đoạn tạo mẫu giấy. Hành vi mạng có thể ít được dự đoán hơn như các yêu cầu nhà
thiết kế muốn. Chúng tôi mong muốn đạt được trải nghiệm người dùng tốt nhất trong
khi được các chuyên gia mạng nói rằng họ không thể đảm bảo tốc độ tải xuống, v.v.
Điều quan trọng đối với chúng tôi là xem xét các vấn đề mạng sẽ có đối với trải nghiệm
người dùng tổng thể ở giai đoạn đầu của thiết kế này.
Ví dụ: người dùng đang duyệt một giao diện người dùng đồ họa và xem các hình
nền của Manchester United được cung cấp. Quá trình kết nối và tải xuống của hình nền
đã chọn có ảnh hưởng gì đến trải nghiệm chung của họ với sản phẩm? Người dùng có
phải chờ kết nối được thực hiện không? Sau đó, họ có phải chờ đợi lâu để tải xuống?
Mỗi giai đoạn mất bao lâu? Thời gian kết hợp của họ có tác động gì? Chúng ta có cần
nhắc người dùng về những gì đang xảy ra hoặc nó xảy ra nhanh chóng? Chúng ta có thể
dự đoán khoảng thời gian sẽ mất không? Chúng ta có cần thiết kế các tùy chọn khác
nhau cho từng tình huống không? 72
Hình 2-10 Các sự cố mạng
8. Thời gian chờ của người dùng / Phản hồi của người dùng
Nếu chúng tôi cần người dùng làm gì đó hoặc đợi quá trình hoàn tất, chúng tôi cần cung
cấp phản hồi và hộp thoại rõ ràng trên màn hình để chúng tôi quản lý sự mong đợi của
người dùng. Chúng ta cần vạch ra bất kỳ thời gian chờ đợi đáng kể nào của người dùng,
xem xét cách cung cấp phản hồi và từ ngữ sử dụng để trải nghiệm người dùng được trơn
tru và nhất quán nhất có thể.
9. Tính nhất quán điều hướng
Lập bản đồ toàn bộ ứng dụng cho phép chúng tôi thiết kế các mô hình điều hướng phù
hợp, trên toàn ứng dụng. Điều này có nghĩa là giao diện người dùng sẽ nhất quán về
ngoại hình, từ ngữ và hành vi bất kể phần, khu vực nội dung, v.v. Nói chung, các vấn đề
điều hướng cho ứng dụng di động sẽ bao gồm:
- Nhãn và từ - được sử dụng trong menu và trên màn hình - Phím cứng - trên bàn
phím được sử dụng để điều hướng.
- Phím mềm - ánh xạ tới nhãn từ trên màn hình thông qua hai phím cứng trái và phải.
- Menu Tùy chọn - hầu hết các giao diện người dùng điện thoại di động cung cấp
cho người dùng một bộ tùy chọn, được truy cập tại mỗi màn hình và phù hợp với
bối cảnh của màn hình đó. Đây là một yếu tố quan trọng mà chúng tôi xem xét
trong tạo mẫu giấy. Chúng tôi sử dụng cách tiếp cận để đảm bảo rằng từ ngữ, vị
trí trong danh sách mục và các yếu tố khác phù hợp trên tất cả các menu trong
giao diện người dùng ứng dụng.
- Sử dụng phím 'Quay lại' - đây có thể là trên màn hình dưới dạng phím chức
năng hoặc phím cứng trên bàn phím. Đây là một trong những vấn đề điều hướng
quan trọng nhất đối với người dùng 'làm cách nào để tôi quay lại màn hình?' 73
Hình 2-11. Thời gian chờ đợi và phản hồi của người dùng
10. Phương pháp thiết kế trực quan
Ở đây trong ví dụ của Manchester United, chúng ta có thể thấy các nhà thiết kế
hình ảnh đã tạo ra các thiết kế màn hình ban đầu như thế nào. Được tạo ra một cách
nhanh chóng, họ có thể thêm một mức độ chi tiết khác cho các nguyên mẫu giấy và
mang lại tính chân thực cho khái niệm trong quá trình thiết kế. Các cân nhắc về thiết kế
như kiểu chữ, kích thước phông chữ, kích thước màn hình và số đo pixel có thể được
giải quyết tại đây. Kích thước màn hình là một hạn chế lớn trong việc thiết kế cho các
ứng dụng di động, do đó, sử dụng hình ảnh pixel có thể hữu ích - ví dụ, trong việc xem
xét các tiêu đề 'Tin tức câu lạc bộ' được đề xuất có phù hợp với màn hình hay không.
Bản thân điều này có thể có ảnh hưởng đến trải nghiệm người dùng tổng thể do ảnh
hưởng đến khả năng đọc và truy cập vào thông tin tiêu đề nếu bị cắt ngắn. 74
Hình 2-12 Phương pháp điều trị thiết kế trực quan 2.4.2 Case study 2
“Thiết kế lại trang chủ website của Hubspot”
Trang chủ của HubSpot, được hơn 4 triệu người dùng truy cập mỗi tháng, phục vụ
hơn 18.000 công ty trên 90 quốc gia. Trang chủ của họ là lynchpin cho toàn bộ hệ sinh
thái trực tuyến của công ty. Vì vậy, khi công ty phát triển ồ ạt từ một công ty tư nhân
thành một tổ chức toàn cầu, đa sản phẩm, một thiết kế lại trang chủ đã được thực hiện.
Và nó cần phải xảy ra nhanh chóng, đúng lúc để phát hành một dòng sản phẩm hoàn
toàn mới tại sự kiện công nghiệp hàng năm của HubSpot, INBOUND, chỉ sau 1,5 tháng
kể từ khi khởi động dự án. Nhà thiết kế UX Austin Knight dẫn đầu dự án, được hỗ trợ
bởi một nhóm gồm ba người (nhà thiết kế hình ảnh, nhà phát triển và quản lý tiếp thị).
Ngoài đội ngũ trực tiếp, Knight còn làm việc với sáu người khác để định vị sản phẩm,
viết quảng cáo và phát triển kỹ thuật.
Hình 2-13: Trang chủ được thiết kế lại của Hubsport
Đây là câu chuyện về cách một nhà thiết kế áp dụng nghiên cứu tập trung, hợp tác
và tập trung vào khách hàng để đưa ra kết quả cuối cùng trong một lịch trình chặt chẽ.
1. Giai đoạn 1. Nghiên cứu sâu.
Trong trường hợp này, bước đầu tiên của công việc này là đi sâu vào phân tích và
nghiên cứu người dùng để nhanh chóng xác nhận các giả định. 75
Phân tích & Bản đồ heat
Không giống như một số quy trình mà một nhà phân tích tiếp thị có thể cung cấp
cho nhóm thiết kế những hiểu biết về dữ liệu web, Knight tự tìm hiểu dữ liệu. Lượng dữ
liệu khổng lồ đã có sẵn trong HubSpot, Google Analytics và Mixpanel. Thách thức chính
là sắp xếp thông qua dữ liệu để tiết lộ các mẫu có ý nghĩa.
Hình 2-14. Phân tích hành vi người dùng bằng công cụ phân tích dữ liệu Knight
phát hiện ra một số lượng đáng kể người dùng thể hiện các hành vi sau: •
Chuyển thẳng từ trang chủ sang định giá (không đủ tiêu chuẩn trước các lợi ích của sản phẩm) •
Chuyển thẳng từ trang chủ đến Câu hỏi thường gặp (báo hiệu họ không tìm thấy
câu trả lời cho câu hỏi của mình) •
Chuyển thẳng từ trang chủ sang trang tìm kiếm (thường là tìm kiếm các truy vấn
sản phẩm, nghĩa là họ không nhanh chóng nhận được thông tin họ cần).
Rõ ràng là, mặc dù có chiều sâu, trang chủ thiếu thông tin quan trọng làm giảm chuyển đổi.
Knight cũng kiểm tra các bản đồ heat và bản đồ cuộn được thực hiện với 25.000 người
dùng, cung cấp 467.308 điểm dữ liệu duy nhất. Khác nhau, từ vài năm trước cho đến
thời điểm hiện tại, các bản đồ đã giúp Knight hiểu thêm về việc xảy ra sự thảnh thơi,
bao gồm cả việc phát hiện ra rằng chỉ 25% người dùng sẽ cuộn trên trang chủ. 76
Hình 2-15 Bản đồ heat và bản đồ cuộn trang
Cuối cùng, bản ghi phiên người dùng đóng vai trò là nghiên cứu định lượng / định
lượng lại. Vì các bản ghi là trực tiếp, ẩn danh và không bị phát hiện, kết quả khá đáng
tin cậy vì chúng thể hiện hành vi của người dùng trong môi trường tự nhiên. Bản ghi
phiên chạy liên tục trong toàn bộ dự án thiết kế, cung cấp luồng dữ liệu để xác thực các
cuộc phỏng vấn người dùng và kiểm tra khả năng sử dụng.
Nghiên cứu định tính
Mặc dù nghiên cứu định lượng giúp bạn thấy được những gì mà Keith, nhưng nó
không phải lúc nào cũng tiết lộ về những lý do tại sao. Để đi sâu vào các động lực đằng
sau các yêu cầu về hành vi và UX, các nhà thiết kế cần phỏng vấn người dùng và các bên liên quan.
- Phỏng vấn khách hàng
Vì 10% lưu lượng truy cập trang chủ HubSpot bao gồm các khách hàng của
HubSpot đăng nhập hoặc tìm kiếm tài nguyên, thiết kế lại không thể bỏ qua một nhóm
người dùng có giá trị như vậy. Knight đã phỏng vấn khách hàng không chỉ để xác thực
các nguồn dữ liệu khác mà còn là cơ sở để xác định cách trang chủ mới có thể phân phối
nội dung động đến các phân khúc cụ thể. Sử dụng quy trình phỏng vấn người dùng
nghiệm ngặt trong các bước đặt câu hỏi và kết quả, ông đã thu thập được phản hồi từ người dùng. 77
- Phỏng vấn các bên liên quan
Vì dự án này thực sự sẽ thay đổi bộ mặt kỹ thuật số của HubSpot, Knight cũng đã
phỏng vấn lãnh đạo điều hành và các nhóm hỗ trợ sản phẩm, tiếp thị, bán hàng và hỗ trợ
khách hàng. Sau đó, anh ta đã tham khảo chéo các kết quả với phản hồi từ các cuộc
phỏng vấn của người dùng.
Hình 2-16: Bảng tài liệu thua thập
“Thiết kế lấy cảm hứng từ con người, lấy cảm hứng từ dữ liệu - đó là những gì chúng
tôi làm”, theo Knight. Các nhà thiết kế cần phải tự mình giải thích dữ liệu và chứng
minh khách quan các quyết định thiết kế của họ bất cứ khi nào có thể. Chúng tôi làm
việc trong một ngành công nghiệp nơi các nhà thiết kế làm việc dựa trên các dữ liệu định
lượng và định tính. Như vậy, chúng tôi thường không đưa ra quyết định dựa trên ý kiến
hoặc những gì ai đó 'thích'. Phép thuật thực sự của nhà thiết kế ngày nay là ở chỗ họ có
thể diễn giải dữ liệu ngầm và rõ ràng và chuyển đổi thông tin đó thành các giải pháp
thiết kế một cách chu đáo.
Cuối cùng, dựa trên tất cả các nghiên cứu ban đầu, Knight đã sớm có thể nhanh
chóng thiết kế một vài thay đổi để xác nhận bằng các thử nghiệm đa biến. Các thử
nghiệm đã giúp đủ điều kiện hoặc loại bỏ các yếu tố thiết kế cụ thể, sau đó sẽ ảnh hưởng
đến toàn bộ quyết định chiến lược của nhóm khi họ chuyển sang thiết kế lại trang chủ đầy đủ. 78
Hình 2-17: Sử dụng công cụ phân tích dữ liệu
Bước hai: Xây dựng thiết kế
- Tạo mẫu dung thử Lo-Fi
Khi nhóm quyết định ba biến thể chính, họ đã tạo ra các nguyên mẫu Lo-fi và thêm
độ trung thực khi cần để trình bày cho các bên liên quan để phản hồi. Khi một hướng
chính đã được chọn, Knight vẫn ở trong giai đoạn lo-fi cho nhiều lần lặp trước khi
chuyển sang thiết kế trực quan. Trên thực tế, các nguyên mẫu lo-fi có sự tương đồng
đáng kinh ngạc với sản phẩm cuối cùng, được dành toàn bộ thời gian để thu thập phản
hồi và hướng từ người dùng tại thời điểm quan trọng này. 79
Hình 2-18: Giao diện vẽ wireframe
Chúng tôi đã thử nghiệm với người dùng trong suốt, từ thử nghiệm các nguyên
mẫu giấy cho đến làm việc với các frame của chúng tôi và đến thiết kế hình ảnh, theo
Knight. “Tiếng nói của khách hàng đã có mặt trong suốt quá trình. Là một nhà thiết kế,
một ai đó nói thêm vào tai bạn là điều rất quan trọng. Nó không đưa ra tất cả các quyết
định cho bạn, nhưng nó giúp bạn tìm ra hướng đi của mình.”
Trong giai đoạn thiết kế hình ảnh, Knight đã làm việc chặt chẽ với nhà thiết kế
hình ảnh của mình.Cũng cần lưu ý rằng Knight đã thảo luận về thiết kế với nhà phát
triển của mình ở mỗi bước của quy trình. Mặc dù họ sẽ không bắt đầu mã hóa rộng rãi
cho đến khi tạo mẫu hi-fi, tất cả họ đều làm việc trên các tương tác xuyên suốt, đảm bảo
toàn bộ nhóm ở trên cùng một trang.
Nhóm nghiên cứu đã tạo ra một thiết kế hiện đại với màu sắc đậm, hình ảnh HD
và cấu trúc lưới điển hình. Cấu trúc lưới này được lấy cảm hứng từ sự cần thiết của trang
chủ mới để thể hiện một thiết kế trung thực. Cấu trúc mô đun, dựa trên lưới có tỷ lệ tốt
trên các thiết bị, nội dung có thể dễ dàng thay đổi hoặc di chuyển và các phần chính có
thể được cập nhật, với nội dung được lấy cảm hứng từ các đề xuất của các bên liên quan và người dùng. 80
Hình 2-19: Một yếu tố thú vị khác của cấu trúc lưới không điển hình là khung ảnh.
Nhóm đã chụp một bộ ảnh rất độc đáo để phù hợp hoàn hảo với cấu trúc, cho phép
trạng thái lơ lửng hiển thị phần ngoài tiêu cự của ảnh sẽ mở rộng ra thành phần lưới bên
phải khi di chuột, cho thấy hình ảnh đầy đủ và thông tin bổ sung. Việc xử lý ảnh đã trở
thành một yếu tố thiết kế đặc biệt và sự tương tác làm tăng đáng kể sự tham gia của
người dùng. Nhóm cũng phát triển nội dung động được cá nhân hóa cho người dùng,
được tiết lộ là một cơ hội lớn trong các cuộc phỏng vấn khách hàng sớm. Cuối cùng, do
16% người dùng HubSpot truy cập trang web qua thiết bị di động và hơn 19% dân số
Hoa Kỳ có nhu cầu truy cập cụ thể, các yếu tố tương thích và khả năng truy cập rất quan
trọng đối với thiết kế và được tính trong từng bước của quy trình, bao gồm cả mã.
Bước ba: Mã hóa và kiểm tra
Bước tiếp theo là xây dựng mã, sử dụng CMS riêng của công ty. Knight, nhà thiết
kế hình ảnh của anh ấy và nhà phát triển của anh ấy đã làm việc cùng nhau để đảm bảo
mã tương thích trên tất cả các thiết bị, QA kiểm tra các nguyên mẫu của họ một cách thường xuyên. 81
Hình 2-20: Mã code cho trang Hubsport
Nhóm đã thử nghiệm trang web trên các thiết bị và độ phân giải trong nhiều phiên
bản Chrome, Safari, Firefox, Internet Explorer, Edge, Opera và Yandex. Nhóm đã sử
dụng browserStack để mô phỏng trang web trên các thiết bị thực và vì họ biết rằng họ
có tỷ lệ phần trăm người dùng trên mỗi nền tảng, nên họ có thể ưu tiên sửa lỗi theo quy
mô và mức độ quan trọng của đối tượng.
Bước bốn: Kiểm tra và lặp lại liên tục
Trang web mới đã đi vào hoạt động, theo kế hoạch, trên sân khấu tại INBOUND,
khởi đầu là các sản phẩm và tính năng mới được xây dựng để hỗ trợ đã được công bố
bởi những người đồng sáng lập của công ty. Buổi ra mắt là một thành công lớn.
Nhóm đã tham chiếu chéo dữ liệu trang web trực tiếp trong Google Analytics và
HubSpot, chú ý đến các số liệu sau: • Tỷ lệ chuyển đổi • Tỷ lệ nộp • Tỷ lệ rơi • Hoàn thành mục tiêu •
Tóm tắt điều hướng (trang gốc và trang đích) • Truy vấn cụ thể. 82
Nhóm chỉ kiểm tra các số liệu phù phiếm như tỷ lệ thoát và thời gian trên trang để
tạo bối cảnh cho các KPI cốt lõi được đề cập ở trên. Để tiếp tục tối ưu hóa thiết kế, nhóm
đã chạy thử nghiệm bản đồ nhiệt nhiều hơn (25.000 người dùng trong nhiều phiên) và
nhiều thử nghiệm khả năng sử dụng hơn.
Hình 2-21 Dùng bản đồ Heat map để đánh giá lại trang chủ 2.5 Bài tập
1. Bạn hãy cho biết vai trò của các pha chính trong quy trình thiết kế tương tác?
2. Bạn hãy cho biết những trường hợp nào sử dụng mô hình đơn giản?
3. Bạn hãy cho biết những trường hợp nào sử dụng mô hình thác nước?
4. Bạn hãy cho biết những trường hợp nào sử dụng mô hình RAD?
5. Bạn hãy cho biết những trường hợp nào sử dụng mô hình xoắn ốc?
6. Bạn hãy cho biết những trường hợp nào sử dụng mô hình ngôi sao?
Chương 3. CÁC KỸ THUẬT TRONG THIẾT KẾ TƯƠNG TÁC
Chương 2 đã giới thiệu các pha chính trong quy trình thiết kế tương tác. Tuy nhiên
trong mỗi pha đều có rất nhiều công việc cần thực hiện. Các công việc giữa các pha có
liên quan đến nhau ở nhiều giai đoạn. Không những vậy thiết kế tương tác còn liên quan
rất nhiều đến giai đoạn phát triển sản phẩm. Dưới đây là sơ đồ mô hình tổng quát về các
kỹ thuật trong thiết kế và phát triển sản phẩm đa phương tiện tương tác. Sơ đồ này cũng 83
chỉ ra được các mối liên quan giữa các công việc, giữa pha thiết kế và pha phát triển phần mềm tương tác.
Hình 3-1: Các kỹ thuật trong thiết kế và phát triển sản phẩm Đa phương tiện tương tác
Nội dung chương 3 sẽ giới thiệu về các kỹ thuật trong thiết kế tương tác, giúp các
bạn có thể hiểu và nắm rõ công việc cần làm.
3.1 Xác định yêu cầu (Indentifying needs and Establishing requirements)
Xác định yêu cầu là công việc đầu tiên mà người thiết kế cần nắm được khi bắt tay
vào một dự án. Yêu cầu này không chỉ là từ phía doanh nghiệp, và cần tìm hiểu các yêu
cầu từ phía người dùng. Thông thường doanh nghiệp chỉ đưa cho bạn những yêu cầu từ
mục tiêu kinh doanh của họ. Họ chưa thực sự hiểu được người dùng của họ muốn gì, 84
cần gì từ sản phẩm của họ. Hoặc thậm chí là họ cũng có dữ liệu của người dùng (khách
hàng của họ), nhưng họ không biết sẽ cần đưa cho bạn thông tin gì. Công việc của người
thiết kế là cần hiểu biết rõ ràng về người dùng sẽ tham gia vào sự hoạt động của sản phẩm, hệ thống.
Trong nội dung phần này không đề cập đến việc sẽ xác định yêu cầu từ doanh
nghiệp như thế nào. Vì họ sẽ nói cho bạn biết một cách rõ ràng về mục tiêu của họ, và
những gì họ muốn, ngay cả những mục tiêu về doanh thu từ sản phẩm, hay những mục
tiêu về lượng người dùng mong muốn. Phần này chỉ đề cập đến các kỹ thuật để bạn có
thể tìm hiểu được người dùng và nhu cầu của họ.
Thu thập yêu cầu là quá trình phát hiện và làm rõ hơn các tư liệu, đề xuất ban đầu
từ phía doanh nghiệp. Thu thập yêu cầu là làm sáng tỏ nhu cầu người dùng và định tên
các yêu cầu một cách chắc chắn. Kết quả của thu thập yêu cầu là:
− Thể hiện vấn đề với hệ thống hiện tại. Người dùng gặp phải những khó khăn gì với hệ thống này?
− Thể hiện yêu cầu của hệ thống mới. Hệ thống mới có thể giải quyết được các
vấn đề của hệ thống hiện tại hay không?
Yêu cầu của hệ thống có thể được xem xét theo:
− 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 để xử lí trong hệ thống.
− Các yêu cầu về môi trường như môi trường vật lý, xã hội, tổ chức, kỹ thuật
trong ngữ cảnh sử dụng của người dùng.
− Các yêu cầu của người dùng liên quan đến kỹ năng, khả năng của người dùng.
− Các yêu cầu về suy nghĩ và tâm lý của người dùng.
3.1.1 Xác định đối tượng người dùng
Trước khi tiến hành thu thập thông tin chúng ta cần xác định đúng đối tượng người
dùng để khai thác. Thiết kế tương tác đòi hỏi sản phẩm phải hỗ trợ các nhu cầu, phù hợp
với mong muốn và mở rộng khả năng cho người dùng. Xác định người dùng là ai và
những gì họ muốn đạt được là một khởi đầu để tìm ra các yêu cầu thiết kế.
Có thể phân ra nhiều loại người dùng như sau:
− Những người tương tác trực tiếp với sản phẩm để đạt được nhiệm vụ
− Những người quản lý trực tiếp người sử dụng khác 85
− Những người nhận được sản phẩm từ hệ thống −
Những người kiểm tra hệ thống
− Những người đưa ra quyết định mua sản phẩm
− Những người sử dụng các sản phẩm cạnh tranh Eason
(1987) xác định ba mức độ người dùng:
− Mức độ quan trọng: Là những người sử dụng sản phẩm thường xuyên và trực tiếp
− Mức độ bình thường: là những người thỉnh thoảng sử dụng hoặc sử dụng thông qua một lớp trung gian.
− Mức độ yếu: là những người bị ảnh hưởng bởi sự ra đời của sản phẩm như quảng cáo, giá thành.
Vấn đề ở đây là có một tập hợp tất cả những người có liên quan đến đến sự phát
triển của sản phẩm mà chúng ta cần phải xác định. Nhóm người liên quan cho một sản
phẩm cụ thể sẽ lớn hơn nhóm người sử dụng mà chúng ta hay nghĩ đến.
Ví dụ, hãy xem xét ứng dụng lịch điện tử. Xem xét đến 1 người sử dụng, khi đó
những người liên quan đến sản phẩm này sẽ bao gồm những người có trong cuộc hẹn,
những người có ngày sinh mà bạn cần nhớ, và thậm chí là cả công ty sản xuất lịch giấy.
Vì khi lịch điện tử ra đời, khiến cho những công ty này bị cạnh tranh, và buộc họ phải hoạt động khác.
Hệ thống các bên liên quan khá rộng, tuy nhiên chúng ta không cần phải tiếp cận
đến tất cả. Điều quan trọng là phải nhận thức được các tác động lớn hơn của bất kỳ sản
phẩm bạn đang phát triển. Xác định các bên liên quan, chúng ta sẽ biết được ai tham gia
vào sử dụng sản phẩm và ở mức độ nào.
3.1.2 Các phương pháp thu thập dữ liệu
Người thiết kế không phải là người sẽ sử dụng sản phẩm, nhà thiết kế cần phải hiểu
các yêu cầu của người khác. Công việc này không phải là dễ dàng, có thể là một buổi
nói chuyện, một cuộc phỏng vấn, quan sát mọi người và ghi lại các hoạt động của họ, tổ
chức các buổi hội thảo, …Tất cả những công việc này sẽ giúp các nhà thiết kế phải hiểu
các yêu cầu đối các thiết kế mới và những vấn đề của con người với cách làm hiện tại.
Bằng cách thu thập dữ liệu nhà thiết kế sẽ có cơ sở dữ liệu lớn cho việc phân tích công việc. 3.1.2.1 Phỏng vấn
Các cuộc phỏng vấn có thể được coi như là một "cuộc trò chuyện có một mục đích"
(Kahn và Cannell,1957). Làm thế nào để cuộc phỏng vấn diễn ra như một cuộc trò 86
chuyện bình thường và khai thác được thông tin phụ thuộc vào câu hỏi và các loại
phương phát phỏng vấn được sử dụng. Có 3 loại chính của một cuộc phỏng vấn: không
có cấu trúc (sử dụng các câu hỏi mở), cấu trúc (sử dụng các câu hỏi đóng), bán cấu trúc
(kết hợp 2 loại câu hỏi trên). Các cách tiếp cận thích hợp nhất để phỏng vấn phụ thuộc
vào mục tiêu và mô hình. Ví dụ, nếu mục tiêu là để đạt được những ấn tượng đầu tiên
về cách người dùng phản ứng với một ý tưởng thiết kế mới, chẳng hạn như là một tương
tác mới, thì phương pháp tốt nhất là phỏng vấn không có cấu trúc. Nhưng nếu mục tiêu
là để có được thông tin phản hồi về một tính năng thiết kế đặc biệt, chẳng hạn như cách
bố trí của một trang web mới, thì một cuộc phỏng vấn có cấu trúc là tốt hơn.
Khi phát triển các câu hỏi phỏng vấn, lập kế hoạch để giữ chúng ngắn, đơn giản và tránh
đòi hỏi quá nhiều. Dưới đây là một số hướng dẫn (Robson, 1993):
− Tránh các câu hỏi dài, vì nó rất khó nhớ.
− Tránh dùng câu ghép, nên tách chúng thành hai câu hỏi riêng biệt. Ví dụ, thay vì đặt
một câu hỏi: "Bạn thích những điểm nào trong chiếc điện thoại này hơn so với
chiếc điện thoại bạn đã từng sử dụng?” Thì chúng ta có thể hỏi “Bạn thích chiếc
điện thoại này ở điểm nào? Chiếc điện thoại bạn đã từng sở hữu có đặc điểm đó
không? Nếu vậy, bạn có thích nó hơn không?”. Điều này là dễ dàng hơn cho người
trả lời và dễ dàng hơn cho người phỏng vấn để ghi lại.
− Tránh sử dụng các thuật ngữ và ngôn ngữ mà người được phỏng vấn có thể không
hiểu. Vì họ có thể hiểu nhầm câu hỏi của bạn hoặc ngại hỏi lại.
− Tránh các câu hỏi chung chung, Ví dụ như "Tại sao bạn thích phong cách thiết kế
này?”, người trả lời sẽ không rõ phong cách bạn muốn nói đến là gì.
− Tránh những thành kiến trong tiềm thức, luôn đặt ý kiến trung lập cho câu hỏi của bạn.
Tuy nhiên phỏng vấn có nhược điểm đó là tốn nhiều thời gian, và không phỏng
vấn được nhiều người. Như vậy số mẫu phỏng vấn sẽ không được nhiều. 3.1.2.2 Đặt câu hỏi
Bảng câu hỏi là một kỹ thuật tốt được để thu thập dữ liệu và ý kiến của người sử
dụng. Chúng tương tự như các cuộc phỏng vấn và có thể có câu hỏi đóng hoặc mở. Kỹ
năng cần thiết để đảm bảo rằng câu hỏi này được diễn đạt rõ ràng và các dữ liệu thu thập
được có thể được phân tích một cách hiệu quả. Các câu hỏi trong bảng câu hỏi, và những
người sử dụng trong một cuộc phỏng vấn có cấu trúc là tương tự. Tuy nhiên một lợi thế
bảng câu hỏi là họ có thể được phân phối cho một số lượng lớn người dân. Sử dụng theo 87
cách này, họ cung cấp bằng chứng về quan điểm chung rộng. Mặt khác phỏng vấn có
cấu trúc rất dễ dàng và nhanh chóng để thực hiện trong những tình huống.
Các câu hỏi được gửi dưới dạng điện tử thông qua email hoặc được đăng trên một
trang web, và đôi khi chúng được in ra giấy và phát cho nhiều người. Việc trả lời những
câu hỏi được thực hiện ở một khoảng cách xa, nghĩa là không có ai giúp họ trả lời, cũng
như giải thích ý nghĩa về câu hỏi. Do đó việc xây dựng một bảng câu hỏi hoàn toàn khó
khăn và tốn thời gian. Người viết phải có nhiệm vụ và kỹ năng để đưa ra những câu hỏi
rõ ràng và tránh sự hiểu lầm đối với người trả lời.
Nhiều câu hỏi bắt đầu bằng cách yêu cầu thông tin cá nhân cơ bản (ví dụ, giới tính,
tuổi) và chi tiết về kinh nghiệm người dùng (ví dụ, thời gian và số năm sử dụng máy
tính, trình độ chuyên môn, vv). Thông tin cơ bản này là hữu ích trong tìm ra những phạm
vi trong nhóm mẫu. Ví dụ, một nhóm người đang sử dụng web lần đầu tiên có khả năng
bày tỏ ý kiến khác nhóm có kinh nghiệm sử dụng web. Khi biết phạm vi mẫu, một nhà
thiết kế có thể phát triển hai phiên bản khác nhau hoặc chuyển hướng về phía các nhu
cầu của một trong các nhóm khác vì nó đại diện cho các đối tượng mục tiêu. Sau những
câu hỏi tổng quát, câu hỏi cụ thể góp phần vào việc đánh giá mục tiêu được yêu cầu.
Nếu câu hỏi dài, các câu hỏi có thể được chia vào các chủ đề có liên quan để làm cho nó
dễ dàng hơn và hợp lý hơn để hoàn thành.
Một số gợi ý khi làm bảng câu hỏi:
− Đặt câu hỏi rõ ràng và cụ thể
− Khi có thể, hãy hỏi những câu hỏi đóng và cung cấp một loạt các câu trả lời.
− Hãy suy nghĩ về việc sắp xếp các câu hỏi. Thứ tự các câu hỏi có thể tác động đến
câu trả lời. Nên đặt các câu hỏi chung chung trước các câu hỏi cụ thể − Tránh hỏi
nhiều câu hỏi phức tạp.
− Các câu hỏi không được chồng chéo lên nhau.
− Tránh sử dụng tiếng lóng và câu hỏi phải dễ hiểu, xem xét sử dụng các phiên bản
khác nhau của câu hỏi cho các đối tượng khác nhau.
− Bảng câu hỏi càng ngắn thì càng tốt, bảng câu hỏi quá dài sẽ ngăn cản sự tham gia của người trả lời. Các dạng câu hỏi:
− Check box và phạm vi: Câu hỏi dạng check box là cung cấp câu trả lời lựa chọn. Ví
dụ như hỏi giới tính, có hai sự lựa chọn là nam hay nữ. Tuy nhiên một số người
không thích trả lời chính xác, chúng ta có thể cung cấp một phạm vi cho câu trả 88
lời của họ. Ví dụ độ tuổi của bạn 34 – 39; 40 – 49; 50 – 59. Chú ý tránh những dãy
chồng chéo (15-20; 20-25) sẽ gây nhầm lẫn.
− Mô hình Likert (1932) đã đưa ra một số phương pháp lấy ý kiến và yêu cầu người
trả lời đưa ra quyết định ở 5 thang điểm: ● Hoàn toàn đồng ý ● Đồng ý ● Trung lập ● Không đồng ý ● Rất không đồng ý
− Thang đối lập: được sử dụng ít hơn Likert. Sử dụng một cặp các thái độ lưỡng cực.
Người tham gia được yêu cầu xác định một vị trí trong thang đánh giá giữa hai thái
cực. Điểm số trong thang đánh giá được tìm thấy bằng cách tổng hợp cho mỗi cặp lưỡng cực.
Tỷ lệ trả lời câu hỏi có giá trị thực sự để có thể rất thấp (có thể dưới 10%) nếu
người được hỏi không có ý định đóng góp vào thiết kế sản phẩm hoặc không có sự kích
thích (ví dụ như tham gia sẽ được bốc thăm trúng thưởng). Cuối cùng, phân tích các dữ
liệu đòi hỏi phải suy nghĩ và có thời gian. Ví dụ tính năng A được chọn 5/7 nhưng tính
năng B được chọn 6/7 thì điều đó có nghĩa là tính năng B sẽ tốt hơn A không? Có thể
tính năng A đã bị hiểu lầm, nếu không có câu hỏi tiếp theo thì dữ liệu khó phân tích.
Điều này dễ dàng xử lý trong phỏng vấn, vì người được hỏi có cơ hội bày tỏ ý kiến về cấu trúc câu hỏi. 3.1.2.3 Nhóm mục tiêu
Là một phương pháp tập hợp mọi người thành một nhóm để thảo luận về các vấn
đề yêu cầu. Thông thường từ 3 – 10 người tham gia. Những người tham gia được lựa
chọn để cung cấp một mẫu đại diện điển hình người sử dụng, có những đặc điểm nhất
định. Ví dụ, trong đánh giá của một trang web của trường, một nhóm các nhà quản lý,
giảng viên và sinh viên có thể được gọi để hình thành ba nhóm tiêu riêng biệt, vì họ sử
dụng web cho các mục đích khác nhau. Thường thì câu hỏi đặt ra cho các nhóm có vẻ
đơn giản nhưng ý tưởng là để cho phép họ đưa ra ý kiến của mình trong một môi trường.
Nhưng buổi hội thảo này có thể có cấu trúc thảo luận hoặc có thể không có cấu trúc. Sẽ
có một người dẫn dắt cuộc thảo luận, khuyến khích mọi người tham gia. Họ có thể được
yêu cầu mô tả cách họ phối hợp để quản lý các hoạt động. Các thành viên của nhóm có
thể kích thích trí nhớ của nhau và thảo luận một cách tự nhiên hơn. Các cuộc thảo luận 89
thường được ghi lại và phân tích sau. Ưu điểm của nó là nhanh chóng thu thập được
nhiều dữ liệu. Nhược điểm là khó khăn tập trung được số lượng người tham gia.
Một hoạt động quan trọng của tập trung nhóm là động não. Một buổi động não nên
được tổ chức vui vẻ để tham gia. Hoạt động cũng yêu cầu một số tác nhân kích thích
như hình ảnh, văn bản hoặc video để có những ý tưởng. Những người tham gia sẽ cần
một số cách ghi những suy nghĩ và ý tưởng của họ; một tấm bảng, flip chart, giấy và bút
màu. Sau đó ghi chú trong các màu sắc khác nhau có thể nắm bắt ý tưởng. Một điều
quan trọng trong hoạt động động não là không nên bỏ qua những ý tưởng ban đầu, nên
bắt đầu bằng bất cứ điều gì. Tạo ra nhiều ý tưởng. Những sau đó có thể được lọc khi
nhìn nhận và phân tích thực tế. Tập trung nhóm thông qua những hội thảo hoặc khóa
học có thể tìm ra được những điểm đồng thuận và xung đột từ góc nhìn của nhiều người. 3.1.2.4 Quan sát tự nhiên
Quan sát các hoạt động của con người xảy ra một cách tự nhiên. Phỏng vấn và đặt
câu hỏi cung cấp một mặt của câu truyện, nhưng rất khó để mô tả được các khía cạnh
liên quan đến cuộc sống hàng ngày hoặc công việc. Quan sát liên quan đến chi tiêu một
số thời gian và không gian khi họ quan sát trong khung cảnh tự nhiên của nó. Những
người thiết kế luôn ghi chép, đặt ra những câu hỏi và quan sát những gì đang được thực
hiện trong bối cảnh tự nhiên của hoạt động.
Trong các hoạt động thu thập dữ liệu, quan sát là phương pháp rất tốt cho sự hiểu
biết về bản chất các nhiệm vụ và các nội dung mà họ đang thực hiện. Tuy nhiên, nó đòi
hỏi nhiều thời gian và cam kết từ một thành viên của đội ngũ thiết kế, và nó có thể dẫn
đến một lượng lớn dữ liệu. Điều này được thực hiện tốt nhất sau khi có một số dữ liệu
phỏng vấn ban đầu, vì vậy bạn có một số ý tưởng cho những gì mà bạn cần quan sát. Lý
tưởng nhất là bạn cần phải nhìn thấy một phạm vi của các biến thể trên các hoạt động
bình thường và các tình huống nơi mà mọi thứ đi sai, nhưng điều này có thể không thực
hiện được trong nhiều tình huống. Nếu bạn đủ may mắn để có thể lựa chọn những gì bạn
quan sát, sau đó, cũng giống như với các cuộc phỏng vấn, thời gian để dừng lại là khi
không có thông tin mới xuất hiện. Như trong các cuộc phỏng vấn, ghi chú cần được thực
hiện và quay video là rất hữu ích, đặc biệt đối với chia sẻ các quan sát với các thành viên nhóm khác thiết kế.
Quan sát cũng phải dựa trên kỹ năng riêng của mỗi người, vì sự xuất hiện của bạn
không tự nhiên sẽ có xu hướng làm cho mọi người thay đổi hành vi của họ.
3.1.2.5 Nghiên cứu tài liệu
Các thủ tục và quy tắc được viết trong các hướng dẫn sử dụng là nguồn tài liệu tốt
để khai thác dữ liệu. Những tài liệu không nên sử dụng đó là những tài liệu không rõ 90
nguồn gốc. Tài liệu khác có thể được nghiên cứu bao gồm nhật ký hoặc các bản ghi công
việc trong quá trình họ làm việc.
Nghiên cứu tài liệu tại nơi làm việc đã trở thành yêu cầu thực hành rộng rãi nhất
trong phương pháp có hỗ trợ của máy tính. Lý tưởng nhất, các nhiệm vụ cần liên quan
đến làm việc với các giấy tờ, tài liệu trên mạng hoặc một số đồ tạo tác hữu hình khác.
Bảng 3-1: Tổng quan về các kĩ thuật thu thập dữ liệu trong khi thu thập nhu cầu người dùng. Kĩ thuật Tốt cho
Loại dữ liệu Ưu điểm Nhược điểm
Trả lời các câu hỏi Dữ liệu định Với nhiều người Khó thiết kế. các chuyên sâu.
tính và định dùng, mà không trả lời có thể Câu hỏi lượng. tốn kém. muộn, không chính xác. Thể hiện.
Hầu như định Có thể hướng dẫn Tốn thời gian. Phỏng
tính, đôi khi người dùng, động Môi trường có vấn định lượng. viên thể khiến người dùng rụt rè. Thu thập nhiều
Hầu như định Nhanh chóng thu Nhóm tập Khó khăn trong quan điểm.
tính, đôi khi thập được nhiều việc tập hợp số trung và định lượng. dữ liệu lượng người hội thảo tham gia
Hiểu ngữ cảnh và Định tính.
Quan sát công việc Tốn thời gian, dữ Quan sát hoạt động của
thực sự, mà kĩ liệu khá lớn. tự nhiên người dùng. thuật khác không làm được. Định tí Làm việc hàng Nghiên Học về thủ tục, nh. Không xác định cứu được thời gian. tư qui định và ngày. liệu chuẩn. 3.2 Personas
Personas là công việc xây dựng một người dùng hư cấu, đại diện cho các nhóm
người dùng của dự án. Những đặc điểm của người dùng này đều dựa trên những không
tin khảo sát trong quá trình xác định yêu cầu. Những bảng Personas sẽ được sử dụng
trong toàn bộ quá trình làm thiết kế. Vì thiết kế UX là thiết kế lấy người dùng làm trung
tâm, nên người thiết kế cần suy nghĩa đến người dùng ở mọi giai đoạn thiết kế. Personas 91
như một bảng tóm tắt về người dùng để người thiết kế có thể nhìn vào mỗi khi thiết kế.
Nội dung một bản persona cơ bản thường có là:
- Tên, tuổi, giới tính, hình ảnh cá nhân
- Lý lịch: công việc của họ là gì? Mô tả trách nhiệm và vấn đề chính trong công
việc. Trình độ học vấn và kinh nghiệm sử dụng công nghệ của họ. Cũng có thể
nói đến mối quan hệ xã hội như lập gia đình hay chưa? Họ có những trách nhiệm
nào khác ngoài công việc của họ.
- Cảm xúc và thái độ: thái độ của họ với công việc, thông tin như thế nào, tích cực hay tiêu cực,..
- Đặc điểm cá nhân: có thể mô tả bất kỳ đặc điểm cá nhân nào có thể ảnh hưởng
đến dự án, ví dụ như người đó là người nhanh nhẹn, nhạy bén
- Nhu cầu: Những nhu cầu của nhân vật này có thể được giải quyết bởi dự án này
là gì? Tại sao chúng phát sinh? Những nhu cầu này có mâu thuẫn với các yêu cầu
phát sinh từ các vai trò khác không?
- Các chi tiết khác phù hợp với sản phẩm: ví dụ như một tình huống mà nhân vật
gặp phải, cách họ giải quyết tình huống đó. Họ có sợ hãi điều gì đó không? Họ
mong muốn có gì đó giúp họ giải quyết được tình huống này…
Hình 3-2: Ví dụ về một persona 92
3.3 Phân tích nhiệm vụ
Dựa trên kết quả thu thập được từ nhu cầu người dùng, chúng ta cần vạch ra những
chức năng chính cho ứng dụng hay những tương tác cho sản phẩm. Những chức năng
chúng ta đã dự tính trước, nhưng kết quả khảo sát cho thấy, người dùng không có nhu
cầu sử dụng nó thì có thể bỏ qua. Những chức năng được người dùng quan tâm đến,
hoặc phát sinh trong quá trình nghiên cứu thì sẽ đưa vào phân tích. Các thông tin về khả
năng sử dụng, tương tác người dùng và sản phẩm thu thập được sẽ được sử dụng để phân
tích các nhiệm vụ, hành động cho mục tiêu đặt ra.
Chúng ta hoàn toàn có thể xác định được các mục tiêu của người dùng khi họ sử
dụng sản phẩm. Họ luôn có lý do và mong muốn đạt được một kết quả nào đó khi sử
dụng sản phẩm. Để đạt được các mục tiêu đó, người dùng cần phải thực hiện các nhiệm
vụ với sản phẩm. Phân tích nhiệm vụ sẽ cho người thiết kế thấy rõ ràng hơn các hành
động của người dùng trên sản phẩm. Việc phân tích nhiệm vụ trong thiết kế tương tác nhằm vào:
- Phân biệt giữa mục đích, nhiệm vụ và các hoạt động;
- Phân tích nhiệm vụ thực hiện của người dùng, nhằm tìm hiểu cách thức mà
người dùng hiểu công việc hay cái đích phải thực hiện, các đối tượng mà
người dùng sẽ thao tác trên đó và những kiến thức mà họ cần có để thực hiện
nhiệm vụ đạt được mục đích mong muốn.
3.3.1.1 Phân tích mục đích, nhiệm vụ và các hành động
Mục đích là trạng thái hệ thống người ta muốn đạt được. Một đích có thể được thực
hiện bởi một số công cụ, phương pháp, tác nhân, chỉ thị, kĩ thuật, kĩ năng hay thiết
bị cho phép thay đổi trạng thái hệ thống.
Nhiệm vụ là các hoạt động cần thiết đáp ứng mục đích bằng thiết bị cụ thể. Nhiệm
vụ là tập có cấu trúc của các hoạt động, là cái con người nghĩ hay thực hiện để đáp ứng mục đích.
Hành động là nhiệm vụ không cần giải quyết vấn đề, không cần thành phần có cấu
trúc điều khiển. Nó là các bước cụ thể hoặc tương tác để hoàn thành nhiệm vụ.
Ví dụ: Một website thư viện cho phép người dùng tự lập phiếu mượn sách.
Mục đích: Tạo được phiếu mượn sách
Các nhiệm vụ và hành động cần thực hiện là: Nhiệm vụ Hành động Tìm kiếm sách
Nhìn vào danh sách và chọn sách 93
Đưa sách vào phiếu mượn sách
Click vào nút “mượn sách”
Cung cấp thông tin mượn sách
Nhập các thông tin trong phiếu mượn sách Xác nhận mượn sách Bấm vào nút xác nhận
3.3.1.2 Phân tích nhiệm vụ
Phần lớn các kỹ thuật phân tích nhiệm vụ đều sử dụng một số dạng của phân rã
nhiệm vụ để biểu diễn các hành vi. Phân tích nhiệm vụ phân cấp ( Hierarchical Task
Analysis – HTA) là một cách tiếp cận với đầu ra là một cây phân cấp các nhiệm vụ con
và kế hoạch miêu tả trình tự và điều kiện thực hiện nhiệm vụ. Mục tiêu của người dùng
sẽ được đánh số 0 và là gốc của sơ đồ cây. Các nhánh của cây sẽ là những nhiệm vụ và
hành động mà người dùng cần thực hiện để đạt được mục đích của họ. Để đạt được mục
đích, người dùng sẽ phải thực hiện các kế hoạch (plan), đó là những chuỗi các hành động
của người dùng. Việc đánh số các nhiệm vụ không nói lên thứ tự thực hiện mà để phân
biệt các nhiệm vụ. Các kế hoạch được đánh số gán theo tên của các nhiệm vụ. Kế hoạch
thể hiện trình tự thực hiện các hành động.
Xem xét ví dụ “nhiệm vụ lập phiếu mượn sách trong thư viện” và áp dụng việc
phân rã nhiệm vụ thực hiện bằng đồ họa như Hình 3-3. Số 0 được dùng để đánh cho mục
đích “lập phiếu mượn sách”.
− Plan 0: Thực hiện các bước 1, 2, 3, 4
− Plan 1 và Plan 3 là kế hoạch phân rã nhiệm vụ thực hiện cho nhiệm vụ 1 và nhiệm vụ 3.
− Plan 1: Người dùng có thể chọn chuyên mục thuộc thể loại sách mình muốn
mượn để tìm ra cuốn sách mong muốn bằng các bước 1.1; 1.4. Trong trường
hợp, người dùng xác định rõ và nhớ được tên cuốn sách cần tìm, thì chỉ cần
nhập từ khoá vào ô tìm kiếm bằng cách thực hiện 1.2; 1.4. Trong trường
hợp, người dùng chưa xác định rõ tên cuốn sách cần mượn, có thể tìm kiếm
bằng bộ lọc bằng cách thực hiện 1.3; 1.4
− Plan 3: Thể hiện rõ hơn các bước của nhiệm vụ 3, thực hiện 3.1; 3.2; 3.3 94
Hình 3-3. Cấu trúc phân cấp chức năng việc mượn sách trong thư viện
Quá trình thực hiện nhiệm vụ có thể phụ thuộc vào điều kiện, do vậy có thể biểu
diễn nó dưới dạng rẽ nhánh, lặp và chờ đợi (Hình 3-4).
Hình 3-4. Phân cấp chức năng login
Việc phân tích nhiệm vụ này đòi hỏi người thiết kế cần có hình dung cơ bản về
giao diện tương tác. Kỹ thuật này cần có sự kết hợp từ kỹ thuật vẽ phác thảo ý tưởng
(Concept model). Người thiết kế chỉ sử dụng giấy và bút để thực hiện vẽ phác thảo ý
tưởng. Phân tích nhiệm vụ sẽ là cơ sở để người phân tích phần mềm xây dựng sơ đồ use
case của hệ thống phần mềm. Do vậy giai đoạn này người thiết kế và người phát triển
phần mềm cần làm việc với nhau để xây dựng những chức năng của hệ thống. 95 Hình 3-5. Use case
Trong khi HTA liên quan đến việc phân tích các nhiệm vụ mà người dùng cần phải
thực hiện để đạt được mục tiêu của họ, thì một loại phân tích nhiệm vụ khác lại tập trung
vào hành động mà người dùng sẽ thực hiện để đạt được mục tiêu của họ. Những hành
động đó đề xuất phát từ các mục tiêu. Phân tích nhiệm vụ nhận thức (Cognitive task
analysis – CTA) liên quan đến việc cung cấp cho quá trình thiết kế xuyên suốt ứng dụng
về lý thuyết nhận thức. Phân tích nhiệm vụ nhận thức nhận thấy rằng một số hoạt động
là hoàn toàn vật lý như nhấn phím, di chuyển con trỏ, một số khác lại có tính suy nghĩ
hoặc các thao tác nhận thức, thí dụ như quyết định phím nào sẽ được nhấn, con trỏ phải
chuyển đến vị trí nào trên màn hình.
CTA là một phần mở rộng của phương pháp phân tích nhiệm vụ HTA, giải thích
về kiến thức, tiến trình tư tưởng và cấu trúc mục tiêu làm cơ sở thực hiện nhiệm vụ. Từ
CTA, chúng ta có thể nhận được đầu vào cho thiết kế giao diện hệ thống, thiết kế thủ
tục và quy trình của một hệ thống cụ thể, phân bổ các chức năng hệ thống.
Bằng cách mô hình hóa nhận thức nhiệm vụ, các nhà thiết kế sẽ không gặp phải
khó khăn trong việc nhớ lại các thủ tục trong tâm trí của họ. Một kỹ thuật phân tích
nhiệm vụ theo nhận thức được áp dụng trong thiết kế tương tác là mô hình GOMS (Goals
– Operator – Methods – Selection rules)
− Mục tiêu: đề cập đến một trạng thái đặc biệt mà người dùng muốn đạt được.
− Vận hành: là những hành động mà người sử dụng thực hiện.
− Phương pháp: là một chuỗi các các bước mà người dùng sẽ vận hành để để hoàn thành mục tiêu. 96
− Quy tắc lựa chọn được sử dụng để xác định phương pháp lựa chọn khi có nhiều hơn một lựa chọn.
Hình 3-6: Mô hình GOMS
3.4 Kịch bản sử dụng (Scenarios)
Scenarios là công việc mô tả kịch bản tương tác của người dùng trên sản phẩm.
Với một nhiệm vụ, cùng một đối tượng người dùng nhưng trong các ngữ cảnh khác nhau
có thể có những tương tác khác nhau với sản phẩm. Chính vì vậy người thiết kế cần hình
dung các tình huống sử dụng và đưa ra những giải pháp thiết kế. Ví dụ như một người
đàn ông muốn mua một đĩa CD trực tuyến, và có thể giao hàng vào đúng ngày sinh nhật
của mình. Kịch bản cần nhiều thứ chi tiết hơn như: ai, cái gì, khi nào, ở đâu, tại sao và
như thế nào về người dùng khi họ sử dụng sản phẩm.
Kịch bản có thể được sử dụng như một phương tiện tương tự như Phân tích nhiệm
vụ để hình thành tầm nhìn chung cho dự án. Nó sẽ làm rõ hơn những hành động của
người người dùng trong một tình huống cụ thể để đạt được mục tiêu của họ. Trong xây
dựng kịch bản chúng ta cần hình dung ra các ngữ cảnh khác nhau về người dùng, những
gì họ gặp phải và hệ thống có thể giúp họ giải quyết vấn đề đó như thế nào.
Chúng ta xem xét lại ví dụ về hệ thống cho phép người dùng có thể tạo những
phiếu mượn sách trong thư viện. Chúng ta có thể có rất nhiều tình huống xảy ra khi họ
tìm một cuốn sách để mượn. 97
Tình huống 1: Dan Welks là sinh viên ngành Đa phương tiện của một trường Đại
học. Khi anh ta được giảng viên giới thiệu một cuốn sách có thể giúp anh ấy học tốt hơn.
Dan nhớ rằng tên cuốn sách là “understand user”. Anh đã vào hệ thống thư viện của
trường để tìm cuốn sách và lập phiếu mượn.
Tình huống 2: Dan Welks đang muốn tìm hiểu về lĩnh vực UX design, anh cần
tham khảo một số cuốn sách để học. Anh đã vào hệ thống thư viện của trường để tìm
cuốn sách và lập phiếu mượn.
Tình huống 3: Trong thời gian học tập và nghiên cứu Dan Welks thấy có rất nhiều
cuốn sách của nhà xuất bản O’Reilly, anh muốn tìm thêm một vài cuốn sách của nhà
xuất bản này. Anh đã vào hệ thống thư viện của trường để tìm cuốn sách và lập phiếu mượn.
Với 3 tình huống sử dụng khác nhau nhưng có cùng một mục tiêu, đó là Dan Welks
có thể tìm được cuốn sách mà mình mong muốn. Hệ thống không thể cung cấp duy nhất
một phương thức tìm kiếm cho cả 3 tình huống. Vì ở 3 tình huống sử dụng này, người
dùng có những dữ liệu đầu vào khác nhau và kinh nghiệm khác nhau. Chính vì vậy thiết
kế cần đáp ứng cho người dùng những phương thức tìm kiếm phù hợp nhất, đảm bảo khả năng sử dụng.
Ví dụ mô tả kịch bản cho Nhiệm vụ Tìm kiếm sách Tên Nhiệm vụ Tìm kiếm sách Người dùng Đọc giả Mục đích
Người dùng tìm kiếm thông tin sách thành công Tiền điều kiện
Hệ thống trong trạng thái đã được đăng nhập Tình huống
Người dùng đã xác định được tên sách
Mô tả các bước + Người dùng chọn khu vực tìm kiếm (biểu tượng tìm kiếm), sau đó nhập từ khoá tìm kiếm
+ Hệ thống tìm kiếm hiển thị danh sách các cuốn sách có tên giống như những từ khoá được nhập vào. Hậu điều kiện
Hiển thị danh sách sách người dùng cần tìm Ngoại lệ
+ Không tìm thấy sách, hệ thống hiển thị thông báo không có kết quả nào cho tìm kiếm sách Tên Nhiệm vụ Tìm kiếm sách Người dùng Đọc giả Mục đích
Người dùng tìm kiếm thông tin sách thành công Tiền điều kiện
Hệ thống trong trạng thái đã được đăng nhập Tình huống
Người dùng chưa xác định được tên sách
Mô tả các bước + Người dùng chọn chuyên mục thể loại sách mình muốn đọc
+ Duyệt danh sách hiển thị Hậu điều kiện
Hiển thị danh sách sách người dùng cần tìm Ngoại lệ
+ Không tìm thấy sách, hệ thống hiển thị thông báo không có kết quả nào cho tìm kiếm sách 98 Tên Nhiệm vụ Tìm kiếm sách Người dùng Đọc giả Mục đích
Người dùng tìm kiếm thông tin sách thành công Tiền điều kiện
Hệ thống trong trạng thái đã được đăng nhập Tình huống
Người dùng xác định được một số thông tin về cuốn sách
Mô tả các bước + Người dùng chọn tìm kiếm sách, sau đó nhập thông tin sách (tên sách/ tác giả/ thể loại/nhà
xuất bản/năm xuất bản) và xác nhận
+ Hệ thống tìm kiếm thông tin sách và hiển thị danh sách các cuốn sách phù hợp với yêu cầu tìm kiếm. Hậu điều kiện
Hiển thị danh sách sách người dùng cần tìm Ngoại lệ
+ Không tìm thấy sách, hệ thống hiển thị thông báo không có kết quả nào cho tìm kiếm sách
+ Người dùng để trống một số thông tin tìm kiếm, Hệ thống hiển thị danh sách sách
3.5 Thiết kế kiến trúc thông tin
Kiến trúc thông tin là việc tổ chức các thông tin và mối quan hệ giữa các thông tin
giúp cho người dùng có thể dễ dàng tìm được thông tin mà họ mong muốn. Do đó kiến
trúc thông tin cần thể hiện được đối tượng và nội dung, mô tả một cách rõ ràng về những
thông tin đó và cung cấp cách người dùng có thể tìm thấy thông tin dựa trên kiến trúc
thông tin này. Kiến trúc thông tin cũng giúp người thiết kế có thể tổ chức các giao diện
trong hệ thống và các nội dung sẽ trình bày trên các giao diện đó.
Các dữ liệu của nội dung sẽ được phân cấp và tổ chức dưới các nhóm, nhóm con
và được liên kết với nhau nhờ các điều hướng. Các siêu dữ liệu của các nội dung sẽ được
mô rả chi tiết để mô tả cho các đối tượng trên sản phẩm phần mềm. 99
Hình 3-7. IA được mô tả trong các nhóm, nhóm con và các siêu dữ liệu của nội dung
3.5.1 Mô hình hoá đối tượng (Object model)
Làm thiết kế kiến trúc thông tin tốt, chúng cần phải là người có sự hiểu biết và
những ý tưởng về nội dung. Chúng ta cần xác định nội dung chi tiết hơn, suy nghĩ về
những gì bạn cận cung cấp và ưu tiên, lên kế hoạch trình bày những thông tin đó trên
giao diện. Xác định nội dung chi tiết không thực sự là khó nhưng nó rất quan trọng.
Chúng ta cần nghĩ về nó và làm thế nào để nó có thể sử dụng được. Một số công việc
cần làm đó là xác định đối tượng mà người dùng sẽ tương tác với hệ thống, những thuộc
tính liên quan đến những đối tượng đó, và mối quan hệ giữa các đối tượng. Công việc
này được gọi là Object model
- Xác định đối tượng: Ví dụ trên trang web của thư viện, người dùng là đọc giả sẽ
tương tác với các đối tượng là sách, tác giả, nhà xuất bản, …. Đó chính là những
đối tượng mà một người sẽ tương tác, họ sẽ tìm kiếm một cuốn sách, họ sẽ đọc
thông tin về cuốn sách,…
- Xác định thuộc tính của đối tượng: Phân mảnh nhỏ một đối tượng ra thành nhiều
mảng thông tin, và xác định rõ tính chất, định dạng của mỗi thuộc tính đó. Ví dụ
một cuốn sách thì có các thuộc tính là Tên sách, mã sách, Tên tác giả, tên nhà
xuất bản, năm xuất bản, phần giới thiệu về cuốn sách, tác hashtag của cuốn sách.
- Xác định các mối quan hệ giữa các đối tượng: Người dùng có thể tương tác với
nhiều đối tượng, và các đối tượng đó không phải là rời rạc, chúng đều có một mối 100
quan hệ nào đó với nhau. Ví dụ Đối tượng Sách có quan hệ với đối tượng là Tác giả, nhà xuất bản.
Khi xác định nội dung, có những đối tượng có thể phân mảnh gọi là nội dung có
cấu trúc, cũng có những đối tượng không thể phân mảnh được gọi là không có cấu trúc.
Nội dung có cấu trúc là chúng ta có thể phân tách thành nhiều mục nhỏ. Khi nhìn vào
mỗi mục đó có thể chỉ ra những thứ khác cũng giống như vậy. Ví dụ như một bài tin tức
thường được chi nhỏ thành “Tiêu đề bài viết”, “tóm tắt bài viết” “tác giả bài viết”, “Hình
ảnh đại diện cho bài viết”, “Nội dung chi tiết bài viết”. Trong khi đó những nội dung phi
cấu trúc là nơi mà mỗi mục trong các trang khác nhau sẽ có cấu trúc khác nhau, ví dụ
như bài giới thiệu. Ví dụ như Hình 3-8
Hình 3-8. Ví dụ về nội dung có cấu trúc và không cấu trúc
Ví dụ về một bảng phân tích đối tượng Đối tượng Sách 101 Các thuộc - Tên sách: Text tính - Mã sách: Text - Bìa sách: Image - Tác giả: Text - NXB: Text - Năm xuất bản: Date - Giới thiệu: Paragraph -
Thể loại sách: text - Hashtag Liên kết Tác giả, NXB Đối tượng Tác giả Các
thuộc - Tên Tác giả : Text - tính Giới thiệu: Text Liên kết Tên sách Đối tượng NXB Các thuộc - Tên NXB : Text - tính Giới thiệu: Text Liên kết Tên sách
Phân loại nội dung: loại đối tượng có thể có rất nhiều dữ liệu khác nhau. Việc tổ
chức thông tin có thể được tổ chức dưới nhiều dạng khác nhau. Thách thức của người
thiết kế kiến trúc thông tin đó là tìm ra cách phù hợp nhất với đối tượng người dùng, nội
dung và mục tiêu của dự án. Ví dụ sách có thể phân loại theo thể loại sách, Tin tức có
thể phân loại thời gian,.. Dưới đây là một số loại phân loại nội dung.
- Thời gian: Dựa trên thời gian để tổ chức các nhóm. Ví dụ như tin tức, lịch sử, danh
sách sự kiện. Thời gian là một thuộc tính quan trọng của nội dung. Hình 3-9, Hình 3-10.
- Alphabetic: Bạn có thể gán một nội dung vào các danh sách và đưa nó vào sơ đồ AZ,
điều này không có nghĩa là các chữ cái đều phải có nội dung bên trong. Một số dạng
có thể tổ chức dạng này đó là từ điển, tên, thuật ngữ. Ví dụ như Hình 3-11
- Địa lý: Đây là cách sắp xếp dựa trên vùng địa lý, không gian. Loại phân chia này có
thể được sử dụng cho các nội dung có các thuộc tính về địa lý là chính. Tuy nhiên
cần xem xét liệu rằng người dùng có muốn truy cập trông tin thông qua các vùng địa
lý hay không. Ví dụ như Hình 3-12. 102
- Định dạng: là một dạng tổ chức sắp xếp nội dung theo định dạng của tệp. Điều này
phổ biến trên các trang web hướng dẫn, bài viết. Ví dụ như trang “Learn How to
Diy” được chia thành các nhóm theo định dạng của sản phẩm. Hình 3-13
- Nhiệm vụ: bạn phải đưa vào các doanh mục theo các nhiệm vụ mà người dùng sẽ sử
dụng trên sản phẩm, sau đó gán nội dung cho chúng. Ví dụ như Hình 3-14
- Đối tượng/topic: Là loại phân loại phổ biến nhất, cần xác định chủ đề các nhóm và
những thứ tương tự nhau là gì để xác định tên cho các nhóm đó. Ví dụ như Hình 3- 15
Hình 3-9. Các sự kiện sắp tới sẽ được sắp xếp theo ngày
Hình 3-10. Lịch sử được trình bày theo chuỗi thời gian 103
Hình 3-11. Trang contact được sắp xếp theo bảng chữ cái
Hình 3-12. Phân loại thông tin theo vùng địa lý 104
Hình 3-13. Trang Learn How to D.I.Y được phân chia theo định dạng các loại hình
Hình 3-14. Ứng dụng kế toán được sắp xếp theo nhiệm vụ 105
Hình 3-15. Phân loại theo các nhóm 3.5.2 Kiến trúc thông tin
Sơ đồ kiến trúc thông tin là mô tả việc tổ chức thông tin trong một sản phẩm phần
mềm. Nó cho thấy các đối tượng trong sản phẩm và cách người dùng có thể tìm đến một
thông tin một cách dễ dàng nhất. Có một số loại tổ chức cấu trúc thông tin như sau:
- Kiến trúc phân cấp: được tổ chức dưới dạng phân cấp cây, có một trang là gốc
cây, sau đó được phân nhánh thành các nhánh nhỏ. Dạng này thường gặp trong kiến trúc website
Hình 3-16. Cấu trúc phân cấp
- Kiến trúc tuyến tính: các trang sẽ được thực hiện một cách tuần tự, lần lượt từ
trang này đến trang kia. Đây là dạng cơ bản cho một chuỗi các bước mà người 106
dùng cần thực hiện. Ví dụ như để hoàn thành xong khoá học, người dùng phải
trải qua các lesson 1, lesson 2, lesson 3 rồi đến tổng kết khoá học
Hình 3-17. Cấu trúc tuyến tính
- Cấy trúc dạng chuyên mục: đây là loại cấu trúc dạng cây kết hợp với dạng
database. Phần database thể thể hiện phần content của các chuyên mục được
biểu diễn giống nhau. Do vậy các trang chuyên mục khác nhau, nhưng trang
hiển thị nội dung chi tiết thì giống nhau. Ví dụ như trên các website thương mại
điện tử, người ta có thể chia thành các chuyên mục sản phẩm khác nhau. Nhưng
trang chi tiết sản phẩm là một.
Hình 3-18. Cấu trúc dạng Chuyên mục
- Kiến trúc hub: có một trang nằm ở trung tâm, và từ đó có thể đi tới các trang
khác nhau. Dạng này thường phổ biến ở thiết kế ứng dụng có nhiều tính năng khác nhau.
Hình 3-19. Cấu trúc dạng Hub 107
3.6 Thiết kế ý tưởng (concept design)
Thiết kế phác thảo ý tưởng là có liên quan tới chuyển các yêu cầu người sử dụng
vào một mô hình tổng quát. Thiết kế phác thảo là mô tả đề xuất hệ thống thiết lập các ý
tưởng và khái niệm về hệ thống nên làm thế nào, xử lý thế nào và tìm kiếm thế nào để
người dùng dễ sử dụng. Từ những yêu cầu và kinh nghiệm, một bức tranh về những gì
bạn muốn người sử dụng trải nghiệm về sản phẩm mới sẽ được xuất hiện. Ví dụ, tìm
kiếm thông tin, tạo ra các tài liệu, giao tiếp với người sử dụng khác, ghi sự kiện, hoặc
một số hoạt động khác.
Đây là một hoạt động quan trọng, vì nó tạo cảm giác ban đầu về thiết kế bố cục
màn hình trước khi quyết định những gì mà màn hình sẽ hỗ trợ. Nó sẽ được trình bày
dưới dạng một bản phác thảo với độ chính xác thấp cho các tổ chức và cấu trúc của giao
diện người dùng từ quan điểm của người thiết kế. Hệ thống bao gồm các nút bấm, các
khối dữ liệu, các liên kết. Mỗi khối dữ liệu đại diện cho một phần công việc của người
sử dụng và các chức năng của nó cần thiết để hoàn thành một nhiệm vụ. Các liên kết đại
diện cách người dùng sẽ di chuyển giữa các khu vực chức năng trong giao diện người dùng.
Thiết kế ý tưởng được sử dụng ngay ở giai đoạn đầu của thiết kế, để người thiết kế
có thể hình dung, và thể hiện ý tưởng của mình. Nó là công việc thực hiện xen kẽ trong
quá trình phân tích dữ liệu (phân tích nhiệm vụ, phân tích thông tin). Khi thiết kế tương
tác cần chú ý và quan tâm đến không gian thiết kế, hình thức tương tác, kịch bản tương tác.
- Không gian thiết kế:
Trong thiết kế tương tác 2D hoặc 3D đều phải có không gian, kể cả không gian kỹ
thuật số (màn hình) hay không gian vật lý. Đa số thiết kế tương tác kết hợp giữa không
gian kỹ thuật số và không gian vật lý. Ví dụ bạn thực hiện một cử chỉ trong môi trường
vật lý là xoay nút điều chỉnh trên hệ thống dàn âm thanh, bạn sẽ nhận được thông số kết
quả trên màn hình hiển thị (không gian kỹ thuật số). Và điều ngược lại là khi chuyển
một bản nhạc trên máy tính ra hệ thống dàn âm thanh, bạn sẽ được nghe âm thanh trong
trong môi trường vật lý.
Không gian thiết kế là không gian mà người dùng sẽ tương tác với nó. Do vậy
trước khi thiết kế, chúng ta cần xác định rõ những không gian mà người dùng sẽ tương
tác. Ví dụ như khi thiết kế một trang web, bạn cần xác định kích thước màn hình máy
tính để hiện thị nội dung của trang web. Trong khi đó nếu hiển thị trang web trên màn
hình của một chiếc điện thoại, không gian thiết kế sẽ nhỏ hơn rất nhiều so với màn hình
máy tính, nó sẽ ảnh hưởng đến nội dung hiển thị trên trang web. Điều đó khiến người
thiết kế phải sắp xếp lại chúng sao cho phù hợp với một thiết bị màn hình nhỏ (Hình 3- 108
20). Ngoài ra chúng ta cũng cần quan tâm đến không gian vật lý như bàn phím, chuột, ngón tay…
Hình 3-20: Không gian thiết kế
- Hình thức tương tác: Xác định những hình thức tương tác là phương pháp tìm
những tương tác thích hợp nhất cho sản phẩm. Hình thức tương tác liên quan tới
cách người sử dụng hành động khi tương tác với thiết bị. Trong chương 1 cũng đã
nói đến một số dạng tương tác. Khi phác thảo ý tưởng thiết kế, ngoài việc mô tả ra
hình dạng của sản phẩm, thì chúng ta cũng cần lựa chọn các dạng tương tác và mô
tả những tương tác đó.
- Kịch bản tương tác: trong phần phân tích ở phía trên, chúng ta cũng đề cập đến
kịch bản tương tác. Phác thảo ý tưởng cũng cần được phác thảo theo kịch bản.
Người ta còn gọi nó là vẽ Storyboard. Sử dụng hình ảnh để mô tả tương tác theo
kịch bản (Hình 3-21). Storyboard giúp người thiết kế có thể mô tả rõ hơn về những
tương tác giữa người dùng trên giao diện sản phẩm. Storyboard bao gồm một chuỗi
các màn hình giao diện, dưới mỗi màn hình có thể mô tả nhiệm vụ của mỗi giao
diện, các giao diện được trình bày theo luồng, trên mỗi giao diện có mô tả một
cách cụ thể và rõ ràng về các hành động của người dùng và các dạng tương tác. 109 Hình 3-21: Storyboard
Đặc điểm của thiết kế ý tưởng
− Tối thiểu chi tiết: có thể loại trừ một số đối tượng mà không phải là trung tâm của
thiết kế. Ví dụ như có thể bỏ qua các chỉ số Pin, trạng trái hệ thống,…
− Giới hạn chất lượng: Nội dung màn hình có thể không hoàn hảo và có thể có chất
lượng "thô". Tránh xử lý hình ảnh; tập trung vào các nhiệm vụ trọng tâm, tính năng và quy trình làm việc.
− Công cụ vẽ thiết kế ý tưởng chủ yếu là dùng giấy và bút. Giấy và bút có thể nó là
một công cụ thô sơ, nhưng nó mang lại giá trị trong việc biết những gì người dùng
suy nghĩ thành hình ảnh. Cũng có một số công cụ trên máy tính để vẽ phác thảo ý
tưởng, tuy nhiên nó sẽ hạn chế là làm mất nhiều thời gian hơn và hạn chế khả năng
sáng tạo của con người.
3.7 Thiết kế vật lý
Thiết kế vật lý liên quan đến việc xem xét cụ thể hơn như sử dụng biểu tượng gì,
cấu trúc menu như thế nào, sử dụng hình ảnh gì, màu sắc ra sao,…Thiết kế vật lý là thể
hiện chi tiết giao diện người dùng, cảm nhận của sản phẩm.
Phần lớn các chi tiết của thiết kế vật lý là về thị giác, các khía cạnh của thiết kế
giao diện. Các thiết kế của giao diện làm trung gian cho sự tương tác của con người với
các thiết bị là một đặc tính quan trọng của thiết kế tương tác tổng thể. Điều này thường
được gọi là giao diện người dùng (UI) và nó bao gồm tất cả mọi thứ trong hệ thống mà 110
mọi người tiếp xúc, cho dù đó là thể chất, về mặt nhận thức hay khái niệm. Thể chất con
người tương tác với các hệ thống trong nhiều cách khác nhau, chẳng hạn như bằng nhấn
nút, chạm vào một màn hình, di chuyển chuột để nó di chuyển một con trỏ trên màn
hình, nhấp chuột vào một nút trên con chuột, lăn ngón tay cái trên một bánh xe cuộn.
Ngoài ra còn có các giác quan khác như qua âm thanh và xúc giác.
Con người về mặt nhận thức tương tác với một hệ thống thông qua những gì họ có
thể nhìn thấy, nghe thấy và chạm vào. Các khía cạnh hình ảnh của thiết kế giao diện
quan tâm đến việc mọi người sẽ nhìn thấy và nhận ra những điều gì trên một màn hình.
Những nút bấm cần phải đủ lớn để nhìn thấy và chúng cần phải được dán nhãn một cách
dễ hiểu cho mọi người. Hướng dẫn cần được đưa ra để mọi người biết những gì họ đang
dự kiến sẽ làm. Hiển thị lớn lượng thông tin cần phải được xem xét một cách cẩn thận
để mọi người có thể nhìn thấy mối quan hệ giữa các dữ liệu để hiểu được ý nghĩa của nó.
3.7.1 Ngôn ngữ thiết kế
Ngôn ngữ thiết kế là một tập hợp các yếu tố thiết kế, các mối quan hệ giữa các yếu tố và
những nguyên tắc thiết kế.
− Các yếu tố thiết kế: Từ ngữ, icon, màu sắc, hình khối, âm thanh, chuyển động, cử
chỉ, kích thước, đường nét…
− Các mối quan hệ: Khu vực chứa các yếu tố, bố cục giao diện, sự ngăn cách giữa các
yếu tố, mức độ ưu tiên các yếu tố, những vùng lân cận, sự lặp lại, căn chỉnh, sự liên tục…
− Các nguyên tắc thiết kế: sự rõ ràng, phối cảnh thiết kế, mục đích thiết kế, sự thích thú, sự bất ngờ, …
Ví dụ như Error! Reference source not found. chúng ta thấy trên một sản phẩm
sẽ có những lable, những icon có hình dạng khác nhau, màu sắc của chúng. Và tại sao
chúng lại có hình dáng như vậy, tại sao chúng lại có màu sắc như thế. Bởi vì những yếu
tố này cần được liên kết với nhau, tạo nên sự ảnh hưởng lẫn nhau, đó là ý đồ của người
thiết kế. Những mối quan hệ giữa các yếu tố này sẽ tạo nên hình ảnh cho sản phẩm.
Trong ví dụ này các icon trên thanh bar dưới cùng của trang để biểu diễn cho tên các
trang. Trong số các icon đó có icon “search” là được làm đậm hơn. Vì nó muốn thể hiện
một dấu hiện nhận biết rằng người dùng đang ở một trang được xuất phát từ trang
“search”. Hình ảnh icon và phong cách icon đó kết hợp với nhau chính là mối quan hệ
giữa các yếu tố, nó được xây dựng dựa trên nguyên tắc thiết kế là sự nhấn mạnh. 111
Hình 3-22: Ngôn ngữ thiết kế trong giao diện
Một ngôn ngữ thiết kế phù hợp có nghĩa là mọi người chỉ cần học một số lượng
hạn chế các yếu tố thiết kế và sau đó họ có thể đối phó với một lượng lớn các tình huống
khác nhau. Ngôn ngữ thiết kế là cách người thiết kế xây dựng ý nghĩa cho các đối tượng,
cho phép mọi người hiểu những điều cần làm và phân biệt giữa khác nhau loại đối tượng.
Ngôn ngữ thiết kế giúp đảm bảo tính minh bạch, giúp mọi người hiểu những gì đang
xảy ra bên trong một thiết bị. Họ cũng có khả năng liên thông các kiến thức từ một thiết
bị khác. Ví dụ, người sử dụng của một điện thoại Nokia thông thường có thể mong đợi
tìm thấy thiết kế tương tự trên một điện thoại khác. Điều này cũng có nghĩa là mọi người
sẽ thấy dễ dàng hơn để sử dụng một thiết bị hoặc chức năng và sẽ mong đợi những hành
vi nhất định, cấu trúc hoặc chức năng. Cuối cùng, người ta sẽ xác định với một phong
cách, giúp xác định danh tính của họ, chúng hoạt động thông qua các ngôn ngữ thiết kế.
Hình 3-23 cho thấy ngôn ngữ thiết kế của Apple, nó đã tạo nên sự nhất quán trong mọi
sản phẩm của hãng Apple. 112
Hình 3-23 : Ngôn ngữ thiết kế của Apple
3.7.2 Một số nguyên tắc thiết kế
− Sắp xếp các nút gần nhau: Một trong những nguyên tắc Gestalt của nhận thức là
quan sát các đối tượng xuất hiện gần nhau trong không gian hoặc thời gian có xu
hướng để được cảm nhận với nhau. Sự hữu ích của luật này có thể được nhìn thấy
trong 2 ví dụ sau. Hình 3-24 là một tiêu chuẩn hộp cảnh báo Microsoft Windows
XP với các nút khoảng cách bằng nhau. Hình 3-25 có chức năng tương đương với
Mac OS X. Các phiên bản Mac được thiết kế cho sử dụng rõ ràng hơn. Các nút
“Cancel” và nút “Save” được nhóm với nhau và tách khỏi nút “Don’t Save” một
cách rõ ràng. Cả Apple và Microsoft đều có hướng dẫn thiết kế và môi trường phát
triển để đảm bảo rằng các thiết kế phù hợp với các tiêu chuẩn họ đang nhắm tới. 113
Hình 3-24 Khoảng cách các nút bấm bằng nhau trong Windows XP
Hình 3-25 Các nút bấm được tổ chức với luật gần nhau trong Mac OS X
− Sắp xếp các file có tính tương đồng: Luật thứ hai của Gestalt, con người sẽ dễ dàng
cảm nhận sự sắp xếp với những hình dạng tương tự nhau. Hình 3-26 là một cửa sổ
chứa các tập tin. Ở hình bên trái cho thấy các tập tin được sắp xếp thành các khối
liền kề có cùng tính chất là các tập tin PowerPoint, trong khi đó ở hình bên phải thì trái ngược lại.
Hình 3-26: Tổ chức file với tính chất tương tự
− Đóng khung: Luật này đề cập đến vấn đề con người sẽ dễ dàng cảm nhận được đối
tượng trong khu vực khép kín hơn là trong khu vực mở. Hình 3-27 là ví dụ về việc
sử dụng quy tắc đóng khung trong ứng dụng Finder trên Mac OS X. Nó cung cấp
một cái nhìn rõ ràng về sự phân cấp từ các ổ đĩa ở phía bên trái sang những tập tin
ở phía bên phải. Có thể sử dụng màu nền hoặc các đường nét để đóng khung các
khối nội dung. Việc đóng khung các khu vực sẽ khiến người dùng dễ dàng tập
trung vào những nội dung mục tiêu, và không bị nhầm lẫn sang các khu vực khác.
Xem ví dụ Hình 3-28 về các khối nội dung trên trang Amazon được phân biệt bởi
màu sắc và các đường nét. 114
Hình 3-27: Cửa sổ new Finder trong Mac OS X
Hình 3-28: Các khu vực nội dung khác nhau trên trang Amazon
− Bộ nhớ ngắn hạn: George Miller (1956) thấy rằng bộ nhớ ngắn hạn được giới hạn
chỉ có 7 ± 2 khối thông tin. Nguyên tắc này đã được sử dụng trong HCI để cho
thấy rằng menu nên được giới hạn khoảng bảy khối thông tin, hoặc thanh điều
hướng Web nên có bảy liên kết.
− Nhóm các khối thông tin thành một đối tượng lớn hơn. Đây là cách hiệu quả của
việc giảm tải bộ nhớ. Một ví dụ về nhóm các yếu tố có ý nghĩa cho một nhiệm vụ
vào một khu vực thể hiện trong Hình 3-29. Trong hộp thoại chỉ bao gồm 4 tùy
chọn (font chữ, căn chỉnh, biên giới và thiết lập tài liệu). Các biểu tượng cho thấy 115
có thể mở rộng các lựa chọn. Trong mỗi lựa chọn này được mở rộng sẽ có một số các tùy chọn liên quan.
Hình 3-29: Trước và sau khi nhóm các hộp thoại
− Tạo sự tập trung: nên nhấn mạnh những thông tin quan trọng. Hình 3-30 cho thấy
nút “OK” được nhấn mạnh. Nó mang ý nghĩa “chấp nhận lời thông báo”.
Hình 3-30: Ví dụ về một hộp thông báo
- Nguyên tắc sử dụng màu sắc: màu là rất quan trọng đối với thiết kế giao diện. Thiết
kế màu sắc vào các hệ thống tương tác là rất khó khăn. Tại sao những nút bấm
trong Hình 3-31 lại sử dụng màu đỏ và màu xanh? Chúng ta có thể kiểm tra bảng
ý nghĩa màu sắc Bảng 3-2: Bảng quy ước màu ở các nước phương tây cho thấy
màu xanh có nghĩa là được phép, màu đỏ có nghĩa là sự nguy hiểm cần phải cẩn
thận. Do đó người ta dùng màu xanh để thể hiện cho nút “start”, màu đỏ thể hiện cho nút “stop”. 116
Hình 3-31: Ví dụ về sử dụng màu trong thiết kế tương tác
Bảng 3-2: Bảng quy ước màu ở các nước phương tây Red (Màu đỏ) Nguy hiểm, nóng, lửa Yellow (Màu vàng)
Cẩn thận, chậm, kiểm tra Green (Màu xanh lá cây)
Đi, được, rõ ràng, thực vật, an toàn Blue (Màu xanh lam)
Lạnh, nước, bình tĩnh, bầu trời Màu nóng
Hành động, đáp ứng yêu cầu, khoảng cách gần Màu lạnh
Thông báo, thông tin nền, khoảng cách xa
Mà xám, màu trắng và màu đen Là những màu trung tính
Nguồn: Marcus, Graphic Design for Electronic Documents and User Interfaces, Table 14.1, p.84.
‘Some Western colour conventions’, © 1991 ACM Press. Reproduced by permission of Pearson Education, Inc.
3.7.3 Thiết kế giao diện
Thiết kế vật lý là cần tạo ra hình ảnh cụ thể của sản phẩm. Khác hàng có thể nhìn
thấy chi tiết hình dáng, màu sắc của nó trước khi sản phẩm được đưa vào phát triển. Do
vậy, thiết kế cần có độ chính xác cao. Hiện nay có rất nhiều công cụ để thiết kế tương
tác và thiết kế đồ hoạ. Công cụ thiết kế tương tác hỗ trợ tạo bố cục cho trang và các
tương tác, liên kết trên các trang. Công cụ đồ hoạ giúp tạo và chỉnh sửa các yếu tố đồ
hoạ như hình ảnh, icon, logo,.. 117
Trong thiết kế giao diện, chúng ta có thể phân ra làm hai giai đoạn thiết kế. Một là
thiết kế wireframe để dựng lên khung hình cho giao diện, bố cụ của các khối nội dung.
Hai là thiết kế GUI (graphic user interface) là tạo lên hình ảnh cho giao diện bao gồm
màu sắc, biểu tượng,…
Wireframe: là giai đoạn dựng lên khung hình của giao diện dựa trên phác thảo ý
tưởng trên giấy. Giai đoạn này người thiết kế sẽ sử dụng các công cụ thiết kế để dựng
lên khung hình của giao diện. Họ chưa cần quan tâm đến màu sắc hay hình ảnh gì sẽ sử
dụng trên giao diện. Họ chỉ cần quan tâm đến bố cục sắp xếp, vị trí sắp đặt các đối tượng
trên một giao diện, các nguyên tắc sắp xếp. Nó cũng như là giai đoạn xây thô của một giao diện người dùng.
Visual design (GUI): xem xét các chi tiết của sản phẩm bao gồm cả màu sắc, âm
thanh, và hình ảnh để sử dụng, thiết kế menu, và biểu tượng…. Giai đoạn này là làm cho
cho sản phẩm có tính thẩm mỹ để tạo sự thu hút tới người dùng. Người thiết kế cần có
kiến thức về mỹ thuật và kỹ năng thiết kế đồ hoạ.
Hình 3-32. Thiết kế giao diện người dùng
3.8 Xây dựng bản mẫu tương tác
Mẫu thử (Protoype) là bản mô phỏng một số chức năng của phần mềm. Nó có thể
là phác thảo trên giấy của một màn hình, nó có thể được ghi bằng một video để thực
hiện một nhiệm vụ, hay các mockup 3D, cũng có thể là một chập các ảnh chụp màn hình
được liên kết. Một mẫu thử cho phép các bên liên quan hình dung được tương tác của
sản phẩm, để đạt được một số kinh nghiệm sử dụng nó trong một khung cảnh thực tế,
và để khám phá những ý tưởng. Nó thực hiện với một mục đích là mô phỏng các kịch 118
bản sử dụng. Vì vậy, một mẫu thử là một đại diện hạn chế về một thiết kế cho phép
người dùng tương tác với nó và để khám phá sự phù hợp của nó.
3.8.1 Mẫu thử với độ trung thực thấp (Lo-fi Prototype):
Lo-fi Prototype là mẫu thử có hình dáng không giống với sản phẩm cuối cùng. Ví
dụ, nó có thể sử dụng vật liệu rất khác nhau như bìa caton, mẩu giấy thay vì màn hình
điện tử. Mẫu thử với độ trung thực thấp rất hữu ích bởi nó có xu hướng đơn giản, rẻ tiền
và nhanh chóng để sản xuất. Điều này cũng có nghĩa là nó nhanh chóng để sử đổi, nó hỗ
trợ cho việc thăm dò thiết kế và ý tưởng. Nó thường được sử dụng trong giai đoạn thiết
kế mô hình. Nhưng nguyên mẫu này thường sẽ không cần lưu trữ lại và cũng không
được tích hợp với sản phẩm cuối cùng. Trong đánh giá, người sử dụng có thể giả vờ để
thực hiện các nhiệm vụ bằng cách tương tác với các giao diện mô hình. Mẫu thử nghiệm
này cho thấy các nút chức năng, vị trí và nhãn của nó, hình dáng tổng thể của thiết bị,
nhưng không có cái gì trong số chúng làm việc thực sự. Mẫu thử này đủ để kiểm tra các
kịch bản sử dụng và quyết định bản thiết kế.
Lo-fi Prototype thường được gọi là Paper Prototype (Hình 3-33), vì chúng được làm từ
giấy là chủ yếu. Các vấn đề thực tiễn chính với thiết kế mẫu thử trên giấy như sau:
− Cứng cáp, không dễ bị rách: Vì các mẫu thử này có thể được sử lý bởi nhiều người,
và có thể sử dụng để cho nhiều người đánh giá, nên chúng cần phải có đủ độ cứng để tồn tại.
− Phạm vi: tập trung vào những vấn đề chính và các yếu tố then chốt.
− Hướng dẫn: Cần có sự cân bằng giữa việc thêm các chi tiết để đảm bảo đủ cho người
sử dụng các mẫu thử có thể sử dụng được mà không cần có sự hỗ trợ của người khác.
− Tính linh hoạt: Cần xác định các phần trên mẫu thử có thể thay đổi, điều chỉnh để
mọi người có thể xem và thiết kế lại, ví dụ bằng cách sử dụng các mảnh giấy ghi
chú để dán lên giao diện màn hình, thay vì vẽ trực tiếp trên giao diện. Người dùng
có thể di chuyển các yếu tố thiết kế xung quanh hoặc thêm các mục mới trên giao diện. 119
Hình 3-33: Paper Prototype
3.8.2 Mẫu thử với độ trung thực cao (Hi-fi Prototype):
Hi-fi Prototype là tạo mẫu sử dụng trong bản thiết kế cuối cùng. Nó tương tự như
thiết kế giao diện sản phẩm, nếu không quan tâm đến chức năng của sản phẩm thì nó nó
như sản phẩm cuối cùng. Ví dụ mẫu thử được xây dựng bằng hệ thống phần mềm được
phát triển trong Visual Basic có độ trung thực cao hơn là bản mockup trên giấy. Có một
số công cụ phần mềm sẽ hỗ trợ môi trường phát triển mạnh mẽ và đơn giản. Marc Rettig
(1994) lập luận rằng nhiều dự án nên sử dụng mẫu thử với độ trung thực thấp hơn là
mẫu thử với độ trung thực cao. Vì Hi – fi Prototype mất quá nhiều thời gian để xây dựng.
Những đánh giá trên bản hi-fi Prototype chủ yếu tập trung vào khía cạnh giao diện nhiều
hơn là tương tác. Các nhà thiết kế không muốn thay đổi thiết kế, vì họ đã mất nhiều giờ
để làm điều đó. Một mẫu thử hi-fi prototype có thể được đặt nhiều kỳ vọng. Chính vì
vậy nó không được sử dụng ở giai đoạn thiết kế mô hình. Nó thường được xây dựng khi
bản thiết kế vật lý đã được hoàn thiện. Nó được sử dụng cho mục đích marketing và bán hàng.
Hi-fi prototype có tính năng sau đây:
− Nó rất hữu ích để đánh giá chi tiết các yếu tố thiết kế chính (nội dung, hình ảnh,
tương tác, chức năng và phương tiện truyền thông) - ví dụ, hi-fi prototype có thể
được sử dụng trong các nghiên cứu khả năng sử dụng để xác định xem liệu mọi
người có thể học cách sử dụng hệ thống trong một khoảng thời gian nhất định.
− Đây là một giai đoạn quan trọng trong việc chấp nhận của khách hàng. Nó là dựa
trên bản thiết kế cuối cùng, đây là tài liệu mà khách hàng phải đồng ý trước khi
thực hiện phát triển sản phẩm. 120
Hi – fi Prototype là bản dùng thử với độ trung thực cao, do vậy nó yêu cầu cần có
độ chính xác. Nhà thiết kế có thể làm hỏng các bộ mẫu thử nếu không kiểm tra chi tiết
và thông qua những ý tưởng một cách rõ ràng. Một lỗi đơn giản như sai tên của sản
phẩm cũng có thể gây hậu quả lớn khi mang sản phẩm tới khác hàng. Một vấn đề khác
với hi-fi prototype là nó cho thấy một hệ thống có thể được thực hiện. Nó cần được thực
hiện bởi các phần mềm. Hiện nay cũng có nhiều phần mềm hỗ trợ tạo prototype, tuy
nhiên nó không phải là bản dùng miễn phí để có thể sử dụng cho học tập. Hình 3-34 mô
tả một phần mềm hỗ trợ tạo prototype, người thiết kế có thể thực hiện, kéo thả các yếu
tố thiết kế lên giao diện và tạo các liên kết giữa các trang.
Hình 3-34: Hi-fi Prototype
Bảng 3-3: Bảng so sánh ưu nhược điểm của lo-fi và hi-fi prototype Loại Ưu điểm Nhược điểm
Lo-fi Prototype Chi phí phát triển thấp
Giới hạn kiểm tra khả năng sử Sảm xuất nhanh chóng dụng
Đánh giá nhiều phiên bản thiết kế Không đặc tả được chi tiết thiết mô hình kế
Dễ dàng thay đổi bố cục giao
Giới hạn về điều hướng và luồng diện thông tin
Hi-fi Prototype Tương tác đầy đủ Chi phí cao Điều hướng rõ ràng
Tốn nhiều thời gian thực hiện
Nhìn giống sản phẩm cuối cùng Không hiệu quả trong đánh giá
Làm công cụ để marketing và bán thiết kế mô hình hàng 121
3.8.3 Ví dụ về phương pháp xây dựng mẫu thử trên giấy
Để xây dựng một bản paper prototype chúng ta sẽ thực hiện các bước sau:
− Bước 1: tạo các mẫu trên giấy. Cần xác định các khuôn màn hình chính cho các chức
năng, các khối nội dung sẽ xuất hiện trong quá trình tương tác, ví dụ như hộp thoại
thông báo, các nút bấm, các menu option,…
Hình 3-35: Các mẫu nội dung trên giấy
− Bước 2: Tổ chức các hình ảnh theo kịch bản. Chuẩn bị bản phác thảo kịch bản (story
board) và sắp xếp các mẫu giấy đã chuẩn bị ở bước 1 để chuẩn bị cho mô phỏng
tương tác giữa người và sản phẩm.
− Bước 3: Số hóa các màn hình bằng cách chụp ảnh hoặc quay lại tương tác theo kịch
bản. Mẫu thử được sử dụng để đánh giá tương tác cho sản phẩm ở giai đoạn thiết
kế. Một số nhóm thực hiện bằng cách cho người dùng hình dung và tương tác trên
các mô hình bằng giấy. Người thiết kế có trách nhiệm phải chuyển đổi các giao
diện và nội dung trên màn hình để người dùng hiểu được tương tác của sản phẩm.
Cũng có một cách khác là họ sẽ số hóa các mô hình giấy này bằng cách chụp ảnh
hoặc quay lại quá trình mô phỏng. Sản phẩm cuối cùng là video prototype. Video
này sẽ được gửi đến các bên liên quan để đánh giá sản phẩm. 122
Hình 3-36: Tổ chức các mẫu giấy thành kịch bản tương tác
Hình 3-37: Video prototype 3.9 Đánh giá
Đánh giá là việc xem xét, thử nghiệm một ý tưởng thiết kế, một phần của phần
mềm, một sản phẩm hay một dịch vụ để khám phá xem nó đáp ứng một số tiêu chí đặt
ra hay không. Đa số nhiều nhà thiết kế bỏ qua giai đoạn đánh giá. Họ cho rằng sản phẩm
của họ là tốt, hấp dẫn thì người khác cũng thấy vậy. Ngoài ra việc đánh giá sẽ khiến dự
án tăng chi phí và thời gian thực hiện. Nhưng đánh giá là quá trình rất quan trọng, vì
thiết kế không thể chắc chắn rằng phần mềm có thể sử dụng và có đáp ứng được mong
muốn của người dùng hay không.
Thiết kế là quá trình được thực hiện lặp đi lặp lại. Là một nhà thiết kế tương tác
hiệu quả đòi hỏi phải biết làm thế nào để đánh giá hệ thống ở các giai đoạn khác nhau
của phát triển. Hơn nữa, phát triển hệ thống theo cách này ít tốn kém hơn so với sửa 123
chữa các vấn đề được phát hiện sau khi hệ thống này được triển khai tới khách hàng
(Karat, 1993). Các nghiên cứu cũng cho thấy rằng đối với kinh doanh, đánh giá cho hệ
thống có khả năng sử dụng tốt là hấp dẫn (Dumas và Redish, 1999; Mayhew,1999) có
thể tránh được rủi ro. Lý tưởng nhất, đánh giá nên thực hiện trong suốt vòng đời thiết
kế, các kết quả đánh giá sẽ được gửi trở lại và sửa đổi thiết kế. Trong chương này sẽ tìm
hiểu các cách thức khác nhau để đánh giá sản phẩm ở các giai đoạn khác nhau của thiết
kế. Chúng ta cũng sẽ gặp lại một số kỹ thuật tương tự ở phần thu thập yêu cầu người
dùng, nhưng ở đây là sử dụng để thu thập dữ liệu cho mục đính đánh giá thiết kế. Chúng
ta cũng được biết đến sự khác nhau giữa một chuyên gia đánh giá, không có sự tham gia
trực tiếp của người dùng, và đánh giá nghiên cứu thực tế của hệ thống.
Trong cách thiết kế lấy người dùng làm trung tâm, đánh giá thiết kế được thực hiện
ngay từ những ý tưởng đầu tiên. Đánh giá diễn ra trong suốt quá trình thiết kế tương tác.
Tại các giai đoạn khác nhau. Các hình thức quán tưởng của hệ thống trong tương lai
cũng là rất quan trọng với những gì có thể được đánh giá. Lấy ý kiến phản hồi để thông
báo cho các thiết kế mô hình ban đầu. Các paper prototype rất nhanh chóng có thể giúp
đỡ quá trình đánh giá, hoặc các phần mềm nếu có thể được sản xuất nhanh chóng. Đánh
giá các sản phẩm đối thủ cạnh tranh hoặc các phiên bản trước của công nghệ cũng có
thể được đưa vào quá trình này. Các nhà thiết kế cũng phải đưa ra quyết định lựa chọn
giữa thiết kế khác nhau trong thời gian phát triển.
Cũng như thiết kế không nên giả định rằng tất cả mọi người đều giống mình, họ
cũng không nên đoán rằng sau hướng dẫn thiết kế đảm bảo khả năng sử dụng tốt, cần
thiết phải kiểm tra xem người dùng có thể sử dụng sản phẩm và thích nó không. Hơn
nữa, ngày nay người dùng có xu hướng tìm kiếm nhiều hơn một hệ thống có ích cho họ.
Bruce Tognazzini, một nhà tư vấn khả năng sử dụng, cho rằng (Www.asktog.com):
"Thiết kế lặp đi lặp lại, với chu kỳ lặp lại của thiết kế và thử nghiệm, là phương pháp
tồn tại mà luôn tạo ra kết quả thành công."
Đánh giá có ba mục tiêu chính: đánh giá mức độ và khả năng sử dụng của các chức
năng hệ thống; đánh giá kinh nghiệm của người sử dụng tương tác, và để xác định bất
kỳ vấn đề cụ thể nào khác của hệ thống.
Chức năng của hệ thống là quan trọng, nó phải phù hợp với yêu cầu người sử dụng.
Nói cách khác, các thiết kế của hệ thống nên cho phép người dùng thực hiện nhiệm vụ
dự định của họ dễ dàng hơn. Điều này bao gồm không chỉ làm cho chức năng của hệ
thống thích hợp hơn mà nó còn làm cho nó rõ ràng để truy cập. Nó cũng liên quan với
việc sử dụng hệ thống phù hợp mong đợi của người dùng về các nhiệm vụ. Đánh giá ở
mức độ này cũng có thể bao gồm đo lường hiệu quả của người dùng với các hệ thống,
đánh giá hiệu quả của hệ thống trong việc hỗ trợ các nhiệm vụ. 124
Ngoài việc đánh giá thiết kế hệ thống về khả năng hoạt động của nó, điều quan
trọng nữa là đánh giá kinh nghiệm của người sử dụng tương tác và tác động của nó trên
họ. Điều này bao gồm xem xét các khía cạnh như thế nào dễ dàng tìm hiểu hệ thống,
khả năng sử dụng và sự hài lòng của người sử dụng với nó. Nó cũng có thể bao gồm sự
hưởng thụ và phản ứng cảm xúc, đặc biệt là trong trường hợp của các hệ thống đó là
nhằm mục đích giải trí hoặc vui chơi giải trí.
Mục tiêu cuối cùng của việc đánh giá là xác định các vấn đề cụ thể khác với thiết
kế. Những vấn đề đó có thể là các khía cạnh của thiết kế đó, khi được sử dụng trong bối
cảnh dự định, sinh ra kết quả bất ngờ, hoặc nhầm lẫn giữa các người dùng. Tất nhiên,
nó liên quan đến cả chức năng và khả năng sử dụng của các thiết kế (tùy thuộc vào
nguyên nhân của vấn đề). Nhưng, nó được đặc biệt quan tâm đến việc xác định sự cố,
và sau đó nó sẽ được sửa chữa.
Có hai loại chính của đánh giá. Một liên quan đến chuyên gia đánh giá về khả năng
sử dụng, hoặc thiết kế tương tác, xem xét một số hình thức của phiên bản thiết kế:
phương pháp chuyên gia đánh giá. Một cách khác là liên quan đến người dùng sử dụng
một phiên bản của sản phẩm: phương pháp người dùng đánh giá. Những người dùng này
nên là đại diện của người dùng mục tiêu của hệ thống.
3.9.1 Phương pháp chuyên gia đánh giá
Một phương pháp đơn giản, tương đối nhanh chóng và hiệu quả của việc đánh giá
là để có được một thiết kế tương tác tốt, hoặc khả năng sử dụng tốt, những chuyên gia
nhìn vào hệ thống và cố gắng sử dụng nó. Đây không phải là phương pháp thay thế cho
việc người dùng thực sự sử dụng và đánh giá thiết kế của bạn, nhưng đánh giá của
chuyên gia là có hiệu quả, đặc biệt là trong giai đoạn đầu trong quá trình thiết kế. Các
chuyên gia sẽ xem xét những vấn đề phổ biến dựa trên kinh nghiệm. Tuy nhiên, để giúp
các chuyên gia đánh giá, phương pháp này sẽ giúp tiếp cận và tập trung vào những khía cạnh quan trọng nhất.
Một số phương pháp đã được đề xuất để đánh giá các hệ thống tương tác thông qua
các chuyên gia phân tích. Mục đích cơ bản là để xác định những khu vực có khả năng
gây ra những khó khăn, vì họ biết đến những nguyên tắc vi phạm nhận thức, hoặc có thể
bỏ qua chấp nhận kết quả thực nghiệm. Những phương pháp này có thể được sử dụng ở
bất kỳ giai đoạn nào trong quá trình thiết kế, thông qua kịch bản và mẫu thử. Phương
pháp này cũng là tương đối tiết kiệm chi phí, vì không yêu cầu người sử dụng tham gia.
Tuy nhiên, nó không đánh giá được thực tế sử dụng của hệ thống. Một phương pháp mà
các nhà thiết kế tương tác có thể áp dụng khi đánh giá và nhận xét về sản phẩm thiết kế
đó là phương pháp phỏng đoán. 125
Đánh giá phỏng đoán đề cập đến một số phương pháp trong đó một số người được
đào tạo trong HCI và thiết kế tương tác kiểm tra một thiết kế đề xuất để xem nó như thế
nào, dựa trên một danh sách các nguyên tắc, hướng dẫn hoặc phỏng đoán cho thiết kế.
Đánh giá phỏng đoán được phát triển bởi Jakob Nielsen và Rolf Molich, là một phương
pháp để cơ cấu sự phê phán của một hệ thống sử dụng một tập hợp các phỏng đoán
tương đối đơn giản và tổng quát.
Đánh giá phỏng đoán có thể được thực hiện trên một đặc điểm kỹ thuật thiết kế,
nó hữu ích cho đánh giá thiết kế ban đầu. Nhưng nó cũng có thể được sử dụng trên những
nguyên mẫu, kịch bản và hệ thống hoạt động đầy đủ. Do đó, nó là một cách tiếp cận linh
hoạt và chi phí tương đối rẻ.
Ý tưởng chung đằng sau đánh giá phỏng đoán là nhiều chuyên gia đánh giá độc
lập một hệ thống với khả năng sử dụng các vấn đề tiềm năng. Kinh nghiệm của Nielsen
cho thấy rằng từ ba đến năm người đánh giá là đủ, với năm người có thể đánh giá được
75% những vấn đề tổng thể về khả năng sử dụng.
Việc phỏng đoán này liên quan đến các nguyên tắc thiết kế về khả năng sử dụng.
Mỗi đánh giá hệ thống được ghi chép lại những hành vi vi phạm vào vấn đề về khả năng
sử dụng. Người đánh giá cũng đưa ra mức độ nghiêm trọng của từng vấn đề ảnh hưởng
đến khả năng sử dụng của hệ thống. Đó là mức độ phổ biến của vấn đề, nó có dễ dàng
cho người sử dụng vượt qua, nó là vấn đề gặp phải một lần hay thường xuyên, sự nghiêm
trọng của các vấn đề. Người ta đưa ra 4 thang điểm để đánh giá mức độ nghiêm trọng
tổng thể trên thang điểm từ 0-4:
0 = Đây không phải là một vấn đề về khả năng sử dụng
1 = Chỉ là vấn đề thẩm mỹ, không cần phải sửa ngay trừ khi có thêm thời gian cho dự án.
2 = Vấn đề nhỏ, mức độ ưu tiên thấp cho khắc phục việc này
3 = Vấn đề lớn, mức độ ưu tiên cao cho khắc phục vấn đề quan trọng này.
4 = Thảm họa khả năng sử dụng: bắt buộc phải sửa lỗi này trước khi sản phẩm có thể
được phát hành (Nielsen)
Người đánh giá sẽ sử dụng các nguyên tắc thiết kế đảm bảo khả năng sử dụng để
đánh giá. Các nguyên tắc về khả năng sử dụng được miêu tả trong chương 1. Danh sách
đó bao gồm các tiêu chí liên quan đến: Khả năng dễ dùng, hiệu suất sử dụng cao, khả
năng dễ nhớ, những lỗi người dùng có thể mắc phải và sự hài lòng của người dùng. Trừ
khi không có sự thay thế, thì người thiết kế không nên đánh giá chính thiết kế của mình.
Vì rất khó để phát hiện ra những lỗ hổng thiết kế, và có thể bỏ qua những nghi ngờ mà 126
chỉ có người dùng, chuyên gia khác mới tìm ra. Đánh giá phỏng đoán có giá trị cải thiện
tương tác ở giai đoạn đầu. Nó không nên được sử dụng như là một tổng kết đánh giá.
Sau khi đánh giá chuyên gia, các nhà thiết kế sẽ thử nghiệm với khách hàng. Nhiều
kết quả cho thấy rằng một số vấn đề được phỏng đoán là không chính xác. Lý do là một
số chuyên gia đánh giá thấp về trình độ của người dùng, và thiếu hiểu biết về kinh
nghiệm của người dùng. Nên họ cho rằng người dùng không nhận thức được vấn đề
trong thiết kế. Lý do khác là do suy nghĩ riêng của từng chuyên gia. Woolrych và
Cockton cho rằng đánh giá phỏng đoán dựa trên lý thuyết nhiều hơn. Đánh giá phỏng
đoán cần phải được xem xét cẩn thận và áp dụng cùng với đánh giá người dùng.
Hình 3-38: Thiết kế điều khiển từ xa.
Ví dụ: Đánh giá chương trình ghi video bằng điều khiển từ xa.
Sản phẩm ghi video băng điều khiển từ xa (VCR)
Thiết kế được thể hiện trong Hình 3-38. Hình bên trái minh họa thiết bị cầm tay ở trạng
thái bình thường, hình ảnh bên phải là khi nút ghi âm được nhấn. VCR cho phép người
dùng thiết lập 3 kênh ghi video khác nhau.
Xác định nhiệm vụ để đánh giá: “Ghi video cho một kênh chương trình từ 18:00 và kết
thúc 19:15 trên kênh 4 vào ngày 24/02/2005
Đối tượng người dùng là những người đã quen thuộc với chức năng VCR, nhưng chưa
từng sử dụng điều khiển với thiết kế này. STT
Tiêu chí đánh giá Đánh giá Điểm 127 1 Dễ dùng 4
Các biểu tượng sử dụng chưa rõ ý nghĩa khiến
người dùng khó xác định được hành động của
mình. Ví dụ như nút thứ 3 ở hàng thứ 4 có biểu
tượng hình đồng hồ mang ý nghĩa là nút “time
record” nhưng sẽ có một số người nhầm với nút
thứ 4 của hàng đầu tiên hoặc nút hình tròn đặc ở
hàng thứ 4 có ý nghĩa là record. Hay nút thứ 1 ở
hàng thứ 4 không hiểu rõ được ý nghĩa. 2 Hiệu suất sử dụng 0
Khi người dùng nhập xong 1 tham số thì bấm nút
“time record” nó tự động nhẩy sang tham số thứ 2
sẽ khiến người dùng tương tác nhanh hơn 3 Dễ nhớ 0
Thiết kế thống nhất, các biểu tượng và text đều được đặt trên nút bấm 4 Lỗi 2
Trong trường hợp người dùng nhập sai thông tin
cho phần thiết lập time, channer, date thì không có
nút bấm quay lại cho người dùng thiết lập lại 5 Hài lòng
Khi thiết lập xong các tham số thì nó tự động 2
truyền dữ liệu vào kênh muốn ghi hình. Màn hình
điều khiển lại trở về trạng thái ban đầu của nó như
vậy người dùng không hiểu đã thiết lập thành công hay chưa?
Kết luận: Thiết kế trên có tổng số 1 lỗi 4 điểm, 2 lỗi 2 điểm. Ghi chú:
0 điểm – không có vấn đề gì
1 điểm – Vấn đề về thẩm mỹ có thể sửa nếu có thời gian
2 điểm – Cần sửa, mức độ ưu tiên thấp
3 điểm – Cần sửa, mức độ ưu tiên cao
4 điểm – Bắt buộc phải sửa, vấn đề nghiêm trọng 128
3.9.2 Phương pháp người dùng đánh giá
Trong khi phương pháp chuyên gia đánh giá có thể được thực hiện bởi các nhà
thiết kế, thì phương pháp này liên quan đến đánh giá từ phía người dùng. Kỹ thuật này
sẽ đánh giá thực tế về sản phẩm, hệ thống với người sử dụng. Chính vì vậy, phương
pháp này có thể đánh giá được những kinh nghiệm người dùng liên quan đến cảm xúc,
niềm tin, sở thích, nhận thức, phản ứng thể chất và tâm lý. Có nhiều phương pháp để
đánh giá thông qua người dùng, bao gồm: Phương pháp kiểm thử, phương pháp quan
sát, phương pháp phỏng vấn, hỏi đáp. Phương pháp này thường được thực hiện trong
giai đoạn phát triển về sau, khi ít nhất là phải có một mẫu thử nghiệm có thể làm việc tại chỗ.
- Phương pháp kiểm thử: Một trong những phương pháp mạnh mẽ nhất của phương
pháp người dùng đánh giá là kiểm thử. Điều này cung cấp những bằng chứng thực
nghiệm để hỗ trợ và yêu cầu cụ thể về thiết kế. Nó có thể được sử dụng để nghiên
cứu một loạt các vấn đề khác nhau ở mức độ chi tiết khác nhau. Trong thí nghiệm,
họ sẽ xác định đo một số thuộc tính về hành vi tham gia của người dùng. Người
đánh giá sẽ lựa chọn một số giả thiết để kiểm tra, một số điều kiện thí nghiệm được
coi chỉ khác nhau về giá trị của một số biến. Bất kỳ sự thay đổi trong biện pháp
được cho là điều kiện khác nhau. Phương pháp này cần xác định các biến kiểm tra,
các thao tác và giả thiết. Một phương pháp được sử dụng khá phổ biến đó là phương
pháp kiểm thử A/B. Ví dụ: Đánh giá thiết kế icon. Bạn là người thiết kế icon, và
đang xem xét hai phong cách thiết kế icon, và mong muốn nó sẽ khiến người dùng
dễ nhớ. Một tập hợp các biểu tượng với phong cách tự nhiên và trừu tượng (Hình
3-39). Để làm được điều này, chúng ta cung cấp một giao diện giống hệt nhau về
mọi mặt, ngoại trừ cho việc sử dụng các biểu tượng, và một nhiệm vụ lựa chọn có
thể được lặp đi lặp lại cho từng trường hợp. Kết quả kiểm thử sẽ cho thấy tốc độc
lựa chọn biểu tượng của người dùng càng nhanh thì biểu tượng đó càng dễ dàng
để nhận biết và nhớ hơn 129
Hình 3-39: Thiết kế biểu tượng với hai phong cách khác nhau
- Các phương pháp quan sát, phỏng vấn, bảng câu hỏi có thể được áp dụng như đối
với việc nghiên cứu ban đầu. Các phương pháp này sẽ được trình bày chi tiết ở mục sau.
- Đánh giá thông qua thiết bị phản hồi sinh học: Một trong những vấn đề với hầu hết
các kỹ thuật đánh giá là chúng ta đang phụ thuộc vào sự quan sát và người dùng
nói với chúng ta những gì họ đang làm và họ đang cảm thấy điều gì. Có những
thiết bị có thể đo những điều này một cách trực tiếp. Thiết bị này này sẽ cho phép
chúng ta không chỉ xem chi tiết, rõ ràng, chính xác những gì người dùng tương tác
với máy tính, nhưng cũng đo lường được cảm giác của họ. Có hai loại thiết bị được
chế tạo ra và áp dụng vào đánh giá tương tác là máy theo dõi ánh mắt và đo lường
sinh lý. Máy theo dõi ánh mắt để đánh giá khả năng sử dụng: đã được phát triển
và cải tiến phần cứng cũng như phần mềm để nó khả thi hơn. Chuyển động của
mắt được cho là để phản ánh quá trình nhận thức một màn hình hiển thị. Nó sẽ nói
nên khu vực trên màn hình mà người dùng đang tìm kiếm, và nó có dễ dàng tìm
kiếm và có khó hiểu cho người dùng hay không. Chuyển động mắt đo được dựa
trên việc định hình, nơi mắt vẫn giữ ở một vị trí ổn định cho một khoảng thời gian,
và giật mắt, nơi có chuyển động mắt nhanh chóng. Máy theo dõi ánh mắt đo khả
năng sử dụng vẫn còn rất mới và thiết bị vô cùng tốn kém. Tuy nhiên, nó là một
kỹ thuật đầy hứa hẹn cho việc cung cấp những hiểu biết vào những gì thực sự thu
hút mắt trong thiết kế website.
Hình 3-40: Kết quả theo dõi chuyển động mắt trên màn hình cho thấy khu vực được
tập trung nhìn nhiều nhất.
− Đo sinh lý: chúng ta thấy những phản ứng cảm xúc gắn chặt với những thay đổi
sinh lý. Chúng bao gồm những thay đổi trong nhịp tim, hơi thở và tuyến mồ
hôi ở da. Do đó đo phản ứng sinh lý có thể hữu ích trong việc xác định cảm 130
xúc của người dùng đối với một hệ thống. Chúng ta có thể xác định những sự
kiện tương tác thực sự gây ra một sự căng thẳng hoặc giúp người dùng thư
giãn. Máy đo lường sinh lý liên quan đến việc gắn các đầu dò khác nhau và
các bộ cảm biến vào người sử dụng. Một số phép đo như hoạt động của tim,
có thể đo sự căng thẳng hay tức giận. Hoạt động của các tuyến mồ hôi, để chỉ
ra mức độ của kích thích và sự nỗ lực. Hoạt động điện não đồ, có thể liên quan
đến việc ra quyết định, sự quan tâm và động lực.
Hình 3-41: Máy đo sinh lý 3.10 Bài tập
1. Trong một dự án Phát triển website thư viện điện tử cho sinh viên trường PTIT,
nếu được phân công vào vị trí để đi thu thập nhu cầu người dùng. Bạn hãy xác
định các loại người dùng cho website này. Để thu thập thông tin về người dùng,
bạn sẽ sử dụng phương pháp thu thập dữ liệu nào? Và trong phương pháp đó anh
chị sẽ thực hiện như thế nào để khai thác được nhu cầu của người dùng.
2. Một website xem phim, họ muốn nâng cấp website này lên. Để xác định nhu cầu
của người dùng, họ đã sử dụng phương pháp phỏng vấn, để xem xét những vấn
đề còn tồn tại của hệ thống hiện tại là gì. Họ đã tìm đến các khu thương mại, nơi
tập trung nhiều đối tượng người dùng ở đó. Người phỏng vấn (PV) đặt câu hỏi
cho một người đàn ông (User)
- PV: Bạn có thể cho tôi biết lần gần đây nhất bạn xem phim trên internet là khi nào không? 131
- User: Lần gần đây nhất tôi xem là tối qua, vợ tôi đã yêu cầu tôi tìm bộ phim gì đó để xem đi.
- PV: Vậy làm thế nào anh tìm và lựa chọn được một bộ phim mà mình xem?
- User: Lúc đầu vợ tôi muốn xem phim trên kênh HBO, nhưng tôi thực sự
đã không thích những bộ phim trên đó. Cô ấy đã mở Netflix và xem
những bộ phim được đề xuất. Chúng tôi đã tìm thấy bộ phim mà chúng
tôi đã xem dở trước đó. Chúng tôi còn không nhớ là mình đã xem hết các
tập chưa. Chúng tôi đã quyết định xem nó.
Nếu bạn là người phỏng vấn, bạn sẽ hỏi tiếp câu hỏi gì và tại sao?
3. Để thiết kế website khoa đa phương tiện, chúng ta đã sử dụng một số phương
pháp nghiên cứu và xác định yêu cầu. Giả sử đã có đầy đủ thông tin. Em hãy xây
dựng personas cho 2 đối tượng người dùng là giảng viên và sinh viên.
4. Ứng dụng Delivery là một ứng dụng vận chuyển, người dùng có thể thiết lập một
đơn hàng vận chuyển, hệ thống sẽ tìm kiếm người vận chuyển phù hợp cho đơn
hàng đó. Các thông tin đến đơn hàng bao gồm địa chỉ lấy hàng, địa chỉ giao hàng,
loại hàng hoá, các thông số về hàng hoá. Em hãy phân tích chi tiết cho nhiệm vụ
“Lập đơn hàng vận chuyển” và xây dựng các kịch bản tương tác cho nhiệm vụ này.
5. Em hãy vẽ phác thảo ý tưởng cho giao diện của bài tập 4.
6. Em hãy phân tích các đối tượng mà người dùng tương tác trên một website tin
tức, website thương mại điện tử, website xem phim, Ứng dụng đặt phòng Booking.com
7. Em hãy cho biết loại kiến trúc thông tin ở các ví dụ bài tập 6 là loại kiến trúc gì,
hãy vẽ sơ đồ kiến trúc thông tin cho các ví dụ đó.
8. Để rút ngắn thời gian cho khách hàng gọi món trong một nhà hàng. Họ đã làm ra
một ứng dụng trên điện thoại di động, cho phép khách hàng đến ăn có thể tự gọi
món thông qua ứng dụng. Phiếu gọi món sẽ được đẩy trực tiếp đến khu chế biến
món ăn. Ứng dụng không những rút ngắn được thời gian gọi món mà còn giúp
giảm thiểu được công việc cho người phục vụ bàn. Quy trình gọi món thông qua ứng dụng như sau:
- Khách hàng quét mã bàn tại bài mình ngồi để xác định vị trí giúp người
phục vụ có thể bê đồ ăn đúng khách hàng.
- Chọn món ăn trong menu, có thể xem được hình ảnh và thành phần của
các món ăn, cho phép người dùng ghi chú vào món ăn mình gọi như
không cay, ít dầu mỡ, dị ứng với một số nguyện liệu ,… -
Xác nhận và gửi phiếu gọi món. 132
Em hãy phân tích nhiệm vụ, kịch bản tương tác, vẽ phác thảo ý tưởng (thể hiện dưới
dạng storyboard), vẽ wireframe và xây dựng prototype cho nhiệm vụ này.
9. Em hãy phân tích ngôn ngữ thiết kế (yếu tố thiết kế, nguyên tắc thiết kế và các
mối quan hệ giữa các yêu tố) trong ví dụ dưới dây.
10. Em hãy thiết kế lại GUI cho giao diện ở bài 9 theo một phong cách khác (sử dụng
màu sắc khác, bộ icon khác, tỷ lệ bố cục các phần khác)
11. Em hãy đánh giá thiết kế tương tác trong ví dụ dưới dây dựa trên phương pháp đánh giá phỏng đoán.
Chức năng tìm kiếm công thức món ăn được thể hiện trong giao diện 3 màn hình dưới đây. 133
TÀI LIỆU THAM KHẢO
[1]. Yvonne Rogers, Helen Sharp, Jenny Preece, Interaction Design Beyond
HumanComputer Interaction, John Wiley & Sons, Inc., 2002
[2]. David Benyon, Designing Interactive Systems, Second edition, Pearson Education, 2010.
[3]. Alan Dix, Janet Finlay, Gregory D. Abowd, Russell Beale, Human–Computer
Interaction, Third edition, Pearson Education, 2004.
[4]. Đỗ Trung Tuấn, BG Thiết kế tương tác đa phương tiện, Học viện Công nghệ Bưu chính Viễn thông, 2014.
[5]. Lương Mạnh Bá, Tương tác người máy, nxb. Khoa học và Kỹ thuật, 2005. 134