Nghiên cứu phương pháp Emotional design và áp dụng vào cải thiện giao diện ứng dụng Sleepscore dành cho người dùng cuối

BO THONG TIN VÀ TRUYEN THONG HỌC VIEN CONG NGHỆ BƯU CHÍNH VIỄN THONG ĐỎ ÁN TÓT NGHIỆP ĐẠI HỌC Đề tài: “Nghiên cứu phương pháp Emotional design và áp dụng vào cải thiện giao diện ứng dung Sleepscore dành cho Giảng viên hướng dẫn: Ts Nguyễn Thị Tuyết Mai Sinh viên thực hiện: Nguyễn Ngọc Tuấn Lớp: DI9TKDPT2 Mã sinh viên: B19DCPT212 Hệ dao tạo: Đại học chính quy Hà Nội — 2023 KHÓA LUẬN TÓT NGHIỆP ĐẠI HỌC DE CƯƠNG HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH CỘNG HOÀ Xà HỘI CHỦ NGHĨA VIỆT NAM VIÊN THÔNG Độc lập — Tự do - Hạnh phúc KHOA ĐA PHƯƠNG TIỆN DE CUONG DO AN TOT NGHIỆP ĐẠI HỌC Ho và tên sinh viên: Nguyễn Ngọc Tuấn Lớp: DI9TKDPT02 Khoá: 2019-2023 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 phương pháp Emotional design và áp dụng vào cải thiện giao diện ứng dụng Sleepscore dành cho người dùng cuối 2 Lý do chọn đề tài: Ngủ là một nhu cầu thiết yếu của con người, có ảnh hưởng trực tiếp đến sức khỏe, chất lượng cuộc sống cũng như hiệu quả công việc Xét ở góc độ khoa học, ngủ là lúc não bộ của chúng ta thực hiện một số công việc quan trọng nhất, đó là xử lý và sắp xếp các thông tin quan trọng vào bộ nhớ dài hạn Còn ở góc độ sinh học thì giấc ngủ cũng là một hoạt động quan trọng giúp cơ thé phục hồi nguồn năng lượng đã tiêu hao sau mỗi quá trình hoạt động vat vả [1] Tuy nhiên, thực trạng giấc ngủ của người dân thế giới nói chung và Việt Nam nói riêng đang xấu đi và bị ảnh hưởng bởi nhiều yếu tố, trong đó có cả các yêu tổ khách quan va chủ quan Một trong các yếu tố khách quan có thé kê đến là biến đổi khí hậu, mà một trong những yếu tố chính là sự nóng lên toàn cầu, có thé khiến giấc ngủ không thoải mái va làm gián đoạn quá trình điều hòa nhiệt độ cơ thé trong giấc ngủ Một nghiên cứu được công bố trên Euronew.green cho thấy nhiệt độ 4m hơn mức trung bình làm giảm chat lượng giấc ngủ của con người bằng cách kéo dài thời gian chúng ta chìm vào giấc ngủ trong thời tiết nóng Nghiên cứu cũng cho thấy rằng vào năm 2099, khi nhiệt độ tăng cao có thể kéo đài thời gian ngủ của mỗi người lên đến 50 đến 58 giờ mỗi năm [2] Một yếu tố khách quan khác là Covid-19 Tại Việt Nam, theo Vinmec.com, dịch Nguyễn Ngọc Tuấn - BI9DCPT212 i KHÓA LUẬN TÓT NGHIỆP ĐẠI HỌC DE CƯƠNG Covid-19 đã làm giảm thời gian ngủ và làm tăng tỷ lệ mat ngủ của người dân toàn thé giới Trên 139 sinh viên đại học Hoa Kỳ cho thấy, sau khi các lớp học chuyên sang trực tuyến vào mùa xuân năm 2020, họ thức khuya hơn khoảng 50 phút mỗi đêm và ngủ thêm nửa giờ ngày hôm sau Còn những người trước đại dịch thiếu ngủ lại có thêm 2 giờ ngủ mỗi đêm [3] Các yếu tố chủ quan có thé kế đến như xu hướng sống khép kín và dành nhiều thời gian trên mạng xã hội nhiều hơn là ngoài đời thực của một bộ phận người dân hiện nay Theo một báo cáo của Lao động trẻ năm 2019, Việt Nam đứng thứ 2 trên thế giới với 60% người sử dụng mạng xã hội trước khi ngủ Khoảng 34% người Việt được xem là “Người có giấc ngủ đều đặn”, ngủ lúc 10-11h đêm va dậy lúc 7-8h sáng Khoảng 17% người Việt tự cho rang bản thân “mat ngủ” do giờ ngủ thất thường hoặc do nguyên nhân khác [4] Không chỉ về mặt giấc ngủ, tất cả những yếu tố trên cũng góp phần làm ảnh hưởng đến tâm lý của người dân thế giới nói chung và người dân Việt Nam nói riêng Không có tâm lý ôn định thi không thé ngủ ngon được Vì vậy, việc cải thiện chất lượng giắc ngủ và tâm lý của người dân là một van đề cấp thiết và quan trọng trong thời đại hiện nay Một trong những phương pháp hiệu quả dé làm điều này là áp dụng Emotional Design vào thiết kế giao diện ứng dung cải thiện giấc ngủ Emotional Design là một khái niệm được Donald Norman — một nhà khoa học máy tính, nhà tâm lý học và nhà thiết kế nổi tiếng — đưa ra trong cuốn sách cùng tên năm 2004 Theo Norman, Emotional Design là việc thiết kế sản phâm hay dịch vụ nhằm tạo ra những cảm xúc tích cực cho người dùng, từ đó tăng cường sự hài lòng, gắn kết và trung thành của họ [5] Từ những lập luận trên, em quyết định lựa chọn đề “Nghiên cứu phương pháp Emotional design và áp dụng vào cải thiện giao diện ứng dụng Sleepscore dành cho người dùng cuối” phục vụ việc thực hiện dự án và đồ án tốt nghiệp của mình 3 Nội dung chính của do án: CHUONG 1 TONG QUAN VE PHƯƠNG PHÁP EMOTIONAL DESIGN TRONG THIET KE UNG DUNG DI DONG 1.1 Tổng quan về ứng dụng di động Nguyễn Ngọc Tuấn - BI9DCPT212 ii KHÓA LUẬN TÓT NGHIỆP ĐẠI HỌC DE CƯƠNG 1.2 Tổng quan về Emotional Design 1.3 Tiêu kết chương 1 CHƯƠNG 2 UNG DUNG EMOTIONAL DESIGN TRONG THIẾT KE GIAO DIEN UNG DUNG APP SLEEPSCORE 2.1 Giới thiệu ứng dung quan lý giấc ngủ SleepScore 2.2 Ba bước tiễn hành áp dung mô hình A.C.T trong thiết kế cải thiện giao diện ứng dụng SleepScore 2.3 Áp dụng các nguyên lý của phương pháp Emotional Design vào đề xuất giải pháp cải thiện giao điện ứng dụng giấc ngủ SleepScore 2.4 Tiểu kết chương 2 CHUONG 3 THIẾT KE GIAO DIỆN UNG DỤNG CAI THIỆN GIÁC NGỦ SLEEPSCORE 3.1 Thiết kế phác thảo (Sketch) 3.2 Thiết kế khung giao điện (Wireframe) 3.3 UI Style Guide 3.4 Thiét ké truc quan 3.5 Tao Prototype cho giao dién Tiéu két chuong 3 4 Cơ sở dữ liệu ban đầu: [1] Bệnh viện đa khoa Nguyễn Tri Phương, “Quản lý giấc ngủ và nghỉ ngơi (P1)”, [Trực tuyến] Nguồn: https://bvnguyentriphuong.com.vn/dieu-duong/quan-ly-giac- ngu-va-nghi-ngoi [2] Angela Simons, “Rising temperatures will make it harder to sleep: These regions will be worst affected”, 22/05/2023 [Trực tuyến] Nguồn: https://www.euronews.com/green/2023/05/22/rising-temperatures-will-make-it- harder-to-sleep-these-regions-will-be-worst-affected#:~:text=People%20are %20already%20losing%20around, reviewed%20science%20journal%200ne %20Earth [3] Vinmec, “COVID-19 anh hưởng đến giấc ngủ của chúng ta như thé nào?”, [Trực tuyến] Nguồn: https://www.vinmec.com/vi/tin-tuc/thong-tin-suc-khoe/dich- Nguyễn Ngọc Tuấn - BI9DCPT212 Hi KHÓA LUẬN TÓT NGHIỆP ĐẠI HỌC DE CƯƠNG 2019-ncov/thong-tin-suc-khoe/covid-19-anh-huong-den-giac-ngu-cua-chung-ta- nhu-nao/ [5] Interaction Design Foundation — IxDF, “What is Emotional Design?”, 03/07/2016 [Truc tuyén] Nguồn: https:/www.Interaction-desien.org/]iterature/topics/emotional-desien Ngày giao đề tài: .⁄ ./20 Ngày nộp quyển: / /20 GIẢNG VIÊN HƯỚNG DẪN SINH VIÊN THỰC HIỆN (Ky, ghi rõ họ tên) (Ky, ghi rõ họ tên) Tuấn Nguyễn Ngọc Tuấn TRƯỞNG KHOA (Kỷ, ghi rõ họ tên) Nguyễn Ngọc Tuấn - BI9DCPT212 iv KHÓA LUẬN TÓT NGHIỆP ĐẠI HỌC LOI CAM ON LOI CAM ON Trước hết em xin bày tỏ long biết ơn sâu sắc nhất tới giảng viên hướng dan Tiến sĩ Nguyễn Thị Tuyết Mai đã tận tình giúp đỡ, hướng dẫn em rất nhiều trong suốt quá trình tìm hiểu nghiên cứu và hoàn thành báo cáo tốt nghiệp Đồ án tốt nghiệp đại học chuyên ngành Thiết kế Đa phương tiện với đề tài “Nghiên cứu phương pháp Emotional Design và ứng dụng vào cải thiện giao diện ứng dụng giấc ngủ SleepScore cho người dùng cuối” là kết quả của quá trình cố gang không ngừng nghỉ của bản thân và được sự giúp đỡ tận tình, động viên khích lệ của thầy cô, bạn bẻ và người than Xin gửi lời cảm ơn đến bạn bè, những người luôn bên em, đã động viên và tạo điều kiện thuận lợi cho em, tận tình giúp đỡ chỉ bảo em những gì em còn thiếu sót trong quá trình làm báo cáo tốt nghiệp Cuối cùng em xin bày tỏ lòng biết ơn sâu sắc tới những người thân trong gia đình đã giành cho em sự quan tâm đặc biệt và luôn động viên em mỗi khi em gặp khó khăn thử thách Vi thời gian có hạn, trình độ hiéu biết của bản thân còn nhiều hạn chế, nên đồ án không tránh khỏi những thiếu sót, em rất mong nhận được sự đóng góp ý kiến của tat cả các thay cô giáo đê đô án của em được hoàn thiện hon Em xin chân thành cảm ơn! Hà Nội, ngày tháng năm 2023 Sinh viên thực hiện Tuấn Nguyễn Ngọc Tiwan Nguyễn Ngọc Tuấn - BI9DCPT212 Vv KHÓA LUẬN TÓT NGHIỆP ĐẠI HỌC LOI CAM KET LOI CAM KET Em xin cam đoan rang ban đồ án tốt nghiệp “Nghiên cứu phương pháp emotional design và áp dụng vào cải thiện giao diện ứng dụng Sleepscore dành cho người dùng cuối ” là công trình nghiên cứu của bản thân Những nội dung có chứa tài liệu tham khảo trong đồ án đã được liệt kê và nêu rõ tại phần tài liệu tham khảo Đồng thờ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, đạo nhái Nêu sai em xin chịu hoàn toàn trách nhiệm Nguyễn Ngọc Tuấn - BI9DCPT212 vi KHÓA LUẬN TÓT NGHIỆP ĐẠI HỌC MỤC LỤC MỤC LỤC ĐỀ CƯƠNG DO AN TOT NGHIỆP ĐẠI HỌC 2 ++.2+.+.E+.+E.E+.E2.2E.22-Ez-Ez-xz2xe-e i LỜI CẢM 0) nnn Vv LỜI CAM 65s en vi 00/9092 vii DANH SÁCH CAC KY HIEU VA CHU VIET TẮTT 2.s.¿+.s>.++.z.zx.+z-xz-zz2z+-2 x DANH MỤC HINH ANH._ 0 cccscsscssssssessessuessessessusssessecsessusssessecsssssessessessessesusseseeescaes xi DANH MỤC CAC BANG BIEU, LƯU BO cccsccsssessesssessessesssessetsessssssessessnsseeseseeaes xiii MỞ DAU Loose ccc ccscsssessesssssessessesssessessvssussssssessusssessessussisssessussusssetsssusssessessssssessesseesesses 1 1 Lý do chọn đề tai.ceccccccccecccccscsssssessessessessessssessssvsssssessesaessessessssstssssseevsesevssseeeeees 1 2 Tinh hình nghiÊn CỨU - - - - 2 3213321111391 11911 19111110111 E81 11H ng và 2 2.1 Tình hình nghiên cứu trên thế giới 2.S.2.+.E2E.E2.E£E.£E.EEE.EE.zEE.Ee.Ere-rs-rkr-ed 2 2.2 Tình hình nghiên cứu tại Việt Nam -.- - 2.2.232.11.11.311.11.5.55.1E.Ex.xe.xs-se 3 3 Mục đích và nhiệm vụ nghién CỨU .- -.5 2.S.32.EE +3 E* 3.EE.SSE.ES EEE.EEr.krs.rk.err.err-ee 4 3.1 Mục đích của đề tài 2.+.2.S x2.x.EE1.221.2112.112.112.112.11 1.12.111.110.110.2 10-y-0 4 3.2 Nhiệm vụ nghiÊn CỨU - S131 33511 191115 11191119111 1k1 ng ng kh 4 4 Đối tượng và phạm vi nghiên cứu .2-.2 s+S.++E.++E+.+E£.EE2.EEE.EEE.EEEE-EEE.EEr-krr-erk-ree 4 4.1 Đối tượng nghiên cứu - ¿2-52 2+S2+E22ES2EEEEEEEEE1EE1511212112211212112r1e1.4 “Ai ¿8i 30 0n 4 5 Phương pháp nghiên CỨU - - c1 2.12121112111351 11111 191111 11101119111 1n kg key 5 6 Ý nghĩa lý luận và giá trị thực tiễn của đề tài .- s e r.e.r.rk.e.rr.re-y5 6.1 Ý nghĩa lý luận ¿2-2 sSEÉSÉEEE E2 1211211211211111 1111111111111 111121111 10 5 6.2 Giá trị thực tiễn của đề tải .¿5.2.52 x2.2.1921.221.221.21 212.122.111-21 -112-1 ¿1 -re.5 7 Cấu trúc của để tải 5 tt 9t 1921221211211211211211211211111110111102111121r21a1 5 CHƯƠNG 1: TONG QUAN VE PHƯƠNG PHAP EMOTIONAL DESIGN TRONG THIET KE UNG DUNG DI ĐỘNG .25.2.2.E.E2.E2.Ec.E.EE.Ez.Ee.rr-rr2re-s 7 1.1 Tông quan về ứng dụng di động 2 2.+.2+2.2E.++E.E+.EE2.EE.2EZ.Ee.EEz.Er.rxe-rr-zrr-es 7 1.1.1 Khái niệm và đặc trưng của ứng dụng di động -. .-.5 s e x- 7 1.1.2 Đặc điểm hành vi và nhu cầu người dùng của ứng dụng đi động 8 Nguyễn Ngọc Tuấn - BI9DCPT212 vii KHÓA LUẬN TÓT NGHIỆP ĐẠI HỌC MỤC LỤC 1.1.3 Các phương pháp thiết kế ứng dung di động 2.2.2 s+.cz-+-x+-sc-z2x+-z 10 1.1.3.1 Thiết kế lay người dùng làm trung tâm UCD (User-centered design) I0 1.1.3.2 Phương pháp Design Thinking .- 32.c.3.+ E.Es.ee.se.re.rr.se.ee.rr-es 11 1.2 Téng quan về Emotional Desig .c.ccsccsscsssssessessessessessessessescsesecsesscsvsesssevseeseees 14 1.2.1 Các thuật ngữ va khái niệm liên quan -. .5 2.3.5+.*+.+‡.+s.vx.se.er.ss.er.es 14 1.2.1.1 Nguồn gốc va Khái niệm về Emotional Design .2.-2 2 2 55-+¿ 14 1.2.1.2 Các khái niệm liên quan c3 132111321131x3xe+ 15 1.2.2 Các mô hình lý thuyết trong Emotional Design 2.-.5 2 c.s-+c-es-+ 19 1.2.2.1 Mô hình 3 cấp độ Thiết kế cảm xúc của Don Norman ¿ 19 1.3 Tiêu kết chương Ì .-.2 S1.22 2E.EE.E121.E11.211.1111.211.121.111.11.1.11 xe 42 CHƯƠNG 2: UNG DỤNG PHƯƠNG PHÁP EMOTIONAL DESIGN TRONG THIET KE GIAO DIEN UNG DUNG SLEEPSCORE 0 c:ccsccsccscesesseseseeees 43 2.1 Giới thiệu ứng dung quản lý giấc ngủ SleepScore cccscsscesessesssesseesesteseeeeees 43 2.1.1 Tổng quan về ứng dụng .2 2 2 2+E.++E.+E£E.E+E.E+E.EEE.EEE.EEE.EEE-EEE-Erk-erk-rkr-ree 43 2.1.2 Mục tiêu của Ứng Ụng - + - 1+ 3122111111112 11 5 1111111911 1k ng key 43 2.2 Ba bước tiến hành áp dụng mô hình A.C.T trong thiết kế cải thiện ứng dụng SleepScore 43 2.2.1 Bước 1: Tìm hiểu người dùng 2 2.S.t+.Ee.EE2.E#.EE.EEE.EE.EE.EEE.EE.er.rrr-rk-rr-es 43 2.2.1.1 Phỏng vấn (InferVi€W) - - 5c c s ềEEEEE21121121112111111111111x1e.44 2.2.1.2 60-060 221 dd d(:(:Œ :111BB 45 2.2.1.3 Chân dung người dùng (PerSOI48) c.2 2.S 3+.2 + S.se.ke.sr.re.sr.rr.es 50 2.2.2 Bước 2: Xác định mục tiêu thiét kế - .¿ 5vcc.ccxv.ttxv.rrx vrrr.trrr.verr.ree 5] 2.2.2.1 Nghiên cứu thị truOng eee eee eeececeeeneeeeeeeeeeeneeeececeneeeeesueeeessueeeesenneees 51 2.2.2.2 Nghiên cứu đối thủ cạnh tranh 2-.2 +.2.+x.+z.++E.++.x+.zxz.xz.xe.zxz.xe-zx-ee 53 2.2.2.3 Nghiên cứu giao diện ứng dụng SleepScore hiện tại . ‹ 55 2.3 Áp dụng các nguyên lý của phương pháp Emotional Design vào đề xuất giải pháp cải thiện giao diện ứng dụng giấc ngủ SleepScorce 2 2.5s.+-sc-cs-zx-se-z 57 2.3.1 Áp dụng mô hình A.C.T vào thiết kế lại giao diện ứng dụng cải thiện giấc 3081240111177 7 7 dliạạÀQầỒầỒSẦẦ 57 2.3.2 Kiến trúc thông tin và luồng người dùng của đối tượng 57 Nguyễn Ngọc Tuấn - BI9DCPT212 viii KHÓA LUẬN TÓT NGHIỆP ĐẠI HỌC MỤC LỤC 2.4 Tiêu kết chương 2 ¿- + +: +222EE9EE92E12E1221221121121127112112112111121121.12c1xe1 58 CHƯƠNG 3 THIẾT KẾ GIAO DIỆN ỨNG DỤNG CẢI THIỆN GIÁC NGỦ SLEEPSCORE 2-1-2522 221E21211211271111211211221111021121111111211g 59 3.1 Hệ thống quy chuân thiết kẾ + 2 2.E+.S£+.E2E.2EE.EEE.EEE.EE.EEE.EEE.EEE.EEE.Erk.rke-rrr-ed 59 3.1.1 Mau S8C cccccccscsssessessessssssessessssssessessussssssessessusssessessusssessessessssussesissnseeseeees 59 3.1.2 Font chữ - - - Q1 2222111122231 11111993111 11g TT 60 3.1.3 Nút bắm -¿- 2-5: 21 21221211212171712112112112112112112111111012111k11.1 61 BLA ICOM đa 1 63 3.2 Thiết kế trực QUathe.c.ecececeecscsscsscsscscssessssessesesscsucsesecsvsstsuseesessvsetsucsesassseseseeecsenees 63 3.3 Tiểu kết chương 3 ¿5.c S.E 1E 1 E112 1811 1111.2111.111 2111 1111 1 11.111 1111-101-r-e 68 KẾT LUAN ooo ccccccccccccccccsessessessssssssssssssssssvcsvcsecsessessessssassussusssssesscsesucscsesesseseceesesecaes 69 TÀI LIEU THAM KHAO occcccccccccsccsscsccssessessessessessessesssssssnssssssssessessesesessessceees 70 Nguyễn Ngọc Tuấn - BI9DCPT212 ix