Thiết Kế Giao Diện Ứng Dụng Đặt Sân Bóng Thể Thao

Đồ án nghiên cứu đề tài thiết kế giao diện cho ứng dụng chủ đề thể thao ứng dụng đặt sân bóng, áp dụng công nghệ tiên tiến, tối ưu giải pháp kỹ thuật cho bài toán .

• Đề tài: Thiết Kế Giao Diện Ứng Dụng Đặt Sân Bóng Thể Thao

Mục lục chi tiết

• 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.2. Tìm hiểu, nghiên cứu ứng dụng liên quan
• 1.2.1. Nhận xét ứng dụng Wesport
• 1.2.2. Nhận xét ứng dụng Đặt lịch bóng đá
• 1.2.3. Nhận xét ứng dụng Sporta
• 2. Chương 2: Phác thảo giao diện. Ghi chú, chú thích, giải thích các ý tưởng phác thảo các giao diện. Các trang đăng nhập, đăng ký, nhập otp, quên mật khẩu
• 2.1. Tìm kiếm và lọc theo sân bóng
• 2.2. Tìm kiếm và lọc theo đối thủ
• 2.3. Tìm kiếm và lọc
• 2.4. Chi tiết sân bóng và thông tin đặt sân
• 2.5. Chi 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
• 3. 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.2. Các thuộc tính sử dụng trong ứng dụng
• 3.3. Giao diện đăng nhập, đăng kí
• 3.4. Giao diện m kiếm sân bóng
• 3.5. Giao diện chia sẻ sân bóng
• 3.6. Các giao diện đặt sân bóng
• 3.7. Giao diện lịch sử thi đấu
• 3.8. Giao diện bình luận, đánh giá sân bóng
• 3.9. Các giao diện đặt sân thi đấu với đối thủ
• 3.10. Các giao diện tin tức
• 3.11. Các giao diện tài khoản
• 3.12. Các giao diện chi tiết đội bạn
• 3.13. Logo ứng dụng
• 4. Chương 4: TƯƠNG TÁC GIAO DIỆN
• 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 sân bóng
• 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
• 5. Chương 5: KẾT LUẬN
• 5.1. Nhược điểm
• 5.2. Phương hướng phát triển

Tóm tắt

I. Hướng Dẫn Thiết Kế Giao Diện App Đặt Sân Bóng Tối Ưu UX

Trong bối cảnh công nghệ số phát triển, nhu cầu kết nối giữa người chơi thể thao và các đơn vị cung cấp sân bãi ngày càng tăng. Một ứng dụng tìm sân bóng với giao diện trực quan và trải nghiệm người dùng mượt mà là chìa khóa để giải quyết vấn đề này. Việc thiết kế giao diện ứng dụng đặt sân bóng thể thao không chỉ là về mặt thẩm mỹ, mà còn là quá trình nghiên cứu và xây dựng một hệ thống khoa học, đáp ứng đúng nhu cầu của hai nhóm đối tượng chính: người chơi và chủ sân. Một thiết kế thành công phải đảm bảo người dùng có thể tìm kiếm, lọc, xem thông tin chi tiết và hoàn tất đặt sân một cách nhanh chóng và dễ dàng. Đồng thời, nó cũng phải cung cấp cho chủ sân một công cụ phần mềm quản lý sân thể thao hiệu quả để tối ưu hóa lịch trình và doanh thu. Bài viết này, dựa trên phân tích sâu từ tài liệu nghiên cứu và các case study thực tiễn, sẽ cung cấp một quy trình toàn diện để xây dựng một giao diện người dùng (UI) và trải nghiệm người dùng (UX) vượt trội cho ứng dụng đặt sân bóng, từ giai đoạn khảo sát ban đầu đến hoàn thiện các tính năng cốt lõi. Mục tiêu là tạo ra một sản phẩm không chỉ đẹp về mặt hình thức mà còn mạnh mẽ về chức năng, giải quyết triệt để các rào cản trong quy trình đặt sân truyền thống, mang lại sự tiện lợi tối đa cho cộng đồng yêu thể thao.

