Tiến hành nghiên cứu và tìm hiểu dự án (nghiên cứu đề 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
2 Mục đích của đề tài
Nghiên cứu, đánh giá và phân tích nhu cầu, hành vi, thói quen, khả năng của người dùng.
Dựa trên những yếu tố thực tiễn thu thập từ người dùng, chúng tôi đã phát triển các ý tưởng và phong cách thiết kế cho phần mềm/quản lý Bài tập lớn.
3 Kết quả mong muốn đạt được
Dựa trên các yếu tố đã nêu, chúng ta có thể thiết kế một giao diện hoàn chỉnh cho ứng dụng quản lý bài tập lớn, đảm bảo tính tương thích với mọi đối tượng, độ tuổi và giới tính.
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)
T 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 sẽ là ai? + Giảng viên
+ Sinh viên + Thầy cô giáo vụ, phụ trách thư viện
UI: thiết lập quyền hạn, mục đích sử dụng ứng dụng của từng đối tượng
2 Bạn đã từng sử dụng bất kì phần mềm lưu trữ dữ liệu nào giống như vậy hay chưa?
Và bạn thích điểm gì ở ứng dụng đó, yếu tố khiến bạn lựa chọn để sử dụng ứng dụng đó?
+ Đa số đều đã từng sử dụng qua các ứng dụng lưu trữ dữ liệu, như Google drive, Onedrive, Dropbox…
Người dùng ưa chuộng các ứng dụng lưu trữ nhờ vào dung lượng lớn và bền vững, giao diện thân thiện và dễ sử dụng, hỗ trợ tiếng Việt, cùng với chi phí thấp hoặc miễn phí.
UX: nắm bắt được thói quen của người dùng khi thiết kế.
UI: bổ sung những khả năng chưa có từ những ứng dụng trước đó.
+ Sinh viên (năm nhất, hai, ba, năm cuối)
+ Giảng viên, bộ phận thư viện (23 –
Hầu hết sinh viên từ năm nhất cho đến những năm tiếp theo đều cần một ứng dụng hoặc phần mềm riêng để quản lý các bài tập lớn của mình.
Giảng viên trong độ tuổi từ 23-40 thường tìm kiếm một ứng dụng hoặc phần mềm hoàn chỉnh để quản lý bài tập lớn của sinh viên, trong khi những giảng viên từ 41 tuổi trở lên thường có xu hướng duy trì thói quen sử dụng các ứng dụng hoặc phần mềm đã quen thuộc, hoặc lưu trữ tài liệu trên thiết bị cá nhân của họ.
+ UI/UX: biết được nhu cầu, mục đích sử dụng của từng đối tượng
4 Họ muốn sử dụng ứng dụng dạng webform ngay trên website hay phải tải
+ Các bạn sinh viên thường sẽ mong muốn ứng dụng mình sử dụng ở dạng webform ->
+ UI/UX: thiết kế ứng dụng phù hợp với nhu cầu sử dụng từng đối tượng
5 Bạn có quá quan tâm tới giao diện, hình thức của ứng dụng?
+ Khoảng 90% câu trả lời sẽ là có quan tâm
Một ứng dụng đẹp về 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 hơn
+ UI/UX: chủ động, quyết định giao diện mình thiết kế có đẹp hay không
6 Bạn thường hay sử dụng ứng dụng trong nền tối (dark mode) hay nền sáng (light mode)?
+ Khoảng 60% người dùng sử dụng trong giao diện sáng -> thuận mắt, dễ nhìn, đa số những người lớn tuổi sẽ ưu tiên light mode.
+ Còn lại là ưu tiên giao diện tối -> giảm độ chói mắt nếu làm việc vào ban đêm hoặc không gian ít ánh sáng.
(Một phần còn phụ thuộc vào thói quen, sở thích của người dùng)
UI/UX: thiết kế giao diện ở cả 2 chế độ sáng và tối (có thể tùy chỉnh)
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
Yêu cầu chức năng
- Với đối tượng giảng viên
Tạo thư mục (theo yêu cầu nhất định)
Giám sát quá trình, tiến độ làm bài tập lớn của sinh viên
- Với đối tượng sinh viên
Thêm, sửa, xóa các thư mục bài tập lớn
Đặc tả yêu cầu chức năng
- Tạo thư mục (theo yêu cầu nhất định)
Tên chức năng Tạo thư mục
Mô tả Tạo các thư mục chứa bài tập lớn theo yêu cầu nhất định (Giới hạn thời gian nộp, nộp đủ file, …)
Hành động của người dùng Phản ứng hệ thống
Chọn tab “Quản lý bài tập lớn” -> “Tạo mới thư mục” Nhập thông tin thành phần của thư mục định tạo mới Nhập thông tin thành phần
(FH2223.CN01 - Thiết kế đồ họa)
+ Thời hạn (Deadline, thời gian thư mục không thể được thêm, sửa, xóa)
+ Đánh dấu thư mục có bắt buộc hay không?
Ghi nhận thông tin được nhập
Nhấn nụt “Tạo mới” Nếu thông tin nhập vào đầy đủ và thỏa mãn yêu cầu ->
Tên chức năng Giám sát quá trình, tiến độ làm bài tập lớn của sinh viên
Mô tả Theo dõi tiến độ, quá trình
Hành động của người dùng Phản ứng hệ thống
+ Chọn tab “Quản lý bài tập lớn” Hiển thị các thư mục bài tập lớn -> có thể theo dõi tiến độ của sinh viên
+ Chọn mục thông báo ở đầu trang (Notifications) Hiển thị xem sinh viên nào đã thêm, sửa, xóa, tương tác với các thư mục bài tập lớn
Thêm, sửa, xóa các thư mục bài tập lớn
Tên chức năng Thêm, sửa, xóa các thư mục bài tập lớn
Mô tả Thêm mới, chỉnh sửa, xóa các thư mục bài tập lớn của mình
Giới hạn Sinh viên chỉ được phép thêm, sửa, xóa trong thư mục của bản thân
Hành động của người dùng Phản ứng hệ thống
+ Chọn tab “Quản lý bài tập lớn”
+ Chọn năm học, học kỳ
+ Chọn thư mục các lớp mà sinh viên theo học của học kỳ đó
Hiển thị màn hình các thư mục bài tập lớn
Thêm, sửa, xóa file Ghi nhận thông tin
Submit Nếu thông tin nhập vào đầy đủ và 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 không đầy đủ hoặc không đáp ứng yêu cầu (chẳng hạn như file không đúng định dạng, thiếu số lượng file cần thiết, hoặc thiếu file ở các thư mục bắt buộc), hệ thống sẽ thông báo để người dùng thực hiện lại thao tác.
Yêu cầu phi chức năng
- Thiết kế giao diện ở cả hai chế độ sáng và tối (Dark mode/Light mode)
Thiết kế bố cục layout
Phác thảo ý tưởng
- Trang giới thiệu sẽ xuất hiện đầu tiên ngay khi 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 về công ty, ứng dụng;
Hỗ trợ; Thông tin tuyển dụng
- 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ý và quên mật khẩu
- Hỗ trợ đăng nhập nhanh qua hệ thống Google, sử dụng chính tài khoản Gmail sinh viên -> đăng nhập, phân quyền nhanh hơn
- Hệ thống cũng sẽ phản ứng lại khi thông tin đăng nhập chưa đúng hoặc thiếu thông tin.
- Header có Thanh menu, Logo, tên ứng dụng
- Mục đăng ký có các thông tin cần thiết như họ tên, lớp hành chính, …
- Hoặc nếu đã có tài khoản, người dùng có thể chọn mục đăng nhập ngay ở dưới cùng
- Nút hủy để hủy yêu cầu đăng ký -> trở lại trang giới thiệu
- Hệ thống cũng sẽ phản ứng lại khi thông tin đăng ký chưa đúng yêu cầu hoặc thiếu thông tin.
- Trang chủ sẽ được hiển thị ngay khi đăng nhập thành công
- Header có Thanh menu, Logo, tên ứng dụng, thanh tìm kiếm, mục thông báo (notification), mục thông tin cá nhân
Trang chủ cung cấp thông tin quan trọng như phần ghi chú có thể được thêm mới, các thư mục được gán dấu sao để tiện theo dõi, cũng như các thư mục mà người dùng vừa theo dõi vừa tương tác.
- Header có Thanh menu, Logo, tên ứng dụng, thanh 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ệ như ngày sinh, lớp hành chính, giới tính, số điện thoại, …
1.6 Trang quản lý bài tập lớn
- Header có Thanh menu, Logo, tên ứng dụng, thanh 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 khi lọc theo Filter, các môn thỏa mãn yêu cầu sẽ hiện ở dưới
1.7 Trang quên mật khẩu (tìm lại tài khoản)
- Header có Thanh menu, Logo, tên ứng dụng
Nhập tên đăng nhập hoặc số điện thoại để tìm kiếm tài khoản Nếu bạn nhập tên đăng nhập, mật khẩu sẽ được khôi phục qua đường link xác thực gửi đến email Nếu bạn nhập số điện thoại, mã xác minh sẽ được gửi qua tin nhắn để hỗ trợ tìm lại tài khoản.
Phác thảo layout
2.5 Trang thông tin cá nhân
2.6 Trang quản lý bài tập lớn
2.7 Trang quản lý các thư mục của từng môn
2.8 File chứa tệp (theo định dạng)
Giao diện hoàn chỉnh
Giao diện Trang giới thiệu (xuất hiện ngay khi vào ứng dụng)
Giao diện Trang đăng nhập
Phản hồi của hệ thống khi thiếu thông tin đăng nhập
Phản hồi của hệ thống khi nhập sai thông tin Đăng nhập
Giao diện Trang đăng ký tài khoản
Phản hồi của hệ thống khi thiếu thông tin Đăng ký tài khoản
Phản hồi của hệ thống khi Mật khẩu nhập lại không khớp
Giao diện Trang cá nhân
Giao diện trang đổi mật khẩu
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 khẩu
Phản hồi của hệ thống khi thiếu thông tin
Phản hồi của hệ thống khi không tìm thấy tài khoản cần khôi phục mật khẩu
3.8 Trang quản lý bài tập lớn chia theo các môn
3.9 Trang quản lý từng File (theo định dạng) của từng môn
Các file (theo định dạng)
3.10 Trang quản lý các tệp (chia theo định dạng) của các môn
Giao diện khi tiến hành thêm tệp mới
Giao diện khi đã chọn 1 tệp để đăng tải Đăng tải thành cong tệp Báo cáo BTL.docx
- Có thể chọn chế độ View dạng ô hoặc danh sách
Các tệp của File báo cáo hiển thị dưới dạng danh sách
- Ngoài ra còn có thể đặt tên cho tệp khi đăng tải
Kết quả khi lưu tên tệp thành tên mới