ứng dụng chấm công báo cáo cuối kỳ thiết kế giao diện người dùng

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 1

TỔ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 2

TỔ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 3

LỜ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 4

Ngoà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 5

MỤ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 6

2.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 7

5.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.2 Wireframe phân quyền ứng dụng cho Manager/Admin

6.2.1 Trang chủ

Trang 8

7.2 Mockup phân quyền ứng dụng cho Manager/Admin

7.2.1 Trang chủ

Trang 9

8.2 Prototype phân quyền ứng dụng cho Manager/Admin

8.2.1 Trang chủ Manager

9.3 Bảng phân công công việc

TÀI LIỆU THAM KHẢO

Trang 10

Hì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 11

Hì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 12

Hì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 13

Hì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 68

7.1.2 Trang chủ

Hình 52: Mockup Trang chủ

Trang 69

Hình 53: Mockup Trang thông tin cá nhân

Trang 70

Hình 54: Mockup Check-in

Trang 71

Hình 55: Mockup Check-out

Trang 72

Hình 56: Mockup Xem chi tiết chấm công

Trang 73

Hình 57: Mockup Báo cáo chấm công sai lệch

Trang 74

Hình 58: Mockup Gửi yêu cầu tư vấn hỗ trợ

Trang 75

7.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 76

Hình 60: Mockup Quản lý nhân viên

Trang 77

Hình 61: Mockup Thiết lập ngày giờ chấm công

Trang 78

Hình 62: Mockup Quản lý chấm công sai lệch

Trang 79

Hình 63: Mockup xử lý yêu cầu hỗ trợ

Trang 81

8.1.2 Trang chủ

Hình 65: Prototype Trang chủ

Trang 82

Hình 66: Prototype Trang thông tin cá nhân

Trang 83

Hình 67: Prototype Check-in

Trang 84

Hình 68: Prototype Check-out

Trang 85

Hình 69: Prototype Chi tiết chấm công

Trang 86

Hình 70: Prototype Báo cáo chấm công sai lệch

Trang 87

Hình 71: Prototype yêu cầu tư vấn hỗ trợ

Trang 88

8.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 89

Hình 73: Prototype trang quản lý nhân viên

Trang 90

Hình 74: Prototype Thiết lập ngày giờ chấm công cho nhân viên

Trang 91

Hình 75: Prototype Quản lý chấm công sai lệnh

Trang 92

Hình 76: Prototype Xử lý tư vấn hỗ trợ

Trang 93

CHƯƠ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 94

9.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 95

Nguyễ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 96

TÀ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/