Ie106 m22 cncl bctuancuoi nhom05 animal pedia report

DANH MỤC HÌNH ẢNH Hình 1.1 Phiếu khảo sát nhu cầu sử dụng ứng dụng động vật học .... Khảo sát yêu cầu Link khảo sát:https://forms.gle/uHgiMmMPgrpmSTEP8 Hình 1.1 Phiếu khảo sát nhu cầu

ĐẠ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

Lê Thị Hoài Giang MSSV: 19521447

Nguyễn Thế Phương Huynh MSSV: 19521650

TP Hồ Chí Minh, 06/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 và 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

Trần Linh

Đa 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 2: Phác thảo giao diện

chương 2 (mục 1, 2, 3, 4) + Tổng hợp báo cáo

Tuần 3: Hoàn thành phác

thảo tuần 2+ Tổng hợp báo cáo

Tuần 4: Hoàn thành các giao

diện được giao + Tổng hợp báo cáo

Tuần 5: Hoàn thành các

tương tác giao diện + Tổng hợp báo cáo

Tuần cuối: Hoành thành

slide, nội dung thuyết trình, báo cáo

Tuần 4: Hoàn thành các giao

diện được giao

Lê Hữu Huy 19521615

Tuần 1: Đánh giá app

Animal Facts + viết báo cáo

Tuần 2: Phác thảo giao diện

chương 2 (mục 5, 6, 7, 8, 9)

Tuần 3: Hoàn thành phác

thảo tuần 2

Tuần 4: Hoàn thành các giao

diện được giao

Tuần 3: Hoàn thành phác

thảo tuần 2

Tuần 4: Hoàn thành các giao

diện được giao

Tuần 1: Đánh giá app

Zoopedia+ viết báo cáo

Tuần 2: Phác thảo giao diện

chương 2 (mục 15, 16, 18, 20)

Tuần 3: Hoàn thành phác

thảo tuần 2

Tuần 4: Hoàn thành các giao

diện được giao

MỤC LỤC

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 2

BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN 3

MỤC LỤC 6

DANH MỤC HÌNH ẢNH 9

CHƯƠNG 1: KHẢO SÁT PHÂN TÍCH THAM KHẢO 13

1.1 KHẢO SÁT YÊU CẦU KHÁCH HÀNG VÀ PHÂN TÍCH YÊU CẦU 13

1.1.1 Khảo sát yêu cầu 13

1.1.2 Phân tích và đề xuất giải pháp 22

1.2 TÌM HIỂU & NGHIÊN CỨU CÁC ỨNG DỤNG LIÊN QUAN 22

1.2.1 Animal Facts 22

1.2.2 Animal Facts 26

1.2.3 Sasol Wildlife for beginners 30

1.2.4 Rút ra kinh nghiệm 33

CHƯƠNG 2: PHÁC THẢO GIAO DIỆN 35

2.1 Màn hình bắt đầu 35

2.2 Màn hình đề xuất động vật: 36

2.3 Màn hình đăng kí 36

2.4 Màn hình đăng nhập 37

2.5 Màn hình trang chủ 37

2.6 Màn hình trang phân loại 38

2.7 Màn hình danh sách động vật 39

2.8 Màn hình danh sách thú cưng 39

2.9 Màn hình danh sách yêu thích 40

2.10 Màn hình chia sẻ động vật 40

2.11 Màn hình thông tin động vật 41

2.12 Màn hình thông tin động vật chi tiết 42

2.13 Màn hình tìm kiếm (bằng nhập thông tin) 43

2.14 Màn hình tìm kiếm (bằng hình ảnh) 43

2.15 Màn hình tình trạng phân bố động vật 44

2.16 Màn hình nơi xem được động vật thật 44

2.17 Màn hình thông tin tài khoản 45

2.18 Màn hình bài viết về động vật 45

2.19 Màn hình hiển thị câu hỏi xác nhận 46

2.20 Màn hình ủng hộ tiền 46

2.21 Màn hình lựa chọn ngân hàng 47

2.22 Màn hình xếp hạng và chia sẻ app 47

CHƯƠNG 3: GIAO DIỆN HOÀN CHỈNH 48

