Btl it62 ehou

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

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

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

Nế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í

Bướ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

Vấ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:

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

Danh 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

Bâ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:

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

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