Thiết Kế Giao Diện Và Trải Nghiệm Người Dùng Ứng Dụng Đặt Đồ Ăn Cho Nhà Hàng Sen Vàng

Đồ án nghiên cứu tốt nghiệp 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, thiết kế chi tiết, tính toán kỹ thuật theo tiêu chuẩn, đánh giá

• Tác giả: Nguyễn Thị Ngọc Minh
• Người hướng dẫn: ThS. Nguyễn Thị Quỳnh Như
• Trường học: Đại học Mở Hà Nội
• Chuyên ngành: Công nghệ đa phương tiện
• Đề 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
• Loại tài liệu: Đồ án tốt nghiệp
• Năm xuất bản: 2024
• Địa điểm: Hà Nội

Mục lục chi tiết

• LỜI NÓI ĐẦU
• 1. CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI
• 1.1. Giới thiệu đề tài
• 1.2. Mô tả đề tài
• 1.3. Lý do chọn đề tài
• 1.4. Mục tiêu đề tài đặt ra
• 1.5. Các đề tài liên quan
• 1.6. Nội dung đề tài dự định đạt được
• 1.7. Hướng phát triển của đề tài
• 1.8. Đề tài giải quyết các vấn đề
• 1.9. Điểm phân biệt với các đề tài liên quan
• 1.10. Các công cụ và công nghệ sử dụng
• 1.11. Kế hoạch thực hiện
• 2. CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
• 2.1. Lý thuyết về màu sắc
• 2.2. Lý thuyết về giao diện người dùng
• 2.3. Tìm hiểu về UI
• 2.4. Tìm hiểu về UX
• 2.5. Quy trình thiết kế UI/UX
• 3. CHƯƠNG 3: NGHIÊN CỨU – KHẢO SÁT – PHÂN TÍCH TRẢI NGHIỆM NGƯỜI DÙNG
• 3.1. Khảo sát và phân tích người dùng
• 3.2. Chủ sở hữu ứng dụng – phương châm hoạt động
• 3.3. Nghiên cứu định tính
• 3.4. Xây dựng kịch bản & các câu hỏi phỏng vấn
• 3.5. Kết quả phỏng vấn thu được
• 3.6. Nghiên cứu định lượng
• 3.7. Câu hỏi khảo sát
• 3.8. Mục đích của các câu hỏi khảo sát
• 3.9. Phân tích kết quả khảo sát đối tượng khách hàng của ứng dụng
• 3.10. Khảo sát và phân tích hệ thống
• 3.11. Khảo sát hệ thống
• 3.12. Mô tả hệ thống
• 3.13. Quy trình nghiệp vụ
• 3.14. Phân tích hệ thống
• 3.15. Phân tích chức năng nghiệp vụ
• 3.16. Gom nhóm chức năng
• 3.17. Sơ đồ phân rã chức năng (BFD)
• 3.18. Mô hình hóa tiến trình nghiệp vụ
• 3.19. Đặc tả tiến trình nghiệp vụ
• 3.20. Thiết kế cơ sở dữ liệu
• 3.21. Xác định đối tượng và thuộc tính
• 3.22. Xác định kiểu liên kết
• 3.23. Mô hình cơ sở dữ liệu quan hệ
• 4. CHƯƠNG 4: XÂY DỰNG CẤU TRÚC ỨNG DỤNG
• 4.1. Thành phần của ứng dụng
• 4.2. Đối với user
• 4.3. Đối với admin
• 4.4. Tạo bố cục layout
• 4.5. Xác định khối thông tin – hành động chính – phác thảo layout
• 4.6. Phác khảo layout
• 4.7. Đối với user
• 4.8. Đối với admin
• 4.9. Đối với user
• 4.10. Đối với admin
• 4.11. Sơ đồ luồng người dùng
• 5. CHƯƠNG 5: THIẾT KẾ TRỰC QUAN
• 5.1. Ý tưởng thiết kế logo
• 5.2. Ý tưởng thiết kế ứng dụng
• 5.3. Thiết kế trực quan phía User
• 5.4. Thiết kế trực quan phía admin
• KẾT LUẬN
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Giới thiệu về thiết kế giao diện ứng dụng đặt đồ ăn cho nhà hàng Sen Vàng

Thiết kế giao diện ứng dụng đặt đồ ăn cho nhà hàng Sen Vàng là một trong những yếu tố quan trọng giúp nâng cao trải nghiệm người dùng. Ứng dụng không chỉ đơn thuần là nơi để khách hàng đặt món ăn mà còn là cầu nối giữa người tiêu dùng và nhà hàng. Việc tối ưu hóa giao diện sẽ giúp người dùng dễ dàng tìm kiếm và đặt món ăn yêu thích.

