Tuyệt chiêu giúp thiết kế form hiệu quả

Những lỗi thường gặp của các nhà thiết kế và cách khắc phục.

Cho dù là signup flow (luồng đăng ký), multi-view stepper (trình xem đa điểm) hay monotonous data entry interface (giao diện nhập dữ liệu đơn), thì form luôn là một trong những thành phần quan trọng nhất của thiết kế sản phẩm kỹ thuật số. 

Bài viết này sẽ chia sẻ những cách phổ biến và những điều nên tránh khi thiết kế form. Hãy nhớ rằng đây là những hướng dẫn chung và luôn có ngoại lệ cho bất kỳ quy tắc nào.


Form phải nằm cùng một cột

Nhiều cột làm gián đoạn luồng nhập liệu của người dùng

Căn chỉnh nhãn nằm trên cùng

Người dùng hoàn thành các form được gắn nhãn trên đầu nhanh hơn so với các nhãn được căn chỉnh bên trái. Các nhãn được căn chỉnh trên đầu cũng tối ưu trên mobile. Tuy nhiên, khi nhập liệu data-set với tùy chỉnh biến đổi, bạn nên cân nhắc sử dụng nhãn trái vì các nhãn kiểu này dễ scan hơn, có độ cao giảm, và gợi sự cân nhắc nhiều hơn so với nhãn trên đầu

Nhóm nhãn với input của chúng

Khi nhóm nhãn và input gần nhau cần đảm bảo có đủ chiều cao giữa các trường nhập liệu để người dùng không bị nhầm lẫn

Tránh viết hoa toàn bộ

Viết hoa toàn bộ sẽ khó đọc và khó quét hơn

Hiển thị tất cả các tùy chọn dưới 6

Việc đặt các tùy chọn trong drop-down (bộ chọn thả xuống) cần click hai lần. 
Sử dụng bộ chọn input nếu có hơn 5 tùy chọn. 
Kết hợp tìm kiếm theo ngữ cảnh trong drop-down nếu có hơn 25 tùy chọn

Tránh dùng placeholder text (văn bản giữ chỗ) làm nhãn


Việc dùng placeholder text để tối ưu hóa không gian vô cùng hấp dẫn.
Nhưng nó cũng gây ra nhiều vấn đề về khả năng sử dụng

Đặt các checkbox (và radio) từ trên xuống

Đặt checkbox từ trên xuống dưới để dễ dàng quét

Đặt kêu gọi hành động (CTA) rõ ràng

Kêu gọi hành động phải nêu rõ mục đích

Hiển thị lỗi nội tuyến

Hiển thị cho người dùng thấy nơi xảy ra lỗi và lý do

Sử dụng xác thực nội tuyến sau khi người dùng điền vào trường nhập liệu

Không sử dụng xác thực nội tuyến khi người dùng đang nhập liệu,
trừ khi nó hữu ích cho người dùng - như trong trường hợp
tạo mật khẩu, tên người dùng hoặc thư có số ký tự

Không ẩn văn bản trợ giúp cơ bản


Hiển thị văn bản trợ giúp cơ bản bất cứ khi nào có thể. 
Đối với văn bản trợ giúp phức tạp, hãy xem xét đặt nó bên cạnh input

Phân cấp hành động chính - phụ

Việc đặt đặt các tùy chọn thứ cấp ngang bằng tùy chọn chính
sẽ gây tranh chấp cho người dùng

Sử dụng độ dài trường nhập liệu phù hợp


Độ dài của trường nhập liệu phù hợp với độ dài câu trả lời. 
Sử dụng tính năng này cho các trường có
số ký tự được xác định như số điện thoại, mã zip, v.v.

Bỏ dấu * đối với các trường không bắt buộc


Người dùng không phải lúc nào hiểu ngụ ý của các trường nhập liệu được đánh dấu (*). 
Thay vào đó, hiển thị rõ các trường nhập liệu không bắt buộc sẽ tốt hơn

Nhóm các thông tin liên quan đến nhau

Các nhóm và form dài sẽ làm người dùng choáng ngợp.
Vì vậy, nhóm các thông tin liên quan đến nhau sẽ
giúp người dùng điền form nhanh và dễ dàng hơn

Đặt câu hỏi cho người dùng liệu có cần thiết?

Loại bỏ các trường nhập liệu không bắt buộc và nghĩ ra các cách khác để thu thập dữ liệu. Luôn xem xét các câu hỏi có thể được suy luận, cân nhắc hoặc loại trừ hoàn toàn không.

Hơn nữa, việc nhập dữ liệu ngày càng tự động. Hãy suy nghĩ về cách bạn có thể tận dụng các kênh xã hội, UI, SMS, email, giọng nói, nhận dạng ký tự quang học (Optical Character Recognition - OCR), định vị, vân tay, sinh trắc học, v.v.


Hãy làm form trở nên thú vị

Cuộc sống quá ngắn ngủi, không ai muốn dành thời gian để điền hết một chiếc form thật dài. Hãy trò chuyện, thân mật, từ từ tiếp cận và mang đến những điều bất ngờ. Vai trò của nhà thiết kế là thể hiện thương hiệu của công ty bằng cách gợi ra phản ứng cảm xúc. Nếu được thực hiện đúng, bạn sẽ tăng tỷ lệ hoàn thành cho form. Đảm bảo rằng bạn không vi phạm các quy tắc liệt kê ở trên để có được thiết kế tốt và mang lại trải nghiệm tích cực cho người dùng.

Biên tập: Thao Lee

Tác giả: Andrew Coyle

Hình trong bài (15)