ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA KHOA HỌC VÀ KĨ THUẬT THÔNG TIN

BÁO CÁO ĐỒ ÁN CUỐI KỲ

MÔN THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG
Đề tài: Website du lịch

GVHD: ThS. Tạ Thu Thủy

Nhóm sinh viên thực hiện: 3

1. Mai Trọng Dũng MSSV: 19521393

2. Lê Thị Phương Thanh MSSV: 19522231
3. Nguyễn Lê Thanh MSSV: 19522238
4. Nguyễn Hoàng Việt MSSV: 19522517
5. Lê Tuấn Anh MSSV: 18520451

❀❀ Tp. Hồ Chí Minh, 05/2021 ❀❀

IE106 – Thiết kế Giao diện Người dùng

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................

……., ngày……...tháng……năm 2021

Người nhận xét

(Ký tên và ghi rõ họ tên)

2|Page
IE106 – Thiết kế Giao diện Người dùng
BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN:

Bảng 1: Bảng phân công, đánh giá thành viên

Họ và tên MSSV Phân công Đánh giá

- Tuần 1: - Tuần 1: Hoàn thành
+ Soạn các câu hỏi
khảo sát, lập bảng khảo
sát (google form)
+ Đưa ra các giải pháp
dựa vào yêu cầu của
khách hàng.
+ Soạn bản báo cáo C1
- Tuần 2: - Tuần 2: Hoàn thành

+ Viết báo cáo C2

+ Thiết kế giao diện
website thử nghiệm
- Tuần 3: - Tuần 3: Hoàn thành

Mai Trọng + Thiết kế giao diện

19521393
Dũng cho phần Trang chủ,
Khám phá nhiều hơn
nữa
+ Viết báo cáo
+ Thiết kế toàn bộ
trang thông tin về
COVID-19, trang
thông tin chi tiết khi
Đặt xe máy và đặt ô tô,
tour và đặt phòng
+ Thiết kế bổ sung giao
diện cho trang đăng
nhập, đăng kí.

3|Page
IE106 – Thiết kế Giao diện Người dùng
+ Thiết kế giao diện
cho trang địa điểm du
lịch yêu thích
“TP.HCM”
- Tuần 4:
- Tuần 4: Hoàn thành
+ Tạo tương tác giao
diện cho phần trang
chủ, thông tin Covid-
19
+ Viết báo cáo
- Tuần 5: - Tuần 5: Hoàn thành

+ Viết báo cáo đồ án

+ Đề xuất ra giải pháp
cho trang web trong
tương lai.
- Chỉnh sửa toàn bộ những
lỗi mà nhóm gặp phải sau
khi được góp ý trong
buổi báo cáo đồ án
- Tuần 1: - Tuần 1: Hoàn thành
+ Soạn các câu hỏi
khảo sát
+ Tìm ưu, nhược điểm
của website Vntrip

Lê Thị + Đưa ra một số giải

Phương 19522231 pháp dựa vào yêu cầu

Thanh của khách hàng

- Tuần 2: - Tuần 2: Hoàn thành
+ Thiết kế giao diện
website thử nghiệm

4|Page
IE106 – Thiết kế Giao diện Người dùng
+ Thiết kế chi tiết giao
diện tour, đặt phòng,
đăng kí
- Tuần 3: - Tuần 3: Hoàn thành
+ Thiết kế giao diện,
phủ màu cho phần Đặt
phòng, khuyến mãi
+ Thiết kế giao diện,
phủ màu cho phần giỏ
hàng, di chuyển (thuê
xe , đặt vé), bài viết
tour
- Tuần 4: - Tuần 4: Hoàn thành
+ Tạo tương tác
(prototype) cho trang
giỏ hàng , tạo tương tác
chọn mua hàng ( di
chuyển , tour )
- Tuần 5:
- Tuần 5: Hoàn thành
+ Tìm ưu điểm, đưa ra
phương pháp phát triển
trong tương lai
- Tuần 1: - Tuần 1: Hoàn thành
+ Soạn các câu hỏi
khảo sát
+ Tìm ưu, nhược điểm
Nguyễn Lê của website Klook
19522238
Thanh + Soạn lời mở đầu cho
bài báo cáo
+ Đưa ra một số giải
pháp dựa vào yêu cầu
của khách hàng

5|Page
IE106 – Thiết kế Giao diện Người dùng
- Tuần 2: - Tuần 2: Hoàn thanh
+ Thiết kế giao diện
website chi tiết: Trang
chủ, khuyến mãi, di
chuyển, khám phá
nhiều hơn nữa
- Tuần 3:
- Tuần 3: Hoàn thành
+ Thiết kế giao diện
cho phần trang chủ,
khám phá nhiều hơn
nữa
+ Phối màu
+ Thiết kế phần gợi ý
ẩm thực
- Tuần 4: - Tuần 4: Hoàn thành
+ Thiết kế slide thuyết
trình cho đồ án cuối kì
- Tuần 5:
- Tuần 5: Hoàn thành
+ Đánh giá ưu điểm
cho trang web
- Tuần 1: - Tuần 1: Hoàn thành
+ Soạn các câu hỏi
khảo sát
+ Tìm ưu, nhược điểm
của website travel
Nguyễn + Đưa ra một số giải
19522517
Hoàng Việt pháp dựa vào yêu cầu
của khách hàng
- Tuần 2: Hoàn thành
- Tuần 2:
+ Thiết kế giao diện
website thử nghiệm
- Tuần 3: Hoàn thành
- Tuần 3:

6|Page
IE106 – Thiết kế Giao diện Người dùng
+ Thiết kế giao diện,
phủ màu cho phần
Tour, đăng nhập, đăng
kí - Tuần 4: Hoàn thành
- Tuần 4:
+ Tạo tương tác
(prototype) cho các
trang “di chuyển”,
“tour”, “đặt phòng” và
- Tuần 5: Hoàn thành
blog các món ăn tại các
vùng miền.
- Tuần 5:
+ Tìm nhược điểm,
đưa ra phương án khắc
phục, hướng phát triển
trong tương lai.

- Tuần 1: - Tuần 1:
+ Tìm ưu, nhược điểm + Hoàn thành
của website chudu24
- Tuần 2: - Tuần 2:
+ Thiết kế giao diện
+ Hoàn thành
website thử nghiệm
Lê Tuấn - Tuần 3:
- Tuần 3:
Anh + Thiết kế giao diện:
+ Hoàn thành
di chuyển
+ Thiết kế giao diện:
- Tuần 4:
thông tin review về các
địa điểm được yêu + Hoàn thành
thích
- Tuần 4:
- Tuần 5:

7|Page
IE106 – Thiết kế Giao diện Người dùng
+ Tạo tương tác giao + Hoàn thành
diện cho phần Tour,
Khám phá nhiều hơn
- Tuần 5:
+ Đánh giá khuyết
điểm cho trang web

8|Page
IE106 – Thiết kế Giao diện Người dùng
LỜI MỞ ĐẦU

Du lịch được mệnh danh là “ngành công nghiệp không khói”, đem đến lợi nhuận
cao và việc làm hàng năm cho nhiều doanh nghiệp và cá nhân. Tuy vậy do tác động của
đại dịch COVID-19, ngành du lịch cần có sự định hướng mới sao cho phù hợp với tình
hình chung, đồng thời khai thác những điểm đến mới lạ, đòi hỏi những doanh nghiệp
muốn duy trì và phát triển dịch vụ của mình phải có cách tiếp cận người tiêu dùng hợp
lý, đúng đắn và hiệu quả.

Thông qua những khảo sát thực tế thực hiện với đối tượng chủ yếu là người trẻ,
đa số là sinh viên và người lao động có kinh nghiệm dưới 1 năm, nhóm 3 thu về những
ý kiến và nhận xét có thể nghiên cứu và tìm kiếm giải pháp. Đây là những người chưa
có thu nhập hoặc thu nhập còn thấp, nhưng lại mong muốn được đi chơi để có nhiều trải
nghiệm và thư giãn sau khi học tập và làm việc. Do đó họ có những nhu cầu về một
phương pháp để có thể lựa chọn và lên kế hoạch du lịch sao cho thật kinh tế, có được
nhiều thông tin về nơi mình dự định ghé thăm và được hỗ trợ để tối ưu chi phí và thời
gian cho chuyến đi, thông qua những ưu đãi về giá vé phương tiện đi lại, rút ngắn thời
gian di chuyển hoặc chờ đợi và nhiều lựa chọn khác.

Do đó, nhóm chúng tôi đã tiến hành xây dựng kế hoạch và thiết kế giao diện phù
hợp với người sử dụng trên nền tảng website. Giao diện được thiết kế với các chức năng
có thể hỗ trợ người dùng tất cả các bước trong suốt quá trình lựa chọn điểm đến du lịch,
đặt vé và các dịch vụ trong và sau hành trình. Với môi trường ứng dụng thân thiện, dựa
trên trải nghiệm thực tế, kết nối với nhiều doanh nghiệp hoạt động trong lĩnh vực cũng
như đề xuất những lựa chọn có lợi nhất cho người sử dụng, website hy vọng gặt hái
được thành công thông qua lượt sử dụng ứng dụng, số người đăng kí và lựa chọn các
gói dịch vụ, các giao dịch thành công giữa người dùng và doanh nghiệp, cũng như số
lượng review tích cực thu về từ khách hàng trước đó.

Dự án thiết kế giao diện website du lịch của nhóm 3 được hoàn thiện trong thời
gian giới hạn cũng như khả năng còn hạn chế của các thành viên trong nhóm nên chắc

9|Page
IE106 – Thiết kế Giao diện Người dùng
chắn không tránh khỏi nhiều thiếu sót. Nhóm rất mong nhận được những ý kiến đóng
góp quý báu từ Cô và các bạn để sửa chữa, tiếp thu thêm kinh nghiệm trong tương lai.

Sau đây, nhóm chúng tôi sẽ trình bày về phần mềm, quy trình thiết kế giao diện
và giao diện hoàn chỉnh qua các chương sau:

• Chương 1: Quy trình khảo sát phần mềm

• Chương 2: Thiết kế phác thảo giao diện
• Chương 3: Giao diện website hoàn chỉnh
• Chương 4: Tương tác giao diện
• Chương 5: Kết luận

10 | P a g e
IE106 – Thiết kế Giao diện Người dùng
DANH MỤC CÁC BẢNG, HÌNH ẢNH

Danh mục các bảng:

Bảng 1: Bảng phân công, đánh giá thành viên………………………………………. 03

Danh mục hình ảnh:

Hình 1.1: Độ tuổi người tham gia khảo sát .............................................................................. 15

Hình 1.2: Khảo sát về thói quen đi du lịch cùng với ai của người Việt ................................... 16
Hình 1.3: Khảo sát về thói quen đi du lịch cùng với ai của Quandme (được trích dẫn trong
Marketing AI) ........................................................................................................................... 16
Hình 1.4: Khảo sát về số lượng thành viên đi du lịch .............................................................. 16
Hình 1.5: Nhu cầu du lịch trong nước/ nước ngoài của người Việt ......................................... 17
Hình 1.6: Khảo sát nhu cầu đi du lịch theo tour hay tự túc ..................................................... 17
Hình 1.7: Phiếu khảo sát người dùng có tham khảo website du lịch để lên kế hoạch ............. 18
Hình 1.8: Mong muốn của khách hàng khi sử dụng các dịch vụ website du lịch .................... 18
Hình 1.9: Khảo sát thời gian đi du lịch của du khách.............................................................. 19
Hình 1.10: Phiếu khảo sát chi phí người dùng sẵn sang chi trả cho chuyến du lịch ............... 19
Hình 1.11: Phiếu khảo sát chi phí khách hanh thường chọn khi đi du lịch ............................. 20
Hình 1.12: Hình ảnh trang web của Klook.com ....................................................................... 21
Hình 1.13: Hình ảnh trang web của Vntrip.vn ......................................................................... 22
Hình 1.14: Hình ảnh trang web của travel.com.vn .................................................................. 27
Hình 2.1.1: Bản phác thảo thử nghiệm trang chủ .................................................................... 31
Hình 2.1.2.2: Bản phác thảo thử nghiệm khuyến mãi .............................................................. 31
Hình 2.1.2.3: Yêu cầu của người dùng về website phần "Di Chuyển" ..................................... 32
Hình 2.1.2.4: Yêu cầu của người dùng về website phần "Di Chuyển" ..................................... 32
Hình 2.1.2.5: Yêu cầu của người dùng về website phần "Đặt phòng" ..................................... 32
Hình 2.1.2.6: Yêu cầu của người dùng về website phần "Tour" .............................................. 33
Hình 2.1.2.7: Yêu cầu của người dùng về website phần "Khám phá nhiều hơn nữa" ............. 33
Hình 2.2.2.8: Yêu cầu của người dùng về website phần "Di Chuyển" ..................................... 36
Hình 2.1.2.9: Yêu cầu của người dùng về website phần "Khám phá nhiều hơn nữa" ............. 37
Hình 3.1: Giao diện website mẫu ............................................................................................. 40
Hình 3.2: Sơ đồ minh họa cho trang web ................................................................................. 40
Hình 3.3: Giao diện phần trang chủ ........................................................................................ 41
Hình 3.4: Bài viết review về địa điểm du lịch ở TP.HCM ........................................................ 42
Hình 3.5: Bài viết review về địa điểm du lịch Đà Nẵng ........................................................... 43
Hình 3.6: Bài viết review Vũng Tàu ......................................................................................... 44
Hình 3.7: Giao diện khuyến mãi ............................................................................................... 45
Hình 3.8: Giao diện cho thuê xe máy ....................................................................................... 46
Hình 3.9: Giao diện thông tin của trang Thuê xe máy ............................................................. 47
Hình 3.10: Giao diện Thuê xe ô tô ........................................................................................... 48
Hình 3.11: Giao diện thông tin đặt xe ô tô ............................................................................... 49
Hình 3.12: Giao diện "Phương tiện khác" ............................................................................... 50
Hình 3.13: Giao diện đặt vé máy bay ....................................................................................... 51
Hình 3.14: Giao diện phần đặt vé tàu ...................................................................................... 52
Hình 3.15: Giao diện đặt vé xe khách ...................................................................................... 53

