Nghiên cứu contextual design và áp dụng vào thiết kế giao diện website quản lý giáo dục MindX dành cho đối tượng giảng viên, trợ giảng

Mặt khác, Phương pháp Contextual Design đưa người dùng vào tâm trung của quá trình thiết kế, từ đó giúp chúng ta tìm hiểu rõ hơn về môi trường sử dụng của người dùng và các yếu tố tác độ

Trang 1

BỘ THÔNG TIN VÀ TRUYÈN THÔNG HỌC VIEN CÔNG NGHỆ BƯU CHÍNH VIÊN THONG

KHOA ĐA PHƯƠNG TIỆN

Dé tài: “NGHIEN CỨU CONTEXTUAL DESIGN VÀ ÁP DỤNG VÀO THIẾT

KE GIAO DIEN WEBSITE QUAN LÝ GIÁO DỤC MINDX DÀNH CHO DOI

TƯỢNG GIẢNG VIÊN, TRỢ GIANG.”

Giang viên hướng dẫn: ThS NGUYEN THỊ TUYẾT MAISinh viên thực hiện: DO THI HAI YEN

DI9TKDPT3

2019 - 2024ĐẠI HỌC CHÍNH QUY

HÀ NỘI - 2023

Trang 2

DO AN TOT NGHIỆP ĐẠI HỌC DE CƯƠNG DO AN TOT NGHIỆP ĐẠI HỌC

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA ĐA PHƯƠNG TIỆN Độc lập — Tự do - Hạnh phúc

DE CƯƠNG DO AN TOT NGHIỆP ĐẠI HỌC

Ho và tên sinh viên: DO THỊ HAI YEN

Lớp: DI9TKDPT03 Khoá: 2019 - 2024

Ngành đào tạo: Công Nghệ Da Phương Tiện — Hệ đào tạo: Đại học chính quy

1 Tên đồ án/khoá luận tốt nghiệp: Nghiên cứu contextual design và áp dụng

vào thiết kế giao điện website quản lý giáo dục MindX dành cho đối tượng

giảng viên, trợ giảng.

2 Lý do chọn đề tài:

Quản lý giáo dục là một lĩnh vực đặc biệt phức tạp, đòi hỏi sự quản lý linh

hoạt và hiệu quả của nhiều loại đữ liệu và hoạt động liên quan Nếu không có một hệ thống quản lý chung thi các dữ liệu sẽ thiếu tính đồng bộ va mat nhiều thời gian dé thực hiện các công việc quản lý giảng viên, học viên, tài

liệu, Ngoài những người vận hành, quản lý, học viên thì giảng viên và trợ giảng đóng vai trò quan trọng trong quá trình này Họ là những người sẽ trực

tiếp tương tác với hệ thống quản lý giáo dục hàng ngày Việc hiểu rõ hơn về cách họ tương tác với hệ thống này sẽ mở ra cơ hội dé tối ưu hóa quy trình

làm việc và cải thiện trải nghiệm công việc của họ, giúp các công việc trở

nên thuận tiện hơn, sự đồng bộ đữ liệu tốt hơn.

Là hệ thống trung tâm đào tạo lớn nhất Việt Nam, MindX định hướng phát triển trở thành hệ sinh thái giáo duc và khởi nghiệp - Trung tâm nhân tai Công nghệ toàn cầu Bắt đầu từ Việt Nam, MindX không ngừng nỗ lực tạo ra những Silicon Valley thu nhỏ dé nuôi dưỡng tài năng công nghệ trẻ cho đất nước và thế giới Tuy nhiên hệ thống quản trị nội bộ chưa có, phần lớn các công việc được sắp xếp trên google sheet và hoàn toàn thủ công nên mất nhiều thời gian và công sức Không chỉ vậy còn thiếu tính đồng bộ dữ liệu.

Vậy nên một phần mềm, hệ thống quản tri nội bộ dé công việc quản lý hoc tập được dé dang hơn là điều MindX dang rất cần đến.

DO THI HAI YEN B19DCPT252 i

Trang 3

ĐỀ tạo ra một website hệ thống quản tri nội bộ, các yếu tố quan trọng như giao điện người dùng, tính năng và trải nghiệm người dùng đều cần được tối

ưu hóa Trong đó, giao diện người dùng (DI) và trải nghiệm người dùng

(UX) là hai yếu t6 quan trọng nhất dé tạo ra một website dễ dùng, thân thiện

và đáp ứng được nhu cầu của người dùng Một giao diện người dùng thiết kế tốt và trải nghiệm người dùng tuyệt vời sẽ giúp người dùng cảm thấy thoải

mái và dé sử dụng, từ đó tăng cường trải nghiệm của khách hang và nâng cao

độ hài lòng của khách hàng với website của hệ thống Do đó, việc tối ưu hóa

giao diện người dùng và trải nghiệm người dùng là một phan rat quan trọng trong quá trình xây dựng và phát triển website hệ thống quản lý giáo dục

MindX.

Mặt khác, Phương pháp Contextual Design đưa người dùng vào tâm trung

của quá trình thiết kế, từ đó giúp chúng ta tìm hiểu rõ hơn về môi trường sử dụng của người dùng và các yếu tố tác động đến trải nghiệm của họ Nhờ đó, phương pháp này giúp phát hiện các van đề tiềm 4n trong việc sử dụng sản phẩm hoặc dịch vụ, những vấn đề mà người dùng có thể chưa nhận ra hoặc

chưa báo cáo.

Với phương pháp Contextual Design, chúng ta có thể tiếp cận trực tiếp với người dùng, tìm hiểu được các thói quen, nhu cầu và mục tiêu của họ, cùng với các tình huống sử dụng sản phẩm hoặc dịch vụ Những thông tin này cung cấp một cái nhìn chỉ tiết trong việc xây dựng và phát triển sản pham hoặc dịch vụ, từ đó sẽ có những giải pháp thiết kế hợp lý và nhanh chóng.

Đồng thời, Contextual Design giúp thực tế hóa quá trình thiết kế bằng cách đưa người dùng vào tâm trung của quá trình Các nhà thiết kế sẽ tiếp cận với người dùng, tìm hiểu và trực tiếp quan sát các tình huống sử dụng sản phẩm hoặc dịch vụ Thông qua quá trình này, các nhà thiết kế có thé thực hiện kiểm định các giải pháp thiết kế của mình và đưa ra các điều chỉnh để

sản phâm hoặc dịch vụ trở nên phù hợp với nhu câu của người dùng.

DO THI HAI YEN B19DCPT252 ii

Trang 4

Với những lý do trên, em đã chọn đề tài “Nghiên cứu contextual design

và áp dụng vào thiết kế giao diện website quản lý giáo dục MindX dành cho đối tượng giảng viên, trợ giảng” Đây là một hệ thống quản trị nội bộ, mang tính khép kín trong khuôn khổ MindX nên áp dụng phương pháp này

sẽ tập trung thu nhận thông tin nghiên cứu một cách trực tiếp từ người dùng — nhóm đối tượng giảng viên/trợ giảng, là những người đang công tác, làm việc

tại MindX Việc áp dụng phương pháp Contextual Design sẽ giúp cho quá

trình thiết kế dién ra một cách nhanh chóng, linh hoạt và hiệu quả hơn, từ đó giúp cho sản phẩm đảm bảo được chất lượng, đáp ứng nhu cầu của người

dùng.

Nội dung chính của đồ án: Tông quan về lý thuyết phương pháp Contextual

Design, giao diện website và vai trò của phương pháp nảy trong quy trình

thiết kế giao diện Tìm hiểu những ưu điểm và hạn chế của phương pháp Ứng dụng những lý thuyết đó vào việc nghiên cứu về phần mềm quản lý giáo dục MindX từ đó thiết kế giao diện Website cho hệ thống quản lý giáo dục

MindX.

Cơ sở dữ liệu ban dau:

Ngày giao đề tài: ⁄10/2023

Ngày nộp quyén: /12/2023

GIẢNG VIÊN HƯỚNG DẪN SINH VIÊN THỰC HIỆN

(Ký, ghi rõ họ tên) (Ký, ghi rõ họ tên)

Ths Nguyễn Thị Tuyết Mai Đỗ Thị Hải Yến

TRƯỞNG KHOA

(Ky, ghi rõ họ tên)

DO THI HAI YEN B19DCPT252 iii

Trang 5

DO THI HAI YEN B19DCPT252 iv

Trang 6

DO AN TOT NGHIỆP ĐẠI HỌC MỤC LỤC

MỤC LỤC

DE CUONG DO AN TOT NGHIỆP ĐẠI HỌC se i

LOT CAM DOAN 5c: 2t HH ae vii LOT CẢM ON ooo ccccccccescsssessesssessessesssssssssessssnsssetssssessesssssesitsissieseseeseesiesees vill DANH MỤC CAC KI HIỆU VÀ CHU VIET TÁTT .- 5 s52 <2 ix

DANH MỤC CAC HINH VẼ 5 SE 1221221212121 2211 trai x

DANH MỤC CAC BANG BIÊU 2- 5-5 5£ se se s£szssessesesseserse xii

00210020277 1

L Ly do Chon 1 1 nwnnnn na 1

2 Mục tiêu và nhiệm vụ của nghiÊn CỨU d<- ó5 <6 5s 551 89 55995 959 9599.95592

3 Đối tượng và phạm vi nghiÊH CỨPM 5s SE 1121121121112 xe 3

4 Phương pháp nghien CUU - cv E SE Sky 3

5 Ý nghĩa lý luận và giá trị thực tiễn của dé tài 5c SE EEEEE2EEEEEetrrred 3

6 Cấu trúc đề tài -ccs:SStt2 2E 2 tt HE hờ 4

CHƯƠNG 1: TONG QUAN VE PHƯƠNG PHAP CONTEXTUAL DESIGN

VA GIAO DIEN WEBSITE cssssscssssssssssssssssssssssssssssssssssssssessssessssesssssssesssees 5

1.1 Tổng quan về phương pháp Contextual Design cc.cccccccecescevesveseeveseeeseee 3

1.1.1 Khái niệm và đặc điểm của phương pháp Contextual Design 5

1.1.2 Các nguyên tắc của phương pháp Contextual Design -2- 2: 10

1.1.3 Quy trình của phương pháp Contextual DeSign - s55 *+++3 13

