Báo cáo Đồ Án môn thiết kế giao diện người dùng Đề tài thiết kế giao diện website cung cấp dịch vụ du lịch

Giaodiện được phát triển với những tính năng hỗ trợ người dùng trong từng bước của quátrình chọn lựa địa điểm du lịch, đặt vé và các dịch vụ liên quan trước, trong và sauchuyến đi.. Nhóm

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 MÔN THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

Đề tài: Thiết kế giao diện website cung cấp dịch vụ du lịch

GVHD: ThS Huỳnh Văn Tín Nhóm sinh viên thực hiện:

1 Ngô Thị Như Quỳnh MSSV: 22521232

2 Mai Võ Hoài Tiên MSSV: 22521468

3 Ngô Trường Nhân MSSV: 22521001

□□ Tp Hồ Chí Minh, 10/2024 □□

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

TP HCM, ngày 7 tháng 10 năm 2024

Người nhận xét

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

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

Ngô Thị

Như Quỳnh

2252123 2

- Chỉnh sửa báo cáo

 Chương 1: 

- Lên câu hỏi khảo sát

- Tạo form khảo sát

- Thu thập ý kiến củangười dùng qua form

- Báo cáo kết quả khảo sát

- Viết báo cáo các trangHotel

phát triển

Ngô Trường

Nhân

2252100 1

 Chương 1: 

- Lên câu hỏi khảo sát

- Thu thập ý kiến củangười dùng qua form

- Báo cáo kết quả khảo sát

- Phân tích và đưa ra giảipháp

- Viết báo cáo các trangTour

- Thiết kế wireframe trangBus

- Viết báo cáo các trangBus

 Chương 1: 

- Viết lời mở đầu

- Tìm hiểu, nghiên cứuwebsite cung cấp dịch vụ

du lịch (Traveloka,Vntrip)

- Báo cáo kết quả nghiêncứu (ưu điểm, nhượcđiểm) và rút ra kinhnghiệm

 Chương 2:

 Viết phần 2.2, 2.7, 2.8,2.9

 Chương 4:

 Viết phần 4.1, 4.2

 Phần 4.3: từ 4.3.1 đến4.3.5

LỜI MỞ ĐẦU

Du lịch hiện tại đã trở thành một “ngành công nghiệp không khói”, đóng gópđáng kể cho nền kinh tế và tạo ra nhiều cơ hội việc làm mỗi năm Du lịch đang làngành dịch vụ mũi nhọn và phát triển cực thịnh tại Việt Nam trong một vài năm trở lạiđây Không những gười Việt Nam mà kể cả người nước ngoài cũng có xu hướng điđến Việt Nam nhiều hơn rõ rệt chứng tỏ mức độ quan tâm cao tại loại hình dịch vụnày Sau giai đoạn chịu tác động nặng nề từ đại dịch COVID-19, ngành du lịch giờ đâyđang trên đà phục hồi mạnh mẽ Các doanh nghiệp du lịch cần điều chỉnh chiến lược

để tận dụng những cơ hội mới, đáp ứng nhu cầu ngày càng phong phú của du khách

Để làm được điều này, họ phải tiếp cận người tiêu dùng một cách thông minh, sáng tạo

và hiệu quả nhằm duy trì và mở rộng thị trường

Các khảo sát gần đây với nhóm khách hàng trẻ tuổi, chủ yếu là sinh viên vànhững người mới đi làm, cho thấy nhu cầu du lịch khám phá và trải nghiệm vẫn rấtcao Mặc dù thu nhập còn hạn chế, nhóm đối tượng này vẫn mong muốn có nhữngchuyến đi thư giãn sau thời gian học tập và làm việc Họ tìm kiếm các chuyến du lịchtiết kiệm nhưng vẫn đảm bảo đầy đủ trải nghiệm Điều này yêu cầu các doanh nghiệp

du lịch cung cấp những giải pháp thích hợp như chương trình khuyến mãi, hỗ trợ lập

kế hoạch chuyến đi tiết kiệm và ưu đãi về giá vé phương tiện di chuyển Đồng thời,việc cung cấp thông tin chi tiết về điểm đến và phương pháp tối ưu hóa thời gian dichuyển sẽ thu hút và đáp ứng tốt hơn nhu cầu của nhóm khách hàng trẻ năng động này

