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

Ngành du lịch đóng vai trò là một ngành kinh tế dịch vụ quan trọng, tạo ra nhiều việc làm và phục hồi mạnh mẽ sau các tác động của đại dịch COVID-19. Tại Việt Nam, nhu cầu du lịch của du khách trong nước và quốc tế ngày càng gia tăng. Trong đó, nhóm khách hàng trẻ tuổi, chủ yếu là học sinh, sinh viên và những người mới đi làm, có nhu cầu du lịch trải nghiệm cao nhưng bị giới hạn về khả năng tài chính. Nhóm đối tượng này có thói quen tìm kiếm các chuyến đi tối ưu hóa chi phí, săn các chương trình ưu đãi, tìm kiếm thông tin chi tiết về điểm đến và phương tiện di chuyển trước khi đưa ra quyết định.

Nhằm đáp ứng nhu cầu thực tiễn đó, đồ án môn học Thiết kế Giao diện Người dùng (mã học phần IE106) tại Trường Đại học Công nghệ Thông tin – Đại học Quốc gia Thành phố Hồ Chí Minh đã thực hiện đề tài "Thiết kế giao diện website cung cấp dịch vụ du lịch". Đề tài do nhóm sinh viên gồm Ngô Thị Như Quỳnh, Mai Võ Hoài Tiên, Ngô Trường Nhân, An Nhất Lâm và Ngô Phương Quyên thực hiện dưới sự hướng dẫn của ThS. Huỳnh Văn Tín vào tháng 10 năm 2024.

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à thị hiếu giao diện của người dùng (tập trung vào nhóm người dùng trẻ) khi tiếp cận các dịch vụ du lịch trực tuyến.
  2. Phân tích đối sánh các nền tảng du lịch trực tuyến hiện hành (Traveloka, Vntrip, Trip.com, Booking.com) nhằm rút ra các ưu điểm cần kế thừa và hạn chế cần khắc phục.
  3. Đề xuất giải pháp kiến trúc thông tin, bố cục và thiết kế hệ thống giao diện mẫu (Wireframe, High-fidelity UI) cùng bản tương tác mẫu (Interactive Prototype) trên công cụ Figma cho 4 phân hệ dịch vụ cốt lõi: Đặt vé máy bay (Flight), Đặt phòng khách sạn (Hotel), Đặt tour du lịch (Tour) và Đặt vé xe khách (Bus).

Đối tượng nghiên cứu của đề tài là các thành phần giao diện người dùng (UI) và quy trình trải nghiệm người dùng (UX) trên nền tảng website dịch vụ du lịch. Phạm vi nghiên cứu tập trung vào tập khách hàng tiềm năng là sinh viên Trường Đại học Công nghệ Thông tin và người thân, được thực hiện khảo sát và thiết kế trong tháng 10/2024.

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

Đồ án ứng dụng các nguyên lý thiết kế giao diện tương tác và trải nghiệm người dùng, kết hợp các mô hình tổ chức bố cục trực quan:

  • Mô hình bố cục Grid (Lưới): Sử dụng để phân chia các khối nội dung tại trang chủ, tối ưu hóa không gian hiển thị hình ảnh và bộ lọc tìm kiếm.
  • Mô hình đọc Z-pattern và F-pattern: Ứng dụng vào luồng hiển thị danh sách vé, phòng khách sạn và thông tin chi tiết tour nhằm định hướng tầm nhìn tự nhiên của người dùng từ trái sang phải, từ trên xuống dưới.
  • Nguyên lý thiết kế hệ thống nhận diện số: Áp dụng hệ thống phông chữ không chân (Sans-Serif), gam màu lạnh chủ đạo và hỗ trợ chuyển đổi linh hoạt giữa hai chế độ giao diện Sáng/Tối (Light/Dark mode).

Phương pháp nghiên cứu thực tế bao gồm:

  • Phương pháp khảo sát định lượng: Thiết lập biểu mẫu khảo sát trực tuyến thông qua Google Forms, thu thập và phân tích dữ liệu từ hơn 160 người tham gia là sinh viên và người thân.
  • Phương pháp phân tích - tổng hợp và đối sánh (Benchmarking/Case Study): Khảo sát cấu trúc giao diện, luồng chức năng, ưu và nhược điểm của 4 trang web dịch vụ du lịch quy mô lớn: Traveloka, Vntrip.vn, Trip.com, Booking.com.
  • Phương pháp thiết kế mẫu phác thảo và bản mẫu tương tác: Sử dụng phần mềm Figma để xây dựng Wireframe, giao diện hoàn chỉnh có độ trung thực cao (High-fidelity) và thiết lập các thành phần tương tác (Components, Smart Animate, Transitions).

