Nghiên cứu phân cấp thị giác trong thiết kế giao diện và ứng dụng thiết kế website nhà hát múa rối nước Thăng Long

Từ những lập luận trên, em quyết định lựa chọn đề tài “Nghiên cứu phân cấp thị giác trong thiết kế giao diện và ứng dụng thiết kế website nhà hát múa rối nước Thăng Long” phục vụ cho việ

BAO CAO

DO AN TOT NGHIEP

Dé tài: “NGHIÊN CUU PHAN CAP THỊ GIAC TRONG THIET KE GIAO DIEN

VA UNG DUNG VAO THIET KE WEBSITE NHA HAT MUA ROI NUOC

Hà Nội - 2023

BO THONG TIN VÀ TRUYEN THONGHỌC VIEN CÔNG NGHỆ BƯU CHÍNH VIÊN THONG

ĐỎ ÁN TÓT NGHIỆP ĐẠI HỌC

Dé tài: “NGHIEN CỨU PHAN CAP THỊ GIÁC TRONG THIET KE GIAO

DIEN VA UNG DUNG VÀO THIET KE WEBSITE NHÀ HAT MUA ROI NƯỚC

THANG LONG”

Giảng viên hướng dẫn: Ths NGUYÊN THỊ KIM NGÂN

Sinh viên thực hiện: ĐỖ THỊ KIM ANH

Lớp: DI9TKDPT2

Khóa: 2019-2024

Hệ: ĐẠI HỌC CHÍNH QUY

HÀ NỘI - 2023

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập — Tự do — Hạnh phúc

NHÂN XÉT CUA GIÁO VIÊN HUONG DAN

DO ÁN/KHÓA LUẬN TOT NGHIỆP ĐẠI HỌC

5/Diém hướng dan:

GIAO VIEN HUONG DAN

(Ky, ghi rõ họ, tên)

HỌC VIEN CÔNG NGHE BƯU CHÍNH VIÊN THONG CONG HOA XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA ĐA PHƯƠNG TIEN Độc lập — Tự do ~ Hanh phúc

ĐÈ TÀI ĐÒ ÁN TÓT NGHIỆP ĐẠI HỌC

Họ và tên sinh viên: Đỗ Thị Kim Anh - BI9DCPT004

Lớp: DI9TKDPT2 Khoá: D19 Ngành đào tạo: Công Nghệ Đa Phương Tiện Hệ đào tạo: Đại học chính quy

I _ Tên dé án/khoá luận tốt nghiệp: Nghiên cứu phân cấp thị giác trong thiết kế giao điện

và ứng dụng thiết kế website nhà hát múa rối nước Thăng Long

2 Lý do chọn đề tài:

Một báo cáo của Google/Ipsos năm 2019 thống kê rang, 50% người dùng smartphone thường có xu hướng truy cập trực tiếp vào website dé mua sắm thay vi tải xuống ứng

dụng Theo một thống kê khác của Statista - một nền tảng trực tuyến của Đức chuyên thu

thập và trực quan hóa đữ liệu, cho thấy năm 2021, số người sử dung internet trên toàn thế

giới đạt 4,6 tỷ người và có hơn 1,88 tỷ website Chính vì vậy xu hướng thiết kế website

ngày càng

thay đổi, đòi hỏi các doanh nghiệp và nhà thiết kế cần cập nhật liên tục dé giúp website của

mình phát triển Có rất nhiều kỹ thuật được áp dụng trong quá trình thiết kế giao diện như

mô hình Bj Fogg, mô hình Design Thinking Trong đó phải kế đến kỹ thuật phân cấp thị giác, là một trong những kỹ thuật cốt lõi được áp dụng cho quá trình thiết kế Nó hỗ trợ

nâng cao trải nghiệm người dùng nhờ việc định hướng và dẫn dắt người dùng tới trọng tâm

của thiết kế một cách hợp lý và có ý nghĩa.

Nhà hát múa rối nước Thăng Long (Thang Long Water Puppet Theater) là nhà hát

trình điễn múa rối nước nằm tại trung tâm Hà Nội Nhà hát là thương hiệu hàng đầu của

nghệ thuật múa rối nước Việt Nam Nhà hát đã nhận được nhiều giải thưởng danh giá trong

các kỳ liên hoan múa rối trong và ngoài nước Đặc biệt, nhà hát múa rối nước Thăng Long

đã thành công ghi dấu ấn nghệ thuật truyền thống độc đáo của nước nhà trên 40 quốc gia, từ

châu Á đến châu Âu, châu Mỹ, Mặc dù có tầm ảnh hưởng lớn như vậy, khách đến xem

biểu diễn tại đây mới chỉ có thể mua vé theo hình thức mua trực tiếp tại nhà hát, liên hệ mua

vé qua số tông đài hoặc liên hệ qua kênh trung gian Nhà hát cũng có website tuy nhiên website mới chỉ ở mức độ cung cấp thông tin Website cũng chưa có dấu văn hóa đặc trưng

và thiếu sự hấp dẫn, thu hút với người dùng Bên cạnh đó, mục đặt vé của website chỉ có thé

xem va tham khảo giá, chưa có hình thức đặt vé và thanh toán trực tuyến.

Từ những lập luận trên, em quyết định lựa chọn đề tài “Nghiên cứu phân cấp thị giác trong thiết kế giao diện và ứng dụng thiết kế website nhà hát múa rối nước Thăng Long”

phục vụ cho việc thực hiện dự án và đồ án tốt nghiệp của mình

4.

5.

6.

Nội dung chính của đồ an:

Chương I: Tổng quan về lý thuyết Chương này giới thiệu tổng quan về giao diện

người dùng cũng như là giao diện người dùng website Cùng với đó là lý thuyết về phân cấp

thị giác trong thiết kế giao diện website.

Chương II: Tổng quan về đề tài Chương này đi sâu vào nghiên cứu về nhà hát múa rỗi nước Thăng Long và website của nhà hát, các website đối thủ trên thị trường để có thê

có thể tìm ra các điểm cần phát huy và hạn chế cho đề tài Bên cạnh đó ở chương này cũng

đi sâu vào nghiên cứu người dùng, xây dựng chân dung người dùng, kiến trúc thông tin và

các chức năng ứng dụng cung cấp dé giải quyết van dé của người dùng.

Chương III: Từ những phân tích ở chương 2 và ứng dụng kiến thức về phân cấp thị giác trong thiết kế giao điện website ở chương 1, chương 3 sẽ đi sâu vào việc phát triển thiết

kế giao diện cho website nhà hát múa rối nước Thăng Long.

Cơ sớ dữ liệu ban dau:

Ngày giao đề tài: / /20

Ngày nộp quyển: ⁄ /20

(Ký, ghỉ rõ họ tên) (Ký, ghi rõ họ tên)

TRUONG KHOA

(Ky, ghi rõ họ tên)

Đồ án tốt nghiệp Đại Lời cam

LỜI CAM ĐOAN

Em xin cam đoan rang đồ án tốt nghiệp “Nghién cứu phân cấp thị giác trong thiết

kế giao diện và ứng dụng thiết kế website nhà hát múa rỗi nước Thăng Long” là côngtrì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ời những số liệu haykế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

Đỗ Thị Kim Anh

Đỗ Thị Kim i

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

LỜI CẢM ƠN

Đề hoàn thành khóa luận tốt nghiệp nay, em xin gửi lời cảm ơn chân thành và tri ânsâu sắc đến cô giáo viên hướng dẫn ThS Nguyễn Thị Kim Ngân đã tận tình hướng dan

em trong suốt quá trình nghiên cứu và hoàn thành bai khóa luận Trong thời gian được cô

hướng dẫn, em đã được tiếp thu thêm được nhiều kiến thức làm cơ sở dé áp dụng vào thực

tế sau này

