Design Better Forms
This post hasn't been updated for 3 years
Chúng ta đều biết tầm quan trọng của form trong 1 trang web. Tuy nhiên, việc thiết kế form thế nào cho hiệu quả nhất, giúp người dùng không khó khăn trong quá trình input vẫn là 1 vấn đề mà nhiều người mắc phải. Bài viết này tập trung vào những điều nên và không nên làm khi design form để tối ưu hóa chúng. Tất nhiên đây chỉ là những hướng dẫn chung và luôn có ngoại lệ cho vài trường hợp.
Form chỉ nên có 1 cột
Label để ở phía trên input
Nhóm label với những input tương ứng
Nhóm label và input tương ứng của chúng lại với nhau và nhớ để khoảng cách hợp lý giữa các fields để user không bối rối
Tránh viết hoa toàn bộ label
Viết hoa làm chữ khó đọc.
Nếu có ít hơn 6 options thì không nên dùng thẻ select
Hạn chế dùng placeholder thay cho label
Các options trong checkboxes và radios nên để cùng 1 cột
Mô tả đúng chức năng cho button
Cần mô tả đúng hành động gọi đến action nào ở button submit
Hiển thị lỗi ở cùng hàng
Chỉ validate khi user điền xong field đó (trừ khi điều này giúp gợi ý user trong quá trình input )
Đừng ẩn những gợi ý trợ giúp
Nhấn mạnh action chính
Chiều dài của field vừa đủ input
Chú thích các field ko bắt buộc nhập
User thường không hiểu hàm ý của những dấu (*), vì vậy tốt nhất nên viết rõ ra
Nhóm những input liên quan lại với nhau
Điền 1 form quá dài làm dễ làm user nản, vì vậy việc nhóm các input có liên quan lại có tác dụng hơn hẳn.
Tham khảo
Bài viết được dịch từ tác giả Andrew Coyle
All Rights Reserved