4 mẹo về thiết kế UX cho form bạn phải biết

39

Chúng ta thường nghĩ: forms chỉ là 1 công cụ để thu thập dữ liệu người dùng, nhưng thỉnh thoảng, đó là cách duy nhất để users kết nối với doanh nghiệp. Chúng ta có thể khiến users yêu hành động điền forms, mà không cảm thấy bị làm phiền quá nhiều cũng như hỗ trợ khách hàng xuyên suốt quy trình này.

Những giải pháp chúng tôi tìm được trên Internet đều rất chính xác về mặt lập trình, nhưng nếu đi theo những giải pháp đó có thể khiến nhiều users từ bỏ trang web vì tính trải nghiệm kém.

Nếu forms được thiết kế tốt, bạn không chỉ khiến users hài lòng mà lỗi input từ phía người dùng mà đội  ngũ backend phải giải quyết cũng ít hơn.

Dự đoán nhu cầu user

Websites và ứng dụng có những mục tiêu và cơ sở người dùng khác nhau, thậm chí mỗi phương diện lại sở hữu nhiều forms thu thập nhiều loại dữ liệu khác nhau. Một số forms quen thuộc chính là:

  • Form đăng nhập
  • Form đăng kí
  • Form hồ sơ người dùng
  • Form đăng kí newsletter
  • Forms checkout
  • Bảng khảo sát
  • Form liên hệ
  • Form bình luận
  • Form tìm kiếm

Tất cả những form này có những yêu cầu khác nhau. Khi thiết kế 1 checkout form, bạn cần đảm bảo chắc chắn về độ bảo mật, trong khi các forms bình luận thì cần thêm emojis hoặc các phương pháp khác kích thích người dùng thể hiện cảm xúc thật sự. 

Thậm chí cả những forms tương tự cũng cần phải thiết kế khác đì, vì tất cả các trang web đều có user base riêng. Trước khi nghiên cứu quy trình design, bạn nên dự đoán được những gì users cần và dựa trên đó mà thiết kế

Ví dụ: Social logins nhắm đến nhu cầu user

Form đăng nhập của Codepen gồm 3 chức năng logins social với Github ở vị trí đầu tiên. Lựa chọn này xem ra không hợp lý với hầu hết các trang web.

Nhưng với Codepen thì đây là phương án hoàn hảo, vì user base của Codepen là những lập trình viên, tất nhiên rất nhiều người trong số họ sẽ sở hữu tài khoản Github hoặc kết nối các tài khoản lập trình với nhau cùng 1 lúc.

Codepen Login Form

Think Mobile-First

Người dùng của Mobile và desktop có những nhu cầu khác nhau, nhưng câu chuyện hoàn thiện forms thực sự là 1 thách thức lớn trên màn hình di động – nơi sử dụng các cử chỉ tay thay vì bàn phím vật lý. Vì vậy, phương pháp mobile-first sẽ mang đến các forms có thể sử dụng được.

Hơn nữa, rất nhiều patterns UI của forms hoạt động tốt trên mobile cũng hoạt động tốt trên desktop.

Ví dụ: Tappable Controls

Các forms dạng mobile chất lượng cao không thể thiếu các visible controls để người dùng mobile có thể dễ dàng nhấn ngón tay lên đó.

Form đăng kí newsletter của hội thảo thiết kế web An Event Apart đã đáp ứng cách tiếp cận màn hình của mobile users bằng cách hỗ trợ 2 trường input easy-to-tap 1 button theo kích cỡ ngón tay.

Trường input text cao hơn so với bình thường để mobile users dễ nhấn vào và button lớn màu cam với icon tick sẽ khuyến khích người dùng submit form.

An Event Apart Newsletter Form on Mobile

Phiên bản desktop của trang lại sử dụng cùng 1 thiết kế form, đảm bảo sự bắt mắt và khả năng vận hành tốt trên những màn hình lớn hơn.

An Event Apart Newsletter Form on DesktopVí dụ: Input mở rộng được (input expendable)

Khi thiết kế forms cho mobile, luôn phải cân nhắc việc tối thiểu không gian sử dụng. Pattern UI design input mở rộng được khá nổi tiếng trong thời gian gần đây vì hoạt động tốt trên mobile.

Booking.com đã khai thác pattern này trong form search trên trang mobile của mình. Khi người dùng nhấn vào trường search, nó sẽ mở rộng để có nhiều không gian cho các cử chỉ hơn, và 1 danh sách lựa chọn gồm các recommendation cũng sẽ xuất hiện bên dưới.

Khi người dùng nhấn ngoài field, form sẽ co lại và những thông tin ngoài sẽ biến mất.

Booking.com Expanding Input

Ví dụ: Button Morphing

Các button Morphing sử dụng pattern input expendable để khi users thấy button lần đầu và nhấn vào, button sẽ biến hình thành form.

Screenshot bên dưới trên trang The Startup thể hiện 1 dạng form sáng tạo, gồm nhiều phương án khác nhau.

Morphing Button to Form

Hỗ trợ Input Take-In

Các forms dài thường gây nhiều khó khăn cho người dùng. Cách tốt nhất chúng ta có thể làm là chỉ hỏi input khi chúng ta thực sự cần. Đứng trên khía cạnh trải nghiệm người dùng, users thường rất ngần ngại đưa quá nhiều thông tin cá nhân do các vấn đề về bảo mật. 

Tuy nhiên, thỉnh thoảng chúng ta vẫn cần phải xây dựng các forms dài. Để thực hiện được, bạn cần phải chia nhỏ forms thành cá khối nhỏ và các khối này sẽ trở thành những màn hình liên tiếp. 

Rất nhiều trang e-Commerce (như Amazon) sử dụng cách này để giảm tỷ lệ bỏ giỏ hàng.

Nếu bạn muốn giảm nhẹ quy trình hoàn thiện các trường của form thì quy tắc ngón tay cái (rule of thumb) là giảm những thứ gây xao nhãng và giảm thao tác từ người dùng càng nhiều càng tốt.

 Nguồn: IDE Academy via Hongkiat