1.1. Tầm quan trọng của UI UX cho ứng dụng thể thao

Trong lĩnh vực thiết kế app mobile thể thao, UI/UX cho ứng dụng thể thao đóng vai trò quyết định đến sự thành công của sản phẩm. Giao diện người dùng (UI) là tập hợp các yếu tố thị giác như màu sắc, bố cục, icon, và font chữ mà người dùng tương tác. Một UI tốt cần phải sạch sẽ, hấp dẫn và nhất quán. Ngược lại, trải nghiệm người dùng (UX) là cảm nhận tổng thể của người dùng khi sử dụng ứng dụng – nó có dễ dùng, hữu ích và mang lại giá trị hay không. Một ứng dụng có UX kém, dù UI đẹp, cũng sẽ nhanh chóng bị người dùng từ bỏ. Ví dụ, nếu quá trình tìm sân và đặt lịch quá phức tạp, người dùng sẽ quay lại với phương thức gọi điện thoại truyền thống. Do đó, việc đầu tư vào nghiên cứu UX để hiểu rõ hành trình, nhu cầu và 'nỗi đau' của người dùng là bước đi nền tảng, đảm bảo ứng dụng giải quyết đúng vấn đề và tạo ra một luồng sử dụng liền mạch, hiệu quả.

1.2. Xác định đối tượng Thiết kế cho chủ sân và người chơi

Một ứng dụng đặt sân bóng phục vụ hai nhóm người dùng chính với những nhu cầu hoàn toàn khác biệt. Nhóm thứ nhất là người chơi, mục tiêu của họ là tìm kiếm sân nhanh chóng, xem được các thông tin quan trọng (giá, giờ trống, địa chỉ, tiện ích), đánh giá và xếp hạng sân, và thực hiện đặt sân dễ dàng. Giao diện thiết kế cho người chơi cần ưu tiên sự đơn giản, tốc độ và tính trực quan. Nhóm thứ hai là chủ sân, họ cần một công cụ để quản lý. Nhu cầu của họ bao gồm việc cập nhật lịch sân trống, xác nhận lịch đặt, quản lý doanh thu và tương tác với khách hàng. Giao diện thiết kế cho chủ sân cần tập trung vào các tính năng quản trị, báo cáo và quản lý lịch sân bóng một cách hiệu quả. Việc phân tách và thấu hiểu hai luồng người dùng này là yêu cầu bắt buộc để xây dựng các tính năng phù hợp, tránh tạo ra một giao diện cồng kềnh, gây khó khăn cho cả hai bên.

II. Thách Thức Khi Thiết Kế Giao Diện App Đặt Sân Bóng Online

Việc xây dựng một hệ thống đặt chỗ online hiệu quả đối mặt với nhiều thách thức xuất phát từ thói quen người dùng và sự thiếu hụt của các giải pháp hiện có. Phân tích từ các khảo sát thực tế cho thấy một rào cản lớn là sự phụ thuộc vào các phương thức truyền thống. Đồ án nghiên cứu IE106.M21 chỉ ra rằng có đến 83.3% người dùng vẫn đặt sân qua điện thoại, một quy trình thiếu minh bạch về giá cả và tình trạng sân trống. Thách thức lớn nhất khi thiết kế giao diện ứng dụng là phải tạo ra một trải nghiệm tiện lợi và đáng tin cậy hơn hẳn phương thức cũ để thuyết phục người dùng thay đổi hành vi. Thêm vào đó, các ứng dụng hiện có trên thị trường thường tồn tại nhiều nhược điểm. Ví dụ, ứng dụng WeSport được đánh giá có giao diện 'khá thô cứng', trong khi ứng dụng Sporta tuy có tính năng tạo kèo bóng đá thú vị nhưng lại hạn chế trong việc đặt sân trực tiếp. Điều này tạo ra một khoảng trống thị trường cho một ứng dụng có thể cân bằng giữa giao diện hiện đại, tính năng mạnh mẽ và trải nghiệm người dùng mượt mà, giải quyết đồng thời nhu cầu đặt sân và quản lý.

