Báo Cáo Đồ Án Thiết Kế Giao Diện Người Dùng Cho Website Du Lịch

Báo cáo đồ án cuối kỳ môn thiết kế giao diện người dùng về website du lịch, phân tích và đề xuất giải pháp tối ưu hóa trải nghiệm người dùng.

• Đề tài: Thiết Kế Giao Diện Người Dùng Cho Website Du Lịch

Mục lục chi tiết

• LỜI MỞ ĐẦU
• 1. CHƯƠNG 1: KHẢO SÁT, PHÂN TÍCH, THAM KHẢO
• 1.1. Khảo sát yêu cầu và đề xuất giải pháp
• 1.2. Website của KIOOK
• 1.3. Website của VnIrÏD
• 1.4. Website của ChUudU24
• 1.5. Website của Travel
• 2. CHƯƠNG 2: PHÁC THẢO GIAO DIỆN
• 3. CHƯƠNG 3: GIAO DIỆN WEBSITE HOÀN CHỈNH
• 4. CHƯƠNG 4: TƯƠNG TÁC GIAO DIỆN
• 5. CHƯƠNG 5: KẾT LUẬN
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng Quan Về Thiết Kế Giao Diện Người Dùng Cho Website Du Lịch

Thiết kế giao diện người dùng (UI) cho website du lịch là một yếu tố quan trọng trong việc thu hút và giữ chân khách hàng. Giao diện không chỉ cần đẹp mắt mà còn phải dễ sử dụng, giúp người dùng tìm kiếm thông tin một cách nhanh chóng và hiệu quả. Theo nghiên cứu, một giao diện thân thiện có thể tăng tỷ lệ chuyển đổi lên đến 200%. Việc tối ưu hóa trải nghiệm người dùng (UX) là điều cần thiết để đáp ứng nhu cầu ngày càng cao của khách hàng trong ngành du lịch.

1.1. Tại Sao Thiết Kế Giao Diện Quan Trọng

Giao diện người dùng là cầu nối giữa người dùng và dịch vụ. Một thiết kế tốt giúp người dùng dễ dàng tìm kiếm thông tin, từ đó nâng cao trải nghiệm và sự hài lòng. Theo khảo sát, 75% người dùng đánh giá độ tin cậy của một công ty dựa trên thiết kế website.

1.2. Các Yếu Tố Cần Có Trong Thiết Kế Giao Diện

Thiết kế giao diện cần có tính thẩm mỹ, dễ sử dụng và tương thích với nhiều thiết bị. Các yếu tố như màu sắc, bố cục và phông chữ cũng cần được cân nhắc kỹ lưỡng để tạo ra một trải nghiệm người dùng tốt nhất.

II. Những Thách Thức Trong Thiết Kế Giao Diện Website Du Lịch

Ngành du lịch đang phải đối mặt với nhiều thách thức trong việc thiết kế giao diện website. Một trong những thách thức lớn nhất là sự đa dạng trong nhu cầu của người dùng. Mỗi khách hàng có những yêu cầu và mong muốn khác nhau, từ việc tìm kiếm thông tin đến đặt dịch vụ. Điều này đòi hỏi các nhà thiết kế phải linh hoạt và sáng tạo trong việc đáp ứng nhu cầu của từng nhóm khách hàng.

2.1. Đáp Ứng Nhu Cầu Khách Hàng Đa Dạng

Khách hàng có thể đến từ nhiều độ tuổi và nền tảng khác nhau. Việc thiết kế giao diện cần phải đảm bảo rằng tất cả người dùng đều có thể dễ dàng sử dụng và tìm kiếm thông tin mà họ cần.

2.2. Tối Ưu Hóa Trải Nghiệm Người Dùng

Một giao diện không chỉ đẹp mà còn phải tối ưu hóa trải nghiệm người dùng. Điều này bao gồm việc giảm thiểu thời gian tải trang, cải thiện khả năng điều hướng và cung cấp thông tin một cách rõ ràng.

III. Phương Pháp Thiết Kế Giao Diện Người Dùng Hiệu Quả

Để thiết kế giao diện người dùng hiệu quả cho website du lịch, cần áp dụng một số phương pháp nhất định. Việc nghiên cứu và phân tích hành vi người dùng là rất quan trọng. Các nhà thiết kế cần hiểu rõ cách mà người dùng tương tác với website để có thể tạo ra một giao diện phù hợp.

3.1. Nghiên Cứu Hành Vi Người Dùng

Phân tích hành vi người dùng giúp xác định những điểm mạnh và yếu trong giao diện hiện tại. Việc này có thể được thực hiện thông qua khảo sát, phỏng vấn hoặc phân tích dữ liệu từ các công cụ phân tích web.

3.2. Tạo Ra Các Nguyên Tắc Thiết Kế

Các nguyên tắc thiết kế như tính nhất quán, dễ sử dụng và khả năng tiếp cận cần được áp dụng trong quá trình thiết kế. Điều này giúp tạo ra một trải nghiệm người dùng mạch lạc và dễ hiểu.

IV. Ứng Dụng Thực Tiễn Của Thiết Kế Giao Diện Trong Ngành Du Lịch

Thiết kế giao diện người dùng không chỉ là lý thuyết mà còn có nhiều ứng dụng thực tiễn trong ngành du lịch. Các website du lịch nổi tiếng như Booking.com hay Airbnb đã áp dụng thành công các nguyên tắc thiết kế để thu hút và giữ chân khách hàng.