Nguồn dữ liệu sử dụng trong đồ án bao gồm dữ liệu sơ cấp thu nhận từ hơn 160 biểu mẫu khảo sát người dùng thực tế và dữ liệu thứ cấp từ giao diện, luồng tính năng thực tế của các siêu ứng dụng du lịch đang hoạt động.

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

Báo cáo đồ án được cấu trúc thành 5 chương chính, phản ánh đầy đủ quy trình từ khảo sát thực tế đến thiết kế hoàn chỉnh:

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

Chương này tập trung vào hai nội dung trọng tâm: khảo sát thị hiếu người dùng và nghiên cứu các ứng dụng liên quan.

Kết quả khảo sát từ hơn 160 phản hồi cung cấp các thông số định lượng cụ thể:

  • Đặc điểm nhân khẩu học: 49.1% người tham gia dưới 18 tuổi; 44.1% trong độ tuổi từ 18–25 tuổi (chủ yếu là sinh viên chưa đi làm).
  • Thói quen du lịch: 44.7% thường đi theo nhóm trên 5 người, 39.1% đi nhóm 5 người; 51.6% có nhu cầu đi cả nội địa lẫn quốc tế nhưng ưu tiên nội địa do hạn chế về kinh phí; 40% chọn du lịch tự túc, 45% linh hoạt kết hợp và dưới 15% chọn đi hoàn toàn theo tour; thời gian du lịch phổ biến nhất là từ 3 đến 5 ngày. 12.4% người tham gia chưa từng sử dụng website đặt tour trực tuyến.
  • Nhu cầu tính năng: Tìm kiếm địa điểm du lịch (68.3%), đặt phòng khách sạn (58.4%), đặt tour và vé máy bay/xe (40% - 50%). Yêu cầu phi chức năng về giao diện trực quan và trải nghiệm thanh toán/CSKH được đánh giá rất quan trọng (chiếm gần 75% - 80% mức đánh giá 4–5 điểm).
  • Yếu tố hiển thị trang chủ: Hình ảnh điểm đến nổi bật (75.8% - 122 phiếu), chương trình ưu đãi/khuyến mãi (43.5% - 70 phiếu), thanh tìm kiếm tiện lợi (39.8% - 64 phiếu), thông tin liên hệ và CSKH (30.4% - 49 phiếu).
  • Thị hiếu thị giác: Ưa chuộng gam màu lạnh (52.8%) và màu trung tính (37.3%); phong cách hiện đại (64%); bố cục Grid (38.5%); hỗ trợ chuyển đổi giao diện sáng/tối (56.5%); phông chữ Sans-Serif (35.4%); thanh công cụ kết hợp cả Icon và Chữ (74.x%); định hướng thanh menu dọc (59.x%) hoặc kết hợp dọc-ngang (26.7%).
  • Nội dung xem trước (preview) của tour: Giá tiền (74.5% - 120 phiếu), địa điểm (54.7% - 88 phiếu), các điểm tham quan cụ thể (46.6% - 75 phiếu), loại hình du lịch (44.7% - 72 phiếu), thời gian lịch trình (41% - 66 phiếu).
Tiêu chí khảo sát Lựa chọn chiếm tỷ lệ cao nhất Tỷ lệ / Số phiếu Lựa chọn chiếm tỷ lệ thứ hai Tỷ lệ / Số phiếu
Độ tuổi người dùng Dưới 18 tuổi 49.1% 18 – 25 tuổi 44.1%
Quy mô nhóm du lịch Nhóm trên 5 người 44.7% Nhóm 5 người 39.1%
Tính năng quan tâm nhất Tìm kiếm địa điểm du lịch 68.3% Đặt phòng khách sạn 58.4%
Yếu tố trang chủ Hình ảnh điểm đến nổi bật 75.8% (122 phiếu) Chương trình khuyến mãi 43.5% (70 phiếu)
Gam màu chủ đạo Gam màu mát / lạnh 52.8% Gam màu trung tính 37.3%
Phong cách thiết kế Hiện đại 64.0% Tối giản 24.2%
Phông chữ website Sans-Serif (không chân) 35.4% Serif (có chân) 28.6%
Thanh công cụ (Menu) Tích hợp Icon + Chữ 74.x% Chỉ có chữ 14.9%
Yếu tố tóm tắt tour Giá tiền 74.5% (120 phiếu) Địa điểm 54.7% (88 phiếu)

