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

Du lịch mệnh danh “ngành cơng nghiệp khơng khói”, đem đến lợi nhuận cao việc làm hàng năm cho nhiều doanh nghiệp cá nhân Tuy tác động đại dịch COVID-19, ngành du lịch cần có định hướng cho phù hợp với tình hình chung, đồng thời khai thác điểm đến lạ, đòi hỏi doanh nghiệp muốn trì phát triển dịch vụ phải có cách tiếp cận người tiêu dùng hợp lý, đắn hiệu Thông qua khảo sát thực tế thực với đối tượng chủ yếu người trẻ, đa số sinh viên người lao động có kinh nghiệm năm, nhóm thu ý kiến nhận xét nghiên cứu tìm kiếm giải pháp Đây người chưa có thu nhập thu nhập cịn thấp, lại mong muốn chơi để có nhiều trải nghiệm thư giãn sau học tập làm việc Do họ có nhu cầu phương pháp để lựa chọn lên kế hoạch du lịch cho thật kinh tế, có nhiều thơng tin nơi dự định ghé thăm hỗ trợ để tối ưu chi phí thời gian cho chuyến đi, thông qua ưu đãi giá vé phương tiện lại, rút ngắn thời gian di chuyển chờ đợi 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 thiết kế giao diện phù hợp với người sử dụng tảng website Giao diện thiết kế với chức hỗ trợ người dùng tất bước suốt trình lựa chọn điểm đến du lịch, đặt vé dịch vụ sau hành trình Với môi trường ứng dụng thân thiện, dựa trải nghiệm thực tế, kết nối với nhiều doanh nghiệp hoạt động lĩnh vực đề xuất lựa chọn có lợi cho người sử dụng, website hy vọng gặt hái thành công thông qua lượt sử dụng ứng dụng, số người đăng kí lựa chọn gói dịch vụ, giao dịch thành cơng người dùng doanh nghiệp, số lượng review tích cực thu từ khách hàng trước

KHẢO SÁT, PHÂN TÍCH, THAM KHẢO

Khảo sát yêu cầu

Chúng tôi đã tiến hành khảo sát người dùng cho một website du lịch và so sánh kết quả với khảo sát từ một trang khác (Marketing AI) nhằm đảm bảo có được đánh giá khách quan hơn.

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

Kết quả khảo sát từ trang đánh giá du lịch Marketing AI cho thấy trải nghiệm du lịch của người Việt đang có nhiều cơ hội phát triển cho các công ty lữ hành Nghiên cứu chỉ ra rằng người tiêu dùng ngày càng chú trọng đến chất lượng dịch vụ và trải nghiệm cá nhân hóa trong các chuyến đi Điều này mở ra tiềm năng lớn cho các doanh nghiệp trong ngành du lịch để cải thiện dịch vụ và đáp ứng nhu cầu ngày càng cao của khách hàng.

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

Hì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 khảo sát, 67,4% người Việt Nam có xu hướng đi du lịch cùng gia đình Kết quả này cũng được xác nhận bởi khảo sát của Quandme, cho thấy sự tương đồng trong xu hướng du lịch của người Việt.

Hì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

Hì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%)

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

Nhu cầu du lịch của người Việt Nam đa dạng ở nhiều độ tuổi, chủ yếu tập trung vào các chuyến đi trong nước Theo dữ liệu từ trang Marketing AI, 89% người Việt chọn du lịch nội địa, trong khi chỉ 11% hướng tới du lịch nước ngoài.

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

Người Việt Nam có xu hướng du lịch tự túc cao hơn so với du lịch theo tour, với tỷ lệ tự túc đạt 87% so với 22% cho hình thức tour, theo thống kê từ trang Marketing AI.

Hì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%

• Có thể làm mọi thứ theo ý mình: 31%

• Có thể đi cùng bạn bè: 6%

Khi khảo sát ý kiến khách hàng về việc tham khảo các trang web du lịch trước khi lập kế hoạch, 78,1% người tham gia cho biết họ có thực hiện điều này.

Hì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

Khách hàng thường mong muốn nhận thông tin về các chương trình khuyến mãi như giá vé tàu xe, dịch vụ ăn uống, địa điểm du lịch được yêu thích, đánh giá cao, cũng như dịch vụ đặt phòng khách sạn và phương tiện du lịch khi sử dụng trang web du lịch.

Hì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%

Hì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%

Hì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