4.1. Ví Dụ Về Các Website Du Lịch Thành Công

Các website như Expedia và TripAdvisor đã sử dụng thiết kế giao diện người dùng hiệu quả để cung cấp thông tin và dịch vụ cho khách hàng. Họ đã tối ưu hóa trải nghiệm người dùng để tăng tỷ lệ chuyển đổi.

4.2. Kết Quả Nghiên Cứu Về Thiết Kế Giao Diện

Nghiên cứu cho thấy rằng các website có giao diện thân thiện có thể tăng tỷ lệ giữ chân khách hàng lên đến 30%. Điều này chứng tỏ rằng thiết kế giao diện có ảnh hưởng lớn đến sự thành công của một website du lịch.

V. Kết Luận Về Thiết Kế Giao Diện Người Dùng Cho Website Du Lịch

Thiết kế giao diện người dùng cho website du lịch là một yếu tố không thể thiếu trong việc thu hút và giữ chân khách hàng. Việc áp dụng các nguyên tắc thiết kế hiệu quả sẽ giúp cải thiện trải nghiệm người dùng và tăng cường sự hài lòng của khách hàng. Ngành du lịch cần tiếp tục đổi mới và cải tiến giao diện để đáp ứng nhu cầu ngày càng cao của người dùng.

5.1. Tương Lai Của Thiết Kế Giao Diện Trong Ngành Du Lịch

Với sự phát triển của công nghệ, thiết kế giao diện người dùng sẽ ngày càng trở nên quan trọng hơn. Các công nghệ mới như trí tuệ nhân tạo và thực tế ảo sẽ mở ra nhiều cơ hội mới cho ngành du lịch.

5.2. Lời Khuyên Cho Các Nhà Thiết Kế

Các nhà thiết kế cần luôn cập nhật xu hướng mới và lắng nghe phản hồi từ người dùng để cải thiện giao diện. Việc này sẽ giúp tạo ra một trải nghiệm người dùng tốt hơn và tăng cường sự hài lòng của khách hàng.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Ngành du lịch đóng vai trò quan trọng trong nền kinh tế, tạo ra nguồn thu và việc làm cho nhiều cá nhân và doanh nghiệp. Tuy nhiên, giai đoạn năm 2020–2021, sự bùng phát của đại dịch COVID-19 đã đặt ra thách thức lớn, buộc các doanh nghiệp lữ hành phải thay đổi cách thức tiếp cận người tiêu dùng, đồng thời tái định hướng khai thác các điểm đến an toàn và phù hợp với tình hình thực tế.

Đối tượng người dùng trẻ, chủ yếu là sinh viên và người lao động có kinh nghiệm làm việc dưới 1 năm, là nhóm khách hàng có nhu cầu đi lại, thư giãn sau thời gian học tập và làm việc nhưng mức thu nhập còn hạn chế hoặc chưa có thu nhập. Nhóm đối tượng này có xu hướng tìm kiếm các phương án du lịch tiết kiệm, chủ động tra cứu thông tin địa điểm trực tuyến, tối ưu hóa chi phí và thời gian di chuyển thông qua các chương trình ưu đãi giá vé, phương tiện và dịch vụ lưu trú.

Đề tài "Thiết Kế Giao Diện Người Dùng Cho Website Du Lịch" được nhóm sinh viên thực hiện trong khuôn khổ môn học Thiết kế Giao diện Người dùng (mã học phần: IE106) tại Khoa Khoa học và Kỹ thuật Thông tin, Trường Đại học Công nghệ Thông tin – Đại học Quốc gia Thành phố Hồ Chí Minh, dưới sự hướng dẫn của ThS. Tạ Thu Thủy vào tháng 05/2021.

Mục tiêu và nhiệm vụ nghiên cứu của đồ án bao gồm:

1. Khảo sát nhu cầu, thói quen và hành vi của người dùng khi sử dụng các dịch vụ đặt tour, vé phương tiện và phòng khách sạn trên môi trường trực tuyến.
2. Phân tích ưu điểm và nhược điểm về mặt giao diện, tính năng của các nền tảng du lịch trực tuyến hiện hành (Klook, Vntrip, Chudu24, Travel.vn).
3. Đề xuất giải pháp thiết kế kiến trúc thông tin, phác thảo wireframe sơ bộ và xây dựng giao diện người dùng hoàn chỉnh (High-fidelity UI) cho website du lịch.
4. Xây dựng bản mẫu tương tác (Interactive Prototype) nhằm kiểm thử và trực quan hóa luồng trải nghiệm người dùng trên website.

Đối tượng nghiên cứu là giao diện người dùng (UI) và luồng tương tác (UX) của một nền tảng website du lịch tích hợp đa dịch vụ. Phạm vi khảo sát tập trung vào khách hàng tiềm năng trong độ tuổi 18–35 tại Việt Nam, và phạm vi triển khai đồ án diễn ra trong thời gian 5 tuần làm việc nhóm.

---

Cơ sở lý thuyết và phương pháp

Đồ án ứng dụng quy trình thiết kế giao diện người dùng chuẩn trong công nghệ thông tin, bao gồm các giai đoạn: khảo sát thực tế thu thập yêu cầu (User Research), phân tích đối thủ cạnh tranh (Benchmarking), phác thảo khung lưới (Wireframing), thiết kế giao diện đồ họa chi tiết (UI Design) và tạo mẫu tương tác (Prototyping).