3.1 Bắt đầu – đăng nhập – đăng ký 48

3.2 Tìm kiếm 49

3.3 Trang chủ 50

3.4 Động vật 51

3.5 Yêu thích 52

3.6 Tài khoản 53

3.7 Thông tin động vật 56

3.8 Tình trạng 57

3.9 Ủng hộ 58

3.10 Địa điểm tham quan 59

3.11 Tin Tức – Tin tức bài báo 59

3.12 Truyện cổ tích – chi tiết truyện cổ tích 60

3.13 Top quan tâm 61

CHƯƠNG 4: TƯƠNG TÁC GIAO DIỆN 62

4.1 Tương tác theo giao diện “Đăng nhập/ Đăng ký” 63

4.1.1 Tương tác tổng thể 63

4.2 Tương tác theo giao diện “Trang chủ” 63

4.2.1 Tương tác tổng thể 63

4.2.2 Giao diện chức năng tìm kiếm 64

4.2.3 Giao diện chức năng “hashtag” và “khoảnh khắc đẹp” 65

4.2.4 Giao diện chức năng xem “top quan tâm” 66

4.2.5 Giao diện “tin tức” 67

4.2.6 Giao diện ”địa điểm tham quan” 68

4.2.7 Giao diện “dành riêng cho bạn” 69

4.2.8 Giao diện xem tài khoản 70

4.3 Tương tác theo giao diện “Động vật” 71

4.3.1 Tương tác tổng thể 71

4.3.2 Giao diện chọn động vật theo phân lớp: 72

4.3.3 Giao diện xem chi tiết thông tin động vật 73

4.4 Tương tác theo giao diện “Yêu thích” 74

4.4.1 Tương tác tổng thể 74

4.5 Tương tác theo giao diện “Tài khoản” 75

4.5.1 Tương tác tổng thể 75

4.5.2 Giao diện chức năng đổi tên tài khoản 76

4.5.3 Giao diện chức năng lịch sử ủng hộ 77

4.5.4 Giao diện chức năng đăng xuất 78

4.5.5 Giao diện chức năng trung tâm hỗ trợ 79

4.5.6 Giao diện chức năng điều khoản dịch vụ 79

4.6 Tương tác theo giao diện “Ủng hộ động vật” 80

4.6.1 Tổng thể tương tác 80

CHƯƠNG 5: KẾT LUẬN 81

5.1 Ưu điểm 81

5.2 Nhược điểm 82

5.3 Phương hướng phát triển 82

TÀI LIỆU THAM KHẢO 84

DANH MỤC HÌNH ẢNH

defined.

Hình 1.2 Biểu đồ khảo sát độ tuổi 14

Hình 1.3 Biểu đồ khảo sát giới tính 14

Hình 1.4 Biểu đồ khảo sát nhu cầu tìm hiểu về động vật 15

Hình 1.5 : Biểu đồ khảo sát vấn đề khi tìm hiểu động vật học 15

Hình 1.6 Biểu đồ khảo sát về nhu cầu sử dụng ứng dụng di động về động vật học 16

Hình 1.7 Biểu đồ khảo sát về mục đích sử dụng ứng dụng di động về động vật học 16

Hình 1.8 Hình ảnh giao diện được đề xuất 17

Hình 1.9 Biểu đồ khảo sát giao diện ứng dụng di động về động vật học 17

Hình 1.10 Biểu đồ khảo sát về màu sắc chủ đề ứng dụng 18

Hình 1.11 Biểu đồ khảo sát về thanh menu yêu thích 18

Hình 1.12 Hình ảnh các logo 19

Hình 1.13 Biểu đồ khảo sát về logo yêu thích 19

Hình 1.14 Biểu đồ khảo sát tiêu chí chọn sử dụng ứng dụng 20

Hình 1.15 Biểu đồ khảo sát tính năng mong muốn 20

Hình 1.16 Biểu đồ khảo sát những điều cần thiện của app động vật 21

Hình 1.17 Biểu đồ khảo sát về nhu cầu sử dụng app động vật học 21

Hình 1.18 Biểu đồ khảo sát sự sẵn sàng chia sẻ thông tin app động vật học 22

Hình 1.19 Giao diện chung các tính năng 23

