Nghiên cứu về đinh luật Gestalt và áp dụng vào thiết kế giao diện ứng dụng khám phá ẩm thực “Hà Nội Food”

Đồ án tốt nghiệp Đại họcLOI CAM DOAN Em xin cam đoan rang đồ án tốt nghiệp: Nghiên cứu về đỉnh luật Gestalt và áp dụng vào thiết kế giao diện ứng dụng khám phá ẩm thực “Hà Nội Food” làcô

Trang 1

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

KHOA ĐA PHƯƠNG TIỆN

Đề tài

“NGHIÊN CỨU ĐỊNH LUẬT GESTALT VÀ ÁP DỤNG VÀO THIET KE

GIAO DIỆN UNG DUNG KHÁM PHA AM THUC

HA NOI FOOD”

Giang viên hướng dan: ThS Nguyén Minh Thuy

Sinh viên thực hiện: Trương Công Hòa

Mã sinh viên: B19DCPT090

DI9TKDPT03

2019 — 2024 Dai hoc chinh quy

Ha Nội, tháng 12 năm 2023

Trang 2

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

LOI CAM DOAN

Em xin cam đoan rang đồ án tốt nghiệp: Nghiên cứu về đỉnh luật Gestalt và

áp dụng vào thiết kế giao diện ứng dụng khám phá ẩm thực “Hà Nội Food” làcông trình nghiên cứu của bản thân mình 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õ ra tại phần tài liệu tham khảo Đồng thờinhữ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 như sai em xin chịu hoàn toàn 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

Hoa

Trương Công Hòa

Trương Công Hòa — DI9DCPT090 1

Trang 3

LỜI CẢM ƠN

Trên thực tế không có sự thành công nào mà không gắn liền với những sự hỗtrợ, giúp đỡ dù ít hay nhiều, dù trực tiếp hay gián tiếp Trong suốt 4 năm học tập tạiHọc viện tới giờ, em đã nhận được rất nhiều sự giúp đỡ từ phía các thầy cô, gia đình

và bạn bè, nhất là trong quá trình thực hiện đồ án tốt nghiệp vừa qua Quá trình này

đã giúp em có cơ hội để tổng hợp lại toàn bộ kiến thức đã học tại Học viện, cũng nhưnghiên cứu sâu hơn những kiến thức chuyên môn dé ứng dụng vào sản phâm khóa

cơ sở lý thuyết vững vàng dé ứng dụng vào trong quá trình thực hiện báo cáo Báocáo của em tuy đã hoàn thành nhưng vì em còn nhiều hạn chế về chuyên môn nênkhông tránh khỏi những thiếu sót, em rất mong nhận được những ý kiến đóng gópquý báu của quý thầy cô dé kiến thức và kỹ năng của em trong lĩnh vực được hoàn

thiện hơn.

Trang 4

MỤC LỤC

LOI CAM ĐOAN - 2222 2222112221 1222.11 2 TT rirrrirrrre i

LOI CAM ƠN 55c: 2222212 2222211112222 1 1 eg ii

2.1 Tình hình nghiên cứu trong TƯỚC 2 22232 * 92131 EEEEEEEEEEEEEEEEkErrkrrkererrsee 2

2.2 Tình hình nghiên cứu nước ØOÀÌ - 2 3 2113113312111 551151111111 krree 2

3 Mục đích và nhiệm VỤ - + 2E E2 2211112211 8112531111125 111191 vn vn ng vvrree 3

3.1 Mục đích c- c1 11121 ng TH ng v 3 3.2 NIIGM VU 3

4 Thiết kế giao diện ứng QUIN eee eecceceeccessessessscssessessecsecsecsscsnessessessessessesasessesneaeseeseeeeeee 3

5 Phuong phap mghién 0:4) §VỔ 4

6 Ý nghĩa thực tiễn - ¿- 2c s2 E12 12711211121171121112111112111111112111111111111 2x6 4

7 Kết cấu đề tài 2t tt He 5

Chương I: Nghiên cứu lý thuy6t c.ccececcccccessessesssessessessessessessecssssessessessessessesseseeessees 5 Chương II: Nghiên cứu về ứng dụng di động “Hà Nội Food'” 2s s+sz+szcsz2 5 Chương III: Thiết kế giao diện ứng dụng di động “Hà Nội Food” 2- s5: 5

CHƯƠNG I: TONG QUAN LÝ THUYÉT ĐỊNH LUAT GESTALT VA ANH HUONG

CUA ĐỊNH LUẬT VÀO THIET KE UNG DUNG DI DONG cececccsecceseceeceseseseststseseeeeees 6

1 Tổng quan về định luật ŒGestaÌt -¿- - 5c St s21 1 1E121111211511111111121111111111111111111 1E e 6

I0 i86 6

Trang 5

1.2 Các nguyên tắc trong định luật Gestalt 2-©522E22EE‡2E£EE2EEeEEEEEEEEkrrrrerkrree 7

1.2.1 Nguyên tắc đồng bộ (Similarity) -¿- 22 ©se+S22EE2EEt2 E121 re 7 1.2.2 Nguyên tắc gần bên (Proximity) - 2-52 22x 2211221211271 re.9 1.2.3 Nguyên tắc liên tục (Continuation) -¿- ¿+22 ++EE+2EE2EE2EE2E22EE2Ex2ExzErcex 10 1.2.4 Nguyên tắc đóng kín (ClOSUF€) - 2 22+SE2EE£EE2EE2EEEEE12E122171E271 2E crxe 11 1.2.5 Nguyên tắc chính — phụ (Figure — ground) 2- 2 2 + +2 ++x+E++zzrzes 12 1.2.6 Nguyên tắc đối xứng và thứ tự (Symmetry and Order) s2 s2 s2 13

2 Tổng quan về ứng dụng di động - 2 2+ 2+SE2EE+2EEEEEE2E122112711271711271121111 1 cxe 15

2.1 Ứng dụng di động là gÌ! - ¿- 22 s2 x‡EE2EE2E1221127112112711211211 71111111 cre 15

2.2 Phân loại ứng dụng di động c5: 2c 2113113115115 111.1.1 111.1 15

2.3 Quy trình thiết kế một ứng dụng di động theo mô hình Design Thinking 16

2.3.1 Đồng cảm (Empathiz€) 2© 2+E2EE‡EE2EE2EEE711271221127112711211 71.1 1exe 16

PP {C0090 0h 17

PS NI (001) -0 0:01 17

2.3.4 Mẫu thử nghiệm (ProtOfyp€) ¿- 2-52 S S1 21221 21712212112112121 2121101111111 xe 18

2.3.5 Kiểm thử (Testing) - 2+ 5+2 2x2 12211221121127112111211111112112112121 1e 18

3 Ảnh hưởng của định luật Gestalt vào thiết kế ứng dụng di động - 252 19

3.1 Nguyên tắc đồng bộ (Similarity) - ¿- 22 s2 E2 EEE2E1273127121171121121 21.21 ce 19 3.2 Nguyên tắc gần bên (Proxiimity) - 2-22 22x EE2E127112112711211211 71.111 20 3.3 Nguyên tắc liên tục (ContinuafiOn) - s++s+2E+EEt2EE£EEEEEEEE12212112212212222E.e 21 3.4 Nguyên tắc đóng kin (Closure) c.ccccscsssesssesssessesssessvessesssesssessesssesssessecssesssessesssecees 23

3.5 Nguyên tắc Chính - phụ (Figure - ørourid) 2 sz+++++z+£x++£++£z++xz+xzzxezxez 24

3.6 Nguyên tắc đối xứng và thứ tự (Symmetry and Order) - zsz+s2 +zs+2 25

A, Tidu két Chu Ong y ễô: : 26 CHƯƠNG II: NGHIÊN CUU VE UNG DUNG “HA NOI FOOD” cecssseseeseessteeeseneeesees 28

Truong Công Hòa — D19DCPT090 iv

Trang 6

1 Tổng quan về ứng dụng - 2+ s+2E+2EE+E127112E112112711271121111121121111 21111111 cye 28

2 Nghiên cứu thứ Cap c.cccecceccescsesssesssessesssessssssesssecsssssessuesseessesssessssssecssessesssesasessessseeaseesess 28

2.1 ¡0u 11 28

2.2 Đối thủ cạnh tranh ccccecccccssescecsessesecsecsecsesecsucseseessesucsucsesecsucsessesavsucarsvsecacavseecevees 30

2.2.1 Foody - Find Reserve IDelTV€TV - +: + tk * 9111111191 9 11 ng rệt 31 PÄ§§ ¡Ho 32 2.3 0s 00-0: 11 -.- aa 34

3, Nghién clu nguOi tì), 1n 3® 34