Phương pháp nghiên cứu và thu thập dữ liệu được nhóm tác giả triển khai cụ thể:

• Phương pháp khảo sát định lượng trực tuyến: Nhóm tác giả thiết kế bảng câu hỏi khảo sát qua công cụ Google Forms nhằm thăm dò ý kiến khách hàng về độ tuổi, thói quen đi du lịch, số lượng người đồng hành, hình thức du lịch, ngân sách chi trả, phương tiện di chuyển và dịch vụ kỳ vọng. Khảo sát thu về gần 150 lượt phản hồi hợp lệ.
• Phương pháp đối chiếu dữ liệu thứ cấp: Dữ liệu khảo sát sơ cấp của nhóm được so sánh, đối chiếu trực tiếp với số liệu nghiên cứu thị trường từ báo cáo của Q&Me (Quandme) do Marketing AI công bố để tăng tính khách quan và kiểm chứng xu hướng tiêu dùng.
• Phương pháp phân tích - so sánh trải nghiệm (UX Audit & Competitor Analysis): Khảo sát thực tế 4 website du lịch đang hoạt động tại Việt Nam và quốc tế gồm Klook.com, Vntrip.vn, Chudu24.com và Travel.vn (Vietravel) nhằm bóc tách các điểm mạnh về bố cục, màu sắc và chỉ ra các hạn chế tương tác cần khắc phục.
• Nguồn dữ liệu: Dữ liệu người dùng khảo sát thực tế, dữ liệu bài viết đánh giá điểm đến (TP. Hồ Chí Minh, Đà Nẵng, Vũng Tàu, Đà Lạt, Nha Trang, Bến Tre, Hà Nội), thông tin từ các kênh đánh giá du lịch (Khoai Lang Thang, Chan La Cà, Fahoka Xê Dịch) và các hướng dẫn an toàn dịch bệnh COVID-19.

---

Thiết kế và triển khai

Hệ thống giao diện website du lịch được cấu trúc theo mô hình phân cấp thông tin rõ ràng, đáp ứng toàn diện hành trình người dùng từ tìm kiếm, tra cứu thông tin, chọn dịch vụ đến thanh toán và hỗ trợ.

                    [ Giao diện Website Du lịch ]
[Trang chủ]  [Khuyến mãi]   [Di chuyển]    [Đặt phòng]       [Tour]
       Tài khoản      thực           tàu/xe         người dùng

Dựa trên kết quả phân tích trải nghiệm của các website hiện hành, nhóm tác giả đã xây dựng bảng đối chiếu các đặc điểm giao diện nhằm rút ra các cải tiến kỹ thuật:

Nền tảng	Điểm mạnh về giao diện và tính năng	Nhược điểm và hạn chế tương tác	Giải pháp cải tiến áp dụng vào đồ án
Klook.com	Header ẩn viền tinh gọn; nút bấm bo góc hiển thị trạng thái chọn; bố cục lưới chia khối rõ ràng; có tiện ích blog.	Chữ trên header nhỏ, chưa cân xứng tổng thể.	Thiết lập kích thước font chữ chuẩn, không chân, cân đối tỉ lệ thanh điều hướng.
Vntrip.vn	Phông chữ không chân dễ đọc; khoảng trắng phân cách hợp lý; có thanh điều hướng màu cam chỉ thị vị trí trang; mở tab mới khi đọc cẩm nang.	Thiếu tính năng giỏ hàng; thanh menu không cố định (sticky) khi cuộn trang; khối deal quá lớn gây rối; mục hỗ trợ che khuất chân trang.	Thiết kế giỏ hàng mua sắm tích hợp; cố định thanh menu khi cuộn; chuẩn hóa kích thước khối hiển thị; bố trí khung hỗ trợ tách biệt.
Chudu24.com	Phông chữ rõ ràng, phân cấp tiêu đề in hoa; bố cục dạng lưới dễ theo dõi.	Một số phần bố cục mất cân xứng; chỉ hỗ trợ đặt vé máy bay (thiếu phương tiện khác); chỉ có tiếng Việt.	Đa dạng hóa dịch vụ phương tiện (ô tô, xe máy, tàu hỏa); hỗ trợ đa ngôn ngữ và chuyển đổi đơn vị tiền tệ.
Travel.vn	Màu sắc dịu nhẹ, độ tương phản tốt; bố cục thoáng đãng.	Thanh menu không cố định; nút đăng ký/đăng nhập bị ẩn sau biểu tượng; trùng lặp danh mục menu; không thể điều chỉnh độ tuổi khi đặt tour; thiếu nút hủy đặt trực tiếp; hiệu ứng chuyển động gây bất tiện.	Đưa nút đăng nhập/đăng ký trực tiếp lên thanh điều hướng; tối ưu hóa quy trình nhập thông tin khách hàng; loại bỏ danh mục dư thừa và hiệu ứng cản trở.

Hệ thống giao diện hoàn chỉnh được triển khai với các thành phần cốt lõi:

• Thanh điều hướng chính (Header): Chứa Logo, thanh tìm kiếm từ khóa, bộ chọn ngôn ngữ, đơn vị tiền tệ (VNĐ/ngoại tệ), Giỏ hàng, nút Liên hệ và Đăng nhập/Đăng ký.
• Phân hệ Di chuyển: Tách biệt rõ ràng các phương thức di chuyển gồm "Thuê xe máy", "Thuê ô tô", "Phương tiện khác" (du thuyền, thuyền buồm, xe đạp thể thao) cùng hệ thống đặt vé máy bay, vé tàu hỏa, xe khách. Giao diện trang bị bộ lọc theo khu vực địa lý (Đông Bắc, Bắc Trung Bộ, Đồng bằng Sông Hồng, Tây Nam Bộ, Tây Nguyên, Đông Nam Bộ).
• Phân hệ Đặt phòng & Tour: Tích hợp bộ lọc đa tiêu chí gồm khoảng giá (Dưới 1 triệu, 1–3 triệu, 3–6 triệu, 6–10 triệu, trên 10 triệu), loại khách hàng (Gia đình, cặp đôi), tiện ích đi kèm (Bể bơi, xe đưa đón sân bay, view biển/sông, cho thuê xe máy, tiện nghi cho người khuyết tật), và tình trạng chỗ (Còn chỗ/Hết chỗ).
• Mục Khám phá & Cẩm nang: Hiển thị bài viết đánh giá theo từng chuyên mục (Ẩm thực, Cảnh đẹp, Du lịch tâm linh, Vui chơi giải trí, Lịch trình, Lễ hội - Sự kiện, Du lịch cộng đồng, Nghỉ dưỡng).
• Phân hệ Cảnh báo COVID-19: Thiết kế 4 cấp độ giao diện thông tin dịch tễ, hiển thị hướng dẫn phòng dịch và thông báo tình hình địa phương nhằm hỗ trợ du khách lên kế hoạch an toàn.

---

Nội dung chính theo từng chương

Chương 1: Khảo sát, phân tích, tham khảo

Chương 1 trình bày toàn bộ số liệu khảo sát thực tế và quy trình phân tích điểm chuẩn đối thủ cạnh tranh. Kết quả khảo sát người dùng ghi nhận các phát hiện then chốt sau:

Tiêu chí khảo sát	Số lượng mẫu (n)	Tỷ lệ và số liệu chi tiết
Độ tuổi tham gia	133	Đa số người tham gia nằm trong độ tuổi từ 18 đến 35 tuổi.
Đối tượng đồng hành	132	Đi với gia đình chiếm cao nhất với 67,4% (89 lượt); đi với bạn bè chiếm 62,9% (83 lượt); đi với người yêu chiếm 21,2% (28 lượt). Số liệu tương đồng với khảo sát của Q&Me (gia đình nhỏ 48%, bạn bè 26%, gia đình lớn 20%).
Quy mô nhóm	36	Đi nhóm khoảng 5 người chiếm tỷ lệ áp đảo 80,6%.
Phạm vi chuyến đi	128	Nhu cầu du lịch trong nước chiếm 91,4% (117 lượt); nước ngoài chiếm 8,6% (đối chiếu Marketing AI ghi nhận 89% trong nước, 11% nước ngoài).
Hình thức du lịch	131	Xu hướng du lịch tự túc chiếm ưu thế so với đi tour trọn gói (Marketing AI ghi nhận tự túc 87%, theo tour 22%). Lý do chọn tự túc: thích tự lên kế hoạch (60%), linh hoạt (59%), tự do di chuyển (56%), giá rẻ (42%), lịch trình thoải mái (40%), làm mọi thứ theo ý mình (31%), đi cùng bạn bè (6%).
Tra cứu trực tuyến	128	78,1% người dùng có thói quen tham khảo các website dịch vụ trước khi lập kế hoạch.
Dịch vụ quan tâm nhất	73	Khuyến mãi (giá vé, phòng, dịch vụ) chiếm 80,8% (59 lượt); Đặt phòng khách sạn chiếm 78,1% (57 lượt); Đặt vé phương tiện chiếm 68,5% (50 lượt); Tour du lịch được yêu thích chiếm 57,5% (42 lượt).
Thời điểm đi du lịch	139	Đi vào ngày lễ, ngày nghỉ chiếm 64,0% (89 lượt); nổi hứng là đi chiếm 48,9% (68 lượt); cuối năm chiếm 20,9% (29 lượt).
Ngân sách chi trả	135	Mức chi trả từ 3 đến 10 triệu đồng chiếm 45,9%; mức dưới 3 triệu đồng chiếm 38,5%.
Phương tiện lựa chọn	136	Xe máy là phương tiện được chọn nhiều nhất với 61,0% (83 lượt); tiếp theo là máy bay chiếm 50,7% (69 lượt).

Từ cơ sở dữ liệu trên, chương 1 đề xuất các định hướng thiết kế: cung cấp các gói dịch vụ dành cho nhóm 5 người, đẩy mạnh các gợi ý điểm đến tự túc dựa trên xếp hạng sao thực tế, tích hợp video trải nghiệm từ các YouTuber lữ hành, mở dịch vụ cho thuê xe máy giá rẻ, bổ sung chính sách bình ổn giá vào dịp lễ/tết và giới thiệu danh sách quán ăn đường phố có chứng nhận an toàn thực phẩm.

Chương 2: Phác thảo giao diện

Chương 2 mô tả hệ thống wireframe dạng lưới (grid-based layout) cho toàn bộ các màn hình chính nhằm định hình vị trí các thành phần giao diện trước khi đổ màu chi tiết:

• Wireframe Trang chủ: Bố trí thanh công cụ trên cùng, vùng banner ảnh động giới thiệu điểm đến nổi tiếng, danh sách tour được yêu thích và các dịch vụ nổi bật của doanh nghiệp.
• Wireframe Khuyến mãi: Phân chia các khối khuyến mãi theo phương tiện di chuyển, phòng nghỉ và gói trải nghiệm ăn uống với nhãn thông báo mức giảm giá (lên tới 60% – 70%).
• Wireframe Di chuyển: Thiết lập trường nhập điểm đi, điểm đến, ngày đi/về, kết hợp thanh lọc phân loại phương tiện (xe máy, ô tô, phương tiện khác).
• Wireframe Đặt phòng và Tour: Thiết kế thanh tìm kiếm nhanh kết hợp cột bộ lọc nâng cao bên tay trái (giá tiền, đánh giá, loại hình lưu trú, tiện ích, trạng thái giữ chỗ) và lưới hiển thị thẻ sản phẩm bên tay phải.
• Wireframe Khám phá nhiều hơn nữa: Bố trí danh mục 8 nhóm chủ đề trải nghiệm và lưới bài viết hiển thị hình ảnh, tiêu đề và điểm đánh giá sao của cộng đồng.

Chương 3: Giao diện website hoàn chỉnh

Chương 3 trình bày bản thiết kế đồ họa chi tiết (High-fidelity UI) với màu sắc, phông chữ và hình ảnh cụ thể:

• Giao diện Trang chủ: Sử dụng tông màu xanh kết hợp cam tương phản nhẹ, các khối hiển thị được bo tròn góc mềm mại. Phía dưới tích hợp form đăng ký nhận bản tin giảm giá và chân trang hiển thị đầy đủ liên kết chính sách, đối tác thanh toán (PayPal, Visa).
• Giao diện Giới thiệu điểm đến và Review địa phương: Thiết kế chuyên trang cho từng thành phố trọng điểm như TP. Hồ Chí Minh, Đà Nẵng, Vũng Tàu. Cấu trúc bài viết gồm: đoạn giới thiệu lịch sử - văn hóa, khối "Chơi gì?", khối "Đặt khách sạn", khối "Cảm nhận của du khách" có hình ảnh, tên tác giả và số sao đánh giá.
• Giao diện Di chuyển và Chi tiết thuê xe: Các trang thuê xe máy (ví dụ: Vision 2020 giá 280.000 VNĐ/ngày), thuê ô tô (Vios 2020 giá 740.000 VNĐ/ngày, VinFast Lux A, Innova, Camry) và phương tiện khác (thuyền buồm, du thuyền VIP, xe đạp thể thao). Trang chi tiết cung cấp hình ảnh thực tế, thông tin xe, số lượt đánh giá, chính sách hoàn tiền và bảng nhận xét của người thuê trước.
• Giao diện Chuyên mục Ẩm thực: Các bài review đặc sản địa phương tại Sài Gòn, Đà Nẵng, Vũng Tàu, Đà Lạt, Nha Trang, Bến Tre, Hà Nội.
• Giao diện Hỗ trợ, Tài khoản và Thông tin COVID-19: Thiết kế biểu mẫu Đăng nhập/Đăng ký tài khoản cá nhân, giao diện Giỏ hàng (trạng thái giỏ trống và trạng thái điền thông tin đơn hàng), giao diện Trợ giúp giải đáp thắc mắc thường gặp (FAQ) và 4 màn hình cập nhật tin tức dịch tễ COVID-19.

Chương 4: Tương tác giao diện

Chương 4 mô tả quá trình thiết lập prototype nhằm liên kết các màn hình tĩnh thành một luồng trải nghiệm hoàn chỉnh:

• Thiết lập sự kiện nhấp chuột (click) và chuyển hướng (navigation) cho thanh menu trên Trang chủ dẫn đến các trang chức năng: Khuyến mãi, Di chuyển, Đặt phòng, Tour, Khám phá nhiều hơn nữa.
• Xây dựng tương tác chọn mua dịch vụ từ danh sách, cập nhật số lượng vào Giỏ hàng và chuyển tiếp sang màn hình điền thông tin đặt hàng, xác nhận thanh toán.
• Thiết lập tương tác lọc động trên trang Di chuyển, Đặt phòng và Tour khi người dùng thay đổi các tùy chọn trên thanh công cụ lọc.
• Thiết lập luồng tương tác hiển thị thông tin bài viết chi tiết khi nhấp vào các thẻ điểm đến hoặc món ăn gợi ý trên bản đồ ẩm thực.

Chương 5: Kết luận

Chương 5 tổng kết toàn bộ quá trình thực hiện đồ án môn học, đánh giá mức độ hoàn thành nhiệm vụ theo bảng phân công và nghiệm thu sản phẩm thiết kế giao diện website du lịch.

---

Kết quả và đóng góp

Đồ án đã đạt được các kết quả cụ thể sau:

• Xây dựng thành công bộ giao diện người dùng hoàn chỉnh cho website du lịch trên nền tảng máy tính để bàn (Desktop Web) với hơn 40 màn hình giao diện mẫu, bao gồm đầy đủ các luồng chức năng từ tìm kiếm đến thanh toán.
• Đề xuất và hiện thực hóa các giải pháp giao diện giải quyết trực tiếp những hạn chế của các website trên thị trường: bổ sung giỏ hàng đa dịch vụ, cố định thanh điều hướng (Sticky Header), tích hợp chuyển đổi ngôn ngữ/tiền tệ và thiết kế hệ thống cảnh báo COVID-19 trực quan.
• Xây dựng bản mẫu tương tác Prototype hoàn chỉnh, mô phỏng mượt mà các thao tác nhấp chọn, lọc dịch vụ và quy trình đặt đơn hàng của khách hàng.
• Tất cả 5 thành viên trong nhóm nghiên cứu hoàn thành 100% nhiệm vụ theo bảng phân công công việc 5 tuần:

Thành viên	Mã số sinh viên	Nhiệm vụ chính phụ trách	Kết quả đánh giá
Mai Trọng Dũng	19521393	Thiết kế trang chủ, mục Khám phá, trang thông tin COVID-19, chi tiết đặt xe máy/ô tô/tour/phòng; tạo tương tác trang chủ và COVID-19; viết báo cáo.	Hoàn thành
Lê Thị Phương Thanh	19522231	Khảo sát ưu nhược điểm website Vntrip; thiết kế và phối màu trang Đặt phòng, Khuyến mãi, Giỏ hàng, Di chuyển, Đăng ký; tạo prototype giỏ hàng.	Hoàn thành
Nguyễn Lê Thanh	19522238	Khảo sát ưu nhược điểm website Klook; thiết kế giao diện trang chủ, khuyến mãi, gợi ý ẩm thực; thiết kế slide thuyết trình; đánh giá ưu điểm.	Hoàn thành
Nguyễn Hoàng Việt	19522517	Khảo sát ưu nhược điểm website Travel.vn; thiết kế trang Tour, Đăng nhập/Đăng ký; tạo prototype trang Di chuyển, Tour, Đặt phòng, Blog ẩm thực.	Hoàn thành
Lê Tuấn Anh	18520451	Khảo sát ưu nhược điểm website Chudu24; thiết kế giao diện Di chuyển, trang thông tin review địa điểm yêu thích; tạo tương tác trang Tour, Khám phá.	Hoàn thành

---

Hạn chế và hướng nghiên cứu tiếp

Mặc dù đã hoàn thành các mục tiêu đề ra cho môn học Thiết kế Giao diện Người dùng, đồ án còn tồn tại một số hạn chế theo tự nhận định của nhóm tác giả:

• Đồ án được thực hiện trong khung thời gian giới hạn 5 tuần của học kỳ, do đó sản phẩm dừng lại ở mức thiết kế giao diện tĩnh và bản mẫu tương tác (Prototype), chưa tiến hành lập trình giao diện người dùng phía máy khách (Front-end) cũng như chưa xây dựng hệ thống xử lý phía máy chủ (Back-end) và cơ sở dữ liệu thực tế.
• Mẫu khảo sát người dùng trực tuyến (gần 150 phản hồi) chủ yếu tập trung vào phân khúc sinh viên và người trẻ tuổi, chưa bao quát đầy đủ hành vi của các nhóm khách hàng trung niên hoặc du khách nước ngoài.

Hướng phát triển tiếp theo của đề tài:

• Lập trình hoàn chỉnh mã nguồn trang web bằng các công nghệ phát triển web hiện đại, kết nối cơ sở dữ liệu để vận hành các tính năng đặt chỗ theo thời gian thực.
• Thiết kế giao diện đáp ứng linh hoạt (Responsive Design) và phiên bản ứng dụng di động (Mobile App) để tối ưu hóa trải nghiệm trên điện thoại thông minh và máy tính bảng.
• Tích hợp cổng thanh toán trực tuyến thực tế và xây dựng hệ thống quản lý đối tác (khách sạn, nhà xe, nhà hàng) nhằm tự động hóa luồng tiếp nhận đơn hàng.

---

Giá trị tham khảo

Báo cáo đồ án là tài liệu tham khảo hữu ích cho sinh viên các ngành Công nghệ Thông tin, Hệ thống Thông tin, Kỹ thuật Phần mềm và Thiết kế Đa phương tiện khi thực hiện các đồ án môn học về Tương tác Người - Máy (HCI) hoặc Thiết kế Giao diện/Trải nghiệm Người dùng (UI/UX Design).

Nội dung báo cáo có giá trị ứng dụng cao ở các phần:

• Phương pháp xây dựng bảng khảo sát người dùng và cách kết hợp đối chiếu dữ liệu khảo sát sơ cấp với các báo cáo thị trường thứ cấp.
• Kỹ thuật phân tích đối thủ cạnh tranh (UX Audit) nhằm phát hiện các điểm lỗi tương tác trên các nền tảng du lịch thực tế.
• Quy trình phát triển giao diện theo từng giai đoạn từ sơ đồ luồng thông tin, wireframe phân khung lưới đến bản thiết kế High-fidelity UI chi tiết và bản mẫu Prototype tương tác.

---

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

1. Mẫu khảo sát người dùng của đồ án có quy mô bao nhiêu và ghi nhận đặc điểm gì nổi bật?
Khảo sát trực tuyến qua Google Forms thu về gần 150 phản hồi, tập trung vào đối tượng từ 18 đến 35 tuổi. Kết quả chỉ ra 91,4% có nhu cầu du lịch trong nước, 67,4% thích đi cùng gia đình, 80,6% đi theo nhóm khoảng 5 người, và 61% ưu tiên chọn xe máy làm phương tiện di chuyển chính.