11 | P a g e
IE106 – Thiết kế Giao diện Người dùng
Hình 3.16: Giao diện Đặt phòng .............................................................................................. 54
Hình 3.17: Giao diện bài viết chi tiết đặt phòng khách sạn ..................................................... 55
Hình 3.18: Giao diện Tour ....................................................................................................... 56
Hình 3.19: Giao diện bài viết về Tour ...................................................................................... 57
Hình 3.20: Giao diện phần Khám phá nhiều hơn nữa ............................................................. 58
Hình 3.21: Bài review về địa điểm ẩm thực Đà Nẵng .............................................................. 59
Hình 3.22: Bài review về địa điểm ẩm thực Đà Lạt ................................................................. 60
Hình 3.23: Bài review về địa điểm ẩm thực TP.HCM .............................................................. 61
Hình 3.24: Bài review về địa điểm ẩm thực Hà Nội................................................................. 62
Hình 3.25: Bài review về địa điểm ẩm thực Vũng Tàu............................................................. 63
Hình 3.26: Bài review về địa điểm ẩm thực Nha Trang ........................................................... 64
Hình 3.27: Bài review về địa điểm ẩm thực Bến Tre ............................................................... 65
Hình 3.28: Giao diện chọn ngôn ngữ cho trang web ............................................................... 66
Hình 3.29: Giao diện tiền tệ cho trang web ............................................................................. 66
Hình 3.30: Giao diện phần đăng nhập ..................................................................................... 66
Hình 3.31: Giao diện phần Đăng kí ......................................................................................... 66
Hình 3.32: Giao diện về trợ giúp người dùng .......................................................................... 67
Hình 3.33: Giao diện trợ giúp – các câu hỏi thường gặp ........................................................ 67
Hình 3.34: Giao diện phần thông tin COVID (1) ..................................................................... 68
Hình 3.35: Giao diện thông tin về COVID (2) ......................................................................... 69
Hình 3.36: Giao diện về thông tin COVID (3) ......................................................................... 70
Hình 3.37: Giao diện thông tin về COVID (4) ......................................................................... 71
Hình 3.38: Giao diện giỏ hàng trống ....................................................................................... 72
Hình 3.39: Giao diện Giỏ hàng ................................................................................................ 72
Hình 3.40: Giao diện Giỏ hàng ................................................................................................ 73
Hình 3.41: Giao diện giỏ hàng khi điền thông tin đặt hàng..................................................... 73
Hình 3.42: Giao diện điền thông tin khi đặt hàng .................................................................... 74
Hình 3.43: Giao diện khi người dùng đăng nhập tài khoản..................................................... 74
Hình 3.44: Giao diện tài khoản của người dùng ...................................................................... 74
Hình 4.1: Hình ảnh về tổng thể tương tác giao diện ................................................................ 76
Hình 4.2: Tạo tương tác cho Trang chủ ................................................................................... 77
Hình 4.3: Tạo tương tác cho trang Khuyến mãi ....................................................................... 77
Hình 4.4: Tương tác trên trang Di chuyển ............................................................................... 77
Hình 4.5: Tạo tương tác cho trang Đặt phòng ......................................................................... 78
Hình 4.6: Tương tác giao diện trên trang Tour ....................................................................... 78
Hình 4.7: Tương tác trên trang Khám phá nhiều hơn .............................................................. 78
Hình 4.8: Tương tác giao diện trên trang Gợi ý ...................................................................... 79
Hình 4.9: Tương tác giao diện Đăng nhập - Đăng kí .............................................................. 80
Hình 4.10: Tương tác giao diện cho Giỏ hàng ......................................................................... 80
Hình 4.11: Tạo tương tác giao diện cho Thông tin điểm đến .................................................. 81
Hình 4.12: Tương tác giao diện cho Review ẩm thực .............................................................. 81

12 | P a g e
IE106 – Thiết kế Giao diện Người dùng

MỤC LỤC
LỜI MỞ ĐẦU ................................................................................................................ 9
DANH MỤC CÁC BẢNG, HÌNH ẢNH .................................................................... 11
Chương 1: KHẢO SÁT, PHÂN TÍCH, THAM KHẢO ...................................... 15

1.1.1 Khảo sát yêu cầu: ................................................................................... 15

1.1.2 Phân tích yêu cầu và đề xuất giải pháp .................................................. 20

1.2.1 Website của Klook.com ......................................................................... 21

1.2.2 Website của Vntrip.vn ........................................................................... 22
1.2.3 Website của Chudu24.com .................................................................... 25
1.2.4 Website của Travel.com.vn ................................................................... 27

Chương 2: PHÁC THẢO GIAO DIỆN................................................................. 31

Chương 3: GIAO DIỆN WEBSITE HOÀN CHỈNH........................................... 40

