Bctuan1 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 Nhóm sinh viên thực hiện: NHĨM 05 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 MSSV: 19521447 MSSV: 19521615 MSSV: 19521749 MSSV: 19521650 GVHD: ThS Tạ Thu Thủy 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 Đánh giá MSSV Phân công 19521305 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 19521447 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 19521615 Tuần 1: Đánh giá app Animal Facts + viết báo cáo Tuần 1: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 19521749 19521650 Tuần 1: Thiết kế form + viết báo cáo Tuần 1: Đánh giá app Zoopedia+ 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 1: 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 II TÌM HIỂU & NGHIÊN CỨU CÁC ỨNG DỤNG LIÊN QUAN 6 16 16 Animal Facts: 16 Zoopedia: 20 Sasol Wildlife for beginners: 24 Rút kinh nghiệm 28 DANH MỤC HÌNH ẢNH Hình 1 : Phiếu khảo sát nhu cầu sử dụng ứng dụng động vật học Hình 2: Biểu đồ khảo sát độ tuổi Hình : Biểu đồ khảo sát giới tính Hình : Biểu đồ khảo sát nhu cầu tìm hiểu động vật Hình : Biểu đồ khảo sát vấn đề tìm hiểu động vật học Hình 6: Biểu đồ khảo sát nhu cầu sử dụng ứng dụng di động động vật học Hình : Biểu đồ khảo sát mục đích sử dụng ứng dụng di động động vật học Hình 1: Hình ảnh giao diện đề xuất 10 Hình 9: Biểu đồ khảo sát màu sắc chủ đề ứng dụng 11 Hình 10 Biểu đồ khảo sát menu yêu thích 11 Hình 11 Biểu đồ khảo sát logo yêu thích 12 Hình 12 Biểu đồ khảo sát tiêu chí chọn sử dụng ứng dụng 13 Hình 13 Biểu đồ khảo sát tính mong muốn 14 Hình 14 Biểu đồ khảo sát điều cần thiện app động vật 14 Hình 15 Biểu đồ khảo sát nhu cầu sử dụng app động vật học 15 Hình 16 Biểu đồ khảo sát sẵn sàng chia sẻ thông tin app động vật học 15 Hình 17 Giao diện chung tính 16 Hình 18 Các icon Animal Facts 17 Hình 19 Hình ảnh block 17 Hình 20 Hình ảnh giao diện 17 Hình 21 Giao diện chung tính 18 Hình 22 Giao diện chung tính 19 Hình 23 Giao diện thơng tin động vật 19 Hình 24 Giao diện bố cục tính 20 Hình 25 Giao diện chức tìm kiếm lọc 21 Hình 26 Dẫn dắt người dùng 21 Hình 27 Giao diện bố cục tính 22 Hình 28 Động vật u thích 22 Hình 29 Hình ảnh động vật Zoopedia 23 Hình 30 Tương tác hạn chế 23 Hình 31 Giao diện bố cục tính 24 Hình 32 Giao diện xem nghe âm động vật 24 Hình 33 Giao diện thông tin động vật 25 Hình 34 Giao diện bố cục tính 25 Hình 35 Giao diện thông tin động vật 26 Hình 36 Giao diện bố cục tính 26 Hình 37 Tương tác hạn chế 27 Hình 38 Giao diện thông tin động vật 28 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 1 : 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 2: 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 Hình : Biểu đồ khảo sát nhu cầu tìm hiểu động vật 1.5 Những vấn đề quan tâm tìm hiểu động vật Theo kết khảo sát 136 câu trả lời tìm hiểu động vật người thường quan tâm tới Hệ thống động vật học (Nghiên cứu đa dạng giới động vật) sau vấn đề Hình thái động vật học (Nghiên cứu cấu tạo đời sống động vật) Cịn vấn đề khác quan tâm Hình : Biểu đồ khảo sát vấn đề tìm hiểu động vật học 1.6 Nhu cầu sử dụng ứng dụng di động động vật học Đa số người tham gia khảo sát chưa sử dụng ứng dụng di động động vật học trước chiếm 78.7%, số người sử dụng chiếm 21.3% Nhìn chung lượng người có nhu cầu sử dụng ứng dụng di động động vật học Hình 6: Biểu đồ khảo sát nhu cầu sử dụng ứng dụng di động động vật học 1.7 Mục đích sử dụng ứng dụng di động động vật học Đa số người sử dụng ứng dụng di động động vật học nhằm mục đích giải trí, sau mục đích học tập, nghiên cứu, cơng việc Hình : Biểu đồ khảo sát mục đích sử dụng ứng dụng di động động vật học Phân tích đề xuất giải pháp Sau thực qua khảo sát trên, nhóm em thu thập yêu cầu mong muốn khác từ người để hoàn thiện ứng dụng di động động vật học là: • Nên xây dựng giao gần gũi với người dùng, dễ dàng thao tác ứng dụng, giao diện cần đẹp mắt, rõ ràng để phù hợp với người dùng • Ứng dụng cần có thơng tin động vật đa dạng, có hình ảnh, âm video minh họa sống động giúp người dễ tiếp cận thơng tin • Ứng dụng cần xây dựng khơng q cầu kì nhiều chữ khiến người cảm thấy nhàm chán sử dụng • Hình ảnh đại diện cho động vật ưu tiên sắc nét, dễ nhận diện thay ưu tiên màu sắc đẹp, hình cối, • Cần tích hợp nhiều chức như: Tìm kiếm đa dạng, có xếp hạng động vật u thích, chia sẻ thông tin phân loại động vật, để phù hợp với nhiều mục đích khác người dùng II TÌM HIỂU & NGHIÊN CỨU CÁC ỨNG DỤNG LIÊN QUAN Animal Facts: 1.1 Ưu điểm: a Trình bày đơn giản, thân thiện với người dùng: Hình 17 Giao diện chung tính 16 Giao diện trình bày đa dạng hình ảnh, sử dụng hình ảnh nhiều chữ, giúp người dùng dễ nhận diện, hứng thú trải nghiệm ứng dụng kích thích tị mị làm cho người sử dụng lâu Trình bày bố cục dạng block phân cấp bố cục cụ thể, giúp người dùng dễ hiểu, dễ sử dụng Hình 18 Các icon Animal Facts Hình 19 Hình ảnh block Trau chuốt icon để phù hợp với chức chủ đề ứng dụng Giúp tăng trải nghiệm người dùng, khiến cho người dễ hiểu dễ sử dụng tăng tính nhận diện ứng dụng b Hình ảnh chân thực đa dạng: Animal Facts tập trung vào phần hình ảnh nhiều để mang đến cho người dùng trải nghiệm tuyệt vời Hình ảnh lồi động vật đa dạng, chất lượng hình ảnh đẹp chân thực Mỗi loại động vật cung cấp nhiều hình ảnh, lướt sang trái phải để xem nhiều lồi động vật Hình 20 Hình ảnh giao diện 17 c Phân loại lồi động vật danh sách rõ ràng: Hình 21 Giao diện chung tính App phân nhiều loại danh sách, cho phép người dùng xem theo sở thích Ta thấy app phân loại danh sách “discover” (danh sách khám phá), “Animals” (danh sách loài động vật nói chung), “Pets” (danh sách thú cưng), “Favorite” (danh sách u thích) Ngồi ra, danh sách Animal Facts cịn có thêm phân loại lồi động vật Ta thấy:  Trong mục “Animals”, app phân loại động vật theo loài, mức độ tuyệt chủng, theo nơi ở,… giúp người dùng dễ dàng quan sát loài mà quan tâm  Trong mục “Pets”, app phân loại thú cưng theo thú cưng mèo, theo thú cưng cho,… giúp người dùng xem danh sách thú cưng mà thích 18 d Thơng tin loại động vật trình bày rõ ràng đầy đủ: Hình 22 Giao diện chung tính Thơng tin động vật trình bày rõ ràng, gọn gàng, dễ hiểu tạo hứng thú cho người xem Ngoài phần nơi phân bố động vật sử dụng hình ảnh đồ để tạo ấn tượng với người dùng Người dùng đánh dấu lồi động vật mà u thích quan tâm cách nhấn icon “trái tim” Zoopedia đưa động vật vào danh sách riêng 1.2 Nhược điểm: a Một số icon không bật: Icon trái tim để thêm động vật vào danh sách ưa thích bị chìm bị trùng màu background, khó nhận Hình 23 Giao diện thơng tin động vật 19 b Thiếu chức xem video nghe âm động vật: Thơng tin hình ảnh động vật đầy đủ đa dạng, khơng có chức xem video lồi động vật nghe âm Zoopedia: 2.1 Ưu điểm: a Trình bày rõ ràng, dễ hiểu sử dụng màu sắc phù hợp Hình 24 Giao diện bố cục tính Từ hình 1.24 , ta thấy Zoopedia Sử dụng tone màu sáng phù hợp với chủ đề môi trường , điều giúp người dùng cảm thấy dễ chịu sử dụng app Ngoài , Trình bày dạng block giúp người dùng dễ dàng tìm kiếm theo dõi Zoopedia tận dụng tối ưu icon cho mục nội dung giúp người dùng dễ nhận biết Ta thấy giao diện có phân chia tách bạch danh sách động vật nói chung danh sách động vật u thích Giúp cho người dùng xem lồi động vật u thích dễ dàng không nhiều thời gian 20 b Chức thuận tiện cho người dùng có dẫn dắt người dùng: Khi sử dụng app để tìm hiểu thơng tin, chức tìm kiếm lọc mang đến nhiều tiện lợi cho người dùng Ở Zoopedia trang bị chức giúp người dùng tìm thơng tin lồi động vật mà muốn Hình 25 Giao diện chức tìm kiếm lọc Ngồi ra, vào ứng dụng ta thấy hướng dẫn người dùng tìm kiếm thơng tin lồi động vật - “Search by name “ Hình 26 Dẫn dắt người dùng 21 c Trình bày thơng tin lồi động vật đầy đủ dễ hiểu: Thơng tin lồi động vật, nơi , kích thước thức ăn chúng trau chuốt tỉ mỉ, với đầy đủ thơng tin hình ảnh chi tiết cho lồi động vật Hình 27 Giao diện bố cục tính Ngồi ra, mục thơng tin trạng thái “Status” làm bật, trạng thái để thấy rõ lồi tuyệt chủng, cịn số lượng ít, số lượng ổn định, Qua , giúp người dùng có ý thức bảo vệ mơi trường bảo vệ loài bị tuyệt chủng Người dùng đánh dấu lồi động vật mà u thích quan tâm cách nhấn icon “trái tim ” Zoopedia đưa động vật vào danh sách riêng Hình 28 Động vật yêu thích 22 2.3 Nhược điểm a Hình ảnh lồi động vật chưa đa dạng chân thực: Hình 29 Hình ảnh động vật Zoopedia Do ứng dụng tìm hiểu thơng tin loài động vật giới thực , nên chất lượng hình ảnh cần yêu cầu cao Trong Zoopedia, lồi động vật có hình ảnh số lồi khơng sử dụng ảnh thực mà sử dụng hình ảnh đồ họa b Khơng có phân loại lồi động vật: Các lồi động vật khơng phân chia theo , theo lớp, theo lồi mà trình bày chung danh sách , khiến cho người dùng cảm thấy rối khó tìm lồi động vật chung nhóm c 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 đại 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 Ví dụ như: Để trở trang chủ nhấn icon “close filter” icon “back” mà lướt nhấn icon logo “Zoopedia” Hình 30 Tương tác hạn chế 23 d Chức chưa đa dạng: Zoopedia xem ảnh đọc thơng tin để biết lồi động vật.Cịn nhiều cách để tìm hiểu xem lồi động vật nghe âm thanh, xem video,… mà không áp dụng Phần Information có phần điều chỉnh dark mode mà khơng có nhiều chức khác, làm người dùng bị hụt hẫng khơng có nhiều tương tác người dùng Hình 31 Giao diện bố cục tính Sasol Wildlife for beginners: 3.1 Ưu điểm: a Có chức xem video nghe âm động vật: Hình 32 Giao diện xem nghe âm động vật 24 Sasol Wildlife for beginners trang bị thêm chức nghe âm xem video hoạt động động vật giúp người dùng có trải nghiệm thú vị b Hình ảnh chân thực đa dạng: Hình 33 Giao diện thơng tin động vật App có nhiều hình ảnh để mang đến cho người dùng trải nghiệm tốt Hình ảnh lồi động vật đa dạng, chất lượng hình ảnh đẹp chân thực Mỗi loại động vật cung cấp nhiều hình ảnh, lướt sang trái phải để xem nhiều loài động vật 3.2 Nhược điểm: a 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 b Thơng tin lồi động vật khơng đầy đủ: Phần thơng tin động vật phần quan trọng phần chưa đầy đủ, cung cấp không đủ thơng tin cho người dùng Hình 34 Giao diện bố cục tính 25 Hình 35 Giao diện thơng tin động vật 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 bố cục tính 26 Tương tác người dùng 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 yêu thích , dùng icon gây khó hiểu d Hình 37 Tương tác hạn chế 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 27 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 q nhiều màu sắc đơi 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 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 28 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 29