2. Nhóm tác giả đã nghiên cứu những website du lịch nào để phân tích ưu nhược điểm?
Nhóm đã tiến hành phân tích giao diện và trải nghiệm người dùng trên 4 website: Klook.com, Vntrip.vn, Chudu24.com và Travel.vn (Vietravel).

3. Website được thiết kế khắc phục những nhược điểm nào của các nền tảng hiện có?
Giao diện mới khắc phục tình trạng thiếu giỏ hàng (ở Vntrip), bổ sung thanh menu cố định (Sticky Header) khi cuộn trang, đưa nút đăng ký/đăng nhập ra ngoài thanh công cụ chính, mở rộng dịch vụ đặt nhiều loại phương tiện ngoài vé máy bay (thuê xe máy, ô tô, phương tiện khác) và cung cấp bộ chuyển đổi đa ngôn ngữ, đa tiền tệ.

4. Tính năng đặc biệt nào được tích hợp vào giao diện để thích ứng với bối cảnh thời điểm năm 2021?
Website tích hợp phân hệ hiển thị thông tin và cảnh báo dịch tễ COVID-19 gồm 4 cấp độ giao diện chi tiết, giúp du khách theo dõi tình hình vùng dịch và đảm bảo an toàn sức khỏe trước khi đặt dịch vụ.

5. Bản mẫu tương tác (Prototype) của đồ án hỗ trợ kiểm thử những luồng thao tác nào?
Prototype hỗ trợ kiểm thử luồng điều hướng từ trang chủ sang các chuyên mục, luồng tìm kiếm và lọc động dịch vụ (phòng, tour, thuê xe máy/ô tô), luồng thêm dịch vụ vào giỏ hàng và chuyển tiếp đến màn hình điền thông tin đặt hàng, cùng luồng tra cứu bài viết cẩm nang và review ẩm thực địa phương.

---

Kết luận

Đồ án "Thiết Kế Giao Diện Người Dùng Cho Website Du Lịch" của nhóm sinh viên Trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM đã hoàn thành đầy đủ quy trình nghiên cứu, phân tích và thiết kế giao diện người dùng theo chuẩn môn học IE106. Dựa trên dữ liệu khảo sát thực tế và phân tích điểm chuẩn đối thủ, nhóm đã xây dựng hệ thống wireframe và giao diện đồ họa chi tiết đáp ứng nhu cầu du lịch tự túc, tiết kiệm của đối tượng người dùng trẻ. Bản mẫu tương tác hoàn chỉnh mang lại giải pháp trực quan, đóng vai trò là cơ sở vững chắc cho việc lập trình và phát triển hệ thống phần mềm website du lịch trong tương lai.

Trích đoạn nội dung tài liệu

LỜI MỞ ĐẦU. E2 1 ng ng n1 ng tp tr tr 1n ru 9 DANH MỤC CÁC BẢNG, HÌNH ẢNH.EErrrkrrrked 11 Chương l: KHẢO SÁT, PHÂN TÍCH, THAM KHẢO.1 Khao sat yOu sa.2 Phân tích yêu cầu và để xuất giải pháp.1 Website của KIOOK. -- -- << <1 HS SH KH kh 21 1.2 Website của VnIrÏD. LH HH HT HH HH HE, 22 1.3 Website của ChUudU24.---ccc cS n1 nn SH nh nh 25 1.4 Website của Travel.- Ác SH TH HE, 27 Chương2: PHÁC THẢO GIAO DIỆN.-- 2c 22c tt EEEEEEEEEEEEErrrkerrkerrrkrrre 31 Chương 3: GIAO DIỆN WEBSITE HOÀN CHỈNH.

