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

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA KHOA HỌC VÀ KĨ THUẬT THÔNG TIN BÁO CÁO ĐỒ ÁN CUỐI KỲ MÔN THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG Đề tài: Website du lịch GVHD: ThS Tạ Thu Thủy Nhóm sinh viên thực hiện: Mai Trọng Dũng MSSV: 19521393 Lê Thị Phương Thanh MSSV: 19522231 Nguyễn Lê Thanh MSSV: 19522238 Nguyễn Hoàng Việt MSSV: 19522517 Lê Tuấn Anh MSSV: 18520451 ❀❀ Tp Hồ Chí Minh, 05/2021 ❀❀ IE106 – Thiết kế Giao diện Người dùng NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ……., ngày…… tháng……năm 2021 Người nhận xét (Ký tên ghi rõ họ tên) 2|Page IE106 – Thiết kế Giao diện Người dùng BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN: Bảng 1: Bảng phân công, đánh giá thành viên Họ tên MSSV Đánh giá Phân cơng - Tuần 1: - Tuần 1: Hồn thành - Tuần 2: Hoàn thành - Tuần 3: Hoàn thành + Soạn câu hỏi khảo sát, lập bảng khảo sát (google form) + Đưa giải pháp dựa vào yêu cầu khách hàng + Soạn báo cáo C1 - Tuần 2: + Viết báo cáo C2 + Thiết kế giao diện website thử nghiệm Mai Trọng Dũng Tuần 3: + Thiết kế giao diện 19521393 cho phần Trang chủ, Khám phá nhiều + Viết báo cáo + Thiết kế tồn trang thơng tin COVID-19, trang thông tin chi tiết Đặt xe máy đặt tơ, tour đặt phịng + Thiết kế bổ sung giao diện cho trang đăng nhập, đăng kí 3|Page IE106 – Thiết kế Giao diện Người dùng + Thiết kế giao diện cho trang địa điểm du lịch yêu thích “TP.HCM” - Tuần 4: + Tạo tương tác giao - Tuần 4: Hoàn thành - Tuần 5: Hoàn thành - Tuần 1: Hoàn thành - Tuần 2: Hồn thành diện cho phần trang chủ, thơng tin Covid19 + Viết báo cáo - Tuần 5: + Viết báo cáo đồ án + Đề xuất giải pháp cho trang web tương lai - Chỉnh sửa toàn lỗi mà nhóm gặp phải sau góp ý buổi báo cáo đồ án - Tuần 1: + Soạn câu hỏi khảo sát + Tìm ưu, nhược điểm website Vntrip + Đưa số giải Lê Thị Phương pháp dựa vào yêu cầu 19522231 khách hàng Thanh - Tuần 2: + Thiết kế giao diện website thử nghiệm 4|Page IE106 – Thiết kế Giao diện Người dùng + Thiết kế chi tiết giao diện tour, đặt phịng, đăng kí - Tuần 3: - Tuần 3: Hoàn thành - Tuần 4: Hoàn thành - Tuần 5: Hoàn thành - Tuần 1: Hoàn thành + Thiết kế giao diện, phủ màu cho phần Đặt phòng, khuyến + Thiết kế giao diện, phủ màu cho phần giỏ hàng, di chuyển (thuê xe , đặt vé), viết tour - Tuần 4: + Tạo tương tác (prototype) cho trang giỏ hàng , tạo tương tác chọn mua hàng ( di chuyển , tour ) - Tuần 5: + Tìm ưu điểm, đưa phương pháp phát triển tương lai - Tuần 1: + Soạn câu hỏi khảo sát + Tìm ưu, nhược điểm Nguyễn Lê Thanh 19522238 website Klook + Soạn lời mở đầu cho báo cáo + Đưa số giải pháp dựa vào yêu cầu khách hàng 5|Page IE106 – Thiết kế Giao diện Người dùng - Tuần 2: - Tuần 2: Hoàn - Tuần 3: Hoàn thành + Thiết kế giao diện website chi tiết: Trang chủ, khuyến mãi, di chuyển, khám phá nhiều - Tuần 3: + Thiết kế giao diện cho phần trang chủ, khám phá nhiều + Phối màu + Thiết kế phần gợi ý ẩm thực - Tuần 4: - Tuần 4: Hoàn thành - Tuần 5: Hoàn thành + Thiết kế slide thuyết trình cho đồ án cuối kì - Tuần 5: + Đánh giá ưu điểm cho trang web - Tuần 1: - Tuần 1: Hoàn thành - Tuần 2: Hoàn thành - Tuần 3: Hoàn thành + Soạn câu hỏi khảo sát + Tìm ưu, nhược điểm website travel Nguyễn Hoàng Việt + Đưa số giải 19522517 pháp dựa vào yêu cầu khách hàng - Tuần 2: + Thiết kế giao diện website thử nghiệm - Tuần 3: 6|Page IE106 – Thiết kế Giao diện Người dùng + Thiết kế giao diện, phủ màu cho phần Tour, đăng nhập, đăng kí - - Tuần 4: Hồn thành Tuần 4: + Tạo tương tác (prototype) cho trang “di chuyển”, “tour”, “đặt phịng” - blog ăn Tuần 5: Hoàn thành vùng miền - Tuần 5: + Tìm nhược điểm, đưa phương án khắc phục, hướng phát triển tương lai - Tuần 1: - Tuần 1: + Tìm ưu, nhược điểm + Hồn thành website chudu24 - Tuần 2: + Thiết kế giao diện - Tuần 2: + Hoàn thành website thử nghiệm Lê Tuấn - Tuần 3: - Tuần 3: + Thiết kế giao diện: Anh di chuyển + Hoàn thành + Thiết kế giao diện: thông tin review - Tuần 4: địa điểm u + Hồn thành thích - Tuần 4: - Tuần 5: 7|Page IE106 – Thiết kế Giao diện Người dùng + Tạo tương tác giao + Hoàn thành diện cho phần Tour, Khám phá nhiều - Tuần 5: + Đánh giá khuyết điểm cho trang web 8|Page IE106 – Thiết kế Giao diện Người dùng LỜI MỞ ĐẦU Du lịch 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 Dự án thiết kế giao diện website du lịch nhóm hoàn thiện thời gian giới hạn khả hạn chế thành viên nhóm nên 9|Page IE106 – Thiết kế Giao diện Người dùng chắn khơng tránh khỏi nhiều thiếu sót Nhóm mong nhận ý kiến đóng góp quý báu từ Cô bạn để sửa chữa, tiếp thu thêm kinh nghiệm tương lai Sau đây, nhóm chúng tơi trình bày phần mềm, quy trình thiết kế giao diện giao diện hoàn chỉnh qua 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 hồn chỉnh • Chương 4: Tương tác giao diện • Chương 5: Kết luận 10 | P a g e IE106 – Thiết kế Giao diện Người dùng Hình 3.36: Giao diện thông tin COVID (3) 70 | P a g e IE106 – Thiết kế Giao diện Người dùng Hình 3.37: Giao diện thông tin COVID (4) 71 | P a g e IE106 – Thiết kế Giao diện Người dùng Hình 3.38: Giao diện giỏ hàng trống Hình 3.39: Giao diện Giỏ hàng 72 | P a g e IE106 – Thiết kế Giao diện Người dùng Hình 3.40: Giao diện Giỏ hàng Hình 3.41: Giao diện giỏ hàng điền thông tin đặt hàng 73 | P a g e IE106 – Thiết kế Giao diện Người dùng Hình 3.42: Giao diện điền thông tin đặt hàng Hình 3.43: Giao diện người dùng đăng nhập tài khoản Hình 3.44: Giao diện tài khoản người dùng 74 | P a g e IE106 – Thiết kế Giao diện Người dùng Chương 4: TƯƠNG TÁC GIAO DIỆN Tương tác giao diện Sau thời gian tìm hiểu thảo luận nhóm chúng em chọn Figma làm công cụ để thiết kế giao diện, sau vài lý lại chọn Figma: • Thiết kế thời gian thực : có nghĩa nhiều người cùng vẽ project Dĩ nhiên người máy tính join vào project Figma Cách tạo Team share design nói phần sau • Data lưu hệ thống máy chủ Figma : làm việc khắp nơi, máy tính khác mà khơng cần mang file design theo Dĩ nhiên tài khoản nhìn thấy project tạo • Thiết kế dạng Vector : điều mà tools design đại làm, thực xong export nhiều kiểu file SVG, PNG, JPG….ở nhiều kích thuước khác mà khơng bị vỡ Photoshop • Có thể quản lí nhiều artboards lúc : Ở PTS thiết kế khung hình , cịn Figma Sketch thiết kế nhiều hình khung hình Tức bạn thiết kế nhiều layout cho sản phẩm khung hình • Có chế quản lí comment nhiều điểm : Khi có ý kiến với số điểm hình layout, cần click vào comments, thành viên khác đọc phản hồi… • Quan trọng : nhanh nhẹ, thông minh xử lí đem lại tốc độ thiết kế tốt làm việc với Figma… 75 | P a g e IE106 – Thiết kế Giao diện Người dùng Sau liên kết tương tác giao diện tất trang Website Hình 4.1: Hình ảnh tổng thể tương tác giao diện Tạo tương tác trang Trang chủ Khi dùng prototype để nối trang riêng biệt với nhau, tạo liên kết giống trang web thực tế trang trang chủ kết nối với tất trang khác trang web Khi bấm vào Logo, trở trang chủ ban đầu 76 | P a g e IE106 – Thiết kế Giao diện Người dùng Hình 4.2: Tạo tương tác cho Trang chủ Tạo tương tác trang Khuyến Hình 4.3: Tạo tương tác cho trang Khuyến Tạo tương tác trang Di chuyển (Đặt xe – Đặt vé) Hình 4.4: Tương tác trang Di chuyển 77 | P a g e IE106 – Thiết kế Giao diện Người dùng Tạo tương tác cho trang Đặt phòng Hình 4.5: Tạo tương tác cho trang Đặt phòng Tạo tương tác cho trang Tour Hình 4.6: Tương tác giao diện trang Tour Tạo tương tác giao diện cho trang Khám phá nhiều Hình 4.7: Tương tác trang Khám phá nhiều 78 | P a g e IE106 – Thiết kế Giao diện Người dùng Tạo tương tác cho trang Gợi ý Hình 4.8: Tương tác giao diện trang Gợi ý Tạo tương tác trang thông tin COVID-19 Khi dùng prototype để nối trang riêng biệt với nhau, tạo liên kết giống trang web thực tế Trang thông tin Covid-19 kết nối đến tất trang Web để cảnh báo, đưa thơng tin cho người tình hình dịch bệnh Hình 4.9: Tương tác giao diện trang thông tin Covid-19 79 | P a g e IE106 – Thiết kế Giao diện Người dùng Tạo tương tác trang Đăng Nhập/ Đăng kí với Trang chủ Hình 4.10: Tương tác giao diện Đăng nhập - Đăng kí Tạo tương tác cho trang Giỏ hàng Hình 4.11: Tương tác giao diện cho Giỏ hàng 80 | P a g e IE106 – Thiết kế Giao diện Người dùng Tạo tương tác cho trang Thông tin điểm đến Hình 4.12: Tạo tương tác giao diện cho Thông tin điểm đến Tạo tương tác cho trang Review ẩm thực vùng miền Hình 4.13: Tương tác giao diện cho Review ẩm thực Link thực nghiệm ứng dụng (không cần tài khoản): https://www.figma.com/file/pBwoxoIdN4PLK11cctqI3T/Website-Dul%E1%BB%8Bch?node-id=0%3A1 81 | P a g e IE106 – Thiết kế Giao diện Người dùng Chương 5: KẾT LUẬN Qua q trình thực đồ án mơn học, nhóm chúng em rút ưu điểm, khuyết điểm hướng phát triển cho website tương lai sau: Ưu điểm • Có đầy đủ yêu cầu đưa trang web du lịch • Cập nhật tình hình dịch bệnh liên tục web để người dùng dễ theo dõi • Cập nhật nhiều khuyến ưu đãi cao để người dùng dễ dàng lựa chọn • Có nhiều loại ngơn ngữ, tiền tệ • Có viết review, đánh giá để người dùng tham khảo • Cập nhật địa điểm ăn uống tiếng để người tìm hiểu • Bổ sung nhiều tính 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 khuyến du lịch khủng • Địa điểm du lịch, khách sạn hay khu nghỉ dưỡng đồ sộ, với giá từ trung bình đến cao phù hợp cho tầng lớp • Có review địa điểm chân thực, đánh giá người đi, giúp người xem có nhìn khách quan • Cập nhập địa điểm ăn uống liên tục trend cho người sành ăn • Đa ngơn ngữ phù hợp cho người ngoại quốc Nhược điểm • Vẫn chưa có liên kết Youtuber Vlogger du lịch • Khơng có nhiều phương thức tốn • Chưa phát triển ứng dụng điện thoại Hướng phát triển • Mở rộng thêm tour du lịch nước • Phát triển thêm nhiều ngôn ngữ • Nên gắn voucher khuyến mục có liên quan • Cập nhật, bổ sung thêm phương thức toán khác • Phát triển chế độ Dark mode, light mode • Phát triển ứng dụng di dộng để khách hàng thuận tiện theo dõi 82 | P a g e IE106 – Thiết kế Giao diện Người dùng • Giữ lại menu di chuyển xuống phần trang để tạo thuận tiện cho người dùng Qua q trình thực đồ án, nhóm chúng em biết vận dụng kiến thức thiết kế giao diện như: phối màu sắc, phân chia bố cục hợp lý, áp dụng quy tắc thiết kế,…và có khả đánh giá, nhận xét thiết kế giao diện người dùng trang web hay ứng dụng Từ áp dụng kiến thức cho môn học sau công việc tương lai Nhóm chúng em xin trân trọng cảm ơn hướng dẫn, đóng góp, nhận xét tận tình Ths Tạ Thu Thủy trình thực đồ án Tuy nhiên, kinh nghiệm trình độ kiến thức cịn hạn chế, nên khơng tránh khỏi thiếu sót q trình thực đồ án Chúng em mong nhận đánh giá, góp ý từ phía Giảng viên bạn sinh viên để đồ án hồn thiện hơn, nhóm chúng em rút nhiều học, kinh nghiệm quý báu công việc tương lai 83 | P a g e IE106 – Thiết kế Giao diện Người dùng TÀI LIỆU THAM KHẢO Website du lịch Klook Địa chỉ: https://www.klook.com/vi/ [Truy cập lần cuối 30/06/2021] Website du lịch Chudu24 Địa chỉ: https://www.chudu24.com/ [Truy cập lần cuối 20/06/2021] Website du lịch Travel Địa chỉ: https://travel.com.vn/ [Truy cập lần cuối 20/06/2021] Website du lịch Vntrip Địa chỉ: https://www.vntrip.vn/ [Truy cập lần cuối 17/06/2021] Lương Hạnh, “Khảo sát trải nghiệm du lịch người Việt: Cơ hội cho công ty lữ hành?”[Trực tuyến] Địa chỉ: https://marketingai.admicro.vn/khao-sat-ve-trainghiem-du-lich-cua-nguoi-viet-co-hoi-nao-cho-cac-cong-ty-luhanh/?fbclid=IwAR29LIPdsvm53R_c2EdPwXPvoXjTJA2OmNOzIk3lTZRO6tX0rP51K_3KZw [Truy cập lần cuối 01/07/2021] Figma, Youtube Chanel Địa chỉ: https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA [Truy cập lần cuối 01/07/2021] Mr.Đại, “Hướng dẫn học FIGMA 2020 thiết kế UX/UI cho người bắt đầu Full TOÀN TẬP” [Trực tuyến] Địa chỉ: https://www.youtube.com/playlist?list=PLH88ngaKjRaTN9qhlrogRZaZqXMgY Kgji [Truy cập lần cuối 01/07/2021] 84 | P a g e ... Giao diện Người dùng Hình 2.1.6: Yêu cầu người dùng website phần "Tour" 39 | P a g e IE106 – Thiết kế Giao diện Người dùng Chương 3: GIAO DIỆN WEBSITE HOÀN CHỈNH Giao diện website Du lịch Sau... Thiết kế Giao diện Người dùng Hình 3.10: Giao diện Thuê xe ô tô 48 | P a g e IE106 – Thiết kế Giao diện Người dùng Hình 3.11: Giao diện thông tin đặt xe ô tô 49 | P a g e IE106 – Thiết kế Giao. .. báo cáo C1 - Tuần 2: + Viết báo cáo C2 + Thiết kế giao diện website thử nghiệm Mai Trọng Dũng Tuần 3: + Thiết kế giao diện 19521393 cho phần Trang chủ, Khám phá nhiều + Viết báo cáo + Thiết kế