Để đáp ứng nhu cầu được đặt ra, nhóm chung 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 Giaodiện được phát triển với những tính năng hỗ trợ người dùng trong từng bước của quátrình chọn lựa địa điểm du lịch, đặt vé và các dịch vụ liên quan trước, trong và sauchuyến đi Với một môi trường ứng dụng thân thiện và dựa trên trải nghiệm thực tế,kết nối với nhiều doanh nghiệp trong ngành và đưa ra những gợi ý tốt nhất cho ngườidùng

Dự án thiết kế giao diện website du lịch của nhóm chắc chắn không tránh khỏinhiều thiếu sót Nhóm rất mong nhận được những ý kiến đóng góp quý báu từ Thầy 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

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 9

Hình 1.2: Thông tin phân khúc người tham gia khảo sát 9

Hình 1.3: Khảo sát về số lượng người đi cùng 10

Hình 1.4: Xu hướng lựa chọn địa điểm du lịch của khách hàng 10

Hình 1.5: Xu hướng tổ chức du lịch 11

Hình 1.6: Khoảng thời gian dành ra khi đi du lịch 11

Hình 1.7: Các trang web phổ biến 12

Hình 1.8: Nhu cầu tính năng trên website du lịch 12

Hình 1.9: Các yêu cầu phi chức năng cho website du lịch 13

Hình 1.10: Khảo sát về gam màu 15

Hình 1.11: Khảo sát về bố cục trang web 15

Hình 1.12: Khảo sát về giao diện sáng và tối 16

Hình 1.13: Khảo sát về font chữ 17

Hình 1.14: Khảo sát về phong cách 17

Hình 1.15: Khảo sát về thanh công cụ 18

Hình 1.16: Khảo sát về trang chủ 20

Hình 1.17: Trang chủ Traveloka 23

Hình 1.18: Cách tổ chức các dịch vụ của Traveloka 23

Hình 1.19: Phần khuyễn mãi của Traveloka 23

Hình 1.20: Phần hỗ trợ người dùng của Traveloka 24

Hình 1.21: Phần thông tin vé máy bay của Traveloka 24

Hình 1.22: Phần đặt vé máy bay của Traveloka 24

Hình 1.23: Phần trình bày các sản phẩm dịch vụ của Traveloka 25

Hình 1.24: Tích hợp bản đồ và chỉ dẫn cách đi của Traveloka 25

Hình 1.25: Trang chi tiết dịch vụ đặt khách sạn của Traveloka 26

Hình 1.26: Phần chi tiết thông tin Tour của Traveloka 26

Hình 1.27: Phần thông tin lịch trình Tour của Traveloka 26

Hình 1.28: Trang chủ Vntrip 27

Hình 1.29: Giao diện tìm kiếm dịch vụ của Vntrip 28

Hình 1.30: Phần cẩm nang - blog của Vntrip 28

Hình 1.31: Phần thông tin chi tiết Tour của Vntrip 28

Hình 1.32: Phần chi tiết thông tin khách sạn của Vntrip 29

Hình 1.33: Phần quản lý đơn hàng của Vntrip 29

Hình 1.34: Trang sign up của Vntrip 29

Hình 1.35: Trang chủ Trip.com 30

Hình 1.36: Giao diện đơn giản, trực quan 31

Hình 1.37: Thanh công cụ tìm kiếm mạnh mẽ 31

Hình 1.38: Bộ lọc chi tiết 32

Hình 1.39: Giao diện đơn giản, trực quan 32

Hình 1.40: Chi tiết mua vé máy bay 33

Hình 1.41: Trang chủ Booking.com 34

Hình 1.42: Chương trình khách hàng thân thiết của Booking.vn 35

Hình 1.43: Người dung có thể dễ dàng so sánh và lựa chọn mức giá phù hợp 35

Hình 1.44: Thông tin hiển thị tối ưu về khoảng cách 35

Hình 1.45: Thông tin hiển thị tối ưu về số lượng chỗ nghỉ 36

Hình 1.46: Booking.vn đề xuất lịch sử tìm kiếm gần đây 36

Hình 1.47: Booking.vn cho phép người dùng lựa chọn bố cục ngang hoặc dọc 36

Hình 1.48: Khi cuộn thì không thể sử dụng thanh điều hướng 37

MỤC LỤC

LỜI MỞ ĐẦU

DANH MỤC CÁC BẢNG, HÌNH ẢNH

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

