Nghiên cứu phương pháp atomic design và áp dụng vào thiết kế giao diện ứng dụng happy child theo dõi sức khỏe tâm thần trẻ em dành cho cha mẹ

Trong quá trình phát triển sản phâm phần mềm, việc thiết kế giao diện người dùngUser Interface - UI đóng một vai trò vô cùng quan trọng, tác động trực tiếp đến trảinghiệm sử dụng của ngư

Trang 1

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

KHOA ĐA PHƯƠNG TIEN

Đề tài: “NGHIÊN CỨU PHƯƠNG PHÁP ATOMIC DESIGN VÀ ÁP DỤNG

VÀO THIẾT KE GIAO DIỆN UNG DUNG HAPPY CHILD THEO DOI SỨC

KHOE TAM THAN TRE EM DANH CHO CHA ME”

Giang viên hướng dẫn: THS NGUYEN THỊ TUYET MAISinh viên thực hiện: TRƯƠNG NGỌC THUÝ

DI9TKDPT02

2019 — 2024

ĐẠI HỌC CHÍNH QUY

HÀ NỘI - 2023

Trang 2

LỜI CẢM ƠN

Lời đầu tiên, em xin gửi lời cảm ơn sâu sắc nhất đến các thầy, cô giáo Khoa Da

phương tiện, Học viện Công nghệ Bưu chính Viễn thông, những người đã tận tình

giảng dạy, truyền đạt cho em những kiến thức suốt 4 năm học vừa qua đề phát triểncác sản phẩm trong lĩnh vực đa phương tiện Từ những kiến thức và kĩ năng nền tảngđược thầy cô chỉ dẫn, em đã có thể phát triển, nghiên cứu và hoàn thiện đề tài này

Đặc biệt, em xin được gửi lời cảm ơn sâu sắc đến Th.S Nguyễn Thị Tuyết Mai đãtận tình hướng dẫn em trong suốt quá trình thực hiện đề tài Cô đã là người giúp em cóthêm những góc nhìn mới và hướng đi đúng đắn khi thực hiện đề tài của mình Nhữnggóp ý, chỉ dan của cô là hoàn toàn quý báu và đã giúp em hoàn thiện đề tài một cáchchin chu nhất

Em xin chân thành cảm on.

Hà nội, ngày 20 tháng 02 năm 2023

Sinh viên

Trương Ngọc Thúy

Trang 3

Đồ án tốt nghiệp Đại học LỜI CAM KÉT

LOI CAM KET

Tôi xin cam đoan rằng đồ án tốt nghiệp “NGHIÊN CỨU PHƯƠNG PHAPATOMIC DESIGN VÀ ÁP DỤNG VÀO THIẾT KE GIAO DIEN UNG DỤNGHAPPY CHILD THEO DOI SỨC KHỎE TAM THAN TRE EM DÀNH CHO CHAME” là công trình nghiên cứu của ban than mình Những phan có sử dung tài liệu thamkhảo có trong đồ án đã được liệt kê và nêu rõ ra 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 trungthực, không sao chép, đạo nhái Nếu như sai tôi xin chịu hoan toàn trách nhiệm và chịutất cả các kỷ luật của bộ môn cũng như nhà trường đề ra

Trang 4

Đồ án tốt nghiệp Đại học MỤC LỤC

MỤC LỤC

LOT CAM ƠN s«- 25-2 HH HH ET.140 7713107118 17140721124 ILOT CAM KET cseesssssesccssscscsssesccssssecsssessssnesesssscessssecessnecessnsssessnecsssnsssesnessessessseeesees IDANH MỤC CAC KÝ HIỆU VA CHU VIET TẮTT 5- 2 s2 s<sess=s2 IlDANH MỤC CAC BANG\ cssssssssssscsssesssssseccsssececsnscecssnecsesnssessnscesssnessesnecessnnesseese VIIDANH MỤC CÁC HÌNH VẾ - -° 5< 5< s2 EsEseEseEsEEseEstrsrssreersrsersrsersrse IXPHAN MỞ ĐẦU 5- 5£ s<©.E.4072347714 7713079407731 rkeorseorke VI

CHƯƠNG 1 CƠ SỞ LÝ THUYET CUA DE TẢÀI s -s<-ss°ssss 1

1.1 Tổng quan về thiết kế giao diện ứng dụng di động - << 1

1.1.1 Các khái niệm liên quan - - c2 3221332111333 1 5111111111111 rree 1

1.1.1.1 Thiết kế tương tác đa phương tiỆn -2- 2: 5+ 25222x+2x£Ezzerxrrxesree 11.1.1.2 Thiết kế giao diện người ding (User interface đesign) - 11.1.1.3 Thiết kế trải nghiệm người dùng (User Experience design) 21.1.2 Vai trò của thiết kế giao điện người đùng ¿5-2 secxeEeEeExzEzrrrrrex 21.1.3 Quy trình thiết kế giao diện ứng dụng đi động - 2 2+s>+zsz+xze: 3

1.2 Tống quan về phương pháp Atomic Design -2 s- 5 ssses2sseses2 4

1.2.1 Khái niệm Atomic DeSIgn - -. c1 + 3211121111911 19 1191111111111 11811 re 4

1.2.2 Các thành phan của giao diện theo phương pháp Atomic design 5

Trang 5

CHUONG 2 NGHIÊN CỨU VE UNG DUNG HAPPY CHILD THEO DOI SỨCKHỎE TAM THAN TRE EM DÀNH CHO CHA MẸP . -5 5<s 15

2.1 Tổng quan về ứng dụng Happy Child theo dõi sức khỏe tâm thần trẻ em

dành cho Cha ImỌ o - 5 5 << 5< 5 9 9 HT TH T0 0000100010006 15

2.1.1 Giới thiệu chung về ứng dụng Happy Child 2- 2c s+2s+£z+E+££sz£ec+2 15

2.1.2 Mục tiêu của Ung dỤng - - - - th ngư 16

2.2 Nghiên cứu thị trường và đối thủ cạnh tranh -. 2s << ses<=ses 17

2.2.1 Tổng quan thị trường ứng dụng theo đối sức khỏe tâm than trẻ em tại Việt

Nam và thé giới - - 2-5-5 E9E12EEE19E1215112111211111111111111111111111 1111111 1xg 17

2.2.1.1 Thực trạng sức khỏe tâm thần trẻ em tại Việt Nam :-:-s se: 172.2.1.2 Thách thức trong việc cung cấp các dịch vụ sức khỏe tâm than 182.2.1.3 Cơ hội và tiềm năng của ứng dụng theo dõi sức khỏe tâm thần trẻ em .192.2.2 Đánh giá các ứng dụng của đối thủ cạnh tranh trên thị trường - 19

2.2.2.1 Ung dụng Calm Kids: Mindfulness & Yoga - 5-52 cccs2cccxe: 192.2.2.2 Ứng dụng DR.PSY - 25+ SE E1121111111111121111111111 21 te 222.2.2.3 Ứng dụng Calm + 1 SE E2 12E1211211211211111111 11111111 cte 25

2.3 Phân tích và đề xuất giải pháp thiết kế ứng dụng Happy Child theo dõi sứckhỏe tâm thần trẻ em dành cho cha mẹ 2 5° 5-5 2 2 s£s£s£ 2s £s£s£ses se 27

2.3.1 Khảo sát và phân tích nhu cầu và yêu cầu của người dùng đối với ứng dụng

về theo đõi sức khỏe tâm thần trẻ eim - 2-2 2 5ESE+EE£EE2EE2EE2EvEEZEEEEErErrxrrrree 27

1V

Trương Ngoc Thúy — BI9DCPT233

Trang 6

Đồ án tốt nghiệp Đại học MỤC LỤC

CHƯƠNG 3 ÁP DỤNG PHƯƠNG PHÁP ATOMIC DESIGN VÀO VIỆC

THIET KE GIAO DIEN UNG DUNG THEO DOI SỨC KHOE TAM THAN

TRE EM HAPPY CHILD DÀNH CHO CHA MẸ 5< 52s =ses<2 47

3.1 Phac thảo thiết kế giao diện ứng dụng Happy Child - -5-5 - 47

3.2 Thiết kế các thành phan giao điện ứng dụng Happy Child theo phương pháp

