Thiết kế UX cho form

Một thực trạng rất tồi tệ của các thanh niên lập trình hiện nay là kỹ năng UI/UX không có, hoặc có nhưng rất cùi bắp. Bản thân mình đã dùng thử một vài phần mềm do các bạn lập trình tự làm ra từ A-Z, kết quả là chỉ muốn remove cái app ngay lập tức. Và để tránh những cảm xúc tiêu cực đó ảnh hưởng tới khách hàng thì chúng ta nên cố gắng thường xuyên update các kỹ năng liên quan tới UI/UX càng nhiều càng tốt.

Trong bài viết này mình có sưu tập được một vài mẫu thiết kế form rất hay ho, mời các bạn tham khảo

1. Form nên thiết kế 1 cột

Các bạn chỉ nên thiết kế form dạng 1 cột từ trên xuống dưới, tránh trải dài các thông tin ra làm 2 cột vì ảnh hưởng đến sự tập trung của khách hàng.

Thiết kế UI/UX cho form

Form nên thiết kế 1 cột

Thực tế là lần đầu tham khảo mẫu này mình cũng không đồng tình lắm vì thực tếcó những form có tới hàng chục trường nhập liệu, nếu để một cột thì thực sự form đó rất dài. Tuy nhiên sau khi tham khảo thêm mẫu thiết kế của google, mình đã thay đổi quan điểm và có 1 vài hướng xử lý như sau

  1. Form dài quá thì nên để dạng wizard (nhiều step), người dùng sẽ ấn next để chuyển sang màn hình tiếp theo. Điều này giúp người dùng đỡ sốc khi thấy quá nhiều trường thông tin
  2. Nên bố trí thêm 1 vài hình ảnh để giảm tính đơn điệu của form (Tham khảo mẫu thiết kế của google bên dưới)
Thiết kế UI/UX cho form

Mẫu thiết kế hết sức đơn giản của google

2.Label của form nên để ở phía trên form-control

Chúng ta nên để label của các form-control ở phía trên, điều này giúp hiển thị tốt hơn ở trên mobile và tỉ lệ người dùng nhập thông tin sẽ cao hơn là thiết kế label ở bên trái. Tuy nhiên điều này cũng cần cân nhắc khi form có quá nhiều control, bạn cũng có thể cân nhắc để bên trái.

Thiết kế UI/UX cho form

Các label nên để ở phía trên

3.Group label và form-control

Chúng ta không nên để margin giữa label và form-control đều nhau như hình bên phải. Hãy để như hình bên trái, ở đây chúng ta sẽ tách biệt được các ô nhập liệu khác nhau, nhìn form cũng thoáng hơn nhiều

Thiết kế UI/UX cho form

4. Tránh viết hoa LABEL

Các bạn tránh viết hoa label nhé, vì như vậy rất khó nhìn

Thiết kế UI/UX cho form

Viết hoa label khiến người dùng khó đọc hơn

5.Hiển thị tất cả các tùy chọn nếu có ít hơn 6

Lợi ích của thiết kế này quá rõ ràng

  • Giúp người dùng nhận được thông tin nhanh hơn, rõ ràng hơn vì đã show hết ra rồi
  • Giảm thiểu được 1 thao tác click, vuốt(trên mobile) khi nhập thông tin

Thiết kế UI/UX cho form

6.Không sử dụng placeholder thay cho label

Việc sử dụng placeholder thay cho label trông có vẻ như tiết kiệm diện tích, nhưng nó lại gây rắc rối rất lớn là sau khi nhập xong thông tin thì không biết đằng nào mà sửa

Thiết kế UI/UX cho form

7. Radio button, checkbox nên để theo từng dòng

Để radio button, checkbox theo từng dòng khiến người dùng dễ theo dõi hơn

Thiết kế UI/UX cho form

8. các nút CTA nên được mô tả rõ ràng

Bạn nên mô tả rõ ràng nút submit được dùng để làm gì như đăng ký, đăng nhập, gửi email thay vì chỉ đơn thuần là submit

9. Không liệt kê lỗi ở đầu hay cuối form

Chúng ta nên hiện lỗi ngay dưới ô nhập liệu, điều này giúp người dùng dễ theo dõi hơn là tổng hợp tập trung tại đầu hay cuối form

Thiết kế UI/UX cho form

10. Validate ngay khi nhập liệu

Đây không phải yếu tố bắt buộc, tuy nhiên sẽ tốt hơn cho người dùng nếu bạn validate được lỗi ngay khi khách hàng nhập liệu (tức là chưa chuyển sang form nhập liệu kế tiếp đã validate được rồi)

Thiết kế UI/UX cho form

11. Không ẩn những đoạn text helper hữu ích

Trong 2 form bên dưới, bạn thấy form nào đem lại thông tin rõ ràng hơn cho người dùng ? Một cái show ra luôn, còn một cái phải rê chuột qua(hoặc click) thì mới hiển thị

Thiết kế UI/UX cho form

12. Làm nổi bật nút CTA

Không được để nhiều nút có cùng 1 style trong 1 form, hãy làm nổi bật nút chức năng càng nhiều càng tốt. Điều này sẽ thu hút sự chú ý của người dùng

Thiết kế UI/UX cho form

13. Chiều dài form-control nên tỉ lệ thuận với chiều dài nội dung

Thiết kế UI/UX cho form

14. Đừng dùng dấu * nữa

Truyền thống từ xa xưa mà các cụ lập trình viên để lại là sử dụng dấu * đánh dấu làm trường bắt buộc, tuy nhiên đã đến lúc nó cần phải thay đổi . Hãy ẩn * đi và hiển thị trường tùy chọn (là một small text có #ccc chẳng hạn)

Thiết kế UI/UX cho form

15. Nhóm các trường thông tin liên quan lại với nhau

Nếu form phức tạp gồm quá nhiều trường thông tin, chúng ta nên tìm cách gom chúng lại để người dùng theo dõi dễ hơn

Thiết kế UI/UX cho form

Kết

Từ nay các bạn  đừng trách người dùng lười nhập thông tin nữa nhé, hãy làm nó đẹp lên. Đẹp trai thì mới có nhiều đứa yêu, ok !!!