TỔNG LIÊN ĐOÀN LAO ĐỘNG VIỆT NAMTRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNGKHOA CÔNG NGHỆ THÔNG TINLÂM THẢO NGUYÊN - 52000374NGUYỄN MINH NHẬT - 51900667ỨNG DỤNG CHẤM CÔNGBÁO CÁO CUỐI KỲTHIẾT KẾ GIAO DI
Trang 1TỔNG LIÊN ĐOÀN LAO ĐỘNG VIỆT NAM
TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNGKHOA CÔNG NGHỆ THÔNG TIN
LÂM THẢO NGUYÊN - 52000374NGUYỄN MINH NHẬT - 51900667
ỨNG DỤNG CHẤM CÔNGBÁO CÁO CUỐI KỲ
THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG
THÀNH PHỐ HỒ CHÍ MINH, NĂM 2023
Trang 2TỔNG LIÊN ĐOÀN LAO ĐỘNG VIỆT NAM
TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNGKHOA CÔNG NGHỆ THÔNG TIN
LÂM THẢO NGUYÊN - 52000374NGUYỄN MINH NHẬT - 51900667
ỨNG DỤNG CHẤM CÔNGBÁO CÁO GIỮA KỲ
THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG
Người hướng dẫn
TS DZOÃN XUÂN THANH
THÀNH PHỐ HỒ CHÍ MINH, NĂM 2023
Trang 3LỜI CẢM ƠN
Chúng em xin chân thành cảm ơn thầy Dzoãn Xuân Thanh đã truyền đạtnhững kiến thức bổ ích cho chúng em suốt học kỳ vừa qua Tuy nhiên kiến thức làvô hạn cùng với với điều kiện thời gian cũng như kinh nghiệm còn hạn chế của, bàibáo cáo này không thể tránh được những thiếu sót Em rất mong nhận được sự chỉbảo, đóng góp ý kiến của các quý thầy cô để em có điều kiện bổ sung, nâng cao kiếnthức của mình Em kính mong quý thầy/cô góp ý để hoàn thiện hơn.
Em xin chân thành cảm ơn
TP Hồ Chí Minh, ngày 10 tháng 12 năm 2023 Tác giả
Lâm Thảo NguyênNguyễn Minh Nhật
Trang 4Ngoài ra, trong Dự án còn sử dụng một số nhận xét, đánh giá cũng nhưsố liệu của các tác giả khác, cơ quan tổ chức khác đều có trích dẫn và chú thíchnguồn gốc
Nếu phát hiện có bất kỳ sự gian lận nào tôi xin hoàn toàn chịu tráchnhiệm về nội dung Dự án của mình Trường Đại học Tôn Đức Thắng không
liên quan đến những vi phạm tác quyền, bản quyền do tôi gây ra trong quá trìnhthực hiện (nếu có).
TP Hồ Chí Minh, ngày 10 tháng 12năm 2023
Tác giảLâm Thảo NguyênNguyễn Minh Nhật
Trang 5MỤC LỤC
DANH MỤC HÌNH VẼ
DANH MỤC BẢNG BIỂU
CHƯƠNG 1 GIỚI THIỆU
1.1 Khái niệm Personas
CHƯƠNG 2 TÌM HIỂU THÔNG TIN
2.1 Vai trò và trách nhiệm của nhóm người dùng
Trang 62.3.4 T – Thách thức
CHƯƠNG 3 NGHIÊN CỨU NGƯỜI DÙNG
3.1 Thông tin khảo sát
3.1.1 Thông tin người dùng
3.1.2 Yêu cầu đối với ứng dụng chấm công
4.2.1 Story Board Check-in/Check-out
4.2.2 Story Board Gửi yêu cầu hỗ trợ
4.2.3 Story Board Xem chi tiết chấm công
4.3 Bảng ưu tiên thứ tự chức năng
4.4 WorkFlow
4.4.1 Workflow ứng dụng cho nhân viên
4.4.2 Workflow ứng dụng cho Manager/Admin
CHƯƠNG 5 SKETCH
5.1 Sketch phân quyền ứng dụng cho nhân viên
5.1.1 Đăng nhập
5.1.2 Trang chủ
Trang 75.1.3 Tranng thông tin cá nhân
5.1.4 Check-in/Check-out
5.1.5 Xem chi tiết chấm công
5.1.6 Tạo báo cáo chấm công sai lệch
5.1.7 Yêu cầu tư vấn hỗ trợ
5.2 Sketch phân quyền ứng dụng cho Manager/Admin
5.2.1 Trang chủ
5.2.2 Trang quản lý nhân viên
5.2.3 Thiết lập ngày giờ chấm công cho nhân viên
5.2.4 Báo cáo chấm công sai lệch
5.2.5 Thông báo hỗ trợ tư vấn
6.1.5 Xem chi tiết chấm công
6.1.6 Tạo báo cáo chấm công sai lệch
6.1.7 Yêu cầu tư vấn hỗ trợ
6.2 Wireframe phân quyền ứng dụng cho Manager/Admin
6.2.1 Trang chủ
6.2.2 Trang quản lý nhân viên
Trang 86.2.3 Thiết lập ngày giờ chấm công cho nhân viên
6.2.4 Báo cáo chấm công sai lệch
6.2.5 Thông báo hỗ trợ tư vấn
7.1.5 Xem chi tiết chấm công
7.1.6 Tạo báo cáo chấm công sai lệch
7.1.7 Yêu cầu tư vấn hỗ trợ
7.2 Mockup phân quyền ứng dụng cho Manager/Admin
7.2.1 Trang chủ
7.2.2 Trang quản lý nhân viên
7.2.3 Thiết lập ngày giờ chấm công cho nhân viên
7.2.4 Báo cáo chấm công sai lệch
7.2.5 Thông báo hỗ trợ tư vấn
Trang 98.1.4 Check-in/Check-out
8.1.5 Xem chi tiết chấm công
8.1.6 Tạo báo cáo chấm công sai lệch
8.1.7 Yêu cầu tư vấn hỗ trợ
8.2 Prototype phân quyền ứng dụng cho Manager/Admin
8.2.1 Trang chủ Manager
8.2.2 Trang quản lý nhân viên
8.2.3 Thiết lập ngày giờ chấm công cho nhân viên
8.2.4 Báo cáo chấm công sai lệch
8.2.5 Thông báo hỗ trợ tư vấn
9.3 Bảng phân công công việc
TÀI LIỆU THAM KHẢO
Trang 10Hình 7: Thống kê về mục tiêu mong muốn đối với ứng dụng 32
Hình 8: Thống kê mức độ cần thiết đối với các thiết bị điện tử khi chấm công 32
Hình 9: Thống kê những tính năng cần có trên giao diện 33
Hình 10: Thống kê những điểm chính trên giao diện 33
Hình 11: Thống kê nhóm màu sắc sử dụng cho ứng dụng 34
Hình 12: Thống kê mức cần thiết của cảm giác đối với ứng giao diện ứng dụng 34
Hình 13: Thống kê mức cần thiết của giao diện ứng dụng về việc đại diện cho thương hiệu, tổ chức 34
Hình 14: Thống kê những đặc điểm tính năng người dùng muốn sử dụng 35
Hình 15: Danh sách ý kiến/gợi ý về giao diện ứng dụng 35
Trang 11Hình 22: Story Board Tư vấn hỗ trợ 39
Hình 23: Story Board Xem chi tiết chấm công 40
Hình 24: Workflow ứng dụng cho nhân viên 42
Hình 25: Workflow ứng dụng cho Manager/Admin 43
Hình 26: Sketch Đăng nhập 44
Hình 27: Sketch Trang chủ 44
Hình 28: Sketch Trang Hồ sơ cá nhân 45
Hình 29: Sketch Trang Chấm công (Check-in/Check-out) 45
Hình 30: Sketch Trang Chi tiết chấm công 46
Hình 31:Sketch Trang Báo cáo chấm công sai lệch 46
Hình 32:Sketch Tạo yêu cầu tư vấn hỗ trợ 47
Hình 33: Sketch Trang chủ Manager 48
Hình 34: Sketch Quản lý nhân viên 48
Hình 35: Sketch Thiết lập ngày giờ chấm công 49
Hình 36: Sketch Xử lý chấm công sai lệch 50
Hình 37: Sketch Xử lý yêu cầu tư vấn hỗ trợ 50
Hình 43: WireFrame Chi tiết chấm công 56
Hình 44: WireFrame Tạo báo cáo chấm công sai lệch 57
Trang 12Hình 45: WireFrame Gửi yêu cầu tư vấn hỗ trợ 58
Hình 46: Wireframe Trang chủ 59
Hình 47: Wireframe Quản lý nhân viên 60
Hình 48: Wireframe thiết lập ngày giờ chấm công 61
Hình 49: Wireframe Xử lý chấm công sai lệch 62
Hình 50: Wireframe xử lý yêu cầu tư vấn/hỗ trợ 63
Hình 56: Mockup Xem chi tiết chấm công 69
Hình 57: Mockup Báo cáo chấm công sai lệch 70
Hình 58: Mockup Gửi yêu cầu tư vấn hỗ trợ 71
Hình 59: Mockup Trang cá nhân Manager 72
Hình 60: Mockup Quản lý nhân viên 73
Hình 61: Mockup Thiết lập ngày giờ chấm công 74
Hình 62: Mockup Quản lý chấm công sai lệch 75
Hình 63: Mockup xử lý yêu cầu hỗ trợ 76
Hình 64: Prototype Đăng nhập 77
Hình 65: Prototype Trang chủ 78
Hình 66: Prototype Trang thông tin cá nhân 79
Hình 67: Prototype Check-in 80
Trang 13Hình 68: Prototype Check-out 81
Hình 69: Prototype Chi tiết chấm công 82
Hình 70: Prototype Báo cáo chấm công sai lệch 83
Hình 71: Prototype yêu cầu tư vấn hỗ trợ 84
Hình 72: Prototype Trang chủ Manager 85
Hình 73: Prototype trang quản lý nhân viên 86
Hình 74: Prototype Thiết lập ngày giờ chấm công cho nhân viên 87
Hình 75: Prototype Quản lý chấm công sai lệnh 88
Hình 76: Prototype Xử lý tư vấn hỗ trợ 89
Trang 687.1.2 Trang chủ
Hình 52: Mockup Trang chủ
Trang 697.1.3 Tranng thông tin cá nhân
Hình 53: Mockup Trang thông tin cá nhân
Trang 707.1.4 Check-in/Check-out
Hình 54: Mockup Check-in
Trang 71Hình 55: Mockup Check-out
Trang 727.1.5 Xem chi tiết chấm công
Hình 56: Mockup Xem chi tiết chấm công
Trang 737.1.6 Tạo báo cáo chấm công sai lệch
Hình 57: Mockup Báo cáo chấm công sai lệch
Trang 747.1.7 Yêu cầu tư vấn hỗ trợ
Hình 58: Mockup Gửi yêu cầu tư vấn hỗ trợ
Trang 757.2 Mockup phân quyền ứng dụng cho Manager/Admin
Ghi chú: Toàn bộ tính năng của nhân viên, Manager/Admin đều có 7.2.1 Trang chủ
Hình 59: Mockup Trang cá nhân Manager
Trang 767.2.2 Trang quản lý nhân viên
Hình 60: Mockup Quản lý nhân viên
Trang 777.2.3 Thiết lập ngày giờ chấm công cho nhân viên
Hình 61: Mockup Thiết lập ngày giờ chấm công
Trang 787.2.4 Báo cáo chấm công sai lệch
Hình 62: Mockup Quản lý chấm công sai lệch
Trang 797.2.5 Thông báo hỗ trợ tư vấn
Hình 63: Mockup xử lý yêu cầu hỗ trợ
Trang 818.1.2 Trang chủ
Hình 65: Prototype Trang chủ
Trang 828.1.3 Tranng thông tin cá nhân
Hình 66: Prototype Trang thông tin cá nhân
Trang 838.1.4 Check-in/Check-out
Hình 67: Prototype Check-in
Trang 84Hình 68: Prototype Check-out
Trang 858.1.5 Xem chi tiết chấm công
Hình 69: Prototype Chi tiết chấm công
Trang 868.1.6 Tạo báo cáo chấm công sai lệch
Hình 70: Prototype Báo cáo chấm công sai lệch
Trang 878.1.7 Yêu cầu tư vấn hỗ trợ
Hình 71: Prototype yêu cầu tư vấn hỗ trợ
Trang 888.2 Prototype phân quyền ứng dụng cho Manager/Admin
Ghi chú: Toàn bộ tính năng của nhân viên, Manager/Admin đều có 8.2.1 Trang chủ Manager
Hình 72: Prototype Trang chủ Manager
Trang 898.2.2 Trang quản lý nhân viên
Hình 73: Prototype trang quản lý nhân viên
Trang 908.2.3 Thiết lập ngày giờ chấm công cho nhân viên
Hình 74: Prototype Thiết lập ngày giờ chấm công cho nhân viên
Trang 918.2.4 Báo cáo chấm công sai lệch
Hình 75: Prototype Quản lý chấm công sai lệnh
Trang 928.2.5 Thông báo hỗ trợ tư vấn
Hình 76: Prototype Xử lý tư vấn hỗ trợ
Trang 93CHƯƠNG 9 TỔNG KẾT9.1 Ưu nhược điểm của ứng dụng
9.1.1 Ưu điểm
Tiện ích và Linh hoạt: Ưu điểm lớn nhất của việc sử dụng wifi là sự tiện lợivà linh hoạt Nhân viên có thể chấm công từ bất kỳ đâu trong phạm vi sóngwifi.
Dễ dàng quản lý từ xa: Quản trị viên có thể theo dõi và quản lý chấm côngtừ xa thông qua mạng wifi, giúp họ tiết kiệm thời gian và công sức.
Chính xác và Minh bạch: Wifi giúp giảm nguy cơ sai sót do con người vàtăng tính chính xác trong việc chấm công Dữ liệu chấm công thông quawifi cũng có thể được lưu trữ một cách minh bạch.
9.1.2 Nhược diểm
Bảo mật: Mặc dù wifi đã được cải thiện đáng kể về bảo mật, nhưng vẫn cònnguy cơ bị tấn công mạng Dữ liệu chấm công có thể trở nên không an toànnếu không có biện pháp bảo mật đầy đủ.
Phụ thuộc vào Mạng: Nếu mạng wifi gặp vấn đề, như mất kết nối hoặc tắtđột ngột, có thể gây ra sự cố trong quá trình chấm công và làm giảm hiệusuất công việc.
Chi phí: Triển khai và duy trì một hệ thống wifi có thể tạo ra chi phí lớn đốivới doanh nghiệp, đặc biệt là khi cần nâng cấp cơ sở hạ tầng mạng.
Yêu cầu Kỹ thuật: Cần có kiến thức kỹ thuật cao để triển khai và duy trì hệthống wifi chấm công Điều này có thể tạo ra khó khăn cho các doanhnghiệp không có nguồn lực kỹ thuật đủ.
Trang 949.2 Link Figma
9.3 Bảng phân công công việc
Họ tênMSSVCông việcĐánh giá
Lâm Thảo Nguyên 52000374 Làm Form khảosát, gửi khảo sát,thống kê số liệu
Tạo PersonasVẽ SitemapTạo Story BoardVẽ WorkFlowứng dụng chonhân
viên/ManagerVẽ Sketch ứngdụng cho nhânviên/Manager
Vẽ Wireframứng dụng chonhân
viên/ManagerVẽ Mockup ứngdụng cho nhânviên/Manager
Làm Prototypeứng dụng cho
100%
Trang 95Nguyễn Minh Nhật 51900667
Gửi Form khảosát người dùng
Làm bảng ưu tiênthứ tự chức năng
Viết chương giớithiệu đề tài
Wỉreframe ứngdụng choManager
Proropyte ứngdụng cho nhânViên
Bảng 3: Bảng phân công công việc
Trang 96TÀI LIỆU THAM KHẢO
Tiếng Việt
[1] WISAMI Truy cập từ https://wisami.com/
[2] TOPONSEEK 2023 “Sitemap Là Gì?” Truy cập từhttps://www.toponseek.com/blogs /sitemap-la-gi/
Tiếng Anh
[1] NNGroup 2023 “Storyboards Help Visualize UX Ideas” Truy cập từ
https://www.nngroup.com/articles/storyboards-visualize-ideas/