Kết quả khảo sát cho thấy, phương tiện di chuyển phổ biến nhất của khách hàng là xe máy, chiếm khoảng 61%, theo sau là máy bay với tỷ lệ 50,7%.

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

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

Khách hàng thường lựa chọn du lịch cùng gia đình hoặc bạn bè với số lượng khoảng 5 người, theo kết quả khảo sát của chúng tôi Dựa trên thông tin này, chúng tôi sẽ đề xuất các gói dịch vụ phù hợp với nhu cầu của từng nhóm khách hàng, bao gồm dịch vụ đặt phòng đơn/đôi, giá vé phương tiện di chuyển và dịch vụ ăn uống.

Du lịch tự túc ngày càng trở nên phổ biến hơn so với du lịch theo tour, bởi du khách thích tự lập kế hoạch cho chuyến đi của mình mà không bị ràng buộc bởi lịch trình của dịch vụ tour Dựa trên lượt đánh giá từ khách hàng đã trải nghiệm, chúng tôi sẽ gợi ý những địa điểm du lịch được yêu thích nhất.

- Kết hợp với các Youtuber chuyên review về du lịch như: Khoai Lang Thang, Chan

La Cà và Fahoka Xê dịch cam kết mang đến những video review chân thực nhất về trải nghiệm trong chuyến đi, giúp khách hàng an tâm khi lựa chọn dịch vụ của chúng tôi Bên cạnh đó, khách hàng cũng có thể tham khảo các bài đánh giá từ những người đã từng sử dụng dịch vụ để có thêm thông tin hữu ích.

Chúng tôi sẽ hợp tác với các hãng vận tải như máy bay, tàu, ô tô, cùng với khách sạn và nhà hàng để cung cấp các chương trình khuyến mãi hấp dẫn, bao gồm việc đặt vé, đặt phòng và dịch vụ ăn uống.

Khách hàng thường ưa chuộng xe máy làm phương tiện di chuyển trong các chuyến du lịch nhờ vào tính tiện lợi và chi phí hợp lý Do đó, chúng tôi quyết định mở rộng dịch vụ cho thuê xe máy kèm theo các ưu đãi hấp dẫn, nhằm mang đến cho khách hàng một trải nghiệm tuyệt vời trong hành trình của họ.

Khảo sát cho thấy khách hàng thường chọn du lịch vào các ngày lễ và kỳ nghỉ, dẫn đến sự gia tăng lượng khách và chi phí Tuy nhiên, với chính sách bình ổn giá và chương trình ưu đãi tích điểm dành cho khách hàng thân thiết, khách hàng sẽ không cần lo lắng về vấn đề chi phí trong những thời điểm cao điểm này.

Nhiều khách hàng hiện nay đặc biệt quan tâm đến vấn đề vệ sinh an toàn thực phẩm Do đó, bên cạnh việc hợp tác với các nhà hàng uy tín, chúng tôi còn giới thiệu những quán ăn hè phố đã được Bộ Y tế chứng nhận về vệ sinh an toàn thực phẩm và nhận được đánh giá tích cực từ thực khách và du khách trong các bài review.

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

Website của Klook.com

Hình 1.12: Hình ảnh trang web của Klook.com ƯU ĐIỂM

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

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ụ,…

Phần header của trang để cỡ chữ hơi nhỏ, không cân xứng với trang.

Website của Vntrip.vn

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

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

Khi người dùng chọn mục cẩm nang trên trang web, một tab mới sẽ được mở ra, giúp họ dễ dàng tìm kiếm thông tin về khách sạn và chuyến bay Tab này cung cấp các bài viết tham khảo liên quan đến địa điểm, tạo điều kiện thuận lợi cho việc lựa chọn của người dùng.

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

Các mục giới thiệu về combo khách sạn, máy bay và các hot deal lớn gây cảm giác rối mắt Khi kéo xuống, người dùng chỉ thấy một nửa các mục ở trên, dẫn đến khó khăn trong việc so sánh và lựa chọn giữa chúng.