eA 1 Chương 4: TƯƠNG TÁC GIAO DIỆN.------ 55+ scccececeterreererrrrerereerrs 74 AA Time thn wine AAW ¬z ANT AAW c.a~~<SS~ thn C-ÂS^ C-^Ÿ~——= TT.~ _~ 4 em bee eee al nw sun. mx 1 Go A aT be se eee fa abn tunn T 710 — —«< A4 OTT~~ ~<~=~k£Ð~ ^^ 4=Ÿ^—~~. an ANTAH~ - eo ence 1 Z®ZVX7TTSX 10 ¬e 4 1A m dew t%x. x6 Tre w`T1 im: 1 m 1 on 4 4 Tan bran nm tha alan tun — A22 13%_.

~ on a — — + a mn ¬ Chương 5: KÉT LUẬN.----- 55-2 St S2EE#EEEctEEEEeEerrersrkrkrererkerrerrree 82 13|Page IE106 — Thiết kế Giao diện Người dùng maar ata mA TÀI LIỆU THAM KHẢO 14|Page IE106 - Thiết kế Giao diện Người dùng Chương l: KHẢO SAT, PHAN TICH, THAM KHAO 1.1 Khao sat yéu cau khach hang và phân tích yêu cầu 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 khao sat: https:/orms.gle/od8dwFmy44xUGjgP9 Kết quả khảo sát của trang đánh giá du lịch Marketing AI: https://marketingai.vn/khao-sat-ve-trai-nghiem-du-lich-cua-nguoi-viet-co-hoi- nao-cho-cac-cong-ty-lu-hanh/?fbclid=lwAR29LIPd- svm53R_c2EdPwXPvoX[jT.JA2OmNOzlk3ITZRO6tX0OrP51K_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. Bạn đang ở độ tuổi nào? 133 responses ® Dưới 18 tuôi @ 19-35 @ 36-50 @ Trên 50 tuổ Hình 1.1: Đó tuổi người tham gia kháo sát Nhu cẩu ca 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|Page IE106 — Thiết kế Giao diện Người dùng 4. Bạn thường đi du lịch chung với ai 132 responses Đi một mình Đi với gia đình 89 (67.4%) Di voi ban be 83 (62.9%) Đi với người yêu 28 (21.2: Khao sát về thói guen đi du lịch cùng với ai của người Việt Who did you go with? 48% a 26% 20% 12% 12% 1% [.] EI KE= = Family Friends Family Colleagues Brothers Boyfriend Alone Others (husband (parents) Sisters Girlfriend wife, children) Hình 1.3: Kháo sát về thói quen di 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%). Bạn thường đi du lịch bao nhiêu người 36 responses @ 1 minh @ khoảng 5 nguời © trên 10 người Hình 1.4: Kháo sát về Số lượng thành viên đi du lich 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, phan 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|Page IE106 — Thiết kế Giao diện Người dùng 6. Ban thich di du lich trong nước, hay đi du lịch nước ngoài? 128 responses Trong nước 117 (91.4%) Nước ngoài 125 Hình 1.5: Nhu cầu du ljcj trong mướ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%) va theo tour (22%).

Bạn thích được ởi du lịch theo tour hay tự túc 131 responses @ Theo tour @ Tu tuc @ Ca hai š Hình 1.6: Khảo sát nhu cẩu di du lich 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ì: e_ Thích tự lên kế hoạch: 60% e Thich vi sự linh hoạt: 59% e_ Có thể đi đâu tùy thích 56% e Gia ré: 42% e Lich trinh thoai mai: 40% e C6 thé lam moi thir theo y minh: 31% e Co thé di cung ban be: 6% 17|Page 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é van dé 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%). Bạn có thường tham khảo các trang về dịch vụ du lịch trước khi lên kế hoạch du lịch không? 128 responses @co ® Không Hình 1.7: Phiếu khảo sá¿ người dùng có tham kháo website dụ l/c; dé 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: 9. Khi tham khảo các website du lịch thì bạn mong muốn được tìm kiếm và sử dụng dịch vu gi? 73 responses Đặt phòng khách sạn (gợi ý đặt 57 (78. Đặt vé phương tiện (máy bay, ô 50 (68.5%) tô, tàu) an tôn Khuyến mãi (Giá vé, đặt phòng, 59 (80. Tour du lịch được yêu thích 42 (57.8: Mong muốn cứa khách hàng khi sử dựng các dịch vự website dụ lich Khảo sát về thời gian di du lịch của khách hàng, ta nhận thấy nhu cầu đi vào ngày nghị, dip tết là cao nhất, chiếm 65,4%.

18|Page IE106 — Thiết kế Giao diện Người dùng 12. Bạn thường di du lich khi nao? 139 responses Ngày lễ, ngày nghỉ 89 (64%) Cuối năm 29 (20.9%) Nổi hứng là đi 68 (48.9: Khảo sát thời gian di du lich cua du khach Về mức chi phí khách hàng san sàng chỉ trả, tỉ lệ cao nhát chiếm 45,9% là mức chỉ trả từ 3 triệu đến 10 triệu. Tiếp đến là dưới 3 triệu, chiếm 38. Bạn sẵn sàng chỉ trả bao nhiêu cho chuyến du lịch của mình? 135 responses ® Dưới 3 triệu @ Từ 3tr - 10tr @ Tir 10tr - 20tr @ Trén 20tr Hinh 1.10: Phiéu khdo sat chi phi nguéi dung san sang chi tra cho chuyén du lich Tiép dén, la 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 hang, ta nhận tháy, nhu cầu đi lai bang xe may chiếm tỉ lệ cao nhát, khoảng 61%, tiếp đến là máy bay với 50,7% 19|Page IE106 — Thiết kế Giao diện Người dùng 14.

Các phương tiện bạn thường chon dé di du lich la gi? 136 responses Xe may 83 (61%) May bay 69 (50.11: Phiếu khảo sái chí phí khách hanh thường chọn khi di du lich 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 hang 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à chỉ 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|Page 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ì nghi.

Vào lúc đó, lượng khách tăng cao, có thê khiến cho chỉ 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 đề đó. - Mot van dé 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.2 Tìm hiểu, nghiên cứu ứng dụng liên quan 1.1 Website ca Klook.com aa De Hình 1.12: Hình anh trang web ca Klook.com Các nút phân header được âr 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ỂM _ | dùng lựa chọn.

Nút được bo tròn viền, có hiệt màu khi bám chọn hoặc hié thị la dang 6 trang day. 21|Page IE106 — Thiết kế Giao diện Người dùng Thiết kế dạng lưới, nội dụng TP Hồ Chí Minh có gi? phân chia rõ ràng. Địa danh nổi tiếng da E ax Xem tất cả các điểm đến Có nhiều dịch vụ tiện ích khá như: Blog, gợi ý dịch vụ. NHƯỢC Phan header cua trang dé cé KLOOK Q Tintheo én in heat Sing Ge Wor eee ng nụ FT” DIEM chữ hơi nhỏ, không cân xứng QNabanmuindén lấd Thmgan3glw Ddợớ: Khihgn Khim phi rbiu ho rita © Pride 0á Tạng Hot với trang.2 Website của Vntrip.