Làm thế nào để thiết kế biểu mẫu (Form) tốt hơn?

Trong bài viết này, TQ sẽ gợi ý cho bạn vài lời khuyên để cải tạo thiết kế biểu mẫu (form) trên website của mình và những sai lầm mà bạn nên tránh.

Cho dù là một mẫu đăng ký, mẫu form nhiều trang hay giao diện nhập dữ liệu đơn giản, biểu mẫu (fomr) 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ố. Hãy cẩn trọng khi làm bạn nhé, nó ảnh hưởng đến lượng tương tác, đến hiệu quả của chiến dịch của bạn đấy.

Biểu mẫu nên có một cột

Nhiều cột sẽ chỉ gián đoạn đà đọc của người dùng.

Làm thế nào để thiết kế biểu mẫu (Form) tốt hơn?

Nhãn căn chỉnh trên cùng

Theo khảo sát, người dùng hoàn thành các biểu mẫu được gắn nhãn (label) ở trên đầu lớn hơn nhiều 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 được dịch tốt trên thiết bị di động.

Nhóm nhãn với hộp nhập dữ liệu

Hãy trình bày nhãn và hộp nhập dữ liệu gần nhau. Đồng thời đảm bảo có đủ chiều cao giữa các trường để người dùng không bị nhầm lẫn.

Làm thế nào để thiết kế biểu mẫu (Form) tốt hơn?

Tránh viết hoa mọi nhãn

Khi tất cả các nhãn đều in hoa sẽ gây khó đọc.

Làm thế nào để thiết kế biểu mẫu (Form) tốt hơn?

Hiển thị tất cả các tùy chọn nếu lựa chọn ít hơn 6

Việc đặt các tùy chọn trong menu thả xuống của trình chọn yêu cầu hai lần nhấp và ẩn các tùy chọn sẽ khiến người dùng lười nhấp.

Tránh sử dụng label nằm trong hộp nhập

Sử dụng label trong hộp nhập có thể tối ưu hóa không gian hộp, nhưng cũng gây ra một số khả năng khó sử dụng cho người dùng.

Làm thế nào để thiết kế biểu mẫu (Form) tốt hơn?

Đặt các hộp check dưới nhau để tăng khả năng đọc

Đặt hộp kiểm bên dưới mỗi hộp kiểm khác sẽ giúp tăng khả năng đọc lên nhiều lần.

Làm thế nào để thiết kế biểu mẫu (Form) tốt hơn?

Đặt CTA mô tả

Hãy chú trọng lời kêu họi hành động, và đảm bảo nó nêu rõ mục đích bạn nhé.

Làm thế nào để thiết kế biểu mẫu (Form) tốt hơn?

Chỉ định lỗi nội tuyến

Hiển thị cho người dùng nơi xảy ra lỗi và cung cấp lý do để người dùng có thể “biết mà sửa” lại câu đáp án điền của mình bạn nhé.

Làm thế nào để thiết kế biểu mẫu (Form) tốt hơn?

Sử dụng xác thực sau khi người dùng điền nội dung vào trường

Không sử dụng xác thực khi người dùng đang nhập, trừ khi nó giúp họ như trong trường hợp tạo mật khẩu, tên người dùng.

Làm thế nào để thiết kế biểu mẫu (Form) tốt hơn?

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

Hãy hiển thị văn bản trợ giúp cơ bản bất cứ khi nào có thể. Còn đố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 đầu vào trong trạng thái hiển thị của nó.

Làm thế nào để thiết kế biểu mẫu (Form) tốt hơn?

Phân biệt các hành động chính với các hành động phụ

Làm thế nào để thiết kế biểu mẫu (Form) tốt hơn?

Sử dụng độ dài trường hợp lý

Độ dài của trường nên phù hợp với độ dài câu trả lời. Bạn có thể 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,…

Làm thế nào để thiết kế biểu mẫu (Form) tốt hơn?

Không phải lúc nào người dùng của bạn cũng biết điều gì được ngụ ý bởi điểm đánh dấu trường bắt buộc (*). Thay vào đó, tốt hơn là biểu thị các trường tùy chọn.

Hãy làm cho nó thú vị

Cuối cùng cũng là quan trọng nhất, “thời gian là vàng”, sẽ không ai muốn điền vào một biểu mẫu tiêu tốn quá nhiều thời gian và quá khó hiểu. Bạn hãy cố gắng làm cho nó đơn giản và tiêu tốn ít thời gian của người dùng nhất có thể nhé.

Ảnh: designervn

Làm thế nào để thiết kế biểu mẫu (Form) tốt hơn?
5 (100%) 2 votes
Bạn thích bài viết này ?Share on Facebook
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.