Đồ Án Đề tài thiết kế giao diện cho Ứng dụng chủ Đề thể thao Ứng dụng Đặt sân bóng

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA HỆ THÓNG THÔNG TIN ĐỎ ÁN MÔN THIẾT KẾ GIAO DIỆN IE106.M2I Đề tài: Thiết kế giao diện cho ứng dụng chủ đề thể thao Ứng dụng đặt sân bóng GVHD

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

KHOA HỆ THÓNG THÔNG TIN

ĐỎ ÁN MÔN THIẾT KẾ GIAO DIỆN (IE106.M2I)

Đề tài: Thiết kế giao diện cho ứng dụng chủ đề thể thao

Ứng dụng đặt sân bóng

GVHD: ThS Ta Thu Thuy Nhóm sinh viên thực hiện:

IE106.M21 - Thiết kế giao điện người đùng

NHẬN XÉT CUA GIAO VIEN HUONG DAN

., nedy thang ndm 2022

Người nhận xét (Kỹ tên và ghi rõ họ tên)

2 | Page

MỤC LỤC

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

1.1.2 Phân tích yêu cầu và đề xuất giải pháp

1.2 Tìm hiểu, nghiên cứu ứng dụng liên quan

2.1 Các trang đăng nhập, đăng ký, nhập otp, quên mật khẩu

2.2 Trang chủ

2.3 Tìm kiếm và lọc

2.2.1 Tìm kiếm và lọc theo sân bóng

2.2.2 Tìm kiếm và lọc theo đối thủ

2.4 Chỉ tiết sân bóng và thông tin đặt sân

2.5 Chỉ tiết đội bóng và hẹn đá

2.6 Trang tin tức

2.6.1 Danh sách tin tức

2.6.2 Danh sách tin tức lưu trữ và yêu thích

Chương 3: HOÀN THIỆN GIAO DIỆN

3.1 Giao diện ứng dụng đặt lịch sân bóng

3.1.1 Giao diện đăng nhập, đăng kí

3.1.2 Giao diện trang chủ

3.1.3 Giao điện m kiếm sân bóng

3.1.4 Giao diện chia sẽ sân bóng

3.1.5 Các giao diện đặt sân bóng

3.1.6 Giao diện lịch sử thi đấu

3.1.7 Giao diện bình luận, đánh giá sân bóng

3.1.8 Các giao diện đặt sân thi đấu với đối thủ

3.1.9 Các giao điện tin tức

3.1.10 Các giao diện tài khoản

3.1.11 Các giao diện chỉ tiết đội bạn

IE106.M21 - Thiết kế giao điện người đùng

3.2.1 Màu sắc

3.2.2 Kiểu chữ

3.2.3 Bố cục

3.2.4 Logo ung dung

Chương 4: TƯƠNG TÁC GIAO DIEN

4.1 Trang đăng nhập, đăng ký

4.2 Các trang của trang chủ

4.3 Các trang của trang san bong

4.4 Các trang của trang đối thủ

4.5 Các trang của trang tin tức

4.6 Các trang của trang tài khoản

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

Questions Responses ® Settings Ivreoirreu

Trắng - Đen - Cam|_—0 (0%)

Xanh lá - Xanh dương - Trang - 40 (66.7%)

Đen Trắng - Đen 10 (16.7%)

IE106.M21 - Thiết kế giao điện người đùng

Questions Responses @ _ Settings

Bạn thường đặt sân thông qua hình thức nào | copy

60 responses

50 (83.3%)

Đặt thông qua điện thoại

Đặt thông qua mạng xã hội

Bạn có thích banner, voucher, quảng cáo? (0 copy

Questions Responses ® Settings

Dịch vụ thêm ở son NN ¬o (16.7%)

IE106.M21 - Thiết kế giao điện người đùng

1.1.2 Phân tích yêu cầu và đề xuất giải pháp

Sau khi tiến hành khảo sát nhằm phục vụ quá trình xây dựng giao diện ứng dụng, nhóm đưa ra những giải pháp thiết kế giao điện như sau:

Về màu sắc: Đa phần người dùng có xu hướng thích những trang web có tông màu lạnh tạo cảm giác mát mẻ hơn Vậy nên, xây dựng màu sắc có tính đồng nhất và thiên hướng theo các tông màu lạnh sẽ là lựa chọn phù hợp với đại

đa sô người dùng

Về việc bồ trí thì những thanh công cụ và font chữ của trang web cũng được người dùng đặc biệt quan tâm Qua khảo sát trên thì nhóm đã rút ra được một vài kết luận đề giúp một giao điện trở nên đẹp và thu hút người dùng hơn:

- _ Nhóm sẽ cân nhắc chọn màu sách với tông màu lạnh làm màu chủ đạo

- _ Giao diện thiết đơn giản, gần gũi với người dùng

- _ Font chữ phù hợp với nhiều độ tuôi khác nhau

- Vi tri các thanh công cụ nhóm sẽ tiếp thu từ những khảo sát trên để có cách bồ tri hop ly dé su dung

- Phuong thitc thanh toán là sẽ tập trung vào thanh toán bằng momo hoặc phương thức tiền mặt

1.2 Tìm hiểu, nghiên cứu ứng dụng liên quan

1.2.1 Nhận xét ung dung Wesport

a Nhan xét giao dién Wesport

8 |

sai Viettel % 06:43 ® 72% 8) „si Viettel S 08:43 ones