Đồng thời, em xin chân thành cảm ơn sự hướng dẫn tận tình của thầy cô trong khoaCông nghệ Đa phương tiện của Học viện Công nghệ Bưu chính Viễn thông đã tâm huyết,nhiệt tình dạy dỗ và truyền đạt những kiến thức quý báu cho chúng em trong suốt quátrình học tập dé em có được những kiến thức chuyên môn day đủ về chuyên công nghệ đaphương tiện mà em đang theo học Những kiến thức đó không chỉ giúp em hoàn thành tốt

dé tài khóa luận nay mày còn là hành trang quý báu dé em có thé tự tin vững bước trong

tương lai.

Cuối cùng, em xin kính chúc cô giáo ThS Nguyễn Thị Kim Ngân cùng toàn thể thầy

cô giáo trong khoa Công nghệ Da phương tiện dồi dao sức khỏe, niềm tin dé có thé thực

hiện sứ mệnh cao đẹp của mình là truyền lại kiến thức cho thế hệ mai sau.

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

Sinh viên

Đỗ Thị Kim Anh

Đỗ Thị Kim ii

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

MỤC LỤC

LOL CAM ĐOANN 5: 21 221221122122112212112112111112112111112111101121111211112121 re i

LOI CẢM ƠN G2522 22221122122127121121121121121101111112112112110111101111121112 1121 re ii

MỤC LỤC 5-5: 52222 212212212121121121121121111211211211211111111112112112111111 re iii

DANH MỤC KÝ HIỆU VA CHU VIET TAT ucecccccscccssesecsesscseseceesecsvsecsesecsnsessneessveeeaeees vi

DANH MỤC HINH ẢNH 6-5-1 1T 1E 111511111111 1111111 1.11111111111111 E1 vii

MO ĐẦU 52-52 21 21 21 2112112112112112111112112112112111111211211211.112111 re 1

la 5 1

2 Lý do chọn dé tai.c cececceccccccccscssessessescsssessessesscsucassessssucsscsessesscsvssscsvsesesevsnseseveeees 1

3 Tình hình nghiên cứu liên quan đến đề tai csscesessessessessesssesesesseseseseeseeees 2

3.1 Tình hình nghiên cứu trên thế giới - 2 2 s+2E+2E£2EE2EE2EEEEEEEEErEerxrrerkzes 2

4 Mục đích và nhiệm vụ của đề tài ¿- ¿7+ 2t 2x21 212112112112122121 21212 re 3

4.1 Mục đích của đề tài 5:22 22 212 122112712112211211211211212110122 re 3 4.2 Nhiệm vụ của đề tài -. 2:- + 21222221 2112712112211211211 211211212121 ca 4

5 Đối tượng, phạm vi nghiên cứu - 2 2+2x+2E£2E2EE2EE£EE2EEEEEEEEEEEE212121 212 c2Xe, 4

5.1 Đối tượng nghiên CỨU -¿- 2 52+S+SE9EE2EE2EE2EEE12E12112171112112111 111112 xe 4

5.2 voan ao na 4

6 Phương pháp nghiên CỨU -. c1 1191119111911 191 191v HH ket 4

7 Ý nghĩa thực tiễn của đề tài 5-5-2522 21221 21E2122112112121111111101121 011.1 ee 5

7.1 _ Ý nghĩa khoa hỌc - ¿52 5t+SE9SE92E2E522122152121212121171211711111 1.1 ce 5

7.2 _ Ý nghĩa lý luận - + 5+2 2 12 1EE1E7121121121121111 1111111211211 H10 5

7.3 Giá trị thực tiễn của đề tải - ccn cv E3 E111 E11 TT ngư nưệt 6

8 Kết cấu của đề tài is ctct TT 1111111111111 111111111111 11111111 1111 111gr rrưệu 6 CHƯƠNG 1 TONG QUAN VE LÝ THUYÊTT - 6-55 ‡E‡EEEEEE‡EEEEEEEEEEEEEEkrkererkes 1

1.1 Tổng quan ly thuyết về thiết kế giao diện người ding (UI Design) 1

1.1.1 UI là gì? Thiết kế UI là gi? occ ccceccccccceccessessesssssvessessessessesssssssessessessessessseeeseaes |

1.1.2 Quy trình thiết kế UI (UI Design PrOC€SS) -.- 2G nh eekp 3

Đỗ Thị Kim iii

1.3.1 Phân cấp thị giác là gÌ? -¿ s- + s x E2E1211212112112112111111211211 11111 rrei 13

1.3.2 Tầm quan trọng của PCTG trong thiết kế giao diện website) - 151.3.3 Một số yếu tố giúp PCTG trực quan trong thiết kế giao điện website 17

1.3.4 Một số mô hình giúp PCTG hiệu quả 2 22 5S S2 S£2E££E+£E+EEzEzEerzxred 25

1.4 Tiểu kết chương Ì - 2-5: £+22+2<£EE9EEEEE2112112112712711112112112112111111 1121.110 30CHƯƠNG 2 NGHIÊN CỨU TONG QUAN VỀ NHÀ HAT MUA ROI THANG LONG

"ãàã Ẽ.Ẽ 31

¬ 31

2.1.1 Giới thiệu về nhà hát múa rối nước Thăng Long - 2 2 2 s+s =2 3l

2.1.2 Tổng quan website nhà hát múa rối nước Thăng Long - 22 5+ 32

2.1.3 Hiện trạng của W€ebSIfC . - c n1 1n T TH TH TH TH ng kg vn 34 2.2 NGWIEN CU eee 37

2.1.1 Nghiên cứu người dùng mục tiêu của webSIf€ - c5 sssstssirsssxes 37

2.1.2 Nghiên cứu đối thủ cạnh tranh của websife - 2 2 s+x+s+xezzxerszxees 402.1.3 Dinh hướng thiết kế giao điện website -2- 2 2s E2EEE2EErrrrrred 422.3 Triển khai thiết kế giao điện website nhà hát múa rối nước Thăng Long 43

2.3.1 goi -ä0) 004010 0 43

2.3.2 Kiến trúc thông tỉn -:- + 522222 19 EEEEE21211211211211211711111111 211211 1 x0 43

2.3.2 Danh sach 0ui và 0 44

2.3.3 Triển khai giao diện trực quan - + 2 s++x+2E+EE2E22EE2EE22122E21222222 22x, 45

Đỗ Thị Kim iv

3.2.1 Hệ thống lưới ¿+ 2E2E12E12E15E1571711211211211211111121111111 21111 1111 re 54

Đỗ Thị Kim Vv

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

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

Tên viết tắt Chú giải tiếng Anh Chú giải tiếng Việt

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

UI Design User Interface Design Thiết kế giao diện người

dùng

PCTT Visual hierarchy Phân cấp thị giác

CTA Call to action Kêu gọi hành động

Wireframe Ban phac thao

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

DANH MỤC HÌNH ẢNH

Hình 1 1: Hình ảnh minh họa về UI (N guỗồn: commerceeclub.com) ‹‹‹:: - 1