1.1 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:

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

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

1.2.1 Traveloka

1.2.2 Vntrip

1.2.3 Trip

1.2.4 Booking

1.3 Rút ra kinh nghiệm 35

TÀI LIỆU THAM KHẢO 37

Chương 1: KHẢO SÁT, PHÂN TÍCH, THAM KHẢO 1.1 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:

Cách thức khảo sát:

Nhóm chúng tôi đã lập form khảo sát người dùng về thói quen và nhu cầu vềwebsite du lịch của người dùng

Đối tượng khảo sát: Sinh viên UIT và người thân

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

Kết quả khảo sát:

Sau khi hoàn thành khảo sát với hơn 160 phản hồi, chúng tôi đã có phản hồi tíchcực sau về phía người dùng:

1.1.1.2.1 Về thông tin của tệp khách hàng:

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

Hình 1.2 Thông tin phân khúc người tham gia khảo sát

Theo khảo sát, với 49.1% người tham gia dưới 18 tuổi và 44.1% trong độ tuổi

từ 18-25, và vẫn chưa đi làm Theo đó trang web dịch vụ du lịch của chúng tôi sẽ tậptrung hướng tới nhóm khách hàng trẻ này Các dịch vụ sẽ cần được thiết kế để hấp dẫnhọc sinh, sinh viên với các gói du lịch giá rẻ, ưu đãi đặc biệt theo thói quen “săn sale”của giới trẻ và ưu tiên hiển thị các hoạt động phiêu lưu, khám phá phù hợp với họ

1.1.1.2.2 Về thói quen của người dùng khi đi du lịch:

Hình 1.3: Các trang web phổ biến

Các website đã từng sử dụng: Qua khảo sát, hầu hết người dùng đều dụng các

nên tảng nổi tiếng như Traveloka, Agoda, Booking Tuy nhiên, một phần khách hàng(12.4%) chưa từng sử dụng bất kỳ website nào để đặt dịch vụ du lịch, hoặc tự tìm hiểu

và đặt trực tiếp

Hình 1.4 Khảo sát về số lượng người đi cùng

Từ biểu đồ, có thể thấy rằng phần lớn người tham gia khảo sát thường đi du lịch

cùng nhóm, với 44.7% đi cùng hơn 5 người và 39.1% đi với nhóm 5 người Lượng

người đi du lịch cùng 10 người trở lên là rất hiếm

Hình 1.6: Xu hướng tổ chức du lịch

Nhóm nhận thấy hầu hết mọi người thường đi du lịch tự túc hơn theo tour Theonhư kết quả, có tới 40% người mong muốn tự chủ trong việc đi du lịch, và gần 45% cóthể linh hoạt chọn một trong hai Trong khi đó, chỉ có gần 15% người thường đi dulịch theo tour

Hình 1.7: Khoảng thời gian dành ra khi đi du lịch

Phần lớn mọi người thường thích đi du lịch khoảng 3 ngày đến 5 ngày Bêncạnh các dịch vụ du lịch, trải nghiệm trong ngày, nhóm cũng sẽ bổ sung các dịch vụ dulịch dài ngày như 2 ngày 1 đêm, 3 hoặc 5 ngày,… vì đa số các chuyến du lịch nướcngoài thường mất nhiều thời gian hơn

1.1.1.2.3 Mong muốn trải nghiệm của người dùng:

Hình 1.8: Nhu cầu tính năng trên website du lịch

Mục địch sử dụng:

Về tính năng, người dùng quan tâm nhất đến hai tính năng Tìm kiếm địa điểm

du lịch (68.3%) và Đặt phòng khách sạn (58.4%), theo sau là 3 lựa chọn bao gồm

đặt phòng khách sạn, đặt tour du lịch, đặt vé máy bay/xe (chiếm từ 40-50%)

Hình 1.9: Các yêu cầu phi chức năng cho website du lịch

Các yêu cầu phi chức năng:

Theo đó, các yêu cầu phi chức năng trên cũng rất quan trọng đối với kháchhàng Các lựa chọn bao gồm (từ trái qua phải): Giao diện dễ sử dụng, thanh toán dễ

2 Nhóm tính năng về trải nghiệm người dùng: Các tính năng ở nhóm này được