1.1. Tầm quan trọng của thiết kế giao diện ứng dụng

Thiết kế giao diện ứng dụng ảnh hưởng trực tiếp đến trải nghiệm người dùng. Một giao diện thân thiện, dễ sử dụng sẽ giúp khách hàng cảm thấy thoải mái hơn khi đặt hàng.

1.2. Mục tiêu của ứng dụng đặt đồ ăn Sen Vàng

Mục tiêu chính của ứng dụng là cung cấp trải nghiệm đặt hàng nhanh chóng, tiện lợi và hiệu quả cho người dùng, đồng thời giới thiệu các món ăn chay đa dạng.

II. Những thách thức trong thiết kế giao diện ứng dụng đặt đồ ăn

Trong quá trình thiết kế giao diện ứng dụng đặt đồ ăn cho nhà hàng Sen Vàng, nhiều thách thức đã xuất hiện. Các vấn đề như sự phức tạp trong việc điều hướng, thông tin không rõ ràng và thiếu tính tương tác là những yếu tố cần được khắc phục.

2.1. Vấn đề điều hướng trong ứng dụng

Người dùng thường gặp khó khăn trong việc tìm kiếm món ăn nếu giao diện không được thiết kế hợp lý. Cần có một hệ thống điều hướng rõ ràng để người dùng dễ dàng tiếp cận.

2.2. Thiếu thông tin chi tiết về món ăn

Thông tin về món ăn cần được trình bày rõ ràng và chi tiết. Điều này giúp người dùng có đủ dữ liệu để đưa ra quyết định đặt hàng.

III. Phương pháp thiết kế giao diện ứng dụng đặt đồ ăn hiệu quả

Để thiết kế giao diện ứng dụng đặt đồ ăn cho nhà hàng Sen Vàng hiệu quả, cần áp dụng các phương pháp thiết kế UX/UI hiện đại. Việc nghiên cứu và khảo sát người dùng là rất quan trọng để hiểu rõ nhu cầu và mong muốn của họ.

3.1. Nghiên cứu người dùng và khảo sát

Khảo sát người dùng giúp thu thập thông tin về thói quen và sở thích của khách hàng. Từ đó, có thể điều chỉnh giao diện cho phù hợp.

3.2. Thiết kế prototype cho ứng dụng

Việc xây dựng prototype giúp hình dung rõ hơn về giao diện và chức năng của ứng dụng. Điều này cũng giúp dễ dàng nhận phản hồi từ người dùng.

IV. Ứng dụng thực tiễn và kết quả nghiên cứu từ thiết kế

Kết quả nghiên cứu từ thiết kế giao diện ứng dụng đặt đồ ăn cho nhà hàng Sen Vàng cho thấy sự cải thiện rõ rệt trong trải nghiệm người dùng. Các phản hồi tích cực từ khách hàng đã chứng minh tính hiệu quả của ứng dụng.

4.1. Phản hồi từ người dùng

Người dùng đã có những phản hồi tích cực về giao diện mới, cho rằng nó dễ sử dụng và thân thiện hơn so với phiên bản trước.

4.2. Tăng trưởng doanh thu từ ứng dụng

Doanh thu từ đơn hàng đặt qua ứng dụng đã tăng lên đáng kể, cho thấy sự thành công trong việc thu hút khách hàng.

V. Kết luận và tương lai của ứng dụng đặt đồ ăn Sen Vàng

Thiết kế giao diện ứng dụng đặt đồ ăn cho nhà hàng Sen Vàng không chỉ mang lại trải nghiệm tốt cho người dùng mà còn mở ra nhiều cơ hội phát triển trong tương lai. Việc tiếp tục cải tiến và cập nhật ứng dụng sẽ là chìa khóa để duy trì sự cạnh tranh.

5.1. Hướng phát triển trong tương lai

Cần tiếp tục nghiên cứu và phát triển các tính năng mới để nâng cao trải nghiệm người dùng, đồng thời mở rộng danh mục món ăn.

5.2. Tầm quan trọng của việc duy trì và cập nhật ứng dụng

Việc thường xuyên cập nhật và bảo trì ứng dụng sẽ giúp giữ chân khách hàng và thu hút người dùng mới.

Nội dung chính

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

Trong bối cảnh công nghệ thông tin và mạng Internet toàn cầu phát triển mạnh mẽ, các đơn vị kinh doanh dịch vụ ăn uống ngày càng chú trọng đến việc quảng bá và thương mại hóa dịch vụ trên nền tảng trực tuyến nhằm nâng cao năng lực cạnh tranh. Người tiêu dùng hiện đại không chỉ xem ứng dụng đặt đồ ăn là công cụ đáp ứng nhu cầu ẩm thực đơn thuần, mà còn coi đó là không gian trải nghiệm và kết nối trực tiếp với nhà hàng. Xuất phát từ thực tiễn đó, tác giả Nguyễn Thị Ngọc Minh (sinh viên chuyên ngành Công nghệ đa phương tiện, Khoa Công nghệ thông tin, Trường Đại học Mở Hà Nội) đã thực hiện đồ án tốt nghiệp vớ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".

