BTL IT62.ehou Anh/Chị chọn một trong các đề sau: Đề 2401: Nghiên cứu thiết kế trải nghiệm người dùng cho App đặt đồ ăn NaFood. Đề 2402: Thiết kế trải nghiệm người dùng cho ứng dụng theo dõi sức khỏe Health Anpha. Đề 2403: Thiết kế trải nghiệm người dùng cho ứng dụng quản lý thu chi tài chính cá nhân. Đề 2404: Nghiên cứu thiết kế trải nghiệm người dùng cho ứng dụng chăm sóc thú cưng Miumiu. Đề 2405: Nghiên cứu thiết kế trải nghiệm người dùng cho ứng dụng quản lý điểm rèn luyện cho sinh viên. Đề 2406: Thiết kế trải nghiệm người dùng cho ứng dụng đặt cafe Life Café. Đề 2407: Nghiên cứu thiết kế trải nghiệm người dùng cho ứng dụng bán cây trang trí văn phòng Office Green. Đề 2408: Thiết kế trải nghiệm người dùng cho ứng dụng bán nước hoa nam Xmen. Đề 2409: Thiết kế trải nghiệm người dùng cho ứng dụng quản lý nhà hàng ăn SeaSea. Đề 2010: Nghiên cứu thiết kế trải nghiệm người dùng cho ứng dụng tìm nhà trọ Sfit. Gợi ý làm báo cáo bài tập lớn: Giới thiệu đề tài. Chương 1: Cơ sở lý thuyết. UX là gì? (Lịch sử ra đời, khái niệm, các thiết kế khác trong UX Design) Phương pháp nghiên cứu người dùng. Quy trình thiết kế. Phương pháp đánh giá. Chương 2: Ý tưởng thiết kế ứng dụng. Xây dựng mục tiêu ứng dụng (chức năng). Sơ đồ hóa các chức năng (luồng xử lý dữ liệu/kiến trúc thông tin). Nghiên cứu người dùng (đánh giá chức năng). Chốt chức năng sẽ triển khai. Chương 3: Triển khai. Ý tưởng triển khai. Triển khai wireframe. Thiết kế prototype. Kết luận. Thời gian hoàn thành bài tập lớn là 2 tuần
Trang 1BTL IT62.ehou
Anh/Chị chọn một trong các đề sau:
Đề 2401: Nghiên cứu thiết kế trải nghiệm người dùng cho App đặt đồ ăn
NaFood
Đề 2402: Thiết kế trải nghiệm người dùng cho ứng dụng theo dõi sức khỏe Health Anpha
Đề 2403: Thiết kế trải nghiệm người dùng cho ứng dụng quản lý thu chi tài chính cá nhân
Đề 2404: Nghiên cứu thiết kế trải nghiệm người dùng cho ứng dụng chăm sóc thú cưng Miumiu
Đề 2405: Nghiên cứu thiết kế trải nghiệm người dùng cho ứng dụng quản lý điểm rèn luyện cho sinh viên
Đề 2406: Thiết kế trải nghiệm người dùng cho ứng dụng đặt cafe Life Café
Đề 2407: Nghiên cứu thiết kế trải nghiệm người dùng cho ứng dụng bán cây trang trí văn phòng Office Green
Đề 2408: Thiết kế trải nghiệm người dùng cho ứng dụng bán nước hoa nam Xmen
Đề 2409: Thiết kế trải nghiệm người dùng cho ứng dụng quản lý nhà hàng ăn SeaSea
Đề 2010: Nghiên cứu thiết kế trải nghiệm người dùng cho ứng dụng tìm nhà trọ Sfit
Gợi ý làm báo cáo bài tập lớn:
Giới thiệu đề tài
Chương 1: Cơ sở lý thuyết
UX là gì? (Lịch sử ra đời, khái niệm, các thiết kế khác trong UX Design)
Phương pháp nghiên cứu người dùng
Quy trình thiết kế
Phương pháp đánh giá
Chương 2: Ý tưởng thiết kế ứng dụng
Xây dựng mục tiêu ứng dụng (chức năng)
Trang 2Sơ đồ hóa các chức năng (luồng xử lý dữ liệu/kiến trúc thông tin).
Nghiên cứu người dùng (đánh giá chức năng)
Chốt chức năng sẽ triển khai
Chương 3: Triển khai
Ý tưởng triển khai
Triển khai wireframe
Thiết kế prototype
Kết luận
Thời gian hoàn thành bài tập lớn là 2 tuần
***Hướng dẫn cách làm
Triển khai wireframe" là một bước quan trọng trong quá trình thiết kế trải
nghiệm người dùng (UX Design) Wireframe là bản phác thảo giao diện của ứng dụng hoặc trang web, thể hiện bố cục và cấu trúc của các thành phần chính như các nút, menu, hình ảnh, văn bản, và các yếu tố tương tác khác
Trong quá trình "triển khai wireframe," bạn sẽ:
Vẽ ra cấu trúc của giao diện ứng dụng hoặc trang web, thể hiện vị trí của các thành phần mà người dùng sẽ tương tác
Chú trọng vào bố cục và cách các thành phần hiển thị, đảm bảo tính logic và dễ hiểu
Không tập trung vào chi tiết hình ảnh hoặc màu sắc, mà chỉ chú trọng vào việc xác định các yếu tố giao diện và cách chúng liên kết với nhau
Xây dựng các kịch bản sử dụng, xem xét các luồng tương tác của người dùng với ứng dụng (flowchart)
Wireframe giúp đội phát triển và các bên liên quan có cái nhìn rõ ràng về giao diện trước khi tiến tới thiết kế chi tiết (Prototype) Nó cũng cho phép điều chỉnh các chức năng và tính năng sớm trong quá trình thiết kế
Bạn có thể sử dụng các công cụ như Figma, Adobe XD, hoặc Sketch để tạo wireframe
Bạn có thể sử dụng các công cụ như Figma, Adobe XD, hoặc Sketch để tạo wireframe
Giờ mình chưa có các phần mềm đó thì làm như nào , bạn hướng dẫn mình
Trang 3Nếu bạn chưa có các phần mềm như Figma, Adobe XD, hoặc Sketch, bạn vẫn
có thể thực hiện thiết kế wireframe theo cách thủ công hoặc bằng các công cụ đơn giản khác Dưới đây là một số phương pháp bạn có thể sử dụng:
1 Thiết kế Wireframe bằng giấy và bút
Đây là cách đơn giản nhất và không cần phần mềm Bạn có thể dùng giấy và bút
để vẽ bố cục giao diện:
Bước 1: Lấy một tờ giấy và vẽ khung tổng thể của ứng dụng hoặc trang web (khung hình chữ nhật đại diện cho màn hình)
Bước 2: Vẽ các thành phần chính như tiêu đề, menu, các nút, khung nhập liệu,
và vị trí hình ảnh
Bước 3: Sắp xếp các thành phần theo thứ tự mà người dùng sẽ tương tác (ví dụ: nút "Đăng nhập" ở vị trí dễ thấy)
Bước 4: Sử dụng các ký hiệu đơn giản như hình chữ nhật cho nút bấm, dòng kẻ cho văn bản, và hình tròn cho các biểu tượng
Đây là cách nhanh chóng để bạn hình dung cấu trúc tổng thể trước khi chuyển sang bước thiết kế chi tiết hơn
2 Sử dụng PowerPoint hoặc Google Slides
Nếu bạn không có phần mềm chuyên dụng, PowerPoint hoặc Google Slides cũng là lựa chọn tốt để tạo wireframe:
Bước 1: Mở PowerPoint hoặc Google Slides và tạo một slide trống
Bước 2: Sử dụng các hình khối (shapes) có sẵn như hình chữ nhật, hình tròn để tạo các thành phần trên màn hình
Bước 3: Xếp các hình khối theo vị trí mà bạn muốn các yếu tố xuất hiện trên giao diện
Bước 4: Sử dụng hộp văn bản để thêm tên chức năng hoặc chú thích
3 Sử dụng Microsoft Word hoặc Google Docs
Bạn có thể dùng công cụ vẽ của Word hoặc Google Docs để phác thảo:
Bước 1: Vào phần Insert (Chèn), chọn Shapes (Hình dạng) để vẽ các thành phần như nút bấm, khung hình, và hộp thoại
Bước 2: Dùng công cụ Text Box (Hộp văn bản) để mô tả các chức năng hoặc vị trí
Trang 4Bước 3: Xếp các thành phần hợp lý để tạo bố cục giao diện.
4 Dùng phần mềm miễn phí
Nếu bạn muốn trải nghiệm công cụ trực tuyến mà không cần cài đặt phần mềm: Wireframe.cc: Một công cụ online đơn giản, dễ sử dụng, bạn chỉ cần truy cập trang web và bắt đầu vẽ wireframe
Mockflow: Cung cấp giao diện kéo-thả cho phép bạn nhanh chóng tạo
wireframe mà không cần nhiều kỹ năng kỹ thuật
Balsamiq Wireframes: Một công cụ tạo wireframe miễn phí phiên bản dùng thử trong 30 ngày Nó cho phép bạn vẽ wireframe dễ dàng với các ký hiệu và biểu tượng có sẵn
**Wireframe.cc:**
có miễn phí không
Wireframe.cc có phiên bản miễn phí mà bạn có thể sử dụng để tạo wireframe cơ bản Tuy nhiên, nếu bạn cần các tính năng cao cấp hơn như lưu trữ nhiều dự án hoặc cộng tác nhóm, bạn sẽ phải nâng cấp lên phiên bản trả phí
Nếu chỉ cần tạo wireframe đơn giản, phiên bản miễn phí sẽ đáp ứng nhu cầu của bạn Bạn có thể truy cập trực tiếp trang web và bắt đầu sử dụng mà không cần phải đăng ký hoặc tải phần mềm
Tóm lại:
Wireframe.cc có phiên bản miễn phí với các tính năng cơ bản
Không cần cài đặt phần mềm, chỉ cần truy cập trực tuyến và bắt đầu tạo
wireframe
Nếu bạn muốn thử trải nghiệm ngay, bạn có thể vào Wireframe.cc để bắt đầu
**Đề 2401:** Nghiên cứu thiết kế trải nghiệm người dùng cho App đặt đồ ăn NaFood
Dựa trên đề bài bạn chọn (Đề 2401: Nghiên cứu thiết kế trải nghiệm người dùng cho App đặt đồ ăn NaFood), mình sẽ hướng dẫn cách thực hiện bài tập lớn với các bước gợi ý và cụ thể hơn để bạn có thể triển khai wireframe và nội dung báo cáo
1 Giới thiệu đề tài:
Mục tiêu: Tạo trải nghiệm người dùng tốt nhất cho ứng dụng đặt đồ ăn NaFood, giúp người dùng dễ dàng lựa chọn món ăn và đặt hàng nhanh chóng
Trang 5Vấn đề: Người dùng gặp khó khăn khi đặt đồ ăn do giao diện phức tạp hoặc khó
sử dụng
Giải pháp: Tập trung vào thiết kế giao diện đơn giản, thân thiện, dễ hiểu và tối
ưu hóa quá trình đặt đồ ăn chỉ với vài bước
2 Cơ sở lý thuyết:
UX là gì? (User Experience - Trải nghiệm người dùng) là quá trình thiết kế một sản phẩm sao cho người dùng cảm thấy thoải mái, dễ sử dụng và hài lòng khi tương tác
Lịch sử ra đời UX: Bắt nguồn từ các nguyên lý về nhận thức và tương tác của con người với máy tính
Các khái niệm chính: UX, UI (User Interface), Wireframe, Prototype
Phương pháp nghiên cứu người dùng: Sử dụng khảo sát và phỏng vấn để hiểu rõ nhu cầu và khó khăn của người dùng khi sử dụng ứng dụng đặt đồ ăn
Quy trình thiết kế:
Nghiên cứu người dùng
Phác thảo ý tưởng (Wireframe)
Tạo nguyên mẫu (Prototype)
Đánh giá và điều chỉnh
3 Ý tưởng thiết kế ứng dụng (NaFood):
Xây dựng mục tiêu ứng dụng:
Chức năng chính: Đặt đồ ăn dễ dàng, xem menu, theo dõi đơn hàng, thanh toán trực tuyến
Sơ đồ hóa các chức năng:
Mục tiêu là giảm thiểu số bước đặt hàng
Ví dụ luồng xử lý: Chọn món -> Thêm vào giỏ hàng -> Xem lại giỏ hàng -> Chọn phương thức thanh toán -> Xác nhận đơn hàng
Nghiên cứu người dùng:
Tiến hành khảo sát để biết người dùng thường gặp khó khăn ở bước nào trong quá trình đặt đồ ăn
Chốt các chức năng sẽ triển khai:
Trang 6Đơn giản hóa quy trình đặt hàng.
Giao diện dễ thao tác, đặc biệt trên điện thoại
4 Triển khai:
Ý tưởng triển khai:
Từ các khảo sát người dùng, triển khai một số chức năng cơ bản và cần thiết nhất
Wireframe:
Tạo các bản phác thảo về giao diện, bao gồm trang chủ, trang menu, trang giỏ hàng, và trang thanh toán
Thiết kế Prototype:
Sau khi có wireframe, tạo một nguyên mẫu (prototype) mô phỏng giao diện và trải nghiệm của người dùng
Bạn có thể sử dụng Wireframe.cc (hoặc công cụ khác) để vẽ wireframe và sau
đó chuyển sang phần thiết kế prototype nếu cần
5 Đánh giá và kết luận:
Đánh giá các ý tưởng thiết kế dựa trên trải nghiệm của người dùng thử
(feedback) và cải thiện những phần gây khó khăn hoặc bất tiện
Kết luận: Đưa ra phương án cuối cùng, kết hợp các yếu tố từ khảo sát và điều chỉnh từ phản hồi
Bạn có thể bắt đầu với **Wireframe.cc** (theo hình ảnh bạn đã gửi) bằng cách chọn "Create Wireframe," sau đó vẽ ra các màn hình chính của ứng dụng
NaFood Nếu cần thêm hướng dẫn cụ thể hơn về từng phần hoặc bạn muốn mình hỗ trợ làm các bước nào, hãy cho mình biết!
Bắt đầu thiết kế wireframe:
Vẽ giao diện chính (Homepage):
Bước 1: Trên lưới trống, bạn hãy chọn công cụ hình chữ nhật để vẽ một khung lớn, đại diện cho màn hình của người dùng
Bước 2: Tạo các phần chính của giao diện:
Thanh điều hướng (Navigation Bar): Ở phía trên cùng, vẽ một hình chữ nhật mỏng để làm thanh điều hướng, chứa các nút như Trang chủ, Menu, Giỏ hàng,
và Tài khoản
Trang 7Danh mục món ăn: Ở giữa màn hình, vẽ một khu vực lớn để hiển thị danh mục các món ăn với hình ảnh và tên món
Nút "Thêm vào giỏ hàng": Bên cạnh mỗi món ăn, bạn thêm các nút nhỏ để người dùng nhấn "Thêm vào giỏ hàng."
Thêm nút điều hướng (Buttons):
Sử dụng công cụ hình chữ nhật nhỏ hơn để tạo các nút bấm Các nút này sẽ là các nút điều hướng chính trong ứng dụng
Ví dụ: Tìm kiếm món ăn, Xem giỏ hàng, Xác nhận đơn hàng
Nhấn vào từng hình chữ nhật đã tạo và sử dụng công cụ Text để đặt tên cho các nút
Hiển thị chi tiết sản phẩm (Product Details):
Khi người dùng chọn một món ăn, tạo một cửa sổ nổi hoặc trang riêng để hiển thị thông tin chi tiết về món ăn như: hình ảnh lớn, mô tả món ăn, giá tiền, và nút
“Thêm vào giỏ hàng.”
Thêm nút điều hướng đến trang thanh toán:
Dưới cùng của trang, bạn có thể thêm một nút “Giỏ hàng” và một nút “Thanh toán” để người dùng dễ dàng truy cập giỏ hàng và thanh toán
Bố trí một số phần cụ thể:
Trang menu: Khi nhấn vào "Menu" trên thanh điều hướng, màn hình sẽ hiển thị danh sách các loại món ăn (phân loại theo danh mục như Món chính, Đồ uống, Tráng miệng)
Giỏ hàng: Khi người dùng chọn món, giỏ hàng sẽ hiển thị tổng số món và giá tiền Ở trang này, bạn có thể thêm các nút như Xóa món hoặc Cập nhật số lượng
Lưu wireframe:
Khi bạn đã hoàn thành việc thiết kế bố cục, đừng quên nhấn nút Save ở góc trên bên phải để lưu lại wireframe
Bạn có thể tiếp tục vẽ các màn hình khác như trang giỏ hàng hoặc trang thanh toán tương tự cách mình đã hướng dẫn Nếu bạn gặp khó khăn ở bất kỳ bước nào, hãy báo lại để mình có thể hỗ trợ chi tiết hơn!
**Bước 1:** Trên lưới trống, bạn hãy chọn công cụ hình chữ nhật để vẽ một khung lớn, đại diện cho màn hình của người dùng
Trang 8Bây giờ, bạn cần thực hiện các bước tiếp theo để bắt đầu phác thảo giao diện: Chọn công cụ vẽ hình chữ nhật:
Nhìn vào các biểu tượng trên thanh công cụ ở phía trên (biểu tượng hình chữ nhật), bấm vào để bắt đầu vẽ
Vẽ một khung lớn trên lưới để đại diện cho màn hình chính của ứng dụng
NaFood
Thiết kế thanh điều hướng (Navigation bar):
Ở phía trên cùng của màn hình, tạo một hình chữ nhật mỏng để làm thanh điều hướng
Sau đó, vẽ thêm các hình chữ nhật nhỏ trong thanh này để đại diện cho các nút như Trang chủ, Menu, Giỏ hàng, và Tài khoản
Phác thảo danh mục món ăn:
Tạo các khung hình chữ nhật cho mỗi món ăn, bên cạnh có nút "Thêm vào giỏ hàng."
Nút tìm kiếm và các thành phần khác:
Bên cạnh phần danh mục món ăn, vẽ các nút khác như Tìm kiếm và Thanh toán Khi bạn đã thực hiện các bước này, bạn có thể nhấn nút Save để lưu lại Nếu bạn cần thêm hướng dẫn cụ thể trong quá trình thiết kế, mình sẵn sàng hỗ trợ! Nhìn vào các biểu tượng trên thanh công cụ ở phía trên (biểu tượng hình chữ nhật), bấm vào để bắt đầu vẽ
Bây giờ, bạn có thể tiếp tục với các bước sau để hoàn thiện wireframe cho ứng dụng NaFood:
Tiếp tục thiết kế:
Thiết kế danh mục món ăn:
Dưới thanh điều hướng, bạn có thể vẽ các ô chữ nhật hoặc hình ảnh đại diện cho từng món ăn trong danh mục
Mỗi ô món ăn có thể bao gồm một hình chữ nhật lớn cho hình ảnh món ăn và bên dưới là phần mô tả (tên món, giá tiền)
Đừng quên thêm nút “Thêm vào giỏ hàng” bên cạnh hoặc bên dưới mỗi món ăn Thêm nút điều hướng:
Trang 9Phía dưới danh mục món ăn, bạn có thể thêm các nút điều hướng như Tìm kiếm, Giỏ hàng, và Thanh toán
Hiển thị giỏ hàng:
Sau khi hoàn tất danh mục món ăn, bạn có thể vẽ thêm trang giỏ hàng khi người dùng nhấn vào Giỏ hàng trên thanh điều hướng
Giỏ hàng nên bao gồm danh sách các món đã chọn, số lượng và tổng giá tiền Cần có nút Xóa món hoặc Cập nhật số lượng
Tối ưu hóa trang chủ:
Đảm bảo rằng trang chủ hiển thị các phần quan trọng như: thông tin nổi bật của ứng dụng, các món ăn phổ biến, và nút gọi hành động (Call to Action) rõ ràng như Đặt ngay hoặc Xem thêm
Khi hoàn thành, nhấn Save để lưu lại công việc và bạn có thể tiếp tục thiết kế các trang khác hoặc điều chỉnh lại theo yêu cầu của dự án
Dưới thanh điều hướng, bạn có thể vẽ các ô chữ nhật hoặc hình ảnh đại diện cho từng món ăn trong danh mục
mình có thể cắt ảnh ở trang web nên rồi dán vào có được không
Trong Wireframe.cc, bạn không thể trực tiếp cắt và dán ảnh từ trang web vào wireframe như cách bạn có thể làm trong các công cụ chỉnh sửa hình ảnh khác Tuy nhiên, Wireframe thường không yêu cầu ảnh thực tế mà chỉ tập trung vào
bố cục và cấu trúc của giao diện
Thay thế bằng cách vẽ các khối hình:
Bạn có thể vẽ các khối hình chữ nhật để tượng trưng cho vị trí ảnh hoặc hình minh họa món ăn Trong báo cáo chi tiết hoặc quá trình phát triển sau, bạn có thể bổ sung hình ảnh thực tế
Nếu bạn thực sự cần sử dụng hình ảnh:
Bạn có thể sử dụng một công cụ khác như PowerPoint, Google Slides, hoặc Figma để chèn ảnh thật vào wireframe của bạn, sau đó xuất bản hoặc chụp lại
và chèn vào bài tập
Wireframe.cc chủ yếu dùng để tạo bố cục khái niệm, và việc thêm hình ảnh thực
sẽ phù hợp hơn khi bạn làm prototype hoặc bước thiết kế chi tiết sau wireframe Dưới thanh điều hướng, bạn có thể vẽ các ô chữ nhật hoặc hình ảnh đại diện cho từng món ăn trong danh mục
Trang 10bạn hướng dẫn chi tiết hơn từ bức ảnh này
Dựa vào hình ảnh bạn đã gửi, bạn đang có một khung lưới trống với một thanh điều hướng (Navigation Bar) đã được thêm vào Dưới đây là các bước chi tiết hơn để tiếp tục thiết kế wireframe cho ứng dụng NaFood của bạn:
Bước 1: Thêm danh mục món ăn
Chọn công cụ hình chữ nhật (Rectangle Tool):
Trên giao diện Wireframe.cc, chọn biểu tượng hình chữ nhật từ thanh công cụ (nếu chưa chọn)
Vẽ khung cho từng món ăn:
Ở phía dưới thanh điều hướng mà bạn đã tạo, vẽ các hình chữ nhật đại diện cho từng món ăn
Ví dụ: Bạn có thể vẽ một hàng bao gồm 3-4 hình chữ nhật ngang hàng, mỗi hình chữ nhật sẽ đại diện cho một món ăn trong danh mục
Thêm thông tin món ăn:
Sau khi vẽ các ô món ăn, bạn có thể chọn Text Tool để thêm mô tả bên trong các ô này
Các thông tin chính cần hiển thị bao gồm:
Tên món ăn
Giá món ăn
Hình đại diện món ăn (Bạn chỉ cần tạo khung chữ nhật trống tượng trưng cho hình ảnh ở giai đoạn wireframe này)
Thêm nút “Thêm vào giỏ hàng”:
Bên dưới hoặc bên cạnh mỗi ô món ăn, vẽ một nút hình chữ nhật nhỏ hơn và đặt tên là “Thêm vào giỏ hàng” bằng Text Tool
Mục tiêu là cho phép người dùng dễ dàng thêm món ăn vào giỏ hàng từ màn hình danh mục món
Bước 2: Thêm khung tìm kiếm và giỏ hàng
Nút tìm kiếm (Search):
Ở góc trên cùng (trên hoặc dưới thanh điều hướng), vẽ một hình chữ nhật để làm nút tìm kiếm
Dán một biểu tượng kính lúp hoặc đặt tên “Tìm kiếm” để dễ nhận biết