Chương 4: TƯƠNG TÁC GIAO DIỆN ................................................................ 74

Chương 5: KẾT LUẬN ........................................................................................... 82

13 | P a g e
IE106 – Thiết kế Giao diện Người dùng

TÀI LIỆU THAM KHẢO........................................................................................... 84

14 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Chương 1: KHẢO SÁT, PHÂN TÍCH, THAM KHẢO

Khảo sát yêu cầu khách hàng và phân tích yêu cầu
1.1.1 Khảo sát yêu cầu:
- Chúng tôi đã tạo form khảo sát người dùng về một website du lịch và tham khảo
kết quả khảo sát của 1 trang khác (Marketing AI) để có sự đánh giá khách quan
hơn.

Link khảo sát: https://forms.gle/pd8dwFmy44xUGjgP9

Kết quả khảo sát của trang đánh giá du lịch Marketing AI:
https://marketingai.admicro.vn/khao-sat-ve-trai-nghiem-du-lich-cua-nguoi-viet-co-hoi-
nao-cho-cac-cong-ty-lu-hanh/?fbclid=IwAR29LIPd-
svm53R_c2EdPwXPvoXjTJA2OmNOzIk3lTZRO6tX0rP51K_3KZw
Sau khi hoàn thành khảo sát với gần 150 phản hồi, chúng tôi đã có phản hồi tích cực sau
về phía người dùng:
Về độ tuổi tham gia khảo sát:
- Đa số nằm trong khoảng từ 18 tuổi đến 35 tuổi.

Hình 1.1: Độ tuổi người tham gia khảo sát

Nhu cầu của người dùng khi tham khảo các trang web du lịch:
Theo bảng khảo sát, thì người Việt Nam thường có xu hướng đi du lịch cùng với gia
đình là nhiều nhất chiếm 67,4%. Đối chiếu với bảng khảo sát của Quandme, cũng cho
kết quả tương đồng.

15 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 1.2: Khảo sát về thói quen đi du lịch cùng với ai của người Việt

Hình 1.3: Khảo sát về thói quen đi du lịch cùng với ai của Quandme (được trích dẫn trong Marketing AI)

Tiếp đến là kết quả khảo sát số lượng người thường đi du lịch chung với nhau. Cao nhất
là phương án khoảng 5 người (80,6%).

Hình 1.4: Khảo sát về số lượng thành viên đi du lịch

Chúng tôi nhận thấy nhu cầu du lịch của người Việt Nam từ các độ tuổi khác nhau, phần
lớn nhu cầu là ở trong nước. So sánh với kết quả của trang Marketing AI cũng cho kết
quả tương đồng với 89% du lịch trong nước và 11% du lịch nước ngoài.

16 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 1.5: Nhu cầu du lịch trong nước/ nước ngoài của người Việt

Phần lớn, người Việt Nam thường đi du lịch tự túc nhiều hơn là đi du lịch theo tour. Đối
chiếu với bảng thống kê của trang Marketing AI, ta cũng thấy sự tương đồng về kết quả
giữa tự túc (87%) và theo tour (22%).

Hình 1.6: Khảo sát nhu cầu đi du lịch theo tour hay tự túc

Ta có thể nhận thấy lý do người Việt Nam ưa thích loại hình du lịch tự túc (dựa trên
bảng thống kê của trang Marketing AI) bởi vì:
• Thích tự lên kế hoạch: 60%
• Thích vì sự linh hoạt: 59%
• Có thể đi đâu tùy thích 56%
• Giá rẻ: 42%
• Lịch trình thoải mái: 40%
• Có thể làm mọi thứ theo ý mình: 31%
• Có thể đi cùng bạn bè: 6%

17 | P a g e
IE106 – Thiết kế Giao diện Người dùng
Khi chúng tôi thăm dò ý kiến khách hàng về vấn đề có tham khảo các trang web giới
thiệu về du lịch trước khi chuẩn bị lên kế hoạch, thì đa số đều nhận được trả lời là có
(78,1%).

Hình 1.7: Phiếu khảo sát người dùng có tham khảo website du lịch để lên kế hoạch

Mong muốn được nhận các thông tin như: khuyến mãi (bao gồm: giá vé tàu xe, dịch vụ
ăn uống,…), địa điểm được du khách yêu thích, đánh giá cao, dịch vụ đặt phòng khách
sạn, phương tiện du lịch,…cũng được khách hàng quan tâm khi sử dụng một trang web
về du lịch. Cụ thể như sau:

Hình 1.8: Mong muốn của khách hàng khi sử dụng các dịch vụ website du lịch

Khảo sát về thời gian đi du lịch của khách hàng, ta nhận thấy nhu cầu đi vào ngày nghỉ,
dịp tết là cao nhất, chiếm 65,4%.

18 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 1.9: Khảo sát thời gian đi du lịch của du khách

Về mức chi phí khách hàng sẵn sàng chi trả, tỉ lệ cao nhất chiếm 45,9% là mức chi trả
từ 3 triệu đến 10 triệu. Tiếp đến là dưới 3 triệu, chiếm 38.5%

Hình 1.10: Phiếu khảo sát chi phí người dùng sẵn sang chi trả cho chuyến du lịch

Tiếp đến, là kết quả khảo sát các phương tiện thường được sử dụng nhất của khách hàng,
ta nhận thấy, nhu cầu đi lại bằng xe máy chiếm tỉ lệ cao nhất, khoảng 61%, tiếp đến là
máy bay với 50,7%

19 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 1.11: Phiếu khảo sát chi phí khách hanh thường chọn khi đi du lịch

1.1.2 Phân tích yêu cầu và đề xuất giải pháp