Bên cạnh khảo sát người dùng, nhóm nghiên cứu 4 hệ thống du lịch thực tế:

  • Traveloka: Bố cục dịch vụ khoa học, giữ cố định thanh menu khi cuộn, hiển thị chi tiết giảm giá, tích hợp bản đồ chỉ đường. Hạn chế: thiếu thanh điều hướng chi tiết tour, không có giỏ hàng lưu dịch vụ tạm thời.
  • Vntrip.vn: Giao diện tối giản, tích hợp cẩm nang/blog du lịch và chuyển đổi tiền tệ. Hạn chế: thanh điều hướng không cố định khi cuộn, mục deal hot đặt nhầm ở trang đăng nhập.
  • Trip.com: Thanh công cụ tìm kiếm mạnh mẽ, bộ lọc đa dạng, tích hợp nhận xét thực tế. Hạn chế: giá hiển thị ban đầu chưa tính phí/phụ thu, xuất hiện nhiều pop-up quảng cáo.
  • Booking.com: Có chương trình khách hàng thân thiết, so sánh giá trực quan, hiển thị khoảng cách và số lượng chỗ nghỉ, lưu lịch sử tìm kiếm. Hạn chế: thanh điều hướng biến mất khi cuộn xuống.

Từ các phân tích trên, nhóm rút ra các kinh nghiệm: cần giữ cố định thanh điều hướng (Sticky Navigation), bổ sung giỏ hàng tạm thời, tích hợp bản đồ chỉ dẫn, xây dựng mục cẩm nang du lịch liên kết video review từ các kênh trải nghiệm thực tế (Khoai Lang Thang, Chan La Cà, Fahoka Xê dịch).

Chương 2: Thiết kế phác thảo giao diện

Chương 2 trình bày bản vẽ sơ bộ (Wireframe) của hệ thống website bằng Figma. Cấu trúc thanh điều hướng chính (Navigation Bar) gồm các mục: Trang chủ, Địa điểm muốn đến?, Tour & Trải nghiệm, Khách sạn, Vé máy bay, Về chúng tôi, Liên hệ & Hỗ trợ.

Nhóm đề xuất 3 dạng layout tương ứng cho 3 nhóm trang:

  • Trang chủ: Bố cục Grid đa ô, phía trên là banner quảng cáo khuyến mãi lớn và thanh tìm kiếm đa năng, phía dưới là các thẻ hiển thị địa điểm nổi bật.
  • Trang danh sách vé / kết quả tìm kiếm: Ứng dụng bố cục Z-pattern phân tách rõ khu vực bộ lọc tiêu chí và danh sách kết quả hiển thị.
  • Trang nhập thông tin mua vé / đặt chỗ: Bố cục chia cột giữa thông tin khai báo của hành khách và khung tóm tắt đơn hàng, chiết khấu giảm giá.

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

Chương 3 thể hiện các bản thiết kế độ nét cao (High-fidelity UI) cho 4 phân hệ chính do các thành viên đảm nhiệm:

  • Phân hệ Flight (Vé máy bay - Ngô Thị Như Quỳnh): Giao diện tìm kiếm chuyến bay một chiều/khứ hồi, danh sách chuyến bay theo hãng hàng không, hiển thị chi tiết hạng vé, giá vé và khung đặt chỗ nhanh.
  • Phân hệ Hotel (Khách sạn - Mai Võ Hoài Tiên): Giao diện tìm kiếm phòng, bộ lọc tiện ích, trang chi tiết khách sạn chia tab nội dung (tổng quan, loại phòng, tiện nghi, đánh giá, vị trí trên bản đồ).
  • Phân hệ Tour (Tour & Trải nghiệm - Ngô Trường Nhân): Giao diện danh mục tour, trang chi tiết tour hiển thị tóm tắt lịch trình từng ngày, mức giá, loại hình du lịch và các điểm tham quan nổi bật.
  • Phân hệ Bus (Vé xe khách - An Nhất Lâm): Giao diện tìm chuyến xe buýt/xe khách liên tỉnh, chọn điểm đón/trả và sơ đồ chọn chỗ ngồi.

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