Hình 1.20 Bố cục các block 23

Hình 1.21 Các icon của Animal Facts 23

Hình 1.22 Hình ảnh giao diện 24

Hình 1.23 Giao diện chung các tính năng 24

Hình 1.24 Giao diện chung các tính năng 25

Hình 1.25 Giao diện thông tin động vật 26

Hình 1.26 Giao diện bố cục các tính năng 26

Hình 1.27 Giao diện chức năng tìm kiếm và lọc 27

Hình 1.28 Dẫn dắt người dùng 27

Hình 1.29 Giao diện bố cục các tính năng 28

Hình 1.30 Hình ảnh động vật trong Zoopedia 28

Hình 1.31 Tương tác hạn chế 29

Hình 1.32 Tùy chọn giao diện 30

Hình 1.33 Giao diện xem và nghe âm thanh động vật 30

Hình 1.34 Giao diện thông tin động vật 31

Hình 1.35 Thông tin động vật 31

Hình 1.36 Giao diện động vật 32

Hình 1.37 Tương tác hạn chế 32

Hình 1.38 Giao diện thông tin động vật 33

Hình 2.1 Màn hình bắt đầu 35

Hình 2.2 Màn hình đề xuất động vật 36

Hình 2.3 Màn hình đăng ký 36

Hình 2.4 Màn hình đăng nhập 37

Hình 2.5 Màn hình trang chủ 37

Hình 2.6 Màn hình trang phân loại 38

Hình 2.7 Màn hình danh sách động vật 39

Hình 2.8 Màn hình danh sách thú cưng 39

Hình 2.9 Màn hình danh sách yêu thích 40

Hình 2.10 Màn hình chia sẻ động vật 40

Hình 2.11 Màn hình thông tin động vật 41

Hình 2.12 Màn hình thông tin động vật chi tiết 42

Hình 2.13 Màn hình tìm kiếm bằng thông tin 43

Hình 2.14 Màn hình tìm kiếm bằng hình ảnh 43

Hình 2.15 Màn hình tình trạng phân bố động vật 44

Hình 2.16 Màn hình nơi xem được động vật thật 44

Hình 2.17 Màn hình thông tin tài khoản 45

Hình 2.18 Màn hình bài viết về động vật 45

Hình 2.19 Màn hình hiển thị câu hỏi xác nhận 46

Hình 2.20 Màn hình ủng hộ tiền 46

Hình 2.21 Màn hình lựa chọn ngân hàng 47

Hình 2.22 Màn hình xếp hạng và chia sẻ app 47

Hình 3.1 Khảo sát 48

Hình 3.2 Màn hình bắt đầu 2 48

Hình 3.3 Màn hình bắt đầu 1 48

Hình 3.4 Đăng ký 49

Hình 3.5 Đăng nhập 49

Hình 3.6 Lựa chọn đăng nhập 49

Hình 3.7 Tìm kiếm bằng chữ 49

Hình 3.8 Tìm kiếm bằng hình ảnh 50

Hình 3.9 Kết quả tìm kiếm hình ảnh 50

Hình 3.10 Chọn ảnh để tìm kiếm 50

Hình 3.11 Trang chủ 50

Hình 3.12 Trang chủ - dành riêng cho bạn 51

Hình 3.13 Trang chủ - địa điểm tham qua - truyện cổ tích 51

Hình 3.14 Trang chủ - top quan tâm – tin tức 51

Hình 3.15 Động vật 52

Hình 3.16 Động vật (lướt) 52

Hình 3.17 Yêu thích 53

Hình 3.18 Yêu thích (lướt) 53

Hình 3.19 Sửa hồ sơ 54

Hình 3.20 Tài khoản 54

Hình 3.21 Thay đổi mật khẩu 54

Hình 3.22 Xác nhận mật khẩu 54

Hình 3.23 Đặt lại mật khẩu 54

Hình 3.24 Đăng xuất 55

Hình 3.25 Lịch sử ủng hộ 55

Hình 3.26 Điều khoản dịch vụ 55

Hình 3.27 Trung tâm hỗ trợ - gửi email 56

Hình 3.28 Trung tâm hỗ trợ - điện thoại 56