3.1 Đối tượng sử MUNG cccessesssesssessecssecssessecssecsnessvcssesssessesssesssessessuessessessessease 34

3.2 Phuong phap nghién 00) nhaadaaQỐỔ 35

3.2.1 Phuong pháp khảo sat người dùng - - 5c 2c St St vn nghiệp 35

3.2.2 Kết quả khảo sát ¿2+ 22 E12 127112712117112712111112111121111211211 11 c0 35

“co ha e 3Ÿ 40

5 Giải quyết vẫn đề -: s2 T22 1221121122112 1211111211 1211011210111Erre 40

`, Ô ,ÔỎ 40 5.2 Varn ,ÔỎ 40 5.3 .¡= 41

Xa 41

6 Các chức năng ứng dụng sẽ cung cấp - 2+ 22++EE+2EE£EEE2EE2EE2211221221271 221 xe 42

7 Kiến trúc thông tỉn + s¿+Sx2E1+EE2EE22E127112712112111211211111211111111 211111111 e2 44

ri 44 Z“ZW o 44

8 Tiểu kết chương Ï - 2-52 +£2SE+EE2EE2EEE2E1271127121127112117112112111112112112121 11 re.46

CHUONG III: UNG DỤNG LÝ THUYET ĐỊNH LUAT GESTALT VÀO THIET KE

GIAO DIEN UNG DUNG KHAM PHA AM THUC HÀ NỘI HANOIFOOD 47

Trương Công Hòa — D19DCPT090 V

Trang 7

I Wire frame — 47

li ioisnŸyŸễiẲẳiẳảả3Ả 47

I2 j1 Ả 48

1.3 Trang chủ - Thơng báo - Tìm kiẾm - 2: 2© £+2E£+EE+EE2EEtEEE2EE2EE2EE2E2ErEerree 49 1.4 Check in in nh 50

1.5 Thơng tin chỉ tiết nhà hàng, quán ăn, mĩn ăn - 2 2 2+ ++E++E++E++E++E+zxzzxez 51 1.6 Trang Ca nan 52

"lu cà ái 7a ồễẳễơồễồơ®^®ˆễ'.ễỄ'Ồ®oồ®ễ®ễêễ.ễ ễˆ®^®ˆĂ' Ả 52

2.1 Logo hoan thigt cc 445 53

2.2 Quy chuẩn 10g0 ccceccesseessesssesssessesssecssessesssecssessvsssecsuessesssecssessesssesssessecasesssessecasecees 53 2.3 Logo âm ban và dương bản G2 2c 212112113111 11 11 11 1 1 11 111111 ng ng re 54 2.4 Khoảng cách logo an tỘN - - t1 1121121121121 11 1111111110 10 11111 HH ngư 54 2.5 Logo trên các nền MAU ecceecesssesseessesssessesssesssessecssesssesseessesssessesssssssssssssssaseeseaeees 55 3 Xay dung Design Systeme 56

l5 56

ly 0/0 57

3.3 Biểu tượng -:- 2+2 2x22 127112112211 2111211 111211 1111011211011 ererree 58 E si 607 59

3.5 COMPOMNENUS ¬a 60

“A0009 1 61

3.1 Giao 091i 1n e - 62 3.2 Giao diện Đăng Ký th HH HT HH HT HT HT HH Hàn HT 62

3.3 Giao diện Đăng nhập - Quên mật khẩu 55t E1 2E125121211E1111121115EEEE 1x eExer 63

3.4 Giao diện Trang chủ & Yêu thích & Thơng báo - Sen 64

3.5 Giao điện Tìm kiếm 2222+ct 222211 trnrHHHHrHrrrrrrree 65

Trương Cơng Hịa — D19DCPT090 vi

Trang 8

3.6 Giao diện Chỉ tiết món ăn — nhà hàng - 2-22 2+ E+£E+EE+2EEtEEtEEtrEerkerxerkered 66

3.7 Giao diện Đánh giá — check 1m 2 2c 2c 1211311151151111 15111911 11111 91 ky re 67 3.8 Giao diện Trang cá nhâÂn - c2 3131191191191 911 1 11 11 11 11 T1 11 1T TH rệt 68

3 Kiến nghị ¿- 52-522 E12 117112712111112711211111211.11 1121110111111 errreg 72

TÀI LIEU THAM KHẢO ::-22222t22222vv222211111222211 1222 tre 73

Trương Công Hòa — D19DCPT090 vii

Trang 9

DANH MỤC CÁC HÌNH VE

Hình 1 1 Mỗi hình dang tạo thành một nhóim - + + + E23 E** EEEEEseEseerekrrekree 8

Hình 1 2 Những hình có màu xanh lam tạo thành một nhóm 5 + +++s*++s++s+++ 8

Hình 1 3 Đồng bộ về kích thước - ¿s2 2+EE++EE£EE2EE2EEE7E1271121121121121121121121 1 re 9

Hình 1 4 Nguyên tắc gần D6n cecccsccessesssesssesssessesssessuessesssessssssesssessusssesssessssessessessesseeseeses 10

Hình 1 5 Nguyên tắc liên tỤc ¿- +-+2++2E2+EEt2EE92112712112711271211271121111111111 211211 xe 11

Hình 1 6 Hình ảnh gấu trúc trong Logo World Wildlife Fund -2:- 525522552 12

Hinh 1 7 Logo tap doan 00i.30 cư 13

Hình 1 8 Logo don sắc của Olympic c.ccsccescesessessessesssessessessessessecssessessessessessesaeseseeseesees 14 Hình 1 9 Nguyên tắc đối xứng và thứ tut eecceccceccccscessesssesssecsesssesssecsesssesssessessesseseaeaesesaes 14 Hình 1 10 Ung dụng nguyên tắc đồng trong thiết kế ứng dụng di động - 19

Hình 1 11 Ung dụng nguyên tắc gần bên trong thiết kế ứng dụng di động 21

Hình 1 12 Ung dụng nguyên tắc liên tục trong thiết kế ứng dụng di động - 22

Hình 1 13 Ứng dụng nguyên tắc đóng kín trong thiết kế ứng dụng di động 23

Hình 1 14 Ung dụng nguyên tắc chính — phụ trong thiết kế ứng dung di động 25

Hình 1 15 Ung dụng nguyên tắc đối xứng trong thiết kế ứng dụng di động 26

Hình 2 1 Giao diện ứng dụng FOOdỈy 5c G322 222123111511111 15 11211111 11 g1 1kg kg 31 Hình 2 2 Giao diện ứng dung Food cece eeccececeeeseeseeseeeenececeeceeceececeeseeseseeeeeeeeseeeeaees 33 Hình 2 3 Độ tuổi của người dùng - ¿2 2s 22x 1271127121171121121111121111 1111 11 xe 36 Hình 2 4 Địa điểm sinh sống 2-22 2¿+SE9EE9EE2EEE2E1E711271211271121171171121121212 E1 xe 36 Hình 2 5 Mức độ yêu thích với âm thực Hà Nội 2- 2 ++22++2E++Ex+EzErzxrzxrxez 37 Hình 2 6 Thói quen ăn uống khi đi du lịch - 2-2 ++S22S+2EE+EE+EE£EE£2E+2EEzEEzEEerxzrerrrrs 37 Hình 2 7 Ưu tiên mục đích ăn uống trong du lịch - 2 s+2++2E++£x++E++£++£++zxezssrxee 38 Hình 2 8 Mức độ quan tâm về lịch sử và văn hóa âm thực :-s-cx+cc+EcErxsrrrsrerrrree 38 Hình 2 9 Nguồn tìm kiếm thông tin về 4m thực và địa điểm ăn uống - +: 39

Hình 2 10 Chân dung người dùng + 6+ S11 911911 H111 HH TH Hiệp 40 Hinh 020B 44

Hình 2 12 Userflow đăng ký - đăng nhập - - (c1 St *23 2131121 111 1111111 EExre 45

Trương Công Hòa — DI9DCPT090 vill

Trang 10

Hình 2 13 Userflow Tìm kiếm nhà hàng - 2: 2© £+EE£+EE+£EE2EE2EEEEEESEEEEErErrErrkrrree 45

Hinh 2 6/.-uj0 260 0 46

Hình 3 1 Wireframe các man Onboarding - ‹ + + x1 * S191 1 1 nh nh ng rệt 47

Hình 3 2 Wireframe các man Dang ký — đăng nhậtp - - 55 5c 322332 +vvxeereersss 48

Hình 3 3 Wireframe các man Tramg chu - thông báo — tìm kiếm 2-2 s249 Hình 3 4 Wireframe các man Checkin — Đánh gIá - - 6 6 6 + +xk+£vEseEserresrrkee 50 Hình 3 5 Wireframe các man Thông tin chi tiết nhà hàng, quan ăn, món ăn 51 Hình 3 6 Wireframe các man Trang cá nate eceseseeseeseeseeseeeceeeeeseeseeseeseeseeeeseeeeenees 52 Hình 3 7 Logo Hoàn thiện và Ý tuOng c ccccccccescssssssessessesseessessessessessessssesseseessesseseaeseeeees 53

Hinh 3 8 QuyZ0 000 ẺẼ 53

Hình 3 9 Logo âm bản va dương bản 5c 2c 23112112111 1391191111111 11 111 111g ng ry 54

Hình 3 10 Khoảng cach logo an fOảñ 55 222 32 122113 1121191111111 11111 1n ng ng re 54 Hình 3 11 Logo trên các nền mau ccsccesssesssessesssesssessusssesssessesssesssessssssssussussessussssesseseeaes 55 Hình 3 12 Màu S80 ecesccsssssseesesssssssseeseseessssneeeeesesssnneeseeessssnneeeesessssumeuetseesssnnneteeeessneess 56

Hinh 3 13 Phong cht ccc 4Ả.ˆÂˆÂ.ẢỒẢ 57

Hình 3 14 Biểu tong eeeccecceccssessessessecsvessessessessessecsesssessesscssessesssssssssessessessessesesseseaesaeeees 58 Hình 3 15 Hình minh họa - - - (0112201122111 1211 1193111581 11511 11011110111 0111111 1k1 vg 59 Hình 3 16 Hệ thống componenIs 2© 2+ £+EEt2EE£EEESEEEEEEEEE2E12217112712217171 21 xe 60

Hình 3 17 Tổng quan giao diện ứng dụng - + 2+2++EE+EE+EE+EEE2EE2EE2EEEEEEEEEEEEErkrrres 61

Hình 3 18 Giao diện các màn Onboard1ng - - - + +2 E + + **EE+EEseEerersrrererrkerrrsee 62 Hình 3 19 Giao diện các man Đăng ký -.- TH T HH HH HH HH it 63 Hình 3 20 Giao diện các màn Đăng nhập — Quên mật khẫu c- 5c St tt sEErtsrrrerree 64

Hình 3 21 Giao diện các man Trang chu - Yêu thích — Thông báo - : 5+ +-++>+ 65

Hình 3 22 Giao diện các màn Tìm kiếm - ¿2+ Et+ESEE2E1EEEE2E111251121111211211125111 11x 5e2 66 Hình 3 23 Giao diện các màn Chi tiết nhà hàng — món ăn ¿- 22 5222222252 67 Hình 3 24 Giao diện các man Đánh giá — Check ith ccceseeeeeeeessecssceseeeeseesseeseens 68

Hình 3 25 Giao diện các màn Trang cá nhân - - ¿2 22 +22 E 321333 EE+EEEseEeerererreerss 69

Trương Công Hòa — D19DCPT090 1X

Trang 11

đề tài này, tôi đã lựa chọn định luật Gestalt làm nguyên lý cho cơ sở lý thuyết.Sự ápdụng định luật Gestalt trong thiết kế ứng dụng di động không chỉ tập trung vào cácchỉ tiết riêng lẻ mà còn nhìn nhận tổng thé của trải nghiệm người dùng Nguyên lýnày tối ưu hóa việc nhận biết, tương tác và ghi nhớ thông tin, tạo ra giao điện hap dan

va dé sử dụng, giúp ứng dụng di động thu hút và giữ chân người dùng

Hà Nội, trái tim văn hóa của Việt Nam, không chỉ nồi tiếng với những phố

phường cổ kính và các công trình lịch sử, mà còn chứa đựng những hương vị âm thực độc đáo Từ món bún chả thơm ngon đậm đà, đến tô phở nồng ấm và thơmphức Điều này là điều không thể phủ nhận khi bạn bước chân vào thành phố này

Không chỉ có các món ăn nôi tiếng, 4m thực Hà Nội còn rộng lớn với đủ các món

ngon từ đủ các quốc gia và vùng miền, tạo nên một hình ảnh da dang và phong phúcủa nên âm thực Việt Nam

Trong những năm gần đây ở Việt Nam bùng né lên trào lưu food review điềunày chứng tỏ một số xu hướng về hành vi và mong muốn của người tiêu dùng đó là:

- Tang cường trải nghiệm 4m thực: Người tiêu dng không chỉ còn xem việc ăn

uống là một nhu cầu cơ bản, mà còn là một hình thức giải trí và khám phá văn

hóa

- Ưu tiên sự độc đáo và chất lượng: Sự độc đáo được đánh giá cao và chất

lượng của món ăn hơn là việc ăn ở những nơi phô biến Thực khách muốnnếm thử những món ăn đặc biệt và thú vị

- Su tìm kiêm trải nghiệm văn hóa: Họ không chỉ muôn ăn ngon mà còn hiệu vê

Trang 12

nguồn gôc và câu chuyện dang sau môi ăn đó

Với bức tranh đa dạng và phong phú của ầm thực Hà Nội, tôi tin rằng việc tạo

ra một ứng dụng khám phá âm thực Hà Nội sẽ là một bước quan trong dé đáp ứng

nhu cầu ngày càng cao của những người yêu thưởng thức âm thực Ứng dụng khôngchỉ giúp người dùng tìm kiếm và khám phá những món ngon, những nhà hàng độcđáo và chất lượng mà còn mang lại cho họ những trải nghiệm văn hóa đặc sắc, giúp

họ hiệu rõ hơn vê câu chuyện và nguôn gôc của từng món ăn

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

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

Trong lĩnh vực thiết kế một ứng dụng di động, định luật Gestalt đóng vai tròquan trọng Tuy nhiên, tại nước ta còn hạn chế và chưa có nhiều công bồ trong lĩnh vực này Sự kết ứng dụng những nguyên lý Gestalt vào thiết kế UX/UI có tiềm năng lớn, va đây chính là động lực dé tôi tiếp cận đề tài này.

2.2 Tình hình nghiên cứu nước ngoài

Chủ đề về tâm lý học Gestalt đã thu hút sự quan tâm đặc biệt từ cộng đồngnghiên cứu tâm lý, dẫn đến sự xuất hiện của nhiều tài liệu nghiên cứu được quan tâm.Đáng chú ý trong số đó là các cuốn như:

Cuốn "Designing Web Interfaces: Principles and Patterns for RichInteractions" của Bill Scott va Theresa Neil Cuốn sách nay không chỉ giới thiệu vềnguyên lý Gestalt mà còn liên kết chúng với các mẫu thiết kế cụ thể và tương tác trên

giao diện người dùng web.

Cuốn "The Design of Everyday Things" của Don Norman Tuy sách này chủyếu tập trung vào thiết kế sản phẩm đời sông hàng ngày, nhưng Don Norman - tac giảcủa cuốn sách này - giới thiệu cách áp dụng nguyên lý Gestalt vào thiết kế sản phẩm

và giao diện người dùng.

Cuốn “About Face: The Essentials of Interaction Design” của Alan Cooper,

Trang 13

Robert Reimann và David Cronin Sách không chỉ nói về nguyên lý Gestalt mà còn

đi sâu vào các nguyên tắc thiết kế tương tác và làm thế nào chúng áp dụng trong thiết

kê giao diện người dùng.

3 Mục đích và nhiệm vụ

3.1 Mục đích

Trên cơ sở nghiên cứu lý thuyết về định luật Gestalt, ứng dụng vào xây dựng giaodiện ứng dụng di động khám phá ẩm thực “Hà Nội Food” Ứng dụng cung cấp chongười sử dụng các chức năng đa dạng, giúp người dùng tìm hiểu về 4m thực Hà Nội

3.2 Nhiệm vụ

- Nghiên cứu các cơ sở lý luận, phân tích định luật Gestalt và bộ nguyên tắc

trong nó

- _ Nghiên cứu, phân tích đánh giá về Ung dụng di động

- _ Tổng hợp các kiến thức và ứng dung của định luật Gestalt trong thiết kế giao

diện ứng dụng di động.

- _ Nghiên cứu thị trường, phân tích đối thủ từ đó tìm ra cơ hội và thách thức của

đề tài

- Nghiên cứu người dùng, lên kế hoạch về mục tiêu, đối tượng, phạm vi ứng

dụng Tu đó xây dung wireframe cho ứng dụng.

4 Thiết kế giao diện ứng dụng

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

- Đối tượng nghiên cứu: Định luật Gestalt và Ứng dụng khám phá ầm thực;

Khách du lịch, người có nhu cầu về ăn uống, thích trải nghiệm ầm thực Ha

Nội

- Pham vI nghiên cứu:

- Ung dung duoc dat trén nén tang cua hé điều hành iOS với kích thước phổ

biến tiêu biểu 375x812 (iPhone 13 Mini).

Trang 14

- Thời gian: Từ tháng 10/2023 - tháng 12/2023

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

Phương pháp thu thập thông tin bao gồm nghiên cứu tài liệu và thu thập dữliệu thông tin từ nhiều nguồn khác nhau như báo chí và thông tin trên mạng Đây làcác phương pháp tiết kiệm và đa chiều, cho phép thu thập dữ liệu đa chiều và nhiều

khía cạnh khác nhau Quá trình thu thập thông tin đóng vai trò quan trọng, đặc biệt là

trong giai đoạn khởi đầu của nghiên cứu Nó giúp tôi nắm bắt nhu cầu, mong muốn

va phản ứng của người dùng, từ đó có thé tìm ra giải pháp tối ưu và thu thập thông tincần thiết liên quan đến thị trường đề phát triển sản phẩm Tôi không chỉ quan tâm đến

số lượng thông tin mà còn chú trọng đến ý nghĩa và giá trị của thông tin, cũng nhưtính chân thực của thông tin để đảm bảo tính chính xác

Phương pháp khảo sát bang bang câu hỏi - trả lời dé thu thập dữ liệu từ ngườidùng Bảng câu hỏi cho phép tôi tìm hiểu về hành vi, mong muốn và phản ứng của

người dùng Phương pháp này giúp tôi thu thập thông tin chính xác vả đáng tin cậy

dé hỗ trợ quá trình nghiên cứu và tìm ra giải pháp tối ưu cho đề tài

6.Ý nghĩa thực tiễn

Nghiên cứu về định luật Gestalt và ứng dụng nó vào thiết kế giao diện ứngdụng Khám Phá Âm Thực “Hà Nội Food” không chỉ là một quá trình lý thuyết màcòn là hành động mang lại ý nghĩa thực tiễn sâu sắc Trong bối cảnh ngày nay, khingười dùng đối mặt với hàng ngàn ứng dụng trên điện thoại di động, việc tạo ra mộttrải nghiệm giao diện hấp dẫn và tương tác thuận lợi trở thành chìa khóa quyết định

đưa người dùng lựa chọn ứng dụng của mình.

Việc áp dụng định luật Gestalt vào thiết kế giao diện giúp tối ưu hóa trảinghiệm người dùng Băng cách hiểu sâu hơn về cách mà con người nhận thức vàtương tác với thông tin trên màn hình, chúng ta có thé tạo ra những trải nghiệm ứngdụng tốt nhất Trong ngữ cảnh của Hanoifood, điều này có nghĩa là việc người dùng

Trang 15

có thé dé dang khám phá những món ăn ngon và những địa điểm dé thưởng thức

những món ăn đó.

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

Chương I: Nghiên cứu lý thuyết

Chương đầu tiên tổng quan về các kiến thức lý thuyết liên quan đến “ Định luậtGestalt”, “ Ứng dụng di động” và Ảnh hưởng của định luật trong thiết kế giao diện

ứng dụng di động.

Chương II: Nghiên cứu về ứng dụng di động “Hà Nội Food”

Nghiên cứu tong quan thị trường ứng dụng đi động về am thực, phân tích các đối thủcạnh tranh từ đó tìm ra cơ hội và thách thức của đề tài Xác định mục tiêu ứng dụng,nghiên cứu ứng dụng, nghiên cứu người dùng, xây dựng Persona, kiến trúc thông tin

và các chức năng ứng dụng dé giải quyết van đề người dùng.

Chương III: Thiết kế giao diện ứng dụng di động “Hà Nội Food”

Ứng dụng các kết quả nghiên cứu của chương 1 và chương 2 dé xây dựng wireframe

và thiết kế giao điện ứng dụng đi động “Hà Nội Food”

Trang 16

1 Tổng quan về định luật Gestalt

1.1 Định luật Gestalt là gì?

Định luật Gestalt, xuất phát từ tiếng Đức có nghĩa là "hình thức" hoặc "cau

trúc", đại diện cho một trường phái quan trong trong tâm lý hoc và nghệ thuật, đặc

biệt là trong lĩnh vực nhận thức hình ảnh Nó được xây dựng dựa trên giả thuyết rằng

“một tông thể được sắp xếp hợp lý sẽ hiệu quả hơn tất cả các thành phan của nó”

Nhà tâm lý học Kurt Koffka đã tóm tắt ngắn gọn toàn bộ nguyên ly Gestaltbang một câu nói như sau: “Tổng thể của một sự vật không phải là một tập hợp từnhững thành phần rời rạc lại với nhau”

Nguồn gốc của định luật Gestalt ra đời tại Đức vào đầu thế kỷ XX, dựa trêncông trình nghiên cứu về nhận thức của các nhà tâm lý học Max Wertheimer, Kurt

Koffka va Wolfgang Kohler giải thích hành vi của con người bị ảnh hưởng bởi cách

mà họ nhận thức trong thực tế ((Palmer, SE Vision Science: Photon toPhenomenology (Nhà xuất bản Viện Công nghệ Massachusetts, Cambridge,

Massachusetts, Hoa Kỳ, 1999).

Tâm lý hoc Gestalt tập trung vào cách chúng ta nhìn thức, hiểu và trải nghiệmthé giới xung quanh thông qua việc tổ chức và hiểu các yếu tô thị giác thành các mauhình hoặc hình ảnh toàn vẹn Điều này có nghĩa là thay vì chúng ta nhìn thấy các yếu

tố cụ thể một cách riêng lẻ, chúng ta thường nhìn thấy các hình ảnh hoặc mẫu hìnhtoàn bộ.Tâm lý hoc Gestalt tập trung vào cách chúng ta nhìn thức, hiểu và trai

Trang 17

nghiệm thế giới xung quanh thông qua việc tổ chức và hiểu các yếu tố thị giác thànhcác mẫu hình hoặc hình ảnh toàn vẹn Điều này có nghĩa là thay vì chúng ta nhìn thấycác yêu tố cụ thê một cách riêng lẻ, chúng ta thường nhìn thấy các hình ảnh hoặc mẫu

hình toàn bộ.

Định luật Gestalt không chỉ dừng lại ở lĩnh vực tâm lý học mà còn được áp

dụng mạnh mẽ trong nhiều lĩnh vực khác như thiết kế đồ họa, quảng cáo, kiến trúc vàthậm chí là trong thiết kế đưa ra những hướng dẫn quan trọng cho việc thiết kế tươngtác và trải nghiệm né ứng dụng di động Với quan điểm tập trung vào việc hiểu vềcách con người nhìn nhận và tập trung vào tô chức thông tin một cách tự nhiên Địnhluật Gestalt giúp tạo ra các sản phẩm và ứng dụng mà người dùng dé dàng hiểu và sửdụng Cách tiếp cận này đã trở thành một yếu tố quan trọng trong việc xây dựng cácgiao diện người dùng hấp dẫn và hiệu quả trong thế giới kỹ thuật số ngày nay

1.2 Các nguyên tắc trong định luật Gestalt

Có nhiều kiểu đồng bộ khác nhau: hình khối, kích cỡ, hay màu sắc Nếu bạnđặt những vật thể có độ tương đồng cao nằm cạnh bên, não sẽ tự động tạo dựng nênmỗi liên kết mật thiết giữa chúng Khi sắp xếp những vật thể tương đồng cùng nhau,

du là qua hình dạng, kích thước hay mau sắc, não bộ tự động tạo ra mối liên kết tự

Trang 18

Hình 1 2 Những hình có màu xanh lam tạo thành một nhóm

Trương Công Hòa — DI9DCPT090

Trang 19

Nguôn: nngroup.com

(Nguồn: nngroup.com)Các vòng tròn lớn trong đô họa này có thể được coi là thuộc về một nhóm khác với

các vòng tron có kích thước nhỏ hon.

1.2.2 Nguyên tắc gan bên (Proximity)

Nguyên tắc gần bên mô tả cách con người tự nhiên nhóm các yếu tố lại vớinhau khi chúng gần nhau trong không gian Theo nguyên tắc này, các yếu tố đồ họahoặc vật thé được sắp xếp gần nhau sẽ được nhìn thấy như một nhóm hoặc một đơn

vị thay vì các yêu tô riêng lẻ.

Trang 20

086 OA A9 6€

^A@6 66

NN/g

Hinh 1 4 Nguyén tac gan bénKhoảng trắng tách các hình dang thành hai nhóm riêng biệt thông qua nguyên tắcgân nhau Ngay cả khi bao gồm các hình dạng khác nhau trong mỗi nhóm, hai nhóm

này vẫn rõ ràng

(Nguồn: nngroup.com)

Tuy nhiên, nhóm các yếu tố này thành những khu vực riêng biệt nhau hoặctách rời chúng bởi các khoảng trắng cũng mang đến hiệu ứng tương tự

1.2.3 Nguyên tắc liên tục (Continuation)

Nguyên tắc này mô tả cách con người tự nhiên nhìn thức và hiểu thế giới xung

quanh dựa trên các đường liên tục, không bị gián đoạn hoặc chia rẽ.

Trong vô thức, tâm trí luôn tự lấp day các khoảng trống giữa các vật thé, vàtạo cho chúng một sự chuyển động liên tục.Não ta nhìn nhận những vật thé được đặttrên đường thắng hoặc đường cong có liên quan với nhau so với những vật thể được

đặt bừa bộn.

Trang 21

Hình 1 5 Nguyên tắc liên tục

1.2.4 Nguyên tắc đóng kin (Closure)

Khi một vật thé có hình dạng không toàn diện hay không kín, mắt người có xuhướng hoàn thành nốt phan còn lại va lap đầy khoảng trong, bằng cách tưởng tượngcác đường nét, màu sắc hoặc hoa van (pattern) xuất hiện ở xung quanh vật thé đó

Điển mau chốt của nguyên tắc nay, là chỉ cần thé hiện đủ các tính chất thiếtyếu của một chủ thé, những yếu tố khiếm khuyết còn lại sẽ được não bộ tự động thêm

vào.

Ví dụ như hình ảnh gấu panda trong logo của World Wildlife Fund, các đườngviền như bị “vẽ thiếu”, tuy nhiên não bộ chúng ta vẫn hình dung ra đầy đủ chỉ tiết củathực thể này

Trang 22

1.2.5 Nguyên tắc chính — phụ (Figure — ground)

Khi một vật thé có hình dạng không toàn diện hay không kín, mắt người có xu

hướng hoàn thành nốt phan còn lại và lap đầy khoảng trống, bằng cách tưởng tượngcác đường nét, màu sắc hoặc hoa văn (pattern) xuất hiện ở xung quanh vật thé đó.

Nguyên tắc Chính-phụ đôi khi được so sánh với nguyên tắc Đóng kín(Closure), một khía cạnh khác của thị giác Nguyên tắc Đóng kín liên quan đến khảnăng của tâm trí chúng ta tự động hoàn thiện các hình dạng không hoàn chỉnh để tạo

ra một hình ảnh hoàn chỉnh và có ý nghĩa Cả hai nguyên tắc này đều liên quan đến

cách chúng ta xử lý không gian âm bản (negative space) trong hình ảnh.

Khi thiết kế, việc sử dụng nguyên tắc Chính-phụ có thể tạo ra ấn tượng mạnh

mẽ đối với người nhìn, đặc biệt là khi có sự kết hợp với nguyên tắc Đóng kín Việctạo ra một hiéu biết rõ ràng về sự phân biệt giữa chủ thé và phần nền trong một thiết

kê có thê tạo ra sự thú vi va gây ân tượng mạnh mẽ.

Trang 23

Nguồn: (fedex.com)Trong logo này, chữ "Ex" tạo thành một mãi tên, tạo ra hình anh của một chu thể rõ ràng (mũi tên) trên nên phụ (các chữ cái còn lại) Sự tách biệt rõ ràng giữa chủ thể

và phan nên tạo ra một an tượng mạnh mẽ và dê nhận biét cho người nhin.

Mức độ ôn định hoặc không 6n định của nguyên tắc Chính-phụ thường phụ

thuộc vào mức độ dé nhận diện của vật thé va phần nền Trong các thiết kế phức tạp

hoặc không rõ ràng, việc phân biệt giữa chủ thé và phần nền có thé trở nên khó khăn,gây ra sự không 6n định trong việc nhận thức hình anh Tuy nhiên, khi được thiết kếmột cách rõ ràng và sáng tạo, nguyên tắc Chính-phụ có thé tạo ra một hiệu ứng mạnh

mẽ và cuôn hút.

1.2.0 Nguyên tắc đối xứng và thứ tự (Symmetry and Order)

Nguyên tắc đối xứng và thứ tự hay còn gọi là Prägnanz trong tiếng Đức ChữPrägnanz trong tiếng Đức, tạm dịch là “tối giản, ngắn gọn, bản chất vốn có.” Theonguyên tắc này, khi đối diện với những hình ảnh mơ hồ, não bộ con người sẽ tự mặcđịnh đưa nó về hình thái đơn giản nhất có thể

Trang 24

Não bộ sẽ tự hình dung ra hình tam giác, hình tròn và hình chữ nhật dù các đường

nét ở hình bên trái không được vẽ day đủ

(Nguồn: Internet)

Con người bam sinh đêu yêu thích sự đơn giản, rõ ràng va ngăn nap Ta luôn

Trang 25

thích những thứ có thé dễ dang nắm bat, và có xu hướng tránh xa những gi rắc rối.

Cơ chế hoạt động này giúp chúng ta bớt tốn não và thời gian dé nhận thức một van

dé, và quan trọng là ta không bị bỡ ngỡ khi nhìn vào

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

2.1 Ứng dụng di động là gì?

Ứng dụng di động (hay còn gọi là mobile app) là một loại phần mềm đượcthiết kế và phát triển để chạy trên các thiết bị di động như điện thoại thông minh(smartphones), máy tính bảng (tablets) và các thiết bị di động khác Ứng dụng diđộng giúp người dùng thực hiện các chức năng và nhiệm vụ cụ thể trên thiết bị của

họ một cách thuận tiện và dễ dàng Các ứng dụng di động có thé được tải xuống vàcài đặt từ các cửa hàng ứng dụng chính thức như Google Play Store (đối với thiết bịAndroid) hoặc App Store (đối với thiết bị iOS)

Các ứng dụng di động có thể được phát triển để cung cấp nhiều chức năng khác nhau, bao gồm giải trí, giao tiếp, mua sắm trực tuyến, giáo dục, y tế, ngân hàng

trực tuyến, quản lý công việc, và nhiều lĩnh vực khác Sự phổ biến của các thiết bị di

động đã tạo ra một hệ sinh thái đa dạng của các ứng dụng, giúp người dùng tận

hưởng trải nghiệm sống và làm việc hiệu quả hơn trên các thiết bị di động của họ

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

Ứng dụng di động có thể được phân loại thành ba loại chính dựa trên cáchchúng được phát triển và triển khai: Native apps, Web apps và Hybrid apps

- Native Apps: Ứng dung Native được phát triển đặc biệt cho một nền tảng cụ

thé như Android hoặc iOS bằng các ngôn ngữ và công cụ lập trình chính thốngcủa nền tảng đó (ví dụ: Java hoặc Kotlin cho Android, Swift hoặc Objective-Ccho iOS) Ứng dụng này được tối ưu hóa hoàn toàn cho hệ điều hành và phần cứng của thiết bị di động, cung cấp trải nghiệm người dùng tốt nhất về hiệu

suât và tương tác.

Trang 26

- Web Apps: Ứng dụng Web di động được truy cập thông qua trình duyệt web

của thiết bị đi động và không yêu cầu cài đặt từ cửa hàng ứng dụng Chúngđược viết bằng các ngôn ngữ web như HTML, CSS và JavaScript, và thườngđược thiết kế để tương thích với nhiều thiết bị và nền tảng Web apps không thể tận dụng đầy đủ các chức năng phần cứng của thiết bị di động, nhưngchúng có thé cung cấp trải nghiệm độc lập với nền tang và không yêu cầu pháttriển riêng biệt cho từng nền tảng

- Hybrid Apps: Ung dụng Hybrid kết hợp cả hai yếu tố của Native và Web

apps Chúng được viết băng các công nghệ web như HTML, CSS và

JavaScript, sau đó được bọc trong một lớp native container, cho phép chúng chạy như một ứng dụng Native Các công nghệ như React Native, Flutter,

hoặc Xamarim thường được sử dụng dé phat trién ứng dung Hybrid Hybridapps cung cấp sự linh hoạt của Web apps và cũng có thé tận dung được một sốchức năng Native, giúp giảm chỉ phí phát triển đa nền tảng

2.3 Quy trình thiết kế một ứng dụng di động theo mô hình Design Thinking

Design thinking là một phương pháp tiếp cận sáng tạo giải quyết van dé,thường được áp dụng trong quá trình thiết kế sản phẩm hoặc dich vụ mới Phươngpháp này tập trung vào việc hiểu rõ người dùng, đặt họ vào trung tâm của quá trìnhthiết kế dé đảm bao sản phẩm cuối cùng đáp ứng đúng nhu cầu và mong muốn của

họ Dưới đây là một quy trình thiết kế ứng dụng di động sử dụng mô hình Design

Thinking.

2.3.1 Đồng cảm (Empathize)

"Empathize" (Đồng cảm) trong quy trình Design Thinking là một giai đoạnquan trọng nhằm hiểu rõ và đồng cảm với người dùng cuối Trong bước này, nhómthiết kế hoặc người làm dự án sẽ nỗ lực đặt mình vảo vị trí của người dùng để hiểu rõ

họ, những nhu cầu của họ, thách thức mà họ đang phải đối mặt, và cách họ tương tác

Trang 27

voi sản phẩm hoặc dịch vụ mà bạn đang phát triển

Một số hoạt động và phương tiện thường được sử dụng trong bước Empathize:phỏng vấn người dùng; quan sát trực tiếp, ghi lại câu chuyện người dùng; khảo sát và

nghiên cứu thi trường: tao persona.

2.3.2 Xác định (Define)

Bước "Define" trong quy trình Design Thinking là giai đoạn quan trọng giúp

định rõ van dé cần giải quyết sau khi đã thu thập thông tin và đồng cảm với ngườidùng ở bước "Empathize" Ở giai đoạn này, nhóm thiết kế xác định một cách chínhxác vấn đề cụ thể mà họ sẽ tập trung giải quyết Bước "Define" bao gồm các hoạt

Xác định mục tiêu: Đặt ra mục tiêu chỉ tiết cho quá trình thiết kế và xác định

tiêu chí đo lường thành công.

Người dung và người tiêu ding: Đặt ra mục tiêu chi tiết cho quá trình thiết kế

và xác định tiêu chí đo lường thành công.

Thu thập ý kiến: Tổ chức cuộc họp đề lắng nghe ý kiến và đề xuất từ người

dùng và liên quan.

Xác định Ràng buộc: Xác định các ràng buộc kỹ thuật, tài chính và thời gian.

Xác định Tính Năng và Yêu cầu: Liệt kê các tính năng và yêu cầu cụ thể cho

giải pháp.

2.3.3 Tìm ý tưởng (Ideate)

Ở bước thứ ba của quy trình thiết kế ứng dụng di động theo mô hình DesignThinking, sau khi đã hiểu rõ người dùng và đặt ra vấn đề cụ thể, tư duy sẵn sàng đểphát triển các ý tưởng sáng tạo Dựa trên thông tin thu thập được từ hai bước trước,

Trang 28

có cơ sở đề bắt đầu tìm kiếm những giải pháp mới và độc đáo cho ứng dụng di động.

Có nhiều phương pháp tư duy hữu ích trong bước này, bao gồm Brainstorm,Brain Write, Worst Possible Idea, và SCAMPER Điều quan trọng là tạo ra nhiều ýtưởng và giải pháp da dạng nhất có thé Nên lựa chọn một số phương pháp dé ápdụng và kiểm thử tính khả thi của các ý tưởng Qua đó, sẽ có cơ hội tìm ra giải pháp

tôt nhât và phù hợp nhât với nhu câu và mong muôn của người dùng.

2.3.4 Mẫu thử nghiệm (Prototype)

Đây là bước mà bạn sẽ hữu hình hóa các ý tưởng của mình bằng những môhình hay sản phâm mẫu, từ đó có thé nghiên cứu tìm kiếm các giải pháp tốt nhất chotừng vấn đề đã đặt ra ở 3 bước trước Bản mô hình hoặc bản thử nghiệm của sảnphẩm, giúp đội thiết kế kiểm thử và hiểu rõ cách người dùng tương tác với ứng dụngtrước khi triển khai chính thức Mục tiêu của việc tạo prototype là thu thập phản hồi

từ người dùng, điều chỉnh giao diện và trải nghiệm người dùng, và đảm bảo tính khảthi của ý tưởng trước khi đầu tư vào quá trình phát triển đầy đủ Prototype giúp giảmrủi ro và chi phí, đồng thời tăng cơ hội thành công cho ứng dụng di động

2.3.5 Kiém thử (Testing)

Kiểm thử đóng một vai trò quan trọng trong quy trình thiết kế theo mô hìnhDesign Thinking, đảm bảo răng giải pháp được tạo ra đáp ứng mục tiêu và mong đợicủa người dùng Quá trình này giúp thu thập phản hồi quan trọng từ người dùng vaxác định điểm mạnh cũng như điểm yếu của giải pháp, từ đó hỗ trợ quá trình cải tiến.Dưới đây là các bước chỉ tiết của quá trình kiểm thử trong Design Thinking

- _ Lên kế hoạch kiểm thử: Xác định phương pháp và chiến lược kiểm thử, đặt ra

mục tiêu cụ thê để đảm bảo việc kiểm thử diễn ra hiệu quả

- Tạo mô hình kiểm thử: Tao mô hình hoặc bản thử nghiệm của giải pháp dé

người dùng có thể tương tác và trải nghiệm trước khi triển khai rộng rãi

- Tiến hành kiểm thử: Người dùng tham gia tiến hành kiểm thử, tương tác và

Trang 29

chia sẻ phản hồi về giải pháp, cung cấp thông tin quan trọng về trải nghiệm

của họ.

- Thu thập dữ liệu và phản hồi: Thu thập dé liệu từ quá trình kiểm thử và phan

hồi của người dùng, giúp đội ngũ thiết kế có cái nhìn chỉ tiết về hiệu suất của

giải pháp.

- Đánh giá và cải tiến:Dựa trên dữ liệu thu thập, đánh giá hiệu suất của giải

pháp và xác định những cải tiến cần thiết trước khi triển khai rộng rãi, đảm bảo sự hoàn thiện và đáp ứng tốt nhất cho người dùng

3 Ảnh hưởng của định luật Gestalt vào thiết kế ứng dụng di động

3.1 Nguyên tắc đồng bộ (Similarity)

Trong thiết kế ứng dung di động, nguyên tắc đồng dạng được áp dụng dé tạo

ra mối quan hệ sâu sắc giữa các thành phan, bat ké đó là các yếu tô về tính vật lý hay

khái niệm.

1:20 PM.

McDonald

‘S ai ` == ` ~ 1245 5674 7748 6547 Hamburger French Fries 1223

Trang 30

Hình 1 10 Ung dụng nguyên tắc dong trong thiết kế ứng dụng di động

Các món ăn được thiết kế cùng phân cấp thông tin

(Nguôn: Dribbble)

Bằng cách áp dụng nguyên tắc đồng dạng, trải nghiệm người dùng (UserExperience — UX) sẽ được cải thiện đáng kể Điều này giúp thu hút sự chú ý củangười dùng bằng cách tạo ra một giao diện đồng nhất và thống nhất cho các thànhphần trong sản phâm Sự nhất quán này không chỉ tạo ra một trải nghiệm thâm mỹ

mà còn giúp người dùng dễ dàng tìm thấy thông tin, tăng sự hấp dẫn và tương táctrên ứng dụng Điều nay góp phan làm tăng chất lượng của sản phẩm và thú vị ngườidùng, tăng khả năng tiếp cận thông tin và tăng độ tin cậy vào sản phẩm

Khi áp dụng nguyên tắc đồng bộ trong thiết kế menu, hay thanh điều hướngtruy cập (navigation), nó thực sự giúp người sử dụng nhận thấy đâu là những thôngtin có cùng phân cấp, hay mức độ quan trọng

3.2 Nguyên tắc gần bên (Proximity)

Trong việc thiết kế ứng dụng di động, có thé tận dụng nguyên tắc gần kè dénhóm các thông tin liên quan lại với nhau và cải thiện cau trúc hién thị Việc sử dụngnguyên tắc gần kề đúng cách sẽ có ảnh hưởng tích cực đối với việc truyền đạt thôngđiệp và trải nghiệm của người dùng Dưới đây là những ảnh hưởng của nguyên tắcgần kê trong thiết kế ứng dụng di động

- _ Tổ Chức Logic: Nhóm các yếu tố gần nhau giúp tạo ra một cấu trúc hợp lý và

logic trong giao diện, giúp người dùng dễ theo dõi và hiểu cấu trúc chung của

ứng dụng.

- Tăng Tính Nhất Quán:Sự nhất quán trong việc sắp xếp các yếu tố gần nhau

theo nhóm giúp tao ra một trải nghiệm giao diện đồng nhất va dé nhìn

- _ Nhanh Chong Hiểu Biết: Các nhóm yếu tố gần nhau hỗ trợ người dùng nhanh

chóng hiệu biét môi quan hệ và chức năng của từng phân trong giao diện.

Trang 31

- Thuan Tiện Truy Cập: Việc đặt các chức năng liên quan gần nhau giúp người

dùng dé dàng truy cập và sử dụng, tối ưu hóa trải nghiệm người dùng

- Tạo Sự Hài Hòa Thị Giác: Các nhóm yếu tố gần nhau, với sự tách rời bang

khoang trang có tô chức, tao ra sự hai hòa thị giác trong giao diện.

Lấy ví dụ như trong thiết kế trang chỉ tiết sản phâm của một ứng dụng muahàng, nếu muốn hiển thị thông tin như tên sản phẩm, giá, mô tả và nút "Mua Ngay".Khi sử dụng nguyên tắc gần kề, ta đặt tất cả các thành phần này gần nhau, có thể xếp chồng lên nhau hoặc đặt chúng trong một khung viền nhỏ Bang cách này, người dùng có thé dé dàng nhận biết các thông tin liên quan đối với sản phẩm đó một cách

Trang 32

3.3 Nguyên tắc liên tục (Continuation)

Nguyên tắc liên trong thiết kế giao diện ứng dụng di động chủ yếu tập trungvào việc tôi ưu hóa trải nghiệm người dùng, tạo ra một quá trình tương tác mượt mà

và không gián đoạn khi họ tương tác với ứng dụng Điều này đòi hỏi sự liên kết hợpnhất giữa các trang và yêu tô giao diện, nhằm giúp người dùng di chuyển qua các

màn hình một cách tự nhiên và dễ dàng mà không gặp phải sự gián đoạn hay chậm

trễ không mong muốn

Chang hạn, khi xem video trong ứng dụng, người dùng có thé chạm hai lầnvào màn hình để tiến tới vài giây tiếp theo mà không cần phải chuyên đến một trangmới Thực hiện điều này giúp duy trì sự liên tục trong quá trình xem và tránh gây

gián đoạn cho trải nghiệm người dùng Việc này không chi tăng cường sự thoải mái

mà còn tăng tính tương tác và tận hưởng cho người dùng, họ có thể tập trung vào nộidung mà không bị gián đoạn bởi các chuyển động không cần thiết

10 -seconds

Hình 1 12 Ung dụng nguyên tắc liên tục trong thiết kế ứng dung di độngTrong ứng dụng Youtube, người dùng có thé chạm hai lan vào màn hình

để tiễn tới vài giây tiếp theo

Trang 33

(Nguồn: Internet)

Tóm lại, nguyên tắc liên tục không chỉ đảm bảo sự mượt mà và thoải mái

trong tương tác, mà còn nâng cao khả năng tập trung và hài lòng của người dùng khi

sử dụng ứng dụng di động.”

3.4 Nguyên tắc đóng kín (Closure)

Khi áp dụng nguyên tắc này, chúng ta tận dụng khả năng của não bộ tự độnglap đầy những khoảng trống thông tin dé tạo ra một thé thống nhất Băng cách sửdụng nguyên tắc đóng kin trong thiết kế ứng dụng di động, chúng ta có thé giảm sốlượng yếu tố cần thiết đề truyền đạt thông tin, từ đó làm giảm mức độ phức tạp củagiao diện và tạo nên những thiết kế hap dẫn hơn

Thường thấy nhất của việc áp dụng nguyên tắc này đó là thiết kế bộ icon.Nguyên tắc này giúp tạo ra các biểu tượng dễ nhìn thấy, hiểu, và nhận diện một cáchnhanh chóng Khi áp dụng nguyên tắc đóng kín, các biéu tượng thường được thiết kếsao cho hình dang và chi tiết của chúng tạo ra một hình ảnh hoàn chỉnh, không để lạikhoảng trống hay cảm giác thiếu

OZ VW SG @ QA

9 & ¿ @ © 8

& OvVEC ð% 7

Hình 1 13 Ứng dụng nguyên tắc đóng kín trong thiết kế ứng dụng di động

Trang 34

Nguyên tắc đóng kin được ứng dụng nhiều trong các biểu tượng (icon),

dé đạt được sự toi giản và hiệu quả trong việc truyền tải thông điệp

(Nguôn: Internet)

3.5 Nguyên tắc Chính - phụ (Figure - ground)

Nguyên tắc Chính-Phụ trong thiết kế giao diện ứng dụng di động tập trung vàoviệc tạo ra sự phân biệt rõ ràng giữa các thành phần chính (figure) và nền (ground)

của giao diện Điều này giúp người dùng dễ dàng nhận biết và tập trung vào các yêu

tố quan trọng, tăng cường trải nghiệm người dùng

Dưới đây là một số ảnh hưởng quan trọng của nguyên tắc chính - phụ trongthiết kế ứng dụng di động:

Dễ nhận biết thông tin: Sự phân biệt rõ ràng giữa hình chính và nền giúpngười dùng dé dàng nhận biết và tập trung vào các phan quan trọng của giao

diện ứng dụng.

Tăng sự rõ ràng và sắc nét: Giúp tạo ra sự rõ ràng và sắc nét trong thiết kế,làm cho các phần tử trên giao diện trở nên dễ nhận diện hơn

Cải thiện trải nghiệm người dùng: Thiết kế sử dụng nguyên tắc chính - phụ tạo

ra một trải nghiệm người dùng tốt hơn, vì họ có thể dễ dàng hiểu và tương tác

với giao diện mà không gặp khó khăn.

Tao sự ưu tiên hóa: Giúp xác định sự ưu tiên giữa các yếu tố trên giao diện Những phan tử được làm nồi bật hơn sẽ thu hút sự chú ý hơn.

Phân loại thông tin: Giúp phân loại thông tin và tạo ra một cấu trúc tổ chứclogic, giúp người dùng dé dàng hiểu nội dung và mối quan hệ giữa các yếu tố

trên giao diện.

Tăng tính tương tác: Ví dụ như khi sử dụng hiệu ứng hover dé làm nổi bật cácphan tử khi người dùng di chuột qua chúng

Tối ưu hóa không gian: Sự phân biệt giữa hình chính và nền cũng có thể giúp

tôi ưu hóa sử dụng không gian trên giao diện, tạo ra một trải nghiệm mở rộng

Trang 35

và thoải mái.

Ứng dụng nguyên tắc chính-phụ trong thiết kế của ứng dụng đọc tin tức giúpngười dung dé dàng tập trung vào tiêu dé và hình ảnh chính của tin tức, đồng thời giữ

cho thông tin liên quan như thời gian mà không làm xáo trộn trải nghiệm đọc cua họ.

Sự tương phản giữa các yếu tố chính và nền giúp cải thiện độ đọc và hiểu bản tin một

cách nhanh chóng và dễ dàng

Discover Lorem ipsum dolor sit amet,

‘News of the Day consectetur elity Cras: |

molestie maximus Lorem ipsum dolor sit amet,

consectetur elit Cras ae , 2 Aka molestie maximus

Health Politics Art Fo

Breaking News More Lorem ipsum dolor sit amet,

consectetur elit Cras

molestie maximus

Hình 1 14 Ung dụng nguyên tắc chính — phụ trong thiết kế ứng dụng di động

Ứng dụng nguyên tắc chinh-phu trong thiết kế của ứng dung đọc tin tức

(Nguôn: Internet)

3.6 Nguyên tắc đối xứng và thứ tự (Symmetry and Order)

Nguyên tắc đối xứng trong thiết kế ứng dung di động có ảnh hưởng tích cựcđến thâm mỹ và trải nghiệm người dùng Sự cân đối giúp tạo ra giao diện đẹp mắt, dễhiểu, và nhất quán Nó cũng giúp giảm mệt mỏi, tăng thoải mái cho người dùng, vàlàm nổi bật các yếu tố quan trọng Đối xứng không chỉ làm tăng tính chuyên nghiệp

mà còn tối ưu hóa trải nghiệm người dùng, tăng khả năng nhận thức và tưởng tượng,tạo ra một giao diện dễ sử dụng và hấp dẫn

Một vi dụ tiêu biéu cho nguyên tắc này là việc đặt nút "Quay lại" và nút "Tiếp

Trang 36

theo" ở hai bên cạnh màn hình, tạo ra một cảm giác đối xứng và thuận tiện cho ngườidùng khi họ chuyên đến các bước tiếp theo hoặc quay lại trang trước đó Sự đối xứngnày không chỉ tạo ra một giao điện đẹp mắt mà còn tăng cường tính hợp nhất và sự

dễ dàng của trải nghiệm người dùng

và hình ảnh, là cơ sở lý thuyết quan trọng cho việc áp dụng trong thiết kế ứng dung di

động.

Tiếp theo, tôi đã đề cập đến ý nghĩa của ứng dụng di động, phân loại chúng và

Trang 37

quy trình thiết kế một ứng dụng theo mô hình Design Thinking Việc này giúp tôihiểu rõ về bối cảnh thiết kế ứng dụng di động và cách mà Design Thinking có thêđược tích hợp đề tạo ra sản phâm đáp ứng nhu cầu người dùng

Cuối cùng, tôi đã xem xét ảnh hưởng của Định Luật Gestalt trong thiết kế ứng dụng di động Việc áp dụng các nguyên tắc như sự tương phản, sự tương đồng và sựliên kết giúp tạo ra trải nghiệm người dùng hấp dẫn và hiệu quả Đến với Chương II,tôi sẽ đi sâu hơn vào việc nghiên cứu hiện trạng của đối tượng trong dé tài - Ứng dụng di động khám phá âm thực và áp dụng cơ sở lý thuyết Chương I trên về Địnhluật Gestalt vào thiết kế giao diện ứng dụng “Hà Nội Food”

Trang 38

CHUONG II: NGHIÊN CỨU VE UNG DỤNG “HÀ NOI FOOD”

Sau khi nghiên cứu các lý thuyết để làm cơ sở ở chương I, trong chương II tôi di sâuhơn vào việc nghiên cứu chỉ tiết về ứng dụng "Hà Nội Food" Đề hiểu rõ hơn về ứngdụng này, trước hết, tôi sẽ tiễn hành một nghiên cứu tong quan vé "Hà Nội Food,"tạo nên một cái nhìn tổng thé và hình ảnh trực quan về ứng dụng Sau đó, tôi sẽ tiếnhành việc phân loại đối tượng người dùng một cách hợp lý để xây dựng các persona

Từ đó, cung cấp các giải pháp cho các van dé và xác định cụ thé các tinh năng quantrọng để mang lại một trải nghiệm tốt nhất cho người dùng của ứng dụng này

lịch và văn hóa địa phương của Thủ đô Hà Nội.

Nghiên cứu của Tổ chức du lịch âm thực thế giới (World Food TourismAssociation - WFTA) cho thấy rằng có đến 81% du khách quốc tế có nhu cầu tìmhiểu về âm thực địa phương tại điểm đến của họ Họ sẵn sảng dành trung bình 25%chi phi du lịch dé chi tiêu cho âm thực Điều nay cho thấy sức hấp dẫn của âm thựcđịa phương không chỉ là một phần quan trọng của trải nghiệm du lịch mà còn là yếu

tố quyết định trong việc thu hút du khách đến một điểm đến

Trang 39

Xu hướng du lịch 4m thực theo một nghiên cứu của Hiệp hội ầm thực vào năm

2020 cho thấy:

- Thé hệ Millennials và Gen Z là hai nhóm đối tượng hứa hẹn nhất trong lĩnh

vực du lịch âm thực: 77% khách du lịch thuộc thế hệ Millennials (sinh từ 1981 đến 1996) thực hiện các chuyến đi với mục tiêu tận hưởng những trải nghiệm

am thực đáng nhớ Thế hệ Z (sinh sau năm 1996) cũng được theo dõi cận cậnvới sự mạnh mẽ trong việc tham gia vào việc khám phá đồ ăn và thức uốngđịa phương khi họ đi du lịch, bat ké họ còn trẻ và ít kinh nghiệm du lịch Hiệphội Du lịch Âm thực Thế giới xác định Thế hệ Z là "Những người siêu ănuống" nhờ vảo sự tập trung cao của họ đối với âm thực, lịch sử và di sản liên

quan.

- Du khách âm thực thích du lịch năng động và chi tiêu nhiều hơn: cuộc khảo

sát cho thấy khách du lịch 4m thực thường quan tâm nhiều hơn đến việc tham

gia vào một loạt các hoạt động du lịch, ngoài đồ ăn và thức uống Họ dường

như tận dụng tối đa các chuyên đi của mình bằng cách tham quan các điểmtham quan văn hóa, mua săm, tham gia các tour du lịch và tham dự các sự kiện

và budi biéu diễn Khách du lich ẩm thực cũng có xu hướng “chi tiêu nhiều

hơn 24% mỗi ngày so với những khách du lịch giải trí khác”

- Du khách tìm kiếm sự đa dạng trong trải nghiệm du lịch 4m thực của họ: Họ

ưa chuộng trải nghiệm đồ ăn và thức uống đa dạng, bao gồm cả món ăn bảnđịa và những món ăn nổi tiếng Điều này được thé hiện qua bốn hoạt động dulịch 4m thực chính: thưởng thức các bữa ăn dé ghi nhớ, khám phá nha hàngđược giới sành ăn giới thiệu, thưởng thức đồ ăn đường phố từ quay hàng, vatham quan những nhà hàng nổi tiếng Ngoài ra, họ còn thích tham gia vào các

hoạt động khác như hội chợ ầm thực, tham quan các lễ hội 4m thực, trai

nghiệm trang trại và nhà máy rượu, tham gia các lớp học nấu ăn và tham dựcác tour du lịch âm thực với hướng dẫn viên.

- Ban bè và gia đình, truyền thông, là những người có ảnh hưởng mạnh nhất đến

Trang 40

quyết định du lịch: Ảnh hưởng lớn nhất đến quyết định ghé thăm một điểmđến mới của du khách là lời giới thiệu của bạn bè và gia đình (61% tổng sốngười được hỏi) 53% khách du lịch âm thực tin tưởng các trang web đánh giátrực tuyến và 41% trong số họ bị ảnh hưởng bởi các bài đăng trên mạng xã hội

từ bạn bẻ va gia đình Theo nghiên cứu “Food Travel Monitor 2020”, “85%

Millennial và 85% khách du lịch thế hệ Z chia sẻ trải nghiệm du lịch của họtrên phương tiện truyền thông xã hội trong ít nhất một nửa chuyến đi của họ”.Điều này thé hiện tiềm năng lớn về việc quảng bá miễn phí và đáng tin cậy

cho các tổ chức thực phẩm và đồ uống, các tô chức này cần nỗ lực đặc biệt đề

khuyến khích khách hàng chia sẻ kinh nghiệm của họ trên phương tiện truyền

thông xã hội với bạn bè và gia đình.

- Du khách thích trải nghiệm ầm thực địa phương, đích thực và có trách nhiệm

với xã hội: Da qua rồi cái thời mà hau hết khách du lịch ưa thích các lựa chọnthực phẩm và đồ uống an toàn, được tiêu chuẩn hóa khi đi du lịch đến cácđiểm đến mới Giờ đây, du khách đang theo đuổi các món ăn và đồ uống địaphương, truyền thống đề hiểu rõ hơn về văn hóa địa phương Mang đến nhữngtrải nghiệm 4m thực độc đáo dành riêng cho một vùng hoặc khu vực cụ thé làđiều bắt buộc dé tạo ra sự quan tâm đối với những du khách hiện đại Theonghiên cứu, "63% người thuộc thế hệ Millennials cố gắng ăn uống tại nhữngđịa điểm thể hiện trách nhiệm xã hội." Các doanh nghiệp thực phẩm và đồuống không chỉ được kỳ vọng hoạt động có trách nhiệm mà còn phải tự tin

truyền đạt cho khán giả về những hoạt động có trách nhiệm xã hội của họ.

2.2 Đối thủ cạnh tranh

Theo đữ liệu từ data.ai, một trang công ty phân tích và dữ liệu đã tiết lộ răng ngườidùng di động trên toàn thế giới đã chi 67,5 ty USD cho các ứng dụng dành cho thiết

bị di động trong 6 tháng đầu năm 2023 Trong số này, người dùng hệ điều hành iOS

đã chi ra 43,5 ty USD và những người đam mê Google Play đã đóng góp 24 tỷ USD.

Tiêu đề	Nghiên Cứu Định Luật Gestalt Và Áp Dụng Vào Thiết Kế Giao Diện Ứng Dụng Khám Phá Ẩm Thực “Hà Nội Food”
Tác giả	Trương Cụng Hũa
Người hướng dẫn	ThS. Nguyễn Minh Thủy
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	83
Dung lượng	14,43 MB