Bctuan3 nhom5

IE106.M22.CNCL - Thiết kế giao diện người dùng ĐẠ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ị 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 TP Hồ Chí Minh, 03/2022 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng 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) Nhóm 05: Linh Đa – Hữu Huy – Hồi Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng 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 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 3: Hoàn thành phát thảo tuần 2+ Tổng hợp báo cáo Tuần 3: 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 2: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 3: Hoàn thành phát thảo tuần Tuần 3: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 1: Đánh giá app Animal Facts + viết báo cáo Lê Hữu Huy 19521615 Đánh giá Tuần 2: Thác thảo giao diện chương (mục 5, 6, 7, 8, 9) Tuần 3: Hoàn thành phát thảo tuần 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 3: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Nhóm 05: Linh Đa – Hữu Huy – Hồi Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Phan Thị Liễu Nguyễn Thế Phương Huynh 19521749 19521650 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 17, 19, 21, 22) Tuần 2: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 3: Hoàn thành phát thảo tuần Tuần 3: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 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 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 Tuần 3: Hoàn thành phát thảo tuần Tuần 3: Hoàn thành tốt nhiệm vụ giao Đánh giá 80/100 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng 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 MỤC LỤC DANH MỤC HÌNH ẢNH CHƯƠNG 1: KHẢO SÁT PHÂN TÍCH THAM KHẢO 10 I KHẢO SÁT YÊU CẦU KHÁCH HÀNG VÀ PHÂN TÍCH YÊU CẦU 10 Khảo sát yêu cầu 10 Phân tích đề xuất giải pháp 19 II TÌM HIỂU & NGHIÊN CỨU CÁC ỨNG DỤNG LIÊN QUAN 19 Animal Facts: 19 Zoopedia: 23 Sasol Wildlife for beginners: 27 Rút kinh nghiệm 30 CHƯƠNG 2: PHÁC THẢO GIAO DIỆN 31 Màn hình bắt đầu 31 Màn hình đề xuất động vật: 32 Màn hình đăng kí 32 Màn hình đăng nhập 33 Màn hình trang chủ 33 Màn hình trang phân loại 34 Màn hình danh sách động vật 35 Màn hình danh sách thú cưng 35 Màn hình danh sách yêu thích 36 10 Màn hình chia sẻ động vật 36 11 Màn hình thơng tin động vật 37 12 Màn hình thơng tin động vật chi tiết 38 13 Màn hình tìm kiếm (bằng nhập thông tin) 39 14 Màn hình tìm kiếm (bằng hình ảnh) 39 15 Màn hình tình trạng phân bố động vật 40 16 Màn hình nơi xem động vật thật 40 17 Màn hình thơng tin tài khoản 41 18 Màn hình viết động vật 41 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng 19 Màn hình hiển thị câu hỏi xác nhận 42 20 Màn hình ủng hộ tiền 42 21 Màn hình lựa chọn ngân hàng 43 22 Màn hình xếp hạng chia sẻ app 43 CHƯƠNG 3: GIAO DIỆN WEBSITE HOÀN CHỈNH 44 Bắt đầu – đăng nhập – đăng ký: 44 Tìm kiếm: 45 Trang chủ: 46 Động vật: 47 Yêu thích: 48 Tài khoản 49 Thông tin động vật: 52 Tình trạng 53 Ủng hộ: 54 10 Địa điểm tham quan: 55 11.Tin Tức – Tin tức báo: 55 12.Truyện cổ tích – chi tiết truyện cổ tích: 56 13 Top quan tâm: 56 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng DANH MỤC HÌNH ẢNH Hình Phiếu khảo sát nhu cầu sử dụng ứng dụng động vật học 10 Hình Biểu đồ khảo sát độ tuổi 11 Hình Biểu đồ khảo sát giới tính 11 Hình Biểu đồ khảo sát nhu cầu tìm hiểu động vật 12 Hình : Biểu đồ khảo sát vấn đề tìm hiểu động vật học 12 Hình Biểu đồ khảo sát nhu cầu sử dụng ứng dụng di động động vật học 13 Hình Biểu đồ khảo sát mục đích sử dụng ứng dụng di động động vật học 13 Hình Hình ảnh giao diện đề xuất 14 Hình Biểu đồ khảo sát giao diện ứng dụng di động động vật học 14 Hình 10 Biểu đồ khảo sát màu sắc chủ đề ứng dụng 15 Hình 11 Biểu đồ khảo sát menu yêu thích 15 Hình 12 Hình ảnh logo 16 Hình 13 Biểu đồ khảo sát logo yêu thích 16 Hình 14 Biểu đồ khảo sát tiêu chí chọn sử dụng ứng dụng 17 Hình 15 Biểu đồ khảo sát tính mong muốn 17 Hình 16 Biểu đồ khảo sát điều cần thiện app động vật 18 Hình 17 Biểu đồ khảo sát nhu cầu sử dụng app động vật học 18 Hình 18 Biểu đồ khảo sát sẵn sàng chia sẻ thông tin app động vật học 19 Hình 19 Giao diện chung tính 20 Hình 20 Bố cục block 20 Hình 21 Các icon Animal Facts 20 Hình 22 Hình ảnh giao diện 21 Hình 23 Giao diện chung tính 21 Hình 24 Giao diện chung tính 22 Hình 25 Giao diện thông tin động vật 23 Hình 26 Giao diện bố cục tính 23 Hình 27 Giao diện chức tìm kiếm lọc 24 Hình 28 Dẫn dắt người dùng 24 Hình 29 Giao diện bố cục tính 25 Hình 30 Hình ảnh động vật Zoopedia 25 Hình 31 Tương tác hạn chế 26 Hình 32 Tùy chọn giao diện 27 Hình 33 Giao diện xem nghe âm động vật 27 Hình 34 Giao diện thơng tin động vật 28 Hình 35 Thông tin động vật 28 Hình 36 Giao diện động vật 29 Hình 37 Tương tác hạn chế 29 Hình 38 Giao diện thông tin động vật 30 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Hình 39 Màn hình bắt đầu 44 Hình 40 Khảo sát 44 Hình 41 Đăng ký 45 Hình 42 Đăng nhập 45 Hình 43 Lựa chọn đăng nhập 45 Hình 44 Tìm kiếm chữ 45 Hình 45 Tìm kiếm hình ảnh 46 Hình 46 Kết tìm kiếm hình ảnh 46 Hình 47 Chọn ảnh để tìm kiếm 46 Hình 48 Trang chủ 46 Hình 49 Trang chủ - dành riêng cho bạn 47 Hình 50 Trang chủ - địa điểm tham qua - truyện cổ tích 47 Hình 51 Trang chủ - top quan tâm – tin tức 47 Hình 52 Động vật 48 Hình 53 Động vật (lướt) 48 Hình 54 Yêu thích 49 Hình 55 u thích (lướt) 49 Hình 56 Sửa hồ sơ 50 Hình 57 Tài khoản 50 Hình 58 Xác nhận mật 50 Hình 59 Đặt lại mật 50 Hình 60 Thay đổi mật 50 Hình 61 Đăng xuất 51 Hình 62 Lịch sử ủng hộ 51 Hình 63 Điều khoản dịch vụ 51 Hình 64 Trung tâm hỗ trợ - gửi email 52 Hình 65 Trung tâm hỗ trợ - điện thoại 52 Hình 66 Trung tâm hỗ trợ 52 Hình 67 Thông tin động vật - chia sẻ 53 Hình 68 Thông tin động vật 53 Hình 69 Thơng tin động vật (lướt) 53 Hình 70 Tình trạng 53 Hình 71 Ủng hộ 54 Hình 72 Ngân hàng 54 Hình 73 OTP 54 Hình 74 Xác nhận giao dịch 54 Hình 75 Địa điểm tham quan 55 Hình 76 Tin tức 56 Hình 77 Tin tức - chi tiết 56 Hình 78 Chi tiết truyện cổ tích 57 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Hình 79 Chi tiết truyện cổ tích (lướt) 57 Hình 80 Danh sách truyện cổ tích 57 Hình 81 Top quan tâm 57 Nhóm 05: Linh Đa – Hữu Huy – Hồi Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng 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 hồ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 10 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng 21 Màn hình lựa chọn ngân hàng Hình 22 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 23 Màn hình xếp hạng chia sẻ app 43 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng CHƯƠNG 3: GIAO DIỆN WEBSITE HOÀN CHỈNH Bắt đầu – đăng nhập – đăng ký: Màn hình giới thiệu bố trí logo kèm tên ứng dụng hình ảnh động vật giúp tạo cảm giác thân thiện dễ hiểu cho người dùng Để trước nhấn “bắt đầu“, người dùng hiểu sử dụng ứng dụng Ngồi ra, có thêm hình chọn động vật mà người dùng thích để trước sử dụng, ứng dụng đáp ứng nhu cầu riêng biệt người Sử dụng nhiều hình ảnh động vật để người dùng chọn cách trực quan, sinh động họ thích thú dùng chữ để nêu tên động vật đề xuất cho họ Hình 39 Màn hình bắt đầu Hình 40 Khảo sát Phần đăng ký bố trí số thơng tin quan trọng người dùng có bố trí nhiều dạng đăng nhập đăng ký khác cho người dùng tự lựa chọn : tài khoản app, tài khoản google, tài khoản facebook,… có hướng dẫn “Chưa có tài khoản? Đăng ký” cho người lần đầu sử dụng.Tương tự hình đăng ký có hướng dẫn “Đã có tài khoản? Đăng nhập” người có tài khoản để thuận tiện cho người dùng 44 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Hình 43 Lựa chọn đăng nhập Hình 42 Đăng nhập Hình 41 Đăng ký Tìm kiếm: Có dạng tìm kiếm nhập chữ hình ảnh để phục vụ nhiều nhu cầu tìm kiếm người dùng Ví dụ như: họ bắt gặp mà khơng biết tên họ sử dụng tìm kiếm hình ảnh Ở phần tìm kiếm chữ, người dùng nhập tên động vật để tìm phía lịch sử tìm kiếm để người dùng biết minh tìm kiếm có nút để khơng muốn tìm Ở phần tìm kiếm hình ảnh, người dùng chụp hình tìm chọn hình ảnh có sẵn thiết bị Kết cho danh sách động vật có hình dáng giống hình đầu vào Hình 44 Tìm kiếm chữ 45 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Hình 45 Tìm kiếm hình ảnh Hình 47 Chọn ảnh để tìm kiếm Hình 46 Kết tìm kiếm hình ảnh Trang chủ: Xuyên suốt ứng dụng sử dụng tông màu trắng xanh dương cách chia bố cục tương tự trang chủ Phần đầu hiển thị tên ứng dụng để tạo ấn tượng làm cho người dùng ghi nhớ ứng dụng Tiếp theo, bố trí thêm tìm kiếm đầu để thuận tiện cho người dùng dễ dàng thấy Ảnh đại diện người dùng đặt kế bên tìm kiếm, để họ biết tài khoản đăng nhập Về phần navigation đặt cuối để giúp người dùng dễ thấy dễ thao tác gồm bốn mục: trang chủ, động vật, yêu thích tài khoản Được thiết kế có chữ icon phù hợp với chủ đề ứng dụng Trang chủ ưu tiên xếp vị trí để người dùng dễ nhận biết, động vật yêu thích đặt kế bên để người dùng thuận tiện vào xem , cuối mục tài khoản để người dùng dễ quản lí tài khoản Khi chọn mục navigation, làm bật màu từ màu xám thành màu xanh dương để người dùng định vị đâu Hình 48 Trang chủ 46 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Về phần nội dung: trang chủ này, bố trí nhiều hình ảnh đẹp để tạo hứng thú cho người dùng Và bao gồm nhiều thứ để phục nhiều nhu cầu đa dạng người dùng là: xem khoảnh khắc đẹp động vật, xem top động vật quan tâm nhiều, đọc tin tức , truyện cổ tích đề xuất động vật phù hợp với sở thích người dùng để họ xem thích Các tiêu đề làm đậm bật nội dung để người dùng dễ thấy dễ sử dụng Hình 51 Trang chủ - top quan tâm – tin tức Hình 50 Trang chủ - địa điểm tham qua - truyện cổ tích Hình 49 Trang chủ - dành riêng cho bạn Động vật: Phần đầu hiển thị tên trang “Động Vật” để làm cho người dùng dễ thấy qua biết vào trang Tiếp theo, bố trí thêm tìm kiếm đầu để thuận tiện cho người dùng dễ dàng thấy để tìm kiếm động vật muốn Kế đó, danh mục phân loại loài động vật như: phổ biến, lớp thú, lớp chim, lớp cá,… để người dùng dễ dàng xem biết động vật nhóm Và dùng tiếp navigation để tạo cho người dùng nhiều thao tác định vị người dùng 47 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Hình 52 Động vật Hình 53 Động vật (lướt) Về phần nội dung: Mỗi động vật bố trí theo bố cục hình ảnh to phía tên in đậm để tăng hứng thú cho người dùng để xem tiếp chi tiết động vật để chữ nhiều hình,mỗi hàng bố trí động vật để người dùng khơng bị rối mắt u thích: Phần đầu hiển thị tên trang “Yêu Thích” để làm cho người dùng dễ thấy qua biết vào trang Tiếp theo, bố trí thêm tìm kiếm đầu để thuận tiện cho người dùng dễ dàng thấy để tìm kiếm động vật u thích muốn Và dùng tiếp navigation để tạo cho người dùng nhiều thao tác định vị người dùng 48 Nhóm 05: Linh Đa – Hữu Huy – Hồi Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Hình 54 u thích Hình 55 Yêu thích (lướt) Về phần nội dung: Mỗi động vật bố trí theo bố cục hình ảnh to phía tên in đậm để tăng hứng thú cho người dùng để xem tiếp chi tiết động vật để chữ nhiều hình,mỗi hàng bố trí động vật để người dùng không bị rối mắt.Ngồi ra, bố trí thêm icon trái tim để tăng tính nhận diện cho trang Tài khoản Phần đầu hiển thị tên trang “Tài khoản” để làm cho người dùng dễ thấy qua biết vào trang nào.Phía làm màu xanh bật lên tên tài khoản người dùng hình đại diện để người dùng dễ dàng nhận diện tài khoản Nội dung bố trí mục quản lí tài khoản là: sửa thơng tin tài khoản, xem lịch sử ủng hộ, đăng xuất,… mục khác trung tâm hỗ trợ điều khoản dịch vụ Trang sửa hồ sơ, bố trí nhiều phần: người dùng thay đổi hình đại diện, họ tên, email số điện thoại, để tiêu đề bật đặt thêm icon để tạo cảm giác dễ sử dụng, thường mục sửa đổi sử dụng người dùng có cảm giác sợ lỗi phát sinh, nên việc đặt icon giúp tạo cảm giác thoải mái cho người dùng 49 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Hình 57 Tài khoản Hình 56 Sửa hồ sơ Trang thay đổi mật xác nhận mật thiết kế đơn giản để người dùng dễ sử dụng Ngồi có bố trí thêm mục qn mật để người có qn có thêm lựa chọn cho họ Hình 58 Xác nhận mật Hình 60 Thay đổi mật Hình 59 Đặt lại mật 50 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Trang lịch sử ủng hộ bố trí thơng tin , số tiền hình ảnh động vật ủng hộ để người dùng biết số tiền ủng hộ ngày tháng ủng hộ Trang thông báo lỗi đăng xuất, “thông báo bạn có muốn đăng xuất hay khơng?” hạn chế việc người dùng bị nhấn nhầm đăng xuất việc quan trọng Ngồi ra, cịn đặt thêm nút hủy người dùng bị nhấn nhầm đăng xuất nút X người dùng tắt thông báo Trang điều khoản dịch vụ để đưa quy định phiên sử dụng Hình 62 Lịch sử ủng hộ Hình 61 Đăng xuất Hình 63 Điều khoản dịch vụ 51 Nhóm 05: Linh Đa – Hữu Huy – Hồi Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Trang trung tâm hỗ trợ, thiết kế phần chữ tách bạch, xuống dòng sau câu hỏi, để người dùng dễ đọc trước gọi hỗ trợ xem thử có phải trường hợp hay khơng Ngồi ra, có phần gửi phản hồi gọi điện thoại gửi mail Hình 66 Trung tâm hỗ trợ Hình 65 Trung tâm hỗ trợ - điện thoại Hình 64 Trung tâm hỗ trợ - gửi email Thông tin động vật: Phần đầu hiển thị tên trang “Thông tin động vật” có icon trở để làm cho người dùng dễ thấy qua biết vào trang kế bên icon để nhấn vào để xem thơng tin thích tình trạng (ít quan tâm, bị tuyệt chủng, ) , thông tin thuộc thơng tin khoa học chun ngành, nên có số người bị khó hiểu, giúp tăng tính dễ học dễ hiểu Phần hình ảnh động vật thiết kế to, rõ nét động vật có ảnh để người dùng xem nhiều Ngoài ra, phần thiết kế thêm phần xem video động vật Tên động vật thiết kế chữ to in đậm để người dùng dễ nhận biết Bên phải icon cho người dùng thả tim u thích động vật động vật xếp vào danh sách u thích giúp người dùng dễ xem mà thích Icon loa icon chia sẻ giúp người dùng nghe âm động vật chia sẻ cho người xem 52 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Về phần thông tin, Mỗi động vật gán nhãn tình trạng (ít quan tâm, bị tuyệt chủng, ) phân lồi (lớp thú, lớp chim,…) Thơng tin động vật trình bày thơng tin chữ rõ ràng trình bày dịng, giúp người dùng dễ đọc Phần cuối đề xuất động vật tương tự động vật yêu thích người dùng, giúp người dùng lựa chọn đa dạng Hình 68 Thơng tin động vật Hình 69 Thơng tin động vật (lướt) Hình 67 Thơng tin động vật - chia sẻ Tình trạng Phần đầu hiển thị tên trạng “Tình trạng” có icon trở để làm cho người dùng dễ thấy qua biết vào trang Tình trạng số lượng động vật thiết kế thành hình đồ địa điểm có động vật tơ màu xanh đặt mốc, giúp tăng tính thích thú cho người dùng, giúp người quan sát biểu đồ Phân thông tin thiết kế chữ rõ ràng dễ đọc Ngồi ra, phần “Ủng hộ ngay” phía người dùng dễ dàng ủng hộ cho động vật mà muốn giúp đỡ Phần số người ủng hộ tổng số tiền ủng hộ giúp tăng tin tưởng cho người dùng, để họ tự tin ủng hộ Hình 70 Tình trạng 53 Nhóm 05: Linh Đa – Hữu Huy – Hồi Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Ủng hộ: Trang ủng hộ trực tuyến thiết kế lựa chọn ủng hộ qua ngân hàng ví điện tử giúp người dùng dễ dàng ủng hộ Về ủng hộ qua ngân hàng, thiết theo kiểu danh sách logo ngân hàng giúp người dùng dễ chọn Và chọn ngân hàng, người dùng nhập thông tin cần thiết vào để chuyển tiền Phần xác nhận thông tin giao dịch thiết kế đầy đủ thông tin rõ ràng để người dùng xem lại xác nhận, tránh lỗi trường hợp nhập nhầm, sau xác nhận xe có thơng báo xác nhận mã OTP để bảo mật cho người dùng Sau ủng hộ xong có thông báo xác nhận giao dịch thành công hay thất bại để người dùng biết tiền ủng hộ chưa, giúp giảm lo lắng cho người dùng Ngồi ra, có thêm nút “về trang chủđể người dùng thuận tiện quay lại trang chủ Hình 71 Ủng hộ Phần ủng hộ qua ví điện tử thiết kế tương tự ủng hộ qua ngân hàng Hình 72 Ngân hàng Hình 73 OTP Hình 74 Xác nhận giao dịch 54 Nhóm 05: Linh Đa – Hữu Huy – Hồi Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng 10 Địa điểm tham quan: Trang địa điểm tham quan thiết kế phần đầu hiển thị tên trang “Địa điểm tham quan” có icon trở để làm cho người dùng dễ thấy qua biết vào trang Phần danh sách địa điểm tham quan thiết kế gồm phần hình ảnh phần thông tin đặt kế bên theo hàng ngang giúp người dùng dễ dàng đọc xem Hình ảnh thiết kế rõ nét, phần tên nơi tham quan thiết kế bật to in đậm giúp người dùng dễ thấy, phía thơng tin địa nơi giúp người dùng biết mà đến tham quan Hình 75 Địa điểm tham quan 11.Tin Tức – Tin tức báo: Trang địa điểm tham quan thiết kế phần đầu hiển thị tên trang “Tin Tức” có icon trở để làm cho người dùng dễ thấy qua biết vào trang Phần danh sách tin thiết kế gồm phần hình ảnh phần thơng tin đặt kế bên theo hàng ngang giúp người dùng dễ dàng đọc xem Hình ảnh thiết kế rõ nét, phần tên title tin thiết kế bật to in đậm giúp người dùng dễ thấy, phía thơng tin tóm tắt tin để người dùng biết mà chọn vào để xem phía góc phải tên nguồn tin (Vnexpres, Zing.vn,…) 55 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Phần title tin thiết kế bật Phần chữ tin thiết kế rõ ràng dễ đọc tách đoạn cụ thể giúp người dùng dễ dàng đọc có sử dụng ảnh minh họa để đọc tin không bị nhàm chán.Ở cuối tên tác tên nguồn tin Hình 76 Tin tức Hình 77 Tin tức - chi tiết 12.Truyện cổ tích – chi tiết truyện cổ tích: Trang địa điểm tham quan thiết kế phần đầu hiển thị tên trang “Truyện cổ tích” có icon trở để làm cho người dùng dễ thấy qua biết vào trang Phần danh sách truyện cổ tích thiết kế gồm phần hình ảnh phần thơng tin đặt kế bên theo hàng ngang giúp người dùng dễ dàng đọc xem Hình ảnh sử dụng hình đồ họa, hình hoạt hình dễ thương để phù hợp với đối tượng trẻ em, qua dễ dàng giáo dục trẻ hơn.Phần tên title truyện thiết kế bật to in đậm giúp người dùng dễ thấy, phía thơng tin tóm truyện để người dùng biết mà chọn vào để xem Phần title truyện thiết kế bật.Phần chữ truyện thiết kế rõ ràng dễ đọc tách đoạn cụ thể giúp người dùng dễ dàng đọc có sử dụng ảnh minh họa để đọc không bị nhàm chán.Ở cuối tên tác tên nguồn tin 56 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Hình 80 Danh sách truyện cổ tích Hình 78 Chi tiết truyện cổ tích Hình 79 Chi tiết truyện cổ tích (lướt) 13 Top quan tâm: Trang địa điểm tham quan thiết kế phần đầu hiển thị tên trang “Top quan tâm” có icon trở để làm cho người dùng dễ thấy qua biết vào trang Phần danh sách động vật quan tâm nhiều thiết kế gồm phần hình ảnh phần thông tin đặt kế bên theo hàng ngang giúp người dùng dễ dàng đọc xem Danh sách đánh số thứ tự động vật gắn icon bật để tạo thích thú cho người dùng Phần tên thiết kế bật phía icon thông tin lượt xem, lượt thả tim lượt chia sẻ để người dùng xem so sánh Hình 81 Top quan tâm 57 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh