Nghiên cứu về Gamification trong thiết kế và áp dụng vào thiết kế ứng dụng bản đồ du lịch văn hóa Hà Nội

Đồ án tốt nghiệp Đại học Lời cam đoanLOI CAM DOAN Tác giả xin cam đoan rang Đồ án tốt nghiệp “Nghiên cứu về Gamification trong thiết kế và áp dụng vào thiết kế ứng dụng bản đồ du lịch vă

Trang 1

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

KHOA ĐA PHƯƠNG TIỆN

Dé tài: “NGHIÊN CUU VE GAMIFICATION TRONG THIET

KE VA AP DUNG VÀO THIET KE UNG DUNG BAN ĐỎ DU

LICH VAN HOA HA NOI”

Giảng viên hướng dan: Th.S Nguyễn Thị Kim Ngân

Sinh viên: Dinh Hương Giang

Lop: DI9TKDPT0I

Hệ: Đại học chính quy

Hà Nội — 2023

Trang 2

Đồ án tốt nghiệp Đại học Lời cam đoan

LOI CAM DOAN

Tác giả xin cam đoan rang Đồ án tốt nghiệp “Nghiên cứu về Gamification

trong thiết kế và áp dụng vào thiết kế ứng dụng bản đồ du lịch văn hóa Hà

Nội” là công trình nghiên cứu của bản thân mình Các thông tin, nội dung và số

liệu trong đồ án có nguồn gốc rõ ràng, xuất phát từ những nguồn tài liệu uy tín

và được trích dẫn đầy đủ tại phan tài liệu tham khảo Những số liệu hay kết quatrình bày trong đồ án đều mang tính chất trung thực, không sao chép, đạo nhái

Tác gia xin cam đoan sẽ hoàn toàn chịu trách nhiệm trước Khoa Công nghệ

Đa phương tiện và Học viện Công nghệ Bưu chính Viễn thông nếu có bất kỳ vấn

đề gì xảy ra.

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

Tác giả đô án

yr

Dinh Huong Giang

Dinh Hương Giang — Lớp: DI9ØTKDPT0I i

Trang 3

Đô án tôt nghiệp Đại học Lời cảm ơn

LỜI CẢM ƠN

Lời đầu tiên, tác giả xin chân thành cảm on Học viện Công nghệ Bưu chính Viễn thông và Khoa Công nghệ Đa phương tiện đã quan tâm và tạo điều kiện

cho tác giả trong quá trình học tập tại Học viện nói chung và trong quá trình

triển khai đồ án “Nghién cứu về Gamification trong thiết kế và áp dụng vàothiết kế ứng dụng bản đồ du lịch văn hóa Hà Nội” nói riêng

Đặc biệt, tác giả xin được bày tỏ lòng biết ơn chân thành tới giảng viên

hướng dẫn - Thạc sĩ Nguyễn Thị Kim Ngân đã tận tình theo sát, đưa ra nhiềunhận xét và lời khuyên hữu ích, giúp tác giả giải quyết các vấn đề phát sinh vàhoàn thành đồ án này một cách tốt nhất

Tác giả xin được gửi lời cảm ơn tới gia đình, bạn bẻ và người thân đã luôn

tạo điều kiện tốt nhất và là chỗ dựa tinh thần vững chắc của tác giả trong suốtquá trình học tập và hoàn thiện đồ án này

Bằng sự nỗ lực và cố gang của bản thân, tác giả đã hoàn thành đồ án theo đúng quy chuẩn đề ra Song, do về mặt kiến thức và điều kiện khảo sát thực tế

còn hạn chế, nội dung đồ án này không tránh khỏi có những thiếu sót Kính

mong quý thầy cô, các chuyên gia và quý độc giả quan tâm đến đề tài đưa ra

những ý kiến đóng góp, chỉ dẫn dé tác giả có thé rút kinh nghiệm và phục vụ tốthơn công tác thực tế sau này

Xin chân thành cảm ơn!

Trang 4

Đồ án tốt nghiệp Đại học Mục lục

MỤC LỤC

LOT CAM ĐOAN 5 5c 2c 21221 21127122112112112112111112111112112121 kg i

LOT CAM ON ccccccsscsscssesssessessessssssssessssusssessessessssussasssessessessessesseesssessessseeasaess i

MỤC LUỤC 2 25-52222121 21127121121121121121121121111111211111211 2111111 i

DANH MỤC THUAT NGỮ, TU VIET TẮTT - 2 s+++£++£++£zzxezxerxees i DANH MỤC BANG VA BIEU ĐÒ 2-52 SS CS E2 212121111 EeErxee i DANH MỤC HÌNH VE u ccccccceccccsscsscssesccssssesscsessesuesessessssvsacevssacsvesassvssaeeeeees i

NY CO 5) \ 0 -:›Ö:Œ: 1

1 Lý do chọn đề tài - 25c SE E1 E121121121121121121121121121 111111111 cte 1

2 Tình hình nghiên cứu liên quan đến đề tải -. 2- 555 s25z+5z2sze: 2

3 Mục đích, nhiệm vụ nghiên CỨU - 5 23+ £*+E+eEvveeeeerreeeerrss 4

4 Đối tượng và phạm vi nghiên CỨU - 2 2 2 +E+EE+E+E£E+EeErEzrerszkres 4

5 _ Phương pháp nghiÊn CỨU - - c1 1v vn vn re 4

6 Đóng góp mới của đề tài 5-5c©sSt2EEEEEEEEE2E 212121212121 EErxe 5

7 Ý nghĩa lý luận và thực tiễn -¿- 2-52 s+EE+EESEEEEEEEEEEEeEEerkerkerkerree 5

8 Kết cấu để tài 2c 2k 2H 2222121211212 ke 6 CHUONG 1: CƠ SỞ LÝ LUẬN VÀ KHÁI NIỆM CHUNG - 7

1.1 Tổng quan về điện thoại di động thông minh - 2 2s 2+2 +2 7

1.1.1 Các thuật ngữ và khái niệm liên quan 55 55+ +++s*+++se++s 7 1.1.2 Điện thoại di động thông minh - 5 + ‡*++£++sv++seeerszeesxss 8

1.1.3 Các đặc điểm của điện thoại thông minh ảnh hưởng tới việc thiết kế

5:17 91.2 Tổng quan về ứng dụng điện thoại di động thông minh 11

1.2.1 Phan 8n 14 11 1.2.2 Ứng dụng di d6ng ccecceccceccscccssessessessessessesssessesssessesssssescsnssesseeseees 12

1.2.3 Phân loại ứng dụng di động - - - 5 5+ + *ssvsseeerseeeeereres 12

1.3 Tổng quan về thiết kế U2X/UI -2- 2 2 s+EE+EE+EE+E££E+EEzE+EEzEerxrrees 14

1.3.1 Thiết kế trải nghiệm người dùng 2 + 2 + +x+EeE£xzEerxrxez 14

1.3.2 Thiết kế giao điện người dùng -2- ¿+ ++E+£Ee£EerEeExzEerxrree 15

Dinh Hương Giang — Lớp: DI9ØTKDPT0I

Trang 5

1.5 Tổng quan về gamification trong thiết kế 2 ees eeseeseeseeseeeees 22

1.5.1 Định nghĩa øamIfiCafIOT - - c5 2 33211321113 EEEeeersrreerrrss 22

1.5.2 Gamification trong thiết kẾ - 2-2 2 2+ E+EE2EE+EE2EE2EE2EEerxerxrree 23

1.5.3 Thiết kế gamification cho lĩnh vực du lịch -¿5csecs2 34

CHƯƠNG 2: UNG DUNG MOT SO PHƯƠNG PHÁP GAMIFICATION

TRONG THIET KE UNG DỤNG BẢN DO DU LICH VĂN HÓA HÀ NOI

„;:.9)(9)879 0) 1 36

2.1 Tổng quan dự án - - 2-52 Sx9EE*EEEEEEEE1121E1151111111111E111 111111 cre 36 2.2 Nghiên cứu đối thủ 2-2 sSE+SE2EE2EESEEEEEEE12E12112121171111 111.1 c1eC 36

"8ÿ ) 206001 36 2.2.2 Michelin CU1d€ - - - - 5 111191189119 119111 119011 nh ng 39 2.2.3 Swarm by FOUTSU4TC - - ¿c1 E133 13 11 9111 11 9 ng ve 41 2.3 Nghiên cứu người Aung ee eeeecceeseeeeceseceeeeeeeaeceeeeeeeseceeeceaeeeeeeseaeeeses 43

2.3.1 Kết quả nghiên cứu + 2s +k+SE+E£E£EEEEEEEEEEEEE2EE1EEE1 1x xrer 43

2.3.2 Chân dung người dùng - c6 + 13x 3 1v vn ng 56

2.3.3 So đồ hành trình trai nghiệm người ding 60

3.1 Phong cách thiết kẾ -¿- 2-2 ©s+SE+SE£EE£EEEEEEEEEEXE717171 2171212121 xe, 72

Trang 6

3.4 Kết quả thiết kẾ - ¿2-5 SE 2EEE2E1211211211211211211211211211211111 1.11 xe 79

3.4.1 Man onboarding, đăng nhập, đăng ký: . +55 +++-<<++<ss2 S0 3.4.2 Trang CHUL 81

Non Ả ốẼẼ 83

3.4.4 Khám pha sccccceccccscsscessesssssessesssessecsssssesssessessesssessessssssessessesseeseeseees 88 3.4.5 8n 89

3.4.6 Cá Mat ecccccscsessesssessessssssesssssssssscsusssecsessusssecsusssessessusesesusssaesaeeseess 90

3.5 s0 9]

TIỂU KET CHƯNG 3 - 2: 2£+2E+EE+EEEEE£EE2EEEEEEEEE2E1712121 2 crkee 92 KẾT LUẬN - - 5-52 ST E1 ExE11211 1112111111 112111 11111 11101211111 ngu 93 DANH MỤC TÀI LIEU THAM KHẢO - 2 2 2+s£E££xe£+z£ezzzzse2 95

PHU LUC 1: BANG HOT KHAO SÁTT 2: 22s+2E+£E+£EerEerxerxereee 101

PHU LUC 2: BỘ CÂU HOI PHONG VAN SÂU - -5- sẻ 105

Trang 7

Đồ án tốt nghiệp Đại học Danh mục thuật ngữ, từ viết tắt

DANH MỤC THUẬT NGỮ, TỪ VIẾT TẮT

chơi hóa vào một dịch vụ

Hybrid app pC Ung dung lai

International Tổ chức Tiêu chuẩn hóa Quốc tế

Organ1zation for Standardization

Trang 8

Đồ án tốt nghiệp Đại học Danh mục thuật ngữ, từ viết tắt

Trang 9

Đồ án tốt nghiệp Đại học Danh mục hình vẽ

DANH MỤC BANG VÀ BIEU DO

Danh mục bảng

Bảng 2.1 Các lý do lựa chọn du lịch của các ứng viên Việt Nam trong độ tuổi 18

- 25 Nguồn: Nguyễn Thị Khánh Linh 2-2 2 5E £+E££E+E£EzE+Ee£xzxererez 45

Biểu đồ 2.5 Các nền tảng tìm kiếm thông tin mà khách du lịch sử dụng 51Biểu đồ 2.6 Các trải nghiệm khó khăn mà khách du lich gap phải 53Biểu đồ 2.7 Mức độ ảnh hưởng của những khó khăn mà khách du lịch gặp phải

Trang 10

DANH MỤC HÌNH VẼ

Hình 1.1 Điện thoại tính năng Nguồn: counterpointresearch.com 8

Hình 1.2 Điện thoại di động thông minh Nguồn: nytimes.com 9

Hình 1.3 Điện thoại Samsung Z Fold 5 Nguồn: Samsung - 2: 9 Hình 1.4 Các trạng thai mở của điện thoại Android có tinh năng gập Nguồn: I/En9a 188.315 0077 10

Hình 1.5 Vùng an toàn (safe area) và lề (margin) của thiết bị iOS theo hướng doc và ngang Ngu6n: ADpÌe ¿- 2-52 Sk9EE2ESEEEEEEEEEEEEEEEEEEEEEEE1E1 1111 te 10 Hình 1.6 Vùng vừa tầm với (xanh), tam với vừa phải (vàng) và khó với tới (đỏ) thay đổi tùy theo cách cầm điện thoại của người dùng Nguồn: Shutterstock 11

Hình 1.7 Cách phân loại UI dựa trên cách người dùng tương tác với thiết bị Nguôn: Interaction Design Foundation 2-5-2 2 2 2+E+E£E+E+Ee£EzEeEerxzeres 16 Hình 1.8 Quy trình thiết kế tập trung vào người dùng - 2-5-2 eee 20 Hình 1.9 Quy trình thiết kế tập trung vào người chơi Nguồn: Interaction Design ẮẲaâaăăảäáảiáõäõố.Á 24

Hình 1.10 Octalysis Framework Nguồn: Yukaichou.com - 25+26 Hình 1.11 Hai cách phân chia của 8 động lực cốt lõi -2- 2 2 s+sz+s2 34 Hình 2.1 Sitemap của Travel3/ÓÚ + k1 TH hiệp 37 Hình 2.2 Giao diện một trang thông tin về địa điểm du lịch trong Travel360 38

Hình 2.3 Travel360 chia làm 2 bản đồ riêng cho các địa điểm “Tham quan” và MEN ciiỪ33VVỪ 39

Hình 2.4 Sitemap của ứng dụng Michelin Gu1de - 5< «+ s++ss 40 Hình 2.5 Một số giao điện của Michelin Guide - 2-5552 2+s+szzx+zsze2 41 Hình 2.6 Sitemap của ứng dung Swarm cceescceseceseeececeneeeeeeeseeesseeenseeeees 42 Hình 2.7 Giao diện của ứng dung ŠWATI - G1331 Eeereereesee 43 Hình 2.8 Chân dung người dùng là khách du lịch quốc tế đến Hà Nội 57

Hình 2.9 Chân dung người dùng là khách du lịch nội địa, thường xuyên tới Hà ) 00 58

Hình 2.10 Chan dung người dùng là khách du lịch nội địa, ít tới Hà Nội 59

Hình 2.11 Chân dung khách du lịch là người dân Hà Nội 60

Hình 2.12 Sơ đồ hành trình người dùng của nhóm khách du lịch quốc tế 61

Trang 11

Hình 2.13 Sơ đồ hành trình người dùng của nhóm khách du lịch nội địa 62

Hình 2.14 Sơ đồ hành trình người dùng của nhóm người dân Hà Nội 63

Hình 2.15 Sơ đồ đánh giá độ quan trọng và khả năng thực hiện/duy trì của Joe Natoli Nguồn: Think First: My No-Nonsense Approach to Creating Successful

Products, Memorable User Experiences + Very Happy Customers 64

Hình 2.16 Kết qua đánh giá tinh năng dựa trên so đồ của Joe Natoli 65Hình 2.17 Sitemap đến trang thứ 2 của ứng dụng 2 2 2+s+s+s+zszs+ 70

Hình 3.1 Moodboard Ì - c c +21 3313321183511 191 113 111119111118 1111 E11 errvy 73 Hình 3.2 Moodboard 2 - -.- - + +1 11121 911 911911191 1kg ng ng Hệp 73

Hình 3.3 Tổng hợp các hình ảnh đường phố, nhà cửa, điểm du lịch Nguồn:

Hình 3.8 Các nút tính năng ở màn hình Trang chủ của Hanoi Local 79

Hình 3.9 Thiết kế logo của Hanoi Local - 2-2 2 2 s+S£+E££+zEe£xzEerxerszed 79Hình 3.10 Mockup thiết kế trên màn hình điện thoại -2- ¿5552 80Hình 3.11 Tổng quan các màn hình thiết kế - 2-2 2 s2 s+£x+£++zxzzzxd 80

Hình 3.12 Cac man onboarding, đăng nhập, đăng ký - ‹++++-<+ 81

Hình 3.13 Man Trang chủ mặc định (trai) và khi lướt xuống (phải) 82

Hình 3.14 Hình ảnh chiếc mũ được giới trẻ đặt tên là "đặc sản Hà Nội" Nguồn:

Trang 12

Hình 3.19 Màn Thông tin địa điểm mặc định (trái) và thu gọn (phải) S6

Hình 3.21 Man Chỉ đường mặc định (trái) và chi tiết (phải) - 87

Hình 3.22 Màn Khởi hành mặc định (trái) và khi xem chi đường chi tiết (phải).

iầắaắđáaẳầaẳaiaẳaẳaiaẳdẳaaadầddddddẳŸỶẽÁ 88

Hình 3.23 Pop-up chúc mừng khi nhận tem ¿+55 +2 +++£+se++eex+ses2 88

Hình 3.24 Màn Kham pha mặc định (trái), danh sách địa điểm chi tiết (giữa) và

danh sách sự kiện (phải) - c2 13113311311 1321 1151113 11 111 111 ng ngư 89

Hình 3.25 Man Thanh tựu (trai), Bang vàng check in (giữa) và man danh sách

danh hiệu (phải]) - - - c6 c E211 1E91E91 1911911 11 11 1 1n HH HH nh ng 90

Hình 3.26 Màn Tường nhà cá nhân (trái), Tường nhà bạn bè (giữa) và Tường

nhà khi lướt lên (phải!) - ¿6 6+2 E+EE +3 E311 EEk E1 E1 1 S1 vn TH ng 91

Hinh 3.27 Cac man dang bai (trai) va bai dang chi tiét (0) 0-1) ee 91Hình 3.28 Mã QR dẫn đến prototype của Hanoi Local 2-5 s©s+s+s+ 92

Dinh Hương Giang — Lớp: DI9ØTKDPT0I iii

Trang 13

Đồ án tốt nghiệp Đại học Mở đầu

MỞ DAU

1 Lý do chọn đề tài

Du lịch là một lĩnh vực kinh tế tổng hợp [4] Muốn phát triển du lịch cần có

sự hợp tác của đa ngành; ngược lại, du lịch phát triển sẽ là động lực thúc đây các

ngành nghé, lĩnh vực khác Chính vì lý do này, từ đầu năm 2020, Việt Nam đã xác định mục tiêu đưa du lịch trở thành mũi nhọn kinh tế của đất nước vào năm

2030 [10] Từ đó đến nay, dé đối phó với những đình trệ gây ra bởi đại dịch

COVID-19 giai đoạn 2020 - 2022 va sự phát triển nhanh chóng của cuộc cách

mạng 4.0, Nhà nước đã có nhiều chi đạo tích cực, đề xuất đôi mới hỗ trợ ngảnh

du lịch phục hồi, phát triển theo kịp mục tiêu đã đề ra Trước tiên, Việt Namquan điểm chú trọng phát triển du lịch văn hóa, phát huy giá trị đi sản và bản sắcdân tộc [2, 10, 11] Việc gắn liền du lịch với văn hóa truyền thống nhằm nhấnmạnh tính độc đáo, riêng biệt của đất nước; từ đó tạo nên tính bền vững trongnhững sản phẩm du lịch Việt Song, xu hướng toan cầu hóa, chuyên đôi số hiệnnay đã làm ảnh hưởng tới nhu cầu chung của thế giới, đòi hỏi các điểm thamquan có cách tiếp cận mới lạ; dẫn tới việc cần đây mạnh ứng dụng công nghệ 4.0

dé hỗ trợ và đặt trải nghiệm của khách du lịch làm trung tâm [1, 2, 10]

Thủ đô Hà Nội năm trong các tỉnh, thành phố được ưu tiên phát triển du lịch thông minh trong mục tiêu cơ bản đến năm 2025 Vốn là một trung tâm văn hóa, lich sử với gần 6000 di tích, hơn 1350 làng nghề [12], Ha Nội có đầy đủ tiềm năng để phát triển du lịch, đặc biệt là du lịch văn hóa Thành phố đã và đang triển khai tốt việc kết hợp du lịch với các công nghệ mới, có thể ké đến

việc trình chiếu 3D mapping tại các di tích lich sử Văn Miếu - Quốc Tử Giám va

Ô Quan Chưởng Tuy nhiên, du lịch Hà Nội vẫn được đánh giá là “chưa xứng

với tiềm năng sẵn có” [3] Khi này, cần có một phương án truyền thông phủ hợp

để thu hút và tạo động lực cho du khách tới tham quan các địa điểm thế mạnhcủa thành phố

Gamification (trò chơi hóa) là một phương pháp đáp ứng được 2 yêu cầu kểtrên khi tập trung đặt trải nghiệm và động lực của người dùng lên hang dau

Ngoài ra, việc sử dụng những yếu tố của game (trò chơi) cũng làm tăng tính dễ chịu, vui vẻ nên rất phù hợp với một ứng dụng về chủ đề du lịch.

Từ những cơ sở trên, tác giả quyết định lựa chọn đề tài “Nghiên cứu về

Gamification trong thiết kế và áp dụng vào thiết kế ứng dung bản do du lịch

văn hóa Hà Nội” Thông qua đề tài, tác giả muốn trình bày một bức tranh tổng

Dinh Hương Giang — Lớp: DI9ØTKDPT0I 1

Trang 14

quan về gamification trong thiết kế ứng dụng điện thoại và đưa ra một phương

án truyền thông, thiết kế cho du lịch văn hóa của Hà Nội.

2 Tình hình nghiên cứu liên quan đến đề tài

Trên thế giới Trước đây, đã tồn tại các trải nghiệm được thiết kế lấy cảm hứng từ game,

nhưng thực tế đến tận năm 2002, cum từ “Gamification” mới được gọi tên bởiNick Pelling [56] Bởi vậy, khái niệm gamification nhìn chung còn rất mới.Những nghiên cứu về phương pháp này còn nặng về mặt lý thuyết và tập trung

trả lời các câu hỏi như: Gamification là gi? Gamification có thật sự hiệu quả

không? Làm thế nào để ứng dụng Gamification vào các lĩnh vực?

Bài nghiên cứu “From Game Design Elements to Gamefulness: Defining

“Gamification”” (2011) cua nhóm tác gia Sebastian Deterding, Dan Dixon,

Rilla Khaled, Lennart Nacke lần đầu tiên đưa ra một định nghĩa cụ thể chogamification Cụ thể, nhóm tác giả cho rằng mặc dù các phần mềm sử dụng

phương pháp mang tên “gamification” đang gia tăng nhanh chóng, chưa có một

định nghĩa chính xác cho thuật ngữ này Chính điều này cũng khiến cho việc

đánh giá và phân biệt Gamification với những thuật ngữ liên quan tới game khác

trở nên khó khăn hơn Dựa trên nghiên cứu của mình, nhóm tác giả kết luậngamification là “việc sử dụng các yếu tổ thiết kế trò chơi trong các bối cảnh

không phải trò chơi” [20].

Bài nghiên cứu “Defining Gamification - A Service Marketing

Perspective” (2012) cua Kai Huotari va Juho Hamari lai cho rang dinh nghia trước đó của Deterding và cộng sự chi tập trung vào cách tiếp cận mang tinh hệ

thống Nhóm tác giả đưa ra một định nghĩa khác nhấn mạnh về giá tri và hiệu

quả của phương pháp: “Gamification là quá trình cải thiện một dịch vụ bằng

việc thêm những trải nghiệm game dé hỗ trợ người dùng” [29]

Bài nghiên cứu “Does Gamification Work? A Literature Review of Empirical Studies on Gamification” (2012) của nhóm tác gia Juho Hamari,

Jonna Koivisto, Harri Sarsa đặt câu hỏi về tính hiệu quả của phương pháp

gamification Sau quá trình bình duyệt 24 tài liệu nghiên cứu thực nghiệm, nhóm

tác giả kết luận gamification that sự có hiệu qua với điều kiện cần lưu ý cân nhắc (1) vai trò của đối tượng được gamify (ứng dụng gamification) va (2) đặc thù

của người dùng [27].

Trang 15

Cuốn sách “Actionable gamification: beyond points, badges, and leaderboards” (2019) của Yu-kai Chou chỉ ra một van dé là nhiều người nghĩ

rang gamification la viéc thém diém, huy hiéu va bang xép hang vao trang web

Thực tế, phương pháp này yêu cầu người thiết kế nắm rõ các động lực cốt lõi

của người dùng, từ đó mới đủ khả năng thu hút và người dùng hướng tới nhữnghành động nhất định [20] Tác giả cung cấp các lý thuyết game, tâm lý học liênquan tới gamification, và giới thiệu một khung lý thuyết của gamification mangtên Octalysis Octalysis Framework (khung lý thuyết Octalysis) bao gồm 8 yếu

tố gamification sử dụng dé thúc day và tăng động lực cho người dùng

Chou cũng chia sẻ với Forbes trong bai báo “Gamification trends for

2019: Making room for game-elements in politics” (2019) về bước chuyên của

xu hướng thiết kế gamification: “Năm 2019, gamification trở nên trưởng thành hơn Chúng ta thấy được một bước chuyên, từ thiết kế xoay quanh động lực bên ngoài (tập trung vào phần thưởng) sang thiết kế xoay quanh động lực bên trong

(tập trung vao việc làm công việc thú vi hơn)” [14] Chou đánh gia đây là một

bước chuyền quan trọng vì thiết kế xoay quanh động lực bên trong sẽ xây dựng được những thúc đây lâu dài hơn.

Bài nghiên cứu “Tourists as Mobile Gamers: Gamification for Tourism Marketing” (2015) cua nhom tac gia Feifei Xu, Feng Tian, Dimitrios Buhalis,

Jessika Weber và Hongmei Zhan nghiên cứu về các xu hướng của gamification

và tiềm năng nâng cao trải nghiệm và tiếp thị du lịch của phương pháp này Kết

quả cho thấy 5 động lực chủ yếu của du khách khi sử dụng những ứng dụng

được gamify là (1) tò mò, (2) khám phá điểm đến, (3) giao tiếp xã hội, (4) trải

nghiệm gia lập thú vi, (5) thử thách và thành tựu [59].

Bài báo “Gamification in supported geocaching tours” (2017) của nhóm tac gia Ahmad Mehrbod, Negin Mehrbod, Antonio Grilo, Carlos Vasconcelos,

José Luis Silva nói về việc áp dung gamification vào các tour du lịch dia lý/khảo

cô Cụ thể, bài báo phân tích Tourist Companion - một app (ứng dụng điện thoại

thông minh) hỗ trợ khách du lịch, trong đó sử dụng các tính năng truy tìm kho

báu, kết nối xã hội dé thúc đây người dùng tham gia một du lịch [39]

Trang 16

lớn các bài nghiên cứu thường quan tâm tới ứng dụng của gamification trong

giáo dục - không năm trong phạm vi của đề tài này

Trong những năm gần đây, Nhà nước đã có chủ trương thúc đây du lịchthông minh, qua đó khiến cho số lượng các sản phẩm du lịch ứng dụng các côngnghệ hiện đại tăng lên đáng kể Mặc dù vậy, số lượng sản phẩm liên quan đếngamification vẫn còn hạn chế và chưa được biết đến rộng rãi

3 Mục đích, nhiệm vụ nghiên cứu

Mục đích nghiên cứu

Ứng dụng gamification vào trong thiết kế UX/UI (trải nghiệm người

dùng/giao điện người dùng) cho sản phẩm app bản đồ du lịch văn hóa Hà Nội

Nhiệm vụ nghiên cứu

Thứ nhất, tông hợp, hệ thống có chọn lọc các lý thuyết về (1) thiết kế ứngdụng di động, (2) gamification trong thiết kế, (3) lĩnh vực du lịch, cụ thé là du

lịch văn hóa.

Thứ hai, áp dụng những lý thuyết đã nghiên cứu vào thiết kế app bản đồ du lịch văn hóa Hà Nội Tiến hành xác định, nghiên cứu mục tiêu, người dùng, kiến

trúc thông tin, chức năng của app.

Thứ ba, tiễn hành thiết kế trực quan app

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

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

Đối tượng nghiên cứu của đề tài là gamification trong thiết kế và cách ứng dụng gamification vào thiết kế app ban đồ du lịch văn hóa.

Khách thê nghiên cứu: Khách du lịch Hà Nội và người Hà Nội

Pham vi nghiên cứu

về không gian: Nghiên cứu được thực hiện tại thành phố Hà Nội, Việt

Nam Về thời gian: Tháng 10 - tháng 12/2023

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

Đồ án tốt nghiệp được tiến hành thông qua việc phối hợp đồng bộ một số

phương pháp dưới đây:

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

Trang 17

Phương pháp nghiên cứu tài liệu: Đọc các tài liệu, tham khảo một số công

trình nghiên cứu có liên quan đến đề tài và vận dụng vào thực tiễn tình hình du

lịch Việt Nam - Hà Nội nhằm tạo tiền đề cho các phần nghiên cứu và thiết kế

phía sau.

Phương pháp thu thập dữ liệu và thong kê: Tìm hiểu và thông kê các dir

liệu liên quan đến tình hình du lịch tại Hà Nội

Phương pháp phân tích, tổng hợp nội dung: Phân tích các đữ liệu đã có từ

trước và các số liệu thu được từ phương pháp nghiên cứu sơ cấp.

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

Phương pháp điều tra bằng bảng hỏi: Dựa trên cơ sở lý luận của dé tài và các phương pháp luận để xây dựng bang hỏi phủ hợp với mục đích nghiên cứu.

Phương pháp phỏng vấn sâu: Phong vẫn sâu với một số cá nhân đã trả lời bảng hỏi dé khai thác thêm các đặc tính cụ thé của nhóm đối tượng ma cá nhân

đó đại diện Từ đó, rút ra các persona (chân dung khách hàng mục tiêu) va CJM

(Customer Journey Map - sơ đồ hành trình trải nghiệm khách hàng/người dùng).

6 Đóng góp mới của đề tài

Nhìn chung, đã có các đồ án, luận án nghiên cứu phương pháp

gamification và ứng dụng vào các lĩnh vực như giảng dạy, kinh doanh, sức khỏe.

Tuy nhiên, dé xét về khía cạnh hỗ trợ, thúc đây du lịch thì vẫn chưa có đồ án nao được phô biến rộng rãi Vì lý do này, tác giả muốn làm rõ về gamification trong thiết kế và gamification trong lĩnh vực du lịch, từ đó đóng góp một ứng dụng du

lịch thực sự tận dụng được những khía cạnh hiệu quả của gamification, tang

thực tế trải nghiệm của du khách.

7 Ý nghĩa lý luận và thực tiễn

Vé mặt lý luận, đề tài khái quát được các công trình nghiên cứu có liên quan và xây dựng một số vấn đề lý luận mới trên cơ sở tiếp thu các lý thuyết về phương pháp gamification, từ đó áp dụng vào việc xây dựng ứng dụng bản đồ du lịch Kết quả của đồ án là một đóng góp vào các ví dụ về việc xây dựng app sử dụng phương pháp trên, giúp các nhà phát triển hiểu rõ hơn về quy trình thiết kế

gamification.

Vẻ mặt thực tiễn, đồ án đưa ra giải pháp giúp các ứng dụng gia tăng trải nghiệm và động lực của người dùng Nhà sản xuất sẽ thu hút được nhiều người dùng hơn dựa trên độ hiệu quả của ứng dụng, người dùng cũng có thé thực hiện

Trang 18

được mong muốn khi tìm đến với ứng dụng — cụ thê ở đây là tìm kiếm các địa

điểm du lịch văn hóa.

8 Kết cấu đề tài

Ngoài phần mở đầu, kết luận, mục lục, danh mục bảng biểu, tài liệu tham

khảo và phụ lục, nội dung của đề tài gồm 3 chương:

Chương 1: Cơ sở lý luận và khái niệm chung

Chương 2: Ứng dụng một số phương pháp gamification vào thiết kế ứng dụng bản đồ du lịch văn hóa Hà Nội “Hanoi Local”

Chương 3: Thiết kế ứng dụng bản đồ du lịch văn hóa Hà Nội “Hanoi Local”

Trang 19

Đô án tôt nghiệp Đại học Chương 1: Cơ sở lý luận và khái niệm chung

CHƯƠNG 1: CƠ SỞ LÝ LUẬN VÀ KHÁI NIỆM CHUNG

1.1 Tổng quan về điện thoại di động thông minh

1.1.1 Các thuật ngữ và khái niệm liên quan

Thiết bị số

Theo Luật Công nghệ thông tin số 67/2006/QH11 ngày 29 tháng 6 năm

2006 của Quốc hội Việt Nam, thiết bị số là “thiết bị điện tử, máy tính, viễnthông, truyền dẫn, thu phát sóng vô tuyến điện và thiết bị tích hợp khác được sửdụng để sản xuất, truyền đưa, thu thập, xử lý, lưu trữ và trao đổi thông tin số”

[8] Các máy tính, điện thoại, máy anh, lộ cứng ngoài, thiết bị theo đõi sức khỏe,

thiết bị tiện ích nhà cửa, đều là những ví dụ tiêu biểu của loại thiết bị này.

Thiết bị số thường được sử dụng trong nhiều lĩnh vực như công nghiệp, y

tế, giáo dục, giải trí và cuộc sống hàng ngày Chúng góp phần lớn trong việcthay đôi, cải thiện đời sống và làm việc của con người, cụ thể có thé ké đến một

số lợi ích sau:

- Giúp giao tiếp tốt hơn giữa người với người;

- Gziup con người truy cập thông tin nhanh chong;

- Truyén lưu dé liệu;

- Quan ly thiét bi tir xa;

- Tự động hóa san xuất;