- Thông qua bảng khảo sát, chúng tôi nhận thấy khách hàng thường chọn đi du lịch
cùng với gia đình, bạn bè, số lượng khoảng 5 người. Từ đó, chúng tôi sẽ đưa ra các
đề xuất, gợi ý những gói dịch vụ phù hợp với từng nhu cầu của một nhóm khách
hàng riêng (dịch vụ đặt phòng đôi/ đơn, giá vé phương tiện di chuyển, dịch vụ ăn
uống,…)
- Du lịch tự túc chiếm phần ưu thế nhiều hơn là theo tour bởi lý do chính là họ thích
tự mình lập kế hoạch cho chuyển đi mà không phải phụ thuộc vào kế hoạch theo
dịch vụ tour. Chính vì vậy, chúng tôi sẽ đưa ra các gợi ý về địa điểm mà được du
khách yêu thích dựa vào lượt rating của khách hàng đã trải nghiệm,…
- Kết hợp với các Youtuber chuyên review về du lịch như: Khoai Lang Thang, Chan
La Cà, Fahoka Xê dịch,…để tạo ra những video review chân thực nhất những trải
nghiệm trong chuyến đi để khách hàng cảm thấy an tâm khi sử dụng dịch vụ của
chúng tôi. Không những thế, mọi người còn có thể tham khảo những bài đánh giá
thông qua những khách hàng đã từng trải nghiệm sử dụng dịch vụ của công ty.
- Chúng tôi sẽ hợp tác với các hãng phương tiện (máy bay, tàu, ô tô,…), khách sạn,
nhà hàng,… để có thể đề xuất các khuyến mãi như đặt vé, đặt phòng, các dịch vụ
ăn uống,…
- Ngoài ra, khách hàng thường chọn xe máy là phương tiện yêu thích trong chuyến
du lịch của mình có lẽ bởi sự tiện lợi và chi phí rẻ. Vì thế chúng tôi sẽ mở thêm
dịch vụ cho thuê xe máy và các ưu đãi để khách hàng có một trải nghiệm tuyệt vời
trong chuyến đi của mình.

20 | P a g e
 IE106 – Thiết kế Giao diện Người dùng
- Thông qua khảo sát, khách hàng thường đi du lịch vào các ngày lễ, kì nghỉ. Vào lúc
đó, lượng khách tăng cao, có thể khiến cho chi phí của khách hàng tăng. Nhưng với
chính sách bình ổn giá và có ưu đãi tích điểm cho khách hàng thân thiết nên khách
hàng sẽ không phải lo lắng về vấn đề đó.
- Một vấn đề cũng được nhiều khách hàng quan tâm đó chính là vấn đề về vệ sinh an
toàn thực phẩm. Chính vì thế, ngoài những dịch vụ nhà hàng uy tín có liên kết với
công ty chúng tôi, chúng tôi còn giới thiệu cho quý vị thêm những quán ăn “hè
phố” được bộ y tế chứng nhận vệ sinh an toàn thực phẩm và được thực khách, du
khách đánh giá cao trong các bài review.

Tìm hiểu, nghiên cứu ứng dụng liên quan

1.2.1 Website của Klook.com

Hình 1.12: Hình ảnh trang web của Klook.com

Các nút phần header được ẩn

phần đường viền, khi di
chuyển trỏ chuột mới hiện lên.
Có bảng sổ xuống để người
ƯU
ĐIỂM dùng lựa chọn.
Nút được bo tròn viền, có hiện
màu khi bấm chọn hoặc hiển
thị là đang ở trang đấy.

21 | P a g e
 IE106 – Thiết kế Giao diện Người dùng
Thiết kế dạng lưới, nội dung
phân chia rõ ràng.

Có nhiều dịch vụ tiện ích khác

như: Blog, gợi ý dịch vụ,…

NHƯỢC Phần header của trang để cỡ

ĐIỂM chữ hơi nhỏ, không cân xứng
với trang.

1.2.2 Website của Vntrip.vn

Hình 1.13: Hình ảnh trang web của Vntrip.vn

22 | P a g e
 IE106 – Thiết kế Giao diện Người dùng
Cỡ chữ vừa phải, không
có chân. Có khoảng trắng
giữa các mục. Có thanh
màu cam hiển thị giúp
người dùng biết mình
đang ở trang nào.

ƯU
ĐIỂM

Khi chọn vào phần cẩm

nang thì trang web sẽ tự
động tạo ra một tab khác
để người dùng có thể dễ
dàng tìm hiểu song song
giữa khách sạn, máy bay
mình cần với bài viết
tham khảo về nơi đó để
người dùng dễ lựa chọn.

Trang không có giỏ hàng.

Thanh menu không được

giữ lại khi chuyển xuống
các phần dưới của trang.

23 | P a g e
 IE106 – Thiết kế Giao diện Người dùng
Các mục giới thiệu về các
NHƯỢC
combo khách sạn, máy
ĐIỂM
bay , hot deal hơi to , tạo
cảm giác nhìn bị rối và khi
kéo xuống thì chỉ nhìn
thấy một nửa của các mục
ở trên không thể so sánh
để lựa chọn các mục với
nhau được.

Phần hỗ trợ nếu kéo xuống

cuối trang sẽ che đi các
trang thông tin ( Facebook,
Instagram ,…) của trang.

Rút kinh nghiệm dựa trên ưu khuyết điểm:

- Thêm mục giỏ hàng để khách hàng có thể lựa chọn mua chuyến bay, khách sạn.
- Thiết kế phần hỗ trợ sao cho không che các thông tin khác.
- Tạo kích cỡ các mục thông tin combo khách sạn, vé máy bay phù hợp để thuận
mắt người dùng.
- Giữ lại thanh menu khi di chuyển xuống phần dưới của trang để mang lại sự tiện
lợi cho người dùng.
- Đánh dấu trang hiện tại để người dùng biết mình đang ở trang nào.

24 | P a g e
 IE106 – Thiết kế Giao diện Người dùng
1.2.3 Website của Chudu24.com

Hình 1.1: Hình ảnh trang web của Chudu24.com

Font chữ dễ nhìn, có

những mục dùng chữ in
hoa.

ƯU
ĐIỂM

Thiết kế kiểu lưới, dễ sử

dụng.

25 | P a g e
 IE106 – Thiết kế Giao diện Người dùng
Thiết kế phần này không
được cân xứng, gây cảm
giác khó chịu cho người
dùng.
NHƯỢC
ĐIỂM

Chỉ có thể đặt vé máy

bay, không có những
phương tiện khác.

Chỉ hỗ trợ ngôn ngữ

tiếng Việt.

26 | P a g e
 IE106 – Thiết kế Giao diện Người dùng
1.2.4 Website của Travel.com.vn

Hình 1.14: Hình ảnh trang web của travel.com.vn

Cỡ chữ vừa phải, font

chữ không có chân. Có
các khoảng trắng giữa
các mục.

ƯU
Màu sắc tương phản, dễ
ĐIỂM
phân biệt chữ, biểu
tượng và màu nền. Màu
sắc dịu nhẹ, dễ nhìn.

Thanh menu không được

giữ lại khi chuyển xuống
các phần dưới của trang.

