Form là cầu nối quan trọng nhất giữa User và Data. Một Form tệ sẽ làm mất khách hàng ngay từ bước đăng ký.
1. Top-aligned Labels (Nhãn nằm trên)
Luôn đặt nhãn (Label) ở phía trên Input.
- Lý do: Mắt người dùng di chuyển theo chiều dọc từ trên xuống dưới. Label nằm trên giúp họ quét nhanh hơn so với label nằm bên trái (phải di chuyển mắt zíc-zắc).
2. Tránh dùng Placeholder thay thế cho Label
Placeholder không phải là Label.
- Khi người dùng bắt đầu gõ, placeholder biến mất -> Họ quên mất mình đang nhập cái gì.
- Giải pháp: Dùng Floating Labels (như Material Design) nếu muốn tiết kiệm diện tích.
3. Inline Validation (Thông báo lỗi ngay lập tức)
Đừng đợi người dùng điền xong 10 dòng, nhấn "Gửi" rồi mới báo lỗi ở dòng 1.
- Thời điểm hiện lỗi: Tốt nhất là hiện lỗi khi người dùng Blur (rời khỏi) input đó, hoặc sau khi họ đã gõ một lúc.
- Clear error: Xóa lỗi ngay khi họ bắt đầu sửa lại cho đúng.
4. Input Masking & Thông minh hóa
- Số điện thoại: Tự động thêm khoảng cách.
- Email: Dự đoán các domain phổ biến (@gmail.com).
- Input type: Dùng đúng loại input (
type="number",type="email",type="tel") trên mobile để hiện đúng bàn phím.
5. Phân nhóm nội dung (Chunking)
Nếu Form có hơn 7 trường, hãy chia thành các bước (Multi-step) hoặc chia thành các section rõ ràng.
- Luật 1 cột: Trừ các trường hiển nhiên đi đôi (như Tỉnh/Thành phố), hãy dùng Layout 1 cột để giảm tải nhận thức.
6. Nút bấm rõ ràng (Primary Action)
- Phân biệt rõ nút chính (Lưu) và nút phụ (Hủy) bằng độ tương phản màu sắc.
- Vô hiệu hóa nút (Disabled) cho đến khi các trường bắt buộc đã được điền đúng (tùy trường hợp, đôi khi hiện lỗi khi click lại tốt hơn cho UX).
Kết luận
Một Form tốt là một Form "vô hình". Người dùng nên lướt qua nó một cách tự nhiên mà không cần phải dừng lại suy nghĩ quá nhiều. Hãy chú trọng vào việc giảm thiểu sai sót của người dùng ngay từ khâu thiết kế.