Mục tiêu nghiên cứu của đề tài được xác định gồm các nội dung chính:

1. Xây dựng một ứng dụng đơn giản, dễ thao tác đối với người dùng ở các nhóm độ tuổi khác nhau.
2. Đưa các sản phẩm ẩm thực của Nhà hàng Sen Vàng tiếp cận gần hơn với khách hàng trên không gian số.
3. Phân loại các danh mục thực phẩm, món ăn một cách khoa học, rõ ràng.
4. Hiển thị thông tin món ăn, bảng giá và các chương trình khuyến mãi đầy đủ, chi tiết để khách hàng dễ dàng tham khảo và lựa chọn.
5. Thiết lập hệ thống chức năng thân thiện, bảo đảm sự tương thích với thói quen sử dụng của người dùng.

Nhiệm vụ nghiên cứu của đồ án bao gồm 4 nhiệm vụ cụ thể:

1. Nghiên cứu hệ thống lý thuyết về thiết kế giao diện người dùng (UI) và trải nghiệm người dùng (UX).
2. Tiến hành khảo sát thực tế, phân tích các yếu tố giao diện và trải nghiệm người dùng.
3. Nghiên cứu, đánh giá ưu điểm và hạn chế về trải nghiệm người dùng tại các ứng dụng trong cùng lĩnh vực thương mại điện tử ẩm thực.
4. Thiết kế hệ thống giao diện hoàn chỉnh và xây dựng sản phẩm mẫu dưới dạng bản mẫu tương tác (prototype).

Đối tượng và phạm vi nghiên cứu:

• Đối tượng nghiên cứu: Quy trình phân tích nghiệp vụ, kiến trúc thông tin, thiết kế giao diện (UI) và trải nghiệm người dùng (UX) cho ứng dụng đặt đồ ăn mang tên FoodSwift.
• Phạm vi không gian: Thương hiệu Nhà hàng Sen Vàng (địa chỉ tại số 34 Quảng Bá, Tây Hồ, Hà Nội); khảo sát định tính tại không gian công cộng Phố đi bộ Hà Nội và khảo sát định lượng qua mạng Internet hướng đến tập khách hàng tiềm năng tại khu vực Hà Nội.
• Phạm vi thời gian: Đồ án được triển khai và hoàn thành trong năm 2024 theo khung kế hoạch đào tạo 15 tuần của nhà trường.

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

Về khung lý thuyết, tác giả hệ thống hóa các nguyên lý nền tảng của ngành thiết kế đa phương tiện:

• Lý thuyết màu sắc: Khái niệm về sự phản xạ ánh sáng trên vật thể và 6 nguyên tắc phối màu cơ bản trong vòng tròn màu (Color Wheel): phối màu đơn sắc (Monochromatic), phối màu tương đồng (Analogous), phối màu bổ túc trực tiếp (Complementary), phối màu bổ túc bộ ba (Triadic), phối màu bổ túc xen kẽ (Split-complementary) và phối màu bổ túc bộ bốn (Tetradic / Double-Complementary).
• Lý thuyết giao diện người dùng (UI): Định nghĩa giao diện đồ họa (GUI), các yếu tố cấu thành một giao diện hiệu quả bao gồm tính nhất quán, giảm thiểu tải ghi nhớ dữ liệu, cung cấp thông tin phản hồi hành vi người dùng, khả năng phục hồi lỗi và hỗ trợ trợ giúp khi cần thiết.
• Lý thuyết trải nghiệm người dùng (UX): Bản chất của UX là sự hài lòng tổng thể về thể chất, cảm xúc và nhận thức; các yếu tố cốt lõi gồm khả năng tìm kiếm, khả năng tiếp cận, đáp ứng mong muốn, tính tin cậy và tính hữu dụng.
• Quy trình và nguyên tắc thiết kế UI/UX: Phương pháp cấu trúc nội dung theo ba nguyên tắc Structure (cấu trúc phân đoạn và điểm nhấn), Hierarchy (phân cấp thông tin dạng kim tự tháp) và Relevance (tính phù hợp với ngữ cảnh); xây dựng hệ thống điều hướng giải quyết 4 câu hỏi định vị của người dùng (Tôi đang ở đâu? Tôi đã làm thế nào để đến đây? Tôi có thể đi đâu tiếp theo? Làm thế nào để tôi về trang chủ?); các bước phác thảo layout, wireframe, thiết kế trực quan và thử nghiệm prototype.

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