1.1.4 Uu điểm và nhược điểm của phương pháp Contextual Design - 32 1.2 Tổng quan về giao diện WeSÏ(C co SH n0 0 0996 34 1.2.1 Các khái niệm và thuật ngữ "3/7017 Na 34 1.2.2 Các thành phân cơ bản của WebSite - c5 se SEEEEzEerererxee 36 1.2.3 Các nguyên tắc thiết kế giao điện WebSite -©-z©c++c+zs+czccc 37 1.3 Vai trò của phương pháp Contextual Design trong thiết kế giao diện 42 Tiểu kết chương Ï: s- se s£ s2 s£ s£S£Es£ s£SsEs£Esexs£sEseEsessssessrsrse 43

CHƯƠNG 2: NGHIÊN CỨU VE HE THONG QUAN LÝ GIÁO DỤC MINDX

¬ 44

DO THI HAI YEN B19DCPT252 Vv

Trang 7

2.1 Tổng quan về MindX và hệ thống quản lý giáo dục MindX 44

2.1.1 MindX và vẫn đề hiện fqỉ ccsccc5cccttEEttirttttitirtrttirirrriirrrre 44 2.1.2 Hệ thong quản lý giáo dục trực tHyẾN c-5cc5cccreEsrersrrerrrrrred 44 2.1.3Xác định các đối [ƯỢHG SỬ (ỤN SH SH nh key 46 2.2 Nghiên cứu thực địa, thu thập dữ liệu người dùng của hệ thống quản lý giáo dục MindX dành cho đối tượng giảng viên - trợ giảng 47

2.2.1 Phỏng vấn theo ngữ cảnhh - 5c ỲE EEE E111 te 47 2.2.2 Phiên dịch Ait lIỆU - 5c 5c SE E121 E11E21121121121 1111111111111 11111111111 key 3 2.3 Hợp nhat và lên ý tưởng thiết kế giáo diện Website của hệ thống quan lý giáo dục MindX dành cho đối tượng giảng viên - trợ giảng 33

2.3.1 Sơ đô đông cảm (Empathy M4p) -5 52-522522S22E2E2E2EEEeEzEerxzrered 53 2.3.2 Xác định nhóm người dung (User Group) va chân dung người dung (User [2137.177 ee nnn 55 2.3.3Thiết kế hành trình người dùng (User Journey Map) s-5s sec: 56 2.3.4 Xác định van dé người ding (Problem Statement) và sự đáp ứng của sản phẩm (Value PrOPOSition) - 5c 201%2113328832581 E38 E E911 11151112111 E11 1111111111111 ru 57 2.3.5 Xây dung các câu hoi How might we và giải pháp Crazy eight .- 60

2.3.6 Thiét kế môi trường người ding (Information Architecture — Userflow) 64

2.3.7.Các chức năng của sản PRAML sccccecceccescescesvesessessessessessessessessesesieseesesseeees 68 Tiểu kết chương 2: - s2 s s©s£SsSs£Ss£Es£EseEseEseEsersersersersersersersessrse 75 CHUONG 3: THIET KE GIAO DIEN WEBSITE HE THONG QUAN LÝ GIÁO DUC MINDX - 2 2E E21121121121121 2121212122111 rrreg 76 3.1 Xây dựng hệ thống UI style Ø1Ïd€ÏÏTI€ 2 5 <5 5< << 5s se 76 AT 76

3.1.2 KiGu na 77

B.L3 TOON me 4A ăgố1ẽẽ 78

3.1.4 Hé thong nuit DOM Nnnớg ổốốốố.aŨ 79

3.1.5 Hệ thống Oi cccecceccecccccccsessessessessesseesessesessssssssssssesesesesesestsseseeessee 79 3.2 Thiết kế giao diện trực quan dựa trên mô hình người dùng 80

DO THI HAI YEN B19DCPT252 vi

Trang 8

3.3 Tao prototype cho ØÏa0 Gi€M do <5 6 <5 959 999.9599055 89895 96 90

3.4 Sản phẩm hoàn thiéna c.cccscsscsscsscssssssssssssssssssssssssssssssscsscsscsesssesseeseeeeees 90 3.5 Kiểm tra khả năng sử dụng 2° se se se se sessesessesessesee 91 Tiểu kết chương 3 c.scscessessessessessessessessessessessessessesssssssssssssssssessessssessssssseess 91

40000012177 91 TÀI LIEU THAM KHẢO csssssssssssesssssesssssessessessessesssssssesssssssssssessssecseenees 93

DO THI HAI YEN B19DCPT252 vii

Trang 9

DO AN TOT NGHIỆP ĐẠI HOC LOI CAM DOAN

LOI CAM DOAN

Em xin cam đoan rang đồ án tốt nghiệp “Nghiên cứu Contextual Design và ápdụng vào thiết kế giao diện website quản lý giáo dục mindx dành cho đối tượnggiảng viên, trợ giảng” là công trình nghiên cứu của bản thân mình Những phan có sử

dụng tài liệu tham khảo đã được liệt kê và nêu rõ tại phần tài liệu tham khảo Đồngthời, những số liệu hay kết quả trình bày trong đồ án đều mang tính chất trung thực,

không sao chép hay đạo nhái.

Nếu như sai em xin chịu hoàn toàn trách nhiệm va chịu tất cả các ky luật của bộ

môn cũng như Học viện đê ra.

Hà Nội, ngày 10 tháng 12 năm 2023

Sinh viên thực hiện

Yến

Đỗ Thị Hải Yến

Trang 10

DO AN TOT NGHIỆP ĐẠI HỌC LỜI CẢM ƠN

LỜI CẢM ƠN

Lời đầu tiên, em xin được gửi lời cảm ơn chân thành đến tất cả thầy cô và cán

bộ công nhân viên Học viện Công nghệ Bưu chính Viễn thông Các thầy cô không chỉ

là những giảng viên mà còn là ngọn hải đăng dẫn lối, không ngần ngại chia sẻ tri thức

và tâm huyết của mình cho chúng em

Với khoa Da Phương Tiện, nơi mỗi bài giảng, mỗi lời khuyên của các thầy côđều có một ý nghĩa lớn đối với em Em cảm ơn các thầy cô khoa Da Phương Tiện đãtận tình giảng dạy và chỉ bảo em trong suốt quá trình học tập tại Học viện

Đặc biệt, em xin bày tỏ lòng biết ơn sâu sắc tới cô Nguyễn Thị Tuyết Mai,người không chỉ là một người thầy mà còn là một người đồng hành, đã tận tình giúp

đỡ em trong việc hoàn thiện đồ án tốt nghiệp với đề tài “Nghiên cứu Contextual

Design và áp dụng vào thiết kế giao diện website quản lý giáo dục mindx dànhcho đối tượng giảng viên, trợ giảng”

Lời cuối cùng, em xin kính chúc các thầy cô giáo tại Học viện luôn có sức khỏe

déi dao và đạt được nhiều thành hơn trong sự nghiệp trồng người

Tôi xin chân thành cảm ơn!

Hà Nội, ngày 10 tháng 12 năm 2023

Sinh viên thực hiện

Yến

Đỗ Thị Hải Yến

Trang 11

DO AN TOT NGHIỆP ĐẠI HỌC DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT

DANH MỤC CAC KI HIỆU VA CHỮ VIET TAT

Thuật ngữ Tên đầy đủ Y nghĩa

MindX MindX Technology | Trường học công nghệ MindX

School

CD Contextual Design Thiết kế theo ngữ cảnh

UI User Interface Giao dién nguoi dung

UX User Experience Trai nghiệm người dùng

UXDs User Experience Designer | Nhà thiết kế trải nghiệm người

dùng UJM User Journey Map Hành trình người dùng

HMW How Might We Chung ta can lam

IA Information Architecture | Kiến trúc thông tin

Web Website Trang mang

WWW Would Wide Web Mang lưới toàn cau

HTLM Hypertext Markup Ngôn ngữ đánh dau siêu văn bản

Language

URL Uniform Resource Locator | Định vị tài nguyên thống nhất

DNS Domain Name System Hệ thống tên miên

DO THI HAI YEN B19DCPT252 x

Trang 12

DO AN TOT NGHIỆP ĐẠI HỌC DANH MỤC CÁC HÌNH VẼ

DANH MỤC CÁC HÌNH VE

Hình 1.1 Bánh xe niềm vui trong cuộc sống mô ta một sản phẩm tạo ra niềm vui của

4798201175 7

Hình 1.2 Tam giác vui vẻ khi sử dụng mô tả tác động của việc sử dụng sản phẩm 9

Hình 1.3 Biểu đồ sự quang phổ của đồng GẢIH 555cc ềcềEEeEzEerzrerxee 17 Hình 1.4 Vi dụ về Empathy Map cccccccccccsscsscsscssvesvesseseeseessesessessessessesseseesesseves 17

Hình 1.5 Minh hoạ User Group.i cccccccccccccceececsseeceeeseeceeeseeuseeueeenaeeeeneeenseesnseeeneees 19 [cI/10N.\/01/)/8//2/860/ 062,.9,./00aa)dddẢẢÝẢÝÝÝỶÝ 21

Hình 1.7 Minh hoa các thành phân trong UJM cccccccccccecescessesessesessessesessesen 22

Hình 1.8 Minh hoạ các bước xây dung Value pFODOSIfiOH 5s s+s+++++ 24 Hình 1.9 Minh hoạ Crazy ©iÐØÏfS -c + 16338813 E3 EE+EEEEEiEsrrkesrkesrreese 26

Hình 1.10 Minh hoạ Kiến trúc thông tỉH - c5 scEEEEEEEEEEEEEEErkerrre 27 Hình 1.11 Các thành phan có trong User ƒÏow, - 55c cccccEeEeEeEzEerrrerxee 28

Hình 1.12 Các bước xây dựng User ƒÏOWW c3 E + EE+EEE+seerkesreeeses 28

Hình 1.13 Các loại nguyên mẫu (Wir@ffAi€) - +5 ccctcE EcE‡E2EeEsrzkererred 29

Hình 1.14 Minh hoạ các cách vé WIT€ÍTQHN€ - c5 + tt *+EE+vEEsesrekseeesvs 30 Hình 1.15 Giao điện trang quan trị website ArchitectUI — Angular & Bootstrap4 35 Hình 1.16 Top - bar va Header của LazadA - tenses ten <5 tenses teense sO

Hình 1.17 Minh hoạ về vai trò của lưới trong 707275 a 38 Hình 1.18 Bo cục đối xứng được sử dung trong thiết kế giao diện Website 39 Hình 1.19 Ví dụ về cân bằng bất đối xứng - 55c St EEEEEEEetrrrre 40 Hình 1.20 Sử dụng màu tương phản giữa nên và chữ s-5cccsccsctersreerxee 4] Hình 2.1 Những số liệu minh chứng cho sự phát triển của MindX 44 Hình 2.2 Giao diện phan mém quản ly giáo duc Mona bản Website và Mobile 45

Hình 2.3 Những doi tượng sử dụng sản phẩm và những nhận định ban dau về mục đích của các nhóm đổi [HỢPNE 5c 5c ÉEEE1EEEE121E1211112111112.1111 11 te 47 Hình 2.4 Những nhận định ban dau vê mục dich của giảng viên/trợ giảng MindX 49 Hình 2.5 Kết quả phỏng van 6 giảng viên, trợ giảng tại MindX - 3

DO THI HAI YEN B19DCPT252 xi

Trang 13

Hình 2.6 Tổng quan kết quả quá trình dong cảm thể hiện qua Empathy map 34 Hình 2.7 Thơng tin về User group của đối tượng Giảng viên, trợ giảng khi sử dụng hệ

thơng quan lý giáo dục ÌMÍIHđÏÃ Ẳ c1 32181311133 3S EES E1 EESS kg kg key 35

Hình 2.8 Thơng tin về User persona của đối tượng Giảng viên, trợ giảng khi sử dụng

hệ thơng quan lý giáo duc IMIHẠY 5 c1 3358 1351 E35EESEEEESEEESEEEsrrkeeesrkres 56

Hình 2.9 Hanh trình người dùng của đối tượng giảng viên, trợ giảng trong hệ thơng

quản lý giáo AUC ÌÁiHdÏŸ 5 c5 6 3118113111151 1211 1511151111111 1111111 11111 tk vn 57

Hình 2.10 Kiến trúc thơng tin của Website hệ thong quản ly giáo duc MindX 66 Hình 2.11 Luơng người dùng của Website hệ thong quản lý giáo dục MindX 67 Hình 2.12 Phác thảo wireframe của Website hệ thong quản lý giáo dục MindX 75 Hình 3.1 Màu sắc sử dụng trong thiết kế Website hệ thống quản lý giáo dục MindX

Hình 3.2 Quy chuẩn chữ sử dụng trong thiết kế Website hệ thong quản lý giáo duc

Hình 3.5 Lưới sử dụng trong thiết kế Website hệ thong quan lý giáo dục MindY 80

Hình 3.6 Màn hình Đăng nhhậẬp - E331 E331 E133 EEESEEEEEEkrrrersrrkeeerks 80

Hình 3.7 Màn hình TỔng Quani scecccccccccscescescescessessessessessessessessessessesesessesvssesseees 6

Hình 3.8 Màn hình Bang cơng, Bảng lương, Danh sách báo cảo 83 Hình 3.9 Màn hình LỚP CHÚA TƠI c0 E83181358 E39 E3 EEEEEEEESSEkkkerrekeesee 85

Hình 3.10 Màn hình LĨp SẮP M6.ccccccccsccsscsscssssssesvesvesseseessssvesvessessessessessesseseses 86 Hình 3.11 Màn hình Thời khố biéti cccccccccccscessessessesseeseesessessessessesseesessesessese 87

Hình 3.12 Man hình Danh sách don từ và Tao đơn từ 5111111111 xẻ 58 Hình 3.13 Màn hình Thảo ÏUẬN SE HH5 55511111 1K kế 58

Hình 3.14 Màn hình Thơng ĐÁO E383 EE*EEESkkkksrrkkkerrkeesre 69

Hình 3 I5 Màn hình Tài KhOđH c3 13211 1151112511139 1E SE rrrrky 90

DO THI HAI YEN B19DCPT252 xii

Trang 14

DO THI HAI YEN B19DCPT252 xiii

Trang 15

DO AN TOT NGHIỆP ĐẠI HỌC DANH MỤC CÁC BẢNG BIÊU

DANH MỤC CÁC BANG BIEU

Bang 1 1 Bang tóm tat phân biệt dong cam (Empathy) và cảm thông (Sympathy) .16 Bang 1 2 Bang tom tat phân biệt lợi ich của hai cách vẽ wir@ffaine - 30 Bang 1.3 Bảng tom tắt uu và nhược điểm của phương pháp Contextual Design 34

¬ 48

Bang 2.1 Bảng câu hỏi phỏng van giảng vién/tro giảng MindX - 3 Bảng 2.2 Bang tổng hop Problem và Value proposifion - 5s ssscccszsssa ó0 Bang 2.3 Bảng tong hop How might we và Crazy eighi 5s5s+sccszcscce‡ 64 Bang 2.4 Bang tong hợp mục tiêu của từng tính NGng ccccccccececcsceesceseeeseeseeees 65 Bang 2.5 Bang đặc tả chức năng ChAM CÔNg - 5-5255 E EvEEEEEErkerrxee 68 Bang 2.6 Bảng đặc tả chức năng điểm dÌqHÏ, 5 5 525 E2EeEzEeErrrkerrred 69

Bang 2.7 Bang đặc tả chức năng thông ĐÁO - c5 3233333 E+EEEsevseeeess 69

Bảng 2.8 Bảng đặc tả chức năng hỗ HrỢ 5 5-55 tEE 2E EE11E11EEEctxerrreg 70 Bang 2.9 Bảng đặc tả chức năng Phản hồi về lương nếu thấy có vấn để 70

Bang 2.10 Bang đặc tả chức năng đăng ky ÏÓpD - c c S32 E‡+sEEesseeeeses 71 Bang 2.11 Bang đặc ta chức năng nhận x€t hOC VIÊN c5 ete eeneteeeees 71 Bang 2.12 Bảng đặc ta chức nding fqO AON tt cccccccccccc cece eetee ng vn ra 72 Bang 2.13 Bảng đặc ta chức năng ghỉ ChUL cccccccecceeceeteeeseeeneeteeeeeeeeenneeesens 72 Bang 2.14 Bảng đặc tả chức năng nhận xét tài lIỆM c5 33+ +++vvvex+ss 73 Bang 2.15 Bảng đặc tả chức năng xem bài giẢHg c5 + ++svvssssx2 74 Bang 2.16 Bảng đặc tả chức năng thảo luận với học VIÊN - - 55s s+++++++ 74 Bang 2.17 Bảng đặc tả chức năng chỉnh sửa thông tin cá nhâậM - - 55: 75

DO THI HAI YEN B19DCPT252 xiv

Trang 16

DO AN TOT NGHIỆP ĐẠI HỌC MỞ DAU

MỞ ĐẦU

1 Ly do chọn dé tài

Quản lý giáo dục là một lĩnh vực đặc biệt phức tạp, đòi hỏi sự quản lý linh hoạt

và hiệu quả của nhiều loại dữ liệu và hoạt động liên quan Nếu không có một hệ thốngquản lý chung thì các dữ liệu sẽ thiếu tính đồng bộ và mat nhiều thời gian dé thực hiện

các công việc quản lý giảng viên, học viên, tài liệu, Ngoài những người vận hành,

quản lý, học viên thì giảng viên và trợ giảng đóng vai trò quan trọng trong quá trìnhnày Họ là những người sẽ trực tiếp tương tác với hệ thống quản lý giáo dục hàngngày Việc hiéu rõ hơn về cách họ tương tác với hệ thong này sẽ mở ra cơ hội dé toi ưuhóa quy trình làm việc và cải thiện trải nghiệm công việc của họ, giúp các công việctrở nên thuận tiện hơn, sự đồng bộ đữ liệu tốt hơn

Là hệ thống trung tâm dao tạo lớn nhất Việt Nam, MindX định hướng phát triển

trở thành hệ sinh thái giáo dục và khởi nghiệp - Trung tâm nhân tài Công nghệ toàn

cầu Bắt đầu từ Việt Nam, MindX không ngừng nỗ lực tạo ra những thung lũng côngnghệ thu nhỏ để nuôi dưỡng tài năng công nghệ trẻ cho đất nước và thế giới Tuy

nhiên hệ thống quản tri nội bộ chưa có, phần lớn các công việc được sắp xếp trêngoogle sheet và hoàn toàn thủ công nên mat nhiều thời gian và công sức Không chỉvậy còn thiếu tính đồng bộ dữ liệu Vậy nên một phần mềm, hệ thống quản trị nội bộ

dé công việc quản lý học tập được dé dàng hơn là điều MindX đang rất cần đến

Dé tạo ra một website hệ thống quản trị nội bộ, các yếu tố quan trọng như giaodiện người dùng, tính năng và trải nghiệm người dùng đều cần được tối ưu hóa Trong

đó, giao diện người dùng (UI) và trải nghiệm người dùng (UX) là hai yếu tố quantrọng nhất để tạo ra một website dễ dùng, thân thiện và đáp ứng được nhu cầu củangười dùng Một giao diện người dùng thiết kế tốt và trải nghiệm người dùng tuyệt vời

sẽ giúp người dùng cảm thấy thoải mái va dé sử dụng, từ đó tăng cường trải nghiệmcủa khách hàng và nâng cao độ hài lòng của khách hàng với website của hệ thống Do

đó, việc tối ưu hóa giao diện người dùng và trải nghiệm người dùng là một phan rat

quan trọng trong quá trình xây dựng và phát triển website hệ thống quản lý giáo dụcMindX.

Mặt khác, Phương pháp Contextual Design đưa người dùng vảo trung tâm của

quá trình thiết kế, từ đó giúp chúng ta tìm hiểu rõ hơn về môi trường sử dụng của

DO THI HAI YEN B19DCPT252 1

Trang 17

người dùng và các yêu tố tác động đến trải nghiệm của họ Nhờ đó, phương pháp nàygiúp phát hiện các van đề tiềm ẩn trong việc sử dụng sản phẩm hoặc dịch vụ, nhữngvấn đề mà người dùng có thể chưa nhận ra hoặc chưa báo cáo

Với phương pháp Contextual Design, chúng ta có thể tiếp cận trực tiếp vớingười dùng, tìm hiểu được các thói quen, nhu cầu và mục tiêu của họ, cùng với cáctình huống sử dụng sản phẩm hoặc dịch vụ Những thông tin này cung cấp một cái

nhìn chỉ tiết trong việc xây dựng và phát triển sản phẩm hoặc dịch vụ, từ đó sẽ có

những giải pháp thiết kế hợp lý và nhanh chóng

Đồng thời, Contextual Design giúp thực tế hóa quá trình thiết kế bằng cách đưangười dùng vào trung tâm của quá trình Các nhà thiết kế sẽ tiếp cận với người dùng,tìm hiểu và trực tiếp quan sát các tình huống sử dụng sản phẩm hoặc dich vụ Thôngqua quá trình này, các nhà thiết kế có thể thực hiện kiểm định các giải pháp thiết kếcủa minh và đưa ra các điều chỉnh dé sản phẩm hoặc dịch vụ trở nên phù hợp với nhu

cầu của người dùng

Với những lý do trên, tác gia đã chọn đề tài “Nghiên cứu Contextual Design

và áp dụng vào thiết kế giao diện website quản lý giáo dục MindX dành cho đốitượng giảng viên, trợ giảng” Đây là một hệ thống quản trị nội bộ, mang tính khépkín trong khuôn khổ MindX nên áp dụng phương pháp này sẽ tập trung thu nhận thông

tin nghiên cứu một cách trực tiếp từ người dùng — nhóm đối tượng giảng viên/trợ

giảng, là những người đang công tác, làm việc tại MindX Việc áp dụng phương pháp

Contextual Design sẽ giúp cho quá trình thiết kế diễn ra một cách nhanh chóng, linhhoạt và hiệu quả hon, từ đó giúp cho sản pham đảm bảo được chất lượng, đáp ứng nhucầu của người dùng

2 Mục tiêu và nhiệm vụ của nghiên cứu

a Mục tiêu

- _ Tổng quan về lý thuyết phương pháp Contextual Design, giao diện website và

vai trò của phương pháp này trong quy trình thiết kế giao diện

- Tim hiểu những đặc điểm, ưu điểm và hạn chế của phương pháp

- Ung dụng những lý thuyết đó vào việc nghiên cứu về ứng dụng quản lý giáo

dục

b Nhiệm vụ

Trang 18

Nghiên cứu tập trung vào việc thiết kế giao diện phần mềm quản lý giáo dụcMindX dựa trên phương pháp Contextual Design, bao gồm các nhiệm vụ sau:

- _ Nghiên cứu phương pháp Contextual Design, thiết kế giao điện website

- Nghiên cứu về website, các thành phần cơ ban của website

- _ Nghiên cứu về hệ thống quản lý nội bộ MindX, xác định các đối tượng sử

dung và phạm vi đối tượng cụ thé.

- Neghién cứu và phân tích những thông tin thu thập được từ người dùng mục

tiêu là đối tượng giảng viên, trợ giảng để hiểu những mong muốn, nhu cầu

của người dùng và xây dựng giải pháp thiết kế giao điện website hệ thống

quản lý giáo dục MindX.

- _ Thiết kế giao diện cho website hệ thống quản lý giáo dục MindX dựa theo ly

thuyết đã nghiên cứu

3 Đối tượng và phạm vi nghiên cứu

a Đối tượng nghiên cứu

- Phuong pháp Contextual Design.

- Website và các đặc điểm của website

- _ Hệ thống quản lý giáo dục MindX

- Giang viên, trợ giảng tại MindX.

b Phạm vi nghiên cứu

- Phan mềm hệ thống quan lý giáo dục MindX

- Thời gian: dé tài được thực hiện trong 2 tháng (kế từ tháng 10/2022 - tháng

12/2022).

- _ Nội dung: Thiết kế giao điện cho website hệ thống quản lý giáo dục MindX

dựa theo phương pháp Contextual Design.

4 Phương pháp nghiên cứu

Phương pháp nghiên cứu lý thuyết : phân tích và tong hợp tài liệu, dùng số liệu.Phương pháp thu thập dữ liệu người dùng : nghiên cứu định lượng (khảo sáttrực tiếp nhóm đối tượng nghiên cứu) và nghiên cứu định tính (nghiên cứu quan sát)

5 Ý nghĩa lý luận và giá trị thực tiễn của đề tài

Trang 19

Contextual Design là một phương pháp thiết kế tiên tiến, tập trung vào việc xâydựng sản phẩm phần mềm bang cách hiểu rõ và đáp ứng nhu cầu của người dùng trongmôi trường thực tế của họ Phương pháp này nhân mạnh việc phân tích kỹ bối cảnh sử

dụng dé đưa ra giải pháp thiết kế phù hợp nhất nhằm tối ưu hoá trải nghiệm ngườidùng Trong khuôn khổ của đề tài đồ án tốt nghiệp này, việc áp dung các nguyên tắccủa phương pháp vào việc xây dựng và phát triển giao điện Website quản lý giáo dụcMindX sẽ giúp hiểu sâu sắc về cách thức giảng viên, trợ giảng tương tác với hệ thống

và giúp cải thiện đáng kể hiệu suất công việc của họ Nhờ việc phân tích nhu cầu và

mong muốn cụ thê của họ sẽ trực tiếp hướng tới quá trình thiết kế, đảm bảo giao diệncuối cùng sẽ phản ánh chính xác và hỗ trợ hiệu quả công việc quản lý giáo dục Kếtquả của nghiên cứu cũng giúp nâng cao chất lượng thiết kế giao diện và mang lại sựhài lòng cao nhất cho đối tượng giảng viên, trợ giảng thông qua việc cung cấp một

giao diện thân thiện và dễ sử dụng.

Về mặt thực tiễn, đề tài nghiên cứu này sẽ là một bản tóm gọn về phương phápContextual Design và cách ứng dụng nó trong thiết kế giao, giúp ich cho những nhàthiết kế trẻ hiểu hơn về phương pháp quan trọng này trong thiết kế Việc áp dụng các

nguyên tắc của phương pháp này sẽ không chỉ giúp tăng cường hiệu quả công việc cho

giảng viên, trợ giảng mà còn giảm thiểu đáng kể thời gian và công sức cần thiết cho

các nhiệm vụ quản lý Một giao diện được thiết kế dé cải thiện khả năng quản lý lớphọc, đánh giá học viên, quản lý tài liệu, đóng góp trực tiếp vào quá trình nâng cao chất

lượng quản lý, giáo dục của MindX.

6 Cấu trúc đề tài

Với đề tài “Nghiên cứu Contextual Design và áp dụng vào thiết kế giao diện

website quản lý giáo dục MindX dành cho đối tượng giảng viên, trợ giảng”, bốcục gồm ba chương chính:

Chương 1: Tổng quan về phương pháp Contextual Design và giao diện Website

Chương 2: Nghiên cứu hệ thống quản lý giáo dục MindX

Chương 3: Thiết kế giao điện website quản lý giáo dục MindX

Trang 20

DO ÁN TOT NGHIỆP ĐẠI HOC CHƯƠNG 1 : TONG QUAN VE PHƯƠNG PHÁP CONTEX

CHƯƠNG 1: TONG QUAN VE PHƯƠNG PHÁP CONTEXTUAL

DESIGN VA GIAO DIEN WEBSITE

Chương | tập trung tim hiểu về những kiến thức liên quan đến dé tài nghiên

cứu bao gồm các khái niệm về website, những đặc điểm trên website, lý thuyết vềphương pháp Contextual Design, quy trình và tầm quan trọng của phương pháp trongthiết kế giao diện

1.1 Tổng quan về phương pháp Contextual Design

1.1.1 Khái niệm và đặc điểm của phương pháp Contextual Design

1.1L] Khải niệm của phương pháp Contextual Design

Thiết kế theo ngữ cảnh (Contextual Design) là một quy trình thiết kế lấy ngườidùng làm trung tâm được xây dung dựa trên nghiên cứu thực địa chuyên sâu dé thúcđây thiết kế sáng tạo Thiết kế theo ngữ cảnh được phát minh lần đầu tiên vào năm

1988 và ké từ đó đã được sử dụng trong nhiều ngành công nghiệp khác nhau và được

giảng dạy ở các trường đại học trên toàn thế giới Đây là một quy trình thiết kế giaodiện người dùng hoàn chỉnh bắt nguồn từ truy vấn theo ngữ cảnh, kỹ thuật thu thập dữliệu hiện trường tiêu chuẩn, phổ biến Contextual Design bao gồm các kỹ thuật dé

phân tích và trình bay di liệu người dùng, thúc đây ý tưởng từ dit liệu, thiết kế các giảipháp sản phẩm cụ thé và lặp lại các giải pháp đó với người dung [1]

Ba mươi năm trước, thông điệp của Thiết kế theo ngữ cảnh là: trước tiên hãyhiểu người dùng của bạn, sau đó thiết kế một sản phẩm mạch lạc phù hợp với nhiệm

vụ bạn muốn hỗ trợ Không tạo danh sách các tính năng dé đạt được mục đích đã địnhtrước và được cấu trúc theo cách có ý nghĩa đối với các kỹ sư Phù hợp với cuộc sống

có nghĩa là thiết kế cho một nhiệm vụ mạch lạc [1] Thiét ké theo ngữ cảnh đã được sửdụng dé thiết kế các sản phâm và hệ thống kinh doanh, trang web, thiết bị di động, ứngdụng di động, thiết bị y tế, sản phẩm tiêu dùng và điện tử, điện tử ô tô, sản phâm thôngtin kinh doanh, CRM, hệ thống sản xuất, v.v

Trong cuốn “Contextual Design: Defining Customer-Centered Systems” tác giảHugh Beyer va Karen Holtzblatt đã nhận định răng "Contextual Design" là một quátrình thiết kế tập trung vào khách hàng dé đáp ứng các van dé của khách hàng Nó hỗ

trợ việc tìm hiểu cách mọi người làm việc, để từ đó phát hiện ra các giải pháp thiết kếtối ưu cho thực hành công việc Phương pháp này bao gồm các kỹ thuật quản lý khía

Trang 21

DO ÁN TOT NGHIỆP ĐẠI HOC CHƯƠNG 1: TONG QUAN VE PHƯƠNG PHÁP CONTEX

cạnh giao tiếp giữa các thành viên trong nhóm thiết kế đa năng và giữ cho nhà thiết kếtập trung vào dữ liệu Nó dẫn dat nhóm qua quá trình phát hiện ra ý nghĩa thiết kế choviệc tái thiết kế thực hành công việc, phát triển phản hồi của doanh nghiệp, va cấu trúc

hệ thông hỗ trợ cho quá trình tái thiết kế [3]

Nhìn chung, Phương pháp "Contextual Design" là một khuôn khổ trong quátrình thiết kế sản phẩm và hệ thống, đặc biệt là trong lĩnh vực tương tác con người-máy tính (HCI) Thiết kế theo ngữ cảnh là quy trình từng bước dé thu thập dữ liệu thực

địa và sử dụng dữ liệu đó dé thiết kế bat kỳ loại sản phẩm nao có chứa thành phan kỹ

thuật Đây là phương pháp tiếp cận dựa trên ngữ cảnh, tập trung vào việc hiểu và phântích cách người dùng tương tác với công nghệ trong môi trường và hoàn cảnh thực tếcủa họ.

1.1.1.2 Đặc điểm của phương pháp Contextual Design

Contextual Design có thé dùng trong dự án cá nhân hoặc dựa trên nhóm Nóxây dựng theo cách thu hút sự tham gia của các bên liên quan và các thành viên kháctrong nhóm dé dam bao sự ủng hộ từ doanh nghiệp và đảm bảo giải pháp mà công ty

có thê cung cấp thành công Sau đó, nó có thể được áp dụng vào thực tiễn phát triển

hiện tại của công ty Thực tiễn phát triển thay đổi theo thời gian, nhưng tat cả đều cầnđịnh hướng thiết kế rõ rang [6]

Contextual Design được phát triển và tiếp tục được thúc đây bởi sự nhận thứcrằng sản phẩm luôn là một phần của hoạt động thực tiễn, được sử dụng trong bối cảnh

của các công cụ và quy trình thủ công khác dé tạo nên cuộc sống và công việc chungcủa người dùng Bản chất của thiết kế sản phẩm là việc thiết kế lại công việc và cuộcsống của người dùng, dựa trên các khả năng công nghệ dé thiết kế một cách thức mới

và tốt hơn dé người dùng sống cuộc sống của họ, đạt được mục đích của họ, tiếp cậnnhững người quan trọng đối với họ và thực hiện các hoạt động của họ bằng cách sửdụng những sản phẩm tốt hơn công cụ và hệ thống [6] Sự hiểu biết này càng trở nênthuyết phục hơn khi điện thoại thông minh, máy tinh bảng và các thiết bị khác tiếp tụcthâm nhập vảo thị trường của chúng ta.

Vì cuộc sống và công nghệ gắn bó chặt chẽ với nhau nên người dùng phải được

hiểu trong bối cảnh riêng của họ Kiểm tra khả năng sử dụng, tập trung vào bảng câu

hỏi, bất kỳ kỹ thuật thu thập dữ liệu nao với các câu hỏi cố định và nhiệm vụ được xácđịnh trước, đưa người dùng ra khỏi bối cảnh cuộc sống của họ Có bối cảnh phong phú

Trang 22

về cuộc sống thực của người dung thì sẽ hiểu van dé thiết kế quan trọng nhất: động co,

giá trị, cảm xúc, chiến lược, cách giải quyết của người dùng, sự gián đoạn trong thời

gian thực và sự tương tác với người khác, cũng như những ràng buộc do điều kiện thực

tế áp đặt [5] Bởi vậy, cốt lõi của Contextual Design là hiểu người dùng trong bối cảnhriêng của họ, sử dụng sự hiểu biết đó để phát triển cái nhìn sâu sắc về cuộc song cua

họ va áp dụng cái nhìn sâu sắc đó vào một van đề thiết kế

Thiết kế theo ngữ cảnh liên tục đưa nhóm/cá nhân thiết kế vào dữ liệu và bối

cảnh cuộc sống của người dùng, đầu tiên là trong các cuộc phỏng vấn, sau đó là trong

các phiên diễn giải, thể hiện cuộc sống của người dùng trong các mô hình, thúc đâyđôi mới từ dữ liệu, thiết kế để đáp ứng các nhu cầu cụ thé, các vẫn đề trong dữ liệu vàcuối cùng quay trở lại với người dùng để lặp lại và tinh chỉnh các giải pháp được đềxuất Điều này sẽ giúp chúng ta thực sự năm bắt được sự phức tạp trong cuộc sống của

người dùng Điều đó giúp tránh khỏi xu hướng gần như không thê tránh khỏi là thêm

các tính năng “có thể hữu ích” - một tín hiệu chắc chắn về thiết kế quá mức Và nóđảm bảo răng khi phải đưa ra quyết định nhanh chóng, sự hiểu biết trực quan sẽ đượcđiều chỉnh thông qua việc nghiên cứu kỹ lưỡng nhiều lần để phản ánh quan điểm củangười dùng.

Contextual Design cũng nhấn mạnh đến cách một sản phẩm tạo ra niềm vui chongười dùng Nó bao gồm bốn khái niệm xác định cách các sản phẩm thú vị chạm đếncốt lõi của động cơ người dung [2]

Hình 1.1 Bánh xe niềm vui trong cuộc sống mô tả một sản phẩm tạo ra niềm vui của

người dùng Các khái niệm xác định được từ nghiên cứu “Contextual design for mobile

applications” của R Garg và A Kumar năm 2013 này là trọng tâm dé hiểu những gi

cần thiết dé thiết kế cho cuộc sống va là trong tâm dé thiết kế sản phẩm cho người

Trang 23

dùng sẽ có trải nghiệm tuyệt vời Như hình 1.1 chúng ta thấy bốn khái niệm về Bánh

xe niềm vui cho thấy các sản phẩm nâng cao niềm vui cuộc sống như thé nao, chúng

làm cho cuộc sống của chúng ta phong phú và trọn vẹn hơn:

- Accomplish (Thành tích): Trao quyền cho người dùng dé đạt được tat cả các

mục đích trong cuộc sống, công việc và cá nhân của họ, dù họ ở đâu, trong

khoảng thời gian nào họ có, ở mọi địa điểm, thời gian và nền tảng Hỗ trợ

động lực cho cuộc sống bằng cách giúp người dùng lấp đầy mọi khoảnhkhắc bằng các hoạt động hữu ích hoặc thú vi Thiết kế với mong muốn

người dùng sẽ bị phân tâm, phân tán sự chú ý của họ sang nhiều hoạt động.Thành tựu trong cuộc sống là động lực chính tạo nên trải nghiệm tuyệt vờitrong Bánh xe Niềm vui trong Cuộc sống

- Connection (Kết nối): Tăng sự thân mật và cộng tác trong các mối quan hệ

thực sự của người dùng Giúp họ liên lạc thường xuyên, có những điều cógiá trị chung để nói và chia sẻ cũng như tìm những việc để làm cùng nhaukhi mọi người theo đuôi cuộc sống riêng của mình Thúc đây sự kết nối thực

sự trong các mối quan hệ kinh doanh cũng như các mối quan hệ cá nhân

Các cộng đồng cùng quan tâm, trực tuyến hoặc trực tiếp sẽ tạo ra những mốiquan hệ thực sự và cảm giác kết nối nếu họ ủng hộ việc liên lạc thườngxuyên, cung cấp nội dung trò chuyện và thúc day các hoạt động chia sẻ

- Identity (Bản sắc): Hỗ trợ ý thức về bản thân cốt lõi của người dùng va cho

phép họ thể hiện ý thức về bản thân đó trong những gi ho làm và cách họ théhiện với người khác Xác định các yếu tố nhận dạng cốt lõi liên quan đếnhoạt động được sản phẩm hỗ trợ và mang lại giá trị giúp nâng cao cảm giáccủa người dùng về bản thân tốt nhất của họ Nếu mọi người đang có mộtdanh tính mới, hãy giúp họ tạo ra danh tính đó thông qua các ví dụ về những

gì người khác giống họ làm và bằng cách kiểm tra với bạn bè hoặc đồngnghiệp đáng tin cậy đề xác định xem hành vi, lựa chọn và giá trị của họ có

phù hợp hay không Các tính năng hỗ trợ sự thành công trong các hoạt động

cốt lõi đối với bản sắc con người sẽ làm tăng giá trị tổng thé của sản phẩm

- Sensation (Cảm giác): Cung cấp cho người dùng những khoảnh khắc thú vị,

sảng khoái thông qua màu sắc, âm thanh, chuyên động và hoạt ảnh Thiết kế

thâm mỹ hiện đại được người dùng mong đợi ngày nay, thêm các kích thích,

Trang 24

đồ họa và hoạt ảnh thích hợp dé tăng cường tương tác và tạo ra các sảnphẩm gợi lên nụ cười Tuy nhiên, không nên thêm đồ họa hoặc hoạt ảnh vôích hoặc gây mất tập trung, điều này chỉ gây khó chịu cho người dùng vàlàm giảm thoải mái Cảm giác làm tăng giá trị của bất ky sản phẩm nào

nhưng là sản phẩm cốt lõi tập trung vào trò chơi, hệ thống giải trí, âm nhạc

và các thê loại sản phâm lây cảm giác làm trung tâm.

101281 9|SSEH UL

Hình 1.2 Tam giác vui vẻ khi sử dụng mô tả tác động của việc sử dụng sản phẩm

Tác giả của nghiên cứu “Contextual design for mobile applications” cũng chỉ ra

ba khái niệm thú vị về Tam giác niềm vui khi sử dụng cho thấy việc hủy ký hiệu củasản phẩm có thể nâng cao (hoặc làm giảm) niềm vui khi sử dụng bằng cách tạo ranhững khoảnh khắc “ma thuật” hoặc băng cách loại bỏ những rắc rỗi mà mọi ngườimong đợi từ công nghệ Như hình 1.2 cho thấy rõ điều đó:

- Direct into Action (Trực tiếp đi vào hành động): Cung cấp sự thực hiện ngay

lập tức, đơn giản cho các ý định cốt lõi Nghĩ về những gì mong muốn, nhận

được giải pháp mà không cần suy nghĩ, không hình dung, không cần quyết

định Tác giả có viết “Hãy suy nghĩ thay tôi, hãy cho tôi thứ tôi muốn màkhông cần phải yêu cầu, giống như Pandora đã làm với âm nhạc khi nó mới

ra mắt Tạo ra kết quả mong muốn mà không có hoặc có rất it sự chỉ đạo từ

tôi.” Trong số các khái niệm hay ho trong Tam giác niềm vui khi sử dụng,Trực tiếp thành hành động có tác động nhiều nhất đến niềm vui của ngườidùng khi sử dụng sản phẩm Trực tiếp kêu gọi hành động không chỉ manglại khả năng sử dụng tốt và ít lần nhấp chuột hơn; nó kêu gọi hành động

ngay lập tức đề có thể đạt được mục đích trong khoảnh khắc

- The Hassle Factor (Yéu t6 rac rôi): Loại bỏ tất cả những bat tiện, thiết lập,

căm, đăng nhập, hộp, tùy chỉnh và rắc rôi vê công nghệ khỏi sản phâm Tạo

Trang 25

niềm vui bang cách loại bỏ mọi trục trac và bat tiện làm gián đoạn dòngchảy cuộc sống Trải nghiệm người dùng “đủ tốt” không còn đủ tốt nữa.Người dùng không còn phải chịu đựng những rắc rối về kỹ thuật và khôngcòn coi trọng chức năng mới nếu nó không được đưa vào hoạt động ngay

lập tức Yếu tổ rắc rối kết hợp với Trực tiếp hành động trong chỉ số thú vị détạo ra một trọng tâm thiết kế mạnh mẽ để tạo ra niềm vui khi sử dụng sản

phẩm.

- The Delta (Hệ số đo lường): Giảm thời gian tìm hiểu công cụ xuống mức

gần bằng 0 băng cách xây dựng trên các mô hình tương tác đã biết và cáchành động tương tác tự nhiên như chạm và giọng nói Thúc đây người dùng

sử dụng bằng những gợi ý nhỏ Giảm độ phức tạp; giảm số lượng những thứngười dùng phải biết và những nơi người dùng phải đến để sử dụng sảnphẩm Tránh thiết kế các hành động và lựa chọn làm tăng tính phức tạp Hãy

sử dung sản phẩm một cách trực tiếp đến mức không cần phải học gi cả

1.1.2 Các nguyên tắc của phương pháp Contextual Design

Một số ít nguyên tắc chính đã định hình sự phát triển của Thiết kế theo ngữcảnh vả cung cấp động lực chính cho việc sử dụng nó như một công cụ thiết kế

[7I-Nguyên tắc 1: Thiết Thiết kế hệ thống phải hỗ trợ và mở rộng thực hành

làm việc của người dùng

Thiết kế theo ngữ cảnh bắt nguồn từ việc quan sát rằng bất kỳ công nghệ hoặc

hệ thống nào cũng luôn nằm trong bối cảnh môi trường lớn hơn - và việc đưa ra cácgiải pháp mới luôn thay đổi môi trường cho người dùng Trong Thiết kế theo ngữcảnh, thuật ngữ thực hành công việc đề cập đến tập hợp hành vi, thái độ, mục tiêu và ý

định phức tạp và chỉ tiết đặc trưng cho một nhóm người dùng trong một môi trường cụthé Tất cả các hoạt động và lĩnh vực thiết kế đều được đặc trưng bởi thực hành công

việc - không chỉ ở nơi làm việc [7] Ví dụ, rõ rang có những cách làm việc gắn liền với

các hoạt động kinh doanh như công việc văn phòng, nhưng cũng có những "cách làm

việc" gan liền với các sự kiện trong cuộc sống như mua hang với tư cách là người tiêudùng, lái ô tô, chơi nhạc và thậm chí xem tivi Nguyên lý trung tâm của Thiết kế theo

Trang 26

ngữ cảnh là mọi công nghệ, sản phẩm hoặc hệ thong déu phai duoc thiết kế dé hỗ tro

và mở rộng thực tiễn làm việc của người dùng Nếu làm tốt thì sẽ được chấp nhận và

đánh giá cao; nếu không làm được sẽ gây ra sự bất mãn, bực bội, né tránh và có cách

giải quyết

Ý nghĩa đối với người thiết kế: Để tạo ra một sản phẩm thành công, trước tiên

cần lưu ý rõ ràng về cách thực hành công việc của người dùng và thiết kế cho sản

pham đó.

Nguyên tắc 2: Mọi người đều là chuyên gia trong lĩnh vực họ làm - nhưng

không thể trình bày rõ ràng cách thực hành công việc của mình

Đầu tiên là mọi người không có ý thức về thực tiễn công việc của mình; tất cảkiến thức của họ đều là ngầm Điều này đặc biệt đúng khi con người bị đưa ra khỏi bốicảnh môi trường hàng ngày của họ Chỉ khi người dùng đắm mình trong bối cảnh sửdụng thông thường, họ mới có thé nhận thức được thực tiễn công việc của chính mình[7] Họ trở nên “nhận thức được việc đang làm”, như Michael Polanyi đã nói (Polanyi1958) Thứ hai, thực tế công việc rất phức tạp, da dang và dữ liệu thiết kế hữu ich

được ấn giấu trong các chỉ tiết hàng ngày Nhiều hệ thống không dat được kỳ vọng vi

chúng không xem xét đến những chỉ tiết đường như không quan trọng trong thực tiễn

công việc - những chi tiết không có sẵn cho người dùng một cách có ý thức khi họ

không tham gia vào công việc đang diễn ra.

Contextual Design cho rằng các thành viên trong nhóm thiết kế phải đi vào hiện

trường, quan sát và nói chuyện với người dùng trong môi trường sông hoặc làm việc tựnhiên của họ - bối cảnh tự nhiên của họ - để hiểu được thực tiễn công việc Đây lànguyên tắc của bối cảnh mà từ đó quy trình được đặt tên Khía cạnh này của Thiết kếngữ cảnh thúc đây công việc của các phương pháp dân tộc học trước đó (Garfinkel1967) nhưng mở rộng nó theo những cách quan trọng.

Ý nghĩa đối với nhà thiết kế: Sử dụng các cuộc phỏng vấn thực địa đề tiết lộ cáckhía cạnh ngầm trong thực tiễn làm việc của người dùng, cách giải quyết và chiến lược

mà họ có thê không bao giờ trình bày rõ ràng nhưng vẫn cấu trúc công việc của mình

Nguyên tắc 3: Thiết kế tốt cần có sự hợp tác và tham gia của người dùng

Ngay cả khi ở trong ngữ cảnh cụ thể, người dùng không phải lúc nào cũng cóthé trình bày rõ ràng về hành vi cũng như mục đích cụ thể của họ Bởi vậy, Contextual

Design quy định các cuộc phỏng vấn không phải là quan sát thuần túy mà thu hút

DO THI HAI YEN B19DCPT252 lãi

Trang 27

người dùng thảo luận và suy ngẫm về hành động, ý định và giá trị của chính họ Ngườiphỏng vấn tích cực đặt câu hỏi cho người dùng và thảo luận với họ để rút ra và hiểu

chỉ tiết về thực tiễn công việc của họ Do đó, người phỏng vấn không tham gia chỉ với

một danh sách các câu hỏi được tạo san, như trong một cuộc khảo sát hoặc nhóm tập

trung, mà áp dụng mô hình mối quan hệ chủ - người học việc, tìm cách hiểu công việc

của người dùng như một người học việc từ một bậc thay, vì công việc đang diễn ra [2]

Khái niệm hợp tác quan trọng này cũng phát huy tác dụng trong việc sử dụng

các nguyên mẫu trên giấy của Thiết kế theo ngữ cảnh và các lần lặp lại ngắn với người

dùng để tạo ra thiết kế chỉ tiết Suy nghĩ đăng sau nguyên mẫu lặp đi lặp lại của Thiết

kế theo ngữ cảnh đã phát triển song song và ảnh hưởng đến sự phát triển của các kỹthuật thiết kế có sự tham gia trong những năm 1980 và 1990 (Schuler và Namioka1993).

Ý nghĩa đối với người thiết kế: Đừng chỉ quan sát khi bạn ở hiện trường Đặtcâu hỏi và đề xuất cách giải thích về hành động và động cơ của người dùng Nói rõnhững gì quan trọng về công việc cùng nhau

Nguyên tắc 4: Thiết kế tốt có tính hệ thốngBắt kỳ thiết kế tốt nào cũng xem xét hệ thống và tác động của nó đối với ngườidùng nói chung Ví dụ tay cầm trên Mini Cooper phản ánh tính thâm mỹ của toàn bộchiếc xe; Các thành phần giao diện người dùng đặc trưng của iPhone (bao gồm cả cửchỉ) được thé hiện xuyên suốt toàn bộ thiết kế và ứng dụng: tất cả các phần của trang

amazon.com déu hỗ trợ tập trung vào sở thích của người dùng, xếp hang của cộngđồng, tài liệu liên quan và mua hàng dễ dàng Và tat cả các trang của trang web trônggiống như chúng là một phan của trang web - không thé thay đổi một trang duy nhất[4].

Contextual Design cung cấp các phương pháp giúp duy trì thiết kế mạchlạc Tam nhìn Thiết kế theo ngữ cảnh cung cấp định hướng mạch lạc ở cấp độcao; bảng phân cảnh cung cấp sự mạch lạc của nhiệm vụ; thiết kế môi trường người

dùng đảm bao sự gắn kết về cau trúc trên toàn hệ thống Tất cả các phương pháp này

khuyến khích người thiết kế suy nghĩ về toàn bộ hệ thống, thay vì coi mỗi phần như

một vấn đề độc lập cần được giải quyết Điều này cung cấp cho người dùng một cách

liên mạch

Trang 28

Ý nghĩa đối với người thiết kế: Sử dụng các biểu diễn cụ thể để duy trì sự gắn

kết của hệ thống: chức năng, cấu trúc, bố cục và luồng trên toàn hệ thống.

Nguyên tắc 5: Thiết kế phụ thuộc vào các biểu diễn rõ ràngKhi mọi người thiết kế, họ tạo ra những biéu diễn vật lý cho các khái niệm của

họ Dù được viết trên mặt sau của khăn ăn hay được ghi lại bằng công cụ tạo mô hìnhcao cấp, các nhà thiết kế đều cần sự thé hiện hữu hình những suy nghĩ của họ Từ bảnphác thảo đến sơ đồ chính thức, bản vẽ cho phép các nhà thiết kế thực hiện ý tưởng,năm bắt suy nghĩ của họ, chia sẻ với người khác, thảo luận và xác định điểm yếu

Contextual Design hỗ trợ nhu cầu thé hiện vật lý này trong suốt quá trình thiết

kế Mô hình công việc giúp thực hành công việc, cách người dùng tiếp cận công việccủa họ, rõ ràng, công khai và có thé chia sẻ Thiết kế môi trường người dùng cho thấycầu trúc của hệ thống mà người dùng đã trải nghiệm Mỗi kỹ thuật trong Thiết kế theongữ cảnh đều có cách trình bày hữu hình riêng để hỗ trợ thực hiện công việc, phi lạikết quả và chia sẻ kết quả đó với người khác

Ý nghĩa đối với nhà thiết kế: Sử dung bản vẽ, bản phác thảo và mô hình dé nắmbắt những cân nhắc thiết kế quan trọng ở mỗi bước của quy trình

1.13 Quy trình của phương pháp Contextual Design

Năm 2016, theo tác giả cuốn sách “Contextual Design — Design for life”

Contextual Design có ba giai đoạn Đầu tiên, thu thập dữ liệu thực dia và diễn giải dữliệu đó với tư cách là một nhóm Bằng cách nắm bắt các vấn đề và lập mô hình trảinghiệm của từng người dùng, nhóm sẽ ghi lại dữ liệu mà sau này sẽ được tổng hợp déxây dựng cái nhìn mạch lạc về thực tiễn và trải nghiệm của toàn bộ người dùng Giaiđoạn này là về việc thu thập dữ liệu thiết kế tốt nhất trong khi liên quan và thực hiện.Thứ hai, nhóm sử dụng bức tranh tông thé đó dé thúc day việc lên ý tưởng, phát minh

ra các khái niệm sản phẩm mới từ dữ liệu người dùng Thứ ba, những điều này đượcthiết kế với giao diện và hành vi người dùng cụ thé, được xác thực và lặp lại với người

dùng Thiết kế theo ngữ cảnh có thé được sử dụng để tạo, tỉnh chỉnh hoặc mở rộng cácsản phẩm hiện có, thiết kế cho các thị trường mới hoặc thúc đây lộ trình sản phẩm đàihan hơn Nó có thé thúc đây thiết kế mạch lạc dé hỗ trợ hoạt động mục tiêu trên nhiềunền tang Nó có thé và đã được sử dụng như một phan của nhiều yêu cầu và quy trình

phát triển phần mềm, bao gồm cả Agile [1]

Trang 29

Giai đoạn 1: Nghiên cứu thực địa — thu thập và giải thích dữ liệu

% Diéu tra bối cảnh:

Vấn đề đầu tiên của thiết kế là phải hiểu khách hàng: những người sẽ trực tiếp

sử dụng giải pháp (người dùng cuối); những người cung cấp thông tin cho họ hoặc sửdụng kết quả đầu ra của họ (người dùng gián tiếp); những người quản lý họ và chịutrách nhiệm về sự thành công của họ (người quản lý); những người mua sản phâm và

có thé có những tiêu chí riêng, khá độc lập của họ Đối với hầu hết các dự án, trọng

tâm chính gần như luôn luôn là người dùng cuối, nhưng điều quan trọng là phải xem

xét và đánh giá nhu câu của các loại khác hàng khác.

Điều tra bối cảnh hay phỏng vấn theo ngữ cảnh là một bước rõ ràng để hiểu

khách hàng thực sự là ai và cách họ làm việc hàng ngày Khó khăn là công việc trở nên

quá quen thuộc với người dùng cuối đến mức họ thường gặp khó khăn trong việc diễnđạt chính xác những gi ho làm và lý do họ làm việc đó Vì vậy, cần tiến hành các cuộcphỏng van trực tiếp với người dùng tại nơi làm việc của họ để khám phá những điềuquan trọng trong công việc Đây không phải là những cuộc phỏng van hỏi đáp truyềnthống Thay vào đó, người phỏng vấn theo ngữ cảnh sẽ quan sát người dùng khi họlàm việc và tìm hiểu hành động của người dùng khi họ diễn ra dé hiểu động cơ va

chiến lược của họ Người phỏng vấn và người sử dụng, thông qua thảo luận, phát triểncách giải thích chung về tác phẩm Nó giống như một cuộc tìm hiểu tích cực về thégiới của người dùng Cuộc điều tra này, được thực hiện trong ngữ cảnh, là nơi mà Truyvan theo ngữ cảnh có tên như vậy Cuộc phỏng van theo ngữ cảnh điển hình kéo dai 1tiếng rưỡi đến 2 giờ và dựa trên bốn nguyên tắc hướng dẫn cách tiến hành cuộc phỏng

vẫn [5]:

e Bối cảnh: Trong khi mọi người thực hiện các hoạt động trong cuộc sống

và công việc, hãy quan sát và thảo luận về những gì họ đang làm và tại

sao Sử dụng các đồ tạo những thứ họ tạo ra hoặc làm việc cùng họ décăn cứ vào cuộc phỏng van trong các trường hợp thực tế Sử dụng các

thiết bị ghi âm, ghi hình ké thuật lại chỉ tiết các sự kiện cụ thé trong thời

gian đó đê tìm hiêu vê các sự kiện quan trọng đã xảy ra bên ngoài thoi

Trang 30

gian phỏng vân Hãy chú ý đên bôi cảnh rộng lớn hơn của cuộc sông, cácmối quan hệ và bản thân mà bất kỳ nhiệm vụ nào cũng phù hợp

s Hop tác: Cộng tác với người dùng dé hiểu động cơ và chiến lược của họ;

hãy dé họ dẫn dắt cuộc phỏng van bang cach thực hiện các hoạt động củariêng họ và bình luận về chúng Chia sẻ quyền chi đạo cuộc phỏng van,người phỏng vấn làm theo sự dẫn dắt của người dùng và hỏi về những gì

họ đang quan sát Không đến chỉ với những câu hỏi đã được hoạch địnhsan Thay vào đó, sử dụng trọng tâm của dự án dé hướng cuộc tròchuyện đến những khía cạnh quan trọng nhất trong cuộc sống của họ

® - Diễn giải: Cùng với người dùng xác định ý nghĩa của lời nói, cảm xúc va

hành động của người dùng bằng cách chia sẻ cách diễn giải của bạn và

để người dùng phản hồi, điều chỉnh và điều chỉnh sự hiểu biết của ta

trong quá trình thực hiện Đồng phiên dịch để hiểu được cách ngườidùng thực hiện các hoạt động được nhắm mục tiêu cũng như cách thức

họ đóng góp vào cuộc sống chung của họ Khi đắm mình trong bối cảnhcuộc sông thực của mình, con người sẽ ghi nhớ những gì quan trọng.

e Trọng tâm: Hướng cuộc trò chuyện đến các chủ đề có ý nghĩa bằng cách

chú ý đến những gì nằm trong phạm vi dự án và bỏ qua những thứ nằmngoài phạm vi đó Sử dụng những hiểu biết sâu sắc về cuộc sống từ cácKhái niệm thú vị và các mô hình Thiết kế theo ngữ cảnh dé tập trung vào

các chi tiết có liên quan Hãy cho người dùng biết trọng tâm dé họ cũng

có thé điều khiển

+* Phiên dịch:

Phiên phiên dịch là một trải nghiệm phong phú khác, cung cấp bối cảnh để

nhóm/cá nhân hiểu sâu hơn về dữ liệu từ cuộc phỏng vấn người dùng Phiên phiên

dịch là một cuộc họp nhóm bao gồm người phỏng vấn cộng với 2 đến 5 thành viêntrong nhóm Mỗi người tham gia đóng góp cái nhìn sâu sắc từ quan điểm riêng của họ,dẫn đến sự hiểu biết phong phú hơn về người dùng mà chỉ một người có thể cung cấp

Trang 31

Khi các thành viên trong nhóm thực hiện các cuộc phỏng vấn và tham gia vào cácphiên diễn giải, sự hiểu biết chung về người dùng và các van đề thiết kế quan trọng sẽphát triển một cách tự nhiên Nếu cá nhân, người phỏng van cần ké lại câu chuyện của

cuộc phỏng van bằng cách sử dụng các ghi chú viết tay và trí nhớ Phiên phiên dichđược tiễn hành trong vòng 48 giờ sau khi phỏng van dé người phỏng van van còn nhớ

thông (Sympathy) [5].

Đồng cam (Empathy) Cảm thông (Sympathy)

Sự đồng cảm bao gồm sự cảm nhận

những gì người khác cảm thấy dưới góc

nhìn của người chia sẻ.

Actions: lắng nghe không phán xét, chia

sẻ để hiểu hoàn toàn câu chuyện của

người khác, phản chiếu lại bản thân

mình, chia sẻ lại kinh nghiệm của mình

cho người khác.

Sự cảm thông bao gồm việc thấu hiéu

cảm xúc của người khác dưới góc nhìn của cá nhân.

Actions: phản ứng lại với những khó khăn, hoàn cảnh của người khác một

cách cảm thông như (Tuy nhiên, vẫn có khoảng cách xa lánh với vấn đề của

người khác).

Empathy giúp cải thiện mỗi quan hệ Sympathy làm xua đuôi mỗi quan hệ

Trang 32

VD: “Tôi hiểu cảm xúc của bạn ngay lúc | Ví dụ: “Tôi thật tiếc cho bạn", “bạn thật

mH 66.

này Không sao đã có tôi ở đây với bạn" | xui xẻo", “tôi thấy giải pháp này rat tốt,

bạn thử đi”

Bang 1 1 Bảng tóm tat phân biệt dong cam (Empathy) và cam thông (Sympathy)

Với sự thương hại va cảm thông sẽ đòi hỏi sự nỗ lực ít hơn thậm chi là không

cần nỗ lực dé thấu hiểu người khác Nhung sự đồng cảm va lòng trắc ân thì đòi hỏinhiều sự nỗ lực hơn dé tạo sự thay đôi và suy nghĩ tích cực cho người khác

SPECTRUM OF EMPATHY

COMPASSION | an mead by vi:

EMPATHY EFFORT

SYMPATHY

NR¿¿

Em sory for pou.

UNDERSTANDING & ENGAGEMENT

Hình 1.3 Biểu do sự quang pho của đông cảm

Empathy Map là bản đồ giúp team UX Design, UX Research and Team producthiểu về kiểu người dùng cụ thể Dựa vào Empathy Map, có thé dé dàng hiểu painpoints, nhu cầu người dùng, nhóm người dùng sản phẩm, dịch vụ Empathy Map đượctạo dựa vào kết qua “Interview transcripts"

Trang 33

Who can | contact for help? INFORMAL CAREGIVER Is annoyed with the phone calls

during the day Why don't professionals take care of mom

more? Feels overwhelmed by the amount of things to

take care of

| can't bother my sister, she’s so busy

Scared for the changes dementia brings

Hinh 1.4 Vi du vé Empathy map

Trong so đồ Empathy trên:

Says:

e La những đoạn trích dẫn câu văn người dùng nói về van dé của minh với

chủ đề đang nghiên cứu

e Tap trung vào những gì người dùng nói về những thách thức mà họ phải

° _ Những điều này thường người dùng thực sự không nói ra, nhưng UXDs

(User Experience Designer), có thể biết được thông qua quan sát biểu

cảm khuôn mặt của người tham gia phỏng vấn

Does:

® Là những gi người dùng làm dé hoàn thành nhiệm vụ (nhiệm vu ở đây là

các user đã giải quyết vấn đề của mình)

s® Muc nay sẽ ghi được sau khi thực hiện và xem lại buổi phỏng vấn, phân

tích hành động của người tham gia phỏng vấn

Trang 34

Feels:

e La những cảm nhận của người dung trong quá trình thực hiện nhiệm vụ,

khi họ xử lý vấn đề

® Khi nào người dùng hạnh phúc? Khi nào thì họ bực bội? Khi nao thì họ

thực sự cảm thấy khó vượt qua nhất? (quan sát trong suốt quá trình

người tham gia thực hiện nhiệm vụ)

“+ Xác định Nhóm người dùng (User Group) và Chân dung người dùng

(User Persona):

User group là các nhóm người dùng được phân loại dựa trên các tiêu chí như độ

tuổi, giới tính, nền tảng văn hóa, kỹ năng công nghệ, nhu cầu và mục tiêu sử dụng.Mỗi nhóm có đặc điểm và hành vi riêng, ảnh hưởng đến cách họ tương tác với sản

phẩm Tên User Group lột tả được đặc điểm, vấn đề, mục tiêu của nhóm đó Dùngthông tin về các user group có thé tạo ra các giải pháp thiết kế phù hợp, đáp ứng nhucầu cụ thể của mỗi nhóm Điều này giúp tối ưu hóa trải nghiệm người dùng và tăng

cường tính tương tác của sản phâm.

GIẢI TRÍ TỐI ƯU

Trang 35

người dùng khác nhau mà họ phải đáp ứng Họ có thé hoạt động như một công cụ tập

trung, có thé đồng ý tập trung vào một số tính cách nhất định cho dự án hiện tại

Persona, giống như các mô hình Thiết kế theo ngữ cảnh mới, truyền đạt thông tin

thông qua câu chuyện hấp dan, cá nhân, có yếu tố cảm xúc được tích hợp Bởi vichúng dựa trên dữ liệu thực địa nên chúng có chiều sâu và sự phong phú của trải

nghiệm người dùng thực đằng sau chúng Nhưng vì chúng được trình bày dưới dạngnhững câu chuyện riêng lẻ nên chúng rat dé hiểu Personas là tinh tuý được chat lọc

của người dùng Trong thiết kế trải nghiệm người dùng (UX), sử dụng cá tính dé xây

dựng sự đồng cảm với người dùng mục tiêu và tập trung vào thế giới của họ Phải luôntạo ra các cá tính từ những quan sát về người dùng thực, các cá tính không bao giờđược tạo ra từ những giả định về người dùng Vì ta phải phản ánh nhu cầu của ngườidùng với chức năng của thiết kế nên trước tiên phải xác định rõ ràng cả nhucầu và người dùng

“Persona là công cụ thiết kế mạnh mẽ nhất mà chúng tôi sử dụng Chúng là nềntảng cho tất cả các thiết kế hướng tới mục tiêu tiếp theo Personas cho phép chúng tôinhìn thấy phạm vi và bản chất của vấn đề thiết kế Chúng là ánh sáng rực rỡ để

chúng tôi thực hiện phẫu thuật.” theo Alan Cooper, Nhà thiết kế phần mềm, lập trình

viên và “Cha đẻ của Visual Basic” [8].

Hiểu một cách đơn giản, Personas là người dùng giả tưởng có đặc điểm, mụctiêu thé hiện cho nhu cầu của một nhóm người dùng lớn hon của sản phẩm Một User

Persona có thể thuộc một hoặc nhiều nhóm User Group khác nhau Tuy từng độ lớn dự

án yêu cầu mà Persona có những dạng khác nhau Thông thường, sẽ bắt đầu bằngPersona đơn giản, sau đó tuỳ theo sự phát triển và mở rộng của dự án để mở rộng vàphát triển chi tiết hơn Việc xây dựng sự đồng cảm với người dùng, dé dàng truyền đạt

ý tưởng các bên liên quan thông qua việc kể chuyện về người dùng Cần có góc nhìnrộng về hành vi, vấn đề nhiều người dùng, đảm bảo sản phẩm được thiết kế phùhợp với nhiều người dùng (persona đại diện cho một nhóm người)

Chân dung người dùng được xác định rõ ràng có các thành phan điển hình sau:

e Tên và hình anh: Chúng ta dễ dàng liên tưởng đến một nhân vật “có thật” hơn

nếu nhân vật đó có tên Ngoài ra, nó sẽ giúp đánh giá một dịch vụ bằng cách

hỏi như “Anh có thích dịch vụ này không?” Bên cạnh đó cũng nên đặt một cái

tên tiêu biểu cho người dùng Ví dụ: những anh chàng độc thân đang tìm kiếm

Trang 36

một mối quan hệ có thé được đặt tên là “Robert Romantic” (dang tim kiém mot

mối quan hệ lang mạn), hoặc “Tom Tinder” (tìm kiếm tình một đêm) hoặc “Leo

Lonely” (họ nói rằng họ muốn có một mối quan hệ, nhưng nó không phải là sựthật), v.v.

e® Nhân khẩu học: Chăng hạn như tuổi tác, giới tính, tình trạng hôn nhân, hoàn

cảnh xã hội, v.v Bằng cách đặt thông tin nhân khâu học cơ bản cụ thé sẽ dédàng hình dung ra một người hơn Ở đây điều quan trong là phải cụ thé, vì vậy

cần tránh các phạm vi và cách diễn đạt chung chung Không phải thông tin sẽ

mang lại nhiều giá trị gia tăng mà nó giúp dé hình dung ra nhân vật hon

® Môi trường xã hội, vật chất và công nghệ: Đề nghĩ về nhiều loại tương tác,

trong trường hợp các dịch vụ liên quan đến phần mềm, điều rất quan trọng làphải trình bày trình độ kiến thức và thói quen công nghệ có thể có của người

dùng (cho dù họ có sử dụng điện thoại di động hay không) thiết bị, máy tính

xách tay, v.V.).

e Mối quan tâm và nỗi sợ hãi: Giống như trong các chiến lược nên nhận thức

được những rủi ro và cách giảm thiểu chúng Trong trường hợp vẽ nên mộtnhân cách, điều quan trọng là phải xác định được mối quan tâm và tầm quantrọng của chúng.

® Nhu cầu, mục tiêu và van đề: Dé dịch vụ được thành công thì cần biết nhu cầu

và mục tiêu của người dùng theo nghĩa rộng hơn Thông thường, việc cải tiễn

một phần sản phẩm có thé giải quyết được nhu cầu, mục tiêu hoặc vấn đề củangười dùng.

e _ Trích dẫn: Trong trường hợp bat kỳ người được phỏng van nào có một trích dẫn

rât điên hình thì có thê thêm nó vào hồ sơ Personal.

Trang 37

n thức gi đỏ, Thi mình nghe thêm được di thì đ <héng được thi

thôi, bởi vi thời gian đỏ là thời gian chết.

Context

La mặt nqtzử: cá nhiều khaảng thải gian thực hiện rác rồng: việt: lập đi lận lại hang

ngày, ann Narr thuang cảm thay nham chan và mặt mdi Anh †ìm đến sach nẻi shu mét cach tan dung thei gian hiệu qua và giữ che tinh than tính cực hơn.

Goals Pain Points

+ TẾ nuchal gÌa1 rối nish oie qua * Kvả thastie wd sách rếi và dk mất cae trung za 'àm.

« Tinaitm nhữr«q.chii đ% mãi thêng thre ae ahr cá Tiểu yau TẾ geet bánh đây set:

nif

lũ nd

na PS eit kănh thar khan POs ith

¡ướt Wks Be ay, + Hipr'gilạg gay cản! gine ali chin + Duis tf bang tha tina than ErF eure 9

ứng — tia it khi GIT mình cane sử Gre

+ hy đung lira nna, af trate nhưyxrg quả đãi

= Kad ki

minh zần, glass

qvde Eếp can: Em kif cuốn sá£f1

&n nải dải cả equa

Hinh 1.6 Minh hoa User Personas

s* Thiết kế hành trình người dùng (User Journey Map):

User Journey Map - Ban đồ hành trình người dùng (UJM) được sử dụng dé lậpbản đồ mối quan hệ giữa người dùng và tô chức theo thời gian và trên tất cả các kênh

mà họ tương tác với doanh nghiệp Nhóm thiết kế sử dụng bản đồ hành trình ngườidùng để xem trải nghiệm của họ, cách đáp ứng mong đợi của họ và tìm ra những lĩnhvực cần cải thiện thiết kế “ Dữ liệu thường không truyền đạt được sự thất vọng và trải

nghiệm của khách hàng Một câu chuyện có thể làm được điều đó và một trong nhữngcông cụ kế chuyện hay nhất trong kinh doanh là bản đồ hành trình khách hàng.”theo Paul Boag, nhà thiết kế UX, có vấn thiết kế dịch vụ và chuyên gia chuyên đổi kỹthuật số [9]

UJM là công cu dựa trên nghiên cứu mà nhóm thiết kế sử dụng để tiết lộ trảinghiệm khách hàng dién hình theo thời gian và trực quan hóa nhiều khía cạnh cũngnhư yếu tô liên quan Điều này cho phép các thương hiệu tìm hiểu thêm về người dùngmục tiêu Các thành viên trong nhóm kiểm tra các nhiệm vụ và câu hỏi (ví dụ: điều gì-

nếu) liên quan đến cách thiết kế đáp ứng hoặc không đáp ứng được nhu cầu của khách

hàng theo thời gian khi họ gặp phải một sản phâm hoặc dịch vụ Do đó, những bản đồ

Trang 38

này phải là các mốc thời gian giàu chỉ tiết, hiển thị các nhiệm vụ và sự kiện phụ quantrọng nhất Trong khung thời gian này, bạn thêm thông tin chỉ tiết về những gì kháchhàng nghĩ và cảm nhận khi tiếp tục thực hiện theo dòng thời gian

Nhìn chung, tầm quan trọng của UJM:

¢ Highlight pain point (điểm đau) người dùng có thé gặp phải trong suốt hành

trình trải nghiệm.

e - Xác định những cơ hội có thể cải tiến, tối ưu sản phẩm

® UX Designer tạo ra những trải nghiệm không có chướng ngại vật cho người

dùng.

e Sử dụng CJM dé chia sẻ câu chuyện trải nghiệm của người dùng, giúp cả team

sản phâm có góc nhìn chung về hành trình của người dùng, van đề có thé họphải đối mặt Giúp sáng tạo, cải tiến và tối ưu trải nghiệm người dùng

Những thành phan cần có trong UJM:

mm — | Requiston Usage ĐEN

iqurai ding nhận qui ding cắn: nhac Kui dang quyét Rqưở' dàng trải hqưở dàng tro than

thÉz được win 4E va diễn việc có trên sử ph dang bey sử Inunlậm sử ứng sản khách: her burg

bagi đến sản phẩm, dung sản phẩm, dị=n dung sản phim, dị=n posim, dich wu thank, got thigu sain

tịch vụ có Thể gid vụ đả tay shang vụ phim, dish wy vải

ban 64, gia định:

ho gids curysit vein đ:

củe minh.

Hình 1.7 Minh hoa các thành phan trong UJM

s* Xác định vấn dé người dùng (Problem Statement) va sự đáp ứng của

Trang 39

nhìn thấy các khía cạnh của nó và cảm thấy được truyền cảm hứng để tìm kiếm cácgiải pháp phù hợp một cách có hệ thống:

se - Thiết lập mục tiêu dự án, cụ thé, rõ ràng (Người dùng thực sự cần gi?)

® - Là kim chỉ nam, giúp nhóm phát triển sản phẩm ra quyết định (Sẽ thiết kế và sử

dụng công nghệ như thế nào?)

¢ Tạo ra những tiêu chí đo lường mức độ thành công của dự án (Làm thé nào có

thể biết được chúng ta đã giải quyết thành công vấn đề của người dùng?)

e Hiểu và xác định những rằng buộc giữa sản phẩm và người dùng (Xác định

được điều gì giữ người dùng lựa chọn sản phẩm?)

se Xác định các tính năng, sản phâm sẽ thiết kế (Khi giải quyết van đề của người

dùng, sản phẩm cần những thông tin, tính năng như thế nào?)Problem Statement được xây dựng dựa trên Persona (Goals user andFrustrations user) theo mô hình: [Tên user giả tưởng] là một [ mô tả ngắn đặc điểm củauser] người cần [ mô tả rõ ràng nhu cầu của user] vì [giải thích rõ lý do tại sao người

dùng có nhu cầu đó] Ví dụ: “Anh Nam là một người bận rộn và có nhiều khoảng thời

gian trống lặp lại mỗi ngày, người cần cập nhật nội dung mới mỗi ngày, tận dụng thời

gian trống hiệu quả vì anh ấy không muốn cảm giác mệt mỏi và chán nản mỗi khi dichuyên.”

Value proposition là câu nói Ngắn gọn, rõ ràng, đi vào trọng tâm, nêu được sảnphẩm sẽ đáp ứng nhu cầu của họ như thế nào Các value proposition cần đáp ứng được

pain point lớn nhất của người dung [11] Các bước dé xác định Value proposition:

¢ Trước khi viết Value Proposition, cần trả lời 2 câu hỏi quan trọng: “Sản phẩm

của bạn làm được gì?” (giải thích rõ những điểm, tính năng nổi bật mà sảnphẩm cung cấp cho người dùng) và “Tại sao người dùng nên sử dụng sản phâmcủa bạn?” (mô tả cách sản phẩm giải quyết các điểm khó của người dùng)

¢ Liệt kê tinh năng và lợi ích sản phẩm sẽ mang lại cho người dùng (dựa vào dữ

liệu từ Persona, UJM, Problem Statement, dữ liệu nghiên cứu b6 sung, ) Lưu

ý: Liệt kê nhanh mọi giải pháp xuất hiện trong đầu vào giấy note, không đánh

giá về chất lượng, tính khả thi của giải pháp

e Đánh giá, phân loại giải pháp thành từng nhóm có topic tương đương

nhau (VD: cùng giải quyết bài toán về thời gian, giá cả, )

Trang 40

® Vote lựa chọn những giải pháp có giá trị thực sự tới người dùng và doanh

nghiệp Loại bỏ những giải pháp không có giá tri (giải pháp có giá trị là nhữnggiải pháp giải quyết được pain point lớn của nhóm người dùng)

« Xem xét lại list giải pháp, lựa chọn những tính năng nỗi bật của sản phâm dé

Hình 1.8 Minh hoạ các bước xây dựng Value proposition

¢ Chuyển vấn đề người dùng thành cơ hội thiết kế (How might we —

Crazy eight)

"How Might We" (HMW) là một cum từ thường được sử dung trong qua trình

thiết kế theo ngữ cảnh, thiết kế tư duy và trong các buổi brainstorming hoặc giải quyếtvan đề Cum từ này giúp chuyền hướng tư duy từ việc xác định van dé sang tạo ra cácgiải pháp tiềm năng Đây là cách để khuyến khích sự sáng tạo và tư duy mở trongnhóm làm việc Trong Contextual Design, HMW là một phan quan trọng giúp địnhhình giai đoạn Ideation, nơi các ý tưởng được tạo ra và phát trién [3]

Lợi ích của "How Might We":

¢ Khuyến Khich Sự Sáng Tạo: HMW khích lệ người tham gia nghĩ ra các giải

pháp sáng tạo và mới lạ Nó tạo ra một không gian mở để suy nghĩ mà không bịhạn chế bởi các giả định hay rào cản truyền thống

e Chuyến Hướng Từ Van Đề Sang Giải Pháp: Thay vi tập trung vào van đề,

HMW hướng sự chú ý đến việc tìm ra các giải pháp Điều này giúp nhómkhông bị mắc kẹt trong tình trạng tiêu cực và hướng đến hành động tích cựchơn.

¢ Thúc Day Tư Duy Hợp Tác: Câu hỏi HMW thường được sử dụng trong các

buổi làm việc nhóm, khích lệ mọi người cùng nhau suy nghĩ và đóng góp ýtưởng Nó giúp mọi người cảm thấy được khích lệ để đóng góp và chia sẻ quan

điêm của mình.

Tiêu đề	Nghiên cứu contextual design và áp dụng vào thiết kế giao diện website quản lý giáo dục MindX dành cho đối tượng giảng viên, trợ giảng
Tác giả	Do Thị Hai Yến
Người hướng dẫn	ThS. Nguyễn Thị Tuyết Mai
Trường học	Học viện Công nghệ Bưu chính Viễn thông
Chuyên ngành	Công nghệ đa phương tiện
Thể loại	Đồ án tốt nghiệp đại học
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	112
Dung lượng	27,34 MB