Tóm tắt khảo sát UX/UI môn Giao diện và trải nghiệm người dùng | Trường Đại học Bách Khoa Hà Nội

BÀI 1.1: GIỚI THIỆU CHUNG VỀ UX/UI 1. HCI
Tương tác người – máy là lĩnh vực nghiên cứu đa ngành về cách con người tương tác với máy
tính và các hệ thống thông tin, bao gồm.
Lịch sử: bắt đầu từ ~1980: 1987 Baecker & Buxton, 1992 ACMSIGCHI
4 giai đoạn của HCI: intention (ý định) – selection (lựa chọn) – execution (thực hiện) – evaluation (đánh giá)
Nhận thức (cognitive) là khuôn khổ chủ đạo đặc trưng của HCI
4 thành phần của HCI: user (người dùng), task (tác vụ), tools/interface (công cụ/giao diện),
context (ngữ cảnh) >> sử dụng trong quá trình phát triển hệ thống tương tác
2. Mô thức tương tác (paradigm)
Các mô thức (mô hình + nhận thức) giúp phát triển các hệ thống tương tác thành công, nâng cao khả năng sử dụng
• Mô hình tương tác chia sẻ thời gian (‘40s – ‘60s): một máy tính hỗ trợ nhiều người dùng (time sharing)
• Graphic display (video display) (1962): mô hình trực quan
• Mô thức máy tính cá nhân (‘70s)
• Window system and WIMP inteface (1981): thực hiện nhiều nhiệm vụ cùng lúc bằng cách sử dụng cửa sổ
• Direct manipulation/WYSIWYG – interface: 1982 Shneiderman: Mô hình tương tác thao
tác trực tiếp dựa trên đồ họa, 1984 Apple Macintosh (WYSIWYG)
• Ngôn ngữ vs hành động (language vs action): người dùng đưa ra hướng dẫn cho giao diện
và giao diện xem các hướng dẫn đó được thực hiện hay không, giao tiếp bằng ngôn ngữ
gián tiếp thay vì hành động trực tiếp >> người dùng hiểu cách thức hoạt động của hệ thống
cơ bản mà không bắt buộc phải hiểu hệ thống (giao diện sẽ hướng dẫn người dùng)
• Computer – supported cooperative work: cho phép tương tác giữa nhiều người thông qua
máy tính, do đó nhu cầu của nhiều người được thể hiện trong 1 sản phẩm • Hypertext (1945) • Mô thức WWW
• Một số paradigm khác: multi-modality (tương tác đa phươg thức sử dụng nhiều kênh giao
tiếp của con người), ubiquitous computing, agent-based interface (tác nhân AI học từ người dùng)
3. Hệ tương tác (interactive system)
Hệ thống tương tác là hệ thống máy tính được đặc trưng bởi lượng tương tác đáng kể giữa con
người và máy tính. VD: máy bay chở khách, lò vi sóng, trình duyệt web, hệ điều hành máy tính,…
Mô hình đánh giá/thực hiện của Norman: dựa trên 6 nguyên tắc Norman
• Người dùng có mục tiêu (điều gì đó cần đạt được)
• Người dùng nhìn vào hệ thống và cố gắng tìm ra các thực hiện một loạt nhiệm vụ để đạt mục tiêu
• Người dùng thực hiện một số hành động
• Hệ thống phản hồi các hành động và cung cấp kết quả cho người dùng
• Người dùng nhìn vào kết quả và đánh giá xem có đạt được mục tiêu hay không
Thiết kế hệ thống tương tác tập trung vào thiết kế UX, UI để đảm bảo người dùng có thể tương
tác với hệ thống dễ dàng và hiệu quả Vòng đời thiết kế hệ thống tương tác:
3 thành phần của hệ thống tương tác: con người, môi trường và ngữ cảnh, máy tính và công nghệ tương tác
Phương tiện và công cụ tương tác: 2 thành phần: con người và máy tính
Hệ tương tác cần hỗ trợ trợ năng cho người khuyết tật và cộng đồng chưa được đào tạo BÀI 1.2: USABILITY
Mục đích chính của HCI: để phát triển các sản phẩm công nghệ và phần mềm giúp chúng có
thể sử dụng được (usability) và làm người dùng có trải nghiệm (UX)
1. Khái niệm usability – khả năng sử dụng, hay khả dụng: là mức độ mà 1 sản phẩm có thể
được sử dụng bởi người dùng cụ thể để đạt mục tiêu cụ thể, mức độ dễ dàng mà khách hàng
có thể hoàn thành một nhiệm vụ nhất định với sản phẩm đó 3 yếu tố cốt lõi:
• Hiệu quả (effectiveness): đề cập đến khả năng của người dùng hoàn thành một nhiệm vụ
bằng cách sử dụng sản phẩm
• Hiệu suất (efficiency): tập trung và tốc độ và tài nguyên được sử dụng để hoàn thành nhiệm vụ
• Sự hài lòng (satisfaction): mức độ thỏa mãn và dễ chịu của trải nghiệm người dùng khi
tương tác với sản phẩm
5 thành phần chất lượng của usability:
• Learnability (khả năng học): người dùng có thể hoàn thành nhiệm vụ trong lần đầu tiếp xúc dễ dàng như thế nào
• Efficiency (hiệu quả): khi đã học được thiết kế, họ có thể thực hiện nhiệm vụ nhanh đến mức nào
• Memorability (khả năng ghi nhớ): sau một thời gian không sử dụng, họ có thể trở lại thành
thạo sử dụng hệ thống như thế nào
• Error (lỗi): người dùng mắc bao nhiêu lỗi, có nghiêm trọng không và khắc phục như thế nào
• Subjective satisfaction (sự hài lòng chủ quan): sự dễ chịu của người dung khi sử dụng thiết kế
Usability là một khía cạnh của trải nghiệm người dùng (UX), tập trung về tính dễ sử dụng,
còn UX bao gồm nhiều yếu tố hơn (cảm xúc, nhận thức, sở thích và phản hồi từ người dùng)
Usability là cấp độ thứ 2 trong UX: utility (tiện ích) – usability – desirability (mong muốn) –
brand experience (trải nghiệm thương hiệu). VD: mở nắp chai có tính tiện ích, tuy nhiên không dễ
sử dụng đối với người thuận tay trái, vì vậy khó để họ có mong muốn sử dụng
2. Khả dụng trong HCI:
Nghiên cứu khả dụng trong HCI đề cập đến mức độ mà hệ thống máy tính, ứng dụng phần
mềm hoặc giao diện có thể được người dùng dự kiến sử dụng dễ dàng và hiệu quả để đạt được các
mục tiêu cụ thể một cách thỏa đáng
Khả dụng là thước đo mức độ dễ dàng của mọi người khi sử dụng một hệ thống để đạt được
mục tiêu của họ >> Usability testing: kỹ thuật được sử dụng trong thiết kế tương tác lấy người
dùng làm trung tâm để đánh giá sản phẩm bằng cách thử nghiệm sản phẩm đó trên người dùng, đo
lường bằng thời gian hoàn thành nhiệm vụ, tỉ lệ lỗi và sự hài lòng của người dùng
Nghiên cứu HCI được sử dụng để hiểu nhu cầu và mong muốn của người dùng, khả năng được
sử dụng để đo lường mức độ hệ thống hỗ trợ nhu cầu và mong muốn đó Quy tắc thiết kế (design
principles) Dix 1998: 3 nguyên tắc:
• Learnability (khả năng học): hỗ trợ người dùng mới làm quen nhanh chóng: bao gồm:
Predictability (khả năng dự đoán): cho phép người dùng xác định kết quả của tương
tác hiện tại hoặc tương lai
Synthesisabilility (khả năng tổng hợp): thôg báo mang thông tin có thể quan sát được
về những thay đổi trạng thái hoạt động của hệ thống
Familiarity (sự quen thuộc): ánh xạ trải nghiệm trước đó vào tính năng của hệ thống mới
Generalisability (tính khái quát): hỗ trợ người dùng tương tác giữa các ứng dụng với
các tình huống mới nhưng tương tự
Consistency (tính nhất quán): thống nhất giữa các ứng dụng
• Flexibility (linh hoạt): mở rộng cách người dùng và hệ thống trao đổi thông tin
Dialog initiative: hộp thoại ưu tiên cả người dùng và hệ thống
Multi-threading: cung cấp hỗ trợ cho nhiều tác vụ cùng lúc
Task migratability: khả năng di chuyển giữa các tác vụ
Substitutivity: Cung cấp cho người dùng những cách khác nhau để chỉ định đầu vào hoặc xem đầu ra
Customisability: Khả năng tùy chỉnh
• Robustness (tráng kiện?): hỗ trợ người dùng đạt được mục tiêu của họ
Observability (khả năng quan sát): đánh giá trạng thái bên trong từ biểu diễn của nó
Recoverability (khả năng phục hồi): tương tự undo
Responsiveness (khả năng đáp ứng): khả năng phản hồi đo bằng tốc độ giao tiếp giữa người và hệ thống
Task conformance (sự phù hợp nhiệm vụ): hệ thống có khả năng hỗ trợ toàn bộ tác vụ
của người dùng mong muốn hay không
3. Khả dụng trong UX/UI design
Usability engineering: kỹ nghệ khả dụng: mô tả quá trình phát triển giao diện người dùng, đôi
khi được gọi là thiết kế lấy người dùng làm trung tâm
Usability engineering life cycle: Xác định yêu cầu và vấn đề của người dùng – Task analysis:
xác định mục tiêu khả năng sử dụng dựa trên yêu cầu – Design and prototype solution – Đánh giá prototype
BÀI 2.1: YẾU TỐ CON NGƯỜI TRONG HCI 1.
Yếu tố con người
Yếu tố con người trong HCI là các đặc điểm, khả năng và hạn chế của con người ảnh hưởng
đến sự tương tác của họ với các hệ thông máy tính, bao gồm tâm lý, xã hội và các khía cạnh vật lý
tác động đến cách người dùng nhận thức, hiểu và tương tác với giao diện Các đặc tính của con người:
• Các kênh ra vào thông tin: thị giác, thính giác, xúc giác, vận động
• Bộ nhớ: ngắn hạn, dài hạn
• Lập luận và cách giải quyết vấn đề: học hỏi kỹ năng, sai sót và sơ suất, cảm xúc
Visual perception: tương tác qua thị giác: lý thuyết về nhận thức giải thích cách chúng ta xử lý
những gì nhìn thấy chia làm 2 loại:
Constructivism: chủ nghĩa kiến tạo: nhận thức trực quan của chúng ta về thế giới được xây
dựng bằng cách áp dụng kiến thức về thế giới vào những gì mắt chúng ta nhìn thấy
Chúng ta không nhận thức thế giới một cách trực tiếp mà xử lý hình ảnh chúng ta nhìn thấy trước
khi nó được nhận ra một cách có ý thức. Nổi bật là lý thuyết Gestalt. VD: một đứa trẻ phải học
một lượng kiến thức cơ bản nào đó trước khi có thể nhìn thấy
Ecologist: sinh thái học: không có quá trình xử lý ở cấp độ cao, chúng ta trích xuất thông tin
trực tiếp từ ánh sáng mà mắt thu được. Nó cho rằng mắt và trí óc đã thích nghi với môi trường qua
hàng triệu năm tiến hóa nên được tối ưu hóa để nhận biết môi trường đó rất hiệu quả >> quan tâm
đến những tín hiệu nào mà mắt có thể tiếp nhận trực tiếp từ ánh sáng ở môi trường xung quanh
Lý thuyết dòng quang và bất biến (optical flow and invariant): lập luận của Gibson về nhận
thức: chuyển động là một phần quan trọng của quá trình, mắt thường có xu hướng đi lại xung
quanh, khiến cho mắt có nhiều góc nhìn thay đổi liên tục. Khi lại gần bề mặt đó, nhận thức về nó
sẽ thay đổi và mức độ chi tiết ngày càng tăng >> sự thay đổi trong dòng quang học nhận thức.
Gibson cho rằng môi trường chứa thông tin bất biến, dòng quang chỉ là một trường hợp trong một họ bất biến rộng hơn
Affordance: khả năng chi trả: là một loại bất biến quan trọng, là khả năng mà đồ vật cung cấp cho
người quan sát manh mối về cách chúng có thể được sử dụng
Màu sắc: Quy tắc 60-30-10: đảm bảo sự cân bằng và thoải mái về thị giác: 60% không gian
được bao phủ bằng màu chính, 30% với màu phụ, 10% có màu nhấn hoặc màu chủ đạo
Thính giác: các yếu tố thính giác được sử dụng trong HCI
• Auditory feedback: notification, alert, confirmation sound
• Voice interaction: speech recognition, NLP
• Sound design: âm thanh nâng cao trải nghiệm (trong game, VR,…), âm thanh đặc trưng thương hiệu
• Accessibility: trợ năng cho người khuyết tật
• Context awareness: mô phỏng âm thanh 3D, kết hợp âm thanh xung quanh
• Multimodal interaction: tích hợp âm thanh với phản hồi trực quan và xúc giác
Xúc giác: Haptic UI: ứng dụng của lực, rung động và chuyển động để tái tạo cảm giác chạm
của người dùng khi tương tác với 1 công nghệ nhất định, được sử dụng rộng rãi trong y tế, ô tô, …
Vận động: Luật Fitts: thước đo của kỹ năng vận động: là một mô hình dự đoán về chuyển động
của con người chủ yếu dùng trong tương tác người – máy. Luật dự đoán thời gian cần thiết để di
chuyển nhanh đến 1 khu vực là 1 hàm số của tỷ lệ giữa khoảng cách đến mục tiêu và chiều rộng
của mục tiêu >> luật được sử dụng để mô hình hóa hành động chỉ tay, bằng cách chạm vật lý vào
1 vật thể bằng tay hoặc ảo, bằng cách chỉ vào vật thể trên màn hình
BÀI 2.2: CÔNG THÁI HỌC 1. Khái niệm Ergonomics (công thái học)
Ergonomics là ngành nghiên cứu sự tương tác giữa hoạt động của con người và các thành phần
của hoạt động này (nhiệm vụ, công cụ, phương pháp, môi trường,…) để phát triể các hệ thống cho
phép con người làm việc trong điều kiện hiệu quả, an toàn và thoải mái tối ưu
Đặc điểm: kết hợp các yếu tố giải phẫu, sinh lý học, tâm lý học,… gồm 2 xu hướng: xu hướng
nhân tố con người, xu hướng hoạt động
Thiết kế công thái học: 3 loại: physical, cognitive, organizational
2. Công thái học trong UX UI design
Công thái học UX gồm physical ergonomics, cognitive ergonomics
Physical ergonomics: Luật Fitts về sự dịch chuyển: lượng thời gian cần thiết để một người di
chuyển con trỏ đến 1 vùng mục tiêu là hàm số của khoảng cách đến mục tiêu chia cho kích thước mục tiêu
với D là khoảng cách đến mục tiêu, w là chiểu rộng mục tiêu, a
và b là hằng số tùy thuộc vào loại con trỏ Ý nghĩa của luật Fitts:
• Khoảng cách đến mục tiêu càng xa thì thời gian di chuyển của con trỏ đến mục tiêu càng lâu
• Mục tiêu càng lớn thì thời gian di chuyển đến mục tiêu càng ngắn
>> 2 biến số ảnh hưởng đến thời gian di chuyển là kích thước mục tiêu và khoảng cách đến mục
tiêu >> Cải thiện: mục tiêu lớn hơn, biểu tượng + nhãn (VD: nút có thêm icon), mục tiêu vô hạn
(dọc theo cạnh màn hình,…), đặt mục tiêu không tập trung (tránh nhầm lẫn), thêm padding, thiết
kế menu, đặt các mục tiêu liên quan gần nhau
Luật Hick: một người càng phải suy nghĩ nhiều lựa chọn thì họ càng mất nhiều thời gian để đưa ra
quyết định >> tránh làm choáng ngợp người dùng với quá nhiều lựa chọn
Công thức: Reaction time = a + b.log2n (n là số lượng kích thích hiện diện, a và b là các hằng số
có thể đo lường tùy ý phụ thuộc vào nhiệm vụ cần thực hiện và các điều kiện mà nhiệm vụ đó sẽ thực hiện)
>> Cải thiện: Phân loại lựa chọn (theo tab, theo danh mục,…), làm mờ sự phức tạp (chia nhỏ các
quy trình dài thành các quy trình ngắn có ít tùy chọn hơn), thời gian và lượt xem trang (giảm thời
gian lựa chọn), page views 3. Ergonomic UX principles 5 nguyên tắc cơ bản:
• Reachability, Fitts’s law:
• Hand position: cách cầm thiết bị ảnh hưởng đến trải nghiệm người dùng Interaction vs
reading: sự khác nhau về vùng đọc và tương tác trên cùng màn hình Rounded corners over sharp corners:
• Infinite corners and edges: mục tiêu ở góc dễ được truy cập tới
4. Ergonomic human factors engineering, User centered Design
UFE: kỹ thuật nhân tố con người là một khối kiến thức, tập hợp các phương pháp phân tích và
thực nghiệm được sử dụng để hướng dẫn phát triển hệ thống nhằm đảm bảo sự phù hợp cho sử dụng của con người
Phân tích nhân khẩu học và nhân trắc học của người dùng:
• Demographics: Nhân khẩu học: tuổi tác, giới tính, nghề nghiệp, lối sống
• Anthropometry: Nhân trắc học: kích thước, hình dạng và sức mạnh cơ thể
Nguyên tắc công thái học: tư thế, phạm vi tiếp cận, lực, tầm nhìn
Một số nguyên lý khác: user familiarity, consistency, minimal surprise, recoverability, user guidance, user diversity
5. Tiêu chuẩn công thái học và HCI
Quy định và tiêu chuẩn công thái học: ISO 9241, 6385 (tổ chức tiêu chuẩn hóa quốc tế),
ANSI (viện tiêu chuẩn Hoa Kỳ)
BÀI 3: HUMAN & INFORMATION PROCESSING 1.
Lý thuyết xử lý thông tin
Nền tảng: việc học xảy ra là kết quả của việc suy nghĩ, nhớ lại, biết, giải quyết vấn đề, quan
sát, phân loại và rút ra kết luận
Lý thuyết cho rằng tâm trí con người hoạt động như một máy tính hoặc bộ xử lý thông tin. Nó
tìm cách kiểm tra cách bộ não con người xử lý và lưu giữ thông tin. Cho thấy khả năng nhận thức
của chúng ta dựa trên sự tương tác giữa 3 trí nhớ: giác quan (sensory), trí nhớ ngắn hạn (STM), trí
nhớ dài hạn (LTM). Các thành phần này phối hợp với nhau để mã hóa, lưu trữ và truy xuất thông tin một cách hiệu quả.
• STM: Quy tắc 7 ± 2: con người có thể lưu trữ 5 – 9 khối thông tin
• LTM: 2 kiểu bộ nhớ: ngữ nghĩa (semantic – cấu trúc các sự kiện, khái niệm,…), tình tiết
(episotic – sự kiện ở dạng nối tiếp)
Ý nghĩa của lý thuyết: công cụ quan trọng để hiêu các quá trình nhận thức và cách con người
tiếp thu, lưu trữ và sử dụng kiến thức
4 giai đoạn lý thuyết xử lý thông tin: mã hóa – lưu trữ – truy xuất – chuyển đổi Quên: 2 lý thuyết:
Phân rã (decay): thông tin trong LTM cuối cùng có thể bị lãng quên
Inteference (nhiễu): thông tin bị mất do nhiễu. 2 loại:
Can thiệp chủ động (proactive): nhiễu tương lai xảy ra khi không thể học một nhiệm vụ
mới do sự can thiệp cảu một nhiệm vụ cũ đã từng học
Can thiệp hồi tố (retroactive): nhiễu quá khứ xảy ra khi quên một nhiệm vụ đã học trước
đó do đang học một nhiệm vụ mới
Lý thuyết Gestalt về sự quên: ký ức bị lãng quên do bị bóp méo, thiếu chi tiết nên các thông tin
khác được đưa vào tạo nên ký ức tổng thể >> ký ức không chính xác
2. Retrieval information processing: truy xuất
Tulving xác định 3 thuộc tính của hồi tưởng ký ức theo từng giai đoạn: cảm giác chủ quan về
thời gian – kết nối với bản thân – ý thức tự trị (giúp cá nhân nhận thức được bản thân trong thời gian chủ quan)
2 loại retrieval: thu hồi (recall) và nhận biết (recognition). VD: gặp 1 người trên đường và nhận
ra nếu đã gặp trước đây (recognition) nhưng nhớ ra tên (recall) thì khó hơn nhiều
>> Cần giảm thiểu recall trong thiết kế UX >> sử dụng biểu tượng, nhãn quen thuộc, cung cấp tín
hiệu trực quan, tuân theo các mẫu chung, nhóm các thông tin liên quan lại với nhau
3. Lỗi và xúc cảm
Skill acquisition (tiếp thu kỹ năng): cách con người tiến bộ trong việc học nhiều kỹ năng khác
nhau, từ cơ bản đến nâng cao
1967 Fitts & Posner: mô hình tiếp thu kỹ năng 3 giai đoạn: nhận thức (cognitive – học thứ chưa
quen thuộc), liên kết/thực hành (associative – kỹ năng trôi chảy hơn), tự chủ (autonomous – hành
động lặp lại nhiều lần trở nên quen thuộc)
Lỗi: bỏ sót một hành động của con người, thực hiện nhưng không phù hợp với kỳ vọng cá nhân Phân loại:
• Slips: sơ suất – lỗi hành động: tư duy đúng nhưng hành động sai, do bản chất hành động
(action-based) hoặc do đãng trí (memory-lapse)
• Mistakes: sai sót – lỗi tư duy: tư duy sai và làm theo tư duy, do kế hoạch (rule-based) hoặc
do kiến thức, đãng trí (knowledge-based, memory-lapse)
Emotion: Cảm xúc là yếu tố ảnh hưởng trong thiết kế. 3 cấp độ xử lý cảm xúc:
• Visceral: khi người dùng lần đầu nhìn thấy sản phẩm
• Behavioural: liên quan đến khả năng sử dụng sản phẩm
• Reflective: suy nghĩ có ý thức, diễn giải và lý luận Cách áp dụng cảm xúc vào thiết kế UX:
• Design a personality: thu hút người dùng qua linh vật hoặc hình ảnh mang cá tính đặc trưng
• Create a strong brand: sử dụng chủ đề độc đáo
• Create the right tone with copy: sử dụng phông chữ phù hợp? • Tell story • Use humorous messages
4. Tư duy lập luận và cách giải quyết vấn đề
Suy nghĩ bao gồm: lập luận – suy diễn (reasoning), giải quyết vấn đề
Lập luận là quá trình sử dụng tri thức đã có để dựng nên kết luận hay suy diễn mới trong lĩnh
vực quan tâm. Các kiểu lập luận:
• Suy luận (deduction): if – then. VD: Wason card problem
• Quy nạp (induction): suy diễn từ cái đã biết sang cái chưa biết >> không phải lúc nào cũng đúng
• Phản chứng (abduction) 5. Cách thức giải quyết vấn đề Nguyên tắc Gestalt:
Quy luật thị giác Gestalt: dựa trên lý thuyết “con người sẽ luôn ưu tiên nhìn nhận tổng thể hơn
là tập trung vào các chi tiết”
Nguyên tắc Gestalt HCI: các nguyên tắc/luật nhận thức của con người mô tả cách con người
nhóm các yếu tố tương tự, nhận ra các mẫu và đơn giản hóa các hình ảnh phức tạp khi chúng ta
nhận thức các đối tượng. Bao gồm: • Emergence
• Closure (reification – tính đóng: khi được cung cấp lượng thông tin phù hợp, não tự động
đưa kết luận bằng cách lấp vào những khoảng trống – giống ví dụ THE CAT và cái cốc)
• Common region (các vật thể gần nhau hoặc chuyển động cùng hướng hoặc cùng tốc độ được coi là cùng nhóm)
• Continuity (các yếu tố được sắp xếp trên một đường thẳng hay cong mềm mại được nhìn
nhận liên kết với nhau hơn là xếp ngẫu nhiên)
• Proximity (gần nhau – các đối tượng sắp xếp gần nhau gắn kết hơn những đối tượng ở xa) • Multistability • Figure/ground • Invariance
• Pragnanz: xu hướng đơn giản hóa sự phức tạp >> giúp ta nhìn thấy trật tự và quy luật trong
thế giới >> sử dụng các hình dạng đơn giản như hình chữ nhật, hình tròn
• Similarity (tương đồng – mắt có xu hướng gom các vật thể tương tự về hình dáng và màu
sắc, kích thước thành 1 nhóm)
• Symmetry and order : các yếu tố đối xứng được cho là liên quan đến nhau, hài hòa và thỏa mãn thị giác
• Common fate: những yếu tố chuyển động theo cùng một hướng được nhìn nhận như tập
hợp có liên quan chặt chẽ
Lý thuyết không gian bài toán: Newell & Simon: con người giải quyết vấn đề thông qua tìm
kiếm theo phương pháp heuristic thông qua không gian vấn đề
BÀI 4: THIẾT KẾ TƯƠNG TÁC
Các loại thiết kế: creative design (thiết kế trực quan, sáng tạo), technical design, thiết kế quy trình, product design, UX design 1. Interaction design
Thiết kế tương tác (IxD) tạo ra cuộc đối thoại giữa người và sản phẩm hoặc dịch vụ >> dẫn
dắt người dùng đi tới mục tiêu một cách hiệu quả nhất So sánh IxD và UXD IxD UXD Phạm vi
Xử lý yếu tố cụ thể như nút, menu, điều Toàn bộ hành tình người dùng (cảm xúc, hướng
nhận thức, sự hài lòng)
Sản phẩm Tạo ra khung, nguyên mẫu, mô hình để Tạo ra chân dung người dùng, câu
trực quan hóa và kiểm tra luồng tương chuyện người dùng và bản đồ trải tác
nghiệm để hiểu người dùng Kỹ năng
Đòi hỏi hiểu biết về giao diện, nguyên Đòi hỏi tiếp cận toàn diện gồm nghiên
tắc khả dụng và mẫu thiết kế
cứu, tâm lý học và đồng cảm với người dùng Mục tiêu
Tạo ra tương tác trực quan và hiệu quả Tạo ra trải nghiệm thú vị, có ý nghĩa,
để hướng dẫn người dùng sử dụng sản đáp ứng nhu cầu và mục tiêu người dùng phẩm
Mục đích của thiết kế tương tác: •
Đối với con người: giảm hoạt động tương tác, hoạt động trí não, tăng sự hài lòng •
Đối với máy tính: giảm không gian lưu trữ, giảm gánh nặng công nghệ, tăng năng suất sử dụng Nguyên lý 5D: •
1D: Words: văn bản, VD nhãn nút, cung cấp cho người dùng thông tin phù hợp •
2D: Visual representation (biểu diễn trực quan): các yếu tố đồ họa như hình ảnh, kiểu chữ,
biểu tượng hỗ trợ tương tác •
3D: Physical objects/space (đối tượng/không gian vật lý): phương tiện để người dùng
tương tác với sản phẩm hoặc dịch vụ. VD máy tính xách tay, chuột,… •
4D: Time (thời gian): phương tiện thay đổi theo thời gian: GIF, video, âm thanh •
5D: Behaviour (hành vi): người dùng thực hiện các hành động trên trang web,…
Nguyên tắc thiết kế tương tác Don Norman: visibility, feedback, constraints, mapping,
consistency, affordance, cognition Khung Abowd và Beale
User Centered Design (UCD): quy trình thiết kế tập trung vào các mục tiêu về khả năng sử
dụng, đặc điểm người dùng, môi trường, nhiệm vụ, quy trình trong thiết kế
4 thiết yếu của UCD: visibility (khả năng hiển thị), accessibility (khả năng tiếp cận), legibility
(tính dễ đọc), language (ngôn ngữ) (4.2)
Lean UX: xây dựng phiên bản cơ bản nhất có thể để thử nghiệm. Nếu không có kết quả thì bỏ
Các bước thực hiện trong Canvas
How Might We: phương pháp tư duy thiết kế cho phép các nhà thiết kế định hình lại và mở
rộng các tuyên bố vấn đề nhằm giúp giải quyết các thách thức trong thiết kế (Đặt câu hỏi Làm thế nào để ta ) BÀI 5:
User journey map: Bản đồ hành trình là hình ảnh trực quan về quá trình mà một người trải qua
để hoàn thành mục tiêu.
Bao gồm: tác nhân (actor – persona), scenario – expectation (kịch bản + kỳ vọng), journey
phase (giai đoạn hành trình), actions + mindsets + emotions, opportunities
Touch points: bất kì tương tác có thể thay đổi cách khách hàng của bạn cảm nhận về sản phẩm,
thương hiệu, dịch vụ của bạn
Tính chất của touch points: phù hợp, có liên quan, có ý nghĩa, hấp dẫn UX flow:
Task flow: luồng tác vụ tuân theo một đường dẫn tuyến tính mà người dùng thực hiện để hoàn
thành 1 tác vụ >> 1 mục tiêu cụ thể
User flow: nghiên cứu và ghi lại các hành động của người dùng thông thường cần thực hiện
để hoàn thành 1 tác vụ được xác định, có thể được thể hiện qua low-fidelity wireflow, simple flow chart hay task diagram
BÀI 6: THIẾT KẾ GIAO DIỆN TRẢI NGHIỆM. QUY TẮC UX/UI DESIGN
Khái niệm UX/UI design Design thinking:
• Discover: user interviews, user research, competitive analysis
• Define: persona, empathy map, journey map
• Ideate: user flow, card sorting, information architecture
• Design: wireframe, visual design, prototype
• Test: usability test, implementing feedback
Nguyên tắc thiết kế: những hướng dẫn, thành kiến và cân nhắc trong thiết kế mà các nhà thiết kế
áp dụng, là lời khuyên cơ bản để tạo ra các thiết kế thân thiện và hấp dẫn. Là trí tuệ, kinh nghiệm
tích lũy của các nhà nghiên cứu 7
nguyên tắc chung: equitable use, flexibility in use, simple and intuitive use,
perceptibleinformation, tolerance for error, low physical effort, size and space for approach and use Quy tắc thiết kế:
Tiêu chuẩn (standards): khuôn khổ về chức năng, thẩm mỹ, chất lượng
Hướng dẫn (guidelines): các đề xuất về cách áp dụng các nguyên tắc thiết kế nhằm mang lại trải
nghiệm tích cực cho người dùng 7 nguyên tắc thiết kế Norman: 8
quy tắc vàng Schneiderman: tính nhất quán, phím tắt (tần suất sử dụng nhiều thì cung cấp
cáchgiảm số lần tương tác), phản hồi thông tin (đối với mỗi hành động), hộp thoại, xử lý lỗi, undo,
hỗ trợ địa điểm kiểm soát nội bộ (người dùng trở thành người khởi xướng hành động thay vì người
phản hồi), giảm tải bộ nhớ ngắn hạn (các màn hình phải đơn giản, giảm tần suất chuyển động của cửa sổ)
10 quy tắc của Nielsen và Molich:
BÀI 7: UX REQUIREMENTS AND USER RESEARCH 1. UX requirements
Nghiên cứu yêu cầu người dùng
Nghiên cứu UX định lượng: usability studies, surveys, first click tests, tree tests, A/B tests Nghiên
cứu định tính: thrographic (dân tộc học), narrative (tường thuật), phenomenologica (hiện tượng
học), grounded theory (lý thuyết cơ bản), case studies (nghiên cứu tình huống)
2. Mental model: mô hình tinh thần, tâm lý, tư duy
Đặc điểm: không ổn định, không đầy đủ, không khoa học, lười suy nghĩ, không có giới hạn rõ ràng
Định luật Jakob: mọi người mong đợi các trang web hoạt động giống nhau
Định luật Tesler: Bất kỳ hệ thống nào cũng có 1 độ phức tạp nhất định không thể giảm được
Luật Postel về robustness: bảo thủ với những gì gửi, linh hoạt và khoan dung với những gì nhận
3. Quy trình nghiên cứu người dùng: Xác định nghiên cứu – Chọn phương pháp nghiên cứu
– Tạo kế hoạch nghiên cứu – Tuyển người tham gia – Tiến hành nghiên cứu – Phân tích và
tổng hợp kết quả - Báo cáo kết quả nghiên cứu
BÀI 8: TASK ANALYSIS – UX FLOW
1. Task analysis: bao gồm hierachy và cognitive
Các mô hình nhận thức: mô tả hoặc dự đoán hiệu suất của người dùng
Mô hình GOMS: Goals, Operators, Methods, Selection rules: là họ mô hình nhận thức về tương
tác giữa người và máy giúp hiểu rõ hơn về luồng nhiệm vụ bằng cách phân tách nó thành các thành phần cơ bản
GOMS cho phép dự đoán về thời gian thực hiện 1 nhiệm vụ và số lượng lỗi mà người dùng có thể mắc phải
Các biến thể: Cấp độ gõ phím KML, CMN-GOMS, NGOMSL, CPM-GOMS 2. Flow diagrams: UX flow
3. Kiến trúc thông tin: bao gồm cấu trúc tổ chức (structure), ghi nhãn (labeling), điều hướng
(navigation), tìm kiếm (search)
8 nguyên tắc thiết kế kiến trúc thông tin: đối tượng, lựa chọn, tiết lộ, lấy ví dụ, cửa trước, phân loại
nhiều lần, điều hướng tập trung, tăng trưởng BÀI 9: PROTOTYPING
4 chỉ số đánh giá phẩm chất của prototype: đại diện, độ chính xác, tương tác, sự tiến hóa – vòng đời của nguyên mẫu Các loại nguyên mẫu:
Low-fidelity: sketching, storyboard
Medium-fidelity: mockup, computer-based simulation, slide show and video prototype High- fidelity: Bảng thuật ngữ Viết tắt Đầy đủ Giải thích HCI Human Computer Interaction tương tác người - máy ISD Interactive System Design
thiết kế hệ thống tương tác ISLC Interactive System Life Cycle
vòng đời thiết kế hệ thống tương tác NPS Net Promoter Score
Thang đánh giá mức độ hài lòng, sử dụng trong usability testing HMI Human Machine Interaction CIP
Cognitive Information Processing GPS General Problem Solver UCD User Centered Design UIMS
User Interface Management System