Tư duy thiết kế cho lập trình viên, cách thiết kế forms đẹp hơn

Lập trình viên thường là những người không có sense tốt lắm về thiết kế. Chính vì vậy, Techtalk sẽ giới thiệu một số góc nhìn và kiến thức về lĩnh vực này để giúp cho chúng ta có thể nâng cao hơn về khả năng ứng dụng các khái niệm thiết kế vào sản phẩm! Hãy cùng xem nhé.

Những lổi designer thường gặp và phương hướng khắc phục

Từ signup flow, a multi-view stepper, đến monotonous data entry interface, form là một trong những thành phần quan trọng nhất của thiết kế sản phẩm số. Bài viết này tập trung vào những nguyên tắc nên và không nên làm trong form design. Nên nhớ, đây chỉ là những điểm chung và luôn có ngoại lệ cho mọi quy luật.

Form chỉ nên có 1 dòng duy nhất

Quá nhiều cột sẽ phá vỡ “đà” nhập liệu của người dùng.
Quá nhiều cột sẽ phá vỡ “đà” nhập liệu của người dùng.

Nhãn trên

Người dùng hoàn thành form nhãn trên với một tốc độ nhanh hơn rất nhiều so với nhãn trái. Nhãn trên còn có thể làm việc hiệu quả hơn trên di động. 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.
Người dùng hoàn thành form nhãn trên với một tốc độ nhanh hơn rất nhiều so với nhãn trái. Nhãn trên còn có thể làm việc hiệu quả hơn trên di động. 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.

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

Hiển thị nhãn và input gần với nhau, và đảm bảo đủ độ cao giữa các trường nhập liệu để không gây rối mắt người dùng.
Hiển thị nhãn và input gần với nhau, và đảm bảo đủ độ cao giữa các trường nhập liệu để không gây rối mắt người dùng.

Tránh viết hoa hoàn toàn

All caps rất khó đọc và scan
All caps rất khó đọc và scan

Hiển thị tất cả lựa chọn nếu chỉ có dưới 6

Đặt tùy chọn vào drop-down cần người dùng click đến hai lần. Hãy dùng input selector nếu có ít hơn 5 tùy chọn. Kết hợp với tìm kiếm văn bản ngay trong drop-down nếu có hơn 25 tùy chọn.
Đặt tùy chọn vào drop-down cần người dùng click đến hai lần. Hãy dùng input selector nếu có ít hơn 5 tùy chọn. Kết hợp với tìm kiếm văn bản ngay trong drop-down nếu có hơn 25 tùy chọn.

Tránh dùng placeholder text làm nhãn

Đặt tùy chọn vào drop-down cần người dùng click đến hai lần. Hãy dùng input selector nếu có ít hơn 5 tùy chọn. Kết hợp với tìm kiếm văn bản ngay trong drop-down nếu có hơn 25 tùy chọn.
Đặt tùy chọn vào drop-down cần người dùng click đến hai lần. Hãy dùng input selector nếu có ít hơn 5 tùy chọn. Kết hợp với tìm kiếm văn bản ngay trong drop-down nếu có hơn 25 tùy chọn.

Tránh dùng placeholder text làm nhãn

Không gian tối ưu từ việc dùng placeholder text làm nhãn tỏ ra vô cùng cám dỗ, nhưng sẽ gây ra nhiều sự cố trong quá trình sử dụng mà bạn có thể tìm hiểu thêm tại đây.
Không gian tối ưu từ việc dùng placeholder text làm nhãn tỏ ra vô cùng cám dỗ, nhưng sẽ gây ra nhiều sự cố trong quá trình sử dụng.

Đặt checkbox (và radios) từ trên xuống dưới để dễ scan

CTA (Call to action) rõ ràng

Hiển thị errors nội dòng

Chỉ dùng xác nhận nội dòng sau khi người dùng nhập liệu xong (trừ khi thông tin đó hữu ích trong quá trình nhập liệu)

Đừng xác nhận khi người dùng vẫn đang gõ phím nếu nó không quá hữu ích (như trng trường hợp tạo username, message với bộ đếm ký tự)
Đừng xác nhận khi người dùng vẫn đang gõ phím nếu nó không quá hữu ích (như trng trường hợp tạo username, message với bộ đếm ký tự)

Đừng ẩn đoạn text trợ giúp cơ bản

Hiện rõ text trợ giúp cơ bản bất cứ khi nào có thể. Với những đoạn phức tạp, hãy đặt kế bên input.
Hiện rõ text trợ giúp cơ bản bất cứ khi nào có thể. Với những đoạn phức tạp, hãy đặt kế bên input.

Phân biệt rõ hành động chính và hành động phụ

Thể hiện yêu cầu nhập liệu ngay trong trường nhập liệu

Độ dài của trường nhập liệu thể hiện luôn độ dài yêu cầu của câu trả lời. Hãy áp dụng quy luật này cho các trường nhập liệu có số ký tự xác định như số điện thoại, mã zip,...
Độ dài của trường nhập liệu thể hiện luôn độ dài yêu cầu của câu trả lời. Hãy áp dụng quy luật này cho các trường nhập liệu có số ký tự xác định như số điện thoại, mã zip,…

Bỏ dấu * đi và chỉ rõ các trường không bắt buộc

Không phải lúc nào người dùng cũng hiểu được dấu (*) mang ý nghĩa gì. Thay vào đó, cứ chỉ rõ ra là tốt nhất
Không phải lúc nào người dùng cũng hiểu được dấu (*) mang ý nghĩa gì. Thay vào đó, cứ chỉ rõ ra là tốt nhất

Nhóm các thông tin tương tự

Người dùng nhìn theo nhóm, và các kiểu form dài có thể tỏ ra choáng ngợp. Bằng việc tạo nhóm theo logic, người dùng có thể điền form nhanh và ít lỗi hơn.
Người dùng nhìn theo nhóm, và các kiểu form dài có thể tỏ ra choáng ngợp. Bằng việc tạo nhóm theo logic, người dùng có thể điền form nhanh và ít lỗi hơn.

Hỏi làm gì?

Hãy bỏ các trường không bắt buộc đi và tìm cách khác để thu thập dữ liệu. Các kiểu trắc nghiệm cũng là một cách hay với tỷ lệ phản hồi cao để thay thế câu hỏi. Hơn nữa, dữ liệu phân tích tự động và các kênh xã hội, UI chuyển đổi, SMS, email, voice, ORN, vị trí, vân tay,… đang dần trở thành kênh thống kê của thời hiện đại.

Make it fun

Cuộc đời ngắn ngủi lắm. Chả ai muốn ngồi lỳ điền một cái form dài thật dài cả. Hãy thật gần gũi, vui nhộn, tiếp xúc mạnh mẽ. Hãy làm điều không ai ngờ đến. Vai trò của một designer là phải thể hiện thương hiệu của công ty theo cách gợi ra phản ứng cảm xúc nơi người dùng. Nếu thực hiện đúng cách, bạn sẽ có thể tăng tỷ lệ hoàn thành (vẫn nên đi theo các quy luật bên trên nhé).

ITZone via uxdesign

 

Chia sẻ bài viết ngay