Biểu mẫu sao cho dễ điền

Form là điểm dễ rò khách nhất trong toàn bộ hành trình trên website. Khách đã đọc tới, đã quan tâm, rồi gặp một biểu mẫu dài hoặc rối là rời đi mà không cần lý do. Sinh Vũ tiếp cận form từ góc luồng chuyển đổi: mọi ma sát thừa đều là chỗ rò, và nhiệm vụ thiết kế là bịt những chỗ đó lại bằng cách đơn giản hơn, không phải bằng cách thêm vào.

Hỏi ít hơn là nguyên tắc gốc

Trước khi bàn về bố cục hay màu sắc, câu hỏi đầu tiên cần trả lời là: trường này có thật sự cần cho bước hiện tại không? Mỗi trường thêm vào là thêm một quyết định nhỏ khách phải làm, và tổng những quyết định nhỏ đó tạo ra cảm giác nặng nề. Sinh Vũ chỉ thu thập thông tin đúng bước: form liên hệ đầu tiên chỉ cần biết đủ để bắt đầu cuộc trò chuyện, phần còn lại để dành cho các bước sau khi khách đã cam kết hơn.

Câu hỏi kiểm tra nhanh cho từng trường: nếu thiếu thông tin này, Anh / Chị có thể tiếp tục xử lý yêu cầu không? Nếu có thể, đừng hỏi ngay.

Bố cục một cột và vị trí nhãn

Bố cục một cột giúp khách đi theo một mạch duy nhất từ trên xuống dưới mà không phải quyết định nên nhìn sang đâu. Nhiều cột làm gián đoạn mạch đó và dễ gây nhầm lẫn về thứ tự điền, đặc biệt trên điện thoại. Ngoại lệ duy nhất có lý là những trường ngắn và gắn chặt với nhau như Tỉnh và Thành phố có thể cùng một hàng.

Nhãn (label) phải đặt ngay trên ô, không cách xa, không nằm giữa hai ô. Khoảng cách mơ hồ giữa nhãn và ô khiến khách không chắc nhãn này mô tả trường nào. Ngoài ra, nhãn cần gắn thẻ label đúng cách trong mã để trình đọc màn hình đọc được, đây là yêu cầu cơ bản về khả năng tiếp cận.

Gom nhóm và tạo cảm giác tiến độ

Với form dài, vấn đề không chỉ là số lượng trường mà là cảm giác của khách khi nhìn vào. Gom các trường liên quan thành từng khối riêng (ví dụ: thông tin liên hệ một khối, thông tin dự án một khối) giúp khách tập trung từng phần thay vì đối mặt với một danh sách không có cấu trúc. Khi chia thành nhiều bước, chỉ báo tiến độ đơn giản như "Bước 2 trong 3" cho khách biết mình đang ở đâu và còn bao nhiêu nữa, điều này giảm đáng kể sự lo ngại về độ dài.

Báo lỗi đúng lúc đúng chỗ

Dồn toàn bộ thông báo lỗi tới lúc khách bấm gửi là cách tệ nhất để xử lý lỗi form. Khách vừa phải cuộn lại tìm từng trường sai, vừa mất đà điền. Báo lỗi nên xuất hiện ngay tại trường vừa rời đi, và quan trọng là phải nói cách sửa, không chỉ nói sai.

Ví dụ: thay vì "Số điện thoại không hợp lệ", hãy viết "Số điện thoại cần gồm 10 chữ số, bắt đầu bằng 0". Thêm một câu là giảm đáng kể lần thử lại của khách. Một lưu ý kỹ thuật: không chỉ dùng màu đỏ để đánh dấu lỗi vì người khó phân biệt màu sẽ không đọc được, luôn kèm chữ giải thích.

Lỗi thường gặp trong thiết kế form

• Dùng chữ gợi ý mờ trong ô làm nhãn thay thế: chữ này biến mất khi khách gõ, khiến họ quên ô đang hỏi gì.
• Hỏi trường nhạy cảm như số điện thoại hay địa chỉ mà không giải thích vì sao cần và định dạng mong đợi là gì.
• Bố cục nhiều cột hoặc nhãn đặt lửng giữa hai ô, gây mơ hồ trường nào thuộc nhãn nào.
• Đánh dấu lỗi bằng màu mà không kèm chữ giải thích, người khó phân biệt màu không đọc được.
• Giữ lại các trường "tiện hỏi luôn" không phục vụ bước hiện tại, làm nặng form không cần thiết.

Giảm số phỏng đoán khách phải làm, cung cấp định dạng mẫu và giá trị mặc định hợp lý để khách bớt phải nghĩ.

Nielsen Norman Group, 4 Principles to Reduce Cognitive Load in Forms

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

Form là cây cầu giữa sự quan tâm và hành động. Khách bước lên cầu vì họ muốn đi qua, không phải vì họ thích đi bộ. Nhiệm vụ của cây cầu là đưa người sang phía bên kia nhanh nhất có thể, không phải bày thêm chướng ngại vật giữa đường. Sinh Vũ thiết kế cửa yêu cầu theo tinh thần này: dẫn khách qua từng bước rõ ràng thay vì đặt một form dài ngay từ đầu, vì khách đang trong giai đoạn cân nhắc và cần thêm lý do để tiếp tục, không phải thêm lý do để dừng lại.