• Phương pháp phân tích - so sánh tài liệu: Rà soát, đối sánh ưu - nhược điểm của 3 đồ án tốt nghiệp tiền nhiệm trong cùng chuyên ngành tại Khoa CNTT - Trường Đại học Mở Hà Nội để rút kinh nghiệm thiết kế.
• Phương pháp nghiên cứu định tính: Xây dựng kịch bản phỏng vấn trực tiếp gồm 7 câu hỏi mở, thực hiện phỏng vấn tại Phố đi bộ Hà Nội với 6 đối tượng người dùng có độ tuổi từ 14 đến 42 thuộc nhiều ngành nghề khác nhau (học sinh, sinh viên, nhân viên văn phòng, công nhân).
• Phương pháp nghiên cứu định lượng: Khảo sát diện rộng thông qua bảng hỏi trực tuyến trên Google Forms với 9 câu hỏi trắc nghiệm, phân tích câu trả lời của 128 đối tượng tham gia khảo sát để lượng hóa nhu cầu, hành vi và các điểm nghẽn trải nghiệm.
• Phương pháp phân tích và mô hình hóa hệ thống: Phân tích quy trình nghiệp vụ, xây dựng sơ đồ phân rã chức năng (BFD), sơ đồ luồng dữ liệu (DFD) mức khung cảnh và mức đỉnh, đặc tả 20 tiến trình nghiệp vụ, thiết kế mô hình cơ sở dữ liệu quan hệ gồm 10 bảng thực thể.

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

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI

Tác giả giới thiệu tổng quan về đề tài FoodSwift của Nhà hàng Sen Vàng, xác định 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". Trong chương này, tác giả đi sâu phân tích bài học từ 3 đồ án tốt nghiệp liên quan:

Đồ án tham chiếu	Tác giả & Năm	Điểm đạt được	Điểm hạn chế cần khắc phục
Ứng dụng tra cứu xe khách từ Hà Nội đi các tỉnh miền Bắc	Lê Thị Dung (2020)	Xây dựng được giao diện và chức năng cơ bản; áp dụng nguyên tắc thiết kế chuẩn.	Icon và ảnh khuyến mãi quá to gây cảm giác phóng đại; trang chi tiết vé căn lề chưa thống nhất; thiếu bắt lỗi đăng nhập; thiếu điều hướng trang chủ; không tích hợp khuyến mãi tại trang đặt vé.
App bán cà phê Starbucks	Nguyễn Trung Kiên (2021)	Hoàn thành phân tích thiết kế cho website; hoàn thiện sản phẩm 100% theo thiết kế; áp dụng hệ thống lưới (grid) và responsive.	Chưa xây dựng phiên bản giao diện di động (mobile app); khảo sát người dùng còn sơ sài; tương tác giữa người dùng và hệ thống còn ít.
App dạy học lập trình Rocket Academy	Nguyễn Tiến Anh (2022)	Nghiên cứu đầy đủ lý thuyết UI/UX; hoàn thành khảo sát; tạo được prototype hoàn chỉnh đáp ứng thẩm mỹ.	Còn nhiều khoảng trắng ở các trang con gây mất cân bằng; thiếu chức năng bắt lỗi khi đăng nhập sai; trang quản lý giảng viên, khóa học, danh mục chưa đảm bảo tính cân đối.

Từ các phân tích trên, tác giả xác định đề tài FoodSwift sẽ tập trung xử lý: giải tỏa áp lực tâm lý người dùng khi tiếp cận ứng dụng (tránh quá nhiều lựa chọn gây hoang mang, người dùng thường ngại đọc văn bản dài); bổ sung hệ thống kiểm tra và bắt lỗi; thống nhất hệ màu và phông chữ; sử dụng bộ công cụ Adobe Illustrator, Adobe Photoshop và Figma trong tiến độ 15 tuần.

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

Chương này trình bày chi tiết về các nguyên lý phối màu trên bánh xe màu sắc và ứng dụng cụ thể trong thiết kế đồ họa. Tác giả phân tích rõ sự phối hợp giữa độ tương phản và độ cân bằng thị giác, như việc sử dụng cặp màu đối lập (ví dụ nút bấm màu cam trên nền xanh dương) để tạo điểm nhấn tương tác.

