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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.26 MB, 96 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

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

<b>TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNGKHOA CÔNG NGHỆ THÔNG TIN</b>

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

<b>ỨNG DỤNG CHẤM CÔNGBÁO CÁO CUỐI KỲ</b>

<b>THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG</b>

<b>THÀNH PHỐ HỒ CHÍ MINH, NĂM 2023</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

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

<b>TRƯỜNG ĐẠI HỌC TƠN ĐỨC THẮNGKHOA CÔNG NGHỆ THÔNG TIN</b>

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

<b>ỨNG DỤNG CHẤM CÔNGBÁO CÁO GIỮA KỲ</b>

<b>THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG</b>

Người hướng dẫn

<b>TS. DZOÃN XUÂN THANH</b>

<b>THÀNH PHỐ HỒ CHÍ MINH, NĂM 2023</b>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>LỜI CẢM ƠN</b>

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 q 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

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

Ngồ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.

<b>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</b>

liên quan đến những vi phạm tác quyền, bản quyền do tôi gây ra trong q 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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>MỤC LỤC</b>

<b>CHƯƠNG 1. GIỚI THIỆU...</b>

1.1 Khái niệm Personas...

<b>CHƯƠNG 2. TÌM HIỂU THƠNG TIN...</b>

2.1 Vai trị và trách nhiệm của nhóm người dùng...

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

2.3.4 T – Thách thức...

<b>CHƯƠNG 3. NGHIÊN CỨU NGƯỜI DÙNG...</b>

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

<b>CHƯƠNG 5. SKETCH...</b>

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

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="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.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...

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

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

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="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

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="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 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

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="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ý 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ý 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

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="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

</div><span class="text_page_counter">Trang 68</span><div class="page_container" data-page="68">

7.1.2 Trang chủ

Hình 52: Mockup Trang chủ

</div><span class="text_page_counter">Trang 69</span><div class="page_container" data-page="69">

7.1.3 Tranng thơng tin cá nhân

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

</div><span class="text_page_counter">Trang 70</span><div class="page_container" data-page="70">

7.1.4 Check-in/Check-out

Hình 54: Mockup Check-in

</div><span class="text_page_counter">Trang 71</span><div class="page_container" data-page="71">

Hình 55: Mockup Check-out

</div><span class="text_page_counter">Trang 72</span><div class="page_container" data-page="72">

7.1.5 Xem chi tiết chấm cơng

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

</div><span class="text_page_counter">Trang 73</span><div class="page_container" data-page="73">

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

</div><span class="text_page_counter">Trang 74</span><div class="page_container" data-page="74">

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

</div><span class="text_page_counter">Trang 75</span><div class="page_container" data-page="75">

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

Ghi chú: Tồ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

</div><span class="text_page_counter">Trang 76</span><div class="page_container" data-page="76">

7.2.2 Trang quản lý nhân viên

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

</div><span class="text_page_counter">Trang 77</span><div class="page_container" data-page="77">

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

</div><span class="text_page_counter">Trang 78</span><div class="page_container" data-page="78">

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

</div><span class="text_page_counter">Trang 79</span><div class="page_container" data-page="79">

7.2.5 Thơng báo hỗ trợ tư vấn

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

</div><span class="text_page_counter">Trang 81</span><div class="page_container" data-page="81">

8.1.2 Trang chủ

Hình 65: Prototype Trang chủ

</div><span class="text_page_counter">Trang 82</span><div class="page_container" data-page="82">

8.1.3 Tranng thơng tin cá nhân

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

</div><span class="text_page_counter">Trang 83</span><div class="page_container" data-page="83">

8.1.4 Check-in/Check-out

Hình 67: Prototype Check-in

</div><span class="text_page_counter">Trang 84</span><div class="page_container" data-page="84">

Hình 68: Prototype Check-out

</div><span class="text_page_counter">Trang 85</span><div class="page_container" data-page="85">

8.1.5 Xem chi tiết chấm cơng

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

</div><span class="text_page_counter">Trang 86</span><div class="page_container" data-page="86">

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

</div><span class="text_page_counter">Trang 87</span><div class="page_container" data-page="87">

8.1.7 Yêu cầu tư vấn hỗ trợ

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

</div><span class="text_page_counter">Trang 88</span><div class="page_container" data-page="88">

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

Ghi chú: Tồ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

</div><span class="text_page_counter">Trang 89</span><div class="page_container" data-page="89">

8.2.2 Trang quản lý nhân viên

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

</div><span class="text_page_counter">Trang 90</span><div class="page_container" data-page="90">

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

</div><span class="text_page_counter">Trang 91</span><div class="page_container" data-page="91">

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

</div><span class="text_page_counter">Trang 92</span><div class="page_container" data-page="92">

8.2.5 Thông báo hỗ trợ tư vấn

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

</div><span class="text_page_counter">Trang 93</span><div class="page_container" data-page="93">

<b>CHƯƠNG 9. TỔNG KẾT</b>

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

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 tồ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 q 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 đủ.

</div><span class="text_page_counter">Trang 94</span><div class="page_container" data-page="94">

<b>9.2 Link Figma</b>

<b>Họ tênMSSVCông việcĐánh giá</b>

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%

</div><span class="text_page_counter">Trang 95</span><div class="page_container" data-page="95">

Nguyễn Minh Nhật 51900667