Bối cảnh và vấn đề nghiên cứu

Đề tài đồ án tốt nghiệp "Phân tích thiết kế phần mềm ứng dụng hỗ trợ các hệ thống phúc lợi trẻ em và kết nối trẻ em được chăm sóc nuôi dưỡng với gia đình" (tên dự án: AdoptKids) được thực hiện bởi sinh viên Tô Đình Đức Anh, dưới sự hướng dẫn của TS. Bùi Thị Thu Trang tại Khoa Công nghệ Kỹ thuật - Nông nghiệp Công nghệ cao, Trường Đại học Bà Rịa – Vũng Tàu vào năm 2021.

Lý do chọn đề tài xuất phát từ trăn trở thực tiễn về hoàn cảnh của trẻ em mồ côi và trẻ em thiếu nơi nương tựa, được tác giả đúc kết qua thông điệp của ông Hermann Gmeiner – Người sáng lập Làng trẻ em SOS Quốc tế: "Điều khiến đứa trẻ đau khổ không phải là thiếu quần áo, đồ ăn, hay giáo dục mà là không được thuộc về ai và không có một gia đình". Nhằm giải quyết rào cản thông tin và tạo nhịp cầu kết nối giữa các cơ sở bảo trợ xã hội với những cá nhân, gia đình có mong muốn nuôi dưỡng hoặc tài trợ, tác giả xây dựng đề xuất phân tích và thiết kế hệ thống ứng dụng di động AdoptKids.

Mục tiêu và nhiệm vụ nghiên cứu được xác định cụ thể như sau:

  1. Nghiên cứu hệ thống lý thuyết về thiết kế giao diện người dùng (UI - User Interface) và trải nghiệm người dùng (UX - User Experience) chuyên biệt cho nền tảng ứng dụng di động.
  2. Tìm hiểu và ứng dụng công cụ Figma trong việc hiện thực hóa các giải pháp thiết kế sản phẩm số.
  3. Phân tích các yêu cầu chức năng, xác định tác nhân, xây dựng sơ đồ trường hợp sử dụng (Use-case) và các biểu đồ hoạt động (Activity Diagram) cho toàn bộ hệ thống.
  4. Xây dựng tài liệu thiết kế chi tiết bao gồm khung xương giao diện (Wireframe), sơ đồ luồng người dùng (User Flow), bộ quy chuẩn giao diện (UI Guideline) và bản mẫu thiết kế giao diện hoàn chỉnh (UI Mockup).

Đối tượng nghiên cứu của đồ án là quy trình thiết kế UI/UX trên nền tảng di động và phương pháp ứng dụng phần mềm Figma để thiết kế giao diện ứng dụng AdoptKids. Phạm vi nghiên cứu tập trung vào giai đoạn phân tích hệ thống và thiết kế trải nghiệm người dùng/nguyên mẫu giao diện đồ họa, hoàn thành nghiệm thu vào tháng 01 năm 2021.

Cơ sở lý thuyết và phương pháp

Khung lý thuyết của đồ án được xây dựng dựa trên các khái niệm nền tảng trong lĩnh vực thiết kế sản phẩm số và phát triển phần mềm di động:

  • Giao diện người dùng (UI): Được định nghĩa là tập hợp toàn bộ các yếu tố thị giác mà người dùng trực tiếp quan sát và tương tác, bao gồm bố cục không gian, bảng màu, phông chữ, hình ảnh đồ họa, biểu tượng và các nút chức năng. UI đóng vai trò là kênh truyền tải thông điệp từ nhà thiết kế đến người dùng, hướng đến sự rõ ràng, nhất quán và giảm thiểu thời gian thực hiện tác vụ.
  • Trải nghiệm người dùng (UX): Là tập hợp các cảm nhận, đánh giá và phản hồi của người dùng trong quá trình tương tác với sản phẩm, tập trung vào các tiêu chí: tính dễ sử dụng, tính tiện ích và hiệu quả vận hành của hệ thống.
  • Quy trình 4 bước của UI Designer: Được chuẩn hóa qua các giai đoạn:
    1. Phác thảo (Sketch): Lên ý tưởng nhanh bằng tay trên giấy hoặc bảng phục vụ thảo luận nhóm.
    2. Khung xương (Wireframe): Định hình cấu trúc, phân cấp thông tin và mối quan hệ giữa các màn hình.
    3. Bản mẫu tĩnh (Mockup): Bổ sung màu sắc, kiểu chữ, hình ảnh, biểu trưng và chi tiết đồ họa vào wireframe.
    4. Bản mẫu tương tác (Prototype): Mockup được tích hợp luồng tương tác thực tế, cho phép nhấp nút chuyển màn hình và kiểm thử với dữ liệu giả lập.
  • Phân loại Wireframe: Gồm 4 dạng tiếp cận: Block diagrams (sơ đồ khối cơ bản), High-fidelity text (sử dụng văn bản thực tế), High-fidelity color (bổ sung màu sắc cục bộ để định hướng hành động) và High-fidelity media (chèn hình ảnh, video thực tế).
  • Luồng người dùng (User Flow) và Quy chuẩn giao diện (UI Guideline): Xác định bản đồ hành trình từng bước của người dùng và thiết lập hệ thống quy tắc ngôn ngữ trực quan nhất quán cho toàn bộ dự án.