Hình 3.29 Trung tâm hỗ trợ 56

Hình 3.30 Thông tin động vật - chia sẻ 57

Hình 3.31 Thông tin động vật 57

Hình 3.32 Thông tin động vật (lướt) 57

Hình 3.33 Tình trạng 57

Hình 3.34 Ủng hộ 58

Hình 3.35 Ngân hàng 58

Hình 3.36 OTP 58

Hình 3.37 Xác nhận giao dịch 58

Hình 3.38 Địa điểm tham quan 59

Hình 3.39 Tin tức 60

Hình 3.40 Tin tức - chi tiết 60

Hình 3.41 Chi tiết truyện cổ tích 61

Hình 3.42 Chi tiết truyện cổ tích (lướt) 61

Hình 3.43 Danh sách truyện cổ tích 61

Hình 3.44 Top quan tâm 61

Hình 4.1 Tương tác giao diện tổng thể 62

Hình 4.2 Tương tác tổng thể giao diện đăng nhập / đăng ký 63

Hình 4.3 Tương tác tổng thể giao diện trang chủ 63

Hình 4.4 Giao diện chức năng tìm kiếm bằng chữ, hình ảnh 64

Hình 4.5 Giao diện tương tác hashtag và khoảnh khắc đẹp 65

Hình 4.6 Giao diện tương tác top quan tâm 66

Hình 4.7 Giao diện tương tác tin tức động vật 67

Hình 4.8 Giao diện tương tác địa điểm tham quan 68

Hình 4.9 Giao diện tương tác dành riêng cho bạn 69

Hình 4.10 Giao diện tương tác trang chủ qua thông tin tài khoản 70

Hình 4.11 Tương tác tổng thể động vật 71

Hình 4.12 Giao diện tương tác chọn động vật theo phân loài 72

Hình 4.13 Tương tác giao diện xem chi tiết thông tin động vật 73

Hình 4.14 Tương tác tổng thể trang yêu thích 74

Hình 4.15 Tương tác tổng thể tài khoản 75

Hình 4.16 Giao diện tương tác đổi tên tài khoản 76

Hình 4.17 Giao diện tương tác xem lịch sử ủng hộ 77

Hình 4.18 Giao diện tương tác đăng xuất 78

Hình 4.19 Giao diện tương tác trung tâm hỗ trợ 79

Hình 4.20 Giao diện tương tác điều khoản và dịch vụ 79

Hình 4.21 Tổng thể tương tác ủng hộ động vật 80

1

CHƯƠNG 1: KHẢO SÁT PHÂN TÍCH THAM KHẢO

1.1 KHẢO SÁT YÊU CẦU KHÁCH HÀNG VÀ PHÂN TÍCH YÊU CẦU

1.1.1 Khảo sát yêu cầu

Link khảo sát:https://forms.gle/uHgiMmMPgrpmSTEP8

Hình 1.1 Phiếu khảo sát nhu cầu sử dụng ứng dụng động vật học

Sau khi 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 về phía người dùng

1.1.1.1 Độ tuổi

Độ tuổi trung bình tham gia khảo sát từ 18 đến 30 tuổi chiếm 95,6%, còn lại là

độ tuổi dưới 18 tuổi

1.1.1.2 Giới tính

Số lượng người tham gia khảo sát nghiêng nhiều về phía nam nhiều hơn với 51.5%, tiếp theo là nữ với 48.5%

1.1.1.3 Nhu cầu tìm hiểu về động vật

Phụ thuộc vào nhiều yếu tố mà nhu cầu tìm hiểu về động vật cũng bị ảnh hưởng

Về cơ bản thì người tham gia khảo sát chỉ thỉnh thoảng mới tìm hiểu về động vật

Hình 1.2 Biểu đồ khảo sát độ tuổi

Hình 1.3 Biểu đồ khảo sát giới tính

1.1.1.4 Những vấn đề quan tâm khi tìm hiểu về động vật

Theo như kết quả khảo sát của 136 câu trả lời thì khi tìm hiểu về động vật mọi người thường quan tâm nhất tới Hệ thống động vật học (Nghiên cứu sự đa dạng của giới động vật) sau đó là vấn đề về Hình thái động vật học (Nghiên cứu cấu tạo ngoài

và đời sống của động vật) Còn các vấn đề khác thì ít được quan tâm hơn

