hầu hết chúng không lưu trữ được thông tin đánh giáUI: thiết kế thông tin quảng cáo cho hợp lý, tối ưu được khả năng sử dụng ứng dụng.5 Bạn mong chờ điều gì về ứng dụng quét Qr code này?
Trang 1TRƯỜNG ĐẠI HỌC MỞ HÀ NỘIKHOA CÔNG NGHỆ THÔNG TIN
BÁO CÁO BÀI TẬP LỚN MÔN: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG
Trang 2MỤC LỤC
1 Tiến hành nghiên cứu và tìm hiểu dự án2
a Tên đề tài 2 b Mục đích đề tài 2
c Kết quả mong muốn đạt được 2
2 Nghiên cứu và tìm hiểu người dùng2
3 Từ việc khảo sát người dùng, rút ra các yêu cầu, đặc tả yêu cầu cho ứng dụng4
a Yêu cầu chức năng 4 b Đặc tả yêu cầu chức năng chính 5
4 Thiết kế bố cục layout8
a Phác thảo ý tưởng 8
b Phác thảo layout ( Sketch & Wireframe ) 12 c Giao diện hoàn chỉnh 22
5 Kết luận29
a Ưu điểm 29 b Hạn chế 29 c Hướng phát triển 29
6 Tài liệu tham khảo307 Link giao diện demo trên Figma 30
Trang 31 Tiến hành nghiên cứu và tìm hiểu dự án (nghiên cứu đề tài)
• Từ đó rút ra được những ý tưởng, phong cách trong việc thiết kế một phần mềm / ứng dụng với vai trò là quản lý Bài tập lớn, dựa trên thực tiễn những yếu tố đã thu thập từ người dùng.
c Kết quả mong muốn đạt được
• Từ những yếu tố trên, có thể thiết kế được một giao diện hoàn chỉnh cho một ứng dụng quản lý bài tập lớn, có khả năng tương thích với mọi đối tượng, mọi độ tuổi, giới tính…
2 Nghiên cứu và tìm hiểu về người dùng (Bảng câu hỏi khảo sát người dùng)
STTCâu hỏi khảo sátPhương án trả lờiMục đích thiết kế1 Đối tượng sử dụng
ứng dụng là ai ?
+ Người có nhu cầu cần biết nguồn gốc XS của sản
Trang 4hầu hết chúng không lưu trữ được thông tin đánh giá
UI: thiết kế thông tin quảng cáo cho hợp lý, tối ưu được khả năng sử dụng ứng dụng.
5 Bạn mong chờ điều gì về ứng dụng quét Qr code này?
+Giao diện phải dễ sử dụng +Mượt mà, khi mở lên tin người dùng và thiết kế tối ưu được hiệu năng và các chức năng sao cho hợp lý và dễ nhìn.
Trang 53 Từ việc khảo sát người dùng ở trên, rút ra các yêu cầu, đặc tả các
yêu cầu cho ứng dụng
a Yêu cầu chức năng
- Đăng nhập, đăng ký, đăng xuất (CN phụ)
- Cài đặt, thông tin APP (CN phụ)
- Thông báo (CN phụ)
b Đặc tả yêu cầu chức năng chính
Trang 6-CN Quét mã QR Code
+ Thông tin chung
Tên chức năng Quét mã QR Code
Mô tả Chuyển đến Camera để quét mã QR Code, ngoài ra có thêm các chức năng phụ như nhập Barcode bằng bàn phím và sử
Chuyển đến chức năng quét mã QR
Click vào button “Nhập barcode bằng
bàn phím”
Bàn phím số hiện lên để nhập Barcode
Click vào button “Sử dụng hình ảnh có
Mở thư viện ảnh lên
-CN Đánh giá, báo cáo sản phẩm+ Thông tin chung
Tên chức năng “Đánh giá” và “Báo cáo” sản phẩm
Mô tả + Đánh giá: xuất hiện các lựa chọn kiểu vote sao cho người dùng chọn, khung nhập nhận xét cho sản phẩm
+ Báo cáo: Xuất hiện các báo cáo được soạn sẵn cho người dùng chọn, khung nhập báo cáo nếu người dùng có ý kiến khác
Tác nhân Người dùng
Trang 7+ Mô tả sự kiện
Hành động của người dùngPhản ứng hệ thống
1 Click vào button “Đánh giá” Chuyển đến chức năng đánh giá Lựa chọn số “ngôi sao” với từng mục,
nhập nhận xét
Đợi người dùng thao tác
Ấn nút “Đăng lên” Tiếp nhận thông tin được nhập từ người dùng và upload thông tin lên trang 2 Click vào button “Báo cáo” Chuyển đến chức năng báo cáo Lựa chọn các thông tin được soạn sẵn
hoặc nhập thông tin vào khung báo cáo
+Nếu ND chọn ngoài lựa chọn “Khác” thì đóng băng khung nhập báo cáo +Nếu ND chọn lựa chọn “Khác” thì đóng băng các lựa chọn khác và mở khung nhập để ND nhập báo cáo vào Ấn nút “Báo cáo” Tiếp nhận thông tin được nhập từ người
dùng và gửi về cho đội ngũ kiểm duyệt xem xét
-CN Tin tức
+ Thông tin chung
Tên chức năng Tin tức
Mô tả Trang tổng hợp tin tức về sản phẩm có chủ đề liên quan đến nguồn gốc xuất sứ và chống giả
Trang 8+ Thông tin chung
Tên chức năng Xu hướng tiêu dùng
Mô tả Trang tổng hợp và xếp hạng các sản phẩm được người dùng quét và đánh giá nhiều trong hệ thống
Tác nhân Người dùng + Mô tả sự kiện
Hành động của người dùngPhản ứng hệ thống
Click vào button “ Xu hướng tiêu dùng” Chuyển đến trang Xu hướng tiêu dùng Lựa chọn trang “Thiết bị di động” hoặc
“Mỹ phẩm” hoặc “Thực phẩm”
Chuyển đến trang “Thiết bị di động” hoặc “Mỹ phẩm” hoặc “Thực phẩm”
-CN Lịch sử quét
+ Thông tin chung
Tên chức năng Lịch sử quét
Mô tả Trang tổng hợp lịch sử đã quét của người dùng bao gồm ngày giờ quét và thông tin sản phẩm
Tác nhân Người dùng
Trang 9+ Mô tả sự kiện
Hành động của người dùngPhản ứng hệ thống
Click vào button “ Lịch sử đánh giá” hoặc “Lịch sử”
Chuyển đến trang Lịch sử quét Click vào thông tin sản phẩm bất kì Chuyển đến trang thông tin sản phẩm đó
4 Thiết kế bố cục layout
a Phác thảo ý tưởng
- Trang Camera quét mã QR
Trang này sẽ xuất hiện đầu tiên ngay khi mở ứng dụng Header có nút “thoát”, “Hỗ trợ”, “Đèn pin”
Content có nút “Nhập mã barcode bằng tay”, “Quét”, ”Sử dụng hình ảnh có sẵn” và khung quét
- Trang chủ
Header có menu, tìm kiếm và thông báo
Content có banner quảng cáo, thông tin user ( tên và hạng bậc), các chức năng chính : Xu hướng tiêu dùng, Bảng tin, Lịch sử quét, Cài đặt Trang tin tức dạng xem nhanh.
Footer có nút “Quét mã QR”, “Tin tức”, “Lích sử”
Trang 10- Trang giao diện sản phẩm
Header có nút thoát về trang chủ và thông tin trang hiện tại Content có các hình ảnh sản phẩm, tên sản phẩm, giá bán, mã vạch, số lượng đánh giá, thông tin sản phẩm và doanh nghiệp sản xuất, các đánh giá sản phẩm Ngoài ra còn có nút “Thích” và “Chia sẻ”.
Footer có nút “Đánh giá”, “Báo cáo”
- Trang đánh giá
Header có nút trở về trang thông tin sản phẩm và thông tin trang hiện tại
Content có thông tin sản phẩm dạng xem nhanh, các lựa chọn đánh giá được biên soạn sẵn, các ngôi sao để người dùng vote và mục nhận xét để người dùng nhập vào
Footer có nút “Đăng lên”
- Trang báo cáo
Header có nút trở về trang thông tin sản phẩm và thông tin trang hiện tại
Content có thông tin sản phẩm dạng xem nhanh, các lựa chọn báo cáo được biên soạn sẵn và mục viết báo cáo để người dùng nhập vào
Footer có nút “Báo cáo”
- Trang tin tức
Trang 11Header có nút trở về trang chủ và thông tin trang hiện tại
Content có 2 mục trang con là “Tin tức HOT” và “ Mới cập nhật” Ở dưới cà các bài báo tin tức dạng xem nhanh Ngoài ra còn có trang tin tức chi tiết khi người dùng click vào tin tức cụ thể
Footer trang tin tức chi tiết có nguồn của tin tức và ngày giờ được xuất bản
- Trang xu hướng tiêu dùng
Header có nút trở về trang chủ và thông tin trang hiện tại Content có 3 mục trang con là “Thiết bị di động”, “Mỹ phẩm” và “Thực phẩm” Có banner quảng cáo và băng xếp hạng xu hướng tiêu dùng
- Trang Đăng nhập và Đăng ký
Header có logo ứng dụng trên nền màu xanh
Content có 2 trang con là “Đăng nhập” và “Đăng kí” Mục nhập số điện thoại, mật khẩu, nhập lại mật khẩu Nút “Đăng nhập”, “Đăng ký”, “Đăng nhập bằng OTP”
Footer có nút đăng nhập bằng hình thức Facebook hoặc Google
- Trang cài đặt
Header có nút trở về trang chủ và thông tin trang hiện tại Content có biểu tượng cài đặt, các mục cài đặt
Footer có nút “Đăng xuất” và “Thông tin về App”
Trang 12- Trang thông báo
Header có nút trở về trang chủ và thông tin trang hiện tại Content có các thông báo hiển thị ảnh, thông tin thông báo và thời gian thông báo
- Trang thông tin APP
Header có nút trở về trang chủ
Content có logo ứng dụng, thông tin về APP như : tên sinh viên, môn học, giảng viên phụ trách bộ môn
b Phác thảo layout ( Sketch & Wireframe )
- Trang Camera quét mã QR
Trang 13- Trang chủ
Trang 14- Trang giao diện sản phẩm
Trang 16- Trang đánh giá & báo cáo
Trang 17- Trang tin tức
Trang 18- Trang xu hướng tiêu dùng
Trang 19- Trang Đăng nhập và Đăng ký
Trang 20- Trang cài đặt
Trang 21- Trang thông báo
Trang 22- Trang thông tin APP
Trang 23c Giao diện hoàn chỉnh
Trang 305 Kết luận
Ưu điểm
- Màu sắc là màu xanh dương của logo ứng dụng làm nổi bật lên độ nhận diện
thương hiệu tốt cho ứng dụng Ngoài ra màu xanh thể hiện cho công nghệ kết hợp hài hòa với cách phối màu đơn sắc tạo sự dễ chịu cho mắt khi sử dụng.
- Cách sắp xếp các chức năng nổi bật và logic làm cho người dùng dễ sử
dụng Chức năng chính được làm nổi bật lên ngoài cho người dùng dễ nhìn thấy.
- Giao diện hấp dẫn và tương tác sẽ kích thích người dùng tương tác nhiều
hơn với sản phẩm Điều này có thể thúc đẩy sự hứng thú và tạo ra trải
- Có thể gây đơ nếu máy yếu vì khi mở ứng dụng sẽ tự động mở camera lên gây
nhiều khó khăn cho việc xử lý của máy.
- Giao diện đơn giản, nhiều trang có nhiều thông tin nên mang lại cảm giác hơi
thô và nhàm chán
- Cần có internet thì mới trả về kết quả khi quét ( đối với QR code dạng thông
tin có sẵn thì không cần )
Hướng phát triển
- Tối ưu hóa ứng dụng thêm nữa để mang lại trải nghiệm mượt mà hơn.- Cải thiện một số chức năng chưa hoàn chỉnh theo góp ý của mọi người.- Cải thiện giao diện cho đơn giản và hiện đại hơn.
- Phát triển ứng dụng thêm cho nền tảng IOS.
Trang 316 Tài liệu tham khảo