đánh giá rất cao, với gần 80% đánh đánh giá ở hai mức 4 – 5 điểm (rất quantrọng) Điều này cho thấy người dùng muốn trang web các cung cấp các tínhnăng tính năng bao gồm thanh toán, chích sách hoàn hủy, CSKH (Các cột 2, 3,

6, 8) để họ có thể theo dõi được hành trình của mình

3 Nhóm tính năng về khuyễn mại và tư vấn: Tính năng này đều nhận được sự

đánh giá cao từ một phần nhỏ hơn của người dùng, tuy nhiên, vẫn đóng vai tròquan trọng trong việc quyết định trả tiền sử dụng dịch vụ của người dùng

Hình 1.10: Các yêu cầu phi chức năng cho website du lịch

Yếu tố mà người dùng muốn nhìn thấy ở trang chủ:

1 Hình ảnh các điểm du lịch nổi bật: Đây là yếu tố được yêu thích nhất, với

122 phiếu (chiếm 75.8%) Ta có thể thấy thị hiếu của người dùng tập trungvào việc trải nghiệm hình ảnh và thông tin nổi bật một cách trực quan và thuhút Điều này cho thấy người dùng mong muốn có một cái nhìn trực quan vàhấp dẫn về các địa điểm du lịch ngay từ đầu

2 Ưu đãi, khuyến mãi: Đứng thứ hai với 70 phiếu (chiếm 43.5%), tuy không

chiếm đến 50% nhưng vẫn thấy được rằng nhiều người quan tâm đến cáckhuyến mãi và ưu đãi khi truy cập trang web du lịch, cho thấy yếu tố giá cả

và các ưu đãi hấp dẫn ảnh hưởng lớn đến quyết định của người dùng

3 Thanh tìm kiếm tiện lợi: Được 64 người chọn (chiếm 39.8%), điều này

cho thấy tuy thanh tìm kiếm được xem là công cụ quan trọng giúp ngườidùng dễ dàng tìm kiếm thông tin mà nhiều người dùng mong muốn nhưngkhông nhất thiết phải là một thanh tìm kiếm quá tiện lợi, phần lớn người

dùng vẫn cảm thấy một thanh tìm kiếm cơ bản là đủ cho một trang web dulịch.

4 Thông tin liên hệ và hỗ trợ khách hàng: Yếu tố này nhận được 49 phiếu

(chiếm 30.4%), mặc dù chỉ khoảng 30% người dùng được khảo sát mongmuốn nhìn thầy trên trang chủ, tuy nhiên đây vẫn là một phần quan trọng để

hỗ trợ khách hàng khi cần thiết

1.1.1.2.4 Về thiết kế giao diện người dùng:

Hình 1.11: Khảo sát về gam màu

Về gam màu chủ đạo cho website:

Theo biểu đồ, phần lớn người dùng ựa chuộng sử dụng các gam màu mát(52.8%) bởi có lẽ do cảm giác thư giãn và tươi mới do nó mang lại Còn gam màutrung tính thì được lựa chọn ít hơn (37.3%), gam màu này có lẽ là sự lựa chọn an toànvới nhiều người bởi tính ứng dụng cao của nó Gam màu nóng có lẽ là gam màu ítđược lựa chọn nhất chỉ với 9.9%, bởi gam màu này gây chói mắt và tạo cảm giác căngthẳng cho người dùng

Hình 1.12: Khảo sát về bố cục trang web

Về bố cục trang web:

Theo biểu đồ, 3 kiểu bố cục đều được người dùng chọn với tỉ lệ gần như là bằngnhau Điều này cho thấy, 3 kiểu bố cục này đều phù hợp với thị hiếu người dùng:

1 Layout 1 - bố cục Grid (38.5%), kiểu bố cục lưới, cho phép tổ chức thông tin

một cách có hệ thống, dễ dàng bố trí và trình bày nhiều nội dung, giúp ngườidùng có cảm giác dễ chịu

2 Layout 2 - bố cục hai cột, vì bố cục này chia ra cột chính và phụ nên giúp

người dùng dễ dàng tìm kiếm thông tin cũng vì thế mà layout này được chọnvới 31.7%

3 Layout 3 - bố cục F, hướng bố cục trang web theo dạng hình chữ F, bố cục này

chiếm 29.8%, bố cục này hướng mắt người dùng theo một lộ trình tự nhiên, thếnhưng bố cục này khá đơn giản gây nhàm chán cho người dùng

 Từ phân tích cho thấy Layout 1 - bố cục Grid, phù hợp với đại đa số người dùng