< Quay lại Chào mừng trở lại Đăng ký với E-mail

©

Quên mật khẩu?

Một thí phải bee gm rbot ký hệ Đăng nhập

Hoặc tiếp tục với ——————— Bằng cách đăng ký, bạn đã đồng ỷ với chúng tồi

các Điều khoản dịch vụ và Chính sách về quyền

HOG =;

Chưa có tài khoản? Đăng ký

Hinh 1.4 Giao diện đăng nhập, đăng ký

- _ Giao diện Đăng nhập và Đăng ký: Thiết kế khá dai tra, không bắt mắt, nhìn các khối khá thô cứng, không thấy rõ ràng hiệu ứng chuyên đổi giữa đăng nhập và đăng ký

- _ Về trải nehiệm lúc đăng nhập, đăng ký rất hài lòng, các khối chức năng sắp xếp rất rõ rang, dé thao tác, đăng ký và đăng nhập rất nhanh, mượt

mà Đặt biệt là có thê đăng nhập bằng liên kết Google, Facebook rất nhanh chóng tiện lợi

„ii Viettel ® 08:36 er

ọ srerr

Minh Nhat Linh Tay B

43 Binh Quoi, Bi 16 Tran Vain Nila, Ph SAN GAN NHAT

IE106.M21 - Thiết kế giao điện người đùng

- _ Giao diện chính:

+ Sắp xếp bồ cục rất rõ ràng, đễ nhận biết các chức năng, đễ dàng thao tác Bố cục giao diện hiện đại, rất dễ bắt gặp bố cục giao diện này trên các ứng dụng khác

+ Tuy sắp xếp khá rõ ràng nhưng dễ nhận thấy giao diện khá thô cứng, không được bắt mắt và không quá cầu kỳ nên điều đó giúp người dùng nhanh chóng nhận biết và sử dung dé dang

+ Giao diện màn hình chính có thiết kế đều sử dụng hiệu ứng slide Hình ảnh banner khả đẹp, hình ảnh các cart chân thực Nội dung hiển thị các cart chưa đầy đủ, là một người trải nghiệm nhận xét thì nên để thêm giá sân trung bình ở các cart và địa chỉ hiển thị ưu tiên tên quận đến phường Điều đó giúp người dùng nhanh chóng nhận diện và lựa chọn

att! Viottol & 08:28 @ 77% Mm) /Vietel & 08:39 ane

< Chi tiết sân < Chỉ tiết sân

Đặt ngay Đặt lại bộ lọc Kiểm tra khà dụng

Hình 1.6 Giao diện chỉ tiết đặt sân

- Chi tiét đặt sân:

+ Thiết kế về chỉ tiết sân: Thông tin hiển thị khá đầy đủ, có hiển thi hinh anh của chân theo dang slide kha đẹp và là hình ảnh thật của sân bóng nên giúp người dùng hình dung được sân bóng như thế nao

+ Về chức năng “Đặt Ngay”: Ở phần giao diện này các chức năng tương đối thê hiện rõ ràng nhưng nhìn tông thể rất rỗi mắt gây

10 | Page

khó chịu cho người dùng Việc điền thông tin khá nhanh và thông

minh, khi mọi thông tin đều hiển thị rõ ràng để người dùng chọn

lựa

ot Viettel F 09:20 @729%I88) ot! Viewtel F 09:20 @ 729

3 GsPerr = < Quaylại Confirm Booking

San Sự kiện Người chơi Đội Linh Tay

@ 15/03/2022 12:30 - 19:30 CHI TIET DAT SAN

MON THE Football THA

5v5 March 15, 2022

