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ỘI KHOA 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
Hà Nội – 2023
Trang 2MỤC LỤC
1 Tiến hành nghiên cứu và tìm hiểu dự án 2
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ùng 2
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ụng 4
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 layout 8
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ận 29
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ảo 30
7 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)
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)
STT Câu hỏi khảo sát Phương án trả lời Mụ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 phẩm
+ Người có nhu cầu mua sắm tại các siêu thị+ Độ tuổi tiếp cận 20-45T
UX: nắm bắt được khả năng sử dụng ứng dụng của người dùng để thiết kế
UI: thiết kế, thiết lập các chức năng
Trang 4UX/UI: thiết kế và sắp xếp gần giống form các ứng dụng quét mã QR hiện hành để người dùng
UX/UI: nắm bắt thông tin người dùng và thiết
kế các chức năng chính sao cho hợp lý và dễ nhìn
+Nhiều lúc bị đơ gây cản trở sử dụng
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 không bị chậm trễ và có thểquét được ngay
+Không cần đăng nhập mà vẫn quét tra thông tin sản
UX/UI: nắm bắt thông 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 chohợp lý và dễ nhìn
Trang 5UX: nắm bắt được thông tin người dùng và xu hướng sử dụng ứng dụngvào các mục đích khác.
3 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ử dụng hình ảnh sẵn có để quét
hình mã QR
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ó
sẵn”
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Đợ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áoLự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
+ 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- 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ácchứ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ạiContent 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”
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ạiContent 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 nghiệm đáng nhớ
- Tối ưu hóa hiệu suất ,thời gian tải trang, giảm lag, và đảm bảo ứng dụng
hoạt động mượt mà
- Không cần đăng nhập mà vẫn sử dụng được ứng dụng để quét.
Hạn chế
- 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
- BTL Khóa 18,19
- Ứng dụng iCheck
7 Link giao diện demo trên Figma
https://www.figma.com/file/yh03jBsTR9sOza4rpx7f5j/BTL_LeTrongPhu?type=design&node-id=0%3A1&mode=design&t=nwlVibTiEqocSDrg-1