(Tiểu luận) đề 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) 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 Đặ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 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) ST Câu hỏi khảo sát T Đối tượng sử dụng ai? Bạn sử dụng phần mềm lưu trữ liệu giống hay chưa? Và bạn thích điểm ứng dụng đó, yếu tố khiến bạn lựa chọn để sử dụng ứng dụng đó? Phương án trả lời Mục đích thiết kế + Giảng viên + Sinh viên + Thầy cô giáo vụ, phụ trách thư viện + Đa số sử dụng qua ứng dụng lưu trữ liệu, Google drive, Onedrive, Dropbox… UI: thiết lập quyền hạn, mục đích sử dụng ứng dụng đối tượng + Điểm họ thích ứ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í Độ 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) 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 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 + UI/UX: biết nhu viên từ năm đến cầu, mục đích sử dụng năm cịn lại có đối tượng 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: 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ó q quan tâm tới giao diện, hình thức ứng dụng? mode) hay sáng (light mode)? Bạn thường hay sử dụng ứng dụng tối (dark + 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 + UI/UX: chủ động, định giao diện thiết kế có đẹp hay khơng + 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: 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ạ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, …) Tác nhân + Người dùng Mô tả kiện Phản ứng hệ thống 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 khơng thể 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” - 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 Giám sát trình, tiến độ làm tập lớn Mô tả Tác nhân Theo dõi tiến độ, trình Người dùng sinh viên + 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 -> 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 + 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ả 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 Giới hạn tập lớn Sinh viên phép thêm, sửa, xóa thư mục thân Tác nhân Người dùng + Mô tả kiện + lớn” + Chọn thư mục lớp mà Hành động người dùng + Chọn tab “Quản lý tập sinh viên theo học học kỳ Thêm, sửa, xóa file Submit Chọn năm học, học kỳ 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 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 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 1.5 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 quên 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 1.8 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)