CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1. Giới thiệu đề tài 1. Mô tả đề tài - Đề tài: Thiết kế giao diện và trải nghiệm người dùng ứng dụng bán đồ ăn cho nhà hàng Sen Vàng - Ngành: Công nghệ thông tin - Lĩnh vực: Thương mại điện tử - Chuyên ngành: Công nghệ đa phương tiện - Sinh viên thực hiện: Nguyễn Thị Ngọc Minh – 2010A05 - Đề cương bao gồm những phần: Giới thiệu đề tài Các đề tài có liên quan Nội dung đề tài dự định đạt được Kế hoạch thực hiện Phân công công việc Tài liệu tham khảo Chữ ký - Chủ đề ứng dụng: Kinh doanh món ăn chay - Phương châm hoạt động: Đơn giản hóa và tối ưu hóa trải nghiệm ẩm thực của bạn, đem đến cho bạn những bữa ăn dễ dàng, chất lượng, đáp ứng đúng nhu cầu của bạn với mức giá phù hợp 1. Lý do chọn đề tài: - Hiểu rõ được những giá trị cũng như tầm quan trọng mà dịch vụ mua sắm online mạng lại, đề tài em thực hiện nhằm phục vụ nhu cầu người dùng trong lĩnh vực đặt đồ ăn trực tuyến.
- Ứng dụng bán đồ ăn không chỉ là một nền tảng thương mại điện tử, mà còn là cầu nối giữa người tiêu dùng và thế giới ẩm thực. Với mục tiêu tối ưu hóa trải nghiệm người dùng, chúng ta sẽ tập trung vào việc thiết kế giao diện thân thiện, dễ sử dụng và hiệu quả, từ việc tìm kiếm sản phẩm, chọn món, đặt hàng, đến quá trình thanh toán và theo dõi đơn hàng. - Nhận thức về thực trạng người tiêu dùng ngày càng chú trong đến trải nghiệm mua sắm trực tuyến, chúng ta sẽ xây dựng ứng dụng với giao diện thú vị, hấp dẫn và đồng thời tối ưu hóa quy trình đặt hàng, nhằm tạo ra trải nghiệm mua sắm ẩm thực trực tuyến đặc sắc. Mục tiêu đề tài đặt ra: - Ứng dụng đơn giản, dễ dùng với các độ tuổi - Đưa các món ăn chay tới gần khách hàng hơn - Phân loại các loại đồ ăn rõ ràng - Thông tin các món ăn, chương trình khuyến mãi hiển thị rõ ràng chi tiết cho khách hàng tham khảo lựa chọn - Các chức năng dễ dùng, phù hợp với các đối tượng ở từng độ tuổi khác nhau 1.
Các đề tài liên quan 1. Đề tài 1: Tên đề tài: Thiết kế giao diện và trải nghiệm người dùng cho ứng dụng tra cứu xe khách từ Hà Nội đi các tỉnh miền Bắc ( ĐATN đại học, Khoa CNTT, Trường ĐH Mở HN, Hà Nội, 2020)[1] Người thực hiện: Lê Thị Dung a. Đề tài đã đạt được - Xây dựng được giao diện cơ bản của ứng dụng - Thiết kế được các chức năng cơ bản của ứng dụng tra cứu xe khách - Cơ bản đã áp dụng được nguyên tắc cơ bản trong thiết kế b. Đề tài chưa đạt được - Về mặt giao diện + Hình ảnh khuyến mãi, các icon để to gây cảm giác cho mắt người dùng bị phóng đại + Chưa thống nhất căn lề tại trang chi tiết đặt vé gây khó nhìn - Về mặt trải nghiệm + Chưa có các chức năng bắt lỗi khi người dùng đăng nhập sai + Tại trang chủ không có hệ thống điều hướng + Khi người dùng muốn thanh toán đặt vé thì không có chức năng thông tin của người dùng + Khi có chức năng thông tin khuyến mãi nhưng khi người dùng đặt vé lại không có chức năng này tại trang đặt vé.
Đề tài 2: Tên đề tài: “Thiết kế giao diện và trải nghiệm người dùng cho app bán cà phê Starbucks.” - ĐATN đại học, Khoa CNTT, ĐH Mở HN, Hà Nội, 2021. [2] Người thực hiện: Nguyễn Trung Kiên - Những điểm đạt được: ● Hoàn thành việc khảo sát và phân tích thiết kế giao diện và trải nghiệm người dùng cho website ● Hoàn thiện sản phẩm 100% so với bản thiết kế ● Áp dụng các chuẩn về thiết kế UI/UX vào việc đánh giá sản phẩm cuối, từ đó sửa lại những phần như: căn gióng thiết kế theo grid, responsive cho trang web. - Những điểm chưa đạt được: ● Chưa xây dựng được giao diện mobile, responsive chưa tốt. ● Khảo sát còn sơ sài, chưa áp dụng được nhiều cho thiết kế.
● Tương tác giữa người dùng và hệ thống còn khá ít. Đề tài 3 Tên đề tài: "Thiết kế giao diện và trải nghiệm người dùng cho app dạy học lập trình trực tuyến Rocket Academy." ĐATN đại học, Khoa CNTT, ĐH Mở HN, Hà Nội, 2022 [3] Người thực hiện: Nguyễn Tiến Anh - Những điểm đạt được: ● Hoàn thành việc khảo sát và phân tích thiết kế giao diện và trải nghiệm người dùng cho ứng dụng Rocket Academy. ● Lý thuyết: hoàn thành nghiên cứu lý thuyết UI/UX, các lý thuyết về thiết kế, màu sắc, bố cục. thực hiện khảo sát và phân tích kết quả khảo sát đầy đủ.
● Sản phẩm: hoàn thành sản phẩm cuối, đáp ứng những tiêu chí đặt ra về thẩm mỹ, tiện dụng cho người dùng theo những điều nghiên cứu. 4 ● Hoàn thành việc tạo prototype cho ứng dụng. - Những điểm chưa đạt được: ● Có nhiều khoảng trắng ở các trang con gây mất cân bằng ● Chưa có chức năng bắt lỗi khi người dùng đăng nhập sai ● Các trang quản lý giảng viên, quản lý khóa học, quản lý danh mục chưa đảm bảo tính cân bằng 1. Nội dung đề tài dự định đạt được 1.
Hướng phát triển của đề tài - Xây dựng được giao diện và trải nghiệm người dùng cho ứng dụng theo đúng như thiết kế - Áp dụng các quy tắc thiết kế để đánh giá sản phẩm cuối sao cho hoàn thiện nhất - Nắm được nhu cầu, mong muốn của người sử dụng sản phẩm với vai trò là người thiết kế, xây dựng giao diện sao cho đem lại trải nghiệm người dùng tốt nhất, phù hợp với xu hướng hiện nay. - Hoàn thiện các giao diện của ứng dụng 1. Đề tài giải quyết các vấn đề 1. Nghiên cứu: - Giao diện: + Giao diện đơn giản.
dễ sử dụng. thân thiện với người dùng + Nội dung rõ ràng, thông tin chính xác, bố cục hợp lý. + Thiết kế điều hướng dễ dàng - Trải nghiệm: + Khi mới vào một ứng dụng người dùng có xu hướng không thích đọc nội dung hay hướng dẫn + Quá nhiều sự lựa chọn sẽ làm người dùng cảm thấy hoang mang, không an toàn + Người dùng có xu hướng chọn nút “ok” 1. Thiết kế - Giao diện đạt được các yêu cầu: + Giao diện ứng dụng thể hiện tính công nghệ, thiết lập giao diện có thể dễ dàng truy cập + Đạt được sự thống nhất về thiết kế: tone màu, font, layout,… trong thiết kế 5 - Trải nghiệm người dùng đạt được các yêu cầu: + Hiển thị thông tin mặt hàng chính xác, rõ ràng, cho tiết để khách hàng dễ dàng lựa chọn sản phẩm phù hợp + Tra cứu tìm kiếm về các sản phẩm theo tên, thoe mặt hàng, giá cả,… - Chức năng: Đối với người dùng + Cho phép người dùng tạo tài khoản, đổi mật khẩu, lấy lại mật khẩu + Xem và chỉnh sửa thông tin tài khoản + Đăng ký, đăng nhập, đăng xuất + Tìm kiếm và lọc sản phẩm + Mua hàng + Cho phép người dùng thêm sản phẩm vào giỏ hàng + Đánh giá chất lượng sản phẩm sau khi đơn hàng đã hoàn thành + Liên hệ với người bán để được tư vấn Đối với admin + Đăng nhập tài khoản admin + Quản lý sản phẩm + Quản lý tin tức + Quản lý đánh giá + Quản lý đơn hàng + Quản trị thông tin trang chủ 1.
Điểm phân biệt với các đề tài liên quan - Là đề tài thuộc lĩnh vực thương mại điện tử nên thiết kế phải thể hiện rõ tính chân thực và hiệu quả cao - Lựa chọn, sử dụng màu sắc phù hợp với môi trường công nghệ - Áp dụng với thương hiệu phù hợp mang tính ứng dụng, khả thi - Thiết kế tăng sự tương tác của người dùng với ứng dụng 1. Các công cụ và công nghệ sử dụng - Adobe Illustrator - Adobe photoshop - Figma 1. Kế hoạch thực hiện: Tuần Công việc 1 Nghiên cứu đề tài 2 - Tìm hiểu về UI/UX, nguyên lý thiết kế - Nghiên cứu và khảo sát người dùng 3-4 - Khảo sát hệ thống - Phân tích thiết kế hệ thống 6 - Thiết kế cơ sở dữ liệu 5-6 - Xây dựng cấu trúc ứng dụng phía khách hàng - Xây dựng cấu trúc ứng dụng phía admin 7 - Xác định phương pháp phối màu - Thiết kế logo - Thiết kế giao diện trang chủ phía khách hàng - Thiết kế giao diện trang chủ phía admin 8-9 - Thiết kế giao diện các trang phía user 10-11 - Thiết kế giao diện các trang phía admin 12-13 - Xây dựng sản phẩm prototype mức CNTT từ bản thiết kế 14 - Chỉnh sửa và hoàn thiện báo cáo 15 Bảo vệ đồ án Bảng 1. Kế hoạch thực hiện 7 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.
Lý thuyết về màu sắc - Màu sắc là sự phản chiếu của ánh sáng lên một vật thể (chẳng hạn như màu đỏ, nâu, hồng hoặc xám), là nhận thức về thị giác giúp con người có thể phân biệt giữa hai vật thể tương đồng. Nói một cách đơn giản, màu sắc là tính chất của vật thể; con người nhận biết được màu sắc nhờ sự phản xạ ánh sáng từ các vật thể khác nhau. - Các nguyên tắc phối màu trong thiết kế: 6 nguyên tắc phối màu cơ bản [4] ● Phối màu đơn sắc ( Monochromatic) : là phương pháp thường sử dụng đúng 1 màu chủ đạo, kèm theo đó là các tone và shade của nó. Phương pháp phối Đơn sắc luôn là lựa chọn hàng đầu bởi vì tính hoàn thiện cũng như vẻ thẩm mỹ cao.
Khi sử dụng quy tắc phối màu đơn sắc bạn thường chỉ sử dụng một màu chủ đạo hay đôi lúc bạn cũng có thể sử dụng nhiều kiểu sắc độ khác nhau trong cùng một màu để chúng cộng hưởng với nhau. ● Phối màu tương đồng: + Phối màu tương đồng là phương pháp sử dụng những màu nằm cạnh nhau trên Color Wheel. Phương pháp này thường được chọn khi thiết kế không yêu cầu độ tương phản cao, bao gồm cả nền của trang web với cả banner. + Tuy có sự pha trộn của nhiều màu sắc, nhưng do các màu này đứng gần nhau trên vòng trong màu, nên phối màu này không quá rối rắm và phức tạp.
Ngược lại chúng raatd êm dịu và vừa mắt 8 ● Phối màu bổ túc trực tiếp(Complementary): + Phối màu bổ túc trực tiếp( phối màu tương phản): là phương pháp sử dụng những màu đối diện nhau trong Color Wheel.