Nghiên cứu về Atomic Design và áp dụng vào thiết kế giao diện ứng dụng “Noi Bai Companion

Đồ án Tốt nghiệp Đại học Lời cam đoanLỜI CAM ĐOAN Tác giả xin cam đoan rang đồ án tốt nghiệp “Nghiên cứu về Atomic Design va áp dụng vào thiết kế giao diện ứng dụng “Noi Bai Companion” c

Trang 1

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

Đồ án tốt nghiệp

Đề tài

NGHIÊN CỨU VE ATOMIC DESIGN VA ÁP DỤNG VÀO THIET KE

GIAO DIEN UNG DUNG “NOI BAI COMPANION” CUA

CANG HANG KHONG QUOC TE NOI BAI

Giảng viên hướng dẫn Ths Nguyễn Thị Kim Ngân Sinh viên thực hiện Nguyễn Thị Ngọc Hà

Mã sinh viên BI9DCPT066

Lớp DI9TKPT0I

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

Hà Nội — 2023

Trang 2

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

MỤC LỤC

DANH MỤC KÝ HIỆU VÀ CHỮ VIET TẮTT 5° 5° 5° 2 sss s£sssesess=sesess

DANH MỤC BANG BIỂU 2-2-2 2 s2 £Ss£S£ESsESSEsSEseEsEseEseEsersersersrsrsersrsrre

DANH MỤC HINH ÁNH - 2° 2Ÿ 5£ 5£ s£ s£Es£EsESSESSESSESSESESeEAEs2515251es S2

0980096710577

TL LY do ChOn G6 nh ốẽẽ 1

Mục dich và nhiệm vụ nghiên CỨU - 2° s+s+x*£xseSveerxeErseorserksrrserrsrrreerke 2

Đối tượng và phạm vi nghiên CỨU -s-s<©222+esteE2v+ettSrAxessttrxestetrressrerssee 2

Phương pháp nghiên CỨU - 5< sex HR.4110 204110140 11071110 11s 2

6 KOt CAU AE na ẽ o4 ÔỎ

CHUONG I: TONG QUAN VE ATOMIC DESIGN TRONG THIẾT KE GIAO

DIEN UNG DUNG DI DONG ccssesssssssssssssssssssssssssssssssssesssssessssssssssssssesscssssssesssscssseeees

1.1 Tổng quan về thiết kế giao diện ứng dụng di dONG ssssssssssssccsssssssssssssssssssseecsssseeesssase 5

1.1.1 Tổng quan về ứng dung di động 5

1.1.2 Thiết kế giao diện ứng dụng di động -22certrrrirriiiiiiiiiiiiiirrrriee 7

1.1.3 Thiết kế lấy người dùng làm trung tâm -cc22++te22EEEEEEEE.2EEE1212 211117211 c.c.c.rrrrrrrrrrrie 8

1.2 Tổng quan về Atomic Design trong thiết kế giao diện ứng dụng di động 10

1.2.1 Hệ thống quy chuẩn về giao diện Design System c222tc v2221121 111 11 tre 10

1.2.2 Phương pháp AtomiC D€SÏÿ1 - s10 11111 11111011T11-171171171111erkrrke 12

1.2.3 Tác động của Atomic Design đối với Design System -certrriirriiiiriirrrre 20

1.3 Tiểu kết chương 1 ++v++++++++++++++EEEtttttttttttttttttttrrrrrrrrrrrrrkkrrrrrrrrrtrrrrree 21

CHƯƠNG II: TONG QUAN VE UNG DỤNG NOI BAI COMPANION

2.1 Tổng quan về ứng dụng Noi Bai Companion

2.1.1 BOI in 1n

2.1.2 Giới thiệu về ứng dụng Noi Bai Companion :ccc2ttcvrtrriirrrtrrirrrrrrririrrrriie 23

2.1.3 MUc ti@u cla UN UNG 0100 ,—.,BHgHgH ,RR 23

2.2 Nghiên cứu thị trUOMG ceccsescssssscssessssssccssessessessssessscsssesserseeses we 3

2.2.1 Tổng quan về thị trường cảng hang không dân dụng Việt Nam - ssssrr 23

2.2.2 Tổng quan về thị trường ứng dụng hỗ trợ sân bay tại Việt Nam và thế giới 25

2.2.3 Nghiên cứu sản phẩm cùng chức năng 2 22 22221.121.111 ri 28 2.3 Nghiên cứu người dùng MUC tỉÊU - 2< s+s+eEYE+xEEkeEreTkerkersererrkerkersrre 39

.<e-°<=°=

eee

Nguyễn Thị Ngọc Hà - DI9TKDPTO1 2

Trang 3

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

2.3.1 Xác định nhóm người dùng mục tiêu -55c2cvvvvvvvvvvrrrvrrrrtrrrrrrrrirrririrrrrrrrrrrrree 39

2.3.2 Xác định vấn đề của nhóm người dùng mục tiêu :cccstceertrrirrtrrrrrrrrrrriee 39

2.3.3 Chân dung người dùng MUC tHAU cccsssssssssesssssessssssssssssssssssssssssssssssssssssssssssssssssussssessssssssesessessassueeessensiee 42

2.4 Đề xuất giải pháp thiết kế cho ứng dụng Noi Bai Companion .„ 43

2.3.1 Các chức năng cung cấp -:-cc++cccrrtrrrrEEE L H Hiiiirrrree 43

2.3.3 Luồng người dùng 22 c2 HH 45 2.5 Tiểu kết chương 2 ccsssssscssssssssssssssssssessssssssssssssssssssscsessssssssssssecsecseseesssssssssscssseessssssssssecessssseceess 48

CHƯƠNG III: ÁP DUNG ATOMIC DESIGN VÀO THIET KE GIAO DIEN

UNG DUNG NOI BAI COMPANION 2-2°22£©EE+ezEEEEezeEEEvsEEreserrssrrrssrre

3.1 Xây dung wireframe cho ứng dung Noi Bai Companion sscs<5sssssssesse 49

3.2 Thiết kế giao diện trực quan cho ứng dung Noi Bai Companion . 54

3.2.1 Thiết kế logo ting dụng và xây dựng bộ quy tắc sử dụng logo -ccccccerrrrcee 54 3.2.2 Thiết kế các thành phần giao diện sử dụng phương pháp Atomic Design 58

3.2.3 Thiết kế hoàn thiện các trang giao diện ccS2ttttiriiriiiirirrirriiee 65 3.3 Tiểu kết chương 3 22222vvede.E12111111111111112200111111111111110220011211121111 021230011, 76

„000.90 Ô

DANH MỤC TÀI LIỆU THAM $9: 001

Trang 4

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

LỜI CAM ĐOAN

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

áp dụng vào thiết kế giao diện ứng dụng “Noi Bai Companion” của cảng hàng

không quốc tế Nội Bài” là công trình nghiên cứu của bản thân Những phần có sử

dụng tải liệu tham khảo có trong đồ án đã được liệt kê và nêu rõ tại mục 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 tác giả xin chịu hoàn toan trách nhiệm và chịu tất cả các kỷ luật của bộ

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

Sinh viên thực hiện

Hà

Nguyễn Thị Ngọc Hà

Trang 5

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

LOI CAM ON

Lời đầu tiên tác giả xin phép gửi lời cảm ơn sâu sắc nhất tới toàn thé Quý thay

cô khoa Đa phương tiện - Học viện Công nghệ Bưu chính Viễn thông đã tận tình

giảng dạy, truyền đạt cho tác giả vốn kiến thức, kinh nghiệm quý báu trong suốt thời

gian mà tác giả học tập và rèn luyện tại trường Quá trình 4,5 năm tác giả không chỉ

được học tập các môn học mới, các kiến thức chuyên ngành, tham gia trải nghiệm làm

các sản phẩm thực tế ma còn nhận được sự quan tâm, giúp đỡ, chỉ dẫn tận tình của các

thầy cô Nhờ đó, giờ đây tác giả có thể tự tin lựa chọn công việc phù hợp với năng lực

và thế mạnh của mình sau khi tốt nghiệp

Đặc biệt, tác giả vô cùng ấn tượng và biết ơn sự hướng dẫn tận tình và theo dõi

sát sao của cô Nguyễn Thị Kim Ngân Cô không chỉ là người truyền đạt cho tác giả

nhiều kiến thức và kỹ năng, cô còn là người đưa ra cho tác giả nhiều lời khuyên và

định hướng quý giá, giúp tác giả ngày càng hoàn thiện hơn không chỉ về kiến thức

nghề nghiệp mà còn cả những kỹ năng cần thiết phục vụ cho chặng đường sắp tới

Đồ án tốt nghiệp ngành Công nghệ đa phương tiện, chuyên ngành Thiết kế đaphương tiện với dé tài “Nghiên cứu về Atomic Design va áp dụng vào thiết kế giao

diện ứng dụng “Noi Bai Companion” của cảng hàng không quốc tế Nội Bài” là kết

quả, minh chứng cho quá trình học tập và rèn luyện của tác giả tại Học viện Công nghệ

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

Tuy nhiên, do một phần vì kiến thức, trải nghiệm của bản thân còn hạn chế

trong khoảng thời gian thực hiện, đồ án tốt nghiệp của tác giả không thé tránh được

những thiếu sót Tác giả rat mong nhận được ý kiến đóng góp của thay cô dé có thé

học hỏi, tích lũy thêm nhiều kinh nghiệm và hoàn thành tốt nhất phần bảo vệ đồ án tốt

nghiệp sắp tới

Cuối cùng, tác giả xin kính chúc Quý thầy cô trong khoa Đa phương tiện cũngnhư các quý thầy cô đang công tác và cống hiến tại Học viện Công nghệ Bưu chính

Viễn thông thật đồi dào sức khỏe, niềm tin để tiếp tục là người truyền lửa, là người

thầy, người cô mà tác giả vô cùng biết ơn và kính trọng, người lái đò tiếp tục đìu dắt

các thế hệ mai sau

Tác giả xin chân thành cảm ơn!

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

Sinh viên thực hiện

Hà

Nguyễn Thị Ngọc Hà

Nguyễn Thị Ngọc Hà - DI9TKDPTO1 li

Trang 6

Đồ án Tốt nghiệp Đại học Danh mục ký hiệu và chữ viết tắt

DANH MỤC KÝ HIỆU VÀ CHỮ VIET TAT

Thuật ngữ Tên day du Y nghia

Frequent Ask Questions Câu hỏi thường gặp

User Centered Design Thiết kế lay người dùng làm trung tâm

User Interface Giao dién nguoi dung

World Tourism Organization Tổ chức Du lich thé giới

l

Unique Selling Point

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

Website Trang mạng

Year over Year Tang trưởng qua từng năm

Trang 7

Đồ án Tốt nghiệp Đại học Danh mục bảng biểu

DANH MỤC BANG BIEU

Bảng 2 1 Báo cáo chi tiết đánh giá giao diện người dùng của ứng dụng Schiphol

Bảng 2 2 Báo cáo chỉ tiết đánh giá tính khả dụng của ứng dụng Schiphol Airport 33

Bảng 2 3 Báo cáo chỉ tiết đánh giá giao diện người ding của ứng dụng My HKG 36

Bang 2 4 Báo cáo chỉ tiết đánh giá tính kha dụng của ứng dụng My HKG 38