Hình 1.4 Biểu đồ khảo sát nhu cầu tìm hiểu về động vật

Hình 1.5 : Biểu đồ khảo sát vấn đề khi tìm hiểu động vật học

1.1.1.5 Nhu cầu về sử dụng ứng dụng di động về động vật học

Đa số người tham gia khảo sát đều chưa từng sử dụng ứng dụng di động về động vật học nào trước đây cả chiếm 78.7%, số người đã từng sử dụng chỉ chiếm 21.3% Nhìn chung lượng người có nhu cầu sử dụng ứng dụng di động về động vật học khá ít

1.1.1.7 Giao diện ứng dụng di động về động vật học

Giao diện số 4 là giao diện được lựa chọn và được bình chọn 4 sao nhiều nhất

Hình 1.8 Hình ảnh giao diện được đề xuất

Hình 1.9 Biểu đồ khảo sát giao diện ứng dụng di động về động vật học

Hình 1.10 Biểu đồ khảo sát về màu sắc chủ đề ứng dụng

Hình 1.11 Biểu đồ khảo sát về thanh menu yêu thích

1.1.1.10 Logo phù hợp với ứng dụng

Đa số người khảo sát chọn logo 2 (27/136 lựa chọn) và logo 4 (27/136 lựa chọn) là logo phù hợp với ứng dụng di động về động vật

Hình 1.12 Hình ảnh các logo Hình 1.13 Biểu đồ khảo sát về logo yêu thích

1.1.1.11 Tiêu chí để chọn sử dụng ứng dụng di động về động vật học

Những tiêu chí được người khảo sát đánh giá cao là giao diện đẹp mắt (78.7%);

dễ dàng thao tác (79.4%); hình ảnh/video minh họa sinh động (86.8%); thông tin

đa dạng (72.8%)

1.1.1.12 Tính năng/chức năng

Hình 1.14 Biểu đồ khảo sát tiêu chí chọn sử dụng ứng dụng

Hình 1.15 Biểu đồ khảo sát tính năng mong muốn

Đa số người khảo sát mong muốn có tính năng tìm kiếm đa dạng bằng tên,hình ảnh, (89.7%); chia sẻ về thông tin động vật (74.3%) và phân loại động vật

(64%)

1.1.1.13 Những điều cần cải thiện

Giao diện ứng dụng, thông tin về động vật, thao tác sử dụng và tìm kiếm thông tin động vật đều được người khảo sát cho là quan trọng và cần cải thiện về các ứng dụng di động động vật trước đây

1.1.1.14 Nhu cầu sử dụng ứng dụng di động về động vật học

Đa số khảo sát về nhu cầu sử dụng ứng dụng di động về động vật học là Có (87.5%)

Hình 1.16 Biểu đồ khảo sát những điều cần thiện của app động vật

Hình 1.17 Biểu đồ khảo sát về nhu cầu sử dụng app động vật học

1.1.1.15 Sự sẵn sàng chia sẻ ứng dụng di động về động vật học

Đa số người khảo sát đều xác nhận sẽ sẵn sàng giới thiệu về ứng dụng di động

về động vật học với người thân, bạn bè

1.1.2 Phân tích và đề xuất giải pháp

Sau khi thực hiện qua cuộc khảo sát trên, nhóm em đã thu thập được các yêu cầu cũng như mong muốn khác nhau từ mọi người để hoàn thiện một ứng dụng di động về động vật học là:

• Nên xây dựng một giao hiện gần gũi với người dùng, dễ dàng thao tác trên ứng dụng, giao diện cần đẹp mắt, rõ ràng để phù hợp với mọi người dùng

• Ứng dụng cần có thông tin động vật đa dạng, có các hình ảnh, âm thanh và video minh họa sống động giúp mọi người dễ tiếp cận thông tin

• Ứng dụng cần xây dựng không quá cầu kì và nhiều chữ khiến mọi người cảm thấy nhàm chán khi 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 vì ưu tiên màu sắc đẹp, hình nền cây cối,

