Báo cáo đồ án môn thiết kế giao diện người dùng đề tài thiết kế giao diện website quản lý công việc

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA KHOA HỌC VÀ KĨ THUẬT THÔNG TIN BÁO CÁO ĐỒ ÁN MÔN THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG Đề tài THIẾT KẾ GIAO DIỆN WEBSITE QUẢN LÝ CÔNG VIỆC GVHD : THS TẠ THU THỦY GV HUỲNH VĂN TÍN LỚP : SVTH : IE106.L11 NGUYỄN VŨ SAO MAI 18521081 HUỲNH THANH LIÊM 18520982 CAO THỊ PHƯƠNG LOAN 18521001 IE106 – Thiết kế Giao diện Người dùng 🙡🙡 Thành Phố Hồ Chí Minh, Tháng 10 Năm 2020 🙡🙡 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ……., ngày…… tháng……năm 2020 Người nhận xét (Ký tên ghi rõ họ tên) | Page IE106 – Thiết kế Giao diện Người dùng BẢNG PHÂN CÔNG NHIỆM VỤ HỌ VÀ TÊN MSSV PHÂN CÔNG Tuần 1: ✔ Bàn bạc để lập form khảo sát ✔ Đưa form lên trang mạng xã hội để tìm người khảo sát ✔ Tìm ưu, nhược điểm ứng dụng tương tự rút kinh nghiệm ✔ Nhận xét góp ý để hồn thiện báo cáo tuần NGUYỄN VŨ SAO Tuần 2: 1852108 MAI ✔ Lên ý tưởng phác khảo giao diện ✔ Thực vẽ giao diện phác khảo Tuần 3: ✔ Chỉnh sửa file báo cáo ✔ Chỉnh sửa giao diện hoàn chỉnh Tuần 4: ✔ Góp ý chỉnh sửa tương tác giao diện ✔ Tổng hợp báo cáo ✔ Làm silde HUỲNH THANH LIÊM 1852098 Tuần 1: ✔ Bàn bạc để lập form khảo sát ✔ Đưa form lên trang mạng xã hội để tìm người khảo sát ✔ Thống kê đưa nhận xét phân tích liệu từ form khảo sát ✔ Nhận xét góp ý để hoàn thiện báo cáo tuần Tuần 2: ✔ Lên ý tưởng phác khảo giao diện ✔ Bổ sung, góp ý để sửa phác thảo Tuần 3: ✔ Chỉnh sửa Chương file báo cáo ĐÁNH GIÁ Tuần 1: 10/10 Hoàn thành Tuần 2: 10/10 Hoàn thành Tuần 3: 10/10 Hoàn thành Tuần 4: 10/10 Hoàn thành Tuần 1: 10/10 Hoàn thành Tuần 2: 10/10 Hoàn thành Tuần 3: 10/10 Hoàn thành | Page IE106 – Thiết kế Giao diện Người dùng ✔ Vẽ giao diện hoàn chỉnh Tuần 4: ✔ Thực tương tác giao diện ✔ Góp ý chỉnh sửa slide, file báo cáo Tuần 1: ✔ Bàn bạc để lập form khảo sát ✔ Đưa form lên trang mạng xã hội để tìm người khảo sát ✔ Xác định yêu cầu, phân tích yêu cầu đặc tả yêu cầu ✔ Nhận xét góp ý để hồn thiện báo cáo tuần CAO THỊ PHƯƠNG LOAN 1852100 Tuần 2: ✔ Lên ý tưởng phác khảo giao diện ✔ Bổ sung, góp ý để sửa phác thảo Tuần 3: ✔ Chỉnh sửa Chương file báo cáo ✔ Vẽ giao diện hoàn chỉnh Tuần 4: 10/10 Hoàn thành Tuần 1: 10/10 Hoàn thành Tuần 2: 10/10 Hoàn thành Tuần 3: 10/10 Hoàn thành Tuần 4: 10/10 Hoàn thành Tuần 4: ✔ Chỉnh sửa tương tác giao diện ✔ Góp ý chỉnh sửa slide, file báo cáo Bảng 1: Phân công, đánh giá thành viên | Page IE106 – Thiết kế Giao diện Người dùng LỜI MỞ ĐẦU Đối với chúng ta, việc xếp thời gian thực công việc hợp lý vấn đề vô nan giải Ta thường cảm thấy choáng ngợp, bận rộn với núi cơng việc cần làm chí đơi ta qn cần làm điều quan trọng ngày Làm việc quên việc khác, quản lý, theo dõi tiến độ 100% công việc khiến cho suất hiệu công việc không kì vọng Mặt khác, khơng tiếp nhận kịp thời thông tin trao đổi công việc dẫn đến cơng việc khơng hồn thành deadline Để nâng cao hiệu công việc khả làm việc theo nhóm, nhiều cá nhân, chủ kinh doanh, nhà quản lý tìm đến hệ thống Quản lý cơng việc đại Thực chất hệ thống Quản lý công việc phần mềm, ứng dụng, website sử dụng máy tính hay thiết bị cơng nghệ Hầu hết chúng có tác dụng giúp cá nhân, nhà quản lý, chủ kinh doanh dễ dàng xếp cơng việc Nói cách khác, hệ thống quản lý công việc giống giải pháp hệ thống lại công việc cách khoa học Từ đó, giúp cải thiện hiệu việc vận hành doanh nghiệp, công ty, nhân viên xếp thời gian cá nhân hiệu Nhận thấy tầm quan trọng việc ứng dụng Công nghệ Thông tin vào Quản lý cơng việc, nhóm thực đồ án xây dựng Website Quản lý cơng việc với mục đích đảm bảo hỗ trợ toàn diê }n hiê }u cho cơng viê }c, mang tới q trình ứng dụng thuâ }n lợi yêu cầu Mọi hoạt đô }ng liên quan tới thời gian, tiến độ công việc trở nên đơn giản dễ dàng mong muốn Sau đây, nhóm 23 trình bày phần mềm, quy trình thiết kế giao diện giao diện hoàn chỉnh qua chương sau: ● Chương 1: Quy trình khảo sát Website ● Chương 2: Thiết kế phác thảo giao diện ● Chương 3: Giao diện website hoàn chỉnh ● Chương 4: Tương tác giao diện ● Chương 5: Kết luận | Page IE106 – Thiết kế Giao diện Người dùng MỤC LỤC BẢNG PHÂN CÔNG NHIỆM VỤ LỜI MỞ ĐẦU MỤC LỤC DANH MỤC BẢNG, HÌNH ẢNH Chương 1: KHẢO SÁT, PHÂN TÍCH, THAM KHẢO 10 1.1 Khảo sát yêu cầu khách hàng 10 1.1.1 Đối tượng khảo sát 10 1.1.2 Kết khảo sát 10 1.2 Phân tích yêu cầu đặc tả yêu cầu 14 1.2.1 Xác định yêu cầu 14 1.2.2 15 Đặc tả yêu cầu 1.3 Tìm hiểu, nghiên Website tương tự 18 1.3.1 Trello (trello.com) 18 1.3.2 KanBanflow (kanbanflow.com) 20 1.3.3 Monday(monday.com) 23 1.3.4 Rút kinh nghiệm 25 Chương 2: PHÁC KHẢO GIAO DIỆN 27 2.1 Công cụ sử dụng 27 2.2 Các trang giao diện thành phần 28 2.3 Giao diện phác khảo 28 2.3.1 Trang Giới thiệu 28 2.3.2 Trang Đăng nhập 29 2.3.3 Trang Đăng ký 29 2.3.4 Trang Quên mật 30 2.3.5 Trang Chủ 30 2.3.6 Trang Board làm việc 31 2.3.7 Trang Lịch 32 2.3.8 Trang Biểu đồ 33 2.3.9 Trang Tài khoản 33 | Page IE106 – Thiết kế Giao diện Người dùng Chương 3: GIAO DIỆN WEBSITE HỒN CHỈNH 34 3.1 Cơng cụ sử dụng 34 3.2 Các trang giao diện thành phần 34 3.3 Giao diện hoàn chỉnh 35 3.3.1 Trang Giới thiệu 35 3.3.2 Trang Đăng nhập 37 3.3.3 Trang Đăng ký 37 3.3.4 Trang Quên mật 38 3.3.5 Trang Chủ 38 3.3.6 Trang Mở Board 39 3.3.7 Trang Chi tiết Board 39 3.3.8 Trang Lịch 41 3.3.9 Trang Biểu đồ 42 3.3.10 Trang Tài Khoản 42 3.3.11 Trang Trợ giúp 44 3.3.12 Trang Đăng Xuất 45 Chương 4: TƯƠNG TÁC GIAO DIỆN 46 4.1 Tương tác giao diện Trang Giới thiệu 46 4.2 Tương tác giao diện Trang Chủ 48 4.2.1 Mở Bảng 48 4.2.2 Mở Lịch 50 4.2.3 Mở Biểu đồ 51 4.3 Tương tác giao diện Trang Tài khoản người dùng 52 Chương 5: KẾT LUẬN 55 5.1 Ưu điểm 55 5.2 Hạn chế 55 5.3 Hướng phát triển 55 LỜI KẾT 56 TÀI LIỆU THAM KHẢO 57 | Page IE106 – Thiết kế Giao diện Người dùng DANH MỤC BẢNG, HÌNH ẢNH Danh mục bảng Bảng Phân công, đánh giá thành viên Bảng Thông tin chức tạo nhiệm vụ công việc 15 Bảng Các luồng kiện chức tạo nhiệm vụ công việc 15 Bảng Thông tin chức xếp ưu tiên 16 Bảng Thông tin chức giám sát cập nhật q trình thực cơng việc 17 Bảng Các luồng kiện chức giám sát cập nhật q trình thực cơng việc 17 Danh mục hình ảnh Hình 1.1 Kết tính đa dạng người dùng thực khảo sát 10 Hình 1.2 Kết tính đa dạng người dùng thực khảo sát 10 Hình 1.3 Kết mức độ sử dụng cơng cụ Quản lý Cơng việc 11 Hình 1.4 Kết mục đích sử dụng cơng cụ Quản lý Cơng việc 11 Hình 1.5 Kết vài cơng cụ Quản lý Cơng việc phổ biến 12 Hình 1.6 Những yếu tố tác động đến việc lựa chọn công cụ Quản lý Cơng việc 12 Hình 1.7 Mức độ người dùng quan tâm đến Giao diện website 13 Hình 1.8 Mức độ người dùng quan tâm đến Giao diện website 13 Hình 1.9 Yêu cầu người dùng Website 13 Hình 1.10 Trello 18 Hình 1.11 Thiết kế Kanban Trello 19 Hình 1.12 Chi tiết Board Trello 19 Hình 1.13 KanbanFlow 20 Hình 1.14 Giao diện làm việc KanbanFlow 21 Hình 1.15 Giao diện biểu đồ KanbanFlow 22 Hình 1.16 Giao diện biểu đồ KanbanFlow 22 Hình 1.17 Giao diện trang xem lịch deadline KanbanFlow 23 Hình 1.18 Monday 23 Hình 1.19 Giao diện làm việc Monday 24 Hình 1.20 Màu sắc đơn giản Monday 25 Hình 1.21 Các loại biểu đồ Monday 25 | Page IE106 – Thiết kế Giao diện Người dùng Hình 2.1 Giao diện phác thảo trang giới thiệu 29 Hình 2.2 Giao diện phác thảo trang Đăng nhập 30 Hình 2.3 Giao diện phác thảo trang Đăng ký 31 Hình 2.4 Giao diện phác thảo trang Quên mật 31 Hình 2.5 Giao diện phác thảo trang Giới thiệu 32 Hình 2.6 Giao diện phác thảo Việc cá nhân 33 Hình 2.7 Giao diện Việc nhóm 33 Hình 2.8 Giao diện phác thảo trang Xem lịch 34 Hình 2.9 Giao diện phác thảo trang Biểu đồ 34 Hình 2.10 Giao diện trang Cập nhật thơng tin 35 Hình 3.1 Giao diện chi tiết trang Giới thiệu 38 Hình 3.2 Giao diện chi tiết trang Đăng nhập 38 Hình 3.3 Giao diện chi tiết trang Đăng ký 38 Hình 3.4 Giao diện chi tiết trang Quên mật 39 Hình 3.5 Giao diện chi tiết trang Chủ 39 Hình 3.6 Giao diện chi tiết trang Mở Board 40 Hình 3.7 Giao diện chi tiết trang Chi tiết Board 40 Hình 3.8 Giao diện chi tiết trang Chi tiết Board / Xem hoạt động 41 Hình 3.9 Giao diện chi tiết trang Chi tiết Board / Chi tiết List 41 Hình 3.10 Giao diện chi tiết trang Lịch Tuần 42 Hình 3.11 Giao diện chi tiết trang Lịch Tháng 42 Hình 3.12 Giao diện chi tiết trang Biểu đồ 43 Hình 3.13 Giao diện chi tiết trang Tài khoản / Hồ sơ 44 Hình 3.14 Giao diện chi tiết trang Tài khoản / Hoạt động 44 Hình 3.15 Giao diện chi tiết trang Tài khoản / Thẻ 45 Hình 3.16 Giao diện chi tiết trang Tài khoản / Cài đặt 45 Hình 3.17 Giao diện chi tiết trang Trợ giúp 46 Hình 3.18 Giao diện chi tiết trang Đăng xuất 46 Hình 4.1 Tương tác trang Giới thiệu Đăng ký qua nút “Đăng ký ngay” 47 Hình 4.2 Tương tác trang Giới thiệu Đăng ký, Đăng nhập 48 Hình 4.3 Tương tác trang Đăng nhập Quên mật 49 Hình 4.4 Cách mở danh sách bảng 50 Hình 4.5 Xem chi tiết bảng cách nhấn trực tiếp vào bảng 50 Hình 4.6 Cách thêm thẻ 51 | Page IE106 – Thiết kế Giao diện Người dùng Hình 4.7 Xem chi tiết thẻ có danh sách 51 Hình 4.8 Xem lịch tháng 52 Hình 4.9 Xem lịch tuần tuần 53 Hình 4.10 Xem biểu đồ 54 Hình 4.11 Xem tab Hồ sơ Hiển Thị 55 Hình 4.12 Xem tab Hoạt động 56 Hình 4.13 Xem tab Thẻ 56 Hình 4.14 Xem tab Cài đặt 56 | Page IE106 – Thiết kế Giao diện Người dùng 3.3.12 Trang Đăng Xuất Hình 3.18 Giao diện chi tiết trang Đăng xuất 51 | Page IE106 – Thiết kế Giao diện Người dùng Chương 4: TƯƠNG TÁC GIAO DIỆN Những tương tác tương tác Website, ngồi cịn có mục tương tác chi tiết thể cụ thể link demo Figma: https://bit.ly/workflow23 4.1Tương tác giao diện Trang Giới thiệu - Khi click chuột vào “Đăng ký ” phần đầu trang cuối trang hiển thị trang Đăng ký Hình 4.1 Tương tác trang Giới thiệu Đăng ký qua nút “Đăng ký ngay” - Khi click chuột vào “Đăng ký” hiển thị trang Đăng ký - Khi click chuột vào “Đăng nhập” hiển thị trang Đăng nhập 52 | Page IE106 – Thiết kế Giao diện Người dùng - Trong trang Đăng nhập, click vào “ Quên mật khẩu” trang giúp khôi phục mật Hình 4.2 Tương tác trang Giới thiệu Đăng ký, Đăng nhập Hình 4.3 Tương tác trang Đăng nhập Quên mật - Sau đăng nhập thành công xuất trang chủ 53 | Page IE106 – Thiết kế Giao diện Người dùng 4.2 Tương tác giao diện Trang Chủ 4.2.1 Mở Bảng - Khi click chuột vào icon “ Bảng” phần đầu trang (thanh menu) hiển thị Bảng (board) tất công việc bên trái Chức cịn gọi “mở bảng” Hình 4.4 Cách mở danh sách bảng - Khi click chuột vào bảng Trang Chủ mục “mở bảng", trang chi tiết bảng Cách xếp nội dung bảng áp dụng nguyên tắc Kanban (giống Trello, Monday, KanbanFLow) 54 | Page IE106 – Thiết kế Giao diện Người dùng Hình 4.5 Xem chi tiết bảng cách nhấn trực tiếp vào bảng 55 | Page IE106 – Thiết kế Giao diện Người dùng - Trong trang Chi tiết bảng, nhấn vào mục có dấu “+” thêm thẻ thêm danh sách hiển thị bảng nhỏ cho phép người dùng thêm thẻ làm việc Hình 4.6 Cách thêm thẻ 56 | Page IE106 – Thiết kế Giao diện Người dùng Hình 4.7 Xem chi tiết thẻ có danh sách 57 | Page IE106 – Thiết kế Giao diện Người dùng Người dùng click vào thẻ cơng việc danh sách để xem chỉnh sửa thông tin như: mô tả, hoạt động, cài đặt người tham gia, 4.2.2 Mở Lịch - Khi click chuột vào icon “Lịch” phần đầu trang (thanh menu) hiển thị giao diện Lịch deadline Khi giao diện mặc định hiển thị giao diện lịch gần người dùng xem - Hình giao diện xem lịch Tháng - Ngồi cịn có giao diện Lịch Tuần Hiển thị giao diện Lịch Tuần cách Hình 4.8 Xem lịch tháng nhấn vào nút “Tuần” đổi qua giao diện Lịch Tháng nút “Tháng” bên cạnh 58 | Page IE106 – Thiết kế Giao diện Người dùng Hình 4.9 Xem lịch tuần tuần 4.2.3 Mở Biểu đồ - Khi click chuột vào icon “Biểu đồ” phần đầu trang (thanh menu) hiển thị giao diện Vẽ biểu đồ Khi giao diện mặc định hiển thị giao diện biểu đồ gần mà người dùng xem - Có nhiểu loại biểu đồ hỗ trợ người dùng nhiều lựa chọn hữu ích giúp việc xem thống kê trở nên đa chiều thú vị 59 | Page IE106 – Thiết kế Giao diện Người dùng Hình 4.10 Xem biểu đồ 4.3 Tương tác giao diện Trang Tài khoản người dùng - Khi click chuột vào icon “Người dùng” phần đầu trang góc phải (thanh menu) hiển thị trang giao diện thông tin người dùng cài đặt người dùng Trang gồm tab nhỏ là: Hồ sơ hiển thị, Hoạt động, Thẻ, Cài Đặt - Click chuột vào tab để xem nội dung - Người dùng thay đổi cải đặt có trang tài khoản 60 | Page IE106 – Thiết kế Giao diện Người dùng Hình 4.11 Xem tab Hồ sơ Hiển Thị Hình 4.12 Xem tab Hoạt động 61 | Page IE106 – Thiết kế Giao diện Người dùng Hình 4.13 Xem tab Thẻ Hình 4.14 Xem tab Cài đặt 62 | Page IE106 – Thiết kế Giao diện Người dùng Chương 5: KẾT LUẬN 4.3Ưu điểm - Học hỏi thêm kỹ làm việc nhóm, tham khảo tài liệu - Tìm hiểu công cụ thiết kế giao diện Figma, SmartDraw, Pencil,… - Màu sắc giao diện đại, việc sử dụng gam màu Xanh tạo quán - Phong cách thiết kế kiểu Kanban giúp người dùng dễ xếp công việc - Chức website dễ dàng sử dụng, tập trung vào nhu cầu cần thiết - Tăng cường khả ntương tác người dùng với người dùng thông qua chức cho tổng thể Website, đem lại dễ chịu, thoải mái làm việc, học tập phân quyền, đánh giá bình luận 4.4 Hạn chế - Chưa quen sử dụng công cụ thiết kế nên nhóm nhiều thời gian tìm hiểu - Website nhiều người tương tác lúc nên dễ gây lỗi chậm - Website dễ sử dụng tương đối khó xây dựng 4.5 Hướng phát triển - Triển khai vào việc lập trình, cải tiến để xây dựng hoàn chỉnh Website Quản lý cơng việc từ thiết kế để public lên mạng cho người biết đến - Cải thiện số chức chưa hồn chỉnh theo góp ý thầy, cô - Phát triển ứng dụng cho nhiều tảng khác 🙡 Link giao diện Demo Figma: https://bit.ly/workflow23 63 | Page IE106 – Thiết kế Giao diện Người dùng LỜI KẾT Quản lý công việc công việc tốn thời gian vất vả cần tính tốn xác nhiều mặt vấn đề cơng việc khơng dễ để tạo lịch làm việc hợp lý khoa học thực tay khơng Vì vậy, để vừa giải vấn đề minh bạch hóa q trình giao - nhận việc hỗ trợ lên kế hoạch làm việc tập trung nhân viên tảng Website Quản lý công việc yếu tố bỏ qua Có thể nói Website Quản lý cơng việc WorkFlow giải pháp phù hợp để giải núi công việc hiệu người dùng Bên cạnh đó, Website xây dựng quy trình yêu cầu cụ thể khách hàng nên nói phù hợp với cá nhân, nhóm, doanh nghiệp WorkFlow thân thiện dễ dàng sử dụng với người chưa biết máy tính Bài báo cáo thực hành nhóm xin kết thúc Nhìn chung, qua đồ án nhóm đã: - Biết quy trình để thiết kế Giao diện Website - Phân tích đặc tả yêu cầu khách hàng - Biết công cụ để vẽ phác thảo Giao diện hoàn chỉnh - Học cách phân chia cơng việc để làm việc nhóm hiệu - Thiết kế Giao diện website Quản lý công việc hoàn chỉnh Đặc biệt, chúng em xin cảm ơn hướng dẫn tận tình kịp thời ThS Tạ Thu Thủy GV Huỳnh Văn Tín q trình thực đồ án Tuy nhiên, báo cáo tránh khỏi hạn chế thiếu sót, nhóm mong nhận đánh giá, góp ý từ phía thầy để nhóm 23 nói chung thành viên nhóm nói riêng rút nhiều kinh nghiệm hoàn thiện báo cáo khác tới Nhóm xin chân thành cảm ơn cô thầy dành thời gian xem qua báo cáo nhóm chúng em 64 | Page IE106 – Thiết kế Giao diện Người dùng TÀI LIỆU THAM KHẢO [1] Trello gì?, https://chefjob.vn/trello-la-gi, truy cập lần cuối ngày 01/10/2020 [2] Phần mềm quản lý công việc đại Monday.com, https://www.tigosolutions.com/blogstory/49, truy cập lần cuối ngày 02/10/2020 [3] Kanbanflow Website, https://kanbanflow.com/, truy cập lần cuối ngày 02/10/2020 [4] 10 mẹo thiết kế giao diện người dùng hiệu quả, https://www.designbold.com/academy/vi/10-meo-thiet-ke-giao-dien/, truy cập lần cuối ngày 08/10/2020 [5] Figma, https://www.figma.com, truy cập lần cuối ngày 10/12/2020 [6] Smartdraw, https://www.smartdraw.com, truy cập lần cuối ngày 10/11/2020 65 | Page