Về giao diện và trải nghiệm người dùng, tác giả phân biệt rõ: UI đóng vai trò là "lớp da thịt" trực quan mà người dùng nhìn thấy và tương tác (màu sắc, bố cục, kiểu chữ, hình ảnh), còn UX đóng vai trò là "khung xương" cấu trúc nên toàn bộ quá trình trải nghiệm tinh thần và cảm xúc. Một giao diện tốt phải đảm bảo phản hồi hành động chính xác, có cơ chế khôi phục lỗi thuận tiện và định hướng thông tin liền mạch. Tác giả thiết lập quy trình thiết kế chuẩn hóa từ khâu nghiên cứu người dùng, xây dựng chân dung khách hàng, vẽ sơ đồ hành trình, thiết lập hệ thống điều hướng 4 câu hỏi định vị, phác thảo layout theo hệ thống phân cấp kim tự tháp, hoàn thiện thiết kế trực quan và đánh giá lặp lại trên bản mẫu prototype.

CHƯƠNG 3: NGHIÊN CỨU – KHẢO SÁT – PHÂN TÍCH TRẢI NGHIỆM NGƯỜI DÙNG

Chương 3 là phần nghiên cứu thực nghiệm và phân tích kỹ thuật trọng tâm của đồ án:

• Chủ sở hữu ứng dụng: Nhà hàng Sen Vàng (34 Quảng Bá, Tây Hồ, Hà Nội; hotline: [phone]; email: [e-mail]; mở cửa từ 08:00 đến 22:00; mặt hàng chính là gà đồi, hải sản, tôm sông, đồng thời phát triển định hướng ẩm thực chay trên nền tảng số).
• Kết quả nghiên cứu định tính: Phỏng vấn 6 khách hàng tại Phố đi bộ Hà Nội cho thấy những khó khăn phổ biến khi dùng app đặt đồ ăn gồm: quảng cáo xuất hiện dày đặc, giao diện phối màu rối mắt gây khó phân biệt thực phẩm, lỗi văng ứng dụng khi đặt hàng, nội dung khuyến mãi không khớp, kích thước phông chữ quá nhỏ gây cản trở đọc thông tin.
• Kết quả nghiên cứu định lượng (128 người tham gia):
  • Độ tuổi sử dụng chủ yếu là nhóm người trẻ đi học và đi làm (18-29 tuổi), ưu tiên sự nhanh gọn và tiện dụng.
  • Thiết bị truy cập: Điện thoại di động chiếm tỷ lệ áp đảo so với máy tính bảng hay máy tính xách tay; do đó thiết kế ưu tiên kích thước màn hình mobile app, sử dụng phông chữ không chân (sans-serif) với kích thước chuẩn 16pt để chống mỏi mắt.
  • Mức độ quan tâm thông tin: Yếu tố hình ảnh và thông tin chi tiết món ăn được ưu tiên cao nhất, tiếp theo là giá cả và đánh giá từ khách hàng.
  • Các điểm bất cập cần cải thiện: Quy trình thanh toán rườm rà, danh mục khó tìm kiếm, thông tin khuyến mãi thiếu minh bạch.
• Phân tích chức năng và mô hình hóa hệ thống: Tác giả xác định 30 chức năng nghiệp vụ chi tiết và phân chia thành các nhóm quản lý chính trong hệ thống:

Nhóm chức năng	Các chức năng thành phần chi tiết
Quản lý tài khoản	(1) Đăng ký, (2) Đăng nhập, (3) Đăng xuất, (4) Thêm tài khoản, (5) Sửa tài khoản, (6) Xóa tài khoản, (7) Tìm kiếm tài khoản, (8) Phân quyền tài khoản.
Quản lý tin tức	(9) Thêm tin tức, (10) Sửa tin tức, (11) Xóa tin tức.
Quản lý danh mục sản phẩm	(12) Thêm danh mục, (13) Sửa danh mục, (14) Xóa danh mục sản phẩm.
Quản lý sản phẩm	(15) Tìm kiếm sản phẩm, (16) Thêm sản phẩm, (17) Sửa sản phẩm, (18) Xóa sản phẩm.
Quản lý đánh giá	(19) Thêm đánh giá, (20) Sửa đánh giá.
Quản lý giỏ hàng	(21) Thêm món vào giỏ, (22) Xóa món trong giỏ, (23) Sửa số lượng trong giỏ hàng.
Quản lý đơn hàng	(24) Tìm kiếm đơn hàng, (25) Sửa đơn hàng, (26) Hủy đơn hàng, (27) Cập nhật trạng thái đơn hàng.
Thống kê	(28) Thống kê sản phẩm, (29) Thống kê đơn hàng, (30) Thống kê doanh thu.

Hệ thống được mô hình hóa qua sơ đồ phân rã chức năng (BFD), sơ đồ luồng dữ liệu (DFD mức khung cảnh và mức đỉnh), cùng đặc tả logic cho 20 tiến trình nghiệp vụ cốt lõi. Mô hình cơ sở dữ liệu quan hệ được thiết kế với 10 bảng thực thể: KHÁCH HÀNG, NHÂN VIÊN, PHÂN QUYỀN, DANH MỤC SẢN PHẨM, SẢN PHẨM, DANH MỤC TIN TỨC, TIN TỨC, ĐÁNH GIÁ, GIỎ HÀNG, ĐƠN HÀNG.

CHƯƠNG 4: XÂY DỰNG CẤU TRÚC ỨNG DỤNG

Chương 4 thiết lập cấu trúc khung cho ứng dụng FoodSwift trên cả hai phân hệ:

• Phân hệ người dùng (User): Xác định khối thông tin và phác thảo bố cục (layout) cho trang chủ, trang danh mục món ăn, chi tiết món ăn, giỏ hàng, đặt hàng, quản lý đơn hàng chờ xác nhận, lịch sử đơn hàng, trang đánh giá sản phẩm, trang tin tức, quản lý tài khoản và đăng ký/đăng nhập.
• Phân hệ quản trị (Admin): Phác thảo bố cục trang tổng quan quản trị, danh mục thực đơn, thêm/sửa món ăn, quản lý đơn hàng theo trạng thái, quản lý tin tức, báo cáo thống kê doanh số, quản lý nhân viên, trang tài khoản và khung chat hỗ trợ.
• Hệ thống Wireframe: Tác giả xây dựng 58 bản vẽ wireframe chi tiết (từ Hình 4.12 đến Hình 4.69 trong văn bản), định hình rõ vị trí từng nút bấm, trường nhập dữ liệu, banner quảng cáo, danh sách món và thanh điều hướng dưới đáy màn hình (bottom navigation).
• Sơ đồ luồng người dùng (User Flow): Xây dựng sơ đồ luồng thao tác phía khách hàng từ bước duyệt sản phẩm, thêm vào giỏ, nhập địa chỉ, áp mã voucher đến thanh toán; đồng thời mô hình hóa luồng xử lý đơn hàng, điều phối trạng thái và cập nhật thực đơn của phía quản trị viên.

CHƯƠNG 5: THIẾT KẾ TRỰC QUAN

Chương 5 hoàn thiện mỹ thuật và các tương tác giao diện cuối cùng:

• Ý tưởng thiết kế logo: Thiết kế bộ nhận diện thương hiệu FoodSwift của Nhà hàng Sen Vàng với 3 phiên bản chuẩn hóa gồm logo âm bản, logo dương bản và logo phối màu hoàn chỉnh, thể hiện thông điệp uy tín, an toàn và phát triển bền vững.
• Thiết kế trực quan phía User: Thể hiện màu sắc chủ đạo tươi sáng, trẻ trung; giao diện trang chủ bố trí danh mục bán chạy, bộ sưu tập món mới; trang chi tiết hiển thị đầy đủ hình ảnh, nguyên liệu, định lượng giá; trang giỏ hàng và đặt hàng tích hợp sẵn trường nhập mã khuyến mãi; trang theo dõi trạng thái đơn hàng hiển thị trực quan các giai đoạn (chờ duyệt, đang chế biến, đang giao, đã hoàn thành); bổ sung hệ thống thông báo trạng thái và form đánh giá sản phẩm có xếp hạng sao.
• Thiết kế trực quan phía Admin: Xây dựng bảng điều khiển quản trị khoa học; các màn hình tiếp nhận và duyệt đơn hàng mới; hệ thống form thêm món ăn với các trường tải ảnh, chọn danh mục, điền giá tiền; giao diện quản lý nhân viên theo ca kíp; các bảng biểu thống kê doanh thu và quản lý danh sách phản hồi đánh giá của khách hàng.

Thiết kế và triển khai hệ thống giao diện

Là một đồ án chuyên sâu về thiết kế sản phẩm số trong ngành Công nghệ đa phương tiện, nội dung triển khai kỹ thuật được thực hiện thông qua quy trình chuẩn hóa từ phân tích hệ thống đến xây dựng prototype:

• Công nghệ và phần mềm sử dụng:
  • Adobe Photoshop: Sử dụng để xử lý hình ảnh sản phẩm, tối ưu hóa độ phân giải, cắt ghép và hiệu chỉnh ánh sáng món ăn.
  • Adobe Illustrator: Dùng để phác thảo và vẽ đồ họa vector cho hệ thống biểu trưng (logo âm bản, dương bản, màu) cùng các biểu tượng icon chức năng trên ứng dụng.
  • Figma: Đóng vai trò là nền tảng chính để dựng layout, xây dựng component giao diện, thiết lập hệ thống lưới (grid system), vẽ wireframe và liên kết các khung màn hình thành bản mẫu tương tác trực tiếp (interactive prototype).