2.1. Phân tích yêu cầu từ khảo sát người dùng thực tế

Để thiết kế một sản phẩm hướng đến người dùng, việc khảo sát yêu cầu là bước không thể bỏ qua. Theo tài liệu gốc, một cuộc khảo sát với 60 người tham gia đã cung cấp những thông tin chi tiết quan trọng. 100% người được hỏi đều muốn xem thông tin chi tiết về sân như địa chỉ, hình ảnh, đánh giá và tình trạng sân trống. Về phương thức thanh toán, Momo (83.3%) và tiền mặt (83.7%) là hai lựa chọn phổ biến nhất, cho thấy sự cần thiết của việc tích hợp thanh toán trực tuyến bên cạnh các lựa chọn truyền thống. Ngoài ra, nhu cầu về bản đồ sân bóng để chỉ đường và nút chia sẻ thông tin đặt sân cho đồng đội cũng được 100% người dùng xác nhận là cần thiết. Những dữ liệu này là cơ sở vững chắc để xác định các tính năng ưu tiên và xây dựng một luồng sử dụng đáp ứng chính xác kỳ vọng của người dùng.

2.2. Đánh giá và rút kinh nghiệm từ các ứng dụng đối thủ

Phân tích đối thủ cạnh tranh là một phương pháp hiệu quả để học hỏi những điểm mạnh và tránh lặp lại các sai lầm. Tài liệu nghiên cứu đã xem xét ba ứng dụng: WeSport, Đặt lịch bóng đá và Sporta. WeSport được ghi nhận có bố cục rõ ràng nhưng thiết kế không bắt mắt, các khối chức năng 'khá thô cứng'. Ngược lại, ứng dụng 'Đặt lịch bóng đá' lại quá đơn giản, chỉ phục vụ cho một sân bóng độc lập và không có chức năng đặt sân trực tuyến. Sporta nổi bật với tính năng cộng đồng như tìm đối thủ, nhưng trải nghiệm đặt sân chưa tốt và ứng dụng còn nhiều lỗi. Từ những phân tích này, có thể rút ra bài học: một ứng dụng đặt sân thành công cần kết hợp được bố cục chức năng rõ ràng của WeSport, tính năng cộng đồng của Sporta, nhưng phải cải tiến triệt để về mặt giao diện người dùng (UI) và sự ổn định, đồng thời phải cung cấp một quy trình đặt sân trực tiếp liền mạch.

III. Quy Trình Thiết Kế Giao Diện Ứng Dụng Đặt Sân Tối Ưu

Một quy trình thiết kế ứng dụng bài bản là nền tảng để tạo ra một sản phẩm chất lượng cao. Quy trình này không chỉ là vẽ các màn hình, mà là một chuỗi các hoạt động có hệ thống từ nghiên cứu, phác thảo đến hoàn thiện và kiểm thử. Dựa trên các phương pháp luận trong tài liệu nghiên cứu, quy trình này bắt đầu bằng việc xác định rõ kiến trúc thông tin và luồng người dùng (user flow). Bước này đảm bảo mọi tính năng được sắp xếp một cách logic, giúp người dùng dễ dàng điều hướng và hoàn thành mục tiêu. Tiếp theo là giai đoạn xây dựng wireframe app đặt sân, đây là các bản vẽ khung sườn, tập trung vào bố cục và chức năng mà chưa quan tâm đến màu sắc hay đồ họa. Sau khi wireframe được duyệt, nhóm thiết kế sẽ phát triển prototype ứng dụng đặt sân – một phiên bản mô phỏng có tính tương tác cao, cho phép các bên liên quan trải nghiệm thử luồng hoạt động của ứng dụng trước khi viết code. Giai đoạn này giúp phát hiện sớm các vấn đề về UX và tinh chỉnh kịp thời. Cuối cùng, dựa trên prototype đã hoàn thiện, các nhà thiết kế UI sẽ tiến hành áp dụng hệ thống nhận diện thương hiệu, bao gồm màu sắc, font chữ, icon để tạo ra giao diện hoàn chỉnh, đảm bảo tính thẩm mỹ và nhất quán trên toàn bộ ứng dụng.