Phương pháp nghiên cứu kết hợp giữa lý thuyết và thực nghiệm:

  • Phương pháp nghiên cứu lý thuyết: Thu thập, tổng hợp tài liệu chuyên ngành về thiết kế UI/UX di động; phân tích các tính năng kỹ thuật và ưu thế làm việc của nền tảng Figma.
  • Phương pháp thực nghiệm thiết kế: Ứng dụng phần mềm Figma để trực tiếp xây dựng kịch bản sử dụng, mô hình hóa luồng xử lý và thiết kế toàn bộ hệ thống giao diện cho ứng dụng AdoptKids.

Nguồn dữ liệu sử dụng trong nghiên cứu bao gồm các tài liệu kỹ thuật về thiết kế phần mềm, thông số phông chữ Roboto từ Google và các tư liệu truyền thông xã hội từ tổ chức bảo trợ trẻ em quốc tế.

Thiết kế và triển khai

Hệ thống ứng dụng AdoptKids được cấu trúc dựa trên việc phân định rõ ràng các tác nhân và quy trình nghiệp vụ:

Nhóm tác nhân Thành phần Trách nhiệm và quyền hạn trong hệ thống
Người dùng Khách hàng Đăng ký, đăng nhập, khôi phục mật khẩu tài khoản qua OTP; tra cứu thông tin trẻ và trung tâm bảo trợ; lập hồ sơ đăng ký nhận nuôi; thực hiện quyên góp tài chính; tương tác tư vấn trực tuyến.
Hệ thống khác Google Pay, Napas, Cổng thanh toán quốc tế Tiếp nhận yêu cầu thanh toán, xác thực thông tin tài khoản/thẻ và thực hiện giao dịch chuyển tiền quyên góp vào quỹ.

Hệ thống biểu đồ hoạt động (Activity Diagram) được thiết kế chi tiết cho 5 luồng nghiệp vụ cốt lõi:

  1. Xác thực người dùng: Ứng dụng kiểm tra token đăng nhập sẵn có; nếu hợp lệ sẽ chuyển trực tiếp vào màn hình chính, nếu không sẽ chuyển hướng sang màn hình đăng nhập hoặc đăng ký kèm xác thực số điện thoại bằng mã OTP.
  2. Tìm kiếm trung tâm bảo trợ: Cho phép người dùng nhập từ khóa tìm kiếm hoặc duyệt danh sách trung tâm liên kết, tra cứu hồ sơ trẻ em do trung tâm đăng tải và lưu các trung tâm quan tâm.
  3. Đăng ký nhận nuôi: Bắt đầu bằng việc lựa chọn trẻ, xác nhận chấp thuận điều khoản xử lý hồ sơ, nhập thông tin cá nhân cần thiết; hệ thống kiểm tra tính đầy đủ của dữ liệu trước khi chuyển tiếp lên máy chủ xử lý hoặc đưa ra thông báo lỗi chi tiết.
  4. Thanh toán quyên góp: Người dùng chọn chương trình tài trợ, nhập số tiền đóng góp, lựa chọn nguồn tiền (nội địa/quốc tế); hệ thống kết nối cổng thanh toán để xác thực và xuất hóa đơn giao dịch thành công.
  5. Kiểm tra trạng thái: Cung cấp giao diện theo dõi tiến độ xét duyệt đơn nhận nuôi và tra cứu chi tiết lịch sử giao dịch quyên góp.

Về mặt công nghệ thiết kế, tác giả khai thác nền tảng Figma dựa trên các đặc tính: hỗ trợ làm việc cộng tác thời gian thực, lưu trữ dữ liệu tập trung trên máy chủ đám mây, sử dụng đồ họa vector cho phép xuất file đa định dạng (SVG, PNG, JPG), quản lý đồng thời nhiều bảng vẽ (artboards) trên một màn hình và hỗ trợ phản hồi trực tiếp qua tính năng comment.