- Cải thiện kinh doanh qua việc tiếp cận trực tuyến; `

Thiết bị thông mình Thiết bị thông minh là thiết bị số có khả năng tự động hóa cao, ứng dụng tri

tuệ nhân tao và khả năng tương tác — thích nghi với môi trường xung quanh, hay

cập nhật phần mềm để cải thiện tính năng Nhìn chung, chúng là những thiết bị

số có mức độ tích hợp công nghệ thông minh và khả năng tương tác với môi trường cao Các thiết bị thông minh phổ biến hiện nay là bao gồm smartphone

(điện thoại di động thông minh), đồng hồ thông minh, ô tô tự lái,

Thiết bị di động

Theo Quy định về dam bảo an toàn, bảo mật hệ thong công nghệ thông tintrong hoạt động ngân hàng số 31/2015/TT-NHNN ngày 28 tháng 12 năm 2015của Ngân hàng Nhà nước Việt Nam, thiết bị di động là “thiết bị số có thể cầm

tay,

Trang 20

Đồ án tốt nghiệp Đại học Chương 1: Cơ sở lý luận và khái niệm chung

có khả năng xử lý, kết nối mạng và có màn hình hién thị như máy tính xách tay,

máy tinh bảng, điện thoại di động thông minh” [5].

Điện thoại

Điện thoại là một thiết bị viễn thông dùng để đồng thời truyền và nhận giọng nói của con người, được ra đời vào cuối thé ky XIX Điện thoại biến tiếng

nói thành tín hiệu điện và truyền trong mạng điện thoại đến thiết bị của người

dùng khác và biến chúng thành âm thanh.

1.1.2 Điện thoại di động thông minh

Tổng hợp từ những khái niệm trên, có thể thấy smartphone là một thiết bị

số cầm tay, chức năng chính là dé nghe — gọi — nhắn tin, ứng dụng công nghệcao Loại điện thoại này có sự phát triển hơn so với điện thoại phổ thông hay

điện thoại tính năng (feature phone) ở khả năng kết nối mạng Internet, sử dụng

phần mềm ứng dụng, khả năng phần cứng và hệ điều hành mạnh mẽ, chức năng

đa phương tiện, mản hình cảm ứng

Hình 1.1 Điện thoại tính năng Nguồn: counterpointresearch.com.

Dinh Hương Giang — Lớp: D19TKDPT01 8

Trang 21

Hình L2 Điện thoại di động thông minh Nguon: nytimes.com

1.1.3 Các đặc điểm của điện thoại thông minh ảnh hưởng tới việc thiết kế

ứng dụng

Mỗi smartphone đều có một đặc điểm riêng như hệ điều hành, tính năng,

phần mềm hệ thống, kích cỡ màn hình, tùy thuộc vào dòng và hãng của điện

thoại đó Theo Human Interface Guidelines của Apple, khi thiết kế một ứng dụng điện thoại, cần bắt đầu băng cách hiểu các đặc điểm của điện thoại [21] Dưới day tác gia trình bay một số các đặc điểm riêng của các loại điện thoại sử

dụng hệ điều hành iOS va Android

Màn hình của thiết bị

Hình 1.3 Điện thoại Samsung Z Fold 5 Nguồn: Samsung.

Dinh Huong Giang — Lớp: DISTKDPTO1 9

Trang 22

Hình 1.4 Các trạng thái mở của điện thoại Android có tính năng gập Nguồn:

Material Design.

Các điện thoại iPhone có màn hình cỡ trung bình, độ phân giải cao [21], hỗ

trợ cả bố cục xoay dọc và xoay ngang [38] Một số điện thoại Android có khảnăng gập, vi dụ điển hình là Samsung Z Fold Khi thiết kế ứng dụng cho loại

điện này, ngoài bố cục dọc - ngang thông thường, nhà thiết kế còn cần thiết kế thêm cho các bố cục mở rộng của điện thoại [52].

Vùng an toàn (safe area)

Vùng an toàn là khu vực màn hình không bị che bởi thanh điều hướng,thanh tab, thanh công cụ hoặc các chế độ xem khác

= tế Lé Lé

Hình 1.5 Vùng an toàn (safe area) và lề (margin) của thiết bị iOS theo hướng

dọc và ngang Nguôn: Apple.

Công thái học

Với một thiết bị điện thoại, người dùng có thé cầm bang 1 tay hoặc 2 tay và

theo hướng dọc hoặc ngang [21] Năm 2013, UX Matters đã thực hiện khảo sat

và kết luận rằng 49% người dùng sử dụng thiết bi chủ yếu băng 1 tay, 36% cầm

bang 2 tay trong khi sử dụng 1 tay dé tương tác và 15% tương tác với điện thoạibang 2 tay [28] Khi nghiên cứu và thiết kế, ta cần quan tâm đến vấn dé này vì

với mỗi cách câm, tâm với của tay sẽ khác nhau.

Trang 23

Đồ án tốt nghiệp Đại học Chương 1: Cơ sở lý luận và khái nệm chung

O Tam với vừa phải

@ Khó với tới

Hình 1.6 Vùng vừa tam với (xanh), tam với vừa phải (vàng) và khó với tới (đỏ)thay đổi tùy theo cách cam điện thoại của người dùng Nguôn: Shutterstock

Đầu vào (input)

Đầu vào là các đối tượng cung cấp khả năng tương tac của một ứng dụng[25] đối với điện thoại thì là cảm ứng đa điểm, ban phim ảo, điều khiến giọng

nói [21, 30] Ngoài ra, người dùng cũng có thé kết nối thêm đầu vào bên ngoài như chuột, bàn phim, Dé app trở nên dé dùng, nhà phát triển nên có những

phương án thiết kế khác khi sử dụng những đầu vào bên ngoài [25, 30]

Tinh năng hệ thong

Các hệ thống khác nhau cung cấp những tính năng khác nhau để giúp người

dùng trong trải nghiệm sử dụng điện thoại Designer nên ứng dụng/cho phép

những tính năng đó trong app của mình để người dùng có trải nghiệm quenthuộc và nhất quán giống khi dùng những app mặc định của thiết bị đó

1.2 Tổng quan về ứng dụng điện thoại di động thông minh

1.2.1 Phần mềm

Phần mềm là “chương trình máy tính được mô tả bằng hệ thống ký hiệu,

mã hoặc ngôn ngữ dé điều khién thiết bị số thực hiện chức năng nhất định” [8]

Các phần mềm thường được phân loại theo:

- Phần mềm hệ thống: Là phần mềm dùng dé quản lý hành vi phần cứng máy tính, cung cấp các chức năng cơ bản được người dùng yêu cầu hoặc nén tang dé

Trang 24

chạy phần mềm ứng dụng Ví dụ: các hệ điều hành Windows, Mac, Linux; phần

mềm chống virus,

- Phan mềm ung dung: La phan mềm thực hiện các chức năng đặc biệt hoặc

cung cấp chức năng giải trí nằm ngoài các hoạt động cơ bản của máy tính Ví

dụ: trình duyệt web Google Chrome, trò chơi Tetris,

1.2.2 Ứng dụng di động

Một ứng dụng di động (mobile application) là một loại phần mềm ứng dụnghoạt động trên các thiết bị di động như smartphone, máy tính bảng hay đồng hồthông minh; được thiết kế dé cung cấp chức năng hoặc dich vụ cụ thé cho người

dùng [15, 34, 45, 49].

Các ứng dụng di động có thé được phat hành hoặc tai xuống từ các cửa

hang ứng dụng chính thức như Apple Store (cho hệ điều hành iOS của Apple),

Google Play Store (cho hệ điều hành Android của Google).

Có nhiều loại ứng dụng di động khác nhau, mỗi loại có những chức năng

và mục đích riêng như:

- Mạng xã hội: Các ứng dụng cung cấp nền tảng dé người dùng chia sẻ suy

nghĩ, anh, video và kết nối cùng những người khác như Facebook, Instagram,

- Trò chơi: Candy Crush, Homescape, Among Us,

- Học tap: Microsoft Office, Zoom, Duolingo,

- Thương mại điện tử: Cac ứng dung mua sắm trực tuyến Shopee, Lazada,

1.2.3 Phân loại ứng dụng di động

Các app có thể được phân loại theo nhiều cách khác nhau: theo chức năng,

theo lĩnh vực, công khai hoặc riêng tu, Tại đây, tac giả trình bay 2 cách phan

loại quan trọng: theo công nghệ sử dụng và theo nhóm đối tượng mục tiêu

Theo công nghệ sử dụng

Native app (ứng dụng gốc) Native app là app mà người dùng tải về và cài đặt vào thiết bị đi động [57]

của mình Loại app này được phát triển riêng biệt cho nền tang di động [40],thậm chí là cho một hệ điều hành cụ thể [45], do vậy sé mất nhiều thời gian vàcông sức dé và phát triển hơn Ưu điểm của native app là hoạt động nhanh hơn,giao điện nhất quán hơn, tính bảo mật tốt hơn, có khả năng dễ dàng truy cập vàocác chức năng tích hợp sẵn của thiết bị như máy ảnh, Bluetooth và GPS [18, 40,

45, 57].

Trang 25

Web app (ung dụng web)

Web app là những app mà người dùng có thé truy cập từ trình duyệt củathiết bị di động và máy tính [57] Chúng yêu cầu người dùng cần có kết nối trực

tuyến, ồn định [45] bởi vi đữ liệu không được sao lưu ở trong thiết bị, về mặt

tích cực thì loại app này tốn ít dung lượng lưu trữ hơn Ngược lại với native app,web app chỉ cung cấp cho người dùng quyền sử dụng các chức năng được hỗ trợbởi trình duyệt web ma họ đang dùng dé truy cập [18, 57] Web app tương đối

đơn giản, rẻ và tốn ít thời gian phát triển.

Hybrid app (ứng dung lai)

Đúng như tên của minh, hybrid app là loại app kết hợp giữa các yếu tố củanative app và web app IBM cho rằng hybrid app “là các trang web được gói

trong vỏ bọc của native app” [40]; còn AWS định nghĩa rằng đây là một loại native app đặc biệt mà cấu trúc bên trong giống với web app [57] Nhìn chung,

cả 2 cách định nghĩa đều không sai Hybrid app nằm giữa, cung cấp cho người dùng hiệu suất và trải nghiệm sử dụng tương tự như native app với chi phí rẻ và

thời gian phát triển nhanh hơn

Tùy vào mục đích, các yếu tổ liên quan như thời gian phát triển, nhu cầu của khách hàng, chiến lược tiếp thị, độ phức tạp của ứng dụng, nhà thiết kế và phát triển có thê cân nhắc và lựa chọn loại app phù hợp nhất.

Phan loại theo nhóm đối twong mục tiêu Dành cho người dùng cuối

Theo Joca Torres, loại app này tập trung vào giải quyết các vấn đề cụ thểcủa những khác hàng sẵn sàng tra tiên dé sử dụng chúng [51] Trong đó, người

dùng trả phí trực tiếp hoặc gián tiếp để trải nghiệm ứng dụng Không có ứng dụng nào thật sự miễn phí, các nhà phát triển sẽ kiếm được tiền từ người dùng bang cách này hay cách khác: sử dụng mô hình freemium, paidmium, tạo doanh thu từ quảng cáo trong ứng dụng [49, 51, 58], app nằm trong các sản phẩm trả

phí, app thương mại điện tử mà người dùng sẽ trả phí ứng dụng qua sản phẩm họ

mua [ŠT]

Dành cho doanh nghiệp

Loại app này tập trung vào giải quyết các vấn đề phục vụ cho dịch vụ, hiệusuất, nhân sự của các doanh nghiệp - đối tượng sẵn sàng chi trả cho việc phattriển và duy trì ứng dụng [51] Các app dành cho doanh nghiệp thường đượcphát triển riêng và không phát hành công khai trên các cửa hàng ứng dụng [40]

Trang 26

1.3 Tổng quan về thiết kế UX/UI

UX (User experience Trải nghiệm người dùng) va UI (User interface

-Giao diện người dùng) là hai khái niệm quan trong, mau chốt trong thiết kế sảnphẩm nói chung và thiết kế ứng dụng điện thoại nói riêng Chúng thường đi đôivới nhau dé chỉ một lĩnh vực thiết kế các sản phâm số như app, web, Song, đâyvan là 2 khái niệm khác biệt, cần phân biệt và hiểu rõ dé tận dụng chúng hiệu

quả.

1.3.1 Thiết kế trải nghiệm người dùng

1.3.1.1 Trải nghiệm người dùng (User experience)

Don Normal và Jakob Nielsen cho rang UX “bao gồm tất cả các khía cạnhtương tác của người dùng cuối với công ty, cũng như các dịch vụ và sản phẩm

của công ty đó” [43] Normal và Nielsen cho rằng yêu cầu đầu tiên của một sản phẩm có UX tốt là phải đáp ứng chính xác được nhu cầu của khách hàng Dé có

được điều này, cần phải có sự kết hợp đa lĩnh vực, bao gồm: kỹ thuật, tiếp thị,

thiết kế đồ họa, thiết kế công nghiệp và thiết kế giao diện.

Jesse James Garrett mô ta UX là một “trải nghiệm mà san phẩm tạo ra chonhững người sử dụng chúng trong thế giới thực” [25] Cụ thể, đó không phải làcách hoạt động bên trong của một sản phẩm mà là “cách nó hoạt động bên ngoàikhi được người nào đó sử dụng” Theo Garrett, “mỗi sản phẩm từng được sử

dụng bởi một cá nhân nào đó đều có UX: sách, hộp xốt cà chua, ghế banh, áo

„”

len”.

Tiêu chuẩn ISO 9241-11:2018 định nghĩa UX là “sự nhận thức và phản hồi

của người dùng bắt nguồn từ việc sử dụng và/hoặc nghĩ tới việc cần sử dụng một

hệ thống, sản phẩm hoặc dịch vụ” [32] Cụ thể, nhận thức và phản hồi của người

dùng bao gồm các cảm xúc, niềm tin, sở thích, hành vi, hay thành tích trước, trong, và sau khi sử dụng UX là kết quả của hình ảnh thương hiệu, trình bày,

chức năng, hiệu suất, tương tác, và khả năng hỗ trợ của một hệ thống, sản phẩm,

hoặc dịch vụ Ngoài ra, chúng còn bị ảnh hưởng bởi tác nhân xung quanh người dùng như “trải nghiệm trước đây, thái độ, kĩ năng, khả năng, tính cách của người dùng, [ ] hoàn cảnh sử dung”.

Dựa trên các quan điểm trên, có thể thấy UX là những trải nghiệm mà

người dùng có được khi tiếp xúc một đối tượng nhất định trong cuộc sống không nhất thiết là trên môi trường số Có 2 mặt ảnh hưởng trực tiếp đến UX: (1) yếu tố liên quan tới bản thân người dùng (cu thé như nhu cau [43], kỹ năng,

-Dinh Hương Giang — Lớp: DI9ØTKDPT0I 14

Trang 27

hoàn cảnh sử dụng [32] ) và (2) bản thân đối tượng đó

Dinh Huong Giang — Lớp: D19ØTKDPT0I1 15

Trang 28

1.3.1.2 Thiết kế trải nghiệm người dùngThiết kế UX hay UXD (thiết kế trải nghiệm người dùng) là quá trình “tạo

ra các sản phẩm mang lại trải nghiệm có ý nghĩa và phù hợp với người dùng”

[53] Ngoài ra, theo Garrett, UXD sẽ “được quy định boi tâm lý và hành vi của

người dùng” [25] UXD phải được đảm bảo được khía cạnh thấm mỹ và khíacạnh chức năng của sản phẩm phù hợp với bối cảnh sử dung của sản phẩm đó.Ngoài xác định mục tiêu và chức năng chính của sản phẩm, UXD cần cân nhắc

cùng các yếu tô như thị trường và công nghệ sử dụng dé tìm ra lợi thé cạnh tranh của sản phâm Những yếu tô cạnh tranh này có thé ké đến hoặc nằm trong các

khía cạnh của sản phẩm như: thương hiệu, năng suất, chức năng cung cấp [13,

53].

Một số nhiệm vụ trong qua trình UXD là:

Nghiên cứu người dùng bằng cách tiễn hành các khảo sát, phỏng vấn,

phân tích hành vi dé trả lời cho câu hỏi: Người dùng của sản phẩm là ai? [13]

Xây dựng persona trong đó bao gồm các chỉ tiết như trình độ học vấn, lối

sống, sở thích, thái độ, của người dùng kiểu mẫu (hư cấu) đại diện cho một

nhóm người dùng mục tiêu [13].

Xây dựng CJM đề xác định hành trình trải nghiệm của từng nhóm người dùng mục tiêu, từ đó tìm ra những vấn đề mà người dùng gặp phải và tìm cách

giải quyết chúng

Xây dung wireframe và prototype để trực quan hóa các ý tưởng, nội dung

và kiến trúc thông tin của sản phẩm

Kiểm thử và đánh giá với người dùng thực tế, qua đó thu thập phản hồi,

đánh giá trải nghiệm dé thiết kế, hoàn thiện, chỉnh sửa sản phẩm hiện tại.

1.3.2 Thiết kế giao diện người dùng

1.3.2.1 Giao diện người dùng (User Interface)

Theo ISO 9241-110:2006, UI là “tất cả các thành phần của hệ thống tươngtac (phần mềm hoặc phan cứng) cung cấp thông tin và điều khiển dé người dùnghoàn thành các tác vụ cụ thê với hệ thống tương tác” [3 I]

Theo Debbie Stone và cộng sự, UI là một phần của hệ thống máy tính, qua

đó người dùng “tương tác để thực hiện nhiệm vụ của mình và đạt được mục tiêucủa mình” [48] Nhóm tác giả cho rằng quá trình triển khai UI cần lẫy người

dùng

Trang 29

làm trung tâm, cụ thể là “hiểu được người dùng, nhiệm vụ mà họ muốn thực

hiện, và môi trường xung quanh khi họ thực hiện hành động đó”.

Theo IxDF (Interaction Design Foundation), UI bao gồm “tất cả các yêu tốtrực quan mà người dùng nhìn thấy, nghe thấy và tương tác, bao gồm màu sắc,kiểu chữ, nút, biéu tượng, animation (hoạt ảnh), ” [54]

UI được chia ra làm 3 loại dựa trên cách người dùng tương tác với thiết bị:

(1) Giao điện đồ họa người dùng (Graphical user interface - GUI): Người dùng tương tác với các hình ảnh trực quan (như chạm, vuốt, nhấn giữ, ) trên

một thiết bị

(2) Giao điện điều khiển bằng giọng nói (Voice-controlled interface - VUI):

Người dùng tương tac với giao diện nay thông qua giọng nói của họ.

(3) Giao diện dựa trên cử chỉ (Gesture-based interface): Người dùng tương

tác với giao diện thông qua chuyền động cơ thể.

Giao diệnđồhoa Giao diện điều khiển Giao diện dựa

người dùng bằng giọng nói trên cử chỉ

(Graphical User (Voice-controlled (Gesture-based

Interface) interface) interface)

Hình 1.7 Cách phân loại UI dựa trên cách người dùng tương tác với thiết

bi.

Nguồn: Interaction Design Foundation.

Trong phạm vi đồ án, tác giả tập trung nói đến UI như giao diện đồ hoa

người dùng - các thiết kế trực quan trên một thiết bị số, phần lớn là thiết bị điện

Trang 30

tương tác.

Dinh Hương Giang — Lớp: DI9TKDPT0I 18

Trang 31

Thiết kế UI có một ảnh hưởng to lớn đối với UX [54] Thiết kế UI có thể đẹp và thu hút người dùng về mặt thâm mỹ, song, nếu người dùng không thể bam vào một button đẹp đẽ, không thể đọc được một dòng chữ được thiết kế hào

nhoáng, họ dan cảm thấy khó chịu Nói cách khác, UX của sản phẩm đó bị giảmxuống

Từ những cơ sở trên, ta thấy rằng trong thiết kế ứng dụng nói chung vàthiết kế ứng dụng smartphone nói riêng, cần sử dụng kết hợp quá trình thiết kế

UX và UI Thiết kế UI sử dụng những kết quả của nghiên cứu UX để tạo nênmột giao diện mà người dùng có thể tương tác Thiết kế UX lại tiếp tục nghiêncứu và đánh giá dé cải thiện trải nghiệm của người dùng trên thành quả của thiết

giúp; các màu sắc, bố cục, phông chữ, cách viết hoa, cần được sử dụng nhất

quán và xuyên suốt Các ngoại lệ, như yêu cầu xác nhận lệnh xóa hay lưu ý

không lặp lại mật khâu, phải dé hiểu và ngắn gọn

(2) Xây dựng khả năng sử dụng toàn phần Nhận biết những nhu cầu đadạng của người dùng và thiết kế cho sự khả biến, tạo điều kiện chuyên đổi nộidung Sự khác biệt giữa trình độ của người mới và chuyên gia, độ tudi, tinhtrạng khuyết tật, văn hóa và trình độ công nghệ đều là những điều cần cân nhắckhi thiết kế Bằng cách thêm những tính năng cho người mới như giải thích,

hướng dẫn, và các nút tắt, nút bỏ qua dành cho chuyên gia, giao diện sẽ trở

nên phong phú và dễ sử dụng cho đa dạng người dùng hơn

Giải thích kỹ hơn về sự khả biến trong thiết kế, bai bao Plasticity ininterface design của Paul V John nói về sự khả biến thần kinh của não người Bộ

não con người có thể sản xuất những dây thần kinh mới dựa trên những thói

quen và hành vi cua con người; và khi những thói quen đó lặp đi lặp lại, các day

đó được củng cố và truyền tin nhanh hơn John đặt ra câu hỏi “Sẽ thế nào khi

Trang 32

chúng ta áp dụng sự khả biến, tương tự như sự khả biến thần kinh của não

người, vao trong việc

Dinh Huong Giang — Lớp: D19ØTKDPT0I1 20

Trang 33

thiết kế giao diện? Chúng ta có thé thiết kế những giao diện phù hợp với hành vi của mỗi người dùng, như cách não người tái định hình không?” John kết luận rang UI cần luôn phát triển: các component (thành phan thiết kế) sử dụng nhiều cần được củng có, và giảm bớt những component ít được áp dung [35].

(3) Cung cấp phản hồi chất lượng Đối với mỗi những hành động của người dùng, cần có những giao diện phản hồi: phản hồi nhỏ cho những hành

động thường xuyên va phản hồi đáng chú ý cho những hành động không thường

xuyên và mang tính quan trọng hơn.

(4) Thông báo khi một hành động đã kết thúc Một chuỗi hành động cầnđược sắp xếp vào các nhóm có mở đầu, phần giữa và kết thúc Ở cuối mỗi chuỗihành động, cung cấp phản hồi dé giúp người dùng cảm thấy hài lòng, nhẹ nhõm

khi hoàn thành, chuẩn bị tỉnh thần cho chuỗi hành động tiếp theo Shneiderman lấy ví dụ cho nguyên tắc này là các website thương mại điện tử đưa người dùng

đi từ giai đoạn lựa chọn sản phẩm tới thanh toán, và kết thúc băng một màn xác

nhận chi tiết dé hoàn thành giao dich

(5) Ngăn ngừa Idi Thiết kế giao điện dé người dùng không mắc phải

những lỗi nghiêm trọng, ví dụ như: làm mờ những danh mục menu không phù

hợp hoặc không cho phép nhập chữ cái vào các trường nhập số Trong trườnghợp người dùng mắc lỗi, giao diện nên cung cấp các hướng dẫn đơn giản, cụ thể

để giúp người dùng khắc phục Ví dụ, Ví dụ: người dùng không cần phải nhập lại toàn bộ biểu mẫu nếu họ chỉ nhập sai một trường duy nhất, thay vào đó giao

diện chỉ hướng dẫn sửa trường nhập lỗi

(6) Cho phép người dùng dễ dàng hoàn tác các hành động Khi người dùng

biết răng các lỗi có thé sửa được, ho sẽ bớt lo lắng và được thúc day dé tìm hiểu

những lựa chọn mới lạ hơn Don vi hoàn tác có thé là một hành động đơn lẻ,

một tác vụ nhập dữ liệu hoặc là một nhóm hành động hoàn chỉnh.

(7) Cho người dùng quyên kiểm soát Những người dùng có kinh nghiệm mong muốn cảm giác làm chủ giao diện, sao cho giao điện phản hồi hành động của họ Họ không muốn những bat ngờ hay thay đổi trong những hành vi quen thuộc, cũng như cảm thấy phiền phức bởi việc nhập những thông tin tẻ nhạt, khó

khăn trong việc thu thập thông tin cần thiết, hay không thé hoàn thành kết quả

như mong muôn.

Trang 34

(8) Giảm tải bộ nhớ ngắn hạn Bộ nhớ ngắn hạn của con người chỉ có thể

xử lý cùng lúc 7 ® 2 khối thông tin Điều này yêu cầu các nhà thiết kế cần tránh

xây dựng các giao điện mà người dùng cần nhớ một thông tin ở màn hình này và

sử dụng thông tin đó ở một màn khác Điều này có nghĩa là điện thoại di độngnên có gợi ý có sẵn trong các trường nhập số điện thoại, vị trí trang web luônđược hiểu thị và các biéu mẫu dài cần được co gọn lại trong một màn duy nhất

1.3.3 Phuong pháp thiết kế lấy người dùng làm trung tâm

(User-Centered Design)

UCD (thiết kế lấy người dùng làm trung tâm) là một phương pháp thiết kếUX/UI với cách tiếp cận tập trung vào người dùng, nhu cầu và yêu cầu của ho[26, 33, 46] Theo ISO 9241-210:2019, phương pháp này “làm cho các hệ thống

tương tác dé sử dụng hon, cụ thé bằng cách tập trung vào khía cạnh sử dung của các hệ thống, áp dụng các yếu tố con người, cũng như kiến thức và kỹ thuật về

độ kha dụng.” [33] Tóm lai, UCD là phương pháp thiết kế sản pham mà trong

đó người dùng và nhu cầu của họ đóng vai trò quan trọng nhất Trong thiết kế UX/UI, UCD cũng là một phương pháp tiếp cận phố biến để xây dựng một ứng

dụng hay website có hiệu quả.

Hình 1.8 thể hiện một quy trình UCD hoàn chỉnh Có thê thấy, các bước

không đi theo một chu trình tuyến tính mà sẽ được đánh giá và lặp đi lặp lại cho

đến khi đáp ứng được yêu cầu đã đặt ra Tuy nhiên, những giai đoạn này có thêđược cân nhắc và thay đổi tùy thuộc vào đặc tính của từng dự án

Hiểu và xác định bối cảnh sử dụng: Quy trình này bao gồm việc trả lờicác câu hỏi: Ai là người sử dung sản phẩm? Ho sử dụng sản pham dé làm gì? Họ

sử dụng sản pham nay trong hoàn cảnh này? Nhìn chung, qua giai đoạn này,

designer sẽ có một cái nhìn rõ ràng về người dùng, cũng như phân tích các

nhiệm vụ, bối cảnh và môi trường của họ

Cụ thé hóa yêu cau: Xác định những yêu cầu kinh doanh hoặc mục tiêu của người dùng cần được đáp ứng dé sản phẩm thành công Bao gồm nhiều cách

khác nhau như: đưa người dùng cuối vào nhóm thiết kế, tham khảo ý kiến củangười dùng cuối tiềm năng và các bên liên quan, nghiên cứu thứ cấp,

Dua ra giải pháp thiết kế: Từ kết quả của việc đánh giá, tong hợp va phân tích, từ đó đưa ra các chức năng cho sản phẩm hoặc giải pháp thiết kế Phan này

Trang 35

của quy trình có thể được thực hiện theo từng giai đoạn, xây dựng từ ý tưởng thô đến thiết kế hoàn chỉnh.

Đánh giá thiết kế so với yêu cầu: Việc đánh giá sản phẩm được lặp đi lặp

lại dựa trên các yêu cầu, với sự tham gia của người dùng cuối Một số phươngpháp có thé sử dụng trong giai đoạn này bao gồm: thử nghiệm người dùng (user

testing), đánh giá thực nghiệm (heuristic evaluation), và hướng dẫn nhận thức

(cognitive walkthrough).

Xác định nhu cầu

của người dùng

Thiết kế đáp ứng Hiểu và xác định

được yêu cầu bối cảnh sử dụng

Đánh giá thiếtkế [ ~ˆˆ""""~ Cụ thể hóa

dựa trên yêu cẩu a các yêu cau

Đưa ra giải pháp

thiết kế

Hình 1.8 Quy trình thiết kế tập trung vào người dùng.

Đề đảm bảo một thiết kế lay người dùng làm trung tâm, cần theo sát nhữngnguyên tắc [26, 33] sau:

(1) Thiết kế được dựa trên sự hiểu biết rõ ràng về người dùng, nhiệm vụ

của họ và môi trường xung quanh;

(2) Người dùng được tham gia xuyên suốt quá trình thiết kế và phát triển;

(3) Thiết kế được định hướng va tinh chỉnh bằng các phương pháp đánh giá

lay người dùng làm trung tâm Nên có prototype (mẫu thử nghiệm) ở mỗi giai

đoạn của quá trình phát triển để trực quan hóa thiết kế trong quá trình thửnghiệm với người dùng thực tế;

Trang 36

(4) Quá trình này lặp đi lặp lại và tăng dần khi các yêu cầu mới hoặc thay

đổi xuất hiện;

(5) Thiết kế đề cập đến toàn bộ trải nghiệm người dùng:

(6) Nhóm thiết kế có sự tham gia kết hợp của đa ngành nghề vì mỗi phần của quy trình thiết kế - phát triển đòi hỏi các kỹ năng và trình độ khác nhau;

(7) Quá trình thiết kế cần được điều chỉnh cụ thể cho từng dự án vì không

có quy trình UCD có thê nào phù hợp với mọi tình huống.

Tóm lại, có thể hiểu ngắn gọn là UI là những thứ có trên một giao diện màngười dùng có thể nhìn thấy, nghe thấy và tương tác cùng được, còn UX lànhững điều mà người dùng cảm thấy khi tương tác cùng với giao diện đó Cónhiều phương pháp dé thiết kế như lay chức năng làm trung tâm, lấy giao diện

làm trung tâm, tuy nhiên để người dùng có một UX tốt thì designer thường

lựa chọn phương pháp lay người dùng làm trung tâm

1.4 Tổng quan về du lịch văn hóa

1.4.1 Du lịch

Tổ chức Du lịch Thế giới (UNWTO) định nghĩa du lịch là hoạt động tham quan các địa điểm khác với môi trường sống thường ngày trong khoảng thời

gian dưới | năm cho các mục đích như giải trí hay kinh doanh Định nghĩa nay

được sử dụng rộng rãi trong các nghiên cứu.

Có thé phân loại du lịch làm nhiều loại hình khác nhau, dựa vào nhu cầu và

sở thích của người đi du lịch: du lịch văn hóa, du lịch nghệ thuật, du lịch nghỉ

dưỡng, du lịch mạo hiểm, du lịch y tế,

Việt Nam có văn hóa phong phú, phong cảnh đa dạng, dịch vụ rẻ và an toàn

nên thường được lựa chọn làm điểm đến của nhiều khách du lịch trên thế giới

Du lịch Việt Nam đặc biệt có thế mạnh về các mảng du lịch văn hóa, du lịch hội

trong đó du khách chủ yếu hướng tới hiểu biết, khám phá và trải nghiệm nền văn

hóa hay những sản phâm và điêm đên văn hóa của điêm đên Những sản phâm

Trang 37

hay

Dinh Hương Giang — Lớp: DI9TKDPT0I 25

Trang 38

điểm đến này đóng vai trò quan trọng trong đời sống vật chất, tinh thần và tình cảm trong xã hội đó Những điểm đến văn hóa bao gồm các tác phẩm hội họa, kiến trúc, đi sản lịch sử và văn hóa, 4m thực, văn học, âm nhạc, các ngành công

nghiệp sáng tạo, hay các nền văn hóa hiện thời, đặc trưng bởi lối sống, gia tri,

niềm tin và truyền thống

Theo Luật Du lịch Việt Năm năm 2005, du lịch văn hóa là “là những

chuyên đi mà mục đích chính hoặc mục đích bao gồm trong đó là thăm các địa

điểm, sự kiện mà giá trị văn hóa, lịch sử của chúng khiến chúng trở thành một

phan trong di sản văn hóa của một cộng đồng” [7]

Như vậy, du lịch văn hóa là loại hình du lịch mà du khách ghé thăm các địa

điểm và sự kiện có giá trị văn hóa, lịch sử của một cộng đồng, qua đó tìm hiểu

về cộng đồng, địa phương, đất nước mà địa điểm, sự kiện đó ở trong Hiện tại,

một trong những ưu tiên hàng dau dé phát triển du lịch văn hóa Việt Nam bền vững là “xúc tiến, quảng bá hình anh du lịch Việt Nam qua các công cụ thông tin

dich của nó.

Về sau, khi gamification được quan tâm và nghiên cứu nhiều hơn, cácchuyên gia gamification đã có những định nghĩa khái quát được 2 mặt kể trên

Gabe Zichermann và Christopher Cunningham định nghĩa gamification là

“việc sử dụng tư duy trò chơi và cơ chế trò chơi để lôi cuốn người dùng và giải quyết van đề của họ” [60] Nhóm tác giả đề cập tới các sản phẩm trò chơi có

mục đích quảng cáo sản phẩm, dịch vụ và những thiết kế thế giới ảo 3D được sửdụng như phương pháp đào tạo người dùng trong các hệ thống phức tạp, hoặc đểthay đổi hành vi; và cho rằng những ví dụ này đều là kết quả của quá trình

gamification.

Trang 39

Karen Robson và cộng sự định nghĩa gamification là “việc áp dụng các bài

học từ lĩnh vực trò chơi để thay đổi hành vi trong các tình huống không phải là

trò chơi” [44] Theo nhóm tác giả, những trải nghiệm được gamify có thé tậptrung vào quy trình (ví dụ: thu hút khách hàng) hoặc kết quả (ví dụ: tăng doanh

số bán hàng) của một quy trình kinh doanh; có sự tham gia của những người

trong hoặc ngoài công ty (ví dụ lần lượt: cải thiện sự hai lòng của nhân viên;đồng phát triển sản phẩm với khách hàng)

Trong cuốn sách “Actionable gamification: beyond points, badges, and leaderboards” (2019), tác giả Yu-kai Chou cho rang gamification là quá trình

mang những yếu tố vui vẻ, khiến mọi người tan hưởng các trò choi và áp dung

vào những vấn đề thiết thực, ít thú vị hơn trong thế giới thực [20] Tác giả cho

rằng những sản pham của phương pháp này có thể tối ưu hóa động lực của con

người trong một hệ thống, trái ngược lại với những thiết kế xoay quanh chức

năng của sản phẩm thuần túy Trong cuốn sách, Chou cũng chỉ ra răng khi nói

về gamification, phần lớn mọi người sẽ nghĩ đến những thành tích trong các tròchơi như điểm số, huy hiệu/huân chương, hay bảng xếp hạng Đương nhiênnhững người chơi sẽ cảm thấy tự hào và thỏa mãn với bản thân khi có điểm sốcao, đạt được các huy hiệu, hay xuất hiện trên bảng xếp hạng Nhưng đây khôngphải lý do một người bắt đầu chơi một trò chơi mới hoặc sử dụng một dịch vụ

nào đó Mặt khác, lý do một người bắt đầu và tiếp tục chơi sử dụng một sản phẩm sẽ liên quan đến ứrđi nghiệm của người choi này với sản phẩm, thay vì những hệ thong thưởng hay thành tích trong sản pham đó.

Qua các quan điểm trên, ta có thé thấy rằng gamification tập trung vào

động lực và trải nghiệm của con người; được ứng dụng trong mọi mặt của cuộc

sống, ví dụ có thé kể đến như marketing, giáo dục, kinh doanh, hay thiết kếUX/UI Trong phạm vi đồ án này, tác giả sẽ tập trung nghiên cứu ứng dụng củagamification vào thiết kế UX/UI

1.5.2 Gamification trong thiết kế

1.5.2.1 Quy trình thiết kế Player-Centered Design

Janaki Mythily Kumar va Mario Herger đã phác thao một phương pháp

mang tên Player-centered Design (tạm dịch: thiết kế lấy người choi làm làm

trung tâm) dé các nhà thiết kế ứng dung gamification vào phần mềm của minh.

PCD (Player- centered Design) là sự mở rộng của UCD [24, 37].

Trang 40

Nếu UCD sử dụng 3 tiêu chí hiệu quả (efficiency), hiệu suất (effectiveness)

và sự hài lòng (satisfaction) dé đánh giá một thiết kế thi PCD bổ sung thêm 1 tiêu chí hàng đầu là mức độ tương tác (engagement) Cụ thé, trong khi người thiết kế UCD đặt câu hỏi “Người dùng có thé sử dụng sản phẩm nay một cách hiệu quả, có hiệu suất và hài lòng không?”, người thiết kế ứng dụng

gamification lại tập trung giải quyết câu hỏi “Người dùng có muốn sản phẩmngay từ đầu không?” [20, 24]

PCD được xây dựng trong cuốn sách “Gamification at Work: Designing

Engaging Business Software” (2013) (tạm dịch: Gamification tai nơi làm việc:

Thiết kế phần mềm doanh nghiệp hấp dẫn) nên trong quy trình nhắc nhiều đến

bối cảnh doanh nghiệp, kết quả kinh doanh Để có một cái nhìn rõ hơn về cách tiếp cận này cho các thiết kế nói chung, tac giả có một số sửa đổi phù.

Quy trình PCD gồm 6 bước: (1) Thấu hiểu người dùng, (2) Thấu hiểu sứ

mệnh, (3) Thấu hiểu động lực con người, (4) Ap dụng các yếu tổ trò chơi, (5)

Quan lý, giám sát, đo lường, và (6) Cân nhắc khác trong bối cảnh sử dung [24]

Player Centered Design

Bối cảnh doanh nghiệp

Giảm sát

Sự vui vẻ

Hình 1.9 Quy trình thiết kế tập trung vào người chơi.

Nguồn: Interaction Design.

Định dạng
Số trang	125
Dung lượng	31,05 MB

Tiêu đề	Nghiên Cứu Về Gamification Trong Thiết Kế Và Áp Dụng Vào Thiết Kế Ứng Dụng Bản Đồ Du Lịch Văn Hóa Hà Nội
Tác giả	Dinh Hương Giang
Người hướng dẫn	Th.S. Nguyễn Thị Kim Ngõn
Trường học	Học viện Công nghệ Bưu chính Viễn thông
Chuyên ngành	Đa phương tiện
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2023
Thành phố	Hà Nội