NHƯỢC
ĐIỂM

27 | P a g e
IE106 – Thiết kế Giao diện Người dùng
Có phần có chức năng
tương tự như thanh menu
nhưng để vị trí khó thấy,
màu không nổi bật người
dùng có thể bỏ qua phần
này và muốn dùng phải
nhấp chuột vào để mở
hiển thị phần này.

Cần phải nhấp vào biểu

tượng mới tìm thấy mục
đăng ký và đăng nhập.

Có các mục đã xuất hiện

ở menu lặp lại, dư thừa,
không cần thiết.

Trong phần đặt tour cần

phải nhập chính xác số
khách hàng, không có
thể thêm khách hàng
trong phần danh sách
khách hàng, không thể
điều chỉnh độ tuổi

28 | P a g e
IE106 – Thiết kế Giao diện Người dùng
Không có mục hủy đặt
tour, chỉ có cách duy
nhất để hủy là chờ hết
hạn thanh toán.

Khi chọn các mục thì

trang sẽ có hiệu ứng
chuyển động và đưa
người dùng vào vị trí cố
định. Khi nhấp ra ngoài
để tắt cũng có hiệu ứng
tương tự.

Rút kinh nghiệm dựa trên ưu khuyết điểm:

- Sử dụng cỡ chữ vừa phải, font chữ không chân.
- Dùng màu sắc tương phản, dịu nhẹ để dễ đọc và quan sát.
- Giữ lại thanh menu khi di chuyển xuống phần dưới của trang để mang lại sự tiện
lợi cho người dùng.
- Các mục như đăng ký, đăng nhập nên để bên ngoài để người dùng dễ tìm thấy.
- Tránh lặp lại nhiều mục có chức năng trùng nhau để không làm người dùng bổi
rối.
- Đặt tên các mục dễ hiểu, tránh vòng vo.
- Tránh các hiệu ứng gây cản trở quá trình sử dụng.
Rút ra kinh nghiệm
Thông qua việc khảo sát các trang web du lịch có uy tín, nhóm chúng tôi đã rút
ra được những kinh nghiệm như sau:

29 | P a g e
IE106 – Thiết kế Giao diện Người dùng
- Có nhiều ngôn ngữ, để không chỉ người Việt Nam, mà kể cả người nước ngoài
cũng có thể hiểu và sử dụng website.
- Có dịch vụ hỗ trợ và tư vấn cho khách hàng bằng nhiều hình thức như: gọi điện,
tin
- Đưa ra cảnh báo vùng dịch COVID-19 hiện nay nếu du khách có ý định, điều đó
không chỉ giúp đảm bảo nhắn hoặc sẽ đưa ra một số câu hỏi phổ biến mà khách
hàng thường hay thắc mắc.an toàn sức khỏe cho du khách mà còn giúp chính phủ
kiểm soát được dịch bệnh.
- Bổ sung thêm mục cẩm nang du lịch cho những khách hàng có ít kinh nghiệm
khi đi du lịch.
- Có nhiều đơn vị tiền tệ để khách hàng dễ dàng thanh toán.
- Phải có đầy đủ những tính năng cơ bản của 1 trang web, chẳng hạn như chọn mua
và thanh toán.
- Phải có thanh công cụ tìm kiếm chuyên dụng cho từng mục lớn (tour, đặt phòng,
di chuyển,…)
- Giao diện phải dễ sử dụng, tối ưu nhất cho người sử dụng và phải có phần hỗ trợ
giải đáp các thắc mắc bằng cách gọi điện hoặc sẽ có những câu trả lời cho những
câu hỏi phổ biến nhất của khách hàng.

30 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Chương 2: PHÁC THẢO GIAO DIỆN

Bản phác thảo thử nghiệm
- Sau khi đã tham khảo những trang web khác, rút ra nhận xét và kinh nghiệm thì
nhóm chúng em đã phác thảo bản thử nghiệm, thiết kế trang web theo dạng lưới,
bo tròn các nút, sử dụng font chữ dễ đọc, trang web dễ sử dụng.

Hình 2.1.1: Bản phác thảo thử nghiệm trang chủ

Hình 2.1.2.2: Bản phác thảo thử nghiệm khuyến mãi

31 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 2.1.2.3: Yêu cầu của người dùng về website phần "Di Chuyển"

Hình 2.1.2.4: Yêu cầu của người dùng về website phần "Di Chuyển"

Hình 2.1.2.5: Yêu cầu của người dùng về website phần "Đặt phòng"

32 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 2.1.2.6: Yêu cầu của người dùng về website phần "Tour"

Hình 2.1.2.7: Yêu cầu của người dùng về website phần "Khám phá nhiều hơn nữa"

Bản phác thảo website Du lịch

Hình 2.2.1: Yêu cầu của khách hàng

33 | P a g e
IE106 – Thiết kế Giao diện Người dùng
Từ yêu cầu của khách hàng, nhóm chúng em đã thiết kế sơ bộ về trang web như sau:

Hình 2.2.1: Bản phác thảo website trang chủ

34 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 2.2.2: Bản phác thảo website khuyến mãi

35 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 2.2.2.8: Yêu cầu của người dùng về website phần "Di Chuyển"

36 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 2.1.2.9: Yêu cầu của người dùng về website phần "Khám phá nhiều hơn nữa"

37 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 2.1.5: Yêu cầu của người dùng về website phần "Đặt phòng"

38 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 2.1.6: Yêu cầu của người dùng về website phần "Tour"

39 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Chương 3: GIAO DIỆN WEBSITE HOÀN CHỈNH

Giao diện website Du lịch
Sau khi phác thảo bản vẽ sơ bộ về trang web du lịch, nhóm chúng em đã tham khảo
một số trang web khác để hoàn chỉnh giao diện và màu sắc cho bản thiết kế của mình.
Sau đây là giao diện của website mẫu

Hình 3.1: Giao diện website mẫu

- Để có cái nhìn tổng quan hơn về giao diện website, nhóm chúng em xin được
tóm tắt bằng sơ đồ như sau:

Hình 3.2: Sơ đồ minh họa cho trang web

40 | P a g e
IE106 – Thiết kế Giao diện Người dùng
Bản thiết kế giao diện hoàn chỉnh
Sau đây là bản thiết kế giao diện hoàn chỉnh của nhóm chúng em

Hình 3.3: Giao diện phần trang chủ

41 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.4: Bài viết review về địa điểm du lịch ở TP.HCM