Quy chuẩn giao diện (UI Guideline) của ứng dụng AdoptKids xác lập:

  • Phông chữ: Sử dụng phông chữ Roboto của Google cho toàn bộ văn bản hiển thị.
  • Bảng màu: Thiết lập hệ màu sắc chủ đạo mang tính biểu trưng cho thương hiệu AdoptKids.
  • Thành phần giao diện: Chuẩn hóa thiết kế biểu trưng (Logo App), thanh điều hướng dưới đáy (Tab Bar) và hệ thống trường nhập liệu văn bản (Input Fields).

Nội dung chính theo từng chương

Chương 1. Tổng quan đề tài

Chương 1 giới thiệu hoàn cảnh ra đời của đề tài, nêu bật tính cấp thiết của việc xây dựng công cụ số hỗ trợ trẻ em thiếu gia đình dựa trên tuyên ngôn của ông Hermann Gmeiner. Tác giả xác định đối tượng nghiên cứu là UI/UX trên thiết bị di động và công cụ thiết kế Figma, đồng thời phác thảo hai nhánh phương pháp nghiên cứu chính: nghiên cứu cơ sở lý thuyết và thực nghiệm thiết kế giao diện, kịch bản người dùng cho ứng dụng AdoptKids.

Chương 2. Tổng quan UI, UX

Chương này đi sâu vào việc làm rõ các khái niệm lý luận chuyên ngành:

  • Định nghĩa chi tiết vai trò của UI trong việc dẫn dắt thị giác và tối ưu hóa thời gian thực hiện tác vụ của người dùng.
  • Phân tích bản chất của UX thông qua việc đánh giá thói quen, mức độ tiện ích và sự hài lòng của người dùng khi vận hành hệ thống.
  • So sánh nhiệm vụ chuyên môn: UX Designer tập trung lên kế hoạch hành vi tương tác và các bước thao tác; UI Designer chịu trách nhiệm thiết kế hình thức hiển thị trực quan cho từng bước đó.
  • Mô tả chi tiết tiến trình 4 giai đoạn của thiết kế UI: Sketch (phác thảo ý tưởng nhanh) $\rightarrow$ Wireframe (mô tả chức năng, cấu trúc tương tác) $\rightarrow$ Mockup (bổ sung yếu tố đồ họa hoàn thiện) $\rightarrow$ Prototype (tạo bản mẫu tương tác thực tế với dữ liệu giả lập).

Chương 3. Phân tích thiết kế hệ thống

Chương 3 trình bày các kết quả phân tích yêu cầu kỹ thuật và cấu trúc logic:

  • Phân loại tác nhân hệ thống gồm Khách hàng và các hệ thống thanh toán điện tử trung gian (Napas, Google Pay, Thanh toán quốc tế).
  • Xây dựng sơ đồ Use-case tổng quát với 6 khối chức năng: Đăng ký tài khoản, Đăng nhập tài khoản, Quên mật khẩu tài khoản (xác thực OTP), Gửi thông tin đăng ký nhận nuôi, Đăng ký quyên góp bảo vệ trẻ em và Thanh toán.
  • Thiết lập 5 sơ đồ Activity Diagram chi tiết nhằm mô hình hóa chu trình xử lý dữ liệu và điều kiện rẽ nhánh cho các tác vụ: xác thực danh tính, tìm kiếm cơ sở bảo trợ, đăng ký hồ sơ nhận nuôi, thanh toán tiền quyên góp, cũng như tra cứu lịch sử giao dịch và trạng thái duyệt đơn.

Chương 4. Thiết kế giao diện ứng dụng

