Lab 3 ux ui animal pedia

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ư

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Lê Thị Hoài Giang MSSV: 19521447

Lê Hữu Huy MSSV: 19521615Phan Thị Liễu MSSV: 19521749Nguyễn Thế Phương Huynh MSSV: 19521650

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ọ và tên MSSV Phân công Đánh giá

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

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

Lê Hữu Huy 19521615

Tuần 1: Đánh giá app

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

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

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

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

giá 100/100

Tuần 2: Hoàn thành tốt

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

MỤC LỤC

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 2BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN 3

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

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

1 Khảo sát yêu cầu 8

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

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

2.19 Màn hình hiển thị câu hỏi xác nhận 39 2.20 Màn hình ủng hộ tiền 39 2.21 Màn hình lựa chọn ngân hàng 40 2.22 Màn hình xếp hạng và chia sẻ app 40

Hình 21 Màn hình lựa chọn ngân hàng 40Hình 22 Màn hình xếp hạng và chia sẻ app 40

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

1 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 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

1.3 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

1.5 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

Đ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

H

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.

Đa số người khảo sát điều chọn Bottom navigation là thanh menu yêu thích nhất. 

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

H

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

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

Đ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%).H

H

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

dụng, giao diện cần đẹp mắt, rõ ràng để phù hợp với mọi người dùng

minh họa sống động giúp mọi người dễ tiếp cận thông tin

nhàm chán khi sử dụng

sắc đẹp, hình nền cây cối,

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

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

1 Animal Facts:

1.1 Ưu điểm:

H

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

H

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

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

H

Hình SEQ Hình \* ARABIC23 Hình ảnh giao diện

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

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

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

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

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

H

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

2.3 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ácloà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:

H H

         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”

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

Hình SEQ Hình \* ARABIC32 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.

3 Sasol Wildlife for beginners: 

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

này chưa được đầy đủ, sẽ cung cấp

không đủ thông tin cho người

dùng

H

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

         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

H H

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

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

Hình SEQ Hình \* ARABIC38

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

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à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

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

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

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

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

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

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

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

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

5 Màn hình trang chủ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Hình 13 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 14 Màn hình tìm kiếm (bằng hình ảnh)

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

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

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

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

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

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

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

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

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

20 Màn hình ủng hộ tiền

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

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

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

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

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

1 Màn hình giới thiệu – đăng nhập – đăng ký:

Màn hình giới thiệu được bố trí logo kèm tên của ứng dụng và hình ảnh động vật giúp tạo cảm giác thân thiện và dễ hiểu cho người dùng Để trước khi nhấn “bắt đầu“, người dùng sẽ hiểu được mình sẽ và đang sử dụng ứng dụng gì

Phần đăng ký bố trí một số thông tin quan trọng của người dùng và có bố trí nhiều dạng đăng nhập và đăng ký khác nhau cho người dùng có thể tự do lựa chọn như là : tài khoản app, tài khoản google, tài khoản facebook,… và có hướng dẫn “Chưa có tài khoản? Đăng ký” cho những người lần đầu sử dụng.Tương tự màn hình đăng ký cũng có hướng dẫn

“Đã có tài khoản? Đăng nhập” để cho những người đã có tài khoản để thuận tiện cho người dùng

Ngoài ra, có thêm màn hình chọn động vật mà người dùng thích để trước khi sử dụng, ứng dụng có thể đáp ứng những nhu cầu riêng biệt của từng người Sử dụng nhiều hình ảnh động vật  để người dùng có thể chọn 1 cách trực quan , sinh động hơn và họ sẽ thích thú hơn là khi chỉ dùng chữ để nêu tên động vật đề xuất cho họ

và có nút thoát để thoát ra khi không muốn tìm nữa

Ở phần tìm kiếm bằng hình ảnh, người dùng có thể chụp hình rồi tìm và chọn hình ảnh đã

có sẵn trong thiết bị Kết quả sẽ cho ra danh sách các động vật có hình dáng giống như hình đầu vào

3 Trang chủ:

Xuyên suốt ứng dụng sẽ luôn sử dụng tông màu trắng và xanh dương cũng như cách chia

bố cục tương tự như trang chủ

 Phần đầu sẽ hiển thị tên của ứng dụng để tạo ấn tượng và làm cho người dùng ghi nhớ được ứng dụng của chúng ta Tiếp theo, bố trí thêm thanh tìm kiếm ở đầu để thuận tiện cho người dùng hơn và dễ dàng thấy hơn Ảnh đại diện của người dùng được đặt kế bên thanh tìm kiếm, để họ biết được tài khoản của mình đang đăng nhập. 

Về phần navigation được đặt ở cuối để giúp người dùng có thể dễ thấy và dễ thao tác hơn

và sẽ gồm bốn mục: trang chủ, động vật, yêu thích và tài khoản Được thiết kế có chữ và

bộ icon phù hợp với chủ đề của ứng dụng

Do có 4 mục nên mục trang chủ ưu tiên xếp vị trí đầu tiên để người dùng dễ nhận biết, 2 mục động vật và yêu thích được đặt kế bên nhau để người dùng có thể thuận tiện vào xemcác động vật và cuối cùng là mục tài khoản để người dùng có thể dễ quản lí tài khoản của