Chương 4 mô tả quá trình xây dựng Prototype tương tác hoàn chỉnh trên Figma:

  • Thiết lập liên kết luồng chuyển động giữa tất cả các trang chức năng trong hệ thống.
  • Tạo lập các UI Components có khả năng tái sử dụng (Reusable Components), hiệu ứng chuyển cảnh (Smart Animate), hiệu ứng rê chuột (Hover states) cho thanh công cụ, các nút chọn vé, giỏ hàng và danh mục xổ xuống.

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

Chương 5 tổng kết lại toàn bộ kết quả đạt được của đồ án, chỉ ra các ưu điểm nổi bật của hệ thống giao diện, đánh giá mức độ hoàn thành nhiệm vụ của các thành viên, đồng thời trình bày các hạn chế và định hướng nâng cấp trong tương lai.

Thiết kế và triển khai

Hệ thống giao diện được thiết kế trên nền tảng Figma, bám sát các tiêu chuẩn thiết kế tương tác người dùng hiện đại:

[Navigation Bar: Trang chủ | Địa điểm muốn đến? | Tour & Trải nghiệm | Khách sạn | Vé máy bay | Về chúng tôi | Liên hệ]

Quy cách thiết kế kỹ thuật được chuẩn hóa bao gồm:

  • Màu sắc & Phông chữ: Gam màu lạnh tạo cảm giác thư giãn, tươi mới; phông chữ Sans-Serif đảm bảo độ tương phản và khả năng đọc tối ưu trên các kích thước màn hình.
  • Hệ thống điều hướng: Thanh điều hướng cố định (Sticky Navigation) tích hợp biểu tượng (Icon) kèm văn bản (Text), khắc phục điểm yếu bị ẩn menu khi cuộn trang của các nền tảng Vntrip và Booking.com.
  • Cơ chế quản lý dịch vụ: Bổ sung tính năng giỏ hàng lưu trữ dịch vụ tạm thời trước khi thanh toán, hỗ trợ người dùng theo dõi nhiều dịch vụ cùng lúc (vé xe, phòng khách sạn, tour).
  • Tích hợp thông tin đa phương tiện: Liên kết cẩm nang du lịch và hệ thống bản đồ số, hỗ trợ định vị khoảng cách và hướng dẫn di chuyển trực quan.

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

Kết quả chính đạt được

  1. Thu thập và phân tích dữ liệu thực nghiệm: Xây dựng thành công bộ dữ liệu khảo sát từ hơn 160 người dùng, xác định rõ thị hiếu cốt lõi của phân khúc du khách trẻ (chi phí thấp, nhu cầu săn sale, thích du lịch tự túc ngắn ngày 3–5 ngày).
  2. Hệ thống hóa kinh nghiệm thiết kế: Tổng hợp bảng đối sánh ưu/nhược điểm từ 4 nền tảng lớn (Traveloka, Vntrip, Trip.com, Booking.com), tạo cơ sở thực chứng cho các quyết định thiết kế UI.
  3. Bộ sản phẩm thiết kế hoàn chỉnh: Hoàn thành đầy đủ hồ sơ thiết kế gồm hệ thống Wireframe, bộ giao diện High-fidelity và Interactive Prototype trên Figma cho 4 phân hệ dịch vụ (Flight, Hotel, Tour, Bus).

Đóng góp thực tiễn

  • Giải quyết bài toán trải nghiệm người dùng thông qua việc tối ưu hóa thanh điều hướng cố định, tích hợp bảng tóm tắt tour trực quan (hiển thị rõ giá, địa điểm, lịch trình) và cung cấp tính năng giỏ hàng tạm thời.
  • Đưa ra giải pháp giao diện linh hoạt hỗ trợ người dùng trẻ tiếp cận thông tin nhanh chóng, minh bạch về giá và dễ dàng so sánh dịch vụ.

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

Hạn chế

  • Đồ án dừng lại ở phạm vi thiết kế giao diện (UI/UX Design) và xây dựng bản mẫu tương tác trên phần mềm Figma, chưa bước sang giai đoạn lập trình giao diện Front-end và kết nối cơ sở dữ liệu/API Backend.
  • Tệp đối tượng khảo sát chủ yếu tập trung vào sinh viên Trường Đại học Công nghệ Thông tin và người thân, chưa mở rộng ra các phân khúc người dùng lớn tuổi hoặc du khách doanh nghiệp.