và cũng là kiểu bố cục có thể tối ưu không gian nhất

thiết kế bắt mắt Cũng chính vì người dùng ngày càng hướng tới sự hiện đại vàcải tiến công nghệ.

Hình 1.14: Website phong cách hiện đại – phong cách đươc yêu thích nhất

2 Kiểu website tối giản với 24.2%: phù hợp cho người dùng tìm kiếm thông tinnhanh chóng và hiệu quả Tạo cảm giác thư giãn và tập trung vào nội dung Tuynhiên, với tệp khách hàng trẻ như hiện tại thì website hiện đại vẫn được ngườidùng ưu tiên lựa chọn hơn:

Hình 1.15: Website phong cách tối giản

3 Kiểu website cổ điển được ít người dùng lựa chọn nhất - 11.8%, có lẽ kiểuwebsite không thu hút được người dùng trẻ và hiện đại.

Hình 1.16: Khảo sát về chế độ ánh sáng giao diện trang web

Về chế độ giao diện của website:

Theo như phân bố của biểu đồ, người dùng luôn mong muốn một website có thểlinh hoạt chuyển đổi giữa chế độ sáng và tối (với 56,5%)

Việc chỉ sử dụng ở chế độ sáng hoặc chế độ tối, chỉ được số ít người dùng lựachọn (~30%), bởi việc sự dụng ở một chế độ duy nhất sẽ gây khó khăn cho người dùngkhi thay đổi không gian làm việc

Hình 1.18: Phông chữ Sans Serif – Được yêu thích nhất

2 Serif - chữ có chân đứng thứ 2 với 28.6%, đây là phông chữ truyền thống cổ

điển, thích hợp cho văn bản thế nhưng họ phông chữ này lại không quá tối ưutrên màn hình, gây khó đọc cho người dùng đặc biệt là màn hình nhỏ

Hình 1.19: Phông chữ Serif

Hình 1.20: Khảo sát về vị trí thanh công cụ

Về vị trí thanh công cụ:

Menu dọc là loại menu được người dùng lựa chọn nhiều nhất với 59.6% Vì

loại menu này có khả năng hiển thị cao, có thể chứa nhiều mục bao gồm cả danh mụccon Thích hợp cho các trang web có nhiều nội dung, giúp người dùng dễ dàng tìmkiếm thông tin

Hình 1.21: Thanh công cụ dọc – được yêu thích nhất

Menu ngang được lựa chọn ít nhất với 13.7%, vì loại menu này hạn chế lượng

danh mục con, cạnh đó cũng gây khó khăn đối với người sử dụng mới

Người dùng chọn tích hơp cả hai loại menu này với 26.7%, không quá cao,

việc tích hợp này có thể giúp trang web đầy đủ nội dung hơn Tuy nhiên, cũng sẽ gâyrối mắt cho người dùng và gây dư thừa thông tin, chiếm nhiều không gian và làm tốc

độ tải trang chậm hơn

Loại thanh công cụ chỉ có icon - đây là loại được lựa chọn ít nhất với 10.6%.Thanh công cụ chỉ icon thẩm mỹ hơn với các biểu tượng đồ họa, tuy nhiên thì các icon

có thể gây khó hiểu cho người mới sử dụng hoặc có thể gây nhầm lẫn nếu icon không

rõ ràng

Loại thanh công cụ tích hợp cả chữ và số được người dùng lựa chọn nhiều nhất

vượt trội hơn với 74.5% Vì nó giúp người đọc hiểu rõ được ý nghĩa của từng mục

nếu không hiểu rõ icon mà không gây nhàm chán cho người dùng

Hình 1.23: Thanh công cụ icon + chữ - Được lựa chọn nhiều nhất

 Từ đó có thể thấy rằng, trang web có thanh công cụ tích hợp cả chữ và icon sẽ giúpngười dùng có trải nghiệm tốt hơn với giao diện

Hình 1.24: Khảo sát về thanh công cụ

Khảo sát về phần preview/summary:

Về mong muốn của người dùng về những nội dung mà họ muốn thấy trong phầnpreview/summary của tour du lịch trước khi họ quyết định click vào xem chi tiết:

1 Giá tiền: Đây là yếu tố hàng đầu mà người dùng quan tâm, với 120 phiếu

(chiếm 74.5%) Điều này cho thấy giá cả đóng vai trò quyết định trong việcđánh giá tổng quan về một tour du lịch, giúp người dùng dễ dàng so sánh và lựachọn tour phù hợp với ngân sách

2 Địa điểm: Đứng thứ hai với 88 phiếu (chiếm 54.7%), cho thấy người dùng

muốn biết ngay từ đầu các địa điểm mà họ sẽ đến trong tour Bới vì phần lớn

người dùng sẽ chọn địa điểm để tham gia một tour du lịch trước khi tìm nhữngthông tin khác vì vậy có thể nói địa điểm là yếu tố quan trọng để người dùngxác định được nơi mà họ muốn tham gia cũng như mức độ hấp dẫn của tour

3 Loại hình du lịch: Có 72 phiếu (chiếm 44.7%), đây là yếu tố mà người dùng

mong muốn để có thể phân biệt các loại hình du lịch khác nhau, như du lịchnghỉ dưỡng, phiêu lưu, hay du lịch khám phá văn hóa, từ đó dễ dàng lựa chọnloại hình phù hợp với nhu cầu của mình Mặc dù đây là một yếu tố quan trọngtuy nhiên việc chỉ có 44% người dùng được khảo sát lựa chọn cho thấy đâykhông phải là yếu tố hàng đầu mà người dùng hướng tới, việc lựa chọn loạihình du lịch sẽ được khách hàng chọn lựa sau khi đã quyết định được địa điểm

và giá tiền

4 Các địa điểm tham quan: Được 75 người chọn (chiếm 46.6%), có thể nói đây

là một trong những yếu tố quan trọng nhất, quyết định hành trình của ngườidùng khi tham gia tour, tuy vậy chỉ khoảng một nửa số lượng người dùng quantâm đến đặc điểm này Chỉ khoảng một nửa người dùng muốn có cái nhìn tổngquan về những điểm tham quan nổi bật trong tour để đánh giá xem có đáng đểtham gia không

5 Thời gian: Với 66 phiếu (chiếm 41%), thời gian của tour là yếu tố mà người

dùng muốn biết để lên kế hoạch chi tiết hơn, đặc biệt là sắp xếp thời gian phùhợp với lịch trình cá nhân Hiện nay việc lên kế hoạch để tham gia một tour dulịch là điều diễn ra thường xuyên với một hoặc một nhóm người dùng, tuy vậyviệc đặt ra thời gian cụ thể thì lại là yếu tố thường được bỏ quên nhất, nó chothấy qua biểu đồ đã cung cấp Qua đó ta có thể thấy, người dùng sẽ ưu tiên việclên kế hoạch trước rồi mới chọn thời gian cụ thể

 Bởi vì một preview/summary sẽ không thể hiển thị được hết thông tin chi tiết củamột tour du dịch vì vậy việc đưa ra những thông tin nổi bật nhất của tour đó sẽ tạo sự

Hình 1.25: Mẫu preview

Về một số mong muốn riêng của khách hàng:

Khi thực hiện khảo sát chúng tôi đã đặt thêm một câu hỏi về việc mong muốn tìm hiểucác một số các ý tưởng và mong muốn riêng của khách hàng

1 Đẩy mạnh đầu tư các clip quảng bá để dễ dàng thu hút khách du lịch vì nhu cầu

của con người ngày càng được nâng cao Có thể hiểu theo hướng thiết kế giaodiện người dùng đó là đầu tư các clip quảng bá về trang web để thu hút khách

du lịch truy cập vào trang web Đây đúng là một trong những yếu tố quan trọnggiúp phát triển một trang web tuy nhiên việc chạy quảng bá sẽ chỉ triển khai khimột trang web được đưa vào thực thi

2 Đẩy mạnh tuyên truyền phát triển du lịch nội địa Việc phát triển du lịch của

một quốc gia cũng sẽ ảnh hưởng đến rất nhiều mặt và giúp đất nước phát triển

Vì niềm tự tôn dân tộc cũng như tình yêu nước của nhóm thì đây là một ý tưởngrất tốt và chắc chắn sẽ được áp dụng

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

1.1.2.1 Bố cục trình bày của website:

Hiện nay, việc đặt tour du lịch qua các trang web đang trở nên phổ biến, đặc biệt làđối với giới trẻ Theo khảo sát, phần lớn người tham gia thuộc độ tuổi dưới 25 Với sựnhạy bén trong việc tiếp cận công nghệ, giới trẻ dễ dàng làm quen và sử dụng các giaodiện phức tạp hoặc mới lạ, nên không gặp khó khăn khi sử dụng các trang web du lịchhiện đại Điều này giải thích vì sao một số lượng lớn người tham gia khảo sát đã bày tỏ

sự yêu thích với các thiết kế trang web hiện đại Kết quả này cũng được phản ánh rõràng qua số liệu thống kê trong khảo sát ở trên Để thiết kế một trang web với giaodiện mới mẻ, hiện đại được chú trọng, nhóm chúng tôi đề xuất các giải pháp sau:

Đối với từng page của trang web, chúng tôi quyết định sẽ sử dụng những layoutsao cho phù hợp với nội dung của từng page Một số mô hình sẽ được tham khảo như

mô hình F-pattern, Z-pattern và grid

Sau khi tham khảo một số mô hình nêu trên cũng như xem xét qua khảo sát ngườidùng, nhóm chúng tôi đề xuất 3 layout cho 3 mục đích sau:

1.1.1.2.5 Trang chủ:

Qua tham khảo mô hình grid và khảo sát người dùng chúng tôi cảm thấy việc thiết

kế một giao diện có phần tìm kiếm và bộ lọc và các thông tin bên dưới sẽ dễ tiếp cậnvới người dùng hơn:

Hình 1.26: Mẫu Grid cho trang web

Qua đó chúng tôi đề xuất layout sau cho phần trang chủ của trang web:

Hình 1.27: Layout đề xuất cho web

1.1.1.2.6 Danh sách vé của địa điểm đã chọn ở trang chủ:

Đây là một page quan trọng liên quan đến phần hiển thị vé cho người dùng vì vậyviệt có một layout rõ ràng để người dùng dễ dàng tìm kiếm được các địa điểm mà họmong muốn Dựa trên mô hình Z-pattern chúng tôi xin đề xuất layout sau cho pagedanh sách vé của trang web:

Hình 1.28: Layout cho page danh sách vé của trang web

1.1.1.2.7 Nhập thông tin mua vé/đặt chỗ:

Việc thiết kế một layout riêng cho page nhập thông tin mua vé/đặt chỗ cũng nênđược chú trọng, chúng tôi đã tham khảo một số trang web như traveloka, agoda:

Hình 1.29: Layout nơi nhập thông tin mua vé

Qua đó chúng tôi đề xuất layout sau cho phần trang chủ của trang web:

Qua khảo sát, tỉ lệ người dùng nhiều nhất là thanh menu dọc, tuy nhiên với việc tỉ

lệ chọn cả hai menu dọc và ngang cũng chiếm một phần không nhỏ, vì vậy việc kếthợp được cả menu dọc và ngang sẽ giúp cho việc tìm kiếm và lọc thông tin cuả ngườidùng trở nên dễ dàng hơn Kết hợp với việc người dùng yêu thích một thanh menu có

cả icon lẫn chữ nên chúng tôi xin đề xuất một thanh công cụ mẫu như sau:

Hình 1.31: Thanh công cụ của trang web

Màu sắc của website:

Qua khảo sát, ta có thể thấy tỉ lệ người dùng chọn gam màu lạnh cho trang web đạt

tỉ lệ rất cao, điều này chứng minh cho việc sử dụng các gam màu lạnh sẽ dễ tiếp cậnvới thị hiếu của nguười dùng hơn

Hình 1.32: Gam màu chủ đạo cho web

Ngoài ra, người dùng còn mong muốn có thể linh hoạt giữa giao diện sáng và tốicho trang web có thể đảm bảo khả năng nhìn của người dùng trong mọi loại điều kiện

Vì vậy việc thiết kế một chế độ có thể bật tắt giữa giao diện sáng và tối sẽ giúp ngườidùng dễ dàng sử dụng hơn

Font chữ của website:

Qua việc tìm hiểu các trang web du lịch và khảo sát từ người dùng, việc sử dụngfont chữ dễ nhìn là rất quan trọng Qua đó, nhóm đề xuất font chữ Sans Serif - chữkhông chân

Hình 1.33: Phông chữ của trang web – Sans Serif

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

