Trong bối cảnh hầu hết người dùng truy cập Internet chủ yếu qua thiết bị di động, thiết kế UI theo hướng Mobile First đảm bảo giao diện thân thiện và tối ưu nhất cho người dùng. Điều này không chỉ giúp nâng cao trải nghiệm mà còn giảm tỷ lệ thoát trang. Với Mobile First, nhóm tập trung vào các yếu tố cần thiết và loại bỏ các chi tiết không cần thiết, đảm bảo giao diện trực quan và dễ thao tác trên màn hình nhỏ.

Trong môn học DOM201, nhóm Teen Xì Trum đã triển khai phương pháp Mobile First với các bước thiết kế và tối ưu sau:

• Thiết kế giao diện dễ thao tác trên màn hình nhỏ: Nhóm tập trung vào việc sắp xếp bố cục sao cho đơn giản và dễ sử dụng trên các thiết bị di động. Các yếu tố như menu, nút bấm được thiết kế với kích thước phù hợp và đặt ở vị trí thuận tiện để người dùng dễ dàng thao tác bằng ngón tay.

• Tối ưu hóa hình ảnh và nội dung để tăng tốc độ tải: Đối với thiết bị di động, tốc độ tải trang là yếu tố quan trọng. Nhóm đã sử dụng Figma để tối ưu hóa kích thước hình ảnh và nội dung, giúp trang tải nhanh hơn, nâng cao trải nghiệm người dùng.
• Lựa chọn màu sắc và font chữ rõ ràng: Trên các màn hình nhỏ, việc sử dụng màu sắc và kiểu chữ dễ đọc là rất quan trọng. Nhóm đã chọn các tông màu tương phản cao và font chữ đơn giản, dễ đọc để người dùng dễ dàng nhận diện và sử dụng ứng dụng.

• Thử nghiệm UI qua nhiều thiết bị di động khác nhau: Nhóm đã tiến hành kiểm tra giao diện trên các loại thiết bị khác nhau để đảm bảo tính nhất quán và thân thiện trên mọi kích thước màn hình. Figma hỗ trợ tốt quá trình này bằng cách cho phép nhóm tạo và xem trước giao diện trên các kích thước màn hình khác nhau.

Trong quá trình tối ưu UI Mobile First, Cẩm Tiên (nhóm trưởng) chia sẻ: “Nhóm Teen Xì Trum gặp không ít khó khăn từ việc xác định thứ tự ưu tiên các yếu tố giao diện đến việc đảm bảo tính thẩm mỹ mà vẫn phải phù hợp với trải nghiệm di động”. Vì vậy nhóm đã rút ra được những kinh nghiệm quý báu từ quá trình này bao gồm:

• Ưu tiên các yếu tố quan trọng: Thực hiện Mobile First đòi hỏi nhóm phải quyết định yếu tố nào cần xuất hiện đầu tiên và loại bỏ những chi tiết không cần thiết để tránh gây rối mắt cho người dùng.
• Kiểm tra tính tương thích của UI trên nhiều loại màn hình: Mặc dù nhóm đã thiết kế theo hướng Mobile First, việc thử nghiệm UI trên các loại màn hình và thiết bị khác nhau cũng là một phần quan trọng để đảm bảo giao diện nhất quán và hiệu quả.

Dự án tối ưu UI Mobile First của nhóm Teen Xì Trum trong môn học DOM201 đã giúp các thành viên rút ra nhiều bài học:

• Thiết kế Mobile First tăng hiệu quả tối ưu UI: Với việc ưu tiên thiết bị di động, nhóm dễ dàng tập trung vào các yếu tố cần thiết, giúp UI trở nên rõ ràng và thân thiện hơn.
• Công cụ Figma hỗ trợ tốt cho quá trình thiết kế Mobile First: Figma cung cấp các công cụ để nhóm dễ dàng kiểm tra và điều chỉnh thiết kế trên nhiều kích thước màn hình, nâng cao hiệu suất làm việc và giảm thiểu lỗi thiết kế.

Qua dự án tối ưu UI Mobile First trên Figma trong môn học DOM201, nhóm Teen Xì Trum lớp DM20104 không chỉ đạt được kết quả tốt trong thiết kế mà còn học hỏi được nhiều kinh nghiệm thực tế. Dự án không chỉ giúp các thành viên cải thiện kỹ năng thiết kế UI theo hướng Mobile First mà còn giúp hiểu rõ hơn về tầm quan trọng của giao diện thân thiện và tối ưu hóa cho di động. Những kiến thức và kinh nghiệm từ dự án sẽ là nền tảng vững chắc cho sinh viên “nhà Ong” phát triển trong học tập và công việc trong tương lai.

Giảng viên Nguyễn Minh Trí
Bộ môn Thiết kế đồ họa
FPT Polytechnic Cần Thơ