• Cần tích hợp nhiều chức năng như: Tìm kiếm đa dạng, có bảng xếp hạng động vật yêu thích, chia sẻ thông tin và phân loại động vật, để phù hợp với nhiều mục đích khác nhau của người dùng

1.2 TÌM HIỂU & NGHIÊN CỨU CÁC ỨNG DỤNG LIÊN QUAN

1.2.1 Animal Facts

1.2.1.1 Ưu điểm

Hình 1.18 Biểu đồ khảo sát sự sẵn sàng chia sẻ thông tin app động vật học

a Trình bày bố cục đơn giản, màu nền trắng và làm nổi bật được hình ảnh:

Giao diện được trình bày đa dạng hình ảnh, sử dụng hình ảnh nhiều hơn chữ, giúp người dùng dễ nhận diện, hứng thú khi trải nghiệm ứng dụng và kích thích sự tò

mò làm cho người sử dụng lâu hơn

Trình bày bố cục dạng block và phân cấp bố cục cụ thể, giúp người dùng dễ hiểu, dễ sử dụng hơn

Bộ icon lạ mắt và có gắn nhãn giúp người dùng dễ hiểu cũng như phù hợp với chức năng và chủ đề của ứng dụng Giúp tăng trải nghiệm người dùng, khiến cho người cùng dễ hiểu dễ sử dụng và tăng tính nhận diện của ứng dụng

Hình 1.19 Giao diện chung các tính năng

Hình 1.20 Bố cục các block Hình 1.21 Các icon của Animal Facts

b Hình ảnh chân thực và đa dạng:

Animal Facts tập trung vào phần hình ảnh rất nhiều để mang đến cho

người dùng những trải nghiệm tuyệt

vời Hình ảnh của mỗi loài động vật

rất đa dạng, chất lượng hình ảnh rất

đẹp và chân thực Mỗi loại động vật

được cung cấp rất nhiều hình ảnh,

bằng các lướt sang trái hoặc phải để

xem được nhiều loài động vật

c Phân loại các loài động vật và các danh sách rõ ràng:

App phân ra nhiều loại danh sách, cho phép người dùng có thể xem theo

sở thích của mình Ta thấy app phân loại ra 4 danh sách chính là “discover”

Hình 1.22 Hình ảnh giao diện

Hình 1.23 Giao diện chung các tính năng

(danh sách khám phá), “Animals” (danh sách các loài động vật nói chung),

“Pets” (danh sách thú cưng), “Favorite” (danh sách yêu thích)

Ngoài ra, trong mỗi danh sách Animal Facts còn có thêm phân loại các loà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 các loài

mà mình quan tâm hơn

• 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 có thể xem các danh sách thú cưng

mà mình thích

d Thông tin của các loại động vật được trình bày rõ ràng và đầy đủ:

Thông tin của động vật được trình bày rõ ràng, gọn gàng, dễ hiểu tạo sự hứng thú cho người xem Ngoài ra phần nơi phân bố động vật sử dụng hình ảnh bản đồ để tạo ấn tượng với người dùng

Hình 1.24 Giao diện chung các tính năng

Người dùng cũng có thể đánh dấu các loài động vật mà mình yêu thích

và quan tâm bằng cách nhấn icon “trái tim” Zoopedia sẽ đưa những động vật

này vào 1 danh sách riêng

1.2.1.2 Nhược điểm

a Một số icon và chữ không được nổi bật:

Icon trái tim để thêm động vật vào danh sách ưa thích bị chìm và bị trùng màu nền, khó

nhận ra Và chữ với màu nền tương phản kém ,

khó đọc Một số chữ bị đè lên hình

b Thiếu chức năng xem video và nghe âm

thanh động vật:

Thông tin và hình ảnh của động vật khá đầy

đủ và đa dạng, nhưng không có chức năng xem

video các loài động vật và nghe âm thanh

1.2.2 Animal Facts

1.2.2.1 Ưu điểm

a Trình bày rõ ràng, dễ hiểu và sử dụng màu sắc phù hợp:

Hình 1.25 Giao diện thông tin động vật

Hình 1.26 Giao diện bố cục các tính năng