Đây là chương nội dung trọng tâm của đồ án, trình bày các kết quả thực nghiệm thiết kế trên Figma:

  • Giới thiệu môi trường Figma: Mô tả bố cục không gian làm việc gồm danh sách bảng vẽ bên trái, khung nhìn thiết kế trung tâm và bảng tùy chỉnh thông số (Design, Prototype, Code) bên phải.
  • Hệ thống Wireframe: Phân tích 4 kỹ thuật thiết kế wireframe và hoàn thiện 16 cụm màn hình chức năng cho AdoptKids (màn hình xác thực, tổng quan, nhận nuôi, thông báo/blog, chi tiết hồ sơ nhận nuôi, đăng ký nhận nuôi, yêu thích/tìm kiếm, quyên góp, thanh toán, hỗ trợ, quản lý đơn từ, giải đáp/chat tư vấn, thông tin tài khoản/thẻ và chi tiết giao dịch).
  • Sơ đồ luồng người dùng (User Flow): Chuẩn hóa đường đi thao tác qua 6 phân hệ:
    1. User Flow Xác thực: Khởi đầu từ Splash Screen $\rightarrow$ chuyển hướng Login Screen hoặc Register Screen kèm xác thực OTP $\rightarrow$ điều hướng về Home Screen.
    2. User Flow Tổng quát (Home Screen): Phân chia thành Header (lời chào, thông báo, slideshow blog) và Body (danh sách trẻ nổi bật, bài viết blog).
    3. User Flow Nhận nuôi (Adopt Screen): Bao gồm thanh công cụ (yêu thích, tìm kiếm, thông báo), Grid view trẻ nổi bật, List view gợi ý trẻ, Grid view chủ đề blog phổ biến và luồng mở thẻ overlay để đăng ký nhận nuôi.
    4. User Flow Quyên góp (Donation Screen): Thiết lập 3 nhánh đóng góp (quỹ bảo trợ trẻ em, quyên góp định kỳ hàng tháng, ủng hộ các trường hợp khó khăn cụ thể) kết nối đến màn hình thanh toán và xác nhận hóa đơn.
    5. User Flow Hỗ trợ (Support Screen): Tích hợp danh sách vấn đề thường gặp, theo dõi trạng thái duyệt đơn nhận nuôi, nút gọi điện thoại trực tiếp và cổng chat trực tuyến với tư vấn viên.
    6. User Flow Tài khoản (Account Screen): Điều hướng chức năng quản lý thẻ/ngân hàng nội địa - quốc tế và tra cứu chi tiết lịch sử giao dịch.
  • Thiết kế UI Guideline và Mockup: Định hình các tiêu chuẩn thiết kế về phông chữ Roboto, màu sắc nhận diện, kiểu dáng logo, thanh điều hướng Tab Bar, trường nhập liệu và hoàn thiện bộ giao diện đồ họa chi tiết (Mockup) tương ứng với từng màn hình wireframe đã lập.

Kết quả và đóng góp

Đồ án ghi nhận các kết quả cụ thể sau:

  • Đã hoàn thành bộ tài liệu phân tích thiết kế hệ thống phần mềm AdoptKids gồm 1 bảng phân loại tác nhân, 1 sơ đồ Use-case tổng quát và 5 biểu đồ hoạt động (Activity Diagram) thể hiện đầy đủ các luồng nghiệp vụ nhận nuôi và tài trợ.
  • Thiết lập hệ thống thiết kế giao diện hoàn chỉnh trên công cụ Figma với 16 nhóm bản vẽ Wireframe, 6 biểu đồ User Flow chi tiết, 1 bộ tài liệu UI Guideline chuẩn hóa (sử dụng font Roboto và hệ thống thành phần giao diện mẫu) cùng hệ thống UI Mockup hoàn chỉnh ở mức độ trực quan cao.
  • Đề xuất các giải pháp kỹ thuật cụ thể cho hệ thống:
    • Ứng dụng quy trình xác thực người dùng qua số điện thoại kết hợp mã bảo mật OTP.
    • Tích hợp đa dạng cổng thanh toán trực tuyến (Napas, Google Pay, thẻ quốc tế) hỗ trợ quyên góp linh hoạt theo từng lần hoặc định kỳ hàng tháng.
    • Xây dựng cơ chế hỗ trợ người dùng đa kênh, kết hợp giữa cơ sở dữ liệu hỏi đáp (FAQ), cổng tra cứu tiến độ hồ sơ, hệ thống thoại và kênh chat trực tuyến với tư vấn viên.
  • Về mặt đóng góp, đề tài cung cấp một mô hình thiết kế giao diện ứng dụng di động hoàn chỉnh cho lĩnh vực phúc lợi xã hội và bảo trợ trẻ em, đồng thời minh họa quy trình chuẩn mực trong việc ứng dụng Figma để phân tích và hiện thực hóa UI/UX từ giai đoạn ý tưởng đến bản mẫu thiết kế.

Hạn chế và hướng nghiên cứu tiếp

  • Hạn chế: Phạm vi của đồ án dừng lại ở mức độ phân tích hệ thống, thiết kế giao diện người dùng (UI), xây dựng luồng trải nghiệm (UX, User Flow) và thiết kế bản mẫu (Mockup) trên phần mềm Figma; chưa triển khai viết mã nguồn (coding) ứng dụng thực tế trên các nền tảng hệ điều hành di động (như Android hay iOS), chưa xây dựng hệ thống cơ sở dữ liệu vật lý phía máy chủ (backend) và chưa kết nối API thực với các cổng thanh toán.
  • Hướng phát triển tiếp theo: Tác giả đề xuất định hướng tiếp tục triển khai lập trình ứng dụng trên các nền tảng di động thực tế, xây dựng kiến trúc máy chủ và cơ sở dữ liệu, tích hợp các giao diện lập trình ứng dụng (API) xác thực và thanh toán trực tuyến, đồng thời tiến hành các bài kiểm thử người dùng thực tế (User Testing) để tinh chỉnh trải nghiệm tương tác.

