Bctuan2 nhom5

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN MÔN THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG ỨNG DỤNG ANIMAL PEDIA GVHD: ThS Tạ Thu Thủy Nhóm sinh viên thực hiện: NHĨM 05 Trần Linh Đa Lê Thị Hồi Giang Lê Hữu Huy Phan Thị Liễu Nguyễn Thế Phương Huynh MSSV: 19521305 MSSV: 19521447 MSSV: 19521615 MSSV: 19521749 MSSV: 19521650 TP Hồ Chí Minh, 03/2022 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ……., ngày…… tháng……năm 2022 Người nhận xét (Ký tên ghi rõ họ tên) BẢNG PHÂN CƠNG, ĐÁNH GIÁ THÀNH VIÊN Bảng 1: Bảng phân cơng, đánh giá thành viên Họ tên Trần Linh Đa Lê Thị Hoài Giang Lê Hữu Huy Phan Thị Liễu Nguyễn Thế Phương Huynh MSSV 19521305 19521447 Phân công Tuần 1: Đánh giá app Sasol Wildlife for beginners +Viết báo cáo + tổng hợp báo cáo Tuần 1: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 2: Thác thảo giao diện chương (mục 1, 2, 3, 4) + Tổng hợp báo cáo Tuần 2: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 1: Thiết kế form + viết báo cáo Tuần 1: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 2: Thác thảo giao diện chương (mục 10, 11, 12, 13, 14) Tuần 1: Đánh giá app Animal Facts + viết báo cáo 19521615 Tuần 2: Thác thảo giao diện chương (mục 5, 6, 7, 8, 9) Tuần 1: Thiết kế form + viết báo cáo 19521749 19521650 Đánh giá Tuần 2: Thác thảo giao diện chương (mục 17, 19, 21, 22) Tuần 1: Đánh giá app Zoopedia+ viết báo cáo Tuần 2: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 1: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 2: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 1: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 2: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 1: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 2: Thác thảo giao diện chương (mục 15, 16, 18, 20) Tuần 2: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 MỤC LỤC NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN DANH MỤC HÌNH ẢNH CHƯƠNG 1: KHẢO SÁT PHÂN TÍCH THAM KHẢO I KHẢO SÁT YÊU CẦU KHÁCH HÀNG VÀ PHÂN TÍCH YÊU CẦU Khảo sát yêu cầu Phân tích đề xuất giải pháp 18 II TÌM HIỂU & NGHIÊN CỨU CÁC ỨNG DỤNG LIÊN QUAN 18 Animal Facts: 18 Zoopedia: 22 Sasol Wildlife for beginners: 26 Rút kinh nghiệm 29 CHƯƠNG 2: PHÁC THẢO GIAO DIỆN 30 Màn hình bắt đầu 30 Màn hình đề xuất động vật: 31 Màn hình đăng kí 31 Màn hình đăng nhập 32 Màn hình trang chủ 32 Màn hình trang phân loại 33 Màn hình danh sách động vật 34 Màn hình danh sách thú cưng 34 Màn hình danh sách u thích 35 10 Màn hình chia sẻ động vật 35 11 Màn hình thơng tin động vật 36 12 Màn hình thơng tin động vật chi tiết 37 13 Màn hình tìm kiếm (bằng nhập thơng tin) 38 14 Màn hình tìm kiếm (bằng hình ảnh) 38 15 Màn hình tình trạng phân bố động vật 39 16 Màn hình nơi xem động vật thật 39 17 Màn hình thông tin tài khoản 40 18 Màn hình viết động vật 40 19 Màn hình hiển thị câu hỏi xác nhận 41 20 Màn hình ủng hộ tiền 41 21 Màn hình lựa chọn ngân hàng 42 22 Màn hình xếp hạng chia sẻ app 42 DANH MỤC HÌNH ẢNH Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Phiếu khảo sát nhu cầu sử dụng ứng dụng động vật học Biểu đồ khảo sát độ tuổi 10 Biểu đồ khảo sát giới tính 10 Biểu đồ khảo sát nhu cầu tìm hiểu động vật 11 Biểu đồ khảo sát vấn đề tìm hiểu động vật học 11 Biểu đồ khảo sát nhu cầu sử dụng ứng dụng di động động vật học 12 Biểu đồ khảo sát mục đích sử dụng ứng dụng di động động vật học 12 Hình ảnh giao diện đề xuất 13 Biểu đồ khảo sát giao diện ứng dụng di động động vật học 13 10 Biểu đồ khảo sát màu sắc chủ đề ứng dụng 14 11 Biểu đồ khảo sát menu yêu thích 14 12 Biểu đồ khảo sát logo yêu thích 15 13 Biểu đồ khảo sát logo yêu thích 15 14 Biểu đồ khảo sát tiêu chí chọn sử dụng ứng dụng 16 15 Biểu đồ khảo sát tính mong muốn 16 16 Biểu đồ khảo sát điều cần thiện app động vật 17 17 Biểu đồ khảo sát nhu cầu sử dụng app động vật học 17 18 Biểu đồ khảo sát sẵn sàng chia sẻ thông tin app động vật học 18 19 Giao diện chung tính 19 20 Bố cục block 19 21 Các icon Animal Facts 19 22 Hình ảnh giao diện 20 23 Giao diện chung tính 20 24 Giao diện chung tính 21 25 Giao diện thông tin động vật 22 26 Giao diện bố cục tính 22 27 Giao diện chức tìm kiếm lọc 23 28 Dẫn dắt người dùng 23 29 Giao diện bố cục tính 24 30 Hình ảnh động vật Zoopedia 24 31 Tương tác hạn chế 25 32 Tuỳ chọn giao diện 26 33 Giao diện xem nghe âm động vật 26 34 Giao diện thông tin động vật 27 35 Thông tin động vật 27 36 Giao diện động vật 28 37 Tương tác hạn chế 28 38 Giao diện thông tin động vật 29 Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình 39 Màn hình bắt đầu 30 40 Màn hình đề xuất động vật 31 41 Màn hình đăng ký 31 42 Màn hình đăng nhập 32 43 Màn hình trang chủ 32 44 Màn hình phân loại 33 45 Màn hình danh sách động vật 34 46 Màn hình danh sách thú cưng 34 47 Màn hình danh sách yêu thích 35 48 Màn hình chia động vật 35 49 Màn hình thơng tin động vật 36 50 Màn hình thông tin động vật chi tiết 37 51 Màn hình tìm kiếm (bằng nhập thông tin) 38 52 Màn hình tìm kiếm (bằng hình ảnh) 38 53 Màn hình nơi xem động vật thật 39 54 Màn hình viết động vật 40 55 Màn hình ủng hộ tiền 41 56 Màn hình lựa chọn ngân hàng 42 57 Màn hình xếp hạng chia sẻ app 42 CHƯƠNG 1: KHẢO SÁT PHÂN TÍCH THAM KHẢO I KHẢO SÁT YÊU CẦU KHÁCH HÀNG VÀ PHÂN TÍCH YÊU CẦU Khảo sát yêu cầu 1.1 Link khảo sát: https://forms.gle/uHgiMmMPgrpmSTEP8 Hình Phiếu khảo sát nhu cầu sử dụng ứng dụng động vật học Sau hoàn thành khảo sát với 137 phản hồi, chúng tơi có phản hồi tích cực sau phía người dùng 1.2 Độ tuổi Độ tuổi trung bình tham gia khảo sát từ 18 đến 30 tuổi chiếm 95,6%, lại độ tuổi 18 tuổi Hình Biểu đồ khảo sát độ tuổi 1.3 Giới tính Số lượng người tham gia khảo sát nghiêng nhiều phía nam nhiều với 51.5%, nữ với 48.5% Hình Biểu đồ khảo sát giới tính 1.4 Nhu cầu tìm hiểu động vật Phụ thuộc vào nhiều yếu tố mà nhu cầu tìm hiểu động vật bị ảnh hưởng Về người tham gia khảo sát tìm hiểu động vật 10 b Giao diện khơng tương tích với nhiều thiết bị: Giao diện app tương thích với hình định, với thiết bị tai thỏ hình lớn ảnh nội dung app hiển thị loại hình tạo nên khoảng trống khiến người dùng cảm thấy khó chịu c Khơng có phân loại loài động vật: Các loài động vật khơng phân chia theo bộ, theo lớp, theo lồi mà trình bày chung danh sách, đơi khiến cho người dùng cảm thấy rối khó tìm lồi động vật chung nhóm Hình 36 Giao diện động vật d Tương tác người dùng cịn nhiều hạn chế: Người dùng tương tác qua icon bắt buộc, mà vuốt, lướt cách tương tác khác Điều này, khiến giới hạn hạn tương tác người dùng, không tạo cảm giác thích thú sử dụng Ngồi ra, có nhiều icon bị dư thừa khó hiểu Một số hình dạng khác chức lại giống Một số lại khơng rõ chức Ví dụ: ▪ Vừa sử dụng “Cancel” “Done” để húy, mà không thấy rõ mục đích ▪ Phần lựa chọn danh sách động vật u thích, dùng icon gây khó hiểu Hình 37 Tương tác hạn chế 28 e Phần hướng dẫn sử dụng nhiều chữ lỗi thời: Hướng dẫn sử dụng app bố trí nhiều chữ làm cho thiếu dẫn dắt người dùng làm rối mắt Thậm chí, lỗi thời Hình 38 Giao diện thông tin động vật Rút kinh nghiệm Hình ảnh, thơng tin app yếu tố quan trọng, chất lượng chân thực hình ảnh liên quan đến định hướng app cần phải trọng đầu tư kĩ lưỡng Yếu tố thơng tin tương tự, cần có nội dung thích hợp đầy đủ Các yếu tố thỉ cần có liên kết lẫn Các yếu tố đồ họa giúp khả thị app trở nên khác biệt so với yếu tố văn thông thường Cần xây dựng bố cục cụ thể cân đối, khơng nên có to hay qua nhiều chi tiết nhỏ Đối với app tìm hiểu thơng tin động vật, chức phân loại động vật cần thiết Có thể phân loại theo lồi, mơi trường sống, theo tình trạng (sắp tuyệt chủng, số lượng nhiều,…) Hướng tới tối giản – việc cần đảm bảo xu hướng Tạo nhiều hình ảnh chữ, đồng thời kết thêm với từ ngữ biểu tượng quen thuộc Hướng tới kết ứng dụng đơn giản chất lượng, mang đến hiệu sử dụng cao Yếu tố màu sắc định cảm xúc người sử dụng, cần phải xây dựng màu sắc dựa phù hợp với chủ đề, tránh việc sử dụng nhiều màu sắc gây khó chịu cho người dùng Ví dụ: Làm app chủ đề khoa học mơi trường gam màu nên dùng màu trắng xanh xanh dương 29 Hạn chế nhiều tác vụ phức tạp với người dung Cụ thể app động vật người dùng có xu hướng quan tâm nhiều thơng tin , hình ảnh, âm loài vật Tận dụng yếu tố quen thuộc thông dụng người dùng Tránh làm khác hay phải “educate” người dùng để sử dụng ứng dụng Cần chức mở rộng xem video, nghe âm chức chia sẻ khác để người dùng có trải nghiệm tốt CHƯƠNG 2: PHÁC THẢO GIAO DIỆN Màn hình bắt đầu Hình 39 Màn hình bắt đầu 30 Màn hình đề xuất động vật: Hình 40 Màn hình đề xuất động vật Màn hình đăng kí Hình 41 Màn hình đăng ký 31 Màn hình đăng nhập Hình 42 Màn hình đăng nhập Màn hình trang chủ Hình 43 Màn hình trang chủ 32 Màn hình trang phân loại Hình 44 Màn hình phân loại 33 Màn hình danh sách động vật Hình 45 Màn hình danh sách động vật Màn hình danh sách thú cưng Hình 46 Màn hình danh sách thú cưng 34 Màn hình danh sách u thích Hình 47 Màn hình danh sách u thích 10 Màn hình chia sẻ động vật Hình 48 Màn hình chia động vật 35 11 Màn hình thơng tin động vật Hình 49 Màn hình thơng tin động vật 36 12 Màn hình thơng tin động vật chi tiết Hình 50 Màn hình thơng tin động vật chi tiết 37 13 Màn hình tìm kiếm (bằng nhập thơng tin) Hình 51 Màn hình tìm kiếm (bằng nhập thơng tin) 14 Màn hình tìm kiếm (bằng hình ảnh) Hình 52 Màn hình tìm kiếm (bằng hình ảnh) 38 15 Màn hình tình trạng phân bố động vật Hình Màn hình tình trạng phân bố động vật 16 Màn hình nơi xem động vật thật Hình 53 Màn hình nơi xem động vật thật 39 17 Màn hình thơng tin tài khoản Hình Màn hình thơng tin tài khoản 18 Màn hình viết động vật Hình 54 Màn hình viết động vật 40 19 Màn hình hiển thị câu hỏi xác nhận Hình Màn hình hiển thị câu hỏi xác nhận 20 Màn hình ủng hộ tiền Hình 55 Màn hình ủng hộ tiền 41 21 Màn hình lựa chọn ngân hàng Hình 56 Màn hình lựa chọn ngân hàng 22 Màn hình xếp hạng chia sẻ app Hình 57 Màn hình xếp hạng chia sẻ app 42