Hình 1 2: Hình ảnh minh họa tương tác của người dùng với màn hình (Nguồn: €VAIDSâ8'Ø8.COTT)) -á 4G LH HH Họ HH Họ TH cà 2 Hình 1 3: Phác thảo giao điện website (Nguồn: vudigital.co) -©5¿5s+cz+xczzsxee: 3 Hình 1 4: Sơ đồ quy trình thiết kế UI (Nguồn: Bài giảng nhập môn công nghệ phần mềm trường đại hoc công nghệ, ĐHQGHNN) -. G0 22111219 HH ng Hy 4 Hình 1 5: Hình anh minh họa về UX (Nguồn: commerceeclub.eom) 2 5¿ 6 Hình 1 6: Mối quan hệ giữ UI, UX và CX (Nguồn: Facebook - Asignum ) 7

Hình 1 7: Hình ảnh minh họa về giao diện người dùng website (Nguồn: blog.vietsol.net)§ Hình 1 8: Giao diện website giới thiệu cá nhân của người mẫu Trần Quang Đại (Nguồn: †ranquañØÌa1.VH|), - - c1 TH TT TH it 9 Hình 1 9: Ví dụ về UI components (Nguồn: Dribble.com - Heavyweights) 10

Hình 1 10: Hình ảnh bố cục website (Nguồn: Timoday.edu.vn) 2 + +cs+szs¿ 11 Hình 1 I1: Hình anh minh họa tờ báo — Nguồn internet - 5-5255 +c£zzEz£ezzxze+ 14 Hình 1 12: Ví dụ minh họa về PCTG (Nguôn: Facebook -Viva Riverside) - 15

Hình 1.13: Website Gatesnfences (Nguồn: Gafesnfences) -. - + - sccssczxcrerszrres 16 Hình 1.14: Vi dụ minh họa (Nguồn: Dribbble - Malik Abimanyu) - 25-52 17 Hình 1 15: Ví dụ minh họa (Nguồn: Cannva) - 2-52 + 2tc2Et2E2EE2E12212122.21 2.2 ki 18 Hình 1 16: Ví dụ minh họa (Nguồn: CanVa) 2-5252 s+EE‡EE2E2EEEEEEE2EEEEEEEEErrkrkrei 19 Hình 1 17: Ví dụ minh họa (Nguồn: Dribbble - Can Tek) -2- 2s5z+s+cz+zczxsse2 19 Hình 1 18: Hình anh minh họa (Nguôn: hapigo.vn) 2-5255 5s2S22E22Ec£Ee£EzEerzxred 20 Hình 1 19: Vi dụ về sử dụng tương phản trong thiết kế (Nguồn: suitabletheme.com) 21

Hình 1 20: Vi dụ áp dụng khoảng trắng trong thiết kế website (Nguồn: Internet) 22

Hình 1 21: Minh họa thiết kế có lưới (Nguồn: Behance - Waseem Arshad) 24

Hình 1 22: Vi dụ căn giữa theo chiều dọc (Nguồn: Arena Multimedia) 25

Hình 1 23: Sơ đồ Gutenberg (Nguồn: Rubyk Ageney) 2 + secs+xeEeEzxzxerrxererx 26 Hình 1 24: Ví dụ thiết kế áp dụng sơ đồ Guntenberg (Nguồn: dev.to) - 27

Hình 1 25: Mô hình chữ F (Nguồn: Internet) - 2 2 s+2E+2E£2E+2E2EE£EEzEerxzrerrerered 27 Hình 1 26: Bản đồ nhiệt điện từ về nghiên cứu eyetracking của người dùng (Nguồn:useif.cOim) - 5-5-5221 21S21E21121211211211211211712112112111111112111121101211 111 e 28 Hình 1 27: Mô hình chữ Z (Nguồn: Internet) 2-2 + s+SE+SE2E+2E£EE£EE2EEzEerErrersrxred 29 Hình 1 28: Ví dụ thiết kế áp dụng mô hinh chữ Z (Nguồn: Mona.media) 29 Hình 1 29: Mô hình zig-zag (Nguồn: Internet) - 2-5252 S+St2E2E£EEEE2EEEeEEzErrererxred 30 Hình 1 30: Mô hình tam giác vàng (Ngu6n: Internet) ©5¿©52252+2z+£z+Eezxzxczxesez 30

Đỗ Thị Kim vii

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

Hình 2 1: Hình ảnh nhà hát múa rối nước thăng long (Nguồn: nhahatmuaroithanglong.vn)

31

Hình 2 2: Một màn trình diễn tại nhà hát (Nguồn: nhahatmuaroithanglong.vn) 32

Hình 2 3: Trang chủ website hiện tại của nhà hát 33

Hình 2 4: Sơ đồ kiến trúc thông tin website hiện tai 33Hình 2 5: Banner trang chủ (Ngu6n:nhahatmuaroithanglong.vn) 34Hình 2 6: Giao diện trang chủ website (Nguồn: nhahatmuaroithanglong.vn) 35Hình 2 7: Giao diện chi tiết vở diễn “Hồn trương ba da hàng thịt” (Nguồn:

nhahatmuaroithanglong.vn) 36

Hình 2 8: Giao diện giới thiệu nghệ sĩ nhà hát (Nguồn: nhahatmuaroithanglong.vn) 36

Hình 2 9: Giao diện đặt vé của website (Nguồn: nhahatmuaroithanglong.vn) 37

Hình 2 10: Chân dung người dung 1 38 Hình 2 11: Chan dung người dùng 2 38

Hình 2 12: Chân dung người dùng 3 39 Hình 2 13: Chân dung người dùng 4 39

Hình 2 14: Website nhà hát múa rối Bông Sen (Nguén:bongsenwaterpuppet.vn) 40Hình 2 15: Website nhà hát múa rối Bông Sen (Nguén:bongsenwaterpuppet.vn) 41Hình 2 16: Website nha hat múa rồi Bông Sen (Ngu6n:bongsenwaterpuppet.vn) 41

Hình 2 17: Website nhà hat múa rối Việt Nam (Nguồn: nhahatmuaroivietnam.vn) 42

Hình 2 18: So đồ kiến trúc thông tin mới của website nhà hát múa rối nước Thăng Long

43 Hình 2 19: Fonr chữ LNTH-Daybreaker &Gilroy 45

Hình 2 20: Một số hình ảnh sử dụng trong thiết kế giao diện website 46Hình 2 21: Màu nhận diện nhà hát múa rối nước Thăng Long 46Hình 2 22: Minh họa về mốt số bố cục theo lưới sủ dụng trong thiết kế giao diện website

47

Hình 2 23: Minh họa về bố cục chữ F sử dụng trong thiết kế giao diện website 48

Hình 3 1: Cac wireframe giao diện nhà hát múa rối nước Thăng Long - 49

Hình 3 3: Wireframe popup quên mật Khau c.ccccccscceseessessessessesstesessessessesssesseseeseeeees 50

Hình 3 4: Wireframe trang CỦ - c2 1112111211151 9111911 911v net 51

Hình 3 6: Wireframe trang chi tiết nghỆ Si ccccceccsscessessesseessssesessessessesstesesessesesessees 52Hình 3 7: Wireframe một số trang trong Website c.ccccccssecsessesseessesessessessesesseseeseeeees 52

Hình 3 8: Moodboarc - óc tt ng TH HT HH TH Hi nh 53

D6 Thi Kim viii

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

Hình 3 9: Bảng màu sử dụng trong We€bSIf€ c1 t1 12 12 111 11118111 vn ve 54 Hình 3 13: Componets sử dụng trong WebSIf€ - -c c St v19 x1 ng vkn 54

Hình 3 11: Hệ thống lưới sử dụng trong website (Lapfop) -©5:©5z+5z+cz+zs+zxccs2 55Hình 3 12: Hệ thống icon sử dung trong Website ccccccccsscsssessessessessessessesssessesesseeeees 55

Hình 3 10: Kiểu chữ sử dung trong website cccccccccscssessessesseeseessessessessesseestessesseseseees 56

Hình 3 14: Giao diện trang chủ w€bSIfG - c1 1211121119 119 119 1190111 1 19 ng kg 57

Hình 3 15: Một số hình anh giao diện trực quan của web - 2-2 s+c++xezx+xczxscez 58

Đỗ Thị Kim 1X

Đồ án tốt nghiệp Đại Mở

MỞ ĐẦU

1 Tên đề tài

Đề tài nghiên cứu: “ Nghiên cứu phân cấp thị giác trong thiết kế giao diện và ứng

dụng thiết kế website nhà hát múa rối nước Thăng Long”

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

Trong thời đại công nghệ hiện nay, sản phẩm kỹ thuật số đã và đang trở thành mộtphan không thé thiếu trong cuộc sống hàng ngày của chúng ta Theo một thống kê củaStatista - một nền tảng trực tuyến của Đức chuyên thu thập và trực quan hóa dữ liệu, chothấy năm 2021, số người sử dụng internet trên toàn thế giới đạt 4,6 tỷ người và có hơn1,88 tỷ website Trong quý 1/2021, thiết bị di động tạo ra 54,8% lưu lượng truy cập webtoàn cầu Điều đó có nghĩa là việc tối ưu hóa website cho các thiết bị di động cũng quan

trọng như trên laptop/PC.

Theo một báo cáo của Google/Ipsos, 2019, 50% người dùng smartphone thường có

xu hướng truy cập trực tiếp vào website để mua săm thay vì tải xuống ứng dụng Chính vìvậy xu hướng thiết kế website ngày càng thay đổi, đòi hỏi các doanh nghiệp và nhà thiết

kế cần cập nhật liên tục dé giúp website của mình phát triển

Yếu tố thâm mỹ cũng là một trong những yếu tô ảnh hưởng tới mức độ sử dụng sản

phẩm công nghệ của con người Các nhà cung cấp dịch vụ, không những phải quan tâm tới các tính năng của sản phâm mà còn phải chú ý đến thị hiéu của người dùng Vì vậy,

website cần được thiết kế một cách khoa học và hợp lý dé đáp ứng được sự thay đổi này.

Có rất nhiều kỹ thuật được áp dụng trong quá trình thiết kế giao diện như mô hình

Bj Fogg, mô hình Design Thinking Trong đó phải ké đến kỹ thuật phân cấp thị giác, làmột trong những kỹ thuật cốt lõi được áp dụng cho quá trình thiết kế Nó hỗ trợ nâng caotrải nghiệm người dùng nhờ việc định hướng và dẫn dắt người dùng tới trọng tâm củathiết kế một cách hợp lý và có ý nghĩa

Nhà hát múa rối nước Thăng Long (Thang Long Water Puppet Theater) là nhà háttrình diễn múa rối nước năm tại trung tâm Hà Nội Nhà hát là thương hiệu hàng đầu củanghệ thuật múa rỗi nước Việt Nam Nhà hát đã nhận được nhiều giải thưởng danh giátrong các kỳ liên hoan múa rối trong và ngoài nước Đặc biệt, nhà hát múa rối nướcThăng Long đã thành công ghi dấu ấn nghệ thuật truyền thống độc đáo của nước nhà trên

40 quốc gia, từ châu Á đến châu Âu, châu My, Mac dù có tầm ảnh hưởng lớn như vậy,khách đến xem biểu diễn tại đây mới chỉ có thể mua vé theo hình thức mua trực tiếp tạinhà hát, liên hệ mua vé qua số tổng đài hoặc liên hệ qua kênh trung gian Nhà hát cũng cówebsite tuy nhiên website mới chỉ ở mức độ cung cấp thông tin, những thông tin được

cung câp như:

Đỗ Thị Kim AnhDI9TKDPT2 1

Đồ án tốt nghiệp Đại Mở

thông tin về nhà hát, thông tin về nghệ thuật múa rỗi nước, cách thức mua vé, Websitecũng chưa có dấu văn hóa đặc trưng và thiếu sự hấp dẫn, thu hút với người dùng, vậy nên

đa số mọi người không biết tới website Bên cạnh đó, mục đặt vé của website chỉ có thể

xem và tham khảo giá, chưa có hình thức đặt vé và thanh toán trực tuyến.

Từ những lập luận trên, em quyết định lựa chọn đề tài “Nghién cứu phân cấp thịgiác trong thiết kế giao diện và ứng dụng thiết kế website nhà hát múa rỗi nước ThăngLong” phục vụ cho việc thực hiện dự án và đồ án tốt nghiệp của mình

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

3.1 Tình hình nghiên cứu trên thé giới

Thông qua quá trình tìm hiểu, nghiên cứu về lý thuyết “Phân cấp thị giác”, khôngkhó dé thay đây là một đề tai đã được nghiên cứu sâu rộng trước đây Trên thế giới, nguồntài liệu nghiên cứu về nguyên lý phân cap thị giác trong thiết kế UI/UX cụ thé là thiết kế

website thì khá đa dạng và phong phú.

Cuốn “The Elements of Graphic Design ” (Các yếu t6 của thiết kế đồ hoa) của nhàthiết kế, nhà giáo duc Alex W White là một cuốn sách thiết kế rất phố biến Ông đã tập

hợp rất nhiều thông tin và vi dụ trong cuộc khám phá của mình về những gi cần làm dé tạo nên một thiết kế tuyệt đẹp và dễ đọc Cuốn sách cung cấp một cách suy nghĩ mới để

sử dụng các yếu tố thiết kế, truyền cảm hứng cho thiết kế tốt hơn.

Hay cuốn “UI UX design 2020 a complete beginner to pro” (Thiết kế UX UX, từ bắtđầu cho tới chuyên nghiệp) của ChipmanAlbert Cuốn sách nay là một hướng dan day đủ

về thiết kế UX cho người mới bắt đầu, cung cấp mọi thông tin, khái niệm và giải thích chỉtiết các khái niệm về thiết kế UX UI

Khi tìm kiếm, nghiên cứu về lý thuyết phân cấp thị giác trong thiết kế website, có

một số cuốn sách, bài viết, blog nội dung hay, chuyên sâu, chứa nhiều thông tin bồ ích và

có thê dễ dàng tìm kiếm được nguồn trên internet dé tham khảo như: Cuốn Ebook “TheBuilding Blocks of Visual Hierarchy” của công ty phần mềm UXPin cung cấp các lythuyết, thông tin về hệ thông phân cấp thị giác, sự khác biệt giữa một trang web trước vàsau khi phân cấp thị giác

Bài nghiên cứu “Good Visual Hierarchy Is Good Design” của Yoko Urano, Aaron

Kurosu, Alexander Todorov cung cấp rất nhiều các thông tin bổ ích về phân cấp thị giác

và cách dé tạo nên một website có phân cấp thị giác tốt Sử dụng một phương pháp mới

dé đo lường phân cấp thị giác bằng cách kiểm tra sự giống nhau trong chuyền động mắtgiữa mọi người, bằng cách sử dụng công cụ theo dõi mắt

Đỗ Thị Kim 2

Đồ án tốt nghiệp Đại Mở

Bài blog “ Understanding Hierarchy in Design” của Monica Galvan trên trang web

của Flux Academy — nền tang học thiết kế trực tuyến, chia sẻ những hiểu biết về phân cấpthị giác (PCTG), tam quan trong của PCTG, thé nao là hệ thống PCTG xấu/tốt và chi racác yêu tô dé tạo nên PCTG tốt Cũng trên trang web này, tác giả Monica Galvan cũng cómột bài viết về các ví dụ cụ thé về van đề trên có tên là “Visual Hierarchy Examples”

Nghiên cứu của Soussan Djamasbi, Marisa Siegel & Tom Tullis (2011), về “VisualHierarchy and Viewing Behavior: An Eye Tracking Study”, chỉ ra những phần, vùng nộidung mà mắt bị thu hút trong trang web Dựa trên mô hình phân cấp thị giác, nghiên cứunày xem xét tác động của sự phân cấp thị giác đến cách người ding xem một trang web

Bài viết “Visual Hierarchy: Effective UI Content Organization ”, giải thích một cách

chi tiết, dễ hiểu về hệ thống phân cấp thị giác cho tổ chức nội dung UI mạnh mẽ: kích

thước, độ tương phản, độ gần, không gian âm và các thứ khác để cấu trúc các yếu tố UI

một cách hiệu quả.

Tương tự về nội dung có bài viết: “Design principles — An introduction to visual hierarchy” (Nguyên tắc thiết kế - Giới thiệu về hệ thống phân cấp thị giác) của Miklos

Philip (Một nhà thiết kế UX, chiến lược gia thiết kế sản phẩm, tác giả và diễn giả với hơn

18 năm kinh nghiệm trong lĩnh vực thiết kế)

3.2 Tình hình nghiên cứu trong nHớc

Tại Việt Nam, việc tiếp cận với các đề tài nghiên cứu liên quan tới lý thuyết về phân cấp thị giác trong thiết kế UI/UX nói chung và cụ thé là nghiên cứu lý thuyết phân cấp thị

giác trong thiết kế giao diện web nói riêng còn rất là hạn chế

Tuy nhiên, em vẫn tìm được các bài nghiên cứu, báo cáo, một số bài viết được dịch

từ trang báo nước ngoài và một số cuốn giáo trình làm nền tảng cho quá trình nghiên cứu

và giúp ích cho việc hoàn thành đề tài nghiên cứu này như:

- _ Thiết kế tương tác đa phương tiện” của PGS.TS.Đỗ Trung Tuan, xuất bản năm 2014

- Giáo trình “Thiết kế ứng dụng đi động đầu cuối” của cô Bùi Thị Thu Huế xuất bản

năm 2014.

- _ “ Bố cục thị giác” xuất bản năm 2017 của tác giả Nguyễn Hồng Hưng

- _ Các bài blog được đăng trên các diễn đàn thiết kế, website dạy về thiết kế.

4 Mục dich và nhiệm vụ của dé tài

4.1 Mục đích của đề tài

Đỗ Thị Kim 3

Đồ án tốt nghiệp Đại Mở

Đề tài “Nghiên cứu phân cấp thị giác trong thiết kế giao điện và ứng dụng thiết kếwebsite nhà hát múa rối nước Thăng Long” có mục đích nghiên cứu nguyên lý thuyết vềphân cấp thị giác và áp dụng các nguyên lý đó đề thiết kế giao điện cho website

Từ đó, ứng dụng các nguyên lý đã nghiên cứu vào thiết kế giao diện người dùng

website nhà hát múa rỗi nước Thăng Long, giúp cho website phù hợp với thị hiéu kháchhàng, trở nên thu hút, hấp dẫn, tạo ra dấu ấn văn hóa đặc trưng, từ đó giúp đây mạnhdoanh số của nhà hát

4.2 Nhiệm vụ của đề tài

Đề tải có nhiệm vụ nghiên cứu:

- _ Nghiên cứu tông quan cơ sở lý thuyết về thiết kế UI/UX dé làm nền tảng cho quá

trình nghiên cứu.

- Nghiên cứu lý thuyết về phân cấp thị giác trong thiết kế giao diện website,từ đó

phân tích, chỉ ra những phương pháp, cách thức dé xây dựng hệ thống phân cấp thigiác hiệu quả cho website nhà hát múa rối nước Thăng Long

- Ung dụng lý thuyết phân cấp thị giác trong thiết kế giao diện website dé thiết kế

giao diện người dùng cho website nhà hát múa rối nướcThăng Long

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

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

- _ Cở sở lý thuyết về thiết kế UX/UI

- Ly thuyết về phân cấp thị giác

- Nha hát múa rối nước Thăng Long

5.2 Phạm vi nghiên cứu

- Vé thời gian: Các số liệu trong dé tài là những số liệu được được thu thập trong

những năm gần đây (2019-2023)

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

- _ Về lĩnh vực nghiên cứu: Đề tai tập trung nghiên cứu lý thuyết về phân cấp thị giác

trong thiết kế giao diện Các lý thuyết nghiên cứu sẽ được áp dụng vào quá thiết kế giao diện cho website nhà hát múa rối nước Thăng Long

- _ Về sản phẩm của đề tài: Sản phẩm đầu ra của dé tài này sẽ là giao diện thiết kế trực

quan của nhà hát múa rối nước Thăng Long trên hai nền tảng máy tính đề bàn/xách

tay và điện thoại di động.

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

Đỗ Thị Kim 4

Đồ án tốt nghiệp Đại Mở

Dé phục vụ cho quá trình nghiên cứu dé tài, cần phải có những phương pháp nghiêncứu phù hợp, nhằm đạt được kết quả tốt nhất Đề tài sử dụng kết hợp phương pháp nghiêncứu lý thuyết với phương pháp thu thập thông tin để xây dựng cơ sở thực tiễn cho chủ đềnghiên cứu Các phương pháp đã sử dụng sẽ được đề cập dưới đây:

Phương pháp thu thập dữ liệu thứ cấp:

- Thu thập thông tin liên quan đến cơ sở lý thuyết về thiết kế UX/UI

- Thu thập thông tin liên quan đến nguyên lý phân cấp thị giác trong thiết kế ứng

dụng di động.

- Thong tin nghiên cứu được tổng hợp từ các sách tham khảo, sách điện tử, tài liệu

chuyên ngành, giáo trình của các môn học liên quan và một số website chuyên

ngành trong va ngoài nước

Phương pháp thu thập dữ liệu sơ cấp:

Dựa trên phương pháp thu thập dữ liệu định tinh qua quan sát trực tiếp và gián tiếp

kết hợp với phương pháp tổng hợp phản hồi trên website, các nền tảng mạng xã hội để tiếp cận, thu thập thông tin của đối tượng người dùng sử dụng website nhà hát múa rối

nước Thăng Long.

Phương pháp này ứng dụng trong quá trình liên kết, sắp xếp tài liệu, thông tin lýthuyết đã thu thập, từ đó chọn lọc các thông tin liên quan tới đề tài đang nghiên cứu

Phương pháp phân loại và hệ thong hóa lý thuyết:

Sau khi đã thu thập được tài liệu và chọn lọc được các thông tin liên quan tới đề tài,

em sử dụng phương pháp này dé sắp xếp, phân loại lý thuyết, thông tin thành một hệ

thống chặt chẽ Từ đó có thé tiếp cận với thông tin một cách tường tận, toàn diện về chủ

đề nghiên cứu

7 Y nghĩa thực tiễn của đề tài

7.1 Ý nghĩa khoa học

Về mặt khoa học, kết quả nghiên cứu sẽ tong quát hóa một phan kiến phần kiến thức

về giao điện website, lý thuyết về phân cấp thị giác và cách thức xây dựng một hệ thốngphân cấp thị giác hiệu quả cho website Từ đó đưa ra phương pháp áp dụng nguyên lýphân cấp thị giác cho việc thiết kế và phát triển giao điện website nhà hát múa rối nước

Thăng Long

7.2 Ý nghĩa lý luận

Đỗ Thị Kim 5

Đồ án tốt nghiệp Đại Mở

Đề xuất phương pháp đánh giá trải nhiệm của người dùng qua UI,UX về thay đổihành vi con người và lý thuyết phân cấp thị giác giúp năm được ưu tiên tập trung thâm

mỹ của con người về màu sắc, phông chữ, hình dạng, vv

7.3 Giá trị thực tiễn của đề tài

Đối với chuyên ngành thiết kế UI/UX: Đề tài góp phan làm phong phú hơn nguồn

tham khảo, tong hợp về lý thuyết phân cấp thị giác trong thiết kế UI/UX nói chung và

trong thiết kế website nói riêng

Đối với cá nhân: Việc nghiên cứu đề tài này giúp nâng cao kiến thức chuyên môn vềchuyên ngành thiết UI/UX Quá trình nghiên cứu cũng giúp bản thên em phát triển tư duythiết kế theo hướng đúng Trong quá trình nghiên cứu, em cũng đã học hỏi và trau đồiđược thêm nhiều kỹ năng về thu thập và tìm kiếm thông tin Với việc tìm kiếm, thu thập

thông tin để viết báo cáo quá trình nghiên cứu cũng giúp bản thân em tăng khả năng phân tích và đưa ra giải pháp phù hợp dé cải thiện thiết kế hiện tại cũng như sau này Nhờ tìm hiểu kiến thức chuyên sâu, em đã nắm chắc và hiểu rõ hơn lý thuyết hơn về phân cấp thị

giác trong thiết kế, nhờ vậy mà bản thân em hệ thống lại những kiến thức còn thiếu sóttrong lĩnh vực nay đề bé sung và kắc phục trong các thiết kế sau

Đối với các nhà thiết kế giao diện, các doanh nghiệp: Các nhà thiết kế giao diện, các

doanh nghiệp đang có nhu cầu thiết kế phát triển hệ thống thiết kế giao điện người dùngnói chung và cho website nhà hát múa rối nước Thăng Long nói riêng Cụ thé như sau:

- _ Nghiên cứu này cho thấy tầm quan trọng và cách ứng dụng kỹ thuật phân cấp thị

giác một cách hiệu quả cho các giao diện người dùng.

- Nghiên cứu cho thấy sự sáng tạo trong việc vận dụng kỹ thuật phân cấp thị giác

cho giao diện người dung website nhà hát múa rối nước Thăng Long Từ đó đưa rathiết kế phù hợp nhất, thu hút được nhiều đối tượng người dùng

8 Ket cầu của đê tài

Đồ án của em gồm 3 chương chính:

Chương I: Chương I cung cấp lý thuyết tổng quan về thiết kế giao diện người dùng Cũng trong chương I, bức tranh về thiết kế giao diện website cũng sẽ được đề cập tới và

sẽ đi sâu vào nghiên cứu lý thuyết về phân cấp thị giác trong thiết kế giao diện website.

Chương II: Nghiên cứu về nhà hát múa rối nước Thăng Long và website của nhà

hát, các website đối thủ trên thị trường dé có thé có thé tìm ra các điểm cần phát huy va hạn chế cho đề tài Bên cạnh đó ở chương này cũng đi sâu vào nghiên cứu người dùng,

xây dựng

Đỗ Thị Kim 6

Đồ án tốt nghiệp Đại Chương 1 Tổng quan về lý

CHUONG 1 TONG QUAN VE LÝ THUYET

1.1 Tổng quan ly thuyết về thiết kế giao diện người dùng (UI Design)

1.1.1 UI là gì? Thiết kế UI là gì?

Theo một bài viết trên nền tảng Coursera - nền tảng chuyên cung cấp các khóa học online chất lượng và chứng chỉ có giá trị, UI là viết tắt của User Interface — giao diện người dùng Là điểm tương tác giữa người dùng va sản phẩm (màn hình máy tính, điện

thoại, ) Bất kỳ công nghệ nào bạn tương tác với tư cách người dùng đều là một phần củagiao điện người dùng Ví dụ: màn hình, âm thanh, phong cách tổng thể và khả năng phảnhồi đều là các yếu té của giao diện người dùng

Khi người dùng tương tác với máy tính dé ban, giao diện người dùng có thé baogồm chuột và bàn phím dé người dùng nhập thông tin và một màn hình nơi người dùng cóthé xem phản hồi của máy tính Giao diện người dùng được coi là tốt khi người dùng cóthé đạt được kết quả mong muốn với lượng đầu vào tối thiểu [1] Ví du như khi ta tìm mộtthông tin gì đấy trên google, việc ta làm đó là truy cập vào google, gõ từ khóa và google

sẽ đưa ra cho bạn các thông tin Trong trường hợp này UI sẽ là những gì màn hình hiểnthị cho bạn trên màn hình (banner, thanh tìm kiếm, button, trang kết quả ) và cách mà ta

tương tác với chúng (click chuột, cuộn trang, )

Xét về mặt đồ hoa, UI là sự tích hợp của nhiều yếu tố như: hệ thống lưới, layout, typography, màu sắc, hoạt ảnh, hình khối, [2] Các yếu tố trên kết hợp với nhau tạo ra

thu hút về mặt thị giác

Đỗ Thị Kim 1

Đồ án tốt nghiệp Đại Chương 1 Tổng quan về lý

Về mặt tương tác, UI là cách chúng ta tương tác với sản phẩm nhằm đạt được mụcđích sử dụng của mình [2] Khi ta xem video trên youtube, bạn có thể có những thao tácnhư ấn phát nhạc, ấn like hoặc dislike một video, Các phương thức đó chính là cách màngười dùng tương tác với sản phẩm thông qua UI

searching

Hình 1 2: Hình anh minh họa tương tác của người dùng với màn hình (Nguồn:

evampsaanga.com)

Ui (Giao diện người dùng) bao gồm bốn thành phan sau:

- Cac yếu to diéu hướng (Navigational elements): Các yêu tô điều hướng giúp người

dùng điều hướng một giao diện Ví dụ về các thành phần điều hướng trong giao

diện người dùng bao gồm thanh trượt (slide bars), trường tìm kiếm (search fields)

và mũi tên quay lại (back arrows).

- Cac kiểm soát dau vào (Input controls): Các thành phần trên trang cho phép người

dùng nhập thông tin là các kiểm soát đầu vào Các nút (buttons), hộp kiểm tra(checkboxes) và trường văn bản (text fields) đều là ví dụ về điều khiển đầu vào

- Cac thành phần thông tin (Informational components): Các thành phần thông tin

được sử dụng để truyền đạt thông tin đến người dùng Thanh tiến trình (progress bar) bên dưới video là một ví dụ về thành phần thông tin.

- Vùng chứa (Containers): Vùng chứa sắp xếp nội dung thành các phan dễ hiểu.

Thay vì liệt kê mọi tiêu đề phụ bên dưới một tab, phần tử vùng chứa như menu có

thể được sử dụng dé ân hoặc hiển thị nội dung.

Đỗ Thị Kim 2

Đồ án tốt nghiệp Đại Chương 1 Tổng quan về lý

Thiết kế giao điện người dùng (User Interface Design) là quy trình mà nhà thiết kế

sử dụng để xây dựng giao diện người dùng trong phần mềm hoặc thiết bị máy tính, tập

trung vao ngoại hình hoặc phong cách.

Ẫ _

À `

X

Thiết kế giao diện người dùng thể hiện thông qua hình thức, tính tương tác, khả năng

sử dụng, hành vi và cảm nhận tổng thé của sản phẩm Thiết kế giao diện người dùng cóthê xác định liệu người dùng có trải nghiệm tích cực với sản phâm hay không Đây là mộtquy trình lặp đi lặp lại với sự liên lạc chặt chẽ giữa người dùng và người thiết kế Chi tiết

về quy trình thiết kế giao diện sẽ được em dé cập trong phan tiếp theo 1.1.2: Quy trình

thiết kế UL

1.1.2 Quy trình thiết kế UI (UI Design Process)

Để xây dựng được một giao diện vừa thân thiện với người dùng vừa trông đẹp mắt

về mặt thâm mỹ bạn phải quan tâm đến tat ca các tương tác mà người dùng có thé thực

hiện với sản phẩm của bạn Sau đó cung cấp giải pháp tốt nhất có thé dé làm cho những

tương tác đó có ý nghĩa với người dùng Đề làm được điều đó, bạn cần tuân theo quy trình

thiết kế lặp đi lặp lại để giúp bạn liên tục cải tiến và làm mới thiết kế của mình Một quytrình thiết kế phù hợp cho phép bạn tạo ra các thiết kế đơn giản và trực quan, làm hài lòngngười dùng và từ đó tạo sự khác biệt cho sản phẩm của bạn với các đối thủ cạnh tranh.Sau đây em xin trình bày các giai đoạn trong quy trình thiết kế UI

Đỗ Thị Kim 3

Đồ án tốt nghiệp Đại Chương 1 Tổng quan về lý

' |

ˆ ¬ Do ¬

TT Tạo bản mẫu Cùng ngườitim hiệu các Aas i

hoạt động của thiệt kê trên dùng đánh giá

người he giấy thiết kế

Cùng người dùng đánh giá

eel —*| giao diện người

chạy được dù feces

lùng cuôi cùng

Hình 1 4: Sơ đô quy trình thiết kế UI (Nguồn: Bài giảng nhập môn công nghệ phan mém trường

đại học công nghệ, ĐHQGHN)

Giai đoạn 1: Phân tích, nghiên cứu người dùng

Nếu bạn không hiểu người dùng muốn làm gì với một hệ thống, bạn khó có thê thiết

kế một giao diện hiệu quả Giai đoạn này nhà thiết kế làm việc trực tiếp với UX Desinger(UX) và Developer (lập trình viên) để cùng nhau giải quyết các của người dùng

Nghiên cứu người dùng giúp hiểu người dùng và vấn đề của họ Có nhiều cách khácnhau dé thực hiện nghiên cứu người dùng, sau đây em xin chỉ ra 3 phương pháp nghiêncứu thường được sử dụng nhất:

- Phỏng vấn: Nhiệm vụ quan trọng nhất của bạn là hiểu chính xác những gì người

dùng muốn từ sản phâm của bạn Bạn có thé làm điều này bằng cách nhận phản hồi

từ người dùng Gặp gỡ người dùng và đặt câu hỏi về những gì họ muốn đạt được

khi sử dụng sản phẩm của bạn

- Quan sát: Bạn cũng có thé quan sát môi trường làm việc của họ và xem cách ho

giải quyết các vấn đề hàng ngày Điều này sẽ giúp bạn hiểu rõ những gì ngườidùng nghĩ và bạn sẽ thiết kế sản phẩm của mình phù hợp

- _ Khảo sát: Đề biết nhu cầu của một lượng lớn người dùng, bạn có thé thực hiện một

cuộc khảo sát Kết quả của các cuộc khảo sát nghiên cứu người dùng được sử dụng

dé tạo ra chân dung người dùng và cung cấp câu trả lời cho các truy van

Các phân tích về người dùng sau đó sẽ được mô tả theo cách mà cả người dùng lẫn người thiết kế đều có thé hiểu được Các kịch bản mà bạn dùng dé miêu ta các tình huống

sử dụng điển hình là một cách dé mô tả các phân tích này

Đỗ Thị Kim 4

Đồ án tốt nghiệp Đại Chương 1 Tổng quan về lý

Giai đoạn 2: Tạo bản mẫu trên giấyGiai đoạn này của quá trình thiết kế rất quan trọng và có tác động lớn đến kết quả

của sản pham Sau khi phân tích, nghiên cứu về người dùng, dựa vào hồ sơ người dùng

bạn phải tìm ra được các giải pháp tốt nhất cho những vấn đề họ đang gặp phải Chúng ta

cũng cần xác định các tình huống người dùng cụ thé khi họ sử dụng sản phẩm của bạn.

Chỉ khi bạn hiểu người dùng làm gì trên sản phâm của mình, cách thức và lý do họ làmđiều đó, thì bạn mới xác định và lên ý tưởng thiết kế phù hợp dành cho họ Sau đó ta sẽphác thảo các ý tưởng đó trên giấy Các bản thảo này sẽ được đánh giá bởi người dùng,nếu chưa hợp lý thì sẽ được chỉnh sửa sao cho phù hợp, tối ưu nhất, trước khi đi vào giaiđoạn thiết kế

Giai đoạn 3: Thiết kếSau khi tạo bản mẫu trên giấy ta đến với giai đoạn thiết kế Để chuẩn bị cho mộtthiết kế vừa tương tác “tốt” vừa “mãn nhãn”, UI Designer phải qua các bước từ tạo kiến

trúc thông tin, tao Style Guide, thiết kế từng panel (bảng điều khiển) , sắp xếp layout (bố cục) cho thiết kế tương thích (responsive), thiết kế các yếu tố UI nhỏ (như thanh trượt, nút

bam, icon, ), tạo một hệ thống thiết kế (design system), và tăng tính tương tac cho từng

yếu tố UI Tất cả các điều này sẽ được thê hiện thông qua thiết kế và được đánh giá bởi

người dùng trước khi tạo bản thiết kế động

Giai đoạn 4: Lên mẫu thử (Prototyping)Thường xuyên kiểm tra các bản prototype dé xem nó hiển thị, chuyển động như thénao và tim ra lỗi cần sửa Sau khi hoàn thiện bản thiết kế, UI Designer sẽ bàn giao thiết kếcho team lập trình dé bat đầu giai đoạn phát triển sản phẩm [3]

Giai đoạn 5: Thử nghiệm, cải thiện va cập nhật

Ở giai đoạn này UI Designer sẽ phải liên tục cải thiện sản phâm cho phù hợp vớinhu cau, van đề, hành vi hay kì vọng liên tục thay đổi của người dùng dé sản phẩm ngày

càng hoàn thiện [3]

1.1.3 Tam quan trọng của UI

Trong thiết kế thì UI đóng vai trò là yếu tố truyền tải thông điệp từ người thiết ké,nhà cung cap dich vu, sản phâm tới người dùng Đơn giản hơn thì nhà thiết kế đóng vaitrò như 1 lập trình viên hoặc nhà xây dựng dé bat cứ ai cũng có thé hiểu và sử dụng được

sản phẩm của họ.

Theo nghiên cứu của Kinsta - nền tảng đám mây cung cấp dịch vụ được quản lý cao

cấp WordPress, 70% người mua hàng trực tuyến sẽ hủy bỏ giao dịch nếu họ có trải

nghiệm không tốt với website Còn dựa trên thống kê của trang tin Toptal, 88% người

Đỗ Thị Kim 5

Đồ án tốt nghiệp Đại Chương 1 Tổng quan về lý

dùng sẽ không quay lại một trang web/ứng dụng có giao diện xấu hoặc tốc độ tải quả

chậm [4] Tức

Đỗ Thị Kim 6

Đồ án tốt nghiệp Đại Chương 1 Tổng quan về lý

là tỷ lệ này còn chưa tính đến những yếu tố như tốc độ tải trang, luồng điều hướng ngườidùng, Trong bối cảnh hiện tại, với tốc độ ra đời của vô vàn website, người dùng có rấtnhiều lựa chọn sử dụng hoặc không sử dụng một trang web, vậy nên các con sỐ thống kêtuy cao nhưng lại hợp lý Không cần bàn đến nguyên nhân sâu xa, nguyên nhân đầu tiên

khiến UI quan trong là vì nó anh hưởng tới trải nghiệm người dùng (UX).

Đề hiểu rõ hơn van dé nay thì ta cần phải nắm rõ khái niệm về trải nghiệm người dùng

- UX (User Experience) và một thuật ngữ khác CX (Customer Experience) — trải nghiệm khách hàng.

UX là viết tắt của User Experience, dịch là trải nghiệm người dùng Theo Nielsen Norman Group - công ty tư vấn trải nghiệm người dùng và giao diện người dùng máy tính của Mỹ: “Trai nghiệm người dùng bao gồm tất cả các khía cạnh tương tác cua người dùng cuối với công ty, dịch vụ và sản phẩm của công ty” Điều này đề cập đến tất cả

những trải nghiệm tốt, xấu hoặc thú vị mà người dùng có được trong quá trình tương tác

Dễ hiểu hơn, UX là mọi khía cạnh liên quan đến cảm nhận, suy nghĩ khi người dùng

tương tác với sản phẩm, website, ứng dung, Từ đó ta có thể hiểu thiết kế UX là quy

trình dé tạo ra trải nghiệm hoàn chỉnh, hữu ích cho người dùng khi họ sư dụng một sảnphẩm

CX là viết tắt của Customer Experience (trải nghiệm khách hàng) là tất cả nhận thức của khách hàng về trải nghiệm của họ với sản pham, dịch vụ của doanh nghiệp trong suốt hành trình mua hàng của minh Như vậy ta có thé thay CX bao quát hon UX và UL UI tệ

Đỗ Thị Kim 7

Đồ án tốt nghiệp Đại Chương 1 Tổng quan về lý

sẽ làm ảnh hưởng đến UX, và UX sẽ gây ảnh hưởng đến CX của những người sử dụng sảnphẩm, dịch vụ Dưới đây là sơ đồ mối quan hệ giữa cả 3

CX - Customer Experience:

Customer Journey

Site functionality & Usability

UI - User Interface:

User-facing elements of UX design

Hình 1 6: Mối quan hệ giữ UI, UX va CX (Nguồn: Facebook - Asignum )

Tóm lại UI có vai trò quan trọng trong sự thành công của sản pham Mục đích củathiết kế UI là lam cho tương tác của người dùng với sản phẩm hiệu quả và đơn giản nhất

có thé UI tốt mang lại trải nghiệm "thân thiện cho người dùng", cho phép người dùng

tương tác với phần mềm hoặc phần cứng một cách dễ dàng và trực quan Từ đó giúp người dùng dé dàng tiếp cận thông tin, thúc đây khách hàng thực hiện chuyền đổi (quyết định mua hàng, sử dụng dịch vụ, liên hệ, để lại thông tin )

1.2 Tổng quan về thiết kế giao diện người dùng website

1.2.1 Giao diện người dùng website là gi?

Giao diện người dùng web là thiết kế, trình bày và thực thi các thành phần tạo nên

một trang web [5] Giao diện người dùng web là thuật ngữ ám chỉ cấu trúc thiết kế xuất

hiện trong các website, cho phép người dùng tương tác với trang web khi sử dụng.

Khi bạn nhìn một cuốn sách, hình thức trang trí, hình ảnh, màu sắc bên ngoài của nó

được hiểu là giao diện của nó Giao diện người dùng web bao gồm một tập hợp các yếu tố trực quan (như phần hình ảnh, video và văn bản), tương tác (gồm nút, thanh cuộn, điều

khiển) cùng một số thiết kế thê hiện thông tin và hành động sẵn có

Đỗ Thị Kim 8

Đồ án tốt nghiệp Đại Chương 1 Tổng quan về lý

Hình 1 7: Hình ảnh minh họa về giao diện người dùng website (Nguồn: blog.vietsol.net)

Nhiệm vụ chính của giao diện người dùng web là tạo ra một môi trường hỗ trợ giao

tiếp thuận lợi cùng hệ điều hành máy tính Giao diện web dù không phải là nội dungnhưng van thể truyền tải thông điệp, hình ảnh đến người dùng Một website có giao điện

web đẹp sẽ được người dùng đánh gia cao.

1.2.2 Phân loại giao diện người dùng website

Giao điện website được chia ra làm nhiều loại dựa theo các tiêu chí phân loại Trong

đó có thé kê đến các tiêu chí phân loại như sau:

Theo phân cấp trang: trang chủ website, trang chủ module, trang chỉ tiết danh mục,

trang chi tiết nội dung,

Theo lĩnh vực hoạt động:

Cách phân loại này chủ yếu để phục vụ cho các doanh nghiệp khi đặt thiết kế website Các chủ doanh nghiệp chưa biết nhiều về lĩnh vực làm web Đôi khi họ còn

không biết mô tả những gì mình mong muốn Do đó, khi bắt tay vào việc, họ có xu hướng

muốn tìm hiểu xem các website trong lĩnh vực của mình thường có giao diện thế nào, tính

năng gì để phục vụ mục đích chính giao diện Một số website theo lĩnh vực hoạt động:

website du lịch, giao diện website mỹ phẩm, giao diện website thời trang, giao diện

website nội thất, giao diện website nhà hàng, giao diện website ô tô,

Theo mục đích:

Khi thiết kế website bạn sẽ có mong muốn, mục đích ban đầu hoặc ít nhất là mục

đích chính Một số giao diện website chia theo mục đích:

Đỗ Thị Kim 9

Đồ án tốt nghiệp Đại Chương 1 Tổng quan về lý

- _ Giao diện website giới thiệu cá nhân: Tập trung giới thiệu về cá nhân, thành tựu,

mục dich dé xây dựng thương hiệu cá nhân

- _ Giao diện website bán hàng: Cung cấp các thông tin về sản phẩm ban hang, đặt

hang, mua hàng,

- _ Giao diện website doanh nghiệp: giới thiệu về doanh nghiệp, lịch sử hình thành, cơ

cau tô chức, thành tựu, sản phẩm, dịch vụ cung cap,

- Vv

GIỚI THIỆU VỀ QUANG ĐẠI _ NGƯỜI MAU DU LICH oy AN PHIM LIEN HE

Người mẫu Lữ khách Người ảnh hưởng Doanh nhân.

Hình 1 8: Giao diện website giới thiệu cá nhân của người mẫu Trần Quang Đại (Nguôn:

tranquangdai.vn)

Theo module tinh nang:

Website mỗi lĩnh vực có các tinh năng khác nhau Các tính năng phụ thuộc vào nhu

cầu lựa chọn của phía doanh nghiệp Giao diện website chia theo module tính năng: Giao

diện trang chủ website, giao diện trang sản phẩm, giao diện trang dịch vụ, giao diện trangtin tức, giao diện trang hình anh, giao diện trang liên hệ, giao diện trang tuyển dụng

Theo kiêu cau trúc website: website fullsite, landingpage, minisite, micorosite,

1.2.2 Các thành phan của giao diện người dùng website

Dé biết được thành phần của giao diện website gồm những gi, trước hết ta cần hiểuthành phần giao diện người dùng là gì Thành phần giao điện người dùng - user interfacecomponent (UI component) chỉ thành phan trong giao diện người ding phục vụ một chứcnăng cụ thể hoặc biểu thị một nội dung cụ thể nào đó [6]

Đỗ Thị Kim 10

Đồ án tốt nghiệp Đại Chương 1 Tổng quan về lý

Ví dụ các thành phần giao diện người dùng gồm: thanh điều hướng, menu, các nút, Các thành phan UI này có thé được kết hợp và sắp xếp theo nhiều cách khác nhau dé tạo

ra bố cục và thiết kế tông thé của giao diện người dùng

°°

om” ¬

\

=

Hình 1 9: Vi du về UI components (Nguồn: Dribble.com - Heavyweights)

Dưới đây là thành phan giao điện website phổ biến, thường thay ở trang chủ, bai viết, Với những trang cụ thé sẽ có những thay đổi phù hợp với nhu cầu hién thị và nội dung[7]:

- Phan dau trang (Header): Thường hiên thi trên tat ca các trang của website Day là

nơi tập trung thé hiện hình anh logo, thương hiệu, danh mục các thanh menu,

chuyên mục điều hướng người dùng đến các chuyên mục con và các bài viết, nội dung cụ thể Một số trang với các mục đích khác nhau có thể không dé hiện

header, ví dụ như một số landing page Điều này giúp tập trung người dùng vàocác hành động khác (đặt hàng, liên hệ, điền form, )

- Thanh điều hướng (Navigation Bar): chứa danh sách các liên kết điều hướng tới

các mục chính trang web của bạn:

- Slider / Carousel: Dưới phan header thường được thiết kế hình ảnh thu hút và giới

thiệu về chủ đề website, kèm theo là slogan của doanh nghiệp Kèm theo đó có thể

bố trí các nút CTA Ảnh có thé để dạng động (slide/ carousel) hoặc dé dang tĩnh

(banner).

- Khu vực thông tin (Content Area): Day là khu vực quan trọng trong một trang web,

noi Cung cấp thông tin cho người dùng Nội dung ở nhiều dạng: hình ảnh, âm

thanh, video, chính là nội dung chính của trang Đây là phần cần sự tập trung và

Đỗ Thị Kim 11

Đồ án tốt nghiệp Đại Chương 1 Tổng quan về lý

thể hiện

Đỗ Thị Kim 12