Giá trị tham khảo

Đồ án có giá trị tham khảo chuyên môn đối với:

  • Đối tượng: Sinh viên, học viên ngành Công nghệ thông tin, Kỹ thuật phần mềm, Chuyên ngành Lập trình ứng dụng di động và game, cũng như các chuyên viên thiết kế UI/UX mới tiếp cận quy trình thiết kế sản phẩm số.
  • Nội dung tham khảo trọng tâm:
    • Chương 3: Phương pháp mô hình hóa nghiệp vụ tiếp nhận nhận nuôi và quyên góp tài chính thông qua Use-case và Activity Diagram.
    • Chương 4: Quy trình từng bước chuyển đổi từ phân tích chức năng sang Wireframe, User Flow, xây dựng UI Guideline và hoàn thiện Mockup trên công cụ Figma.

Câu hỏi thường gặp

1. Ứng dụng AdoptKids trong đồ án được thiết kế nhằm mục đích gì và lấy cảm hứng từ đâu?
Ứng dụng AdoptKids được thiết kế nhằm hỗ trợ các hệ thống phúc lợi trẻ em và kết nối trẻ em được chăm sóc nuôi dưỡng với các gia đình nhận nuôi hoặc các nhà hảo tâm. Ý tưởng đề tài được truyền cảm hứng từ câu nói của ông Hermann Gmeiner – Người sáng lập Làng trẻ em SOS Quốc tế về sự thiếu vắng mái ấm gia đình của trẻ em.

2. Hệ thống AdoptKids tương tác với những nhóm tác nhân nào?
Hệ thống xác định hai nhóm tác nhân: nhóm Người dùng (Khách hàng thực hiện các thao tác đăng ký, nhận nuôi, quyên góp, nhận tư vấn) và nhóm Hệ thống khác (bao gồm hệ thống Google Pay, Napas và các cổng Thanh toán quốc tế để xác thực giao dịch tài chính).

3. Quy trình làm việc của một nhà thiết kế UI được tác giả phân định qua những bước nào?
Quy trình thiết kế UI trong đồ án gồm 4 bước cơ bản: Phác thảo (Sketch) $\rightarrow$ Khung xương (Wireframe) $\rightarrow$ Bản mẫu đồ họa (Mockup) $\rightarrow$ Bản mẫu tương tác (Prototype).

4. Biểu đồ hoạt động Đăng ký nhận nuôi trong ứng dụng yêu cầu những thao tác nghiệp vụ nào?
Quy trình gồm các bước: người dùng chọn một trẻ cần nhận nuôi $\rightarrow$ chấp nhận các điều khoản về việc xử lý hồ sơ $\rightarrow$ điền thông tin cá nhân cần thiết $\rightarrow$ hệ thống kiểm tra tính hợp lệ của thông tin (nếu đúng và đủ sẽ gửi lên máy chủ để duyệt hồ sơ, nếu thiếu hoặc sai sẽ hiển thị thông báo lỗi chi tiết cho người dùng).

5. Bộ UI Guideline của ứng dụng AdoptKids quy định sử dụng phông chữ nào?
Bộ UI Guideline của ứng dụng quy định sử dụng phông chữ Roboto của Google làm kiểu chữ tiêu chuẩn cho toàn bộ các thành phần hiển thị trên giao diện.

Kết luận

Đồ án tốt nghiệp của sinh viên Tô Đình Đức Anh đã hoàn thành toàn diện nhiệm vụ phân tích thiết kế hệ thống và xây dựng giao diện ứng dụng di động AdoptKids phục vụ công tác phúc lợi trẻ em. Công trình đã chuẩn hóa quy trình thiết kế UI/UX từ việc mô hình hóa biểu đồ hoạt động, phác thảo Wireframe, thiết lập 6 sơ đồ User Flow cho đến xây dựng bộ UI Guideline và UI Mockup hoàn chỉnh trên nền tảng Figma. Kết quả nghiên cứu cung cấp một tài liệu tham khảo có cấu trúc rõ ràng về phương pháp thiết kế sản phẩm di động chuyên biệt cho các hoạt động kết nối xã hội và thiện nguyện.