Bang 2 5 Bang dé xuất giải pháp cho ứng dụng Noi Bai Companion - 43

Bảng 2 6 Các chức năng chính của ứng dụng Noi Bai CompanIon 44

Nguyễn Thị Ngọc Hà - DI9TKDPTO1 Iv

Trang 8

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

DANH MỤC HÌNH ẢNH

Hình 1 1 Minh hoạ về ứng dụng trên thiết bị di động iPhone — Nguồn: Thomson Reuters

¬— HH 5

Hình 1 2 Phân loại ứng dụng di động — Nguồn: Tini App -2-©-2- 555z+cz+cxszxez 6

Hình 1 3 Donald Arthur Norman — cha đẻ của thuật ngữ UCD — Nguồn: LinkedIn 8

Hình 1 4 Quy trình thiết kế lay người dùng làm trung tâm — Nguồn: Interaction Design

lUi10ìï(0 0E 4 9

Hình 1 5 Design System của Google — Nguồn: Material Design 2-2-5: 10

Hình 1 6 Cuốn sách “Atomic Design” (2013) của tác giả Brad Frost — Nguồn: Brad Frost

¬— 12

Hình 1 7 Ví dụ về phương trình hoá học cho thấy các nguyên tử hidro và oxi kết hợp với

nhau tạo thành phân tử nước — Nguôn: Brad EFoSf - - 22c 23132 12 EEsvrrsrerrssvee 13

Hình 1 8 Năm thành phan của Atomic Design theo Brad Frost, năm 2013 — Nguồn: Brad

Hình 1 13 Minh hoạ thành phan Atoms trong Atomic Design - Nguồn: Rohan Kamath 17

Hình 1 14 Minh hoạ về thành phần Molecules trong Atomic Design — Nguồn: Rohan

Hình 1 17 Minh hoạ về thành phan Species trong Atomic Design — Nguồn: Spotify 20

Hình 2 1 Chuỗi giá trị vận tải hàng không -2- 252 +E+S22E2E£EEEE2EEEeErErrrrerrrree 22

Hình 2 2 Tổng số hành khách thông qua vận tải hàng không theo tháng (tháng 9/2019 —

thang 10/2021) Nguôn: Cục Hàng không Việt Nam, CSI tông hợp - 24

Hình 2 3 Sản lượng hành khách hàng không theo quý (quý 1/2019 — quý 2/2023).

Nguôn: Cục Hàng không Việt Nam - ¿(S2 2219113211311 1151 1511121111911 1 1111111111 11k ky 25

Hình 2 4 Tỷ lệ hành khách được hỏi sử dụng ứng dụng hỗ trợ sân bay và ứng dụng của

các hãng hàng không năm 2022 Nguồn: Lufthansa Innovation Hub Analysis 26

Nguyễn Thị Ngọc Hà - DI9TKDPTO1 V

Trang 9

Hình 2 5 Tỷ lệ hành khách sử dụng một số ứng dụng hỗ trợ sân bay Nguồn: Lufthansa

Innovation Hub AnaÏySIS - - c1 3 112111111111111 111111111111 1111111 11111111 11 1k vn kiện 27

Hình 2 6 Ứng dụng và trang web của các sân bay Nội Bài, Đà Nẵng và Tân Sơn Nhất .27

Hình 2 7 Ảnh chụp màn hình ứng dụng Schiphol Airport — Ngu6n: Schiphol Airport 28

Hình 2 8 USP của ứng dung Schiphol Airport — Nguồn: Schiphol Airport 33

Hình 2 9 Ảnh chụp màn hình ứng dụng My HKG — Nguồn: My HKG 34

Hình 2 10 USP của ứng dụng My HKG - Nguồn: Airport Authority Hong Kong 38

Hình 2 11 Bản đồ đồng cảm của nhĩm hành khách bay thường xuyên - 41

Hình 2 12 Bản đồ đồng cảm của nhĩm hành khách bay khơng thường xuyên 41

Hinh 2 13 Chan dung người dung của ứng dụng Noi Bai Companion 42

Hình 2 14 Sơ đồ kiến trúc thơng tin của ứng dụng Noi Bai Companion 45

Hình 2 15 Quy ước luồng người dùng -2- 22 22+22E+2EEt2EEt2EECEEEEEEEEEEEEEErkrrrkrrei 46 Hình 2 16 Luồng Tìm kiếm, xem thơng tin va theo dõi chuyên bay -. - - 46

Hình 2 17 Luồng Chỉ đường làm thủ tục 2-22 ++2E£+EE+EE£2EE+EE+2EEtEE+zEErrxerrkrrreee 46 Hình 2 18 Luồng Đặt vé -¿-©2-+s 2x2 1 E122112712112712112117112111112121111121 212 reg 47 Hình 2 19 Luồng chơi game Pocket Hanoi 2- 2-2 ©£2+2EE+2EE£EE+EEtEEzEevrxerxeei 48 Hình 2 20 Gameplay của game Pocket HanOI - - -:- 62+ *+t*+tE+tE+tESEskkskeskerkrree 48 Hình 3 1 Wireframe các man hình Splash va Onboarding -+++x++x++x++ss+s 49 Hình 3 2 Wireframe các màn hình Đăng ký, đăng nhập - - ¿-5-<+++c<c++ccrssse 50 Hình 3 3 Wireframe man hình Trang chủ -¿- 5 25+ +2 *+3£+E**EESEEseEEsrrrekrrrerree 50 Hình 3 4 Wireframe các màn hình Khám phá Ha Nội : 5 5c 255 **++++ss++s+2 51 Hình 3 5 Wireframe các man hình Đặt phong ceceeceseeceeecceeeeceeeeeeeeeeceeeeeeeneeeeeens 51 Hình 3 6 Wireframe các màn hình Đặt vé - - -G 5 22 3322211112231 11 82111128111 1n 52 Hình 3 7 Wireframe màn hình Chỉ đường làm thủ tỤục ¿5+ +++*++sx++sx+eexseesss 52 Hình 3 8 Wireframe các màn hình Bản đơ -2- 22+ ©2+22++2E+2EE+2EE+2EEzEvzrrerxees 53 Hình 3 9 Wireframe các màn hình Tài khoản - - s2 23 vs rske 33 Hình 3 10 Wireframe các màn hình game Pocket Hanol + ++-+++s>++x++s+2 54 Hinh 3 11 Logo hoan thign 54

Hinh 3 12 €.r;0i 12:0 7001)(:7ã0ì 007.0 54

Hình 3 13 Logo đưới dang biểu tượng ứng dụng trên các nền tảng di động 55

Hình 3 14 Quy chuẩn 1l0g0 csscsssessssssessssssscossssecsssssessssessssnsssscsusssessssesessusssessessesseseeseess 55 Hình 3 15 Mau sắc và kiểu chữ sử dung trong l0g0 cccscsssesssessesssessesssessessessessessesses 55 Hình 3 1ĩ Khoảng cách an tồn của ÏOBO + 3 1221121151151 151111111111 11 11 11k re 56 Hình 3 17 Kích thước tối thiểu của ÌogO 22 2¿+2+2E++EE£+EEE+EEESEEtEEtrEzEerrkerkees 56 Hình 3 18 Từ trên xuống dưới: logo dương bản, logo âm bản, logo den trắng (in ấn) 56

Hình 3 19 Logo trên nền màu 2- 2 + 2S2+SE+2E££EE£EEE2EEEEEE2EEEEE127121121171122122 21x 57

Nguyễn Thị Ngọc Hà - DI9TKDPTO1 vi

Trang 10

Hình 3 20 Logo trên nền ảnh 2 5¿+2<+EE+EEÊEE2EEEEE22E19711221271121127112171 212222 e2 57

Hình 3 21 Các trường hợp sử dụng logo sai quy ổịnh - 5+ s++x+sesserssersses 58

Hình 3 22 Màu sắc sử dụng trong ứng dụng Noi Bai Companion - 2-2 5+: 59

Hình 3 23 Kiểu chữ sử dụng trong ứng dụng Noi Bai Companion - 2-5: 60

Hình 3 25 Biéu tượng sử dung trong ứng dụng Noi Bai Companion - 61

Hình 3 26 Nút bam sử dụng trong ứng dụng Noi Bai Companion 2-2 5+: 62

Hình 3 27 Chip sử dung trong ứng dụng Noi Bai CompanIon 5-55 +5s<+s52 62

Hình 3 28 Ô nhập liệu sử dụng trong ứng dụng Noi Bai Companion - 63

Hình 3 29 Nut lựa chọn sử dụng trong ứng dụng Noi Bai Companion 63

Hình 3 30 Một số thành phần Molecules sử dụng trong ứng dụng Noi Bai Companion 64

Hình 3 31 Một số thành phần Organisms sử dụng trong ứng dụng Noi Bai Companion.64

Hình 3 32 Giao diện các man hình Splash và Onboarding - ¿- 55s +ss++ss+ssss+2 65

Hình 3 33 Giao diện các màn hình Đăng ký, đăng nhập - - 5 5-5552 <++x+svcssxx 65

Hình 3 34 Giao diện man hình Trang chỦ - 6 6 6t 21 91 31 9 9 11 1 vn nưkt 66

Hình 3 35 Giao diện các man hình Khám phá Hà Nội 5552 *S2<+s£+ss++ 67

Hình 3 36 Giao diện các man hình Đặt phòng c5 5+ 3+ ++vvsesserseerssreree 68

Hình 3 37 Giao diện các màn hình Chuyến bay, - 2-2: ©2¿©+2£++2EE2EEzExezrxrrxrrei 68

Hình 3 38 Giao diện các man hình Đặt vé ((Ï) -.- -ó- 5c 2c c2 k 2k2 9g ng rưy 69

Hình 3 39 Giao diện các màn hình Đặt Vé (2) 2t 21 9 312 921181111 krrree 70

Hình 3 40 Giao diện các màn hình Đặt vé (3) - c2 22 121112112 1121151151111 xxy 70

Hình 3 41 Giao diện các màn hình Chỉ đường làm thủ tục - - 555-555 ++++<x>++s+ 71

Hình 3 42 Giao điện các màn hình Bản đồ 2-2 2 keE‡EE+EEEEEEE+EEEEEEEEEEEEEkerkrkea 72

Hình 3 43 Giao diện màn hình Liên hệ hỗ trỢ ¿+ - + EE+E+E£E£E£EEEEEE+EereEerrervee 72

Hình 3 44 Giao diện các màn hình Tài khoản 5 2522222213 * +2 E+++eeeEeeeszeexs 73

Hình 3 45 Giao diện các man hình game Pocket Hano1 -.- 5 5 55 2e *+s£+e+e+esx 73

Hình 3 46 Giao diện Trang chủ của game Pocket Hanol s5 + ++s*++*scx+s+ 74

Hình 3 47 Giao diện Ban đồ của game Pocket Hanoi - 22 2 52+ z+£E+zx+£x+£zzzxez 74

Hình 3 48 Giao diện Man chơi và Hoàn thành của game Pocket Hanol - 75

Hình 3 49 Giao diện Thông tin chỉ tiết địa điểm của game Pocket Hanoi 75

Nguyễn Thị Ngọc Hà - DI9TKDPTO1 vil

Trang 11

Đồ án Tốt nghiệp Đại học Lời mở đầu

LOI MO ĐẦU

1 Ly do chon dé tai

Sân bay thông minh hay Sân bay 4.0 (Airport 4.0), nơi hệ thống sân bay được

số hoá và tích hợp hoàn toàn vào hệ sinh thai sân bay, là sân bay tận dụng tối đa lợi thế

của các công nghệ mới nổi như Internet vạn vật (IOT), dữ liệu lớn hay ứng dụng di

động để sử dụng cơ sở hạ tầng thông minh hơn và cải thiện trải nghiệm của khách

hàng Mục tiêu của sân bay thông minh là hiện đại hoá, thu hút sử dụng, tăng hiệu quả

vận hành và nâng cao trải nghiệm Việc sử dụng điện thoại di động và các thiết bị số

khác ngày nay cũng đang thúc đầy sự phát triển của các sân bay thông minh Theo báo

cáo “The Future is Connected” của SITA — công ty công nghệ đa quốc gia chuyên

cung cấp dịch vụ cho ngành vận tải hàng không có trụ sở tại Thuy Sỹ — 83% hành

khách mang theo điện thoại thông minh khi di chuyên băng đường hàng không Cảng

hàng không quốc tế Nội Bài, một trong những cảng hàng không quan trọng nhất tại

Việt Nam nằm tại thủ đô Hà Nội, không ngoại lệ trong việc tận dụng tiềm năng của

ứng dung di động dé cung cấp trải nghiệm tốt nhất cho hành khách

Ung dung nay sẽ không chỉ đáp ứng nhu cầu cơ bản của người ding như theodõi thông tin chuyến bay, đặt vé hay làm thủ tục, mà còn giới thiệu về Hà Nội với

hành khách Với vai trò là thủ đô của Việt Nam, Hà Nội có một lịch sử văn hóa lâu đời

và nhiều địa điểm du lịch nỗi tiếng Ứng dụng sẽ cung cấp thông tin chỉ tiết và hình

anh hap dẫn về các địa điểm du lịch, nhà hàng, khách sạn và các sự kiện văn hóa diễn

ra trong thành phố, giúp hành khách có được cái nhìn toàn cảnh hơn về Hà Nội

Tuy nhiên, trong quá trình xây dựng ứng dụng, một thách thức quan trọng là

làm thế nào để duy trì tính nhất quán về thiết kế giao điện người dùng trên các nền

tang khác nhau trong quá trình phát triển dai hạn Dé giải quyết bài toán này, sử dụng

hệ thống quy chuẩn về giao diện Design System là một trong những giải pháp hữu

hiệu nhất Design System bao gồm tập hợp các quy định, chi dẫn về các yêu tố đồ họa:

màu sắc, hình dáng, kiểu chữ liên quan tới giao điện của sản phẩm Mục dich dang

sau là củng cố sự nhất quán và linh hoạt trong thiết kế

Trong đó, phương pháp Atomic Design giúp ta tạo ra hệ thống thiết kế DesignSystem một cách tối ưu nhất Đây là một phương pháp mà người thiết kế sẽ ưu tiên

thực hiện thiết kế các thành phần riêng lẻ, độc lập, có thê tái sử dụng và kết hợp chúng

lại với nhau, thay vì thiết kế tong thé Viéc ap dung Atomic Design tao su đồng nhất

và linh hoạt trong thiết kế, đồng thời giảm thiểu thời gian và công sức trong quá trình

phát triển ứng dụng Nhờ vào việc phân tách giao diện thành những phần tử cơ bản

như atoms, molecules hay organisms, Atomic Design giúp tao ra một hệ thống giao

diện hiệu quả, dễ dàng quản lý và mở rộng trong tương lai.

Căn cứ vào những lý do trên, tác giả đã chọn dé tài “Nghiên cứu về Atomic

Design và áp dụng vào thiết kế giao diện ứng dụng “Noi Bai Companion” của cảng

hàng không quốc tế Nội Bài” Đề tài này không chỉ có ý nghĩa trong việc đáp ứng nhu

Trang 12

cầu ngày càng cao của người dùng, mà thông qua việc giới thiệu về Hà Nội, ứng dụng

sẽ góp phần tạo nên một trải nghiệm đáng nhớ và tạo dựng hình ảnh tích cực về cảng

hàng không quốc tế Nội Bài cũng như thủ đô Hà Nội trong tâm trí của du khách

2 Mục đích và nhiệm vụ nghiên cứu

- Nam được cơ sở lý thuyết về Atomic Design

- _ Trên cơ sở đó biết cách áp dụng vào dự án cụ thé là thiết kế giao diện ứng dung

di động Noi Bai Companion.

2.2 Nhiệm vu nghiên cứu

- Nghiên ctu về khái niệm Atomic Design, những lợi ích, tầm quan trọng, các

thành phần cấu tạo của phương pháp

- Tw những điều đã nghiên cứu đưa ra giải pháp và triển khai thiết kế giao diện

cho ứng dụng di động Noi Bai Companion.

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

- _ Đối tượng nghiên cứu: Phương pháp Atomic Design

- Pham vi nghiên cứu: Sử dụng phương pháp Atomic Design để xây dựng hệ

thống quy chuẩn về giao điện Design System Từ đó áp dụng vào thiết kế giaodiện ứng dụng di động Noi Bai Companion dành cho đối tượng hành khách

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

Đồ án sử dụng chủ yếu các phương pháp phân tích và tổng hợp lý thuyết,

nghiên cứu tai liệu tham khảo, khảo sát và phỏng vấn người dùng, từ đó mang lại

những đánh giá chính xác nhất cho đề tài

Thông tin chủ yếu được thu thập từ các tài liệu liên quan đến lĩnh vực từ cácsách, bài báo, bài nghiên cứu và các chia sẻ của chuyên gia trong lĩnh vực thiết kế trải

nghiệm người dùng và thiết kế giao điện người dùng

5 Tình hình nghiên cứu

Dưới đây là một số tài liệu tiêu biểu mà tác giả tổng hợp được Các tài liệu này

là nền tảng quan trọng và cốt yếu để tác giả thực hiện nghiên cứu và phân tích phục vụ

cho đề tài này

5.1 Tinh hình nghiên cứu trên thế giới

Năm 2013, Brad Frost, một nhà thiết kế website, đã xuất bản cuốn sách

“Atomic Design” dựa trên những kinh nghiệm tích lũy trong quá trình làm việc cua

mình Trong cuốn sách này, ông nhấn mạnh tầm quan trọng của việc xây dựng một hệ

Trang 13

thống quy chuẩn về giao diện Design System có cấu trúc và cụ thể hơn là chỉ tạo ra các

màn hình giao diện độc lập.

Theo Brad Frost, việc xây dựng một Design System chin chu là diéu can thiét

Ong nhận thay rằng việc tach giao diện thành các thành phan nhỏ hơn và xây dựng

chúng theo một quy trình có cấu trúc sẽ đem lại nhiều lợi ích Thay vì chỉ tập trung

vào thiết kế từng màn hình riêng lẻ, ông khuyến khích việc tạo ra một hệ thống các

thành phan có thê tái sử dụng và kết hợp với nhau dé tạo ra giao diện hoàn chỉnh Bang

cách áp dụng Atomic Design, người thiết kế có thê tập trung vào việc xây dựng và

phát triển các thành phần cụ thể, từ các nguyên tử nhỏ nhất cho đến các môđun va

trang giao diện, tạo nên một hệ thống thiết kế sắp xếp một cách có cấu trúc và hợp lý.

“Atomic Design” trình bày chi tiết tất cả những gi liên quan đến việc tao ra và

duy trì các hệ thống thiết kế một cách ồn định, cho phép chúng ta triển khai giao diện

người dùng chất lượng cao hơn, nhất quán nhanh hơn bao giờ hết Cuốn sách giới

thiệu phương pháp xem giao diện người dùng như một hệ thống phân cấp chỉ tiết, thảo

luận về chức năng của thư viện mẫu hiệu quả và giới thiệu các kỹ thuật dé chuyền đổi

quy trình thiết kế và phát triển

Trong suốt một thập kỷ biến đổi không ngừng nghỉ, Atomic Design luôn đượccác chuyên gia hàng đầu trong lĩnh vực nghiên cứu mở rộng và cải thiện Điển hình có

thé ké đến Chris Cid với bài viết “Atomic Design for Design Systems” năm 2019, hay

gần đây nhất là tác giả Darren Yeo với các bài viết “Atomic design 2022: what we can

learn from Eames and other design gianís” năm 2022 và “Adding Motion to the next

decade of Atomic Design” nam 2023.

Ngoài những nghiên cứu nỗi bật trên còn nhiều các bài viết được chia sẻ trên

các blog hay các trang web, nội dung chủ yếu là đưa ra khái niệm về Atomic Design

cũng như tóm tắt các thành phần cấu tạo nên phương pháp này

5.2 Tình hình nghiên cứu trong nước

Hiện nay ở Việt Nam, đã có những bài nghiên cứu khoa học về Atomic Design,tuy nhiên chưa được phổ biến rộng rãi Phần lớn là các bài viết chia sẻ từ các chuyên

gia trong ngành hoặc được dich lại trên các blog, trang web.

Tiêu biểu chúng ta có thé kê đến bài viết “Design System — Bỏ cuộc hay tự thay đổi dé thích nghi?” được đăng trên blog của Got It Vietnam năm 2020 nói về các van

đề mà nhóm thiết kế của Got It gặp phải trong quá trình phát triển sản phẩm Bài viết

nói đến sự cần thiết của Design System, chỉ ra ba van dé mau chốt mà công ty gặp phải

là lãng phí nhân lực do chưa có quy trình thiết kế tối ưu, thử thách về chat lượng - tiễn

độ và sự thiếu nhất quán dẫn đến lang phí thời gian, chi phí Cuối cùng, Got It đề cập

đến cách họ giải quyết van đề bằng cách sử dụng phương pháp Atomic Design dé tổ

chức và xây dựng Design System.

Năm 2021, VinID đã đăng bài viết mang tựa đề “Nghìn lẻ (ngày) một câuchuyện: VinID Design system”, tường thuật về quá trình khó khăn trong việc xây dung

Trang 14

Design System của công ty và đề cập đến những tiêu chí quan trọng để thành công

trong việc xây dựng một Design System, cũng như những lưu ý quan trọng trong quá

trình này.

Hai bài viết trên không chỉ tường thuật về những khó khăn và thử thách trongquá trình xây dựng Design System và ngôn ngữ thiết kế, mà còn nhân mạnh vai trò

quan trọng của việc có một hệ thống quy chuẩn về giao diện trong một công ty Chúng

cung cấp những gợi ý và tiêu chí để xây dựng một Design System thành công, đồng

thời đề cao sự quan trọng của việc đảm bảo tính nhất quán và tương thích giữa các

thành phần giao diện Từ những kinh nghiệm thu thập được trong quá trình xây dựng,

các bài viết cũng rút ra những lưu ý và kết luận quan trọng dé áp dụng trong quá trình

phát triển hệ thống quy chuẩn giao diện của một tô chức

6 — Kết cấu đề tài

Ngoài lời Mở đầu, Tổng kết, Danh mục tài liệu tham khảo, Phụ lục, đồ án đượckết cấu thành ba chương:

- _ Chương 1: Tổng quan về Atomic Design trong thiết kế giao diện ứng dụng di động

- _ Chương 2: Tổng quan về ứng dụng Noi Bai Companion

- Chương 3: Áp dụng Atomic Design vào thiết kế giao diện ứng dụng Noi Bai

Companion

Do những thiếu sót về kiến thức và trải nghiệm thực tế nên đồ án tốt nghiệp

không tránh được những sai sót, mong thay, cô sẽ thông cảm và có những góp ý giúp

tác giả hoàn thành đồ án tốt nhất Tác giả xin chân thành cảm ơn!

Trang 15

Đồ án Tốt nghiệp Đại học Chương |

CHƯƠNG I: TONG QUAN VE ATOMIC DESIGN TRONG

THIET KE GIAO DIEN UNG DUNG DI DONG

Trong chương 1, tác giả sẽ dé cập đến các thông tin cơ ban nhất về tong quan

thiệt kê giao diện ứng dung di động, tông quan hệ thông quy chuân vê giao diện

Design System và phương pháp Atomic Design.

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

1.1.1 Tổng quan về ứng dụng di động

a Khai niệm ứng dung di động

Theo cuốn “Thiét kế ứng dung trên dau cuối di động” của tac giả Bùi Thị Thu

Huê, ứng dung di động được hiệu là một chương trình máy tính được thiệt kê đê chạy

trên điện thoại thông minh, máy tinh bảng và các thiệt bi di động khác [1]

Hình 1 1 Minh hoạ về ứng dụng trên thiết bị di động iPhone — Nguon: Thomson Reuters

Thiết bị di động được xuất hiện vào năm 2008 khi Apple ở kho ứng dụng App

Store Các ứng dụng di động đều được thông qua các nền tảng phân phối ứng dụng va

thường được điều hành bởi các chủ sở hữu của hệ thống chăng hạn như Apple App

Store, Google Play Store, Windows Phone Store, và BackBerry App World Một số

ứng dụng là miễn phí, và có những ứng dụng phải mat phi tải về

Ban dau, ứng dụng di động được phát triển với mục đích cung cấp thông tin

tổng quát và các dịch vụ thông dụng trên nền tảng toàn cầu, bao gồm email, lịch, danh

bạ và thông tin thời tiết Tuy nhiên, với sự phát triển mạnh mẽ của công nghệ, nhu cầu

của người dùng thiết bị di động đã mở rộng ra nhiều lĩnh vực khác, có thê kế đến như

trò chơi di động, giải trí, các ứng dụng tài chính hay y tẾ, giáo dục Sự bùng nô về số

lượng và sự đa dạng của các ứng dụng đã tạo ra một tiềm năng và thị trường rộng lớn

Nguyễn Thi Ngọc Hà — DI9TKDPT01 5

Trang 16

Web App Native App Hybrid App

Hình 1 2 Phân loại ứng dụng di động - Nguồn: Tini App

Native app

Native app là những ứng dung được phát triển và tối ưu hóa cho một nền tang

cụ thể, ví dụ như iOS hay Android Chúng được cài đặt trực tiếp lên thiết bị di động và

có khả năng tương tác và truy cập vào các chức năng của thiết bị (máy ảnh, cảm biến,

bộ nhớ trong ) một cách toàn diện.

Native app được tải về thông qua các cửa hàng ứng dụng như Google PlayStore hay Apple App Store Mỗi hệ điều hành có ngôn ngữ riêng để lập trình ứng

dụng Vi dụ, dé xây dựng ứng dụng trên iOS, Objective C và Swift là 2 lựa chọn ly

tưởng: còn đối với Android thì Java, Python va Kotlin là những công cụ phổ biến

Native app có ưu điểm là hiệu suất nhanh và bảo mật tốt hơn so với các loạiứng dụng di động khác Loại ứng dụng này có thé can thiệp sâu vào phần cứng Tuy

nhiên, để ứng dụng có thể chạy trên các nền tảng khác nhau đòi hỏi phải xây dựng

codebase riêng cho mỗi nền tảng Điều đó sẽ dẫn đến việc gia tăng đáng kể thời gian,

nguồn nhân lực, và chi phí cho việc phát triển, bảo trì và nâng cấp native app Ngoài

ra, người dùng cũng thường xuyên phải cập nhật những ứng dụng này.

Web app

Web app là những ứng dụng được truy cập thông qua trình duyệt web trên thiết

bi di động Chúng được xây dựng bằng các ngôn ngữ web phố biến như HTML, CSS

và JavaScript Web app có thé được truy cập từ bat kỳ thiết bi di động nào có kết nối

internet và không yêu cầu cài đặt Web app có thé chạy trên nhiều nền tảng khác nhau

miễn là trình duyệt có hỗ trợ Do đó, chỉ cần một codebase cho tất cả nền tảng; tiết

Trang 17

kiệm thời gian va chi phí cho việc phát triển, bảo trì và nâng cấp Người ding luôn

được truy cập phiên bản mới nhất của ứng dụng Web app có nhược điểm là tốc độ

phụ thuộc nhiều vào kết nối Internet và lượng người truy cập, cũng như không thé khai

thác đầy đủ khả năng và trải nghiệm của một nên tảng.

NHybrid app

Hybrid app là sự kết hợp những ưu điểm của native app và web app Nó được

cài đặt giống một native app nhưng lại có cơ chế hoạt động tương tự một web app.

Công nghệ phô biến dùng đề phát triển hybrid app này phải kế đến HTML, CSS, va

các loại hybrid framework của JavaScript (React Native, AngularJS, Flutter).

Hybrid app truy cập các chức năng của thiết bi qua một lớp trừu tượng

web-to-native Điều này cho phép những ứng dụng này có thê chạy trên nhiều nền tảng khác

nhau và có khả năng tương tác với các chức năng của thiết bị Tùy thuộc vào

framework sử dụng ma Hybrid app có thé được phát triển cho từng nên tảng cụ thé,

trong khi vẫn giữ được những đoạn code cơ bản tương tác được đa nền tảng

Codebase của hybrid app được viết một lần và có thê triển khai trên tất cả nền

tang Vi thé, thời gian phát triển ngắn và chi phí phát triển thấp so với native app

Hybrid app còn có khả năng hoạt động dù có kết nối Internet hay không Tuy nhiên,

tốc độ của hybrid app chậm hơn so với native app và khó khai thác hết khả năng và

trải nghiệm của một nền tảng

1.1.2 Thiết kế giao diện ứng dụng di động

Thiết kế giao điện ứng dụng di động là quá trình mà người thiết kế sử dụng

phần mềm và thiết bị máy tính dé xay dung giao dién cac man hinh dién thoai, tap

trung vào góc độ hình ảnh và phong cách Giao diện mà người thiết kế tạo ra phải đảm

bao dé sử dụng và mang lại cảm giác dé chịu cho người dùng cuối [2]

Lĩnh vụ thiết kế ứng dụng đòi hỏi thiết kế phức tạp và khác biệt so với ứng

dụng phần mềm máy tính trước đây Sự khác biệt lớn nhất đó là thói quen người dùng

di động Trong thực tế, khi làm việc với máy tính để bàn, người dùng mất một khoảng

thời gian lớn, và thường làm việc tại văn phòng, ở nhà, ở quán cà phê Còn đối với

người dùng điện thoại di động, thời gian tập trung vào màn hình là 17 phút đến 39

phút Họ sử dụng lúc trò chuyên, đi lại hoặc chờ đợi Do đó việc thiết kế ứng dụng di

động đòi hỏi gắn với thói quen người dùng, đặc điểm thiết bị và môi trường sử dụng

Thông tin phản hồi cho người dùng đóng vai trò quan trọng Người dùng diđộng phải hành động, thao tác ít hơn so với người dùng máy tính bàn Do vậy cần

nghiên cứu những gì quan trọng đối với người dùng di động Người thiết kế đi động

cần tìm hiểu nhu cầu của người dùng hơn là những gì họ nghĩ người dùng muốn

Không giống như làm việc trên máy tính, xây dựng một ứng dụng di động đòi hỏi

người thiết kế hiểu được thói quen người dùng, người thiết kế giao diện và phát triển

ứng dụng phải tích hợp ngay từ đầu dự án Chi cần thay đổi một nút bam trên giao diện

Trang 18

sử dụng cũng có thê thay đổi khả năng tương tác của ứng dụng Nếu người thiết kế

tương tác muốn thay đổi tương trac trên màn hình, họ phải làm việc với người thiết kế

giao diện và phát triển ứng dung [1]

1.1.3 Thiết kế lấy người dùng làm trung tâm

Trong quá trình thiết kế một sản phẩm mới, nhu cầu của người dùng không thé

bị lãng quên Chúng ta thường mắc phải van dé đó là không đặt họ vào trung tâm của

mọi quyết định Thay vì tập trung vào góc nhìn và ý tưởng cá nhân hoặc những giả

định từ doanh nghiệp, chúng ta cần nhìn từ góc nhìn của người dùng Điều này đảm

bao rằng sản phâm cuối cùng sẽ đáp ứng và làm hai lòng khách hàng — người dùng

Dé giải quyết van dé này, tác giả tiếp cận phương pháp "Thiết kế lấy người

dùng làm trung tâm" như một nền tảng nghiên cứu trong quá trình xây dựng sản phẩm

Phương pháp này đặt người dùng làm trung tâm và tập trung vào hiểu rõ nhu cau,

mong đợi và hành vi của họ Bằng cách tạo ra các trải nghiệm dựa trên sự gắn kết

người dùng, chúng ta có thể xây dựng sản phẩm có giá trị thực sự và mang lại sự hài

lòng cho người dùng.

a Khái niệm thiết kế lấy người dùng làm trung tâm

Thiết kế lay người dùng làm trung tâm (User Centered Design — UCD) là thuật

ngữ được Don Norman lần đầu nhắc đến khi ông còn làm việc tại Dai học California

Thuật ngữ này sau đó trở nên nồi tiếng hơn nhờ hai cuốn sách của ông đó là: “User

Centered System Design” (1986) và “The Design of Everyday Things” (1988).

Thiết kế lấy người dùng làm trung tâm là quy trình tong hợp một chuỗi cácphương pháp nghiên cứu, phân tích, thống kê, lập kế hoạch, đánh giá dữ liệu để phác

thảo lên một mô hình thiết kế, tập trung vào các van đề trong tâm của người dùng mục

tiêu [3]

Hình 1 3 Donald Arthur Norman — cha đẻ của thuật ngữ UCD — Nguồn: LinkedIn

Theo Interaction Design Foundation định nghĩa: “Thiết kế lay người dùng làmtrung tâm (UCD) là một quá trình thiết kế lặp đi lặp lại trong đó các người thiết kế và

Nguyễn Thi Ngọc Hà — DI9TKDPT01 §

Trang 19

các bên liên quan khác 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ế UCD kêu gọi sự tham gia của 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ế để tạo ra các sản phâm

có khả năng sử dụng cao và dé tiếp cận cho họ.” [4]

b Quy trình thiết kế lấy người dùng làm trung tâm

Phương pháp thiết kế lay người dùng làm trung tâm bao gồm 4 giai đoạn: Hiểubối cảnh sử dụng (Understand context of use), xác định yêu cầu (Specifer user

requirements), thiết kế giải pháp (Design Solutions) và đánh giá sản pham (Evaluate

against requirements).

Evaluate

against requirements

Understand Specify user Design

Hình 1 4 Quy trình thiết kế lấy người dùng làm trung tâm — Nguon: Interaction Design

Foundation

Giai đoạn 1: Hiểu bối cảnh sw dung (Understand context of use)

Ở giai đoạn này, người thiết kế cần phải xác định được những người dùng nao

sẽ sử dụng sản phâm, họ sẽ sử dụng sản phâm dé làm gi và trong những điêu kiện nào

họ sẽ sử dụng sản phâm đó.

Giai đoạn 2: Xác định yêu cau (Specify requirements)

Đây là giai đoạn người thiết kế phải xác định tất cả những yêu cầu liên quan

đên sản phâm như lợi nhuận hoặc những mục tiêu người dùng phải được đáp ứng đê

sản phâm thành công.

Giai đoạn 3: Thiết kế giải pháp (Design Solutions)Giai đoạn này có thé được thực hiện theo từng giai đoạn, xây dựng từ ý tưởng

sơ bộ đên thiệt kê hoàn chỉnh.

Giai đoạn 4: Đánh giá sản phẩm (Evaluate against requirements)

Ở giai đoạn cuối cùng, kiểm tra khả năng sử dụng của sản phẩm với người dùng

cuôi đê đánh giá, sau đó triên khai phản hôi và lặp lại quy trình.

Nhìn chung, UCD là một quá trình thiết kế lặp đi lặp lại tập trung vào việc tăng

trải nghiệm người dùng của một sản phâm Trong môi giai đoạn của dự án, người thiệt

Trang 20

kế trải nghiệm người dùng luôn hướng đến việc đáp ứng nhu cầu của người dùng và

làm cho khả năng tiêp cận của sản phâm càng đơn giản càng tôt.

1.2 Tổng quan về Atomic Design trong thiết kế giao diện ứng dung di động

1.2.1 Hệ thống quy chuẩn về giao diện Design System

a Khái niệm Design System

Hệ thống quy chuẩn về giao diện Design System là hệ thống các quy chuẩn

dùng đê quản lý thiệt kê theo quy mô lớn băng cách giảm thiêu sự trùng lặp đông thời

thiệt lập một ngôn ngữ chung va nhat quán vê mặt hình ảnh trên các trang và kênh

khác nhau [5]

Hình 1 5 Design System của Google — Nguôn: Material Design

Khi sử dung Design System, người thiết kế sử dung các yếu tố trong thư việnthiết kế để kết hợp và tạo nên sản phẩm cuối Design System có tính chuyên biệt về sử

dụng, nó phụ thuộc vào từng doanh nghiệp khác nhau, độ lớn của dự án và yêu cầu đặc

thù của đội, phòng ban [6]

b Thành phần của Design System

Mỗi Design System khác nhau có thể có nhiều thành phần khác nhau Tuy

nhiên, chúng thường bao gồm các phần cơ bản là: Style guide, component library và

Trang 21

diễn đạt); các tiêu chuân thiết kế trực quan (visual design) và thiết kế tương tác

(interaction design) hay còn được gọi là front-end style guide.

Component library

Component library hay còn được gọi là design library là nơi thường được su

dụng nhiều nhất trong design system

Thư viện này chứa các thành phần thiết kế đã được định nghĩa sẵn, có thé tái sửdụng Đây là nơi dé designer và developer tìm hiểu và triên khai các thành phan cụ thể

của UI Đề tạo ra thư viện này cần nhiều thời gian và nguồn lực

Pattern library

Pattern library cung cấp cấu trúc nội dung, layout, template dé chúng ta có thétái sử dụng và điều chỉnh theo từng trường hợp cụ thê

Khác biệt giữa pattern library và component library đó là component library

định nghĩa từng thành phần riêng lẻ của thiết kế; pattern library định nghĩa cách phối

hợp các thành phan riêng lẻ

Lợi ích khi sử dụng Design System

Thiết kế nhanh chóng trên quy mô lớnTrong quá trình xây dựng sản phẩm, chúng ta sẽ cần đưa ra nhiều phương ánthiết kế khác nhau, phát triển tiếp từ những phương án thiết kế đã có Design System

giúp người thiết kế tạo ra và nhân rộng các bản thiết kế nhanh chóng bằng cách tái sử

dụng các thành phan thiết kế đã được tạo sẵn, giảm thiêu nhu cầu tạo lại những cái đã

có Nhờ đó giảm bớt sự không thống nhất trong thiết kế có thể gây ra nhiều rủi ro

ngoài ý muốn

Tập trung vào các van dé lớn và phức tạp hon

Khi các thành phan cơ bản đã được tạo san và có thé tai sử dụng, người thiết kế

sẽ giảm bớt được áp lực công việc vì không còn phải bận tâm nhiều về kiểu dáng, hình

thức của các thành phần này nữa Nhờ vậy người thiết kế có thể tập trung giải quyết

các vấn đề lớn và phức tạp hơn, ví dụ như phân cấp thông tin, tối ưu luồng hoạt động

của người dùng.

Diễn đạt thông nhất trong giao tiếpDesign System tạo nên cách diễn đạt thống nhất giúp tránh lãng phí thời gian vàcông sức do những hiểu nhằm không dang có trong giao tiếp gây ra Đặc biệt khi có sự

thay đôi về nhân sự trong nhóm thiết kế hoặc khi các nhóm phải làm việc từ xa, không

ở cùng một chỗ với nhau.

Tính nhất quán giữa các sản phẩmTrong các dự án khác nhau, khi các nhóm thiết kế làm việc độc lập, thường xảy

ra tình trạng mỗi nhóm phát triển sản phẩm của mình mà không có sự đồng nhất với

nhóm khác Điều này có thê dẫn đến sự thiếu nhất quán trong giao diện và trải nghiệm

Nguyễn Thị Ngọc Hà - DI9TKDPT01 11

Trang 22

của sản pham Dé giải quyết van đề này, Design System sẽ cung cấp một nguồn chung

duy nhất cho các thành phần, giúp tránh được sự không nhất quán trong giao diện và

trải nghiệm của sản phẩm, từ đó tạo một hệ thống đồng nhất, thuộc về cùng một

thương hiệu.

Trở thành công cụ và tài liệu tập huấn cho người mới

Trong giai đoạn phát triển sản phẩm, thường các nhóm sẽ có thêm thành viênmới gia nhập Design System sẽ giúp họ đễ dàng tập trung vào các thành phần được

giao nhiệm vụ, không bị mat tập trung trong rất nhiều tang phát triển của sản phẩm đó

Nắm bắt nhanh được toàn bộ cấu trúc sản phẩm từ giai đoạn đầu cho đến giai đoạn

hiện tại.

1.2.2 Phương pháp Atomic Design

Khi quy mô của một dự án mở rộng, việc bảo toàn tính đồng bộ của sản phẩm

trong dự án trở nên khó khăn và tốn nhiều thời gian Điều này dẫn đến sự phân tán và

khó khăn trong việc quan lý và xây dựng sản phẩm Dé dam bảo tính đồng bộ trong

sản phẩm, đồng thời tối ưu thời gian và công sức, người thiết kế cần thường xuyên sử

dụng Design System bởi tính kế thừa và tái sử dụng của các thành phần thiết kế Các

phương pháp tạo dựng Design System cũng vì thế mà được đúc rút, cập nhật trong quá

trình thử nghiệm, làm việc.

Atomic Design là một trong những phương pháp tối ưu dé xây dựng Design

System, trong đó người thiết kế sẽ ưu tiên thực hiện thiết kế các thành phần riêng lẻ và

kết hợp chúng lại với nhau, thay vì thiết kế cả trang

Trong phạm vi đề tài, tác giả tập trung nghiên cứu phương pháp Atomic Design

Phần tiếp theo, tác giả sẽ phân tích và làm rõ phương pháp này

a Nguồn gốc và khái niệm Atomic Design

Năm 2013, nhà thiết kế web Brad Frost đã phát hành cuốn sách “Atomic

Design” Cuén sách dựa trên những gì ông rút ra được trong quá trình làm việc của

minh Brad Frost cho rang cần thiết phải xây dựng Design System chin chu, thay vì chi

tạo ra những màn hình khi thiết kế giao diện Trong quá trình tìm kiếm thứ có sự tương

đồng dé minh họa va đặt tên cho phương pháp luận của mình, Brad Frost đã lựa chọn

hoá học [7]

Trang 23

Atomic Design

Hình 1 6 Cuốn sách “Atomic Design” (2013) của tác gia Brad Frost — Nguon: Brad Frost

Oxi và hidro là các nguyên tử có tính chat độc lập nhưng khi kết hop lại với

nhau, chúng tạo ra phân tử nước có các đặc điểm riêng Điều này ngụ ý rằng, giao diện

cũng được cấu tạo từ những thành phần nhỏ nhất, và đó là cách chúng ta sẽ bắt đầu

thiết kế

2H)+0)— 2H,0