Từ hình ảnh ta thấy Zoopedia Sử dụng tone màu sáng và phù hợp với chủ đề môi trường điều này giúp người dùng cảm thấy dễ chịu khi sử dụng app Ngoài ra, 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 từng mục nội dung giúp người dùng dễ nhận biết

Ta thấy giao diện chính có phân chia tách bạch giữa danh sách động vật nói chung

và danh sách động vật yêu thích Giúp cho người dùng có thể xem các loài động vật mình yêu thích dễ dàng hơn và không mất nhiều thời gian

Khi sử dụng app để tìm hiểu thông tin, thì chức năng tìm kiếm và lọc sẽ mang đến

rất nhiều sự tiện lợi cho người dùng Ở Zoopedia cũng được trang bị chức năng này giúp người dùng có thể tìm thông tin loài động vật mà mình muốn

Ngoài ra, khi vào ứng dụng thì ta thấy

được sự hướng dẫn người dùng tìm kiếm

thông tin của các loài động vật - “Search by

name “

Hình 1.27 Giao diện chức năng tìm kiếm và lọc

Hình 1.28 Dẫn dắt người dùng

c Trình bày thông tin của các loài động vật đầy đủ và dễ hiểu:

Thông tin các loài động vật, nơi ở, kích thước và thức ăn của chúng cũng được

trau chuốt tỉ mỉ, với đầy đủ thông tin và hình ảnh chi tiết cho từng loài động vật

Ngoài ra, mục thông tin trạng thái “Status” được làm nổi bật, các trạng thái này để

thấy rõ được loài nào đang sắp 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 cũng như bảo vệ các loài sắp bị

tuyệt chủng

Người dùng cũng có thể đánh dấu các loài động vật mà mình yêu thích và quan

tâm bằng cách nhấn icon “trái tim ” Zoopedia sẽ đưa những động vật này vào 1 danh

sách riêng

1.2.2.2 Nhược điểm

a Hình ảnh chưa được đa dạng và chân thực:

Do đây là ứng dụng tìm hiểu thông tin về các loài động vật trong thế giới thực , nên chất

lượng hình ảnh cần yêu cầu cao Trong Zoopedia,

b Không có sự phân loại giữa các loài động vật:

Các loài động vật không được phân chia theo bộ , theo lớp, theo loài mà được trình bày chung 1 danh sách , đôi khi sẽ khiến cho người dùng cảm thấy hơi rối và khó tìm được các loà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 chỉ có thể tương tác qua các icon bắt buộc, mà không thể vuốt, lướt hoặc các cách tương tác hiện đạ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 ra cảm giác thích thú khi sử dụng

Ví dụ như: Để trở về trang chủ thì có thể nhấn các icon “close filter” và icon “back” mà không thể lướt hoặc nhấn icon logo “Zoopedia”

Zoopedia chỉ có thể xem ảnh và đọc thông tin để biết về các loài động vật.Còn rất nhiều cách để tìm hiểu và xem các loài động vật như nghe âm thanh, xem video,… mà không được áp dụng

Hình 1.31 Tương tác hạn chế

Phần Information chỉ có phần điều chỉnh dark mode mà không có nhiều chức năng khác, làm người dùng sẽ bị hụt hẫng và không có nhiều tương tác người dùng.

1.2.3 Sasol Wildlife for beginners

1.2.3.1 Ưu điểm

Sasol Wildlife for beginners được trang bị thêm chức năng nghe âm thanh

và xem được video hoạt động của động vật giúp người dùng có được những trải nghiệm thú vị nhất

Hình 1.32 Tùy chọn giao diện

Hình 1.33 Giao diện xem và nghe âm thanh động vật

đủ, sẽ cung cấp không đủ thông tin cho

b Giao diện không tương tích với nhiều thiết bị:

Giao diện app chỉ tương thích với 1 màn hình nhất định, với các thiết bị tai thỏ và

hình lớn ảnh nội dung app vẫn hiển thị 1 loại

màn hình tạo nên những khoảng trống khiến

người dùng cảm thấy khó chịu

c Không có sự phân loại giữa các loài động vật:

Các loài động vật không được phân chia theo bộ, theo lớp, theo loài mà được trình bày