• Thiết kế cơ sở dữ liệu quan hệ (CSDL): Đồ án hoàn thiện cấu trúc logic cho 10 bảng dữ liệu nhằm đảm bảo tính khả thi khi chuyển giao cho lập trình viên phát triển hệ thống:
  • KHÁCH HÀNG (Khóa chính: Mã khách hàng; Khóa ngoại: Mã quyền).
  • NHÂN VIÊN (Khóa chính: Mã nhân viên; Khóa ngoại: Mã quyền).
  • PHÂN QUYỀN (Khóa chính: Mã quyền).
  • DANH MỤC SẢN PHẨM (Khóa chính: Mã loại sản phẩm; Khóa ngoại: Mã nhân viên).
  • SẢN PHẨM (Khóa chính: Mã sản phẩm; Khóa ngoại: Mã loại sản phẩm, Mã nhân viên).
  • DANH MỤC TIN TỨC (Khóa chính: Mã loại tin tức; Khóa ngoại: Mã nhân viên).
  • TIN TỨC (Khóa chính: Mã tin tức; Khóa ngoại: Mã loại tin tức, Mã nhân viên).
  • ĐÁNH GIÁ (Khóa chính: Mã sản phẩm; Khóa ngoại: Mã loại sản phẩm, Mã sản phẩm, Mã khách hàng, Mã nhân viên).
  • GIỎ HÀNG (Khóa chính: Mã giỏ hàng; Khóa ngoại: Mã sản phẩm, Mã khách hàng).
  • ĐƠN HÀNG (Khóa chính: Mã đơn hàng; Khóa ngoại: Mã sản phẩm, Mã khách hàng, Mã nhân viên).
• Kiểm thử và đánh giá sản phẩm: Triển khai chạy thử nghiệm bản mẫu prototype ở giai đoạn tuần thứ 12 đến tuần thứ 14 để kiểm tra tính hợp lý của luồng thao tác (User Flow), rà soát khả năng tương thích màn hình và mức độ cân bằng thị giác trước khi bảo vệ trước hội đồng.

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

Đồ án ghi nhận những kết quả cụ thể dựa trên số liệu và sản phẩm thực tế:

• Kết quả điều tra thực nghiệm: Thu thập ý kiến định tính của 6 đối tượng phỏng vấn thực địa và dữ liệu định lượng từ 128 phiếu khảo sát hợp lệ qua Google Forms, làm sáng tỏ các yêu cầu cốt lõi về cỡ chữ 16pt, bố cục hình ảnh và tính năng giảm thiểu gián đoạn quảng cáo.
• Kết quả phân tích hệ thống: Xác lập đầy đủ quy trình bán hàng, hủy đơn, đánh giá và cập nhật tin tức; phân rã thành công 30 chức năng nghiệp vụ, xây dựng 2 cấp sơ đồ luồng dữ liệu (DFD) và thiết kế 10 bảng dữ liệu quan hệ.
• Kết quả thiết kế giao diện: Thiết kế thành công bộ logo nhận diện 3 phiên bản; hoàn thành 58 bản vẽ wireframe và hơn 40 màn hình giao diện trực quan chi tiết trên Figma, phân định mạch lạc hai phân hệ người dùng và quản trị viên.
• Giải pháp đóng góp so với các nghiên cứu trước: Khắc phục được các thiếu sót từ các đồ án khóa trước như đã phân tích: tích hợp đầy đủ thông tin mã khuyến mãi vào trang đặt hàng, bổ sung hệ thống điều hướng giải quyết 4 câu hỏi định vị, chuẩn hóa căn lề, loại bỏ các khoảng trắng dư thừa và tích hợp thông báo phản hồi thao tác đăng nhập.

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

• Hạn chế: Theo nội dung văn bản, đồ án mới dừng lại ở mức độ khảo sát, phân tích hệ thống, thiết kế mỹ thuật giao diện và dựng bản mẫu tương tác prototype trên Figma; chưa triển khai viết mã nguồn phần mềm hoàn chỉnh (frontend và backend) cũng như chưa phát hành ứng dụng lên các kho ứng dụng di động (Google Play hay App Store). Ngoài ra, văn bản có sự chưa đồng nhất nhỏ giữa phần mô tả chung (nêu mặt hàng chủ yếu của nhà hàng là đặc sản như gà đồi, hải sản, tôm sông) và chủ đề định hướng của ứng dụng tại mục 1.1 (kinh doanh món ăn chay).
• Hướng nghiên cứu tiếp: Tác giả xác định tiếp tục áp dụng các quy tắc thiết kế nâng cao để hiệu chỉnh bản thiết kế; bàn giao bản mẫu prototype hoàn thiện cho đội ngũ kỹ sư phần mềm nhằm lập trình hệ thống thực tế; tiến hành kiểm thử khả năng sử dụng (usability testing) trên tập người dùng diện rộng để tối ưu hóa hiệu năng và trải nghiệm mua sắm trực tuyến.