Hướng phát triển tiếp

  • Tiến hành các đợt kiểm thử tính khả dụng (Usability Testing) với người dùng thực tế trên bản Prototype để tinh chỉnh vi tương tác (Micro-interactions).
  • Triển khai lập trình Front-end (sử dụng các thư viện/framework web hiện đại) và xây dựng hệ thống Backend hoàn chỉnh phục vụ kết nối dữ liệu thực tế.

Giá trị tham khảo

Đồ án là tài liệu tham khảo phù hợp cho:

  • Sinh viên các ngành Công nghệ Thông tin, Khoa học Máy tính, Kỹ thuật Phần mềm học môn Thiết kế Giao diện Người dùng (UI/UX Design) hoặc thực hiện các đồ án phát triển ứng dụng thương mại điện tử/dịch vụ trực tuyến.
  • Các nhà thiết kế giao diện mới tiếp cận lĩnh vực Travel Tech, cần số liệu khảo sát thực tế về hành vi người dùng trẻ và phương pháp phân tích đối thủ cạnh tranh trên thị trường du lịch trực tuyến.

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

1. Đối tượng khảo sát và quy mô mẫu trong đồ án này là bao nhiêu?

Khảo sát được thực hiện trực tuyến qua Google Forms với quy mô hơn 160 phản hồi, đối tượng chính là sinh viên Trường Đại học Công nghệ Thông tin (UIT) và người thân (trong đó 49.1% dưới 18 tuổi và 44.1% từ 18–25 tuổi).

2. Người dùng được khảo sát ưu tiên yếu tố nào nhất khi xem phần tóm tắt (preview) của tour du lịch?

Yếu tố được quan tâm hàng đầu là Giá tiền (với 120 phiếu, chiếm 74.5%), tiếp theo là Địa điểm (88 phiếu, chiếm 54.7%) và Các điểm tham quan (75 phiếu, chiếm 46.6%).

3. Đồ án đã chỉ ra những nhược điểm gì ở các trang web du lịch nổi tiếng như Traveloka, Vntrip, Trip.com và Booking.com?

  • Traveloka: Thiếu thanh điều hướng chi tiết trong trang tour, không có giỏ hàng lưu dịch vụ trước khi thanh toán.
  • Vntrip.vn & Booking.com: Thanh điều hướng biến mất khi cuộn trang, gây bất tiện khi muốn tìm lại menu.
  • Trip.com: Giá hiển thị ban đầu chưa tính đủ phụ phí và xuất hiện nhiều quảng cáo/pop-up.

4. Bốn phân hệ dịch vụ chính được thiết kế trong đồ án gồm những gì và do ai thực hiện?

Bốn phân hệ gồm: Đặt vé máy bay (Flight - Ngô Thị Như Quỳnh), Đặt phòng khách sạn (Hotel - Mai Võ Hoài Tiên), Đặt tour du lịch (Tour - Ngô Trường Nhân) và Đặt vé xe khách (Bus - An Nhất Lâm).

5. Website đề xuất sử dụng phong cách thiết kế, phông chữ và gam màu nào?

Website áp dụng phong cách thiết kế hiện đại (được 64% người khảo sát lựa chọn), sử dụng phông chữ không chân Sans-Serif (35.4%), gam màu lạnh chủ đạo (52.8%) và hỗ trợ linh hoạt chuyển đổi giữa giao diện Sáng và Tối (56.5%).

Kết luận

Đồ án môn học "Thiết kế giao diện website cung cấp dịch vụ du lịch" của nhóm sinh viên Trường Đại học Công nghệ Thông tin – ĐHQG-HCM đã xây dựng thành công quy trình thiết kế UI/UX bài bản dựa trên dữ liệu khảo sát thực tế từ hơn 160 người dùng. Bằng việc phân tích sâu các ưu - nhược điểm của các nền tảng thương mại du lịch hàng đầu, nhóm tác giả đã đề xuất và hoàn thiện hệ thống giao diện, wireframe và prototype tương tác cho 4 phân hệ dịch vụ du lịch chính trên Figma. Kết quả của đồ án cung cấp một tài liệu tham khảo có giá trị cao về mặt phương pháp luận phân tích yêu cầu người dùng và triển khai thiết kế giao diện học thuật.