ao 12:30 - 13:30 THANH TOAN TIEN COC TONG PHI Đặt ngay 1 Ske kkk 190,000 vnd 0vnd 90,000 vnd

MÃ GIẢM GIÁ

Thẻ ATM (Ngoại trừ thẻ Visa/Mastercard}

PHƯƠNG THỨC THANH TOÁN

@ Visa/Mastercard (Phát hành tại Việt Nam]

- _ Các thông tin hiển thị trong “Xác nhận đặt chỗ” rất đầy đủ, rõ ràng về môn thê thao, số người, ngày giờ và giá tiền Người dùng đễ dàng kiếm tra và xác nhận đặt sân bóng

11 | Page

IE106.M21 - Thiết kế giao điện người đùng

sài Viettel & 08:37 @775 088

‹ Hồ sơ Sita Duy Vo ove

HE THE Hic ce) Football THANH TOAN Lịch sử giao dịch

HẦN HÓ, Chia sở

Ngôn ngữ › Đối mật khẩu ›

Ø] Đăng xuất

Hình 1.8 Giao diện xác nhận đặt chỗ

- _ Về giao diện “Hồ sơ” người dùng: Nhìn tổng thê thi giao diện này thiết

kế khá thô sơ, không bắt mắt Nội dung khá đầy đủ nhưng bố cục không được đẹp, màu sắc và các khối khá cứng nhắt Tuy là không đẹp nhưng rất dễ sử dụng

b._ Trải nghiệm khi dùng ứng dụng Wesport

T.N.N.Q, 26/04/2021 Jack 3772, 23/11/2020 Nguyễn Vũ Nhật Hạo, 08/09/2020

App is so amazing Find motivating sport partners ure 9806

This app is so great | could book sport facility Motivation comes with good sports partners YeSport can become the best sport

near my home without coming that place So and this app enables me to do so platform for us

+ much more convenient for reservation and

to play different sports

cooll

7/2020 Nhận xét Rất tốt App rất tuyệt vời

App xài rất tốt ,rất hiệu quả App tiện và dễ sử dụng, tao nên những trải Giao diện đẹp và rất dễ sử dụng Nhờ app mà

Hinh I.9 Đánh giá ứng dụng

- _ Người dùng đánh giá khá cao về ứng dụng Tất cả đều cho 5 sao và có nhận xét rất tốt

12 | Page

- _ Cá nhân khi trải nghiệm Wesport: Ứng dụng mượt mà, rất hay và dễ sử dụng Hiểu được nhu cầu người dùng cần gì và mong muốn những gì khi chơi thể thao Giao diện không được bắt mắt nhưng nó rất rõ ràng, rất dễ nhận biết các chức năng

Dang Nhap Bang S6 Dién Thoai

[ Truy Cập Không Cần Tài Khoản

oo oo

Hinh 1.10 Giao dién dang nhap

- Giao dién Dang nhap: giao dién don gian, khong can phai dang ky tai

khoan

- Vétrai nghiém lic dang nh4p, giao dién don gian, không cần phải đăng

ky tai khoan

13 | Page

IE106.M21 - Thiết kế giao điện người đùng

13:02 + © E8 9 Ø - Aline - Đặt Lịch Sân Bóng Online

® Xin chào, 0332792848

Sơ đồ sân "Thông tin sân Bản đồ

Danh sách ca đặt theo ngày eC

Ngay: 15-03-2022 Danh sách sân

13:01 €t ©ì 9 @ Lịch Của Tôi

IE106.M21 - Thiết kế giao điện người đùng

© Thanh toén qua Zalo Pay

Q S61, P Trịnh Văn Bô, Q.Nam Từ Liêm, Tp Hà Nội

= 3

oF «a

LÊ”

Hình 1.13 Giao diện thông tin hỗ trợ

- _ Chí tiết đặt sân: không có chức năng đặt sân, phải gọi cho người quản lý sân và đặt trực tiếp mọi thứ như là tượng trưng

- _ Về giao diện “Hồ sơ” người dùng: Nhìn tổng thé thì giao diện này thiết

kế khá thô sơ, không bắt mắt

b Trải nghiệm khi dùng ứng dụng Đặt lịch bóng đá

- _ hầu như không có đánh giá nào về dụng này ứng

- _ Cá nhân khi trải nghiệm Đặt lịch bóng đá: ứng dụng hướng đến khách hàng quen thuộc của sân bóng đó, chỉ đề chi ra rằng sân bóng đó có đang rảnh hay không và lịch hoạt động của nó nó là tạm chấp nhận được cho đối tượng khách hàng của họ

1.2.3 Nhận xét ứng dung Sporta

a Nhận xét giao diện

- Man hinh đăng nhập:

16 | Page

Hinh 1.14 Giao diện đăng nhập

+ Các khối mang màu chủ đạo riêng biệt, apple mang mau trắng đen, facebook mang màu xanh, tải khoản sporta mang màu chủ

17 | Page

IE106.M21 - Thiết kế giao điện người đùng

đạo của ứng dụng là màu cam vàng Người dùng dễ dàng phân

thị lỗi nhập liệu)