Hình 1 7 Vi dụ về phương trình hoá hoc cho thấy các nguyên tứ hidro và oxi kết hợp với

nhau tạo thành phân tử nước — Nguồn: Brad Frost

Bằng cách áp dụng nguyên lý của việc kết hợp các nguyên tử thành một vật thêlớn, phương pháp Atomic Design không chỉ cung cấp phương pháp dé tạo ra các bản

thiết kế, mà còn cung cấp giải pháp dé tạo ra các thành phần giao diện nhỏ, có kha

năng kết hợp và tái sử dụng dưới dạng thư viện đồ họa trong hệ thống quy chuẩn về

giao diện Design System.

Như vậy, Atomic Design là một phương pháp ưu tiên việc tạo ra các thành phầnriêng lẻ và sau đó kết hợp chúng với nhau, thay vì thiết kế toàn bộ trang web hoặc ứng

dụng trong một lần Phương pháp này tập trung vào các đối tượng nhỏ, có tính độc lập

và có khả năng tái sử dụng, nhằm tạo ra một hệ thống thiết kế giao diện hiệu quả khi

kết hợp chúng lại thành một tổng thể

Trang 24

Việc chia nhỏ thiết kế thành các thành phần nhỏ hơn giúp đảm bảo tính nhấtquán và khả năng tái sử dụng Bằng cách xây dựng và quản lý các thành phần độc lập,

chúng có thé được sử dụng lại ở nhiều vị trí khác nhau trong giao diện, tạo ra sự linh

hoạt và hiệu quả trong việc phát triển và bảo trì sản phẩm

b Thành phan của Atomic Design

Năm 2013, với việc lấy cảm hứng từ các nguyên tử, Brad Frost đã tạo lên một

mô hình giải pháp tối ưu cho việc thiết kế dựa trên sự kết hợp từ 5 thành phần với 3

thành phần đầu tiên được môđun hóa theo thế giới hoá học Mỗi thành phần được xây

dựng dựa trên các thành phan trước đó

i Pe `

(@X©X®Xe®) fe a8

COOKE) » |

(@X®X®X©) : as

ATOMS MOLECULES ORGANISMS TEMPLATES PAGES

Hình 1 8 Nam thành phan của Atomic Design theo Brad Frost, năm 2013 — Nguon: Brad

Frost

Năm 2019, Chris Cid, một người chuyên xây dung Design System đã có một

bài viết chia sẻ về những khó khăn trong lúc quá trình phát triển Design System băng

phương pháp Atomic Design của Brad Frost Ong cho răng, khi một dự án có quy mô

rất lớn, Atomic Design phải cung cấp một giải pháp tối ưu hơn nữa, phải luôn đơn giản

hóa nhất có thé [8] Quan trọng hơn là chúng phải luôn hỗ trợ hiệu quả việc điều chỉnh,

tạo sự nhất quán bởi hệ thống thiết kế của chúng ta có rất nhiều biến thé Đó chính là

động lực lớn nhất đề Chris Cid giới thiệu lần đầu tiên với chúng ta thành phan “Ions”

Tons là thành phần nhỏ nhất, không thé “phân rã” nhỏ hon được nữa [9]

Sau 6 năm từ khi Atomic Design được giới thiệu lần đầu, vào năm 2019, BradFrost đã tiến xa hơn và mở rộng phương pháp này bằng cách thêm thành phần lons

(hay còn gọi là Design Tokens) [10]

Trang 25

Hình 1 9 Atomic Design mở rộng thêm thành phan Ions (hay Design Tokens), năm 2019 —

Nguồn: Brad Frost

Năm 2022 được coi là một năm đáng chú ý trong lĩnh vực thiết kế trải nghiệmngười dùng, với sự bùng nổ của các hệ thống thiết kế Design System Trong thời điểm

nay, chúng ta đã không còn xa lạ với khái niệm về Design System, và điều cần thiết là

nâng cấp và hoàn thiện nó dé đáp ứng đủ yêu cầu của từng sản phẩm cụ thé Trong quá

trình này, phương pháp thiết kế nguyên tử Atomic Design cũng phải tiến xa hơn dé

đáp ứng các yêu cầu mới

Darren Yeo, người đứng đầu nhóm thiết kế sản phẩm tại một công ty ởSingapore, đã đưa ra một mô hình Atomic Design hoàn chỉnh nhất từ trước đến nay

Ông nhận thấy rằng hai thành phần cuối cùng trong mô hình này không được đặt tên

theo cách thức liên quan đến hóa học như các thành phần trước đó Đồng thời, ông

nhận thấy rang hai thành phan này có thé được kết hợp lại thành một do chúng không

có sự khác biệt quá lớn, và điều này đôi khi gây ra sự mơ hồ trong việc sử dụng và

hiểu rõ chúng Vì vậy, Darren Yeo đã kế thừa những kiến thức, những chia sẻ từ

những bậc tiền bối đi trước và thêm vào những cái nhìn mới mẻ của minh trong thé

giới sinh học Theo Darren Yeo, phương pháp thiết kế nguyên tử Atomic Design được

cau thành từ sáu thành phan: Ions, atoms, molecules, organisms, complex organisms

va species [11]

BOSCOC®

IONS ATOMS MOLECULES ORGANISMS nee ee SPECIES

Design Components Patterns Mardutesi Templates? Productstokens Features Pages

Library System

Nguyễn Thi Ngọc Ha - DI9TKDPT01 15

Trang 26

Hình 1 10 Sáu thành phan của Atomic Design theo Darren Yeo, năm 2022 — Nguồn: Darren

Yeo

Sau một thập ky không ngừng phat triển, Atomic Design đã đạt được một sự

tiến bộ đáng kể Vào năm 2023, Darren Yeo tiếp tục mở rộng phương pháp nay bằng

cách đưa thêm yếu tố chuyên động vào trong Atomic Design Ông nhận thấy rằng,

chuyền động tồn tại khắp mọi nơi trong thế giới xung quanh chúng ta Nguyên tử rung

động, và ngay cả trong sự yên lặng, cả hành tinh và con người cũng không ngừng

chuyền động

ĐỀ tạo ra một trải nghiệm người dùng động, Darren Yeo đề xuất mở rộngAtomie Design và thiết kế Design System bằng cách tích hợp chuyên động Ông nhận

thấy rằng chuyên động có thê làm nồi bật và tạo sự sống động cho các yếu tố thiết kế

Bằng cách sử dụng hiệu ứng chuyển động, các nguyên tử và thành phần trong giao

diện có thể tương tác và phản hồi đáp lại hành động của người dùng [12]

Điều này mở ra một khía cạnh mới trong việc áp dụng Atomic Design, khi takhông chỉ tập trung vào các yếu tố tĩnh, mà còn khám phá và tận dụng sức mạnh của

chuyền động để tạo ra trải nghiệm người dùng động, hấp dẫn và tương tác Darren Yeo

tin rang việc tích hợp chuyên động vào Atomic Design và Design System sẽ đem lại

sự thú vi và đột phá dang kế trong việc thiết kế giao diện trong tương lai

COMPLEX IONS ATOMS MOLECULES ORGANISMS ORGANISMS SPECIES

Trigger, Micro-: Motion Scenes Flows Journeys

Responses interaction

‹ Library : Maps

Hình 1 11 Atomic Design tích hợp chuyển động theo Darren Yeo, năm 2023 — Nguồn:

Darren Yeo

Thanh phan Ions

Tons là các hạt ha nguyên tử cấu thành nên nguyên tử Ions là thành phan đầu

tiên và nhỏ nhất trong Atomic Design, không thê “phân rã” nhỏ hơn được nữa Chúng

chứa các thành phần chỉ tiết nhất của thiết kế, lưu trữ các biến hay còn gọi là Design

Tokens.

lons bao gồm: Mau sắc, kiểu chữ, biéu tượng, hình dáng

Trang 27

Button text cms @ Primary color

Section header Popul ° (_) bark background

Song title a

Body text

Tab bar label

Hình 1 12 Minh hoa về thành phan Ions trong Atomic Design — Nguồn: Rohan Kamath

Thanh phan AtomsAtoms là nguyên tử, được hình thành từ những Ions kết hợp với nhau Chúng là

những thành phần cơ bản nhất của giao diện người dùng, sở hữu tính chất riêng và

không thể hoạt động khi đứng riêng lẻ một mình

Atoms bao gồm: Nút bam, 6 nhập thông tin, thanh trượt

Nguyễn Thị Ngọc Hà - DI9TKDPT01 17

Trang 28

Icon button

Album art

Icon button

Hình 1 13 Minh hoạ thành phan Atoms trong Atomic Design — Nguồn: Rohan Kamath

Thanh phan MoleculesMolecules là phân tử, được kết hop từ các Atoms với nhau Chúng là các nhóm

tương đối đơn giản của các phần tử trong giao diện thiết kế hoạt động cùng nhau như

một đơn vị, có đặc điểm độc đáo riêng và đóng vai trò là xương sống của Design

Trang 29

Hình 1 14 Minh hoạ về thành phan Molecules trong Atomic Design — Nguồn: Rohan Kamath

Thanh phan OrganismsOrganisms là sinh vật, tập hợp các nhóm Molecules kết hợp lại với nhau Day là

thành phần tương đối phức tạp và tạo thành các thành phan riêng biệt của một giao

Trang 30

Hình 1 15 Minh hoạ về thành phan Organisms trong Atomic Design — Nguon: Rohan

Kamath

Thanh phan Complex OrganismsComplex Organisms là những sinh vật tiên tiến, có thé là động vật, con người

Tương tự, Complex Organisms là sự kết hợp của các thành phần đi trước đề tạo nên

một bố cục và làm rõ cấu trúc nội dung hay còn gọi là một trang, hiển thị chính xác

những gi mà người dùng cuối nhìn thấy

Các trang đó có thê là: Trang chủ, các trang con, các trang chỉ tiết

Thanh phan Species

Species bao gồm các Complex Organisms kết hợp lại với nhau tạo nên một đặc

điểm riêng biệt Trong thiết kế, Species có thể coi là dòng sản phẩm, nền tảng, đa

kênh.

Ví dụ như ứng dụng nghe nhạc trực tuyến Spotify hỗ trợ đa nền tảng từ điện

thoại di động, máy tinh bang, tivi

Nguyễn Thi Ngọc Ha — DI9TKDPT01 20

Trang 31

=== ¡iOS

”m." cam, Android

| _— Desktop

TV

Hình 1 17 Minh hoạ về thành phan Species trong Atomic Design — Nguồn: Spotify

Trong phạm vi đề tài, tác giả chỉ tập trung nghiên cứu năm thành phan đầu tiên,thành phần cuối cùng không năm trong phạm vi nghiên cứu

1.2.3 Tác động của Atomic Design đối với Design System

Như Brad Frost và các đồng nghiệp đã chứng minh, phương pháp này cung cấpcho các tô chức/doanh nghiệp một cách xây dựng tối ưu cho Design System ngay cả

những dự án phức tạp nhất Khi so sánh với các phương pháp thiết kế khác, Atomic

Design là một phương pháp có lợi thế hơn cả

Cách tiếp cận toàn diện

Được lay cảm hứng từ lĩnh vực hoá học và sinh hoc, Atomic Design cung cấp

một phương pháp thiết kế giao diện mạnh mẽ và thuyết phục, xây dựng từ những thành

phần nhỏ nhất đến lớn thất Phương pháp này không chỉ là một luận điểm rời rạc, mà

nó được xây dựng dựa trên cơ sở chặt ché và rõ ràng.

Một trong những điểm quan trọng của Atomic Design là khả năng giúp cácthành viên trong nhóm hiểu rõ mối liên kết và sự kết hợp giữa các thành phan trong dự

án Nó cho phép nhìn nhận được bức tranh tổng thể toàn điện của giao diện được thiết

kế Điều này tạo điều kiện thuận lợi cho sự hiểu biết và cộng tác hiệu quả trong quá

trình phát triển sản phâm

Tập trung vào chỉ tiếtNhờ phân chia các thành phần thành nhiều giai đoạn nên người thiết kế luôn tập

trung vào các chi tiết Ngay từ thành phần nhỏ nhất đã được thiết kế một cách chin

chu, tỉ mi nhất Giai đoạn này có thé sẽ hơi mat thời gian nhưng bù lại về sau chúng sẽ

mang lại lợi ích lâu dài, tránh rủi ro không đáng có.

Thời gian xây dựng và khởi chạy nhanh hơn

Trang 32

Tiếp cận dự án với một phương pháp hiệu quả trong giai đoạn đầu của dự áncho phép các nhóm đây nhanh việc phát triển sản phẩm Hệ thống thiết kế có thư viện

hạ nguyên tử, nguyên tử và phân tử được tạo sẵn từ trước nên người thiết kế chỉ cần

kéo, thả và thêm vào trang bất cứ lúc nào họ muốn

Hiệu suất nguyên tử

Lay cảm hứng từ nguyên tử nên các thành tố giao diện nhỏ nhất khi được xâydựng lên đều mang một tính chất riêng và chúng cũng hoạt động tốt đúng với vai trò

của mình Từ đó, người thiết kế rất dé dang kết hợp và tái sử dụng lại các thành tố này

trên các trang và giai đoạn khác nhau Điều này tránh mất thời gian và tăng hiệu quả

trong quá trình xây dựng.

Cải thiện trải nghiệm người dùng

Vì người thiết kế tạo dựng từng thành phần đề kết hợp chúng lại thành giao diệncuối cùng nên thiết kế đó mang lại một trải nghiệm người dùng gắn kết Các thành

phần được thiết kế như thể chúng đang cùng chung một hệ sinh thái, mang lại cảm

giác mọi thứ được sắp xếp hợp lý khi trải nghiệm

1.3 Tiểu kết chương 1

Chương 1 đã dé cập đến các thông tin cơ bản nhất về tổng quan thiết kế giao

diện ứng dụng di động, tổng quan hệ thống quy chuẩn về giao diện Design System và

phương pháp Atomic Design Cu thể, kết quả nghiên cứu về Atomic Design được tổng

kết lại như sau:

Atomic Design là một phương pháp tối ưu để xây dựng hệ thống quy chuẩn về

giao điện Design System Phương pháp này tập trung vào việc thiết kế các thành phan

riêng lẻ và sau đó kết hợp chúng lại với nhau, thay vì thiết kế cả trang hoặc ứng dụng

một cách tong thé Qua việc phân chia giao diện thành các nguyên tử nhỏ hon, Atomic

Design mang lại nhiều lợi ích lâu dài và tránh các rủi ro xảy ra trong quá trình phát

triển, bảo trì, đồng thời tạo ra một hệ thống giao diện linh hoạt và dé dang mở rộng

Trang 33

Đồ án Tốt nghiệp Đại học Chương 2

CHUONG II: TONG QUAN VE UNG DUNG NOI BAI

COMPANION

Ở chương 2, tác giả sẽ giới thiệu tổng quan về ứng dung, sau đó tiến hành

nghiên cứu thị trường, người dùng cuối cũng như đề xuất giải pháp cho ứng dụng Noi

Bai Companion Từ đó, đưa ra đề xuất, giải pháp cụ thé làm cơ sở cho phan thiết kế

giao diện trực quan ở chương 3.

2.1 Tổng quan về ứng dung Noi Bai Companion

2.1.1 Bối cảnh ra đời ứng dụng

Ngành hàng không bao gồm chuỗi dịch vụ từ vận tải hàng không, cảng hàngkhông đến các dịch vụ phụ trợ hàng không Nếu xem vận tải hàng không là xương

sống của ngành, thì cảng hàng không là lĩnh vực chịu trách nhiệm cung cấp cơ sở hạ

tầng cho hầu hết các hoạt động của phân khúc kinh doanh khác trong chuỗi giá trị

ngành, là nơi kết nối hệ thống hàng không của mỗi quốc gia với các phương thức vận

chuyền khác

HANH KHACH GA HANH KHACH

SÂN ĐỖ MÁY BAY ĐIỂM ĐẾN

HÀNG HOÁ GA HÀNG HOÁ

Hình 2 1 Chuỗi giá trị vận tải hàng không

Thị trường hàng không ở Việt Nam, trong đó có cảng hàng không, đang trên đà

phục hồi mạnh mẽ sau dai dịch Covid-19 Day là một dấu hiệu tích cực cho thấy nền

kinh tế đang dần phục hồi và phát triển Tuy nhiên, vẫn gặp một số khó khăn, thách

thức, đặc biệt trong bối cảnh kinh tế thế giới đang có dấu hiệu suy thoái Sức ép lạm

phát, tỷ giá, lãi suất đã làm cho giá vé máy bay tăng cao, ảnh hưởng không nhỏ đến

việc kinh doanh của doanh nghiệp lữ hành Cần phải có một giải pháp để nâng cao

chất lượng dịch vụ và trải nghiệm khách hàng, từ đó tháo gỡ khó khăn, “chắp cánh”

giúp ngành hàng không Việt Nam phục hồi hoàn toàn và làm sáng hơn bức tranh lợi

nhuận của ngành.

Vì vậy, việc có một ứng dụng hỗ trợ đề cải thiện tiện nghi sân bay, dịch vụ cũng

như tạo trải nghiệm độc đáo thu hút khách hàng là điều cần thiết trong bối cảnh này

Trong phạm vi đồ án, tác giả sẽ tập trung vào thiết kế giao diện ứng dụng cho đối

tượng hành khách của cảng hàng không quốc tế Nội Bài dành, cảng hàng không lớn

nhất Việt Nam nam tại thủ đô Hà Nội

Trang 34

2.1.2 Giới thiệu về ứng dụng Noi Bai Companion

Noi Bai Companion là ứng dụng di động được thiết kế dé cung cấp hỗ trợ toàndiện cho Cảng Hàng không Quốc tế Nội Bài Với nhiều chức năng hữu ích, ứng dụng

sẽ giúp hành khách có trải nghiệm thuận tiện và thông minh tại sân bay.

Ứng dụng sẽ không chỉ đáp ứng nhu cầu cơ bản của người dùng như theo dõithông tin chuyến bay, đặt vé hay làm thủ tục, mà còn giới thiệu về Hà Nội với hành

khách Với vai trò là thủ đô của Việt Nam, Hà Nội có một lịch sử văn hóa lâu đời và

nhiều địa điểm du lịch nồi tiếng Ứng dung sẽ cung cấp thông tin chỉ tiết và hình ảnh

hấp dẫn về các địa điểm du lịch, nhà hàng, khách sạn và các sự kiện văn hóa diễn ra

trong thành phó, giúp hành khách có được cái nhìn toàn cảnh hơn về Hà Nội

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

Noi Bai Companion được thiết kế với mục đích tạo ra một giải pháp sân baythông minh, cung cấp hỗ trợ và tiện ích cho hành khách sử dụng cảng hàng không

quốc tế Nội Bai Dưới đây là một số mục tiêu cụ thé mà ứng dụng hướng tới:

- _ Đối với hành khách, ứng dụng sẽ cung cấp các chức năng cơ bản như theo dõi

thông tin chuyến bay, đặt vé, làm thủ tục, cung cấp thông tin và tiện ích sân

bay một cách nhanh hơn, hiệu quả và đơn giản hơn, đồng thời tăng cường trải

nghiệm và giới thiệu về Hà Nội bằng cách áp dụng trò chơi hoá (gamification)

- _ Đối với cảng hàng không quốc tế Nội Bai, ứng dụng sẽ nâng cao sự tiện lợi và

trải nghiệm của hành khách, tăng cường tiếp nhận thông tin, tương tác, hỗ trợ

và giảm thiểu sự bất tiện cho người dùng Ngoài ra, ứng dụng còn hướng đến

quảng bá hình ảnh và văn hoá của sân bay Nội Bài cũng như thủ đô Hà Nội.

2.2 Nghiên cứu thị trường

Nghiên cứu thị trường bản chất là quá trình quan sát, đánh giá nhằm thu thập

thông tin quan trọng về thị trường mục tiêu va các đối thủ cạnh tranh Mục đích của

nghiên cứu là để giải quyết các vấn đề trong quá trình phát triển sản phẩm và đưa ra

phương án hiệu quả nhất Trong phần này, tác giả sẽ tìm hiểu về thị trường mục tiêu và

đối thủ cạnh tranh dé xác định tính khả dụng cũng như vị thé của Noi Bai Companion

trên thị trường.

2.2.1 Tông quan về thị trường cảng hàng không dân dụng Việt Nam

Tác giả đã tiến hành nghiên cứu thị trường thông qua các dữ liệu thứ cấp thuthập từ các nguồn tin được chọn lọc như sách, báo cáo, tạp chí khoa học Dưới đây là

thông tin tác giả tổng hợp được:

Đối tượng khách của hàng không Việt Nam bao gồm khách du lịch, khách công

vụ, chuyên gia , trong đó, khách du lịch chiếm chủ đạo (90% nhu cầu) Theo Hội

Khoa học Kinh tế Việt Nam, khách du lịch bằng đường hàng không ở Việt Nam luôn

chiếm tỉ lệ cao nhất (hơn 80%, năm 2019) so với đường bộ, đường biển Vì thế, ngành

hàng không luôn có vai trò quan trọng đối với sự phát triển kinh tế của Việt Nam [13]

Trang 35

Hiện nay, Việt Nam có 22 cảng hàng không dân dụng đang hoạt động, trong đó

có 12 sân bay quốc tế và 10 sân bay nội địa Cảng hàng không quốc tế Nội Bài là cảng

hàng không lớn nhất Việt Nam, tiếp theo là Cảng hàng không quốc tế Tân Sơn Nhất và

Cảng hàng không quốc tế Đà Nẵng

Theo PGS.TS Nguyễn Thiện Tống, hàng không Việt Nam phát triển khá nhanh

trong hai thập kỷ qua Tuy nhiên, đại dịch Covid-19 cắt đứt đà phát triển này khiến hai

năm qua, cấu trúc của ngành hàng không thay đổi theo hướng bat lợi Sản lượng khai

thác của thị trường hàng không Việt Nam giảm sút mạnh, thanh khoản của doanh

nghiệp giảm nhanh và sâu, dòng tiền mất cân đối, nhiều lao động của ngành bị cắt

giảm hoặc mat việc làm [14]

Sau nhiều năm liên tục dat mức tăng ấn tượng, năm 2020 Việt Nam lần đầu tiênghi nhận sự sụt giảm mạnh về lượng khách quốc tế và nội địa Tổng số lượt khách do

các cơ sở lưu trú phục vụ năm 2020 đạt 97,3 triệu lượt khách, giảm 44% so với năm

trước, số lượt khách do các công ty lữ hành phục vụ là 3,7 triệu lượt khách, giảm

80,1% Khách quốc tế đến Việt Nam giảm 78,7% so với năm trước, chỉ đạt 3,8 triệu

người Số lượt khách du lịch nội địa và quốc tế đã kéo doanh thu cho các cơ sở lưu trú

và lữ hành cũng sụt giảm nghiêm trọng, ước tinh đạt 61,8 nghìn tỷ đồng, giảm 43,2%

Tính chung cả năm 2020, lượng hàng khách chỉ đạt 34,8 triệu khách (-61,3% YoY),

trong đó khách quốc tế đạt hơn 3 triệu hành khách (-78,87% YoY), khách nội địa đạt

Hình 2 2 Tong số hành khách thông qua vận tải hang không theo tháng (tháng 9/2019 —

thang 10/2021) Nguồn: Cục Hàng không Việt Nam, CSI tong hợp

Trên đà hồi phục năm 2022, cuộc xung đột Nga — Ukraine và các lệnh trừng

phạt của Mỹ và phương Tây áp đặt lên nước Nga mang đến vô số thách thức cho

ngành hàng không Các biện pháp trừng phạt lẫn nhau và hạn chế hàng không làm

rung chuyền lĩnh vực này, dẫn đến phải hủy bỏ hoặc định tuyến lại các chuyến bay,

đây giá nhiên liệu lên chiếm 35% tổng chi phí hoạt động của ngành hàng không trên

thế giới, giá vé tăng cao cùng nhiều vấn đề khác Kết thúc năm 2022, thị trường hàng

không Việt trên đà phục hồi nhưng chưa đồng đều

Số liệu từ Cục Hàng không Việt Nam cho thấy thị trường vận chuyên hàngkhông nội địa 9 tháng đầu năm 2023 phục vụ 65,2 triệu khách, ghi nhận mức giảm

Trang 36

3,6% so với cùng kỳ năm 2022 Mức sụt giảm này một phần do mức nền cao cùng kỳ

và sức tăng trưởng chậm không như kỳ vọng, đặc biệt thị trường du lịch hè không

bùng nô như mọi năm khi trong tháng 6 và tháng 7, thị trường vận tải khách nội địa

đều giảm sâu khoảng 20% Trong khi đó, thị trường khách quốc tế tăng mạnh mẽ

266,8% so với cùng kỳ năm 2022, dat 23,7 triệu khách sau 9 thang va băng 76,5%

ga Lượt khách nội dia (LHS) Lượt khách quốc & (RHS)

=_ = Đỉnh nội dia trước dịch = = Dinh quốc tế trước dịch

Š

Hình 2 3 Sản lượng hành khách hàng không theo quý (quý 1/2019 — quý 2/2023) Nguôn:

Cục Hàng không Việt Nam

Luỹ kế 9 tháng, tổng thị trường hành khách đạt 56,3 triệu khách, vẫn duy trì tốc

độ tăng trưởng khả quan 39,5% Như vậy, thị trường hàng không nội địa dù giảm nhiệt

so với cùng ky nam ngoái nhưng vẫn duy trì đà tăng trưởng kha quan hơn trước dịch,

trong khi đó, thị trường quốc tế đang chậm rãi phục hồi [16]

Đề đáp ứng nhu cau phát triển của thị trường, Việt Nam đang triển khai nhiều

dự án đầu tư phát triển các cảng hàng không Trong đó, đáng chú ý nhất là dự án Cảng

hàng không quốc tế Long Thành — cảng hàng không quốc tế lớn nhất Việt Nam với

công suất thiết kế 100 triệu hành khách/năm Dự án dự kiến sẽ hoàn thành và đưa vào

khai thác giai đoạn 1 vào năm 2025 [17] Ngoài ra, Việt Nam cũng đang triển khai đầu

tư nâng cấp, mở rộng các cảng hàng không khác như sân bay Nội Bài, sân bay Tân

Sơn Nhất, sân bay Đà Nẵng

Dé tiếp tục thúc day sự phát triển của thị trường hàng không, Việt Nam cần tiếp

tục đầu tư phát triển cơ sở hạ tang cảng hàng không, nâng cao chất lượng dich vụ và

thu hút các hãng hàng không quốc tế

2.2.2 Tống quan về thị trường ứng dụng hỗ trợ sân bay tại Việt Nam va thé giới

Những đổi mới về công nghệ số hoá cho phép các sân bay tăng hiệu quả cácquy trình, giảm thiểu chỉ phí vận hành và tối đa hoá lợi nhuận Nhiều sân bay trên thế

giới đã chuyên đổi hoàn toàn cách thức kinh doanh và tập trung vào điều quan trọng

nhất, đó chính là khách hàng

Trang 37

Theo khảo sát của Cisco AppDynamics vào tháng 5 năm 2022, 74% khách du

lịch được hỏi cho biết các ứng dụng và giải pháp kỹ thuật số đóng vai trò quan trọng

trong trải nghiệm của họ Tỷ lệ sử dụng ứng dụng liên quan đến du lịch, trong đó có

vận tải du lịch, cao hon sau đại dịch Covid-19 khi người dùng có xu hướng áp dụng

các giải pháp kỹ thuật số hơn Dữ liệu cho thấy vào mùa hè năm 2022, số lượt tải

xuống ứng dụng liên quan đến du lịch đã vượt qua mức cao nhất trước đại dich [18]

Tuy nhiên, theo nghiên cứu của Lufthansa Innovation Hub Analysis dựa trên sốliệu từ 20 sân bay hàng đầu thế giới có ứng dụng di động hỗ trợ, chỉ có 7% hành khách

sử dụng ứng dụng của sân bay, trong khi đó, ứng dụng của các hãng hàng không tiếp

cận được lượng khách hàng nhiều hơn gap 5 lần

Share of passengers that use respective mobile apps in 2022

Hình 2 4 Ty lệ hành khách được hoi sử dung ứng dung hỗ trợ sân bay và ứng dụng của các

hãng hàng không năm 2022 Nguôn: Lufthansa Innovation Hub Analysis

Cuộc khảo sát với hơn 6000 hành khách toàn cầu do Airport Dimensions thựchiện đã cung cấp cái nhìn toàn diện về lý do dang sau sự chênh lệch này Theo đó,

người dùng có xu hướng truy cập các trang web của sân bay thay vì ứng dụng di động

để cập nhật trạng thái chuyến bay và thông tin liên quan Quan trọng hơn, họ ưu tiên

sử dụng ứng dụng của các hãng hàng không để tìm kiếm thông tin về kế hoạch và lịch

trình bay.

Mặc dù vậy, vẫn có một số ứng dụng hỗ trợ sân bay hoạt động tốt hơn nhiều so

với các ứng dụng khác và thu hút được một lượng khách hàng lớn Ứng dụng của sân

bay Schiphol ở Ha Lan là một vi dụ Ngoài ra, ứng dụng sân bay Changi của

Singapore hay sân bay Hồng Kông cũng dẫn đầu về tỷ lệ sử dụng của khách hàng Tác

giả sẽ tiến hành phân tích về những ứng dung này ở mục sau

Trang 38

Share of passengers that use selected airport apps

Schiphol Amsterdam Airport SSS TC l3%

wHG In:

Incheon Airport Guide | 5%

LHR London Heathrow Airport | 4%

Paris Aéroport | 4%

Hình 2 5 Tỷ lệ hành khách sử dung một số ứng dung hỗ trợ sân bay Nguôn: Lufthansa

Innovation Hub Analysis

Tai Việt Nam, ứng dụng hỗ trợ sân bay còn chưa được phổ biến rộng rãi Hiệntại, ba cảng hàng không nhộn nhịp nhất Việt Nam là sân bay Nội Bài tại Hà Nội, sân

bay Đà Nẵng và sân bay Tân Sơn Nhat ở thành phố Hồ Chí Minh chỉ cung cấp cho

hành khách những thông tin cơ bản như thông tin sân bay, bảng chuyến dén/chuyén

đi thông qua trang web hoặc ứng dụng.

NIA : ») ‹ Flight Schedule Online

Tiện ich ET3 scan Your aR Code

Tìm Hành lý Thờ tiết hiện tại a

thất lạc ởHAN Ea] Messages

Gis -

1 a „ ft 6 2

Ứng dung iNIA Ứng dụng iDanangAirport Trang web tia.vietnamairport.vn

Hình 2 6 Ung dụng và trang web của các sân bay Nội Bài, Đà Nang và Tan Son Nhat

Như vậy, có thé thấy, tiềm năng phát triển của ứng dụng Noi Bai Companioncòn nhiều rộng mở Với sự gia tăng đáng ké của ngành hàng không và sự phát triển

của các sân bay ở Việt Nam, cũng như sự phô biến của công nghệ, ứng dụng này có

thé đóng vai trò lớn trong việc cung cấp thông tin, dịch vụ và tiện ich cho người dùng

Vì vậy, với tiềm năng và khả năng linh hoạt của mình, Noi Bai Companion có thể trở

Trang 39

thành một công cụ hỗ trợ quan trọng trong ngành hàng không và du lịch tại Việt Nam

nói chung và sân bay Nội Bài nói riêng.

2.2.3 Nghiên cứu sản phẩm cùng chức năng

Việc nghiên cứu và phân tích sản phâm cùng chức năng giúp tác giả có thể tìmhiểu và học hỏi từ các mô hình thành công Điều này cho phép so sánh giao diện và

tính năng của các sản phâm dé có thé thiết kế và xây dựng những tính năng cần thiết

và quan trọng cho sản phẩm của mình

Ở phan này, tác giả sẽ nghiên cứu ứng dung Schiphol Airport của sân baySchiphol ở Hà Lan và ứng dụng My HKG của sân bay Hồng Kông Đây đều là những

sân bay được nhiều người tin tưởng sử dụng nhất như đã được đề cập bên trên Tác giả

bỏ qua sân bay Changi của Singapore vì sân bay nay ngoài chức năng như một cảng

hàng không quốc tế còn là một tổ hợp giải trí với nhiều điểm tham quan cũng như dich

vụ vui chơi, ăn uống , không phù hợp với bối cảnh của Nội Bài

Tác giả tiến hành đánh giá các ứng dụng dựa trên hai yếu tố là giao điện người

dùng và khả năng sử dụng bằng phương pháp GUI Testing (kiểm thử giao diện đồ hoạ)

va Usability Heuristics Cụ thé, tác giả dùng bộ Usability Heuristics Checklist của

Nielsen Norman Group Day là một tô chức về trải nghiệm người dùng độc lập nên bộ

tiêu chí đánh giá của họ có tính tuỳ biến cao và có khả năng áp dụng được cho hầu như

tat cả các sản phẩm trên thị trường hiện nay Cuối cùng, tác giả chi ra điểm đáng học

hỏi, điểm chưa tốt, từ đó làm cơ sở đề thiết kế ứng dụng Noi Bai Companion

a Ung dung Schiphol Airport

Trang 40

Tổng quan về ứng dụng

Schiphol Airport là ứng dụng chính thức của sân bay Schiphol — sân bay chính

của Hà Lan nằm tại Tây Nam Amsterdam và cũng là một trong những sân bay có

lượng khách phục vụ và lượng hang thông chuyến lớn nhất châu Âu Ứng dụng cung

cấp các tính năng như:

- _ Cập nhật trang thái chuyến bay và thông báo thời gian thực

- _ Nhận lịch trình chi tiết cho chuyến bay

- _ Thông tin về các dich vụ tại sân bay, bao gồm nhà hàng, cửa hàng

- Tuy chọn đặt chỗ dịch vụ tại sân bay, bao gồm phòng chờ, dịch vụ xe đưa đón,

bãi đỗ xe

- _ Điều hướng trong sân bay sử dung ban đồ tương tác

Ứng dụng được đánh giá cao bởi người dùng với điểm trung bình 4,7 trên 5 trên

các chợ ú ung dụng Các đánh giá tích cực tập trung vào tinh hữu ich của ứng dung trong

việc cung cấp thông tin và dịch vụ cần thiết cho hành khách Theo đữ liệu từ data.ai,

chỉ riêng trong tháng 11 năm 2023, ứng dụng có gần 30 nghìn lượt tải xuống, lưu

lượng sử dụng trung bình ngày đạt 2,6 nghìn người dùng, chủ yếu từ Hà Lan và các

nước châu Âu như Anh và Đức [19] Schiphol Airport hiện có tỷ lệ hành khách sử

dụng nhiều nhất so với các ứng dụng có cùng chức năng của các sân bay khác trên thế

gidi.

Đánh giá giao diện người dùng

Kết quả đánh giá được thể hiện trong bảng sau:

Yếu tố Checklist Có | Không | N/A

Các thành phần giao diện có cùng x

phong cách và kiêu dáng không?

Tính nhất | Kích cỡ và màu sắc của các thành phần x

quan giao diện có nhat quán không?

Các thành phần giao diện có được sắp x

xếp một cach hop ly và hài hoà không?

Giao diện có thích ứng với các kích

thước màn hình và thiết bị khách nhau| = *

không?

Khả năng : Pm Dy tA RR

tiép cân | Giao diện có tuân thủ các tiêu chuân về

l khả năng tiêp cận (đảm bảo có thê sử x

dụng bởi người dùng có khả năng hạn

chê) không?

Mau sắc | Màu sắc sử dụng có tuân theo quy luật x

60 — 30 — 10 không?

Tiêu đề	Nghiên Cứu Về Atomic Design Và Áp Dụng Vào Thiết Kế Giao Diện Ứng Dụng “Noi Bai Companion”
Tác giả	Nguyễn Thị Ngọc Hà
Người hướng dẫn	ThS. 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
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	97
Dung lượng	21,67 MB