Thiết kế SaaS: giữ nhất quán qua nhiều màn hình

SaaS (phần mềm dịch vụ qua trình duyệt) và công cụ nội bộ là loại sản phẩm nhiều màn hình lặp đi lặp lại: bảng dữ liệu, biểu mẫu, trang chi tiết, bảng điều khiển. Khi số màn lớn và còn mở rộng, thiếu ngôn ngữ chung thì mỗi tính năng mới sẽ là một mảnh ghép không vừa. Người dùng bắt đầu học lại thay vì làm việc, đội lập trình bắt đầu xử lý ngoại lệ thay vì xây dựng. Đó là lý do Sinh Vũ đặt hệ thiết kế làm nền tảng, không phải trang trí thêm vào cuối.

Hệ thiết kế là gì và tại sao SaaS cần nó

Hệ thiết kế (design system) là bộ chuẩn chung gồm ba lớp: style guide (quy tắc màu sắc, chữ, khoảng cách), thư viện component (nút, trường nhập, bảng, thẻ thông tin), và thư viện mẫu (pattern library, tức các bố cục lặp đã được chuẩn hóa). Mọi màn hình mới được lắp từ các khối đã có trong hệ, không thiết kế lại từ đầu.

Theo Nielsen Norman Group, nhất quán là một trong mười heuristic (nguyên tắc đánh giá khả dụng) quan trọng nhất: khi mọi thứ vận hành giống nhau qua các màn, người dùng tập trung hoàn thành việc thay vì học lại điều khiển. Với SaaS được dùng hàng ngày, lợi thế này tích lũy rất rõ qua thời gian.

Bốn yếu tố cần cân nhắc trước khi thiết kế

• Số màn hình và mức lặp lại: Nếu sản phẩm có nhiều bảng dữ liệu, biểu mẫu và trang chi tiết, đây là tín hiệu rõ để chuẩn hóa mẫu bố cục ngay từ đầu.
• Cấu trúc điều hướng: Sản phẩm nhiều tầng và nhiều tác vụ cần điều hướng được thiết kế có chủ ý, người dùng biết mình đang ở đâu và đi được đến đâu.
• Vai trò và phân quyền: Cùng một tính năng có thể hiển thị khác nhau tùy người dùng, quản trị viên thấy nhiều hơn nhân viên thao tác. Thiết kế cần tính điều này từ sớm, không chờ đội lập trình xử lý một mình.
• Đường mở rộng: Tính năng mới sẽ cắm vào đâu trong cấu trúc hiện tại, hệ thiết kế có hấp thụ được không hay phải phá vỡ tổng thể.

Bộc lộ dần: không phơi tất cả cùng lúc

SaaS thường có nhiều tính năng, người mới và người thạo cần hai trải nghiệm khác nhau trên cùng giao diện. Nguyên tắc bộc lộ dần (progressive disclosure) theo Nielsen Norman Group là: hé lộ độ phức tạp đúng thời điểm để tỷ lệ hoàn thành tác vụ cao hơn và gánh nặng học ít hơn so với phơi bày mọi thứ cùng lúc.

Trong thực tế, điều này nghĩa là: người mới thấy luồng cơ bản trước, các tùy chọn nâng cao nằm sau một lớp tương tác. Người thạo vẫn truy cập được nhanh, nhưng màn hình không bị ngập tính năng ngay từ đầu.

Lỗi thường gặp khi thiết kế SaaS

• Không thiết kế trạng thái rìa: Màn rỗng (chưa có dữ liệu), đang tải, lỗi kết nối, dữ liệu quá dài, những trạng thái này thường bị bỏ qua trong file thiết kế nhưng người dùng thực gặp hàng ngày.
• Phơi bày mọi tính năng cùng lúc: Người mới choáng, tỷ lệ bỏ cuộc cao, dù sản phẩm thực ra đủ mạnh.
• Hệ thiết kế quá cồng kềnh quá sớm: Dựng hệ thiết kế đầy đủ khi sản phẩm còn thăm dò là lãng phí. Cần phán đoán đúng thời điểm đầu tư.
• Thiết kế tách rời logic: Giao diện đẹp nhưng không tính đến cách dữ liệu thật chạy, đến khi lập trình thì phải chỉnh lại nhiều.

Nhất quán không có nghĩa là mọi thứ trông giống nhau. Nó có nghĩa là mọi thứ vận hành theo cùng một bộ quy tắc, để người dùng không phải đoán.

Sinh Vũ, đúc rút từ thực hành thiết kế SaaS nhiều màn hình

Góc nhìn của Sinh Vũ

Đây là vùng Sinh Vũ làm nhiều: dựng hệ thiết kế và giữ nhất quán qua nhiều màn hình. Sinh Vũ vận hành sản phẩm của chính mình trên một hệ thiết kế token hóa, nên hiểu rõ cách để mỗi màn mới kế thừa cùng bộ quy tắc thay vì thiết kế lại từ đầu.

Với dự án SaaS của Anh Chị, Sinh Vũ nhận phần luồng người dùng, thiết kế giao diện, hệ thiết kế và tài liệu bàn giao. Phần dựng backend, phân quyền kỹ thuật và tích hợp hệ thống do đội lập trình đảm nhận. Sinh Vũ phối hợp chặt với đội đó để giao diện và logic khớp nhau, không thiết kế tách rời rồi ném file qua.

Nếu Anh Chị đang ở giai đoạn MVP và chưa chắc quy mô, Sinh Vũ có thể giúp xác định thời điểm đúng để đầu tư vào hệ thiết kế, không phải cứ dựng là tốt, mà cần đúng lúc và đúng quy mô.