[U81 P18 - ẢẢ 49

3.2.1 Xác định thành phần Atoims - ¿22 + 25222£2EEEEE2EE2212E2E221232x 2.22 493.2.2 Xác định thành phần Molecules ¿2 ¿s52 eSE£EEEE+E+E£E£EEErErErxerrree 573.2.3 Xác định thành phần Organisims 2-2-5252 x2E2E£2EEtEE2EEeExerxezrres 60

3.3 Thiết kế các thành phan giao diện ứng dung theo dõi sức khỏe tâm thần trẻ

em Happy Child theo phương pháp Atomic Design s5 <5 ss<e< se 63

3.3.1 Tổ chức Hệ thống thiết kế (Design system) các thành phần giao diện ứng

800i158s [000171117 63

3.3.2 Thiết kế giao diện ứng dụng Happy Child 2- 2-52 2+S£+EzEczEezxerszed ó6

3.3.2.1 Thiết kế Templaf€s -¿- 2-52 St SE EEE1EE1211211211211211 2121 te 663.3.2.2 Thiết kế Pages 5c St TE11211211211211211211212121 1111k 68TIỂU KẾT CHƯNG Ô s£-<°eE+4eEEEAEEEAEEEEAAEotrreorkeorserkerrorke 794080000020177 80DANH MỤC TÀI LIEU THAM KHẢO - 2-2-5 ©ss©ss5sess=sssseseesesse 82

Vv

Truong Ngoc Thúy — BI9DCPT233

Trang 7

Đồ án tốt nghiệp Đại học DANH MỤC CÁC KY HIEU VA CHỮ VIET TAT

DANH MỤC CÁC KÝ HIEU VA CHU VIET TAT

UI User Interface Giao diện người dùng

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

Attention Deficit

ADHD Hyperactivity Rối loạn Tăng động - Giảm chú ý

Disorder

User Centered ¬ kak

UCD sr _— Thiệt kê lây người dùng làm trung tâm

Trang 8

Đồ án tốt nghiệp Đại học DANH MỤC CÁC BANG

DANH MỤC CAC BANG

Bang 2.1 Danh sách chức năng của ứng dụng Happy Child

7

Trương Ngọc Thúy — B19DCPT233

Trang 9

Đồ án tốt nghiệp Đại học DANH MỤC CÁC HÌNH VẼ

Hình 1.7 Giao diện người dùng ứng dung Tiki được xây dung từ Tini Design System

-Nun: Tiki 2-52: ©52Sz9SE2E12219211211271711271 7112111121111 1121111211111 1 1111k 10 Hình 1.8 Sử dụng bộ quy chuẩn thiết kế làm giảm khối lượng công việc của UI và code, từ đó tái đầu tư UX và CX - Nguồn: Emergn [ I§] - 2 s+©+++E++EE+2E+2EEEEE2EEEEEEEEEExerkrrkrree 13

Hình 2.1 Logo của ứng dụng Happy Child - Bởi Tác giả 5 5c 3c +svsseeesses 15

Hình 2.2 Tỷ lệ mắc các van đề sức khỏe tâm than trong 12 tháng ở trẻ 1017 tuổi theo loại

-Nguồn: Báo cáo Kết quả chủ yếu “ Điều tra Sức khỏe Tâm than Vị thành niên Việt Nam

(V-NAMHS)” tháng 11 năm 2022” [2 1] 2-2¿22+¿22EE+2EEEE2EE22EE1223127121221227112212 11.2 xe 18 Hình 2.3 Giao diện ứng dung Calm Kids: Mindfulness & Yoga ececeeceeeeceeeeeeeeereeteeetees 21 Hình 2.4 Giao diện ứng dụng DIR.PSY - Ác TT TH TH HH ngàn Tnhh Hết 24 Hinh 2.5 Giao dién ting dung Cali cece 26

Hình 2.6 Kết quả khảo Sat.ce.ccccceccscccssssssessesssessessvessessecssessesssessessecsuessessscssessessssssessesssessesseeseese 28 Hình 2.7 Kết quả khảo sát - 2 2 12t ‡EE2E1921711221271121121171121121171121111211 1111 28 Hình 2.8 Kết quả khảo sát 22-52 S221 E2112717112112711211211111211 1111.1111.111 1E re 28 Hình 2.9 Kết quả khảo sắt - 2: 2:22 2EE92EE92212211211122122112211221122112211111 21.11 re 29 Hình 2.10 Kết quả khảo sát - ¿52 5Sc S221 E2E12E18211211271121121111121111 111.11 11.111 1E te 29 Hình 2.11 Kết quả khảo sát 2: 25% 22S2EE2E122212211211221122112211211211111 11.21 T1 re 30 Hình 2.12 Kết quả khảo sát ¿52 SSc S22 E2E191122112112111111211111211211 111.1111111 1E 30 Hình 2.13 Kết quả khảo sát 2-52-5521 SEE2E19E122112E1271121121171121111711211 111.1 1x te 31 Hình 2.14 Kết quả khảo sát - ¿52-52 +SSE99ES SE EEEEEEEEE1511211211211211211211211211211 211111 tye 31 Hình 2.15 Kết quả khảo sát - ¿2-5252 E2E19E1821121127112112111112111111111 11.111 1x te 32 Hình 2.16 Kết quả khảo sát - 2-52 2S SE EEEEEE1E11811211211211211211211211211211 2111111 ae 32 Hình 2.17 Kết quả khảo sát 2 2-5Sc S221 E2E19E18211211711211211111211211 11.1111.1111 Ea te 33 Hình 2.18 Kết quả khảo sát ¿2-52 ©522S1‡EE2E19212211221271121127171121121171121111.1 111cc 34 Hình 2.19 Kết quả khảo sát - 2-52 Ss S21 E2E19711112112111111211111111211 111111111 1c tre 34 Hình 2.20 Tổng hợp kết quả phỏng vấn 2-2 2 22S£2EE£EE£EEE2EEEEE2EE2EEE2E22E1212222xcrxe 38 Hình 2.21 Tổng hợp kết quả phỏng vắn -¿- 2 2 %9E£2EE£EE£EEEEEEEEEE2EE2EX2112E171111 11 2xeC 39 Hình 2.22 Persona đối tượng người đùng cha mẹ 2-2 2 S+2E£2E£+EE+2E+2EEtEErEeerxerxee 4I Hình 2.23 Cấu trúc thông tin ứng dụng Happy Child 52s s+2Ee£E£EE£EEeEEeErxrrerxee 44 Hình 2.24.Luồng người dùng chính của ứng dụng Happy Child -2-©52 552552245

Hình 3.1 Wireframe ứng dụng HappyC1Ïd - -.- 22523 E 3E **E+EE+EEEEseEsrkrrrrrrrerrrek 48 8

Trang 10

Đồ án tốt nghiệp Đại học DANH MỤC CÁC HÌNH VẼ

Hình 3.2 Wireframe ứng dụng Happy h1Ïd - - 2232213213213 errres49 Hình 3.3 Phong chữ SF Pro Display của ứng dung Happy ChiÏd 5 5-5 55<++<<>+s+ 50

Hình 3.4 Hệ thống Mau sắc của ứng dung Happy Child - 2-5252 x2E+Ee£EeEzEzrred 51 Hình 3.5 Hệ thống Icon của ứng dụng Happy Child c.ccccccsccescessesssessessessessersesssessetsesseneens 52 Hình 3.6 Hệ thống Hình minh họa của ứng dụng Happy Child - 2-52 2 s£s+2£+z£se2 53 Hình 3.7 Hệ thống Hình ảnh của ứng dụng Happy Child - 2-5252 x+£s+z£z+£x+z++s+2 33 Hình 3.8 Hệ thống thành phần Điều khién của ứng dụng Happy Child - 2-5 5¿ 54 Hình 3.9 Thanh phan Tag va Tab atom của ứng dụng Happy Child -2- 5552552 54 Hình 3.10 Hệ thống Nút của ứng dụng Happy Child - 2: 2 S2E222£+£E+£E£zExerxzzzsrxez 55 Hình 3.11 Hệ thống Ô nhập liệu của ứng dụng Happy Child -¿- 22 5¿22+>xzs>s2 56 Hình 3.12 Hệ thống Ô nhập liệu với Nhãn của ứng dụng Happy Child 5-5- 57 Hình 3.13 Hệ thống Thẻ của ứng dụng Happy Child 2: 22 5£ x2E2E2£2£+zzxzzxrzxd 58 Hình 3.14 Hệ thống Điều hướng của ứng dụng Happy Child - 55s 225+zvzxzzzzsz 59 Hình 3.15 Thanh tìm kiếm của ứng dụng Happy Child -2- 22 2 52+ £££x££E+zEz£xezxzsez 59

Hình 3.16 Thanh Tab của ứng dụng Happy ChiÏd - s5 2222 * +2 + *+EssErrereerrrersrerrre 60

Hình 3.17 Hệ thống Ô nhập trò chuyện của ứng dụng Happy Child - 2-5 s55 52 60

Hình 3.18 Danh sách thông báo của ứng dụng Happy ChiÏd - ¿555555 £+x+ssxssxe 61 Hình 3.19 Danh sách Blog của ứng dụng Happy Child ccc cceeceeseeseeseeeseeteeseeseeneeeneeens 61 Hình 3.20 Danh sách Podcast của ứng dụng Happy ChiÏd - 5-5 5 + + +sv£seessxes 62

Hình 3.21 Danh sách Bac sĩ của ứng dụng Happy C1Ìd - 5 55+ *+<*+*vsveeseeeeeses 62

Hình 3.22 Mẫu của ứng dụng Happy Child ¿2 2+S5£+SSE£E£+E£EE2EEEEEEEEeEEEEzErrrrrrzee 63

Hình 3.23 Hộp thoại của ứng dụng Happy Ci1Ïd 5c 5 225 3213 Essseereeerreeeexrs 63 Hình 3.24 Logo của ứng dụng Happy ChiÏd - - - c2: 2c 3211211351351 351 121111111 rrre 64 Hình 3.25 Design system ứng dụng Happy CiÏd - - 5 55 S22 **+E+eEsseersererrrsrree 65 Hình 3.26 Design system ứng dụng Happy ChiÏd ¿5c 3c S23 *2* 2 E+Eeseesrrereressre 66

Hình 3.27 Hệ thống Templates của ứng dung Happy Child 2-2: 52 z2szz+£x+z+zs+2 67 Hình 3.28 Hệ thống màn hình loading và giới thiệu - 2-52 2 S2E2EE££E2EEEEEzExrrxrree 68 Hình 3.29 Hệ thống màn hình đăng ký, đăng nhập - ¿22 2 2+E£E+EE+EzEzErrxerxzex 69 Hình 3.30 Hệ thống màn hình tao tài khoản - 2c SE 2221111122311 11 1322311111 1kg, 70 Hình 3.31 Hệ thống màn hình trang chủ và thông báo 2-2 2 2+2 z+E+zEezxzxzzzezed 71 Hình 3.32 Hệ thống màn hình kiểm tra tâm lý trẻ em - 2 2 s22 £++E+E££+zEe£xzEerxzxerez 72 Hình 3.33 Hệ thống màn hình khám phá bài viết, podcast và tìm kiếm -.:-.: 74 Hình 3.34 Hệ thống màn hình đặt lich tư vấn với bác sĩ -2- ¿+ +x+£++zzEzxrrxerxzes 75 Hình 3.35 Hệ thống màn hình trò chuyện và đánh giá bác Si cccceccessesssesssesssessessteseeseeseees 76 Hình 3.36 Hệ thống màn hình cá nhân - 2: 2£ 2 E+SE£+EE£EEtEEEEEEEEEEEEEEEEEEEEEErkrrkerrrei 78

9

Truong N goc Thúy — BI9DCPT233

Trang 11

Đồ án tốt nghiệp Đại học PHAN MỞ DAU

PHAN MO DAU

1 Ly do chọn dé tài

Theo Tổ chức Y tế Thế giới (WHO), sức khỏe tâm thần được định nghĩa là một

trạng thái của sự khỏe mạnh và hạnh phúc, trong đó một cá nhân nhận thức rõ được

khả năng của mình, có thể đối phó với những căng thắng bình thường trong cuộc sống,làm việc hiệu quả và đóng góp cho cộng đồng Sức khỏe tâm thần đóng vai trò quantrọng vào sự phát triển toàn diện của trẻ em Tuy nhiên, trong bối cảnh xã hội hiện đại,rất nhiều trẻ em phải đối mặt với các rối loạn về tâm thần như lo âu, buồn rau, tự kỷhay ADHD Những vấn đề này không chỉ ảnh hưởng đến chất lượng cuộc sống của trẻ

em, ma còn tạo ra nhiều thách thức và áp lực đối với cha mẹ trong việc nuôi dưỡng và

chăm sóc con cải.

Một nghiên cứu được thực hiện bởi Viện Nghiên cứu và Phát triển cùng vớiUNICEF Việt Nam vào năm 2018 về "Sức khỏe tâm than và tâm lý xã hội của trẻ em

và thanh thiếu niên tại một số tỉnh và thành phố ở Việt Nam" đã chỉ ra một tình trạngđáng báo động về sức khỏe tâm thần của trẻ em và thanh niên ở Việt Nam Theo đó, từ8% đến 29% trẻ em và thanh niên hiện mắc các vấn đề sức khỏe tâm thần

Trong một khảo sát dịch té học gần đây trên mẫu đại diện quốc gia của 10 trong số

63 tinh/thanh ở Việt Nam cho thay mức trung bình các van đề sức khỏe tâm thần trẻ

em rơi vào khoảng 12%, đồng nghĩa với việc hơn 3 triệu trẻ em có nhu cầu về các dịch

vụ sức khỏe tâm thần

Nguyên nhân chính gây ra tình trạng này là do sự thiếu hiểu biết và định kiến vềsức khỏe tâm thần, đồng thời thiếu hụt việc theo dõi, đánh giá và can thiệp kịp thời từphía cha mẹ và các chuyên gia Trong Báo cáo Kết quả chủ yếu "Điều tra Sức khỏeTâm than Vị thành niên Việt Nam (V-NAMHS)" thực hiện tháng 11 năm 2022, nhằmkhảo sát sức khỏe tâm thần của vị thành niên, đã tiếp cận một phát hiện đáng chú ý.Theo báo cáo, chỉ có 5,1% cha mẹ vi thành niên nhận thức rằng con em của họ đangcần sự hỗ trợ đối với các vấn đề cảm xúc và hành vi, mặc dù trong cùng thời kỳ, có21,7% vị thành niên đã phải đối mặt với các vấn đề sức khỏe tâm thần Kết quả nàycho thấy một sự khác biệt đáng ké giữa nhận thức của cha me và thực tế sức khỏe tâmthần của con cái Do thiếu hiểu biết và thông tin chưa day đủ về các van dé sức khỏetâm thần đã góp phan vào sự tồn tại của khoảng cách này Cha mẹ có thé không nhận

ra hoặc không hiểu rang các biểu hiện cảm xúc và hành vi không bình thường của con

em có thé liên quan đến sức khỏe tâm than

Ngoài ra, viéc tiếp cận với các dịch vụ chăm sóc sức khỏe tâm thần cho trẻ em ởViệt Nam còn gặp nhiều khó khăn do thiếu hụt về nguồn lực nhân lực, cơ sở vật chất

và chi phí Các dịch vụ sức khỏe tâm than và tâm lý xã hội còn giới hạn và thường tậptrung vào những rối loạn tâm thần nặng

10

Trang 12

Trong bối cảnh đó, việc sử dụng công nghệ để hỗ trợ việc theo dõi và cải thiện sứckhỏe tâm thần cho trẻ em là một giải pháp tiềm năng Các ứng dụng liên quan đến sức

khỏe trên điện thoại di động (hay ứng dụng sức khỏe di động - mHealth) là một trong

những hình thức của giải pháp này Các ứng dụng này có thể giúp cha mẹ và trẻ emtiếp cận với các thông tin, kiến thức và kỹ năng liên quan đến sức khỏe tâm thần mộtcách dé dàng, nhanh chóng và tiết kiệm chi phí Ngoài ra, các ứng dụng này cũng cóthé giúp cha me giao tiếp và tương tác với các bác sĩ một cách hiệu quả, an toàn

Tuy nhiên, hiện nay số lượng các ứng dụng theo dõi sức khỏe tâm thần trẻ em dànhcho cha mẹ ở Việt Nam còn rất ít Phần lớn các ứng dụng được thiết kế dé người dùng

tự đánh giá vấn đề hiện tại của bản thân như DR.PSY Một số ứng dụng có sẵn trêncác kho ứng dụng như Calm Kids, Calm, Breeze, Headspace chủ yêu được thiết kếbằng tiếng Anh không phù hợp với ngôn ngữ và văn hóa của người Việt Nam Với tiền

đề tích cực này, việc phát triển ứng dụng theo dõi sức khỏe tâm thần trẻ em dành chocha mẹ Happy Child có thể đáp ứng nhu cầu của cha mẹ về việc quản lý và cải thiệnchất lượng sức khỏe tâm thần của con em mình

Trong quá trình phát triển sản phâm phần mềm, việc thiết kế giao diện người dùng(User Interface - UI) đóng một vai trò vô cùng quan trọng, tác động trực tiếp đến trảinghiệm sử dụng của người dùng sản phẩm Một thiết kế giao diện người dùng tốt giúpngười dùng tương tác va sử dụng dé dàng, đồng thời hỗ trợ định hình lại hành trình trảinghiệm khách hàng, tăng đồng nhất và hướng tới mục đích sử dụng của sản phâm Khitìm cách dé cân bang giữa ưu tiên nhu cầu của đối tượng mục tiêu và làm cho quá trìnhthiết kế hiệu quả, nhiều nhà thiết kế đã tìm đến Phương pháp Atomic Design đượccông bồ bởi Brad Frost năm 2013 Dựa trên nguyên tắc chia giao diện các trang thànhcác đối tượng nhỏ, độc lập, tái sử dụng các thành phần dé kết hợp chúng lại tạo thànhmột tong thé Điều nay cho phép hoàn thành sản phẩm nhanh chóng, giao diện nhất

quán và dễ dàng bảo trì Do vậy tôi lựa chọn nghiên cứu Phương pháp Atomic Design

từ đó áp dụng vào thiết kế giao diện ứng dụng Happy Child theo dõi sức khỏe tâm thần

trẻ em dành cho cha mẹ.

2 Tinh hình nghiên cứu

2.1 Tinh hình nghiên cứu trong nước

Phương pháp Atomic Design được lồng ghép giảng dạy trong các môn học Thiết

kế tương tác Đa phương tiện, Thiết kế giao diện người dùng và Thiết kế ứng dụng trênđầu cuối di động, thuộc chuyên ngành Thiết kế Da phương tiện của Học viện Công

nghệ Bưu chính Viễn thông.

Mặc dù ở Việt Nam chưa có nhiều tài liệu nghiên cứu hay sách xuất bản về thiết kếdựa trên phương pháp Atomic Design, nhưng với sự phát triển của công nghệ, nghiêncứu và tìm hiểu về phương pháp này cũng đang trở thành một nhu cầu cấp thiết Cụthể, nhiều cá nhân và tổ chức ở Việt Nam đã áp dụng phương pháp Atomic Designtrong thiết kế giao diện người dùng, như Tini App là một dự án tiêu biểu được phát

11

Trương Ngoc Thúy — B19DCPT233

Trang 13

triển bởi Tiki, là một nền tang mini apps hay mini programs, giúp các đối tác dé dàngtạo ra các ứng dụng trên Tiki Đội ngũ thiết kế Tini Apps của Tiki xây dựng hệ thốngthiết kế cho nền tảng Tini App dựa trên hệ thống thiết kế của Tiki Tini sẽ giúp các nhàthiết kế sản phâm thống nhất giao diện người dùng để tập trung vào trải nghiệm ngườidùng tốt hơn và đưa ra ý tưởng cũng như sản phẩm nhanh hơn

Một bài báo được đăng trên trang web Medium.com của tác gia Got It Vietnam

cũng đã nhân mạnh tầm quan trong của việc sử dụng phương pháp Atomic Design dé

xây dựng hệ thống thiết kế cho sản phẩm Trong bài báo này, tác giả đã đề cập đến một

số vấn đề thường gặp trong quá trình xây dựng sản phẩm, bao gồm sự phát triển nhanh chóng của sản phẩm, sự phức tạp của hệ thống và khó khăn trong việc duy trì tính nhất

quán của thiết kế Tác giả đã giải thích rằng áp dụng phương pháp Atomic Design cóthê giải quyết những vấn đề này

Mặc dù có nhiều tài liệu tiếng Việt liên quan đến phương pháp Atomic Design tạiViệt Nam, tuy nhiên để đảm bảo tính chính xác và tin cậy của đề tài, tôi chỉ tham khảocác tài liệu từ các trang nghiên cứu khoa học uy tín và các cuốn sách có nguồn gốc rõràng đáng tin cậy Trên đây là một số tài liệu tham khảo mà tôi đã tìm hiểu và thu thậpnhằm hỗ trợ cho việc xây dựng lý thuyết và làm cơ sở tham khảo cho đề tài

2.2 Tình hình nghiên cứu trên thế giới

Phương pháp Atomic Design là một chủ đề được nhiều chuyên gia trên thế giớiquan tâm và nghiên cứu Tuy nhiên, do giới hạn về khả năng của bản thân và phạm vicủa đề tài, tôi chỉ có thé tổng hợp được một số các tài liệu nghiên cứu khoa học liênquan đến đề tài sử dụng tiếng Anh, tiếng Bồ Đào Nha và tiếng Indonesia Các tài liệunay là nền tảng quan trọng và cốt yêu dé tôi thực hiện phân tích và tong hợp dit liệuphục vụ cho đề tài này

Nói về phương pháp Atomic Design - phương pháp thiết kế nguyên tử, đầu tiênphải đề cập đến cuốn sách “Atomic Design” của tác gia Brad Frost - người đã đi tiênphong trong cuộc cách mạng thiết kế nguyên tử Cuốn sách là sự kết hợp của triết lý,thực hành và kinh nghiệm của Brad Frost, một nhà thiết kế web nồi tiếng và có ảnhhưởng, đã áp dụng phương pháp thiết kế nguyên tử cho nhiều dự án lớn và thành công.Trong cuốn sách, ông lý giải sự ra đời, tính hữu ích khi thiết kế giao diện người dùngtheo phương pháp Atomic Design và cung cấp hướng dẫn xây dựng các hệ thống thiết

kế giao diện nhất quán và mạch lạc Ông cũng đề cập đến các vấn đề liên quan đếnviệc duy trì và phát triển các hệ thống thiết kế nguyên tử, và cách áp dụng chúng chocác dự án thiết kế web đáp ứng (Responsive Website), đa thiết bị và đa ngôn ngữ

Khác với tình hình nghiên cứu tại Việt Nam, các tài liệu về phương pháp AtomicDesign đã xuất hiện từ năm 2013 khi phương pháp này được tạo ra và công bố chínhthức bởi Brad Frost Ở đây có thể kê đến nghiên cứu “PENGEMBANGAN DESIGN

SYSTEM PADA PERANGKAT LUNAK IBID DENGAN PENDEKATAN

ATOMIC DESIGN (Phát triển Hệ thống Thiết kế cho Phần mềm Ibid với Phương

12

Trang 14

pháp Atomic Design)”, được đăng trên tap chí khoa hoc: Jurnal Penelitian Mahasiswa

Teknik Dan IImu Komputer vào tháng 5/2021 Mục tiêu của nghiên cứu là tìm hiểuxem việc áp dụng Design System có thể tăng năng suất trong quá trình thiết kế giao

diện người dùng và giảm thời gian sử dụng không Sau quá trình thực nghiệm, các nhà

nghiên cứu đã khang định răng việc sử dung tài liệu hướng dẫn về các thành phan giaodiện đã được tiêu chuân hóa giúp thiết kế giao diện trở nên nhanh chóng hon đáng ké

và đồng nhất hơn Kết quả này cho thấy việc áp dụng Design System theo phươngpháp Atomic Design mang lại lợi ich đáng kể trong việc nâng cao hiệu suất và hiệuquả của quá trình thiết kế giao diện người dùng

Trong lĩnh vực thiết kế phần mềm, phương pháp Atomic Design đã trở thành mộtphương pháp phổ biến để xây dựng giao diện người dùng một cách linh hoạt và déquản lý Một nghiên cứu quan trọng về chủ dé này là "Atomic Design of ElementLibraries for Modular Design (Thiết kế nguyên tử của Thư viện phần tử cho Thiết kế

mô-đun", đã được trình bày tại Hội nghị thường niên của Hiệp hội Truyền thông và

Công nghệ Giáo dục năm 2021 và được công bố trên ResearchGate.net Nghiên cứu

này tập trung vào việc giải quyết vấn đề phát triển nhanh chóng khóa học thông quathiết kế mô-đun Bằng cách tạo ra một thư viện các phần tử thiết kế tái sử dụng,

phương pháp Atomic Design mang lại khả năng mở rộng trong việc tạo ra các khóa

học trực tuyến nhanh chóng Qua việc tô chức các thành phan giao diện được sử dụng

trong các khóa học, gánh nặng đặt lên những người tạo ra khóa học đã được giảm bớt

và chất lượng của các khóa học đã được nâng cao Điều này cũng mang lại tính nhấtquán cho trải nghiệm giữa các khóa học và cải thiện chất lượng trải nghiệm cho sinh

viên.

Ngoài sách và bài báo, phương pháp Atomic Design cũng đã thu hút sự quan tâm

của nhiều nhà nghiên cứu Vào tháng 2/2023, hai tác giả Santiago và Felipe Issa đã

trình bày nghiên cứu: "ATOMIC DESIGN APLICADO NO DESENVOLVIMENTO

DE PRODUTOS (Áp dụng Atomic Design trong Phát triển Sản phẩm)” Nghiên cứunày nhấn mạnh răng thiết kế nguyên tử mang lại tính linh hoạt và độc lập cho cácthành phần của hệ thống, giúp dễ dàng thích nghi và phát triển độc lập thông qua khảnăng tạo ra nhiều biến thể khác nhau cho một thành phần Nhóm nghiên cứu cũng đặc

biệt nhắn mạnh về kha năng mở rộng và hiệu suất của hệ thống, đảm bảo sự phát triển

hiệu quả va đáng tin cậy Nghiên cứu nay chứng minh rằng phương pháp Atomic Design có thé được áp dụng vào việc phát triển sản phẩm một cách hiệu quả va mang lại lợi ích đáng kê.

Trên đây là các tài liệu mà tôi tong hợp được, chúng sẽ được sử dụng dé tham khảo

và phân tích, ứng dụng được cho đề tài này

3 Mục dich và nhiệm vụ nghiên cứu

- _ Mục đích nghiên cứu: Hiểu được khái niệm, thành phần, phương pháp thiết kế

Atomic Design từ đó áp dụng vào thiết kế giao điện ứng dụng Happy Child theodõi sức khỏe tâm thần trẻ em dành cho cha mẹ

13

Trang 15

- Nhiém vụ nghiên cứu:

+ Tìm hiểu về khái niệm, thành phần, phương pháp thiết kế Atomic Design trong

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

+ Phân tích yêu cầu và chức năng của ứng dụng theo dõi sức khỏe tâm than trẻ

em dành cho cha mẹ ở Việt Nam.

+ Áp dụng phương pháp Atomic Design dé thiết kế giao diện cho ứng dụng

Happy Child theo dõi sức khỏe tâm thần trẻ em dành cho cha mẹ

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

- _ Đối tượng nghiên cứu: Khái niệm, thành phần, phương pháp thiết kế AtomicDesign trong thiết kế giao điện người dùng

- Pham vi nghiên cứu: Trong một thiết kế giao diện ứng dụng Happy Child theodõi sức khỏe tâm thần trẻ em dành cho cha mẹ

- Pham vi thời gian: Từ ngày 1/10/2023 - 12/12/2023

5 Y nghĩa đề tài

Về lý luận, đề tài đem lại cái nhìn tổng quan phương pháp Atomic Design, trìnhbày các khái niệm, thành phần và ứng dụng phương pháp này trong thiết kế, từ đó việcthiết kế sẽ theo quy trình hợp lý và nhanh chóng Bồ sung kiến thức về phương phápAtomic Design ở Việt Nam trong bối cảnh chưa có nhiều tài liệu liên quan đến mô

hình này.

Về ý nghĩa thực tiễn, đề tài giống như một khung tham khảo chung về phươngpháp Atomic Design và ứng dụng của nó, cụ thé là áp dụng trong thiết kế giao diệnngười dùng ứng dụng Happy Child theo đối sức khỏe tâm thần trẻ em dành cho cha

mẹ.

6 Phương pháp thực hiện nghiên cứu

Bằng việc áp dụng phương pháp phân tích và tổng hợp nghiên cứu khoa học kếthợp với phương pháp nghiên cứu phi thực nghiệm, đề tài sẽ tiễn hành phân tích các cơ

sở lý thuyết về phương pháp Atomic Design và thực trạng sức khỏe tâm thần trẻ emcùng với nhận thức của cha mẹ về sức khỏe tâm thần trẻ em để xác định các yêu cầu

và thiết kế giao diện người dùng cho ứng dụng Happy Child theo dõi sức khỏe tâmthần trẻ em đành cho cha me

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

Nội dung của đề tài này được chia làm 3 chương, được trình bày như sau:

- - Chương 1: Cơ sở lý thuyết của đề tài

Chương | bao gồm kiến thức liên quan tới thiết kế giao diện ứng dụng di động, quytrình thiết kế giao diện ứng dụng di động, tông quan về phương pháp Atomic Design

14

Trang 16

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

- Chương 3: Áp dụng phương pháp Atomic Design vào việc thiết kế giaodiện ứng dụng Happy Child theo dõi sức khỏe tâm thần trẻ em dành cho cha me

Kết hợp phân tích về ứng dụng ở chương 2 và áp dụng kiến thức về phương phápAtomic Design ở chương 1, chương 3 sẽ đi sâu vào việc thiết kế giao diện cho ứng

dụng Happy Child.

15

Trang 17

Đồ án Thiết kế Sản phẩm Đa phương tiện CHUONG |

CHUONG 1.

CHUONG 2 CO SO LY THUYET CUA DE TAI

Chương | sẽ dé cập tới những kiến thức tong quan về thiết kế giao diện ứng dụng

di động và tổng quan về phương pháp Atomic design Nội dung trong chương này séđóng vai trò là cơ sở cho những lý thuyết ở chương 2 và quá trình ứng dụng ở chương

3.

1.1 Tổng quan về thiết kế giao diện ứng dụng di động

1.1.1 Các khái niệm liên quan

11.1.1 Thiết kế tương tác đa phương tiện

Là thiết kế tương tác có sự kết hợp của các phương tiện truyền thông trong một môitrường kỹ thuật nhằm cho phép người dùng có thể tương tác với dir liệu dé sử dụngvào mục đích nhất định [1]

Các phương tiện truyền thông bao gồm: văn bản điện tử, đồ họa, hình ảnh động và

âm thanh.

1.1.1.2 Thiết kế giao diện người dùng (User interface design)

Theo Interaction Design Foundation: “Thiết kế giao diện người dùng (UserInterface design - UI) là quá trình mà các nhà thiết kế sử dụng dé xây dựng giao diệntrong phần mềm hoặc thiết bị máy tính Việc thiết kế tập trung vào mặt hiển thị, mụcđích tạo ra những giao diện dễ sử dụng và dễ chịu với người dùng cuối Từ đó làm cho

trải nghiệm của người dùng trở nên dễ dàng và trực quan” [2].

Giao diện người dùng là điểm truy cập nơi người dùng tương tác với thiết kế Baogồm 3 dạng chính:

- _ Giao diện đồ họa người dùng (Graphical user interfaces): Người dùng tương tácvới máy tinh thông qua hệ thống hiền thị trên thiết bị điện tử Giao diện đồ họa ngườidùng xuất hiện trên màn hình làm việc của máy tính hoặc màn hình ứng dụng điện

16

Trang 18

Thiết kế giao diện người dùng được nhắc đến trong đề tài được giới hạn ở phạm viGiao điện đồ họa người dùng (Graphical user interfaces)

1.1.1.3 Thiết kế trải nghiệm người dùng (User Experience design)

Thiết kế trải nghiệm người dùng (User Experience - UX) là quá trình mà nhómthiết kế sử dụng để tạo ra các sản phẩm với mục tiêu mang đến những trải nghiệm ý

nghĩa và phù hợp với người dùng Thiết kế UX bao gồm việc xây dựng toàn bộ quy trình từ việc thu thập thông tin đến sử dụng sản phẩm, bao gồm các yếu tố liên quan

đến thương hiệu, thiết kế, tính sử dụng và chức năng [4]

Trải nghiệm người dùng (UX) là sự giao tiếp thông qua giao điện, sự tương tác

và trải nghiệm mà người dùng có được với một sản phẩm và dịch vụ [5] Mục tiêu củathiết kế UX là tạo ra những sản phẩm hấp dẫn, thân thiện và dé sử dụng, giúp ngườidùng có trải nghiệm tốt và thoải mái khi sử dụng Trong nghiên cứu “The Six StepsFor Justifying Better UX” Forrester Research chỉ ra rằng UX được thiết kế tốt có thêmang lại mức tăng đáng kinh ngạc 400% tỷ lệ chuyên đổi của trang web (SEO -

Search Engine Optimization) [6].

Ngoài ra, thiết kế trải nghiệm người dùng không chi tập trung vào tinh dé sử dungcủa sản phẩm mà còn phải mang lại giá trị cho người dùng, giúp họ giải quyết đượcnhững vấn đề của mình Theo Donald A Norman, cha đẻ của thuật ngữ "Trải nghiệmngười dùng", một thiết kế tốt là một thiết kế đáp ứng được các tiêu chí: hữu ich, dé sửdụng, có giá trị, dé nhận biết, dé truy cập và đáng tin cậy [3]

1.1.2 Vai trò của thiết kế giao diện người dùng

Thiết kế giao diện người dùng (UD đóng vai trò quan trọng trong thành công của việc phát triển sản pham kỹ thuật số vì nhiều lý do:

- Tang cường trải nghiệm người dùng (UX): Giao điện là phương tiện chính déngười dùng tương có thé dé dàng điều hướng sản phẩm và hoàn thành các tác vụ, dẫnđến trải nghiệm người dùng tích cực [7]

- _ Xây dựng thương hiệu: Thiết kế giao điện của sản phẩm kỹ thuật số là một giaiđoạn thiết yếu trong việc xây dựng thương hiệu của sản phẩm Nó truyền đạt cá tính,giá trị và các tính năng độc đáo của sản pham cho người dùng, giúp sản pham trở nênđáng nhớ và dé nhận biết [8]

- Thu hút người dùng: Một giao diện được thiết kế tốt giúp tăng cường sự thamgia của người dùng bang cách tạo ra trải nghiệm trực quan hap dẫn và tương tác Từ đódẫn đến việc sử dụng tăng lên và các lần truy cập lặp lại [9]

- Nang cao hiệu quả sử dụng: Sản phẩm hoặc dịch vụ có giao diện được thiết kếtốt sẽ tăng cường hiệu quả của người dùng bằng cách giảm thời gian và công sức cầnthiết dé hoàn thành các tác vụ Nhờ đó, tăng năng suất và sự hài long của người ding

[10].

17

Trang 19

Nhìn chung, Thiết kế giao diện người dùng (UD) là một yếu tố quan trọng trongviệc tạo ra trải nghiệm người dùng (UX) tốt Một thiết kế UI tốt sẽ giúp người dùng dễdàng sử dung sản phẩm hoặc dich vụ, đồng thời mang lại trải nghiệm thú vi và hap

dẫn.

1.1.3 Quy trình thiết kế giao diện ứng dụng di động

Thiết kế giao diện ứng dụng di động là một quá trình phức tạp, đòi hỏi sự cân nhắc

kỹ lưỡng về nhiều yếu tố, bao gồm nhu cầu của người dùng, khả năng kỹ thuật và cácyêu cầu kinh doanh Có nhiều mô hình thiết kế giao điện ứng dụng di động khác nhau,mỗi mô hình có những ưu điểm và nhược điểm riêng Trong phạm vi đề tài của mình,tác giả lựa chọn phân tích và sử dụng phương pháp “Thiết kế lay người dùng làm trung

tam (User centered design - UCD)”.

Tài liệu Giải pháp thiết kế trải nghiệm người dùng dựa trên mô hình UCDC choứng dụng y tế điện tử E-Doctor của Th.S Trần Quốc Trung có đề cập: “Thiết kế lấyngười dùng làm trung tâm là một quá trình thiết kế lặp đi lặp lại trong đó các nhà thiết

kế tập trung vào người dùng và nhu cầu của họ trong từng giai đoạn của quá trình thiết

kế Trong UCD, các nhóm thiết kế liên quan đến người dùng trong suốt quá trình thiết

kế thông qua nhiều kỹ thuật nghiên cứu và thiết kế, dé tạo ra các sản phâm có khảnăng sử dụng cao và dễ tiếp cận cho ho” Dé làm được điều này người thiết kế sử dụngcác kĩ thuật nghiên cứu và thiết kế khác nhau nhằm tạo ra các sản phẩm có khả năng

sử dụng và khả năng tiếp cận cao cho người dùng [11]

Thuật ngữ Thiết kế lấy người dùng làm trung tâm đã xuất hiện vào những năm

1970 Sau đó, chuyên gia về khoa học nhận thức và trải nghiệm người dùng DonNorman đã sử dụng thuật ngữ này trong công trình nghiên cứu rộng lớn của ông vềviệc cải thiện trải nghiệm của người dùng khi sử dung sản phẩm Khái niệm này trởnên phổ biến rộng rãi sau khi cuốn sách "User Centered System Design: NewPerspectives on Human-Computer Interaction" (Xuất bản năm 1986) và "The Design

of Everyday Things" (Xuất bản năm 1988) được phát hành [4]

Evaluate against requirements

Understand Specify user Design

Hình 1.1 Sơ đồ quy trình Thiết kế lay người dùng lam trung tam (UCD) - Nguon:

Interaction Design

18

Trang 20

Quá trình thiết kế lay người dùng làm trung tâm bao gồm 4 bước:

- Bước 1: Hiéu bối cảnh sử dung (Understand context of user)

Nguyên tắc thiết kế lấy người dùng bắt đầu với việc hiểu người dùng mục tiêu vàcác yêu cầu cụ thé của họ Điều này đạt được thông qua việc thực hiện nghiên cứu sâungười dùng, thu thập thông tin chi tiết về người dùng và phân tích phản hồi, nhu cầu

và thách thức của người dùng Cac nhà thiết kế cần thấu cảm với người dùng dé cóđược sự hiểu biết sâu sắc về kỳ vọng của người dùng và nghiên cứu người dùng mụctiêu hỗ trợ nhà thiết kế tìm ra giải pháp dé đáp ứng nhu cầu của người dùng [3]

- Bước 2: Xác định yêu cầu của người dùng và doanh nghiệp (Specify user

requirements)

Sau khi có được một kiến thức co ban về người dùng của ứng dụng, bước tiếp theo

là xác định rõ các yêu cầu Điều này bao gồm yêu cầu từ phía doanh nghiệp, như lợinhuận kỳ vọng, thời gian và chi phí đầu tư, giới hạn thời gian, các mốc cần đạt được,

và yêu cầu từ phía người dùng, như các vấn đề cần được giải quyết bởi thiết kế, tiêuchí đánh giá thành công của sản phẩm và lợi ích mà người dùng sẽ nhận được khi sửdụng sản phẩm [3]

- _ Bước 3: Xây dựng giải pháp thiết kế (Design solutions)

Bước này liên quan đến việc lựa chọn các chức năng chính sẽ có trong sản phẩm.Các hoạt động chính bao gồm xây dựng: Luéng người dùng (User flows), Cấu trúc ditliệu (Information architecture and sitemaps), Mau sac, hình ảnh va kiểu chữ, Phác thaothiết kế (Wireframing), Xây dựng bản thử (Prototyping) [3]

- _ Bước 4: Đánh giá sản phẩm (Evaluate against requirements)

Sản phẩm được đánh giá dựa trên các yêu cầu được xác định ở bước 2 Phươngpháp tốt nhất dé thực hiện đánh giá là tiến hành các buổi kiểm tra với người dùng thực

tế Một phần quan trọng của quá trình thiết kế tập trung vào người dùng là lặp lại Saukhi tiến hành đánh giá và thu thập phản hồi từ người dùng, đến lúc tiến hành vòng lặplại một lần nữa, sử dụng thông tin mà người dùng cung cấp để cải thiện thiết kế [3]

1.2 Tong quan về phương pháp Atomic Design

1.2.1 Khái niệm Atomic Design

Atomie Design hay thiết kế nguyên tử là một phương pháp được sáng tạo bởi nhàthiết kế web Brad Frost vào năm 2013, nhằm tao ra các thành phan giao diện theo cấutrúc phân cấp Theo Frost (2016), Atomic Design không phải là quy trình tuyến tính

mà là một mô hình tư duy giúp chúng ta nghĩ về giao diện người dùng như một tổngthể nhất quán và một tập hợp các phần cùng một lúc Phương pháp này bắt nguồn từhóa học, nơi các nguyên tử kết hop với nhau dé tạo ra các yếu tô phức tạp hơn Trongthế giới tự nhiên, các nguyên tử kết hợp đề tạo thành phân tử, và những phân tử này cóthê kết hợp dé tạo thành các hệ thống lớn hơn [12]

19

Trang 21

Phương pháp thiết kế nguyên tử bao gồm 5 bước: Atoms, Molecules, Organisms,

Templates và Pages.

S218

SOOO

MOLECULES ORGANISMS — TEMPLATES PAGES

Hình 1.2 5 cấp độ của thành phan trong Atomic design - Nguon: Sách Atomic Design

cua tac gia Brad Frost

1.2.2 Cac thành phần của giao diện theo phương pháp Atomic design

Ý tưởng chính của phương pháp Atomic design là chia các giao diện người dùngthành các phần nhỏ nhất có thể, gọi là 'Atoms', tạo ra một hệ thống các khả năng và kếthợp Đây có thể xem là một cách tiếp cận cơ bản trong việc xây dựng một bộ quychuẩn thiết kế giao diện người dùng (Design system)

Bộ quy chuẩn thiết kế là hệ thống các quy chuân và thành phần đã được tạo sẵn,giúp quản lý công việc thiết kế theo quy mô lớn và tái sử dụng chúng [13] Theo BradFrost: Thiết kế nguyên tử là một phương pháp bao gồm năm giai đoạn riêng biệt hoạtđộng cùng nhau dé tạo ra hệ thống thiết kế giao diện theo cách có chủ đích và phâncấp hơn [12]

Một vi dụ tiêu biểu của việc áp dụng Atomic Design vào bộ quy chuẩn thiết kế là

Tini Apps của Tiki - hiện là một trong các trang mua sắm trực tuyến đáng tin cậy nhất trong lĩnh vực thương mại điện tử tại Việt Nam Đội ngũ Tiki là công ty đầu tiên cung

cấp giải pháp công nghệ Tini Apps cho đối tác [14]

Tuy nhiên điểm khác biệt quan trọng là trong Atomic Design, nhà phát triển ưu tiênthiết kế các thành phan giao diện riêng lẻ (Atoms) và kết hợp chúng lại với nhau dé tạo

ra các phần tử phức tạp hơn, thay vì thiết kế cả trang Điều này giúp đảm bảo sự nhất

quán và linh hoạt trong việc xây dựng giao diện người dùng Vì vậy, Atomic Design

và Design system có thé được kết hợp một cách hiệu quả dé tạo ra các trải nghiệmngười dùng đồng nhất và hợp nhất trên nhiều sản phẩm và dự án

Đề minh họa được rõ ràng hon, tác gia sử dụng Tini Design System làm ví dụ choviệc áp dụng Atomic Design vào thiết kế bộ quy chuẩn thiết kế

20

Trang 22

Trong Tini Design System, hệ thống nút bam bao gồm 3 kiểu: Solid (đồ màu),Outlined (đường viền), va Ghost (hoặc Text Button) Mỗi kiểu này có thé có các hìnhdạng khác nhau như tròn hoặc vuông Ngoài ra, nhóm thiết kế của Tini cũng đã xâydựng một loạt các kích thước và trang thái khác nhau cho các nút bam Điều này giúpđội phát triển (Development) có thể sử dụng các nút phù hợp với tương tác của người

dùng.

1 Style 2 Content 3 Shape

Solid, Outlined and Ghost Text only, Leading icon, Rounded, Pill

Trailing icon & Icon only.

O Button @ Button

@ Leading icon

Button O Button Trailing O

4 Size 5 States & Statuses

Small, Medium and Large Default, Hover, Active, Disable, Loading, Skeleton loading

Trang 23

Đồ án Thiết kế Sản phẩm Đa phương tiện CHƯƠNG 1

tạp hơn Molecules là các thành phần có thê tồn tại độc lập và có ý nghĩa riêng, nhưngchúng cũng được sử dụng đề xây dựng các thành phan giao diện lớn hơn [12]

Vùng nhập văn bản (Textfiled) là một ví dụ điển hình của Molecule Chúng đượctạo nên từ nhãn (Label), hộp (Input), biểu tượng (Icon), Do được kế thừa nhữngđịnh dạng chuẩn của Atom, ta có thé thay chúng trở nên đồng nhất hơn

Đội thiết kế của Tini đã xây dựng một hệ thống vùng nhập văn bản (Textfield) vớihai định dạng: có nhãn và không có nhãn, kết hợp với hai hình dạng: tròn và vuông.Tương tự như hệ thống nút bam (Button), vùng nhập văn ban cũng bao gồm nhiềutrạng thái khác nhau, như trống (Empty), di chuột (Hover), tập trung (Focus), nhập(Typing), điền (Filled), ân (Disable), lỗi (Error) va loading Bang cach áp dung cáctrang thái và định dạng khác nhau nhưng van thống nhất với hệ thong nút bam, nhómthiết kế đã tạo ra một hệ thống vùng nhập văn bản linh hoạt và đa dạng

< Text field ces

1 Format 4 States & Statuses

Label & Input only Empty, Hove, Focus, Typing, Filled, Disabled, Error, Skeleton

Label Placeholder Button

Hình 1.4 Vùng nhập văn ban trong Tini Design System - Nguồn: Tini Apps

22

Trang 24

1.2.2.3 Organisms

Organisms (Cấu trúc sống) là nhóm các Molecules giống nhau hoặc khác nhau détạo thành một thành phần hoàn chỉnh của một giao diện [12] Chúng thường đại diệncho các phan tử giao diện lớn như mẫu (Form), thanh điều hướng (Navigation bar),hộp thoại (Modals) và các thành phần giao diện phức tạp khác

Một vi dụ cụ thé của Organism trong Tini Design System là hộp thoại (Modals), sửdụng các thành phần nhỏ hơn như nút bam radio, vùng nhập văn bản, nút bam Điềunay có nghĩa là nó cũng kế thừa những quy chuẩn thiết kế có sẵn từ các lớp nhỏ hon

Label Label Data

Placeholder Label Data

Label Label Data

Placeholder Label Date

Label Label Data

23

Trang 25

< Payment method

Choose your payment method

aaa Tiki xu Choose >

Trong Tini Design System, với việc sử dung các Templates đã được xây dung

trước đó, nhà thiết kế chỉ cần cung cấp nội dung cụ thé và thay thế hình anh dé tạo ragiao diện người dùng cuối cùng Vì trang được tạo thành từ các thành phần nhỏ hơn đãđược thiết kế theo phương pháp Atomic Design, giao diện sẽ trở nên thống nhất vàtuân theo các quy tắc thiết kế chung

24

Trang 26

Đồ án Thiết kế Sản phẩm Đa phương tiện CHƯƠNG I

Hình 1.7 Giao điện người dùng ứng dụng Tiki được xây dựng từ Tini Design System

năng sử dụng.

Vị dụ, một ứng dụng di động thương mại điện tử sử dụng một thành phần nút

(button) tái sử dụng cho các hành động như đăng nhập, đăng ký va mua hang Thành

phan nút này có thé được tùy chỉnh về mau sắc, kích thước và hình dang

Trang 27

Vi du, một ứng dụng di động tuân thủ các nguyên tắc về mau sắc, kích thước và bốcục để tạo ra tính nhất quán trong toàn bộ giao diện Các nút, đầu vào và biểu tượng cóthể có cùng một mau sắc và kích thước, và chúng được bồ trí theo cách tương tự trêntat cả các trang, giúp người dùng dé dang tìm thấy và sử dụng các phan tử

1.3.1.3 Kha năng mở rộng

Khả năng mở rộng là nguyên tắc cuối cùng của Atomic Design Các thành phan

giao diện người dùng cần có khả năng mở rộng đề đáp ứng sự biến đổi của ứng dụng

theo thời gian Điều này giúp ứng dụng dễ dàng phát triển và duy trì theo thời gian,

đồng thời đáp ứng nhanh chóng các nhu cầu mới của người dùng.

Vi dụ, một ứng dụng di động sử dụng một thành phần danh sách có thể mở rộng déhiển thị danh sách các mục Khi số lượng mục tăng lên, danh sách có thé được mởrộng mà không làm mắt tính nhất quán hoặc khả năng sử dụng

1.3.2 Lợi ích của việc sử dung Atomic Design trong thiết kế giao diện ứng dung

Phương pháp Atomic Design giúp tao ra một ngôn ngữ thiết kế chung dé hài hòasản phẩm Trong mô hình Atomic Design, trải nghiệm người dùng và quy trình thiết kếkhông bị gián đoạn khi quy mô tăng lên Các thành phần giao diện đã được thiết kếmột cách chỉ tiết và có tô chức logic, giúp đảm bảo tính nhất quán và hiệu suất trongquá trình phát triển

Sự quan trọng của Atomic Design phản ánh ở việc nó chia thành các thành phầnlinh hoạt và độc lập, từ đó xây dựng một hệ thống có thể thích ứng và phát triển mộtcách nhanh chóng và tự độc lập Việc tách biệt thành phần này cho phép chúng ta thựchiện các thay đổi mà không làm ảnh hưởng đến toàn bộ hệ thống, giúp tiết kiệm thờigian khi thực hiện những điều chỉnh trên nhiều trang Thêm vào đó, tính độc lập củacác thành phần còn tạo điều kiện cho sự đa dạng bang cach tao ra nhiéu bién thé makhông tác động đến tính ổn định của hệ thống [15]

Các thành phần giao diện được xây dựng dựa trên nguyên tắc và tiêu chuẩn đãđược đặt ra, tạo ra một cơ sở cho sự kết nối mạnh mẽ giữa các nhóm làm viéc Điềunày giúp mọi người có thể tham khảo và tuân theo các mô hình và phong cách chung,

26

Trang 28

tao ra sự thống nhất và đồng thuận trong quá trình đánh giá va cải thiện thiết kế, đồngthời tạo điều kiện thuận lợi dé xây dựng mối liên kết mạnh mẽ giữa các thành viêntrong nhóm phát triển

1.3.2.2 VỀ năng suất

Phương pháp Atomic Design không chỉ mang lại sự cải thiện về tốc độ, chất lượng

và tính nhất quán trong quá trình phát triển sản phẩm giao diện ứng dung di động, macòn thúc day hiệu suất một cách bền vững Điều này đặt ra cơ hội dé tăng cường năngsuất, nghĩa là một đội ngũ ít người có thể tạo ra nhiều sản phẩm hơn trong cùng mộtkhoảng thời gian Kết qua là giảm chi phi và kha năng đưa các tính năng mới ra thịtrường nhanh chóng hơn Nhờ vào khả năng tái sử dụng các thành phần, các nhómthiết kế giảm nhu cầu phải tạo ra các thành phần hoàn toàn mới, từ đó giảm nguy cơ

mâu thuẫn.

Nhóm nghiên cứu đến từ Indonesia đã thực hiện một thử nghiệm trong nghiên cứu

“PENGEMBANGAN DESIGN SYSTEM PADA PERANGKAT LUNAK IBID

DENGAN PENDEKATAN ATOMIC DESIGN (Phát triển Hệ thống Thiết kế choPhần mềm Ibid với Phương pháp Atomic Design)” bằng việc dé các nhà thiết kế sửdụng Atomic Design và không sử dụng phương pháp này thiết kế cùng một giao diệnngười dùng Dựa trên đánh giá kết quả kiểm thử, thời gian trung bình cần để hoànthành nhiệm vụ trong thiết kế giao diện người dùng bởi mỗi nhà thiết kế đã giảm từ 1giờ 52 phút 14 giây trong kiểm thử trước nghiên cứu xuống còn 1 giờ 26 phút 59 giâysau khi sử dụng hệ thống thiết kế theo phương pháp Atomic design [16]

Có thể thấy, lợi ích tức thì nhất của việc triển khai một hệ thống Atomic Design

thành công là giảm khối lượng công việc của nhân viên và giảm chi phí cho các hoạtđộng quan trọng, chăng hạn như:

27

Trang 29

Việc giảm bớt công việc nay mở ra co hội tái đầu tư vào nghiên cứu trai nghiệmkhách hàng (CX) Các thành phần có khả năng tái sử dụng giải phóng nhà thiết kế vànhà phát triển từ các tác vụ lặp lại, chuyển hướng họ đến các tác vụ tạo ra giá trỊ giatăng cho sản phẩm hoặc dịch vụ Cũng trong nghiên cứu trên, qua việc tổ chức cácthành phần giao diện được sử dụng trong các khóa học, gánh nặng đặt lên những người

tạo ra khóa học đã được giảm bớt và chất lượng của các khóa học đã được nâng cao.

Điều này cũng mang lại tính nhất quán cho trải nghiệm giữa các khóa học và cải thiệnchất lượng trải nghiệm cho sinh viên [17]

TOTAL EFFORT

Hình 1.8 Sử dụng bộ quy chuẩn thiết kế lam giảm khối lượng công việc của UI và

code, từ đó tái dau tu UX va CX - Nguồn: Emergn [18]

1.3.2.3 Về tinh nhất quán

Trong thiết kế nguyên tử, sự đồng nhất và nhất quán đóng vai trò quan trọng trongviệc nâng cao chất lượng hình ảnh và làm cho sản phẩm trở nên dễ sử dụng hơn Các

mẫu giao diện giống nhau được áp dung cho toàn bộ danh mục san phẩm, tạo ra một

trải nghiệm người dùng thống nhất Hệ thống thiết kế chuẩn được thiết lập dé định rõ

và đồng bộ hóa các mẫu này, đảm bảo rằng tất cả các sản phẩm đều tuân theo cùngmột ngôn ngữ thiết kế và duy trì tính nhất quán

Khi người dùng mở một ứng dụng nào từ nhóm phát triển, họ mong đợi rằng mọitính năng và trải nghiệm sẽ hoạt động một cách nhất quán Họ tin rằng ứng dụng sẽđồng bộ với các ứng dụng khác trên thiết bị di động của họ Bằng cách sử dụngphương pháp Atomic Design, chúng ta đảm bảo rằng người dùng sẽ trải nghiệm một

sản phẩm toàn điện với tính nhất quán, khuyến khích họ chọn lựa ứng dụng của bạn

thay vì ứng dụng của các đối thủ cạnh tranh

1.3.2.4 Về khả năng bảo trì

Một trong những ưu điểm quan trọng của việc áp dung Atomic Design là việc bảo tri sản phẩm giao diện dé dang hơn và hiệu quả hơn Atomic Design chia giao diện thành các phan tử giao điện cơ bản, mỗi phan tử có vai trò và chức năng riêng Khi có sự thay đôi hoặc cập nhật

28

Trang 30

can ap dung, cac thay đổi chi cần thực hiện tai cấp độ của các phần tử đó, và chúng sẽ tự động

áp dụng đến tất cả các bản UI sử dụng phần tử đó.

Việc sử dung Atomic Design là rat quan trong vì nó giới thiệu một cách thức

Mô-đun hóa và độc lập trong việc tạo ra hệ thống, đồng thời cung cấp khả năng thích ứng

nhanh chóng của hệ thống và sự phát triển độc lập của các thành phần của nó Sự pháttriển nhanh chóng này là do tính độc lập của các phần trong dự án và khi chúng đượcthay đối, sự thay đối này được phan ánh trong toàn bộ hệ thống, từ đó dem lại tính linhhoạt khi thay đôi nhiều trang [15]

Tập trung phát triển theo phương pháp Atomic Design giúp giảm thời gian và công

sức cần thiết cho việc bảo trì Điều này đặc biệt quan trọng trong quá trình phát triển

ứng dụng đi động, nơi mà các thay đổi thường xảy ra một cách thường xuyên Bằng

việc có một hệ thống thiết kế theo phương pháp Atomic Design, các nhà thiết kế vànhà phát triển có thể thực hiện các cập nhật một cách nhanh chóng và hiệu quả, đồngthời đảm bảo tính nhất quán và chất lượng trong sản phâm cuối cùng

Từ những lí do trên, ta có thé thấy việc áp dụng phương pháp Atomic Designkhông chỉ giúp xây dựng giao diện người dùng một cách hiệu quả mà còn tạo điềukiện thuận lợi cho việc bảo trì và cập nhật sản pham, đồng thời đảm bảo tính nhất quán

và chất lượng của ứng dụng di động

TIỂU KÉT CHƯƠNG 1

Chương 1 đã cung cấp một cái nhìn tổng quan về thiết kế giao diện ứng dung diđộng và phương pháp Atomic Design Việc hiểu và áp dụng các khái niệm và nguyêntắc trong chương này sẽ giúp thiết kế giao diện ứng dụng di động trở nên hiệu quả và

dễ quản lý.

29

Trang 31

CHUONG 3 NGHIÊN CUU VE UNG DUNG HAPPY CHILD THEO DOI SỨC

KHOE TAM THAN TRE EM DANH CHO CHA ME

Dua trên cơ sở lý thuyết được trình bày ở Chương 1, Chương 2 sẽ tập trung vàoviệc giới thiệu tong quan về ứng dụng Happy Child, nơi theo đối sức khỏe tâm thầncủa trẻ em được đặt ở trung tâm Chương này sẽ bao gồm mục tiêu, đối tượng ngườidùng, chức năng cụ thể, cùng với cấu trúc thông tin và luồng người dùng Thông quanhững nội dung nay, chúng ta sẽ xây dựng một nén tảng chặt chẽ dé hiểu rõ hơn vềquá trình thiết kế và triển khai chỉ tiết trong các phần tiếp theo của nghiên cứu

2.1 Tổng quan về ứng dụng Happy Child theo dõi sức khỏe tâm thần trẻ em

dành cho cha mẹ

2.1.1 Giới thiệu chung về ứng dụng Happy Child

Happy Child là một ứng dụng đặc biệt được thiết kế nhằm theo dõi sức khỏe tâmthần của trẻ em tại Việt Nam, mang đến sự hỗ trợ và tăng cường sự phát triển cùng

hạnh phúc cho trẻ em.

Happy Child hướng đến các bậc cha mẹ có con ở Việt Nam, những người quan tâm

đến việc theo dõi sức khỏe tâm thần của con cái Ứng dụng cung cấp các công cụ, tài

liệu và hướng dẫn giúp cha mẹ nhận biết và đối phó với những vấn đề tâm lý thường

gặp ở trẻ em.

Hình 2.9 Logo cua ứng dung Happy Child - Boi Tác gia

Đối tượng sử dung ứng dụng chính gồm:

- Cha mẹ: Happy Child cung cấp cho cha mẹ các công cụ và tài liệu hữu ích dégiúp họ chăm sóc sức khỏe tâm thần của con cái Cha mẹ có thể tìm kiếm thông tin,theo dõi giai đoạn phát triển của trẻ, nhận được gợi ý về các hoạt động và kỹ năng pháttriển phù hợp, va tìm hiểu về các vấn đề sức khỏe tâm thần thông qua tai liệu và baiviết sẵn có trong ứng dụng Ngoài ra, cha mẹ có thé đặt lịch tư vấn trực tuyến VỚI Cácbác sĩ tâm lý để nhận được sự hỗ trợ va tư vấn chuyên sâu

30

Trang 32

- Bac si/Chuyén gia tâm lý: Ứng dung Happy Child cung cấp nền tang cho bác

sĩ và chuyên gia tâm ly dé tương tác với cha mẹ và trao đổi thông tin về sức khỏe tâmthần của trẻ Bác sĩ và chuyên gia có thể cung cấp tư vấn trực tuyến, đưa ra lời khuyên

và hướng dẫn cho cha mẹ trong việc quản lý và cải thiện sức khỏe tâm thần của trẻ

- Quan trị viên (Admin): Quản trị viên là người quản lý ứng dụng Happy Child,

chịu trách nhiệm về việc duy trì và cập nhật nội dung trong ứng dụng, quản lý tảikhoản người dùng và hỗ trợ các hoạt động liên quan đến ứng dụng

Trước những hạn chế về thời gian và phạm vi đề tài, tác giả đã quyết định xâydựng ứng dụng Happy Child, tập trung đặc biệt vào người dùng cuối là cha mẹ Mụctiêu của việc xây dựng ứng dụng là đảm bảo rằng nó mang lại giá trị cao nhất chongười dùng trong một khoảng thời gian có hạn Đồng thời, ứng dụng cũng được thiết

kế dé giải quyết những thách thức cụ thé mà người làm cha mẹ đang đối mặt Quyếtđịnh này được đưa ra sau sự cân nhắc kỹ lưỡng và hướng dẫn từ nghiên cứu, nhằm

đảm bảo tính khoa học và hiệu quả của dự án.

2.1.2 Mục tiêu của ứng dụng

Ứng dụng Happy Child được phát triển với các mục tiêu cụ thể, nhằm mang lại lợiích to lớn cho cả cha mẹ và trẻ em bao gồm:

- Nang cao nhận thức của cha mẹ về sức khỏe tâm than của trẻ em

Ứng dụng Happy Child đặt mục tiêu tăng cường sự nhận thức của cha mẹ về sứckhỏe tâm thần của trẻ em bằng cách cung cấp tính năng đặc biệt - bài kiểm tra sứckhỏe tâm thần Chức năng này cho phép cha mẹ thực hiện một loạt câu hỏi trong bàikiểm tra có liên quan đến tình trạng tâm lý của con cái Bài kiểm tra không chỉ đánhgiá tình trạng hiện tai, mà còn theo dõi sự thay đối theo thời gian, giúp cha mẹ nhận

biết các xu hướng hoặc biến động trong tâm lý của trẻ Điều này không chỉ giúp cha

mẹ phát hiện sớm các dấu hiệu tiềm ân của van dé tâm lý, mà còn tạo cơ hội dé can thiệp và hỗ trợ kịp thời.

- Tang cường kỹ năng chăm sóc sức khỏe tam thân của cha me

Ứng dụng cung cấp tài liệu và hướng dẫn thực hành, giúp cha mẹ xây dựng môitrường sống và học tập tích cực cho trẻ Những kỹ năng này giúp trẻ phát triển khảnăng đối phó với căng thang và giải quyết các van đề tâm lý khác nhau

- _ Cung cấp hỗ trợ và tư vấn cho cha mẹ

Happy Child không chỉ là một nguồn thông tin, mà còn là một nơi kết nối cha mevới bác sĩ và chuyên gia tâm lý dé nhận được sự hỗ trợ và tư van chuyên sâu Điều nàygiúp cha mẹ giải đáp các thắc mắc và nhận được hướng dẫn cụ thể trong việc chăm sócsức khỏe tâm thần của con mình

Nhìn chung, ứng dụng Happy Child được thiết kế nhằm cung cấp cho cha mẹ cáccông cụ và tai liệu hữu ich để giúp họ chăm sóc sức khỏe tâm thần của con cái một

31

Trang 33

cách hiệu quả Ứng dụng này có thê cải thiện nhận thức và kỹ năng chăm sóc sức khỏetâm thần của cha mẹ, từ đó giúp trẻ em phát triển toàn diện và hạnh phúc

2.2 Nghiên cứu thị trường và đối thủ cạnh tranh

2.2.1 Tổng quan thị trường ứng dụng theo dõi sức khỏe tâm thần trẻ em tại Việt

Nam và thế giới2.2.1.1 Thực trạng sức khỏe tâm than trẻ em tại Việt Nam

Trong một khảo sát dịch tễ học gần đây trên mẫu đại diện quốc gia của 10 trong số

63 tỉnh/thành ở Việt Nam, đã cho thấy mức trung bình các vấn đề sức khỏe tâm thầntrẻ em chiếm khoảng 12%, tương đương với hơn 3 triệu trẻ em có nhu cầu về các dịch

vụ sức khỏe tâm thần Điều này chỉ ra rằng sức khỏe tâm thần của trẻ em là một vấn đềđáng quan tâm và cần được chú trọng [19]

Hiện nay, chất lượng và độ bao phủ của các dịch vụ chăm sóc sức khỏe tâm thần

còn hạn chế và tập trung chủ yếu vào các rối loạn tâm thần nghiêm trọng Đối với việccác rối loạn tâm thần thông thường (CMDs), như lo âu, tram cảm, cô đơn, buôn rau vànhững tốn thương tinh thần, thường bị bỏ qua hoặc coi nhẹ CMDs có thể gây ra mộtloạt các hậu quả tiêu cực, bao gồm nguy cơ tự tu [20]

Tuy nhiên, các rỗi loạn tâm thần thông thường lại là các loại hình van đề sức khỏetâm thần phô biến nhất ở trẻ em Việt Nam Báo cáo Kết quả chủ yếu "Điều tra Sứckhỏe Tâm thần Vị thành niên Việt Nam (V-NAMHS)" tháng 11 năm 2022 đã chi rarằng lo âu, tram cảm và van dé tăng động/giảm chú ý chiếm tỷ lệ cao nhất trong cácvan đề sức khỏe tâm than ở trẻ [21]

Điều này đặt ra một vấn đề cấp thiết cho gia đình và xã hội Việt Nam Tỷ lệ suygiảm chức năng chung ở trẻ em Việt Nam dat 20% do ảnh hưởng từ các van dé sứckhỏe tâm than, tương tự như tỷ lệ ở các nước có thu nhập cao như Đức và Hoa Kỳ,theo nghiên cứu của Tiến sĩ Đặng Hoàng Minh [22] Do đó, cần có sự cải thiện và mởrộng các dịch vụ chăm sóc sức khỏe tâm thần đành cho trẻ em ở Việt Nam, cũng nhưtăng cường nhận thức và giáo dục cho cộng đồng về sức khỏe tâm than trẻ em

32

Trang 34

20 18.6%

18

16 14 12

Tram cam Lo au Căng thẳng sau Vấn đề hành vi Vấn đề tăng

sang chan động/giảm chú ý

Hình 2.10 Tỷ lệ mắc các vấn dé sức khỏe tâm than trong 12 tháng ở trẻ 10-17 tuổi

theo loại - Nguôn: Báo cáo Kết quả chủ yếu “ Điều tra Sức khỏe Tâm than Vi thành

niên Việt Nam (V-NAMHS)” tháng 11 năm 2022”

2.2.1.2 Thách thức trong việc cung cấp các dịch vụ sức khỏe tâm than

- _ Thách thức từ phía cung ứng:

+ Thiếu nguồn nhân lực: Số lượng bác sĩ tâm thần và chuyên gia sức khỏe tâm

thần còn hạn chế Điều này tạo ra một tình trạng thiếu hụt nguồn nhân lực có trình độ

và kỹ năng phù hợp dé cung cấp dịch vụ chăm sóc sức khỏe tâm thần cho trẻ em va

+ Đánh giá thấp và kỳ thị: Linh vực sức khỏe tâm thần thường bị coi thấp hon va

kỳ thị hơn so với các lĩnh vực y tế khác Các nhà cung ứng dịch vụ cảm thấy rằng công

việc của họ không được đánh giá cao, và họ cũng gặp khó khăn trong việc tìm mức thù

lao phù hợp Sự kỳ thị này cũng có thé làm suy giảm sự tin tưởng và sự tiếp cận của

người sử dụng dịch vụ.

- _ Thách thức từ phía cau:

+ Thiếu nhận thức và kiến thức: Một số bậc phụ huynh không có đủ nhận thức về

các vấn đề sức khỏe tâm thần và không biết nơi tìm kiếm trợ giúp Ngay cả khi biếtrằng con em có thé gặp khó khăn, họ cũng không coi trọng việc tìm kiếm sự hỗ trợ

33

Trang 35

+ Hạn chế tiếp cận dịch vụ: Có những trở ngại trong việc tiếp cận dịch vụ sứckhỏe tâm thần, bao gồm khó khăn trong việc tìm kiếm và truy cập đến các đơn vị cungcấp dịch vụ Đặc biệt, các khu vực nông thôn và các khu vực xa xôi có thể thiếu các cơ

sở hạ tầng và dịch vụ tâm lý cho trẻ em

+ Thiếu sự chăm sóc tại nhà: Một số bậc phụ huynh có xu hướng chi tìm kiếmdịch vụ chăm sóc tại các cơ sở y tế, thay vì chăm sóc và hỗ trợ trẻ em tại nhà Điều này

có thé gây ra một khoảng cách giữa trẻ em và bậc phụ huynh trong việc chăm sóc và

hỗ trợ sức khỏe tâm than

2.2.1.3 Cơ hội va tiềm năng của ứng dung theo dõi sức khỏe tâm than trẻ em

Trong bối cảnh này, việc áp dụng công nghệ, đặc biệt là ứng dụng di động về sứckhỏe (mHealth), đang được coi là một giải pháp tiềm năng Thị trường ứng dụng theodõi sức khỏe tâm than tại Việt Nam dang trong quá trình phát triển, trong khi xu hướngnhận thức về sức khỏe tâm thần và nhu cầu sử dụng các ứng dụng đang tăng lên Tuynhiên, thị trường vẫn gặp hạn chế về số lượng và chất lượng ứng dụng hiện có

Trên toàn cầu, thị trường ứng dụng theo đõi sức khỏe tâm thần trẻ em đang cónhững tiến bộ đáng kê Công nghệ, ứng dụng di động và các thiết bị theo doi thôngminh đã tạo ra một sự thay đổi to lớn trong việc theo dõi và chăm sóc sức khỏe tâmthần của trẻ em Các ứng dụng này cung cấp khả năng theo dõi các chỉ số sức khỏetâm than, ghi lại thông tin về tinh trạng tâm lý và tao ra các báo cáo và đánh giá định

kỳ Điều này mang lại nhiều lợi ích cho phụ huynh, giáo viên và các chuyên gia trongviệc hiểu rõ hơn về sức khỏe tâm thần của trẻ em và áp dụng các biện pháp hỗ trợ

2.2.2 Đánh giá các ứng dung của đối thủ cạnh tranh trên thị trường

2.2.2.1 Ứng dụng Calm Kids: Mindfulness & Yoga

Calm Kids là một ứng dụng dành cho trẻ em từ 4 tuổi trở lên, tập trung vào việcgiảm căng thăng và tăng cường tinh thần tinh táo thông qua các hoạt động như thiền,yoga va câu chuyện ké Mục tiêu của ứng dụng này là tạo ra một trải nghiệm hap dan,mang lại niềm vui, sáng tạo và sự gan kết cho gia đình

Ứng dụng Calm Kids được phát triển bởi công ty công nghệ có trụ sở tại San

Francisco, California Ban đầu, Calm Kids bắt đầu như một dự án khởi nghiệp vào

tháng 6/2019 và sau đó chính thức ra mắt vào tháng 12/2021 Đội ngũ phát triển vànhà thiết kế UX của ứng dụng này được đánh giá là tài năng

- Hé điêu hành và ngôn ngữ:

34

Trang 36

Calm Kids có mặt trên cả hai cửa hàng ứng dụng Appstore và Google Play Ứngdụng hỗ trợ hai ngôn ngữ là Tiếng Anh và Tiếng việt

- Thi phần doanh nghiệp:

+ Trên Appstore: ứng dụng được đánh giá 4,9 sao với 158 xếp hạng

+ Trên Google Play: ứng dụng có hơn 10 nghìn lượt tải xuống, đánh giá 4,7 saovới 64 xếp hạng

- Giao diện người dùng:

+ Logo: Sử dụng hình minh họa với khuôn mặt em bé mim cười, tạo ấn tượng

thân thiện và hạnh phúc.

+ Mau sắc: Ung dung sử dụng mau sắc tươi sáng, với gam mau chủ đạo làgradient hong tím Mau sắc này mang đến cảm giác vui tươi và năng động, phù hợp

với lứa tuổi của trẻ em.

+ Typography và tính dé đọc: Sử dụng font chữ Circular, không chân, dé đọc.

Phông chữ Comic Sans được sử dụng cho các ảnh bìa trong ứng dụng, tạo điểm nhắn

và phù hợp với hình minh họa ngộ nghĩnh.

+ Hình ảnh, Icon, Hình minh hoa: Sử dụng các icon đồng nhất, phù hợp với

phong cách thiết kế Hình minh họa chủ yếu là các hình ảnh đáng yêu của trẻ em, phùhợp với đối tượng người dùng là trẻ em mà ứng dụng nhắm đến

+ Sự nhất quán: Giao diện người dùng của Calm Kids được thiết kế thân thiện và

dễ sử dụng cho trẻ em Màu sắc tươi sáng và hình ảnh ngộ nghĩnh tạo nên sự nhất quan

trong toàn bộ trải nghiệm người dùng.

- Cac chức năng chính:

+ Bài tập: Ung dung bao gồm các bai tập yoga, tập thở, thiền và kỹ thuật thư giãn.

Các bài tập này được thiết kế đặc biệt cho trẻ em ở mọi lứa tuổi Bài tap yoga giúp trẻtăng cường sự linh hoạt và phối hợp, bài tập thở giúp trẻ thư giãn và tập trung, bài tậpthiền giúp trẻ giảm căng thắng và học cách quản lý cảm xúc

+ Đánh giá và theo đõi cảm xúc hàng ngày trẻ: Calm Kids cung cấp một chức

năng giúp trẻ đánh giá và theo dõi cảm xúc hàng ngày của mình Có các trạng thái như

Tuyệt vời, Vui vẻ, Bình thường, Bối rối và Buồn Chức năng này giúp trẻ nhận thứcđược cảm xúc của mình và học cách kiểm soát cảm xúc

+ Âm nhạc thư giãn cho bé: Calm Kids cung cấp một thư viện âm nhạc thư giãn

dành riêng cho trẻ em Âm nhạc này được thiết kế dé giúp trẻ thư giãn và có giấc ngủ

ngon.

+ Danh sách phong phú các câu chuyện ké: Ung dụng cung cấp một danh sách đa

dạng các câu chuyện kê giúp trẻ chìm vào giâc ngủ yên bình.

35

Trang 37

- Gia thành va giá tri mang lại:

+ Gói hàng tháng: Với giá 199.000 đồng mỗi tháng, người dùng có quyên truycập vào tất cả các tính năng của ứng dụng Gói này cho phép trải nghiệm đầy đủ và

linh hoạt trong việc sử dụng Calm Kids.

+ Gói hàng năm: Với giá 1.199.000 đồng mỗi năm, gói này mang lại mức giáchiết khấu so với gói hàng tháng và cung cấp quyền truy cập vào các tính năng độcquyền Gói hàng năm là lựa chọn tốt cho những người muốn cam kết sử dụng CalmKids trong thời gian dài và tiết kiệm chỉ phí

Bai tap hom nay we

¬ nor bates Ba me ơi, đặt điện thoại cạnh bé, 7 %

cùng nghe và hướng dẫn bé thực _— mi»

hành các bài tập nhé! Ỹ

giúp giải toa cảm xúc tiêu cực dé có oy =

một giấc ngủ ngon nhe! <—yV Y

LÍ

Trở Thành Cái Cây

@

_.

Chuỗi Bài Tập Yoga

Hình 2.11 Giao diện ứng dung Calm Kids: Mindfulness & Yoga

- Điểm tốt:

+ Giao diện người dùng thân thiện và dễ sử dụng: Giao diện người dùng của

Calm Kids được thiết kế đặc biệt để phù hợp với trẻ em Với màu sắc tươi sáng, hình

ảnh ngộ nghĩnh và âm thanh vui nhộn, giao diện tạo ra một trải nghiệm thú vi và thoải

mái cho người dùng nhỏ tuổi

+ Nhiều chức năng và nội dung phong phú: Calm Kids cung cấp nhiều chức năng

và nội dung đa dạng Các chức năng bao gồm thiền, yoga, câu chuyện ké, âm nhạc vàhoạt động Điều này cho phép trẻ em có nhiều lựa chọn dé thư giãn và phát triển ban

thân theo cách riêng của mình.

- _ Điểm có thé cải thiện:

+ Nội dung đơn giản cho trẻ em lớn tuổi: Chủ yêu bài thiền và hoạt động trongCalm Kids dành cho trẻ em nhỏ tuổi, điều này có thé khiến trẻ em lớn tuổi cảm thaynội dung hơi đơn giản và không phù hợp với độ tuổi của họ

36

Trang 38

+ Chỉ phí sử dụng ứng dụng: Hiện tại, hầu hết nội dung trên Calm Kids đòi hỏi trảphí để sử dụng Mức phí hàng tháng có thể cao và tạo áp lực tài chính cho một số gia

đình.

+ Thiếu video hỗ trợ trong bài tập Yoga: Tất cả các bài tập trong Calm Kids chỉ

có dạng âm thanh, điều này có thé khiến một số trẻ em cảm thấy nhàm chán và khônghứng thú Đặc biệt, việc thiếu video hỗ trợ trong bài tập Yoga làm cho trẻ em khó hình

dung và thực hiện đúng các động tác.

Tóm lại, Calm Kids là một ứng dụng tốt với giao diện thân thiện và nhiều chứcnăng phong phú Tuy nhiên, dé đáp ứng nhu cầu của mọi độ tuổi và giảm áp lực tàichính cho người dùng, cần cải thiện nội dung dé linh hoạt hơn va xem xét chiến lượcgiá cả Việc tích hợp video vào bài tập Yoga cũng có thé làm tăng trải nghiệm người

DR.PSY bao gồm một Mini app, đó là một ứng dụng nhỏ được phát triển để chạytrên nền tảng của một ứng dụng lớn hơn Mini app cho phép người dùng mua các sảnphẩm như thuốc, thực phẩm chức năng, thiết bị y tế và sách tâm lý

Với DR.PSY, người dùng có thể tìm kiếm sự hỗ trợ và điều trị tâm lý từ cácchuyên gia và bác sĩ tâm thần chất lượng Đồng thời, họ cũng có thể tiếp cận các sảnphẩm hỗ trợ sức khỏe tâm lý thông qua Mini app Ứng dụng này mang lai lợi ich vàtiện ích cho những người quan tâm đến sức khỏe tâm lý và tìm kiếm sự hỗ trợ và điều

trị chuyên nghiệp.

- _ Hệ điều hành và ngôn ngữ:

DR.PSY hiện có mặt trên cả hai cửa hàng ứng dụng Appstore và Google Play Ứngdụng chỉ hỗ trợ ngôn ngữ Tiếng việt

- Thi phần doanh nghiệp:

+ Trên Appstore: ứng dụng được đánh giá 4,7 sao với 23 xếp hạng

+ Trên Google Play: ứng dụng có hơn 1 nghìn lượt tải xuống, đánh giá 4,0 sao với

40 xếp hạng

- Giao diện người dùng:

+ Logo: Logo của ứng dụng là chữ DR.PSY trên nền màu nâu

37

Trang 39

+ Màu sắc: Ứng dụng sử dụng màu chủ đạo là màu xanh đương dé tạo cảm giácnhẹ nhàng, yên bình và thư thái Tuy nhiên, màu sắc của chữ và nền trên ứng dụng

không đủ tương phan, làm giảm kha năng đọc Mini app trong ứng dụng sử dụng mau

chủ đạo là màu cam.

+ Typography và tinh dé đọc: Ung dung sử dụng font không chân, hiện đại và dễđọc Tuy nhiên, trong thiết kế giao diện người dùng, DR.PSY sử dụng chữ in hoa toàn

bộ cho tiêu đề, điều này có thể tạo cảm giác nặng nề và khó chịu cho người dùng

+ Hình anh, Icon, Hình minh họa: Hệ thống icon trong ứng dụng DR.PSY không

đồng nhất, sử dung icon stroke trong một số trường hợp và icon fill trong Mini app Vềhình minh họa và hình ảnh, chúng khá đồng nhất về phong cách nhưng lại sử dụng quánhiều màu sắc

+ Sự nhất quán: Giao diện của ứng dụng DR.PSY chưa đạt sự nhất quán, các nút(button) sử dụng bo góc không thống nhất ở các vị trí khác nhau Màu sắc trên nhiềutrang cũng có tương phản thấp giữa nội dung và màu nên

- Cac chức năng chính:

+ Bài kiểm tra tâm lý: Ứng dụng cung cấp nhiều bài kiểm tra tâm lý khác nhau

cho cả trẻ em và người lớn Tuy nhiên, sau khi hoàn thành bài kiểm tra, người dùngchỉ nhận được kết quả dưới dạng điểm số và cần tự so sánh với thang điểm có san déđưa ra kết luận

+ Đặt lịch tư vấn với bác sĩ tâm lý: Người dùng có thé đặt lịch hẹn tư vấn với cácbác sĩ tâm lý Tuy nhiên, hồ sơ chuyên gia của các bác sĩ này khá sơ sài, chỉ bao gồmvăn ban và không có bat kỳ chứng chỉ nào dé xác minh mức độ uy tín của ho

+ Tham gia diễn đàn về sức khỏe tâm than: Ứng dụng cung cấp 6 diễn đàn vớicác chủ đề khác nhau, giúp người dùng lựa chọn diễn đàn phù hợp để thảo luận và chia

SẺ.

+ Cung cấp tin tức, talkshow, khóa học: DR.PSY cung cấp một số bài viết,talkshow và khóa học Tuy nhiên, số lượng nội dung này khá ít và hầu hết đã được cậpnhật vào năm 2022 Đối với khóa học, chỉ có thông tin mô tả và người dùng cần liên

hệ qua nền tảng khác ngoài ứng dụng dé đăng ký

+ Theo dõi trạng thái tâm lý hàng ngày: Ung dụng cho phép người dùng theo dõitrạng thái tâm lý hàng ngày theo 5 mức độ: Hoàn hảo, Tốt, OK, Buôn, Kinh khủng

+ Mua sắm trên Mini app: Người dùng có thé mua các sản phẩm như thuốc, thựcphâm chức nang, thiết bị y tế và sách tâm lý thông qua Mini app trong ứng dụng

- Gia thành và giá trị mang lại:

Ứng dụng DR.PSY được cung cấp miễn phí cho người dùng Đối với dịch vụ đặtlịch tư van tâm lý, quy trình thanh toán khá phức tap Người dùng cần nạp xu vao vi

38

Trang 40

trong ứng dụng đề thanh toán Tuy nhiên, ứng dụng không cung cấp chức năng rút tiền

Hình 2.12 Giao điện ứng dụng DR.PSY

+ Đa dang chức năng: Ứng dụng DR.PSY cung cấp nhiều chức năng đa dạng nhưbài kiểm tra tâm lý, đặt lịch tư vấn, tham gia diễn đàn và mua sắm trên Mini app

+ Sử dụng miễn phi: Các chức năng trên ứng dụng DR.PSY được sử dụng miễn

phí.

- Diém có thê cải thiện:

+ Thiết kế giao diện không nhất quán: Giao diện của ứng dụng không nhất quan

từ bo góc, hệ thống icon đến màu sắc, làm giảm trải nghiệm người dùng

+ Đa dạng chức năng nhưng không phát triển sâu: Số lượng chức năng trên ứngdụng là đa dạng nhưng lại không được tập trung phát triển sâu, dẫn đến trải nghiệmngười dùng không tốt và khiến người dùng rời bỏ ứng dụng

+ Hồ sơ chuyên gia cần cải thiện: Hồ sơ chuyên gia trên ứng dụng cần cung cấpnhiều thông tin hơn và kiểm chứng về mức độ uy tín của các bác sĩ Điều này giúptăng sự tin tưởng của người dùng và khuyến khích họ sử dụng dịch vụ

+ Phương thức thanh toán phức tap: Phương thức thanh toán hiện tại có quá nhiều

bước phức tạp khi người dùng phải nạp xu vào ứng dụng, nhưng lại không có chức

năng rút tiền ra khỏi ứng dụng

Tóm lại, ứng dụng DR.PSY có tiềm năng với mục tiêu hỗ trợ tâm lý công nghệ vànhiều chức năng đa dạng Tuy nhiên, cần tập trung vào việc làm cho giao diện nhất

39

Tiêu đề	Nghiên Cứu Phương Pháp Atomic Design Và Áp Dụng Vào Thiết Kế Giao Diện Ứng Dụng Happy Child Theo Dõi Sức Khỏe Tâm Thần Trẻ Em Dành Cho Cha Mẹ
Tác giả	Trương Ngọc Thúy
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	Đ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

Định dạng
Số trang	100
Dung lượng	24 MB