Ở trang quên mật khâu nút quay lại ở dưới nút lấy mật khâu mới

bị thừa, vi đã có nút quay lại ở phía trên

Nút bỏ qua ở phần đăng nhập nên để thành nút outline sẽ tăng kích thước thao tác hơn là để chữ, vì kích thước trên điện thoại

khá nhỏ

Màn hình chính:

18 |

IE106.M21 - Thiết kế giao điện người đùng

nhìn khiến tầm nhìn bản đồ nhỏ đi Nên để một trang bản đỗ riêng

€@ Tân phước khánh, Huyện Bắc Tân Uyên, Tinh Bint

Sân bóng đá mini B&B Phong Thử

@ Phong Thử - Điện Thọ, Thị xã Điện Bàn, Tỉnh

Quảng Nam

© 06:00 - 24:00 Van Minh

@® 123 Nguyen Van Luong, Quận Gò Vấp, Tp Hồ Chí Minh

© 06:00 - 24:00 Sân bóng đá ngoại thành

@ Phường 8 tp Vĩnh Long , Tp Vĩnh Long, Tỉnh Vĩnh Long

Hình 1.16 Giao diện tìm kiếm

+ Nên có thêm fñilter theo tỉnhthành phố, quận/huyện(thị xã, xã/phường/thị tran dé dé tim

+ Okét qua tim kiếm thì sân banh nên hiển thị thêm số điện thoại để

dễ dàng liên hệ

+ Hình ảnh sân bóng nên đồng nhất về kích thước và hình dạng, không được ảnh thì bo góc, ảnh thì không, ảnh thì to ảnh thì nhỏ

Và vị trí ảnh nên nằm giữa so với thẻ

+ Tên của sân banh nên in đậm, và các icon nên đề thành màu chủ đạo của ứng dụng để phân biệt Các icon nằm quá sát với nội dung phía sau

+ Nội dung quá dài sẽ bi mat chữ, nên để chữ xuống hàng hợp lý

- Man hinh chia sé thông tin sân bóng:

21 |

IE106.M21 - Thiết kế giao điện người đùng

Hình 1.17 Giao diện thông tin sân

+ Cac icon khá sát với khung nhập liệu

22 | Page

+ Các placeholder của các trường nên để đồng nhất kiều dáng, màu sắc, các trường chọn nên dé icon là dấu mũi tên số xuống thay vi icon bút viết (sẽ gây hiểu nhằm là chỉnh sửa)

+ Vién ở trên khá sát với tiêu đề

+ Nút quay lại nên có thêm tên trang trước để dé nhận biết và đồng nhất với các trang còn lại

+ Thông báo lỗi nhập liệu nên đồng nhất là sẽ làm popup từ trên xuống như các form nhập liệu khác, thay vì làm một dialog alert

- Man hinh cáp đội

23 |

IE106.M21 - Thiết kế giao điện người đùng

%7 Bộ lọc (0) Bỏ lọc

VỊ TRÍ SÂN

20km ) ( 50km

QUẬN

( Chọn quận/huyện ) NGÀY

Chọn ngày

Hinh 1.18 Giao dién lọc

24 | Page

ml Thứ Tư, 30/03 17:45 2 ngày nữa

Sân bóng Minh Khai - Ngoa Long, Quận Bắc Từ Liêm

Hinh I.19 Giao diện cấp kèo

+ Nên có thanh tìm kiếm (theo sân, theo đội bóng, .)

+ Có phần filter, tuy nhiên vị trí sân (sân nhà, của tôi) chưa rõ ràng, gây khó hiểu cho người dùng Có nút bỏ chon tat cả

25 | Page

IE106.M21 - Thiết kế giao điện người đùng

+ Cac icon chi s6 cua đội bóng chưa trực quan

+ C6 hién thi thoi gian bao nhiêu ngày nữa sẽ diễn ra trận khá trực quan

+ Màn hình chỉ tiết: phân biệt text bình thường với text điều hướng bằng màu sắc, các tab phân biệt với nhau bằng màu sắc (active tab mau cam), vién trai dinh sat tao cam giác gò bó, số điện thoại liên

hệ nên dé day du thay vi ba cham, hai nut bam ở phần liên hệ không bam duoc

+ Man hình tham gia: nên làm thêm trường chọn đội có thể tham gia (vì có thê có nhiều đội), và thêm trường lời nhắn

- Màn hình thông tin đội bóng:

27 |

IE106.M21 - Thiết kế giao điện người đùng

Trên tống số 35 trận

12W 14L 6D SVTN VIS Biv VS — ?

14:20 “ị 6,

Nhận xét 4.53/5

dựa trên 17 lượt đánh gía

0981165299 RozaCafe FC * w+*+w*

lịch sự, lối đá sạch đẹp tejirkid@gmail.com

IE106.M21 - Thiết kế giao điện người đùng

Hình 1.21 Chi tiết đội

+ Kha hién dai va đơn giản, nhưng hiển thị đầy đủ thông tin cần thiết

30 | Page

+ Phần xem thêm của mô tả nhưng chỉ ra danh sách thành viên không có các thông tin mô tả khác

Cạnh chung cư 789 Đường Mỹ Đình 2, Quận Nam Từ Liêm

IE106.M21 - Thiết kế giao điện người đùng

+ Phần lịch sử đầu nhưng lại có những trận chưa diễn ra, nên phân tách ra thành 2 phần đó là lịch sử đấu và danh sách trận đặt nhưng chưa đấu hoặc chưa có đối thủ

+ Phần thống kê lịch sử đấu (thắng, thua, hòa) khá hay

Hinh L.23 Giao diện tin tức

+ Tên là tin tức nhưng đa số là các bài đăng của các người dùng khác, như một mạng xã hội thu nhỏ nên có thêm các tin tức thé thao khác để mang đúng nghĩa là tin tức

+ Nút đăng bài không trực quan, trông giống như một dòng giới thiệu hơn là một nút dùng để đăng bài, nên tạo nút đăng bài trực quan hơn (mang màu chủ đạo, và dinh vao man hình)

+ Một ứng dụng đặt sân, tìm đối thủ mà có tính năng đăng bài khá hay

- Man hinh thông báo:

+ Có nút đọc tat ca khá tiện, tuy nhiên không thể xóa từng thông báo mà chỉ có thê xóa tất cả

+ Không thê ấn vào xem chỉ tiết các thông báo

- Man hinh tài khoản:

33 |

IE106.M21 - Thiết kế giao điện người đùng

Thông báo Tài khoán

Hinh L.24 Giao diện tài khoản

34 | Page

35 | Page

IE106.M21 - Thiết kế giao điện người đùng

© Chua cé dia chi

Ếï Chưa có ngày sinh

IE106.M21 - Thiết kế giao điện người đùng

Hinh 1.25 Cac giao diện thông tin cá nhân

+ Bố cục khá thoáng tuy sắp xếp nhiều thông tin, nên hiển thị tên thay vì số điện thoại

+ Nút tạo mới clb không nỗi bật

38 | Page

+ Nut tạo lựa chọn điểm danh khá khó hiểu (tuy gần giống với chức năng tạo cáp đội)

20:30 - Thứ Hai, 28-03-22 Chú ý

Cần có chú ý khác gì với anh em trong đội ko?

Hình 1.26 Giao diện điểm danh

39 | Page

IE106.M21 - Thiết kế giao điện người đùng

+_ Thông tin lựa chọn điểm danh có phần binh chọn khá thu vi, tuy nhiên nên để các được chọn thành màu chủ đạo (màu cam) thay vì màu đen, và những thông tin này không thể chỉnh sửa chỉ có thé xóa đi tạo lại cái mới

b Trải nghiệm sử dụng

- _ Đánh giá khá tốt đối với những người dùng để cáp kèo, tìm đối thủ

- _ Tuy nhiên người dùng đặt sân thì chưa hài lòng lắm vì còn có khá ít sân

có thê đặt trực tiếp, đa số là đặt qua điện thoại trực tiếp

- _ Trải nghiệm cá nhân: ứng dụng khá hay và thú vị trong việc tìm kiếm đối thủ dé đá kèo hay giao lưu, tuy nhiên còn hạn chế trong việc đặt sân Còn khá nhiều lỗi vặt và lỗi crash ứng dụng tuy nhiên vẫn có thể sử dụng

ổn và có một số tính nang hay đó là lập đội,

40 |