Đề tài nghiên cứu trải nghiệm người dùng và thiết kế giao diện cho phần mềm quản lý bài tập lớn của khoa cntt

TRƯỜNG ĐẠI HỌC MỞ HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN Môn: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG BÁO CÁO BÀI TẬP LỚN Đề tài: Nghiên cứu trải nghiệm người dùng thiết kế giao diện cho phần mềm quản lý tập lớn khoa CNTT Sinh viên thực hiện: Phạm Khánh Tùng – 1810A01 Giảng viên hướng dẫn: ThS Nguyễn Thị Quỳnh Như Hà Nội 2022 MỤC LỤC I Tiến hành nghiên cứu tìm hiểu dự án (nghiên cứu đề tài) .1 II Nghiên cứu tìm hiểu người dùng (Bảng câu hỏi khảo sát người dùng) .1 III Từ việc khảo sát người dùng trên, rút yêu cầu, đặc tả yêu cầu cho ứng dụng Yêu cầu chức .3 Đặc tả yêu cầu chức 3 Yêu cầu phi chức IV Thiết kế bố cục layout Phác thảo ý tưởng Phác thảo layout Giao diện hoàn chỉnh 21 V Kết luận .44 I Tiến hành nghiên cứu tìm hiểu dự án (nghiên cứu đề tài) Tên đề tài  Nghiên cứu trải nghiệm người dùng thiết kế giao diện cho phần mềm quản lý tập lớn khoa CNTT Mục đích đề tài  Nghiên cứu, đánh giá phân tích nhu cầu, hành vi, thói quen, khả người dùng  Từ rút ý tưởng, phong cách việc thiết kế phần mềm / ứng dụng với vai trò quản lý Bài tập lớn, dựa thực tiễn yếu tố thu thập từ người dùng Kết mong muốn đạt  Từ yếu tố trên, thiết kế giao diện hoàn chỉnh cho ứng dụng quản lý tập lớn, có khả tương thích với đối tượng, độ tuổi, giới tính… II ST T Nghiên cứu tìm hiểu người dùng (Bảng câu hỏi khảo sát người dùng) Câu hỏi khảo sát Phương án trả lời Đối tượng sử dụng ai? + Giảng viên + Sinh viên + Thầy cô giáo vụ, phụ trách thư viện Bạn sử dụng + Đa số sử phần mềm lưu dụng qua ứng dụng trữ liệu giống lưu trữ liệu, hay chưa? Google drive, Onedrive, Và bạn thích điểm Dropbox… ứng dụng đó, yếu tố + Điểm họ thích khiến bạn lựa chọn để ứng dụng sử dụng ứng dụng khả lưu trữ với đó? dung lượng lớn, lâu dài, giao diện thân thiện, dễ sử dụng, hỗ trợ tiếng việt chi phí khơng cao miễn phí Mục đích thiết kế UI: thiết lập quyền hạn, mục đích sử dụng ứng dụng đối tượng UX: nắm bắt thói quen người dùng thiết kế UI: bổ sung khả chưa có từ ứng dụng trước Độ tuổi họ? + Sinh viên (năm nhất, hai, ba, năm cuối) + Giảng viên, phận thư viện (23 – 40, 41 - 60) Họ muốn sử dụng ứng dụng dạng webform website hay phải tải máy winform? + Đa số bạn sinh viên từ năm đến năm lại có nhu cầu có ứng dụng / phần mềm riêng để quản lý tập lớn + Giảng viên từ độ tuổi 23-40 (trước trung niên) thường có nhu cầu ứng dụng/phần mềm hồn chỉnh để quản lý tập lớn sinh viên + Độ tuổi từ 41 trở sau (trung niên) thường có số giảng viên muốn trì thói quen dùng ứng dụng phần mềm từ trước lưu trữ thiết bị họ + Các bạn sinh viên thường mong muốn ứng dụng sử dụng dạng webform -> thuận tiện, nhanh chóng, khơng tốn dung lượng thiết bị, tương tác nơi đâu thiết bị + Các giảng viên hay thủ thư thường cần ứng dụng hoàn chỉnh dạng winform -> lưu trữ nhiều dung lượng hơn, làm việc khơng có kết nối + UI/UX: biết nhu cầu, mục đích sử dụng đối tượng + UI/UX: thiết kế ứng dụng phù hợp với nhu cầu sử dụng đối tượng + UI: với đối tượng có nhu cầu sử dụng dạng web -> phải thiết kế đủ chức hỗ trợ đánh dấu, lưu trữ tải liệu máy Bạn có quan tâm tới giao diện, hình thức ứng dụng? Bạn thường hay sử dụng ứng dụng tối (dark mode) hay sáng (light mode)? + Khoảng 90% câu trả lời có quan tâm Một ứng dụng đẹp hình thức thường đem lại cảm giác làm việc tốt hơn, thoải mái + Khoảng 60% người dùng sử dụng giao diện sáng -> thuận mắt, dễ nhìn, đa số người lớn tuổi ưu tiên light mode + Còn lại ưu tiên giao diện tối -> giảm độ chói mắt làm việc vào ban đêm khơng gian ánh sáng + UI/UX: chủ động, định giao diện thiết kế có đẹp hay khơng UI/UX: thiết kế giao diện chế độ sáng tối (có thể tùy chỉnh) (Một phần cịn phụ thuộc vào thói quen, sở thích người dùng) III Từ việc khảo sát người dùng trên, rút yêu cầu, đặc tả yêu cầu cho ứng dụng Yêu cầu chức - Với đối tượng giảng viên  Tạo thư mục (theo yêu cầu định)  Giám sát trình, tiến độ làm tập lớn sinh viên - Với đối tượng sinh viên  Thêm, sửa, xóa thư mục tập lớn Đặc tả yêu cầu chức 2.1 Giảng viên - Tạo thư mục (theo yêu cầu định) + Thông tin chung Tên chức Mô tả Tác nhân Tạo thư mục Tạo thư mục chứa tập lớn theo yêu cầu định (Giới hạn thời gian nộp, nộp đủ file, …) Người dùng + Mô tả kiện Hành động người dùng Chọn tab “Quản lý tập lớn” -> “Tạo thư mục” Nhập thông tin thành phần + Tên thư mục (FH2223.CN01 - Thiết kế đồ họa) + Năm học + Học kỳ + Thời hạn (Deadline, thời gian thư mục thêm, sửa, xóa) + Đánh dấu thư mục có bắt buộc hay không? Nhấn nụt “Tạo mới” Phản ứng hệ thống Nhập thông tin thành phần thư mục định tạo Ghi nhận thông tin nhập Nếu thông tin nhập vào đầy đủ thỏa mãn yêu cầu -> tạo thư mục Nếu thông tin nhập vào chưa đủ, chưa thỏa mãn yêu cầu (như deadline nhỏ thời gian tại) -> thông báo người dùng nhập lại - Giám sát trình, tiến độ làm tập lớn sinh viên + Thông tin chung Tên chức Mô tả Tác nhân Giám sát trình, tiến độ làm tập lớn sinh viên Theo dõi tiến độ, q trình Người dùng + Mơ tả kiện Hành động người dùng Phản ứng hệ thống + Chọn tab “Quản lý tập Hiển thị thư mục tập lớn” lớn -> theo dõi tiến độ sinh viên + Chọn mục thông báo đầu Hiển thị xem sinh viên trang (Notifications) thêm, sửa, xóa, tương tác với thư mục tập lớn 2.2 Sinh viên Thêm, sửa, xóa thư mục tập lớn + Thơng tin chung Tên chức Mô tả Giới hạn Tác nhân Thêm, sửa, xóa thư mục tập lớn Thêm mới, chỉnh sửa, xóa thư mục tập lớn Sinh viên phép thêm, sửa, xóa thư mục thân Người dùng + Mô tả kiện Hành động người dùng + Chọn tab “Quản lý tập lớn” + Chọn năm học, học kỳ + Chọn thư mục lớp mà sinh viên theo học học kỳ Thêm, sửa, xóa file Submit Phản ứng hệ thống Hiển thị hình thư mục tập lớn Ghi nhận thông tin Nếu thông tin nhập vào đầy đủ thỏa mãn yêu cầu -> tiến hành thêm file, sửa file, xóa file Nếu thơng tin nhập vào chưa đủ, chưa thỏa mãn yêu cầu (như file chưa định dạng yêu cầu, chưa đủ số lượng file, thiếu file thư mục đánh dấu bắt buộc) -> thông báo người dùng thao tác lại Yêu cầu phi chức - Thiết kế giao diện hai chế độ sáng tối (Dark mode/Light mode) - Thiết kế chức đăng ký, đăng nhập bao gồm chỉnh sửa tài khoản (thay đổi mật khẩu, thông tin cá nhân), bảo mật phân quyền tài khoản - Tích hợp chức đăng nhập nhanh qua Google (tài khoản sinh viên) - Thiết kế phù hợp với đa dạng người dùng + Tùy chỉnh cỡ chữ -> đối tượng hạn chế khả nhìn + Khơng sử dụng màu q chói IV Thiết kế bố cục layout Phác thảo ý tưởng 1.1 Trang giới thiệu - Trang giới thiệu xuất mở ứng dụng - Header có Logo, tên ứng dụng, mục đăng nhập, đăng ký - Giới thiệu ứng dụng + hình ảnh minh họa cho ứng dụng - Footer có logo, tên ứng dụng, Giới thiệu công ty, ứng dụng; Hỗ trợ; Thông tin tuyển dụng 1.2 Trang đăng nhập - Header có Thanh menu, Logo, tên ứng dụng - Mục đăng nhập có tên đăng nhập, mật khẩu, đăng ký quên mật - Hỗ trợ đăng nhập nhanh qua hệ thống Google, sử dụng tài khoản Gmail sinh viên -> đăng nhập, phân quyền nhanh - Hệ thống phản ứng lại thông tin đăng nhập chưa thiếu thông tin 1.3 Trang đăng ký - Header có Thanh menu, Logo, tên ứng dụng - Mục đăng ký có thơng tin cần thiết họ tên, lớp hành chính, … - Hoặc có tài khoản, người dùng chọn mục đăng nhập - Nút hủy để hủy yêu cầu đăng ký -> trở lại trang giới thiệu - Hệ thống phản ứng lại thông tin đăng ký chưa yêu cầu thiếu thông tin 1.4 1.5 Trang chủ - Trang chủ hiển thị đăng nhập thành cơng - Header có Thanh menu, Logo, tên ứng dụng, tìm kiếm, mục thơng báo (notification), mục thông tin cá nhân - Trang chủ có thơng tin phần ghi (có thể thêm mới), thư mục gán dấu (tiện theo dõi) thư mục vừa theo dõi, vừa tương tác Trang thông tin cá nhân - Header có Thanh menu, Logo, tên ứng dụng, tìm kiếm, mục thông báo (notification), mục thông tin cá nhân - Mục thơng tin cá nhân có ảnh avatar (có thể thay đổi), tên người dùng, email sử dụng - Các thơng tin liên hệ ngày sinh, lớp hành chính, giới tính, số điện thoại, … 1.6 Trang quản lý tập lớn - Header có Thanh menu, Logo, tên ứng dụng, tìm kiếm, mục thơng báo (notification), mục thông tin cá nhân - Mục filter theo Học kỳ, năm học - Sau lọc theo Filter, môn thỏa mãn yêu cầu 1.7 Trang qn mật (tìm lại tài khoản) - Header có Thanh menu, Logo, tên ứng dụng - Textbox nhập tên đăng nhập số điện thoại để tìm, nhập tên đăng nhập tìm lại mật qua đường link xác thực Mail Nếu nhập số điện thoại tìm qua mã xác minh tin nhắn Trang đổi mật - Header có Thanh menu, Logo, tên ứng dụng - Textbox nhập mật cũ, mật xác nhận mật (check có điều kiện) 1.8 3.6 Trang đổi mật Giao diện trang đổi mật 30 3.7 Trang tìm lại tài khoản (quên mật khẩu) Giao diện Trang Quên mật 31 Phản hồi hệ thống thiếu thông tin 32 Phản hồi hệ thống khơng tìm thấy tài khoản cần khôi phục mật 33 3.8 Trang quản lý tập lớn chia theo môn Giao diện Trang quản lý tập lớn môn học 34 3.9 Trang quản lý File (theo định dạng) môn Các file (theo định dạng) 35 3.10 Trang quản lý tệp (chia theo định dạng) môn File tệp rỗng 36 Giao diện tiến hành thêm tệp 37 Giao diện chọn tệp để đăng tải 38 Đăng tải thành cong tệp Báo cáo BTL.docx 39 - Có thể chọn chế độ View dạng ô danh sách 40 Các tệp File báo cáo hiển thị dạng danh sách 41 - Ngồi cịn đặt tên cho tệp đăng tải 42 Kết lưu tên tệp thành tên 43 V Kết luận Ưu điểm - Màu sắc giao diện đại, việc sử dụng gam màu Xanh tạo quán cho tổng thể ứng dụng, đem lại dễ chịu, thoải mái làm việc, học tập - Chức ứng dụng dễ dàng sử dụng, tập trung vào nhu cầu cần thiết - Tăng cường khả tương tác người dùng với người dùng thông qua chức phân quyền, thêm sửa xóa Hạn chế - Ứng dụng nhiều người tương tác lúc nên dễ gây lỗi chậm - Ứng dụng dễ sử dụng tương đối khó xây dựng - Ứng dụng cần sử dụng Internet để thực chức Thêm, sửa, xóa thư mục Hướng phát triển - Triển khai vào việc lập trình, cải tiến để xây dựng hồn chỉnh Ứng dụng Quản lý Bài Tập lớn từ thiết kế để public lên mạng cho người biết đến - Cải thiện số chức chưa hoàn chỉnh theo góp ý thầy, - Phát triển ứng dụng cho nhiều tảng khác � Link giao diện Demo Figma : https://www.figma.com/file/abeP3BgFdqpH6y4XAmFOnB/Untitled?nodeid=0%3A1&t=2YLwupr2Lm9Hmepq-1 44