I. Tổng quan đồ án IE106
Đồ án môn học Thiết kế Giao diện IE106.M21 là một dự án nghiên cứu và ứng dụng thực tiễn của nhóm sinh viên thuộc Trường Đại học Công nghệ Thông tin (sinh viên UIT), Đại học Quốc gia TP.HCM. Mục tiêu chính của dự án là thiết kế giao diện cho ứng dụng chủ đề thể thao, cụ thể là một ứng dụng quản lý sân bóng và đặt sân trực tuyến. Bối cảnh ra đời của đề tài xuất phát từ nhu cầu ngày càng tăng của cộng đồng yêu bóng đá trong việc tìm kiếm và đặt sân một cách nhanh chóng, tiện lợi. Thay vì phải liên lạc thủ công qua điện thoại, người dùng mong muốn có một hệ thống đặt sân online tập trung, cung cấp đầy đủ thông tin về sân bãi, giá cả, và các dịch vụ đi kèm. Đồ án này không chỉ dừng lại ở việc tạo ra một giao diện đẹp mắt, mà còn tập trung sâu vào việc tối ưu hóa trải nghiệm người dùng (UX), đảm bảo mọi thao tác từ tìm kiếm, lựa chọn, đến thanh toán đều diễn ra mượt mà và trực quan. Quá trình thực hiện được trình bày chi tiết trong báo cáo đồ án IE106, bao gồm các giai đoạn từ khảo sát yêu cầu, phân tích đối thủ cạnh tranh, phác thảo ý tưởng, cho đến hoàn thiện giao diện chi tiết. Sản phẩm cuối cùng là một bộ thiết kế hoàn chỉnh, sẵn sàng cho giai đoạn phát triển và triển khai, hứa hẹn mang lại một công cụ hữu ích cho cả người chơi và chủ sân bóng.
1.1. Mục tiêu và phạm vi của đề tài thiết kế ứng dụng di động
Mục tiêu cốt lõi của đề tài là xây dựng một bộ giao diện hoàn chỉnh cho một ứng dụng đặt sân bóng trên nền tảng di động. Dự án tập trung vào việc giải quyết các vấn đề tồn tại trong phương thức đặt sân truyền thống, mang lại sự tiện lợi tối đa cho người dùng. Phạm vi nghiên cứu bao gồm: (1) Khảo sát và phân tích nhu cầu thực tế của người dùng, từ đó xác định các tính năng ứng dụng thể thao cần thiết. (2) Nghiên cứu và đánh giá các ứng dụng đối thủ hiện có trên thị trường như Wesport, Sporta để rút ra ưu nhược điểm. (3) Thực hiện quy trình thiết kế UI/UX bài bản, từ việc lên ý tưởng, phác thảo wireframe ứng dụng, xây dựng mockup app đặt sân chi tiết và tạo prototype Figma tương tác. (4) Xây dựng một design system cho app thể thao nhất quán, đảm bảo tính đồng bộ về màu sắc, font chữ và các thành phần giao diện. Đề tài không đi sâu vào phần lập trình back-end mà tập trung hoàn toàn vào khía cạnh thiết kế giao diện và trải nghiệm người dùng.
1.2. Đối tượng người dùng mục tiêu và giá trị mang lại
Ứng dụng hướng đến hai nhóm đối tượng chính. Nhóm thứ nhất là những người yêu thích bóng đá, các đội bóng nghiệp dư cần tìm và đặt sân cỏ nhân tạo để thi đấu hoặc giao lưu. Nhóm thứ hai là các chủ sân bóng muốn một công cụ hiệu quả để quản lý lịch đặt sân, tiếp cận khách hàng và tối ưu hóa hoạt động kinh doanh. Giá trị mà ứng dụng mang lại rất rõ ràng: đối với người chơi, đó là sự nhanh chóng, minh bạch và tiện lợi trong việc tìm kiếm sân trống, so sánh giá và đặt lịch. Đối với chủ sân, ứng dụng giúp tự động hóa quy trình quản lý, giảm thiểu sai sót, tăng khả năng lấp đầy sân và quảng bá hình ảnh sân bóng của mình đến một cộng đồng rộng lớn hơn. Giao diện được thiết kế để thân thiện với mọi lứa tuổi, đảm bảo cả những người không rành về công nghệ cũng có thể dễ dàng sử dụng.
II. Phân tích thách thức trong thiết kế ứng dụng đặt sân bóng
Việc thiết kế ứng dụng di động cho lĩnh vực đặc thù như đặt sân bóng đá đối mặt với nhiều thách thức. Thách thức lớn nhất là làm sao để cân bằng giữa việc cung cấp một lượng lớn thông tin (danh sách sân, lịch trống, giá cả, bản đồ, đánh giá) và việc giữ cho giao diện người dùng (UI) đơn giản, không gây rối mắt. Dựa trên khảo sát được trình bày trong Chương 1 của tài liệu, người dùng có xu hướng ưa thích các tông màu lạnh, bố cục rõ ràng và font chữ dễ đọc. Một thách thức khác là việc tích hợp nhiều phương thức thanh toán. Khảo sát cho thấy người dùng ưu tiên thanh toán qua ví điện tử Momo và tiền mặt, đòi hỏi luồng thanh toán phải được thiết kế linh hoạt và an toàn. Bên cạnh đó, việc phân tích các ứng dụng đối thủ như Wesport và Sporta cũng chỉ ra rằng, nhiều ứng dụng hiện tại có giao diện khá thô cứng, chưa tối ưu cho trải nghiệm người dùng (UX). Ví dụ, ứng dụng Wesport dù có chức năng tốt nhưng giao diện bị nhận xét là "khá đại trà, không bắt mắt". Ứng dụng Sporta mạnh về tính năng tìm đối thủ nhưng lại hạn chế trong việc đặt sân trực tiếp. Do đó, đồ án IE106.M21 phải giải quyết bài toán làm sao để tạo ra một sản phẩm vừa có chức năng mạnh mẽ, vừa có giao diện hấp dẫn và trải nghiệm mượt mà, vượt trội so với đối thủ.
2.1. Kết quả khảo sát yêu cầu từ người dùng thực tế
Để có cơ sở cho các quyết định thiết kế, nhóm thực hiện đã tiến hành một cuộc khảo sát chi tiết. Kết quả cho thấy đa số người dùng ưa chuộng tông màu lạnh, tạo cảm giác mát mẻ và chuyên nghiệp. Về bố cục, sự đơn giản và vị trí các thanh công cụ dễ tiếp cận là yếu tố được quan tâm hàng đầu. Đối với phương thức thanh toán, Momo và tiền mặt 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 linh hoạt trong hệ thống đặt sân online. Các thông tin khác như nhu cầu về voucher, quảng cáo, bản đồ và tính năng chia sẻ cũng được thu thập để định hình các tính năng ứng dụng thể thao trong tương lai. Những dữ liệu này là nền tảng quan trọng giúp nhóm thiết kế một giao diện gần gũi và đáp ứng đúng mong đợi của người dùng.
2.2. Bài học kinh nghiệm từ việc phân tích đối thủ cạnh tranh
Phân tích các ứng dụng Wesport, 'Đặt lịch bóng đá' và Sporta mang lại nhiều bài học quý giá. Wesport được đánh giá cao về sự mượt mà và sắp xếp bố cục rõ ràng, đặc biệt là tính năng đăng nhập liên kết với Google/Facebook. Tuy nhiên, điểm yếu là thiết kế giao diện còn cứng nhắc. 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 độc lập. Sporta nổi bật với tính năng tìm đối thủ và các thống kê đội bóng, nhưng quy trình đặt sân còn hạn chế. Từ đó, đồ án rút ra kinh nghiệm cần kết hợp các điểm mạnh: bố cục rõ ràng của Wesport, tính năng cộng đồng của Sporta, và khắc phục điểm yếu về mặt thiết kế UI/UX để tạo ra một sản phẩm toàn diện hơn, vừa cho phép đặt sân cỏ nhân tạo dễ dàng, vừa hỗ trợ tìm kiếm đối thủ và xây dựng cộng đồng.
III. Hướng dẫn xây dựng wireframe mockup app đặt sân chi tiết
Quy trình hiện thực hóa ý tưởng thành một giao diện hoàn chỉnh được thực hiện bài bản qua hai giai đoạn chính: phác thảo wireframe ứng dụng và hoàn thiện mockup app đặt sân. Giai đoạn đầu, được mô tả trong Chương 2 của tài liệu, là quá trình phác thảo các khung sườn (wireframe) cho những màn hình chức năng cốt lõi. Các màn hình như đăng nhập, đăng ký, quên mật khẩu, tìm kiếm và lọc sân bóng, chi tiết sân, và trang tin tức được vẽ tay hoặc sử dụng công cụ đơn giản để xác định bố cục, vị trí các thành phần và luồng di chuyển của người dùng. Giai đoạn này tập trung hoàn toàn vào cấu trúc và chức năng, bỏ qua các yếu tố về màu sắc hay đồ họa. Mục đích là để đảm bảo logic của hệ thống đặt sân online được xây dựng một cách vững chắc trước khi đi vào chi tiết hóa giao diện. Sau khi cấu trúc wireframe được thống nhất, nhóm chuyển sang giai đoạn thiết kế mockup. Đây là quá trình áp dụng màu sắc, typography, icon và hình ảnh thực tế vào các wireframe đã có, tạo ra một bản thiết kế có độ trung thực cao, mô phỏng chính xác giao diện cuối cùng của ứng dụng. Quá trình này đòi hỏi việc xây dựng một design system cho app thể thao để đảm bảo tính nhất quán trên toàn bộ ứng dụng.
3.1. Quy trình phác thảo cấu trúc với wireframe ứng dụng
Phác thảo wireframe là bước nền tảng trong quy trình thiết kế UI/UX. Nhóm sinh viên đã bắt đầu bằng việc xác định các màn hình chính dựa trên yêu cầu chức năng. Các màn hình đăng nhập/đăng ký được thiết kế với nhiều tùy chọn (số điện thoại, Google, Facebook) để tăng tính tiện lợi. Trang tìm kiếm và lọc được chú trọng với các bộ lọc thông minh theo sân bóng và đối thủ. Các trang chi tiết sân bóng và hẹn đá được cấu trúc để hiển thị thông tin một cách rõ ràng và đầy đủ nhất. Quy trình này giúp cả nhóm có một cái nhìn tổng quan về cấu trúc ứng dụng, dễ dàng thảo luận, chỉnh sửa và thống nhất về luồng người dùng trước khi đầu tư thời gian vào thiết kế chi tiết, giảm thiểu rủi ro phải làm lại ở các giai đoạn sau.
3.2. Phát triển mockup app đặt sân trực quan và sống động
Từ bộ wireframe đã được phê duyệt, nhóm tiến hành phát triển mockup. Giai đoạn này là lúc các yếu tố thị giác được đưa vào. Dựa trên kết quả khảo sát, tông màu lạnh (chủ yếu là xanh dương) được chọn làm màu chủ đạo, mang lại cảm giác năng động, thể thao nhưng vẫn chuyên nghiệp. Font chữ được lựa chọn kỹ lưỡng để đảm bảo dễ đọc trên nhiều kích thước màn hình và phù hợp với nhiều độ tuổi. Các icon được thiết kế đồng bộ và trực quan. Hình ảnh sân bóng và các banner quảng cáo được lựa chọn cẩn thận để tạo sự hấp dẫn. Kết quả của giai đoạn này là một bộ giao diện người dùng (UI) hoàn chỉnh, thể hiện chính xác sản phẩm cuối cùng sẽ trông như thế nào, sẵn sàng cho việc tạo mẫu thử tương tác.
IV. Bí quyết tối ưu trải nghiệm người dùng UX cho ứng dụng
Điểm khác biệt cốt lõi của một ứng dụng thành công không chỉ nằm ở giao diện đẹp mà còn ở trải nghiệm người dùng (UX) mượt mà và hiệu quả. Đồ án IE106.M21 đã đặc biệt chú trọng vào việc tối ưu hóa UX thông qua việc thiết kế các luồng chức năng một cách logic và giảm thiểu số bước người dùng cần thực hiện. Luồng đặt sân cỏ nhân tạo được coi là luồng quan trọng nhất, được thiết kế theo các bước tuần tự: tìm kiếm/lọc -> xem chi tiết sân -> chọn khung giờ -> xác nhận thông tin -> thanh toán. Mỗi bước đều cung cấp phản hồi rõ ràng cho người dùng. Ví dụ, sau khi chọn giờ, hệ thống sẽ hiển thị ngay lập tức trạng thái "khả dụng" hoặc "đã được đặt". Bên cạnh đó, các tính năng ứng dụng thể thao độc đáo như tìm đối thủ, xem lịch sử thi đấu, và đánh giá sân bóng cũng góp phần làm tăng giá trị trải nghiệm. Người dùng không chỉ dùng app để đặt sân mà còn có thể quản lý đội bóng, kết nối với cộng đồng và theo dõi thành tích của mình. Để kiểm chứng và hoàn thiện các luồng tương tác này, một prototype Figma đã được xây dựng, cho phép người dùng thử nghiệm và cung cấp phản hồi trực tiếp, giúp nhóm phát hiện và khắc phục các vấn đề về UX từ sớm.
4.1. Thiết kế luồng đặt sân cỏ nhân tạo liền mạch và nhanh chóng
Luồng đặt sân là xương sống của toàn bộ ứng dụng. Thiết kế tập trung vào sự đơn giản và tốc độ. Trang chủ hiển thị các sân bóng nổi bật và gợi ý gần vị trí người dùng. Thanh tìm kiếm thông minh cho phép nhập tên sân hoặc khu vực. Bộ lọc chi tiết giúp thu hẹp kết quả theo giá, loại sân, và tiện ích. Trang chi tiết sân cung cấp đầy đủ hình ảnh, thông tin, bảng giá và đánh giá từ người dùng khác. Lịch đặt sân được hiển thị trực quan theo dạng lưới (grid), giúp người dùng dễ dàng chọn khung giờ trống. Quá trình xác nhận thông tin và thanh toán được gộp trong một vài bước ngắn gọn, hỗ trợ nhiều phương thức thanh toán phổ biến. Toàn bộ quy trình được thiết kế để hoàn thành trong thời gian ngắn nhất có thể.
4.2. Xây dựng prototype Figma để kiểm thử tương tác người dùng
Sau khi hoàn thiện các mockup app đặt sân, nhóm đã sử dụng công cụ Figma để liên kết các màn hình lại với nhau, tạo thành một prototype Figma có tính tương tác cao. Mẫu thử này mô phỏng gần như hoàn chỉnh cách ứng dụng hoạt động trong thực tế. Người dùng có thể nhấp vào các nút, nhập liệu vào các trường văn bản và điều hướng qua lại giữa các trang. Việc này cho phép nhóm thực hiện các buổi kiểm thử khả dụng (usability testing), quan sát cách người dùng tương tác với giao diện và thu thập phản hồi wert. Các vấn đề như nút bấm khó tìm, luồng thao tác khó hiểu hay thông tin hiển thị không rõ ràng đều được phát hiện và chỉnh sửa kịp thời, đảm bảo phiên bản cuối cùng mang lại trải nghiệm người dùng (UX) tốt nhất.
V. Đánh giá giao diện người dùng UI hoàn thiện của dự án
Sản phẩm cuối cùng của đồ án môn thiết kế giao diện IE106.M21 là một bộ thiết kế giao diện người dùng (UI) hoàn chỉnh và có tính thẩm mỹ cao, được trình bày chi tiết trong Chương 3 và Chương 4 của báo cáo. Giao diện tổng thể tuân thủ chặt chẽ design system cho app thể thao đã đề ra, sử dụng tông màu xanh năng động làm chủ đạo, kết hợp với màu trắng và xám để tạo sự cân bằng và thoáng đãng. Bố cục các trang được thiết kế nhất quán, từ trang đăng nhập, trang chủ cho đến các trang chức năng phức tạp hơn như đặt sân hay quản lý đội bóng. Trang chủ được thiết kế thông minh với banner nổi bật, thanh tìm kiếm tiện lợi và các danh sách sân gợi ý. Các trang chức năng như Lịch sử thi đấu, Đánh giá sân bóng, và Tin tức đều được chăm chút tỉ mỉ, không chỉ hiển thị thông tin đầy đủ mà còn có bố cục rõ ràng, dễ theo dõi. Ví dụ, giao diện lịch sử thi đấu ghi nhận chi tiết thời gian, địa điểm, đối thủ và tỉ số, giúp người dùng dễ dàng quản lý hoạt động của đội. Nhìn chung, thiết kế UI của dự án đã đáp ứng tốt các yêu cầu về thẩm mỹ và tính khả dụng, tạo ra một sản phẩm chuyên nghiệp và hấp dẫn.
5.1. Phân tích các màn hình chính Trang chủ Tìm kiếm Đặt sân
Giao diện trang chủ là điểm chạm đầu tiên, được thiết kế để gây ấn tượng và điều hướng người dùng hiệu quả. Trang tìm kiếm tích hợp bộ lọc mạnh mẽ, cho phép lọc theo đối thủ và sân bóng, giúp người dùng nhanh chóng tìm thấy thông tin mình cần. Giao diện đặt sân thi đấu với đối thủ là một điểm nhấn, hiển thị chi tiết thông tin các đội, cho phép gửi lời mời hẹn đá và quản lý thành viên tham gia. Các màn hình này đều được thiết kế với các thành phần UI rõ ràng, nút kêu gọi hành động (CTA) nổi bật và luồng thao tác trực quan, đảm bảo người dùng có thể hoàn thành mục tiêu một cách dễ dàng.
5.2. Trình bày giao diện các tính năng phụ trợ quan trọng
Ngoài các chức năng chính, ứng dụng còn được trang bị các tính năng phụ trợ hữu ích. Giao diện tin tức được thiết kế theo dạng thẻ bài (card) hiện đại, cho phép người dùng cập nhật thông tin thể thao, lưu và yêu thích bài viết. Giao diện tài khoản cá nhân được tổ chức khoa học, cho phép người dùng quản lý thông tin cá nhân, đội bóng của mình, xem lại lịch sử thi đấu và các hoạt động khác. Giao diện đánh giá sân bóng đơn giản với hệ thống chấm sao và bình luận, cung cấp một kênh thông tin tham khảo giá trị cho cộng đồng. Tất cả các giao diện này đều tuân thủ nguyên tắc thiết kế nhất quán, góp phần tạo nên một trải nghiệm người dùng (UX) hoàn chỉnh và đồng bộ.
VI. Kết luận và hướng phát triển cho đồ án thiết kế ứng dụng
Tổng kết lại, đồ án môn thiết kế giao diện IE106.M21 đã hoàn thành xuất sắc mục tiêu đề ra là thiết kế một bộ giao diện hoàn chỉnh cho ứng dụng đặt sân bóng. Dự án đã thể hiện một quy trình làm việc chuyên nghiệp, từ khâu khảo sát, phân tích, lên ý tưởng cho đến hoàn thiện thiết kế chi tiết. Sản phẩm cuối cùng không chỉ là một bộ giao diện đẹp mắt mà còn là một giải pháp thiết kế UI/UX được nghiên cứu kỹ lưỡng, có khả năng giải quyết các vấn đề thực tiễn của người dùng. Đây có thể được xem là một đồ án tốt nghiệp UI/UX tiềm năng. Tuy nhiên, như được đề cập trong Chương 5 của báo cáo, dự án vẫn còn một số nhược điểm nhất định và nhiều tiềm năng để phát triển trong tương lai. Hướng phát triển không chỉ dừng lại ở việc cải tiến giao diện hiện tại mà còn mở rộng thêm nhiều tính năng mới, biến ứng dụng thành một nền tảng thể thao cộng đồng toàn diện, phục vụ không chỉ cho bóng đá mà còn cho nhiều môn thể thao khác. Sự thành công của đồ án là minh chứng cho năng lực của sinh viên UIT trong lĩnh vực thiết kế và phát triển sản phẩm công nghệ.
6.1. Tổng kết ưu điểm và nhược điểm của báo cáo đồ án IE106
Ưu điểm lớn nhất của đồ án là quy trình nghiên cứu và thiết kế bài bản. Việc khảo sát người dùng và phân tích đối thủ đã cung cấp một nền tảng vững chắc cho các quyết định thiết kế. Giao diện hoàn thiện có tính thẩm mỹ cao, đồng bộ và tối ưu cho trải nghiệm người dùng. Tuy nhiên, nhược điểm được nhóm tự nhận thấy là thiết kế vẫn có thể được cải tiến để trở nên độc đáo và khác biệt hơn nữa. Ngoài ra, do giới hạn của một đồ án môn học, việc kiểm thử trên một tập người dùng lớn chưa được thực hiện, do đó có thể còn những vấn đề tiềm ẩn về trải nghiệm người dùng chưa được phát hiện.
6.2. Đề xuất phương hướng cải tiến hệ thống đặt sân online
Để phát triển dự án trong tương lai, nhóm đề xuất một số phương hướng. Về chức năng, có thể tích hợp thêm hệ thống giải đấu, cho phép các đội đăng ký tham gia và theo dõi lịch thi đấu, bảng xếp hạng. Tính năng livestream hoặc cập nhật tỉ số trực tiếp cũng là một hướng đi hấp dẫn. Về mặt công nghệ, có thể ứng dụng trí tuệ nhân tạo để gợi ý sân bóng, đối thủ phù hợp dựa trên lịch sử hoạt động của người dùng. Mở rộng hệ thống đặt sân online để hỗ trợ thêm các môn thể thao khác như cầu lông, tennis, bóng rổ sẽ giúp ứng dụng tiếp cận một thị trường rộng lớn hơn, trở thành một nền tảng thể thao không thể thiếu cho cộng đồng.
