Ux ui animal pedia (1)

Khảo sát yêu cầu 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... N

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Nguyễn Thế Phương Huynh 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

(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

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

chương 2 (mục 10, 11, 12,

13, 14)

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

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

dung thuyết trình Tuần 5: Hoàn thành tốt

nhiệm vụ được giao Đánh giá 100/100

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

19521650 Tuần 1: Đánh giá app

Zoopedia+ viết báo cáo

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

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

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

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

11 Màn hình thông tin động vật 52

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

12.Truyện cổ tích – chi tiết truyện cổ tích: 77

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

2.3 Giao diện chức năng “hashtag” và “khoảnh khắc đẹp” 84 2.3 Giao diện chức năng xem “top quan tâm” 85

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

5.6 Giao diện chức năng trung tâm hỗ trợ 100 5.7 Giao diện chức năng điều khoản dịch vụ 100

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

1 Ưu điểm 102

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 14

Hình 1.4 Biểu đồ khảo sát nhu cầu tìm hiểu về động vật 16Hình 1.5 : Biểu đồ khảo sát vấn đề khi tìm hiểu động vật học 16Hì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 17Hì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 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 18

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

Hình 1.16 Biểu đồ khảo sát những điều cần thiện của app động vật 22Hình 1.17 Biểu đồ khảo sát về nhu cầu sử dụng app động vật học 22Hì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 23

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

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

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

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

Hình 4.4 Giao diện chức năng tìm kiếm bằng chữ, hình ảnh 64Hình 4.5 Giao diện tương tác hashtag và khoảnh khắc đẹp 65

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.12 Giao diện tương tác chọn động vật theo phân loài 72Hình 4.13 Tương tác giao diện xem chi tiết thông tin động vật 73

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

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

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

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.2 Độ 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

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

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

H

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ọingườ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ạngcủ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ạongoà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

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

H

H

Đ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ậthọ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ìnchung 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.8 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

Theo kết quả khảo sát thì tông màu lạnh được mọi người tham gia khảo sát lựachọn nhiều nhất cho màu chủ đề của ứng dụng di động về động vật

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

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

H

H

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.13 Tính năng/chức năng 

H

H

Đa số người khảo sát mong muốn có tính năng tiề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.14 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.15 Nhu cầu sử dụng ứng dụng di dộng về động vật học

H

H

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

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

2.1 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,

H

● Cần tích hợp nhiều chức năng như: Tìm kiếm đa dạng, có bản 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.

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

2.1 Animal Facts:

2.1.1 Ưu điểm:

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

H

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 chongười cùng dễ hiểu dễ sử dụng và tăng tính nhận diện của ứng dụng.

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

H

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” (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

H

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

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

2.1.2 Nhược điểm:

a Một số icon 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

background, khó nhận ra

H

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

2.2 Zoopedia:

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

Từ hình 27, 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ìnhbà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

H

Hình Giao diện thông tin động vậ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

b Chức năng thuận tiện cho người dùng và có sự dẫn dắt người dùng:

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

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 “

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

H

H H

đó , 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

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, thì mỗi loài

động vật chỉ có 1 hình ảnh và một số loài không sử dụng ảnh thực mà sử dụng hìnhảnh đồ họa

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ế:

H

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”

d Chức năng còn chưa được đa dạng

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

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

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

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

2.3 Sasol Wildlife for beginners: 

2.3.1 Ưu điểm:

a Có cả chức năng xem video và nghe âm thanh của động vật:

H

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

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

App có rất nhiều hình ảnh để mang đến cho người dùng những trải nghiệm tốt nhất.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

2.3.2 Nhược điểm:

a Thông tin của các loài động vật

không đầy đủ:

H

Phần thông tin về các động vật là phần quan trọng nhưng phần này chưa được đầy đủ, sẽ cung cấp không đủ thông tin cho người dùng.

Có một số thông tin trình bày gây rối mắt người đọc Nên trình bày khoa học, hợp lí hơn

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

d Tương tác người dùng còn nhiều hạn chế:

H H

         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ốngnhau 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

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

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

         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

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

H

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àunên dùng là màu trắng và xanh lá cây hoặc xanh dương.

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 “educate” 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

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

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