Giá trị tham khảo

Đồ án tốt nghiệp này mang lại giá trị tham khảo thiết thực cho:

• Sinh viên ngành Công nghệ đa phương tiện, Công nghệ thông tin và Thiết kế đồ họa: Cung cấp tài liệu mẫu về phương pháp kết hợp giữa kỹ thuật phân tích thiết kế hệ thống thông tin truyền thống (BFD, DFD, CSDL quan hệ) với quy trình thiết kế trải nghiệm người dùng hiện đại (UI/UX, wireframe, user flow, interactive prototype).
• Người nghiên cứu các đề tài ứng dụng thương mại điện tử ẩm thực: Có thể kế thừa trực tiếp bảng mục tiêu câu hỏi khảo sát UI/UX (Bảng 3.3), quy trình gom nhóm 30 chức năng quản lý bán hàng (Bảng 3.4), cùng hệ thống đặc tả 20 tiến trình nghiệp vụ và cấu trúc 10 bảng cơ sở dữ liệu đã được chuẩn hóa.

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

1. Tác giả sử dụng các phần mềm chuyên dụng nào để hoàn thành đồ án?
Tác giả sử dụng ba phần mềm chính: Adobe Photoshop (chỉnh sửa và xử lý hình ảnh món ăn), Adobe Illustrator (thiết kế logo và đồ họa vector) và Figma (thiết kế layout, wireframe, giao diện trực quan và xây dựng bản mẫu prototype tương tác).

2. Khảo sát người dùng của đề tài được thực hiện với quy mô và phương pháp như thế nào?
Đề tài kết hợp hai phương pháp: khảo sát định tính thông qua phỏng vấn trực tiếp 6 cá nhân (độ tuổi từ 14 đến 42) tại Phố đi bộ Hà Nội, và khảo sát định lượng trực tuyến qua Google Forms thu về 128 phản hồi hợp lệ để phân tích hành vi đặt món ăn trên điện thoại di động.

3. Hệ thống ứng dụng FoodSwift quản lý bao nhiêu chức năng nghiệp vụ?
Hệ thống xác định 30 chức năng nghiệp vụ chi tiết, được gom thành các nhóm quản lý gồm: Quản lý tài khoản, Quản lý tin tức, Quản lý danh mục sản phẩm, Quản lý sản phẩm, Quản lý đánh giá, Quản lý giỏ hàng, Quản lý đơn hàng và Thống kê.

4. Cơ sở dữ liệu của ứng dụng gồm những bảng thực thể nào?
Mô hình cơ sở dữ liệu quan hệ của hệ thống bao gồm 10 bảng thực thể: KHÁCH HÀNG, NHÂN VIÊN, PHÂN QUYỀN, DANH MỤC SẢN PHẨM, SẢN PHẨM, DANH MỤC TIN TỨC, TIN TỨC, ĐÁNH GIÁ, GIỎ HÀNG và ĐƠN HÀNG.

5. Đồ án đã khắc phục những điểm yếu nào từ các đồ án tốt nghiệp khóa trước?
Tác giả đã khắc phục tình trạng icon phóng đại quá to và căn lề lộn xộn (từ đồ án tra cứu xe khách năm 2020), giải quyết việc thiếu phiên bản ứng dụng di động (từ đồ án Starbucks năm 2021), đồng thời xử lý triệt để tình trạng khoảng trắng dư thừa mất cân đối và thiếu bắt lỗi thao tác (từ đồ án Rocket Academy năm 2022).

Kết luận

Đồ án tốt nghiệp của sinh viên Nguyễn Thị Ngọc Minh đã hoàn thành trọn vẹn quy trình nghiên cứu, khảo sát thực tế và thiết kế hệ thống giao diện cho ứng dụng đặt đồ ăn FoodSwift của Nhà hàng Sen Vàng. Trên cơ sở kết hợp lý thuyết màu sắc, nguyên lý UI/UX và dữ liệu khảo sát 128 người dùng, tác giả đã xây dựng thành công 58 bản vẽ wireframe và hệ thống giao diện trực quan chi tiết trên hai phân hệ User và Admin. Dù chưa bước sang giai đoạn lập trình mã nguồn, công trình là một tài liệu học thuật bài bản, cung cấp phương pháp luận rõ ràng và hệ thống tư liệu thiết kế mẫu mực cho lĩnh vực thương mại điện tử ẩm thực.

Trích đoạn nội dung tài liệu

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.