3.1. Xây dựng Wireframe app đặt sân và Prototype tương tác

Wireframe và prototype là hai công cụ không thể thiếu trong giai đoạn đầu của thiết kế. Wireframe (khung sườn) đóng vai trò như bản thiết kế kiến trúc của ứng dụng. Nó trình bày cấu trúc các màn hình, vị trí của các thành phần chính như nút bấm, ô tìm kiếm, thanh điều hướng mà không bị phân tâm bởi yếu tố thị giác. Giai đoạn này giúp đội ngũ thống nhất về mặt chức năng và luồng đi của người dùng. Sau đó, từ wireframe, các nhà thiết kế sẽ tạo ra Prototype ứng dụng đặt sân. Đây là một mô hình tương tác, cho phép người dùng nhấp vào các nút, chuyển đổi giữa các màn hình như đang sử dụng một ứng dụng thật. Việc sử dụng các công cụ như Figma design hay Adobe XD để tạo prototype giúp thu thập phản hồi sớm từ người dùng, kiểm tra tính khả dụng của luồng đặt sân, và giảm thiểu chi phí sửa đổi ở các giai đoạn sau.

3.2. Lựa chọn màu sắc typography và hoàn thiện UI Design

Sau khi cấu trúc và luồng hoạt động đã được xác định qua wireframe và prototype, giai đoạn hoàn thiện giao diện người dùng (UI) sẽ tập trung vào yếu tố thị giác. Dựa trên kết quả khảo sát cho thấy người dùng ưa thích tông màu lạnh, nhóm thiết kế trong tài liệu gốc đã chọn màu xanh dương ngọc (#32B5D1) làm màu chủ đạo, kết hợp với màu trắng để tạo cảm giác thể thao, dịu mắt và chuyên nghiệp. Về typography, font chữ 'Inter' được lựa chọn vì tính dễ đọc trên các kích thước màn hình khác nhau. Bố cục được thiết kế theo hướng từ trên xuống, với thanh tìm kiếm và các bộ lọc ở vị trí dễ tiếp cận, và thanh điều hướng chính luôn cố định ở dưới cùng. Sự kết hợp hài hòa giữa màu sắc, kiểu chữ và bố cục tạo ra một giao diện app mobile không chỉ thẩm mỹ mà còn đảm bảo tính nhất quán và dễ sử dụng trên toàn hệ thống.

IV. Bí Quyết Xây Dựng Tính Năng Ứng Dụng Đặt Sân Cốt Lõi

Thành công của một ứng dụng nằm ở bộ tính năng ứng dụng đặt sân được xây dựng để giải quyết đúng nhu cầu người dùng. Việc thiết kế các tính năng này đòi hỏi sự cân bằng giữa tính đầy đủ và sự đơn giản. Tính năng quan trọng nhất là tìm kiếm và lọc. Người dùng phải có khả năng tìm sân theo tên, địa điểm (tỉnh/thành, quận/huyện), khoảng giá và giờ mở cửa một cách linh hoạt. Màn hình chi tiết sân phải hiển thị đầy đủ thông tin: hình ảnh, địa chỉ trên bản đồ sân bóng, giá cả, tiện ích (gửi xe, nước uống), và đặc biệt là các đánh giá và xếp hạng sân từ những người chơi trước. Luồng đặt sân phải được tối giản hóa, cho phép người dùng chọn ngày, giờ, loại sân và xác nhận chỉ trong vài bước. Ngoài các chức năng cơ bản, việc tích hợp các tính năng cộng đồng như tạo kèo bóng đá để tìm đối thủ giao hữu, hay thông báo đẩy (push notification) để nhắc lịch và thông báo khuyến mãi, sẽ giúp tăng cường sự gắn kết và giữ chân người dùng. Cuối cùng, việc tích hợp thanh toán trực tuyến là một yếu tố then chốt để hoàn thiện trải nghiệm, mang lại sự tiện lợi và chuyên nghiệp cho toàn bộ hệ thống.

4.1. Tối ưu hóa hệ thống đặt chỗ online và tìm kiếm sân

Để cạnh tranh với phương thức đặt sân truyền thống, hệ thống đặt chỗ online phải vượt trội về sự tiện lợi và minh bạch. Chức năng tìm kiếm là cửa ngõ đầu tiên. Giao diện cần có một thanh tìm kiếm nổi bật và một bộ lọc nâng cao, cho phép người dùng nhanh chóng thu hẹp kết quả theo các tiêu chí như vị trí địa lý, khung giờ trống, loại sân (5v5, 7v7) và mức giá. Việc hiển thị kết quả tìm kiếm dưới dạng danh sách kèm hình ảnh và thông tin tóm tắt (giá, địa chỉ) giúp người dùng dễ dàng so sánh. Tích hợp bản đồ sân bóng cho phép người dùng xem vị trí các sân một cách trực quan, đây là một yêu cầu quan trọng đã được xác nhận qua khảo sát. Toàn bộ quy trình từ tìm kiếm đến xem chi tiết sân cần được tối ưu hóa để đảm bảo tốc độ phản hồi nhanh, giảm thiểu thời gian chờ đợi của người dùng.

4.2. Tích hợp Quản lý lịch sân bóng và thanh toán trực tuyến

Ứng dụng cần cung cấp hai hệ thống quản lý song song. Đối với người chơi, mục 'Lịch sử đặt sân' cho phép họ xem lại các trận đã và sắp diễn ra, dễ dàng đặt lại các sân quen thuộc. Đối với chủ sân, một giao diện quản trị (admin panel) là bắt buộc. Giao diện này phải cho phép chủ sân dễ dàng cập nhật tình trạng sân theo thời gian thực, xác nhận các yêu cầu đặt sân, và xem báo cáo doanh thu. Đây chính là cốt lõi của phần mềm quản lý sân thể thao. Về thanh toán, việc tích hợp các cổng thanh toán trực tuyến phổ biến như Momo, ZaloPay, hoặc thẻ ngân hàng là một bước tiến quan trọng. Nó không chỉ mang lại sự tiện lợi cho người chơi mà còn giúp chủ sân tự động hóa quy trình tài chính, giảm thiểu rủi ro từ việc đặt sân ảo hay hủy kèo đột ngột, như đã được đề xuất trong phần 'Phương hướng phát triển' của tài liệu gốc.

V. Case Study Phân Tích Giao Diện Ứng Dụng Đặt Sân Footboo

Đồ án IE106.M21 đã xây dựng một mẫu thiết kế giao diện ứng dụng đặt sân bóng thể thao hoàn chỉnh với tên gọi 'Footboo', đóng vai trò như một case study thực tiễn. Ứng dụng này là sự tổng hợp của quá trình nghiên cứu người dùng, phân tích đối thủ và áp dụng các nguyên tắc UI/UX cho ứng dụng thể thao. Giao diện của 'Footboo' được thiết kế với tông màu xanh chủ đạo, tạo cảm giác năng động và dễ chịu. Bố cục ứng dụng được phân chia rõ ràng với 5 tab chính ở thanh điều hướng dưới cùng: Trang chủ, Sân bóng, Đối thủ, Tin tức và Tài khoản. Cấu trúc này giúp người dùng dễ dàng truy cập các chức năng cốt lõi. Trang chủ hiển thị thông minh các thông tin nổi bật như sân bóng được đánh giá cao và các đội bóng hàng đầu, khuyến khích người dùng khám phá. Các màn hình chức năng như tìm kiếm, chi tiết sân, và đặt sân được thiết kế theo luồng logic, giảm thiểu số lần nhấp chuột và đơn giản hóa các thao tác. 'Footboo' là một minh chứng cho thấy một quy trình thiết kế ứng dụng bài bản có thể tạo ra một sản phẩm vừa đáp ứng đầy đủ tính năng, vừa đảm bảo trải nghiệm người dùng mượt mà.

5.1. Phân tích luồng tương tác từ đăng nhập đến đặt sân

Luồng tương tác người dùng (user flow) của 'Footboo' được tối ưu hóa để đạt hiệu quả cao. Người dùng có nhiều tùy chọn đăng nhập linh hoạt (số điện thoại, Google, Facebook), hoặc thậm chí 'bỏ qua' để trải nghiệm ứng dụng mà không cần tài khoản. Sau khi vào trang chủ, người dùng có thể sử dụng thanh tìm kiếm ngay lập tức. Khi xem chi tiết một sân, tất cả thông tin cần thiết như giá, giờ trống, tiện ích, và đánh giá đều được trình bày trên cùng một màn hình. Nút 'Đặt sân' luôn nổi bật và dễ thấy. Quá trình đặt sân chỉ bao gồm các bước chọn thời gian, loại sân và xác nhận, loại bỏ các bước nhập liệu không cần thiết. Luồng tương tác liền mạch này, từ khám phá đến hoàn thành giao dịch, là kết quả của việc áp dụng hiệu quả các nguyên tắc thiết kế trải nghiệm người dùng (UX), đảm bảo người dùng có thể đạt được mục tiêu một cách nhanh nhất.

5.2. Chi tiết các màn hình chính trong phần mềm quản lý sân

Các màn hình chính của 'Footboo' được thiết kế với mục tiêu rõ ràng. Màn hình 'Sân bóng' là nơi người dùng thực hiện các thao tác tìm kiếm và lọc, với các bộ lọc trực quan cho phép tùy chỉnh theo địa điểm, giá, và giờ hoạt động. Màn hình 'Đối thủ' là một tính năng cộng đồng, cho phép các đội bóng tìm kiếm và thách đấu lẫn nhau, đi kèm bộ lọc theo khu vực và xếp hạng. Màn hình 'Tài khoản' là trung tâm quản lý cá nhân, nơi người dùng có thể xem lại 'Lịch sử thi đấu', quản lý các đội bóng đã tham gia và danh sách các sân đã đặt. Mỗi màn hình đều tuân thủ một hệ thống thiết kế nhất quán về màu sắc, icon và cách trình bày thông tin, tạo nên một giao diện người dùng (UI) chuyên nghiệp và đồng bộ, giúp người dùng dễ dàng làm quen và sử dụng thành thạo phần mềm quản lý sân thể thao này.

VI. Kết Luận Hướng Phát Triển Thiết Kế Giao Diện Ứng Dụng

Việc thiết kế giao diện ứng dụng đặt sân bóng thể thao là một quá trình phức hợp, đòi hỏi sự kết hợp giữa nghiên cứu người dùng, tư duy thiết kế và ứng dụng công nghệ. Phân tích từ đồ án 'Footboo' cho thấy, một sản phẩm thành công phải bắt nguồn từ việc thấu hiểu sâu sắc nhu cầu của cả người chơi và chủ sân. Mô hình đề xuất đã đáp ứng khá đầy đủ các chức năng cốt lõi, từ tìm kiếm, đặt sân cho đến các tính năng cộng đồng như tìm đối thủ, tạo đội. Bố cục đơn giản, màu sắc hài hòa và luồng tương tác được tối ưu hóa là những ưu điểm nổi bật. Tuy nhiên, mô hình vẫn còn những hạn chế cần cải thiện, đặc biệt là việc chưa tích hợp hệ thống thanh toán trực tuyến, khiến quy trình đặt sân chưa được tự động hóa hoàn toàn. Tương lai của các ứng dụng này nằm ở việc không ngừng cải tiến trải nghiệm người dùng (UX) và mở rộng hệ sinh thái tính năng để phục vụ cộng đồng một cách toàn diện hơn, biến ứng dụng thành một nền tảng không thể thiếu cho người yêu thể thao.

6.1. Đánh giá ưu nhược điểm của mô hình thiết kế đề xuất

Mô hình thiết kế 'Footboo' có nhiều ưu điểm đáng ghi nhận. Thứ nhất, nó cung cấp một bộ tính năng toàn diện, đáp ứng hầu hết các nhu cầu từ cơ bản đến nâng cao. Thứ hai, bố cục và giao diện người dùng (UI) được thiết kế đơn giản, trực quan, phù hợp với một tệp người dùng rộng. Thứ ba, ứng dụng cho phép người dùng đóng góp dữ liệu (thêm sân bóng), giúp làm phong phú hệ thống. Tuy nhiên, nhược điểm lớn nhất được chỉ ra trong chính tài liệu nghiên cứu là việc thiếu tính năng thanh toán trực tuyến. Hiện tại, việc đặt sân chỉ mang tính chất 'giữ chỗ', chưa giải quyết được vấn đề thanh toán và xác nhận tự động. Ngoài ra, việc phân tách các trận đấu do 'mình hẹn' và 'đối thủ hẹn' chưa rõ ràng cũng là một điểm cần cải thiện để nâng cao trải nghiệm người dùng (UX).

6.2. Triển vọng phát triển và các tính năng nâng cao

Dựa trên nền tảng thiết kế hiện tại, ứng dụng có nhiều tiềm năng phát triển trong tương lai. Hướng đi ưu tiên hàng đầu là tích hợp hoàn chỉnh hệ thống thanh toán trực tuyến để tự động hóa toàn bộ quy trình. Tiếp theo, có thể phát triển các tính năng nâng cao cho chủ sân, chẳng hạn như công cụ tạo giải đấu nội bộ, quản lý khuyến mãi, và quảng bá sân. Một hướng đi khác là mở rộng ứng dụng thành một nền tảng thương mại điện tử, cho phép bán các vật phẩm thể thao như quần áo, giày, phụ kiện. Việc thêm các tính năng xã hội như bảng tin, chia sẻ khoảnh khắc trận đấu, và hệ thống xếp hạng người chơi cá nhân cũng sẽ góp phần xây dựng một cộng đồng người dùng gắn kết và trung thành, biến ứng dụng không chỉ là một công cụ đặt sân mà còn là một mạng xã hội dành cho người yêu thể thao.

Trích đoạn nội dung tài liệu

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. Khảo sát yêu câu Questions Responses ® Settings Ivreoirreu Dũng Giới tinh ID copy 60 responses @ Nam ® Nữ 9 Không muốn nêu cụ thể Màu bạn thích lIB Copy 60 responses Trắng - Đen - Cam|_—0 (0%) Xanh lá - Xanh dương - Trang - 40 (66.7%) Đen Trắng - Đen 10 (16.7%) Hồng - Đen|—0 (0%) Hồng tím trắng 10 (16.7%) Môn thể thao bạn thích (0 copy 60 responses a banh 40 (66.7%) Bong chuyén 30 (50%) Bơi lội 50 (83.1 Khảo sát yêu cầu giới tính, màu thích, môn thể thao thích 5 | Page 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 60 responses 60 (100%) Bạn muốn xem thông tin gi ở sân (0 copy 60 responses Thong tin chỉ tiết: Địa chỉ - thời. 60 (100%) Hình ảnh 60 (100%) Đánh giá 60 (100%) Số lượng đã đặt Sân còn trồng hay đã có người. 60 (100%) Sân ưa thích Dịch vụ thêm ở sân 0 Hình thức thường xuyên thanh toán của bạn | copy Hinh 1.2 Khảo sát phương thức đặt, banner, voucher, quảng cáo, thông tin 6 | Page IE106.M21 - Thiết kế giao điện người đùng Questions Responses ® Settings Dịch vụ thêm ở son NN ¬o (16.7%) 0 10 20 30 40 50 60 Hình thức thường xuyên thanh toán của bạn ID copy 60 responses Momo 50 (83.3%) COD - tiền mặt 50 (83.7%) Bank 30 (50%) Shopee pay 10 (16.7%) 0 10 20 30 40 50 Bạn có cần map để chỉ dẫn địa chỉ (0 copy 60 responses @co @ Khong Bạn có cần nút chia sẻ để cho các đồng đội khác biết về vé đặt sân của mình | copy 60 responses @co @ Khong Hình I.3 Khảo sát hình thức thanh toán, bản đỗ, chia sé 7 | Page IE106.M21 - Thiết kế giao điện người đùng 1.

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.

Nhận xét ung dung Wesport a. Nhan xét giao dién Wesport 8 | IE106.M21 - Thiết kế giao điện người đùng 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.

„i Viettel ® 08:36 er ọ srerr Minh Nhat Linh Tay B 43 Binh Quoi, Bi 16 Tran Vain Nila, Ph SAN GAN NHAT 3.7km ¡ a ff £ Ø Sự kiến Tìm kết Độicùatôi — Bạnbè Hình I.5 Giao diện chính 9 | Page 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 Minh Nhat Minh Nhat © Football + lol 5v5 ~ * Qn Bia diém/San DỊCH VỤ TẠI ĐỊA ĐIỀM t 8e©®%x hs fae Ngày và giờ % KF 15/03/2022 x 12:00 13:00 Bl? > Không lặp « Đặ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 IE106.M21 - Thiết kế giao điện người đùng 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! 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 0vnd 90,000 vnd Ske kkk 190,000 vnd MÃ GIẢM GIÁ PHƯƠNG THỨC THANH TOÁN Thẻ ATM (Ngoại trừ thẻ Visa/Mastercard} @ Visa/Mastercard (Phát hành tại Việt Nam] Tổng 196,750 vnd â li 6 Q & Xác nhận đặt chỗ Trang chủ Sự liện Tìm kiếm Đội của tếi Bạn bè Hình 1.7 Giao diện xác nhận đặt chỗ - _ Khi bấm vào kiểm tra tính khả dụng dé chon va dat san: O phan giao diện này hiển thị bố cục rất rõ ràng. Các hệ thông sân được hiền thị theo danh sách từ trên xuống dưới.

Hiển thị các thông tin hình anh, dia chi va giá sân đầy đủ, người dùng rất dễ nhận biết và chọn lựa. - _ 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.M21 - Thiết kế giao điện người đùng sài Viettel & 08:37 @775 088 ‹ Hồ sơ Sita Duy Vo ove : “y 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._ Trải nghiệm khi dùng ứng dụng Wesport. Xếp hạng và Nhận xét 5,0. Tả *x**** KKK *x**** 1 Star Lord0101012, 05/05/2021 Hdkdgbxhdfns, 05/05/2021 Nice app App App tết cập nhật thêm sớt mới của các sắn More convenient for people and play different App thân thiện dễ sử dụng kinds of sports. A really good and effective app *x**** *x*** tok hk hk T.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 cooll + much more convenient for reservation and to play different sports. Kk hk toh hh ***** 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.M21 - Thiết kế giao điện người đùng - _ 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. Nhận xét ứng dụng: Đặt lịch bóng đá a. Nhận xét giao diện VY F ice) Lựa chọn ngôn ngữ a © 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 ba ng ir 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 Tin tức ft Trang Chủ Hình 1.11 Giao diện chính - _ Giao diện chính: + giao diện quá đơn giản, Apps chỉ làm như việc đề giới thiệu cho I sân bóng độc lập nào đó. vì chỉ là một sân bóng nên nó không có gi dé xem ngoài lịch của sân bóng đó.