Phần hỗ trợ nếu kéo xuống cuối trang sẽ che đi các trang thông tin ( Facebook,

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

Website của Chudu24.com

Hình 1.1: Hình ảnh trang web của Chudu24.com ƯU ĐIỂM

Font chữ dễ nhìn, có những mục dùng chữ in hoa

Thiết kế kiểu lưới, dễ sử 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

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

Website của Travel.com.vn

Hình 1.14: Hình ảnh trang web của travel.com.vn ƯU ĐIỂM

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

Màu sắc tương phản, dễ 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

Có một phần có chức năng tương tự như thanh menu, nhưng được đặt ở vị trí khó nhìn và có màu sắc không nổi bật, khiến người dùng có thể bỏ qua Để sử dụng phần này, người dùng cần nhấp chuột để mở và hiển thị nội dung.

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

Khi đặt tour, khách hàng cần nhập chính xác số lượng người tham gia, vì không thể thêm khách vào danh sách sau khi đã đặt Ngoài ra, độ tuổi của khách cũng không thể điều chỉnh trong quá trình đặt tour.

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 người dùng chọn các mục, trang sẽ hiển thị hiệu ứng chuyển động và đưa họ đến vị trí cố định Tương tự, khi nhấp ra ngoài để tắt, hiệu ứng cũng sẽ xuất hiện.

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

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:

- 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

Hiện nay, du khách cần lưu ý về tình hình dịch COVID-19 tại các vùng dịch để đảm bảo an toàn sức khỏe cho bản thân Việc cảnh báo này không chỉ giúp du khách có những thông tin cần thiết mà còn hỗ trợ chính phủ trong việc kiểm soát dịch bệnh hiệu quả Chúng tôi cũng sẽ giải đáp một số câu hỏi thường gặp từ khách hàng để giúp họ có sự chuẩn bị tốt nhất trước khi đi du lịch.

- 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 cần phải dễ sử dụng và tối ưu hóa cho người dùng, đồng thời phải có phần hỗ trợ để giải đáp các thắc mắc, bao gồm cả khả năng gọi điện và cung cấp câu trả lời cho những câu hỏi phổ biến nhất của khách hà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 nhiều trang web khác, nhóm chúng em đã rút ra những nhận xét và kinh nghiệm quý báu Chúng em đã phác thảo bản thử nghiệm thiết kế trang web theo dạng lưới, với các nút được bo tròn, sử dụng font chữ dễ đọc để đảm bảo tính dễ sử dụng cho người truy cập.

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

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

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

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

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

Hì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

Hình 2.2.1: Yêu cầu của khách hà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:

Hình 2.2.1: Bản phác thảo website trang chủ

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

Hì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"

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

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

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

Giao diện website Du lịch

Sau khi hoàn thiện bản vẽ sơ bộ cho trang web du lịch, nhóm chúng em đã nghiên cứu một số trang web khác để cải thiện giao diện và màu sắc cho thiết kế của mình Dưới đây là giao diện mẫu của website.

Hì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:

Hình 3.2: Sơ đồ minh họa cho trang web

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

Hình 3.3: Giao diện phần trang chủ

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

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

Hình 3.6: Bài viết review Vũng Tàu

Hình 3.7: Giao diện khuyến mãi

Hình 3.8: Giao diện cho thuê xe máy

47 | P a g e Bài viết trong phần Di chuyển (Thuê xe)

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

Hình 3.10: Giao diện Thuê xe ô tô

Hình 3.11: Giao diện thông tin đặt xe ô tô

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

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

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

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

Hình 3.16: Giao diện Đặt phòng

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

Hình 3.18: Giao diện Tour

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

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

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

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

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

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

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

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

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

Hình 3.28: Giao diện chọn ngôn ngữ cho trang web

Hình 3.29: Giao diện tiền tệ cho trang web

Hình 3.30: Giao diện phần đăng nhập

Hình 3.31: Giao diện phần Đăng kí

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

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

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

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

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

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

Hình 3.38: Giao diện giỏ hàng trống

Hình 3.39: Giao diện Giỏ hàng

Hình 3.40: Giao diện Giỏ hàng

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

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

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

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

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

Sau một thời gian tìm hiểu và thảo luận, nhóm chúng em đã quyết định chọn Figma làm công cụ thiết kế giao diện Dưới đây là một số lý do chính để lựa chọn Figma:

Thiết kế thời gian thực cho phép nhiều người cùng vẽ trên một dự án, với mỗi người sử dụng một máy tính và cùng tham gia vào dự án trên Figma Tôi sẽ hướng dẫn cách tạo Team hoặc chia sẻ thiết kế ở phần sau.

Dữ liệu được lưu trữ trên hệ thống máy chủ của Figma, cho phép người dùng làm việc từ bất kỳ đâu và trên nhiều máy tính khác nhau mà không cần mang theo file thiết kế Chỉ những tài khoản của chúng ta mới có quyền truy cập vào các dự án mà mình đã tạo.

Thiết kế dạng Vector đang trở thành xu hướng trong các công cụ thiết kế hiện đại, cho phép người dùng xuất ra nhiều định dạng file như SVG, PNG, JPG với các kích thước khác nhau mà không lo bị vỡ hình, điều mà thường gặp khi sử dụng Photoshop.

Figma và Sketch cho phép người dùng quản lý nhiều artboards cùng một lúc, khác với Photoshop chỉ hỗ trợ thiết kế trên một khung hình duy nhất Điều này giúp bạn dễ dàng tạo ra nhiều layout cho sản phẩm trong cùng một không gian làm việc, tối ưu hóa quy trình thiết kế.

Hệ thống quản lý bình luận cho phép người dùng dễ dàng tương tác với các điểm cụ thể trên màn hình layout; chỉ cần nhấp vào vị trí cần ý kiến, người dùng có thể để lại bình luận và các thành viên khác sẽ có khả năng đọc và phản hồi ý kiến đó.

• 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…

Sau đây là liên kết tương tác giao diện của tất cả các trang trong Website

Hình 4.1: Hì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

Hì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

Hì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é)

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