42 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.5: Bài viết review về địa điểm du lịch Đà Nẵng

43 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.6: Bài viết review Vũng Tàu

44 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.7: Giao diện khuyến mãi

45 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.8: Giao diện cho thuê xe máy

46 | P a g e
IE106 – Thiết kế Giao diện Người dùng
Bài viết trong phần Di chuyển (Thuê xe)

Hình 3.9: Giao diện thông tin của trang Thuê xe máy

47 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.10: Giao diện Thuê xe ô tô

48 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.11: Giao diện thông tin đặt xe ô tô

49 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.12: Giao diện "Phương tiện khác"

50 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.13: Giao diện đặt vé máy bay

51 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.14: Giao diện phần đặt vé tàu

52 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.15: Giao diện đặt vé xe khách

53 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.16: Giao diện Đặt phòng

54 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.17: Giao diện bài viết chi tiết đặt phòng khách sạn

55 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.18: Giao diện Tour

56 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.19: Giao diện bài viết về Tour

57 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.20: Giao diện phần Khám phá nhiều hơn nữa

58 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.21: Bài review về địa điểm ẩm thực Đà Nẵng

59 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.22: Bài review về địa điểm ẩm thực Đà Lạt

60 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.23: Bài review về địa điểm ẩm thực TP.HCM

61 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.24: Bài review về địa điểm ẩm thực Hà Nội

62 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.25: Bài review về địa điểm ẩm thực Vũng Tàu

63 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.26: Bài review về địa điểm ẩm thực Nha Trang

64 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.27: Bài review về địa điểm ẩm thực Bến Tre

65 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.28: Giao diện chọn ngôn ngữ cho trang web

Hình 3.29: Giao diện tiền tệ cho trang web

Hình 3.30: Giao diện phần đăng nhập

Hình 3.31: Giao diện phần Đăng kí

66 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.32: Giao diện về trợ giúp người dùng

Hình 3.33: Giao diện trợ giúp – các câu hỏi thường gặp

67 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.34: Giao diện phần thông tin COVID (1)

68 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.35: Giao diện thông tin về COVID (2)

69 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.36: Giao diện về thông tin COVID (3)

70 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.37: Giao diện thông tin về COVID (4)

71 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.38: Giao diện giỏ hàng trống

Hình 3.39: Giao diện Giỏ hàng

72 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.40: Giao diện Giỏ hàng

Hình 3.41: Giao diện giỏ hàng khi điền thông tin đặt hàng

73 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 3.42: Giao diện điền thông tin khi đặt hàng

Hình 3.43: Giao diện khi người dùng đăng nhập tài khoản

Hình 3.44: Giao diện tài khoản của người dùng

74 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Chương 4: TƯƠNG TÁC GIAO DIỆN

Tương tác giao diện
Sau một thời gian tìm hiểu và thảo luận thì nhóm chúng em đã chọn Figma làm công
cụ để thiết kế giao diện, sau đây là một vài lý do vì sao lại chọn Figma:

• Thiết kế thời gian thực : có nghĩa là nhiều người cùng có thể cùng vẽ trên 1
project. Dĩ nhiên là mỗi người một máy tính và cùng join vào project đó trên
Figma. Cách tạo Team hoặc share design mình sẽ nói ở phần sau.
• Data được lưu trên hệ thống máy chủ của Figma : vì vậy chúng ta sẽ có thể làm
việc ở khắp nơi, ở các máy tính khác nhau mà không cần mang file design đi theo
mình. Dĩ nhiên là chỉ tài khoản của chúng ta mới có thể nhìn thấy các project do
mình tạo ra.
• Thiết kế dạng Vector : đây là điều mà các tools design hiện đại đang làm, và khi
thực hiện xong có thể export ra nhiều kiểu file như SVG, PNG, JPG….ở nhiều
kích thuước khác nhau mà không bị vỡ hình như trên Photoshop.
• Có thể quản lí nhiều artboards cùng 1 lúc : Ở PTS thì chỉ có thể thiết kế trên 1
khung hình , còn Figma hoặc Sketch thì có thể thiết kế nhiều màn hình trên 1
khung hình. Tức là bạn có thể thiết kế nhiều layout cho sản phẩm trên 1 khung
hình.
• Có cơ chế quản lí comment tại nhiều điểm : Khi có ý kiến với 1 số điểm trên màn
hình layout, chỉ cần click vào đó và comments, các thành viên khác có thể đọc
được và phản hồi…
• Quan trọng nhất : nhanh và nhẹ, sự thông minh khi xử lí đem lại tốc độ thiết kế
tốt hơn khi làm việc với Figma….

75 | P a g e
IE106 – Thiết kế Giao diện Người dùng
Sau đây là liên kết tương tác giao diện của tất cả các trang trong Website.

Hình 4.1: Hình ảnh về tổng thể tương tác giao diện

Tạo tương tác trên trang Trang chủ

Khi dùng prototype để nối các trang riêng biệt với nhau, sẽ tạo ra một liên kết
giống như trang web trong thực tế.

4 trang của trang chủ sẽ kết nối với tất cả các trang khác trong trang web. Khi bấm
vào Logo, sẽ trở về trang chủ ban đầu.

76 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Hình 4.2: Tạo tương tác cho Trang chủ

Tạo tương tác trên trang Khuyến mãi

Hình 4.3: Tạo tương tác cho trang Khuyến mãi

Tạo tương tác trên trang Di chuyển (Đặt xe – Đặt vé)

Hình 4.4: Tương tác trên trang Di chuyển

77 | P a g e
IE106 – Thiết kế Giao diện Người dùng
Tạo tương tác cho trang Đặt phòng

Hình 4.5: Tạo tương tác cho trang Đặt phòng

Tạo tương tác cho trang Tour

Hình 4.6: Tương tác giao diện trên trang Tour

Tạo tương tác giao diện cho trang Khám phá nhiều hơn

Hình 4.7: Tương tác trên trang Khám phá nhiều hơn

78 | P a g e
IE106 – Thiết kế Giao diện Người dùng
Tạo tương tác cho trang Gợi ý

Hình 4.8: Tương tác giao diện trên trang Gợi ý

Tạo tương tác trên trang thông tin COVID-19

Khi dùng prototype để nối các trang riêng biệt với nhau, sẽ tạo ra một liên kết
giống như trang web trong thực tế.