1.2.1 Traveloka

Traveloka là một trang web cung cấp dịch vụ du lịch uy tín và hơn 10 năm kinhnghiệm Đây là siêu ứng dụng du lịch và tiện ích sống hàng đầu Đông Nam Á, giúpbạn khám phá và mua đa dạng các loại sản phẩm du lịch, dịch vụ địa phương và dịch

vụ tài chính

Các dịch vụ chính:

 Dịch vụ đặt phương tiện đi lại: vé máy bay, xe buýt, tàu hỏa, cho thuê ô tô,đưa đón sân bay, Đặt phòng khách sạn: kho khách sạn chỗ ở lớn nhất Đông

Hình 1.34: Trang chủ Traveloka

1.2.2.1 Ưu điểm

P Trang chủ trực quan dễ hiểu Nhiều dịch vụ nhưng bố cục hợp lý

P Khi di chuột đến các mục trên menu, các mục sẽ đổi màu hoặc hiển thị đườngviền, giúp trải nghiệm mượt mà

P Thanh menu được giữ lại khi cuộn trang, thuận tiện cho người dùng

Hình 1.35: Cách tổ chức các dịch vụ của Traveloka

P Phần khuyến mãi xuất hiện to rõ, người dùng dễ thấy

Hình 1.21: Phần khuyễn mãi của Traveloka

P Phần hỗ trợ người dùng dễ hiểu, dễ dàng cho người dùng mới

Hình 1.22: Phần hỗ trợ người dùng của Traveloka

P Thông tin vé máy bay được thiết kế thành các mục nhỏ gọn gàng, dễ theo dõi,không cần phải chuyển sang một tab mới, đỡ mất thời gian

Hình 1.24: Phần đặt vé máy bay của Traveloka

P Thông tin các loại hình sản phẩm ngắn gọn, phù hợp, thể hiện được cả phầnđánh giá cho người dùng dễ so sánh

Hình 1.25: Phần trình bày các sản phẩm dịch vụ của Traveloka

P Có kết hợp bản đồ cho địa điểm du lịch, đặc biệt có phần chỉ dẫn cách đi

Hình 1.26: Tích hợp bản đồ và chỉ dẫn cách đi của Traveloka

P Cung cấp nhiều thông tin chi tiết nhưng bố cục phân chia hợp lý, không rối mắt

Cụ thể, thông tin chi tiết của khách sạn được phân ra làm các phần: tổng quan,phòng, vị trí, tiện ích, chính sách, đánh giá Khi người dùng muốn xem thôngtin nào, chỉ cần chọn ở thang menu ngang, trang web sẽ cuộn đến thông tin đó

Hình 1.28: Phần chi tiết thông tin Tour của Traveloka

O Phần lịch trình tour vẫn chưa trực quan, đẹp mắt

Hình 1.29: Phần thông tin lịch trình Tour của Traveloka

O Không có phần giỏ hàng để người dùng thanh toán sau, chỉ có phần thông tinđặt chổ dành cho những dịch vụ đã đặt và thanh toán

1.2.2 Vntrip

Vntrip.vn là một trong những nền tảng cung cấp dịch vụ du lịch trực tuyến tại ViệtNam, cung cấp dịch vụ đặt phòng khách sạn, vé máy bay và các gói du lịch Vntripđảm bảo giá khách sạn được cung cấp là rẻ nhất Nền tảng này không chỉ hỗ trợ du lịchtrong nước mà còn cung cấp nhiều lựa chọn quốc tế, phục vụ nhu cầu đa dạng củakhách hàng

 Cẩm nang du lịch: Có những bài viết – blog về du lịch để người dùng thamkhảo

Hình 1.30: Trang chủ Vntrip

1.2.2.1 Ưu điểm

P Giao diện tối giản, đẹp mắt, dễ nhìn Cách thể hiện dễ hiểu cho người dùngmới Cỡ chữ, hình ảnh phù hợp

Hình 1.31: Giao diện tìm kiếm dịch vụ của Vntrip

P Có phần cẩm nang – blog hướng dẫn du lịch, người dùng có thể dễ dàng tìmkiếm những loại hình du lịch phù hợp với sở thích

P Có phần chuyển đổi tiền tệ và ngôn ngữ

P Thông tin tour chi tiết

Hình 1.33: Phần thông tin chi tiết Tour của Vntrip