Tạo tương tác cho trang Đặt phòng

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

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

Hì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

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

Tạo tương tác cho trang Gợi ý

Hì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

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

Tạo tương tác giữa trang Đăng Nhập/ Đăng kí với Trang chủ

Hì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

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

Tạo tương tác cho trang Thông tin điểm đến

Hì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

Hì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

Trong quá trình thực hiện đồ án môn học, nhóm chúng em đã nhận diện được những ưu điểm, khuyết điểm và hướng phát triển cho website trong tương lai Những ưu điểm này sẽ là cơ sở để chúng em cải thiện và nâng cao chất lượng website, đồng thời khắc phục các khuyết điểm đã phát hiện.

• 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

• 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

• 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

• 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

Trong quá trình thực hiện đồ án, nhóm chúng em đã áp dụng kiến thức thiết kế giao diện, bao gồm phối màu sắc, phân chia bố cục hợp lý và áp dụng các quy tắc thiết kế Chúng em cũng đã phát triển khả năng đánh giá và nhận xét thiết kế giao diện người dùng của trang web và ứng dụng Những kiến thức này sẽ giúp ích cho chúng em trong các môn học tiếp theo cũng như trong công việc tương lai.

TƯƠNG TÁC GIAO DIỆN

Sau một thời gian thảo luận và tìm hiểu, nhóm chúng em đã quyết định chọn Figma làm công cụ thiết kế giao diện Dưới đây là một số lý do chính để lựa chọn Figma:

Thiết kế thời gian thực cho phép nhiều người cùng lúc tham gia vẽ trên một dự án, với mỗi người sử dụng một máy tính riêng và cùng kết nối vào dự án trên Figma Cách tạo nhóm hoặc chia sẻ thiết kế sẽ được trình bày ở phần sau.

Dữ liệu được lưu trữ trên hệ thống máy chủ của Figma, cho phép người dùng làm việc từ bất kỳ đâu và trên nhiều máy tính khác nhau mà không cần mang theo file thiết kế Chỉ có tài khoản cá nhân mới có quyền truy cập vào các dự án mà mình đã tạo.

Thiết kế dạng Vector là xu hướng hiện đại trong các công cụ thiết kế, cho phép xuất ra nhiều định dạng file như SVG, PNG, JPG với nhiều kích thước khác nhau mà không bị vỡ hình, khác với Photoshop.

Figma và Sketch cho phép người dùng quản lý nhiều artboards cùng một lúc, trong khi Photoshop chỉ hỗ trợ thiết kế trên một khung hình duy nhất Điều này có nghĩa là bạn có thể tạo ra nhiều layout cho sản phẩm trong cùng một không gian thiết kế, giúp tiết kiệm thời gian và nâng cao hiệu quả làm việc.

Hệ thống quản lý bình luận cho phép người dùng dễ dàng tương tác với các điểm trên màn hình layout Chỉ cần nhấp vào vị trí cần bình luận, người dùng có thể gửi ý kiến của mình, và các thành viên khác có thể đọc và phản hồi lại.