Trang thông tin Covid-19 sẽ kết nối đến tất cả các trang Web để cảnh báo, đưa
thông tin cho mọi người về tình hình dịch bệnh hiện tại.

Hình 4.9: Tương tác trên giao diện trang thông tin Covid-19

79 | P a g e
IE106 – Thiết kế Giao diện Người dùng
Tạo tương tác giữa trang Đăng Nhập/ Đăng kí với Trang chủ

Hình 4.10: Tương tác giao diện Đăng nhập - Đăng kí

Tạo tương tác cho trang Giỏ hàng

Hình 4.11: Tương tác giao diện cho Giỏ hàng

80 | P a g e
IE106 – Thiết kế Giao diện Người dùng
Tạo tương tác cho trang Thông tin điểm đến

Hình 4.12: Tạo tương tác giao diện cho Thông tin điểm đến

Tạo tương tác cho trang Review về ẩm thực các vùng miền

Hình 4.13: Tương tác giao diện cho Review ẩm thực

Link thực nghiệm ứng dụng (không cần tài khoản):

https://www.figma.com/file/pBwoxoIdN4PLK11cctqI3T/Website-Du-
l%E1%BB%8Bch?node-id=0%3A1

81 | P a g e
IE106 – Thiết kế Giao diện Người dùng

Chương 5: KẾT LUẬN

Qua quá trình thực hiện đồ án môn học, nhóm chúng em đã rút ra được ưu điểm,
khuyết điểm và hướng phát triển cho website của mình trong tương lai như sau:

Ưu điểm
• Có đầy đủ các yêu cầu đưa ra đối với một trang web du lịch.
• Cập nhật tình hình dịch bệnh liên tục trên web để người dùng dễ theo dõi.
• Cập nhật nhiều khuyến mãi ưu đãi cao để người dùng có thể dễ dàng lựa chọn.
• Có nhiều loại ngôn ngữ, tiền tệ
• Có bài viết review, đánh giá để người dùng có thể tham khảo
• Cập nhật các địa điểm ăn uống nổi tiếng để mọi người tìm hiểu
• Bổ sung nhiều tính năng hơn các web khác, màu sắc web hài hòa, êm dịu với
mắt người dùng.
• Cập nhập liên tục các khuyến mãi du lịch khủng
• Địa điểm du lịch, khách sạn hay khu nghỉ dưỡng đồ sộ, với các giá từ trung
bình đến cao phù hợp cho mọi tầng lớp
• Có review địa điểm chân thực, đánh giá của mọi người đã từng đi, giúp người
xem có cái nhìn khách quan
• Cập nhập các địa điểm ăn uống liên tục và trend cho người sành ăn
• Đa ngôn ngữ phù hợp cho cả người ngoại quốc

Nhược điểm
• Vẫn chưa có sự liên kết giữa các Youtuber và Vlogger du lịch.
• Không có nhiều phương thức thanh toán.
• Chưa phát triển ứng dụng trên điện thoại.
Hướng phát triển
• Mở rộng thêm các tour du lịch nước ngoài.
• Phát triển thêm nhiều ngôn ngữ.
• Nên gắn voucher khuyến mãi ở những mục có liên quan.
• Cập nhật, bổ sung thêm các phương thức thanh toán khác.
• Phát triển chế độ Dark mode, light mode.
• Phát triển ứng dụng trên di dộng để khách hàng thuận tiện theo dõi.

82 | P a g e
IE106 – Thiết kế Giao diện Người dùng
• Giữ lại thanh menu khi di chuyển xuống phần dưới của trang để tạo sự thuận
tiện cho người dùng.

Qua quá trình thực hiện đồ án, nhóm chúng em đã biết vận dụng những kiến thức thiết
kế giao diện như: phối màu sắc, phân chia bố cục hợp lý, áp dụng những quy tắc trong
thiết kế,…và có khả năng đánh giá, nhận xét thiết kế giao diện người dùng của một
trang web hay một ứng dụng. Từ đó có thể áp dụng những kiến thức đó cho các môn
học sau và công việc trong tương lai.

Nhóm chúng em xin trân trọng cảm ơn sự hướng dẫn, đóng góp, nhận xét tận tình của
Ths. Tạ Thu Thủy trong quá trình thực hiện đồ án. Tuy nhiên, do kinh nghiệm và trình
độ kiến thức còn hạn chế, nên sẽ không tránh khỏi những thiếu sót trong quá trình thực
hiện đồ án. Chúng em rất mong nhận được sự đánh giá, góp ý từ phía Giảng viên và
các bạn sinh viên để đồ án này có thể hoàn thiện hơn, nhóm chúng em sẽ rút ra được
nhiều bài học, kinh nghiệm quý báu trong công việc tương lai.

83 | P a g e
IE106 – Thiết kế Giao diện Người dùng

TÀI LIỆU THAM KHẢO

1. Website du lịch Klook. Địa chỉ: https://www.klook.com/vi/ [Truy cập lần cuối
30/06/2021]
2. Website du lịch Chudu24. Địa chỉ: https://www.chudu24.com/ [Truy cập lần
cuối 20/06/2021]
3. Website du lịch Travel. Địa chỉ: https://travel.com.vn/ [Truy cập lần cuối
20/06/2021]
4. Website du lịch Vntrip. Địa chỉ: https://www.vntrip.vn/ [Truy cập lần cuối
17/06/2021]
5. Lương Hạnh, “Khảo sát về trải nghiệm du lịch của người Việt: Cơ hội nào cho các công
ty lữ hành?”[Trực tuyến]. Địa chỉ: https://marketingai.admicro.vn/khao-sat-ve-trai-
nghiem-du-lich-cua-nguoi-viet-co-hoi-nao-cho-cac-cong-ty-lu-
hanh/?fbclid=IwAR29LIPd-
svm53R_c2EdPwXPvoXjTJA2OmNOzIk3lTZRO6tX0rP51K_3KZw [Truy cập
lần cuối 01/07/2021]
6. Figma, Youtube Chanel. Địa chỉ:
https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA [Truy cập
lần cuối 01/07/2021]
7. Mr.Đại, “Hướng dẫn học FIGMA 2020 thiết kế UX/UI căn bản cho người mới
bắt đầu Full TOÀN TẬP” [Trực tuyến]. Địa chỉ:
https://www.youtube.com/playlist?list=PLH88ngaKjRaTN9qhlrogRZaZqXMgY
Kgji [Truy cập lần cuối 01/07/2021]

84 | P a g e