HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIÊN THÔNG KHOA ĐA PHƯƠNG TIỆN Đề tài: “NGHIÊN CỨU AR GAMIFICATION VÀ ÁP DỤNG TRONG THIẾT KE GIAO DIEN UNG DỤNG THUC TE TANG CƯỜNG NÂNG CAO TRAI NGHIEM THAM QUAN DI TICH LICH SU HA NOI.” Giảng viên hướng dẫn: ThS Nguyễn Thị Kim Ngân Sinh viên thực hiện: Phạm Thị Ngọc Minh DI9TKDPT0I 2019 - 2024 ĐẠI HỌC CHÍNH QUY HÀ NOI - 2023 ĐÔ ÁN TOT NGHIỆP ĐẠI HỌC LỜI CAM ĐOAN Em xin cam đoan rằng đồ án tốt nghiệp "Nghiên cứu AR Gamification và ứng dụng trong thiết kế ứng dụng thực tế tăng cường trải nghiệm tham quan di tích lịch sử Hà Nội" là sản phâm nghiên cứu của bản thân mình Mọi thông tin từ tài liệu tham khảo được sử dụng trong đồ án đã được em trích dẫn đầy đủ và nêu rõ tại phần tài liệu tham khảo Các số liệu và kết quả trình bày trong đồ án đều được thực hiện với tính minh bạch và trung thực, không sao chép hay đạo nhái Em xin chịu trách nhiệm đầy đủ nếu có bất kỳ sự không chính xác hay không trung thực nao xuất phát từ đồ án của em Em hoàn toàn tôn trọng và tuân thủ các quy định, nguyên tắc của bộ môn và Học viện Công nghệ Bưu chính Viễn thông, sẵn sàng chịu mọi hình phạt và kỷ luật theo quy định nếu vi phạm Sinh viên Phạm Thị Ngọc Minh Phạm Thị Ngọc Minh — B19DCPT162 1 DO AN TOT NGHIỆP ĐẠI HỌC LỜI CẢM ƠN Lời đầu tiên, em muốn bày tỏ lòng biết ơn chân thành đến tất cả các thầy cô và đồng nghiệp tại Học viện Công nghệ Bưu chính Viễn thông, đặc biệt là những người tận tình hướng dẫn và chia sẻ kiến thức trong suốt hành trình học tập của em Sự nhiệt huyết và sự chia sẻ của quý thầy cô không chỉ là nguồn động viên, mà còn là nguồn động lực lớn giúp em vượt qua những thách thức trong quá trình nghiên cứu và thực hiện đồ án tốt nghiệp Em xin gửi lời tri ân đặc biệt đến cô Nguyễn Thị Kim Ngân, người đã là nguồn động viên không ngừng và người hướng dẫn tận tâm Sự sáng tạo và lòng tận tụy của cô đã giúp em vượt qua những khó khăn, đồng thời đưa ra những hướng dẫn chỉ tiết và có ý nghĩa trong quá trình nghiên cứu dé tài "Nghiên cứu AR Gamification và áp dụng trong thiết kế ứng dụng thực tế tăng cường nâng cao trải nghiệm tham quan di tích lịch sử Hà Nội." Cuối cùng, em xin chân thành cảm ơn tới toàn thê thầy cô giáo tại Học viện Em hy vọng sẽ tiếp tục nhận được sự hỗ trợ và sự khích lệ từ quý thầy cô dé có thé phát triển bản thân và đóng góp cho sự phát triển của cộng đồng trong tương lai Em xin chúc mọi người luôn dồi dào sức khỏe và thành công trong công việc giảng dạy và hướng dẫn sinh viên các khóa Một lân nữa, em xin chân thành cảm ơn! Hà Nội, ngày 18 tháng 12 năm 2023 Sinh viên thực hiện Phạm Thị Ngọc Minh Phạm Thị Ngọc Minh — B19DCPT162 i ĐÔ ÁN TOT NGHIỆP ĐẠI HỌC MỤC LỤC LOT CAM ĐOAN 25222211 2222122211122211122.1122.11122T1 11.11 11.rre i LOT CAM ON cssssssecssssseecssssecsssnscecssnssccssnsseccsnnscecsnsseesannnseesntneecsnneessntessenineeeanieeesniesee TOM TAT DO ma DANH MUC HINH VE DANH MỤC CAC BANG BIEU, LƯU DO i ceccccccescececsssessesseessessesssessessesssessesseseseesseesess IX DANH MỤC TU VIET TAT cccsssssessssssessesssessesssssscssnsssessesssssscsesssscsscssncescsancsacssecsecssceaeeesesees X 3900671001777 7 XI CHUONG 1: TONG QUAN VE CONG NGHE AR VA GAMIFICATION TRONG THIET KE UNG DUNG DI DONG cccsssssssssssssssssnscsnscsssssnscssscssscssecsuscssscsscssscsssceasceasensesscses 1 1.1 TONG QUAN VE CÔNG NGHỆ AR 5-52 s2 19 12111211211111211211 1112111111 11 11121211121 1e 1 1.1.1 Các thuật ngữ và khái niệm liên quañ - ¿+ Et SE ‡vE+EvvEseEeeeeeereesreerke 1 1.1.2 Đặc trưng và nguyên ly hoạt động của AR ee eeceeceeceeeceeeeseteeeeeeeeeeteeeenteeeneeeees 8 1.1.3 Các ứng dung và tiềm năng của AR cececcccccsscssessessessessessessessessessessesssstesseatesessesees 9 1.2 TONG QUAN VE GAMIFICA TION 2-52 S221 EEEEE12E12712711111221112111121111 12111011.111111 1E211y1e 10 1.2.1 Các thuật ngữ và khái niệm liên quan .- ¿.5c 223.22.* S.E *.2E.E+.E++.eE.sr.re.rr.sr-re-rs 10 1.2.2 Các yếu tố cầu thành của Gamification 2.-5 2E EE.EE.E 12.21.21.12.11.21-1- x-e2 10 1.2.3 Một số ứng dụng tiêu biểu của Gamification .ccccceccesscessessessessesessessessesseseesees 12 1.3 VAI TRÒ CUA AR & GAMIFICATION TRONG THIẾT KE UNG DUNG DI ĐỘNG 15 1.3.1 Tam quan trong của tương tác thực tế tăng cường đối với trải nghiệm người dùng UNG MUNG di GONG eee ố ti 15 1.3.2 Vai trò của Gamification trong thiết kế ứng dụng di động . -: 16 II298:42095109) 16001155 16 CHUONG 2: TONG QUAN VE UNG DỤNG THUC TE TANG CƯỜNG NÂNG CAO TRAI NGHIỆM THAM QUAN DI TÍCH LICH SỬ “HANOIDI” - 5:.5 : 19 2.1 ĐỊNH RO DỰ ÁN c2 21 22222 1212 22H HH 2n 19 2.1.1 Nghiên cứu về ứng dung AR Gamification trong lĩnh vực du lịch 19 2.1.2 Nghiên cứu người dùng của ứng dụng thực tế tăng cường nâng cao trải nghiệm tham quan di tích lịch SỬ .- ¿2c 2 22321131121 353 3951151351151 1 1511115111111 01111111111 rrưệp 21 2.1.3 Mục tiêu và yêu cầu của dự án đề xuất xây dựng ứng dụng thực tế tăng cường nâng cao trải nghiệm tham quan di tích lich SỬ - ¿2.5 22.+ £.++.E+.+v.E+.ee.se.es.ee.er.es-es 32 2.2 GIỚI THIỆU VE UNG DỰNG HANOIDI 2 2.22.22.222.22.22.222.22.22.2112112212111211211211121121121.211121 2c22t2y2 33 2.2.1 Tổng quan ứng dụng 2 + +++.S++.EE+.2E++.EE£.EE2.EE22.123.121.127.1711.211.711.2112-11 -11.-21.-xe33 2.2.2 Các chức năng của Ứng Ụng .- - - c2 311321112113 11111115111 11 1111111181 kh 34 2.2.3 Giải pháp thiết kẾ 5 s2 E2 1E212112112110111211111120111211111r2rr1re1y35 2.3 KIÊN TRÚC THONG TIN CHO UNG DỤNG 2+: 222222222 v22 ri 36 2.3.1 Sơ đồ phân tầng (Sitemap) 5-.52 s.2.1E2.112.112.1111.121.121.1 1.111.21.11.111-1 ¿r-e.36 2.3.2 Luồng người dùng (User FlOW/) 2.2 2¿+.222.22.E22.EE2.2E.E2E.E2E.122.12.212.212-21-22¿ cr-xe24I TIEU 431092019) c2 211115 43 CHUONG 3: THIẾT KE GIAO DIỆN NGƯỜI DUNG CHO UNG DỤNG 44 3.1 THIET KE KHUNG SƯỜN CHO UNG DUNG (WIREFRAME)) :.ccccccessessesseesseesecesseesseeeseeenes 44 3.1.1 Low-fidelity WIrefTarme - c 32c 3211211211 19511 51119 1111111111 01 E01 E111 HH ng krp 44 3.1.2 High-fidelity WIrefTarme . -¿- 2: 2c 2 121321121111 15119111 11111111111 11 111011 E111 gxvrry 46 Phạm Thi Ngọc Minh — B19DCPT162 1H ĐÔ ÁN TOT NGHIỆP ĐẠI HỌC 3.2 THIET KE GIAO DIỆN NGƯỜI DUNG CUA UNG DỤNG (USER INTERFACE DESIGN) 46 3.2.1 Thiết kế 10Q0 cecccssesssessesssessessesssessesssessessessusssessusssessessusssessessustsecssssessesssessetsesseees 46 3.2.2 Thiết kế nhân vật đại điện (Mascot) .2 + S.E.SE.EE.EEE.EEE.EEE.EEEE.EEE.EEE.EEEr.krr.krk.rex 47 3.2.3 Ban hướng dẫn chỉ tiết (Design Guideline) 2 s2.z+.2x.+2.x+.2£.z+.zx.er-xz-xz-zz¿ze-d 50 3.2.4 Các thành phan thiết kế (Design Componerf$) .2.-2 s.52.z.+E.e£.xe.£x.e£-xz-zz-es 55 3.3 SAN PHAM HOÀN THIỆN .-:::-222222222222111122222111112222.11 TT 11 57 3.3.1 Giao diện Ứng Ụng - c2 213211211251 151 12111 12 1 911 11T 1H TH HH 57 3.3.2 Bản kiểm thử (PTOfOfYp€) . - 2: 5c S2 SE E2 12E12112117112111111111111211111k1 61 3.3.3 Một phan sản phẩm hoàn thiện trên mockup thực t6 c0.cccccccsesssessesseessessesstesseeees 61 3.4 KIEM TRA KHẢ NANG SỬ DỰNG ¿55c SE SE E221121122112112112711211 2111111211 111111 01.1.1111 ee 3.4.1 Phản hồi từ trải nghiệm cá nhân 3.4.2 Phản hồi từ các người dùng trải nghiệm khác 2: 2.2.2 2.+E.+E.e£E.+E.e£.xzE-er-xz-ez 63 TIỂU KET CHƯƠNG Ô .- (CC E21 E321112111211 1301119118111 11 01119111011 011 911g 11H HH ky 65 41009/.00077 66 CÁC KET QUA ĐẠT ĐƯỢC - 22 2s 91 E1 211211211211 TỰ tự tàn tàn 121012121212e1e 66 HAN 09:07100.6)0071007 -.ắ 66 HƯỚNG PHAT TRIEN CUA ĐỀ TÀI -2 2222222222EE22EE1222E122221122712227112271127112711211122111211211221c12a2 66 TÀI LIEU THAM KHHẢO 2.Ÿ 5< s£.©S£.£Ss.ES£.ES.££E.SES.EE.SEE.SeE.EES.Ex.eEs.ers.ers.rs.srs.ers.re 67 Phạm Thi Ngọc Minh — B19DCPT162 iv ĐÔ ÁN TOT NGHIỆP ĐẠI HỌC TÓM TAT ĐỎ ÁN Trong khuôn khổ đồ án tốt nghiệp, cùng với việc tìm hiểu sách báo, các bài nghiên cứu trong nước - quốc tế liên quan đến công nghệ thực tế tăng cường AR và phương pháp trò chơi hóa Gamification, em đã nghiên cứu và đưa ra thiết kế ứng dụng tham quan di tích lich sử Hà Nội dựa trên lý thuyết về hai mang này Cụ thé nội dung đồ án gồm có: CHUONG 1 - TONG QUAN VE CÔNG NGHỆ AR VÀ GAMIFICATION TRONG THIẾT KE UNG DỤNG DI DONG Chương dau tiên giới thiệu tong quan về công nghệ thực tế tăng cường (Augmented Reality — AR) và phương pháp trò chơi hóa (Gamification) Nội dung của chương tập trung vào vai trò của AR và Gamification trong thiết kế ứng dụng di động, đồng thời nhấn mạnh tầm quan trọng của tương tác thực tế tăng cường AR và Gamification trong trải nghiệm người dùng CHƯƠNG2 - TONG QUAN VE UNG DUNG THUC TE TANG CƯỜNG NÂNG CAO TRAI NGHIỆM THAM QUAN DI TÍCH LICH SU - HANOIDI Chuong 2 sé di sau vao chi tiết dự án “HANOIDI”, một ứng dụng thực tế tăng cường dành cho trải nghiệm tham quan di tích lịch sử ở Hà Nội Thông qua quá trình định rõ mục tiêu nghiên cứu, đề xuất chức năng cho ứng dụng, và giải pháp thiết kế thông tin, chương 2 đưa ra cái nhìn tổng quan về cách áp dụng AR Gamification có thể nâng cao trải nghiệm tham quan di tích lich sử CHUONG3 - THIẾT KE GIAO DIEN UNG DUNG Chương 3 tập trung vào thiết kế giao điện người dùng cho ứng dung tham quan di tích lich sử Hà Nội "HANOIDI Phan sau của chương đưa ra hình anh san pham hoàn thiện và nội dung về kết quả kiểm tra khả năng sử dụng của sản phẩm Phạm Thị Ngọc Minh — B19DCPT162 Vv ĐÔ ÁN TOT NGHIỆP ĐẠI HỌC DANH MỤC HÌNH VE Hình 1: Hình minh họa công nghệ AR trong cuộc sống con người (Nguôn: Forbes.com) 1 Hình 2: Phân biệt 3 khái niệm VR - AR —- MR (Nguôn: Applied Art & Technology) 3 Hình 3: Thực nghiệm hệ thong The Sword of Damocles năm 1968 (Nguồn: Research Gate et) N8 nnaằồaẢ 3 Hình 4: Trải nghiệm sử dụng Layar năm 2009 (Nguôn: Techerunch.coim) -:5-24 Hình 5: Phan giới thiệu ứng dụng Passbook tại sự kiện thường niên WWDC của Apple năm 2012 (Nguồn: Apple WWDC RÑ€C4ÿ) - 52 5t SE EEEEEEE2E1EEEE211211E112112112111111.21111x1e 5 Hình 6: Ảnh mình họa giải thích “cơn sốt” Pokemon GO của nhà phát hành Niantic trên trang báo Forbes (Nguôn: ForbeS.COIN|) 5c St CS SE EE11211E1121112112112t1Er1Ee11,1 6 Hình 7: Trải nghiệm ứng dụng Google Expeditions tại lop học thuộc khuôn khổ sự kiện ra mắt sản phẩm công nghệ thường niên Google I/O 2017 (Nguôn: io.google) : 6 Hình 8: Phan giới thiệu ARKit tại sự kiện thường niên WWDC của Apple năm 2018 (Nguồn: Apple WWDC N€Cđ)) - c S2268211130113511E581E91 11111111151 1111 111111111111 111 1111111111111 1111k kh 7 Hình 9: Giao diện Spark AR Studio của Meta (Nguồn: Meta for Developer3) - 7 Hình 10: Phân giới thiệu Google Lens tại sự kiện ra mắt sản phẩm công nghệ thường niên Google I/O năm 2018 (Nguôn: io.g0OgÏ€) 52-5 SE EEEEEEE9EE12E122112112112112121111.11161 7 Hình 11: Ví dụ về cách AR hoạt động dựa trên cảm biến camera (Nguồn: Blippar.com) 9 Hinh 12: Vi du vé cach AR hoat động dựa trên cảm biến GPS (Nguồn: Oñirix.com) 9 Hình 13: Biểu đô doanh thu của thị trường Gamification theo các khu vực trên thé giới (Nguồn: MarketsandMarkets AnalJ$i3) .- 5s 55s SE EEE1211211211211211 122111 rrree 11 Hình 14: Một số yếu tố co ban của Gamification (Nguon: LMS Œamijfìcation) 12 Hình 15: Duolingo - ứng dụng tiêu biểu của Gamification trong giáo dục (Nguồn: c212//23/16/2//2/1277P7070P7Ẽ7a 8Ae.n a -.(.ä Ă.Ăa 13 Hình 16: Câu hỏi về hình thức dao tạo mong muốn được áp dụng Gamification trong khảo sát của TalentLMS năm 2019 (Nguôn:TalenitLMS).22.-52.©5.22St.‡EE.‡EE.2EE.EEE.22E.22E.22E.221.221.222.212-xe6 14 Hình 17: Ung dụng của Gamification trong chức năng Phiêu lưu (Adventures) của ứng dụng sức khỏe Fitbit (Nguồn: Fitbit & UXfor the @$ê$) 555.cc.SE E 2 2 1 15 Hình 18: Ban tóm tắt kết quả khảo sát người dùng 5.-5.5.S E EEE1.E2E.EEE.EeE.rEr.rrr.err rei 24 Hình 19: Bản tóm tắt kết quá khảo sát người đhÙngg 5.s s 2 2 E.tE.trr.ry.eh 25 Hình 20: Ban tóm tắt kết quả khảo sát người đùng 52.s ©5s 25.22.222.22.21.22.2.212.1 2.E c.te.25 Hình 21: Bản tóm tắt kết quả khảo sát người AuUnQ ccccccccccccsscessesscessessesssessesssessesessessessesseseees 26 Hình 22: Bản tóm tắt kết quả khảo sát người đùng +.5 5t S.t E EEEE.EE2.EEE.EEE.Err.ker.rrk-err-res 27 Hình 23: Bản tóm tắt kết quả khảo sát người đùng .s5.: S.E 2 t r - 28 Hình 24: Ban tóm tắt kết quả khảo sát người đùng -©.2s-.©5s.2.2 22.22.2.22.12.21.2.2 c.re.28 Phạm Thi Ngọc Minh — B19DCPT162 vi ĐÔ ÁN TOT NGHIỆP ĐẠI HỌC Hình 25: Chân dung người dùng Ì Sc.S S t S.E S.t k.T.H H.H T h y 30 Hình 26: Chân dung người Aung 2 .-c c v S 1.1.111.111.1 1.11.1.11 k-e 31 Hình 27: Chân dung người Aung Ö c v v* S SE.S.T.T T tk.ng.tk.ng.k.e 32 Hình 28: Tổng quan Sitemap của ứng dụng HANOIDI .2 2-5.52.+S.£EE.c2.E+.2EE.cE.Ecz.xe.rx.rrs.zc.ez 36 Hình 29: Chỉ tiết Sitemap của chức năng Khám PhG@.ececcecccsscesscsssesvssseessessessiessessesssessesssessessees 37 Hình 1 30: Chi tiết Sitemap của chức năng Thử thochecccccccccccccsscescesssessessesseessesssessessessesesees 38 Hình 31: Chi tiết Sitemap của chức năng Quét AR.eccescescesscesesseessessessvessessessessessesesessessesseese 39 Hình 32: Chỉ tiết Sitemap của chức năng DG Weth cceccecccsscessesscessesssessessesssessessessessesssesssseeseeses 40 Hình 33: Chỉ tiết Sitemap của chức năng Cá WiGt.eeccesccsscesscssvessessesssessesssssessessessesssseesessessenes 41 Hình 34: User Flow chính cua ứng dụng HANOIDI cho lần sử dung đâu tiên 42 Hình 35: User Flow sử dụng chức năng Thứ thách trên ứng dụng HANOIDI 42 Hình 36: Bản vẽ tay wireframe các màn hình chính của ứng dụng HANOIDI 44 Hình 37: Bản vẽ tay wireframe luong Thử thách của ứng dụng HANOIDI . - 45 Hình 38: Wireframe chỉ tiết các màn hình chính của ứng dụng HANOIDI 5-+-: 46 Hình 39: Icon logo của ung dụng F[ANOIDÌ .ác.Sc.S.1.33 E9.S.E.S.E S E -ket 46 Hình 40: Tổng hợp các phiên bản logo của ứng dụng HANOIDI -5-55c5cccs+cc+ccze2 4 Hình 41: Tham khảo tạo hình nhÂH VẬT -.- S.E.32.221.11.51 1.158.11.115.58.111.11.155 1 11.115.151.11 xc5 48 Hình 42: Phác thảo ban đầu các nhân vật đại diện của ứng dụng HANOIDI 49 Hình 43: Thiết kế nhân vật đại diện của ứng dụng HANOIDI ++c+zEs2zEsrzterzei 49 Hình 44: Banner nhân vật dai điện cua ứng dụng HANOIDI 2.c + + + k.ss.ks.sr.e.es.re.s 30 Hình 45: Mood Board hình thành phong cách cho ứng dụng HANOIDI - +.: 50 Hình 46: Minh hoa phông chữ Darker GTOf€SQH€ .S t Ss.ES.EE.SrE.Er.rt.rrk.sr.re.srr.ee-rv-ee 3 Hình 47: Minh họa phông chữ Work (SẠHS 3.63.92.81.3 33.33.E.3 E.ESE.EE SEE.Esr.kks.rrk.kes.rex.ee 31 Hình 48: Quy chuẩn màu sắc sử dụng trong thiết kế ứng dụng HANOIDI - 32 Hình 49: Bảng các cấp độ màu sắc sử dụng trong thiết kế ứng dụng HANOIDI 53 Hình 50: Bộ icon sử dung trong thiết kế ứng dụng HANOIDI 55.+.Ss.c.Es.cz.Es.z.zx.sr.ze.s 53 Hình 51: Hệ thống lưới và khoảng cách áp dung trong thiết kế ứng dụng HANOIDI 34 Hình 52: Đồ bóng theo phong cách thiết kế Neu Brutalism sử dụng trong thiết kế ứng dụng 0/07/7900 5 35 Hình 53: Các kiểu Button sử dụng trong thiết kế ứng dụng HANOIDI 2sc5s+scss2 55 Hình 54: Các kiểu Text Field sử dung trong thiết kế ứng dụng HANOIDI :-5-¿ 56 Hình 55: Các kiểu Tag sử dung trong thiết kế ứng dụng HANOIDI .c00sc0+c0sc0scssvesvcesveseees 56 Hình 56: Các kiểu Tooltip sử dung trong thiết kế tứng dụng HANOIDI 0 c0.c0.cc0c0scsscescecesees 57 Hình 57: Giao diện man hình Onboarding, Đăng nhập & Cấp quy€n truy cập 58 Hình 58: Giao diện màn hình Khám phá & Quét AÏ 5.2.:5 ee.ct.s e.ee.et.es.ee.ee.ne.ee.se.en-es 59 Phạm Thi Ngoc Minh — B19DCPT162 Vil ĐÔ ÁN TOT NGHIỆP ĐẠI HỌC Hình 1 59: Giao diện màn hình Tìm kiểm & Đã Wetteecccccccccccsscscccsscsvesesesvesesesvevsvsvsvevevsvsvevecsvees ó0 Hình 60: Giao điện màn hình Thứ tháCH c.1.1.162.35.111.31.133.518.1.11.15.51.1.11.11.1 x-xx ó0 Hình 61: Một phan sản phẩm hoàn thiện trên mockup thc KẾ :- seccc+ccsccrxssrecsee 62 Phạm Thị Ngọc Minh — B19DCPT162 Vili ĐÔ ÁN TOT NGHIỆP ĐẠI HỌC DANH MỤC CAC BANG BIEU Bang 1: Bang so sánh AR, VR và ÌMẮẨ - c5: St 2315312332 EE51E53151E11 1111111111 1111111111 2 Bang 2: Bảng phân tích các đối tHủủ 5-5 EềEEEEEEEE211211E11211211221121112x1.1.1x1e20 Bang 3: Bang câu hỏi và mục dich khảo sát người đÙHg - c.c.cck.ct.xx.sh.vx.sr.kr.ks.sr.ee.ee.ss 24 Bảng 4: Bang đề xuất giải pháp cho các vấn dé trọng tâm của người dùng 33 Bang I 5: Bang mô tả chức năng chính của ứng dụng HANOIDI S5 <