ứ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ẮNG

KHOA CÔNG NGHỆ THÔNG TIN

LÂM THẢO NGUYÊN - 52000374 NGUYỄN MINH NHẬT - 51900667

Trang 2

TỔNG LIÊN ĐOÀN LAO ĐỘNG VIỆT NAM

TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG

KHOA CÔNG NGHỆ THÔNG TIN

LÂM THẢO NGUYÊN - 52000374

NGUYỄN MINH NHẬT - 51900667

ỨNG DỤNG CHẤM CÔNG

BÁ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

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

CÔNG TRÌNH ĐƯỢC HOÀN THÀNH

TẠI TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG

Tôi xin cam đoan đây là công trình nghiên cứu của riêng tôi và được sựhướng dẫn khoa học của Ths.Dzoãn Xuân Thanh Các nội dung nghiên cứu, kếtquả trong đề tài này là trung thực và chưa công bố dưới bất kỳ hình thức nàotrước đây Những số liệu trong các bảng biểu phục vụ cho việc phân tích, nhậnxét, đánh giá được chính tác giả thu thập từ các nguồn khác nhau có ghi rõtrong phần tài liệu tham khảo

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ách nhiệ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

1.2 Sitemap Hệ thống

1.3 Storyboard

1.4 Workflow diagram

1.5 Sketch

1.6 Wireframe

1.7 Mockup

1.8 Prototype

1.9 Lý do chọn đề tài

1.10 Mô tả về ứng dụng chấm công

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

2.1.1 Nhân viên sử dụng ứng dụng

2.1.2 Manager/Admin của ứng dụng

2.2 Hành vi nhóm người dùng

2.3 SWOT của bên cung cấp dịch vụ

2.3.1 S – Điểm mạnh

2.3.2 W – Điểm yếu

2.3.3 O – Cơ hội

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

3.2 Personas

3.2.1 Personas 1

3.2.2 Personas 2

3.2.3 Personas 3

CHƯƠNG 4 CONCEPT DESIGN

4.1 Sitemap

4.2 StoryBoard

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

CHƯƠNG 6 WIREFRAME

6.1 Sketch phân quyền ứng dụng cho nhân viên

6.1.1 Đăng nhập

6.1.2 Trang chủ

6.2 Wireframe phân quyền ứng dụng cho Manager/Admin

6.2.1 Trang chủ

Trang 8

CHƯƠNG 7 MOCKUP

7.1 Mockup phân quyền ứng dụng cho nhân viên

7.1.1 Đăng nhập

7.1.2 Trang chủ

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

7.2.1 Trang chủ

CHƯƠNG 8 PROTOTYPE

8.1 Prototype phân quyền ứng dụng cho nhân viên

8.1.1 Đăng nhập

8.1.2 Trang chủ

Trang 9

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

8.2.1 Trang chủ Manager

CHƯƠNG 9 TỔNG KẾT

9.1 Ưu nhược điểm của ứng dụng

9.1.1 Ưu điểm

9.1.2 Nhược diểm

9.2 Link Figma

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

TÀI LIỆU THAM KHẢO

Trang 10

DANH MỤC HÌNH VẼ

Hình 1: Thống kê giới tính 29

Hình 2: Thống kê độ tuổi 29

Hình 3: Thống kê nghề nghiệp 30

Hình 4: Thống kê vị trí nghề nghiệp 30

Hình 5: Thống kê kinh nghiệm nghề nghiệp 30

Hình 6: Thống kê trình độ học vấn 31

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

Hình 16: Personas 1 36

Hình 19: Sitemap Ứng dụng quản lý chấm công nhân sự 37

Hình 20: Sitemap 37

Hình 21: Story Board Chấm công 38

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 38: WireFrame Đăng nhập 51

Hình 39: WireFrame Trang chủ 52

Hình 40: WireFrame Trang Hồ sơ cá nhân 53

Hình 41: WireFrame Check-in 54

Hình 42: WireFrame Check-out 55

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 51: Mockup Đăng nhập 64

Hình 52: Mockup Trang chủ 65

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

Hình 54: Mockup Check-in 67

Hình 55: Mockup Check-out 68

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ẾT

9.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ợi

và 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ông

từ 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.3 Bảng phân công công việc

Họ tên MSSV Công việc Đánh giá

Lâm Thảo Nguyên 52000374 Làm Form khảo

sát, gửi khảo sát,thống kê số liệuTạo Personas

Vẽ SitemapTạo Story Board

Vẽ WorkFlowứng dụng chonhân

viên/Manager

Vẽ Sketch ứngdụng cho nhânviên/Manager

Vẽ Wireframứng dụng chonhân

viên/Manager

Vẽ Mockup ứngdụng cho nhânviên/ManagerLàm Prototypeứng dụng cho

100%

Trang 95

nhânviên/Manager

Nguyễn Minh Nhật 51900667

Gửi Form khảosát người dùngLàm bảng ưu tiênthứ tự chức năngViết chương giớithiệu đề tàiWỉreframe ứngdụng choManagerProropyte ứngdụng cho nhânViên

100%

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/

Tiêu đề	Ứ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ác giả	Lâm Thảo Nguyên, Nguyễn Minh Nhật
Người hướng dẫn	TS. Dzoãn Xuân Thanh
Trường học	Trường Đại Học Tôn Đức Thắng
Thể loại	báo cáo
Năm xuất bản	2023
Thành phố	Thành Phố Hồ Chí Minh

Định dạng
Số trang	96
Dung lượng	1,26 MB