chung 1 danh sách, đôi khi sẽ khiến cho

người dùng cảm thấy hơi rối và khó tìm được

các loài động vật chung nhóm

Người dùng chỉ có thể tương tác qua các icon

bắt buộc, mà không thể vuốt, lướt hoặc các 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 ra cảm giác thích thú khi

sử dụng

Ngoài ra, có nhiều icon bị dư thừa và khó hiểu Một số hình dạng khác nhau nhưng chức năng lại giống nhau Một số lại không rõ chức năng Ví dụ:

▪ Vừa sử dụng “Cancel” và “Done” để húy, mà không thấy rõ được 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

Hình 1.36 Giao diện động vật

Hình 1.37 Tương tác hạn chế

e Phần hướng dẫn sử dụng quá nhiều chữ và lỗi thời:

Hướng dẫn sử dụng app được bố trí quá nhiều chữ làm cho thiếu đi sự dẫn

dắt người dùng và làm rối mắt Thậm chí, khá lỗi thời

1.2.4 Rút ra kinh nghiệm

Hình ảnh, thông tin của app là yếu tố quan trọng, cho nên chất lượng và sự chân thực của hình ảnh liên quan đến định hướng của ứng dụng cần được phải chú trọng và đầu tư kĩ lưỡng Yếu tố thông tin cũng tương tự, cần có một nội dung thích hợp và đầy

đủ Các yếu tố hiện thỉ cần có sự liên kết lẫn nhau Các yếu tố đồ họa cũng sẽ giúp khả năng hiện thị của app trở nên khác biệt hơn so với yếu tố văn bản thông thường

Cần xây dựng một bố cục cụ thể và 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 năng phân loại động vật rất cần thiết Có thể phân loại theo loài, môi trường sống, theo tình trạng hiện tại (sắp tuyệt chủng, số lượng nhiều,…)

Hướng tới sự tối giản – đó là việc cần đảm bảo của xu hướng hiện nay Tạo ra nhiều hình ảnh hơn những là chữ, đồng thời kết thêm với từ ngữ và biểu tượng quen thuộc Hướng tới kết quả là một ứng dụng tuy đơn giản nhưng chất lượng, mang đến hiệu quả sử dụng cao

Yếu tố màu sắc quyết định cảm xúc của người sử dụng, cần phải xây dựng màu sắc dựa trên sự phù hợp với chủ đề, tránh việc sử dụng quá nhiều màu sắc đôi khi gây khó chịu cho người dùng Ví dụ: Làm app về chủ đề khoa học môi trường thì gam màu nên dùng là màu trắng và xanh lá cây hoặc xanh dương

Hình 1.38 Giao diện thông tin động vật

Hạn chế quá nhiều tác vụ và phức tạp với người dung Cụ thể đối với app về động vật thì người dùng có xu hướng quan tâm nhiều hơn về thông tin , hình ảnh, âm thanh của các loài vật

Tận dụng các yếu tố quen thuộc và thông dụng đối với người dùng Tránh làm khác đi hay phải đi giáo dục người dùng để có thể sử dụng được ứng dụng

Cần những chức năng mở rộng như xem video, nghe âm hoặc các chức năng chia sẻ khác để người dùng có được trải nghiệm tốt nhất

2 CHƯƠNG 2: PHÁC THẢO GIAO DIỆN

2.1 Màn hình bắt đầu

Hình 2.1 Màn hình bắt đầu

2.2 Màn hình đề xuất động vật:

Hình 2.2 Màn hình đề xuất động vật

2.3 Màn hình đăng kí

Hình 2.3 Màn hình đăng ký

2.4 Màn hình đăng nhập

Hình 2.4 Màn hình đăng nhập

Hình 2.5 Màn hình trang chủ

2.6 Màn hình trang phân loại

Hình 2.6 Màn hình trang phân loại

2.7 Màn hình danh sách động vật

Hình 2.7 Màn hình danh sách động vật

Hình 2.8 Màn hình danh sách thú cưng

2.9 Màn hình danh sách yêu thích

Hình 2.9 Màn hình danh sách yêu thích

2.10 Màn hình chia sẻ động vật

Hình 2.10 Màn hình chia sẻ động vật