Top
10 quy tắc để tạo nên một form thân thiện với người dùng - ART GRAPHIC - Thiết kế đồ họa chuyên nghiệp, In ấn, Website, Chụp ảnh, Làm Video, Dựng Clip
fade
5676
post-template-default,single,single-post,postid-5676,single-format-standard,eltd-core-1.0,flow-ver-1.0,,eltd-smooth-page-transitions,ajax,eltd-blog-installed,page-template-blog-standard,eltd-header-standard,eltd-fixed-on-scroll,eltd-default-mobile-header,eltd-sticky-up-mobile-header,eltd-dropdown-default,wpb-js-composer js-comp-ver-4.9.2,vc_responsive

10 quy tắc để tạo nên một form thân thiện với người dùng

10 quy tắc để tạo nên một form thân thiện với người dùng

Mặc dù sự phát triển của tương tác giữa con người và máy tính, các biểu mẫu vẫn là một trong những loại tương tác quan trọng nhất đối với người dùng. Những người sử dụng ứng dụng hoặc trang web của bạn có một mục tiêu cụ thể và thường là một điều đứng giữa người dùng và mục tiêu của họ là một biểu mẫu. Mỗi ngày, chúng ta sử dụng chúng cho các hoạt động thiết yếu – để hoàn tất mua hàng, đăng ký mạng xã hội, cung cấp phản hồi về sản phẩm chúng ta đã mua và hơn thế nữa – chúng là một phần lớn trong trải nghiệm người dùng.Kết quả là, điều rất quan trọng để chúng ta có thể hoàn thành các biểu mẫu trực tuyến một cách nhanh chóng và không bị nhầm lẫn. Chúng ta càng tốn ít công sức, chúng ta càng hạnh phúc. Là nhà thiết kế và nhà phát triển, chúng ta nên cố gắng để tạo ra trải nghiệm hình thức nhanh hơn, dễ dàng hơn và hiệu quả hơn cho người dùng của chúng ta.

01. Chỉ hỏi những gì cần thiết

Việc cắt giảm số lượng thông tin bắt buộc sẽ làm cho biểu mẫu dễ điền hơn. Bạn nên luôn đặt câu hỏi tại sao và cách thông tin bạn yêu cầu đang được sử dụng. Cố gắng giảm thiểu số lượng trường càng nhiều càng tốt, vì mọi trường bạn thêm vào biểu mẫu sẽ ảnh hưởng đến tỷ lệ chuyển đổi của trường. Hạn chế số lượng câu hỏi và trường làm cho biểu mẫu của bạn ít được tải, đặc biệt khi bạn yêu cầu nhiều thông tin từ người dùng của mình.

02. Sắp xếp các trường hợp lý

Thật hữu ích khi nghĩ về một hình thức giống như một cuộc trò chuyện. Giống như bất kỳ cuộc trò chuyện bình thường nào, nó phải được thể hiện bằng một giao tiếp hợp lý giữa hai bên: một người và ứng dụng của bạn. Chi tiết phải được yêu cầu theo thứ tự hợp lý từ góc nhìn của người dùng, không phải là của ứng dụng hoặc cơ sở dữ liệu. Ví dụ: không bình thường khi yêu cầu địa chỉ của ai đó trước tên của họ.

Nó cũng rất quan trọng để nhóm các câu hỏi liên quan trong các khối, do đó, dòng chảy từ một bộ câu hỏi đến câu hỏi tiếp theo sẽ tốt hơn giống như một cuộc trò chuyện. Các trường liên quan đến nhóm cũng giúp người dùng hiểu được thông tin mà họ phải điền vào.

Hình trên là những ví dụ về hai hình thức đăng ký. Biểu mẫu dài có thể cảm thấy áp đảo nếu bạn không nhóm các trường có liên quan – so sánh biểu mẫu ở bên trái với phiên bản được cải tiến ở bên phải.

Nhóm cần được thực hiện trực quan cũng như trong mã. Ví dụ, bạn có thể sử dụng các phần tử <fieldset> và <legend> để liên kết các điều khiển biểu mẫu liên quan:

03. Giữ label ngắn

Field labels tell users what the corresponding input fields mean. Clear label text is one of the primary ways to make UIs more accessible. Labels tell the user the purpose of the field, but they aren’t help texts. Therefore, ensuring they scan easily is a priority – you should design succinct, short and descriptive labels (keep them to a word or two).

04. Đừng duplicate fields

Vấn đề này đặc biệt phổ biến đối với biểu mẫu đăng ký: hầu hết mọi người đều gặp phải một biểu mẫu yêu cầu bạn nhập địa chỉ email hoặc mật khẩu hai lần. Trong lịch sử, điều này được thiết kế để ngăn chặn lỗi nhập sai. Tuy nhiên, hầu hết người dùng chỉ cần sao chép và dán trường cần thiết bất cứ khi nào ứng dụng cho phép. Và nếu dữ liệu của trường gốc chứa lỗi, nó bị trùng lặp.

05. Làm nổi bật optional fields

Lý tưởng nhất, tốt nhất là không có trường tùy chọn. Phù hợp với quy tắc số 1, nếu một phần thông tin không được yêu cầu, không có thời điểm lãng phí thời gian của người dùng. Nhưng nếu bạn sử dụng chúng, bạn nên phân biệt rõ ràng các trường nhập nào không được để trống. Thông thường, một dấu nhỏ như nhãn hoa thị (*) hoặc ‘tùy chọn’ là đủ.

06. Hãy cẩn thận với các giá trị mặc định

Tránh bao gồm mặc định tĩnh trừ khi bạn tin rằng một phần lớn người dùng của bạn (ví dụ: 90 phần trăm) sẽ chọn giá trị đó – đặc biệt nếu đó là trường bắt buộc. Tại sao? Với cách tiếp cận này, bạn có thể giới thiệu các lỗi vì mọi người quét biểu mẫu nhanh chóng trực tuyến. Đừng cho rằng họ sẽ dành thời gian để phân tích tất cả các lựa chọn. Họ có thể vô cùng bỏ qua bởi cái gì đó đã có một giá trị.

Ngoại lệ duy nhất cho thời điểm này là mặc định thông minh – giống như những người chọn trước quốc gia của người dùng dựa trên dữ liệu vị trí địa lý của họ – điều này có thể giúp hoàn thành biểu mẫu nhanh hơn và chính xác hơn. Nhưng bạn vẫn nên sử dụng những điều này một cách thận trọng, bởi vì người dùng có xu hướng rời khỏi các trường được chọn trước như chúng.

07. Giảm thiểu tối đa yêu cần nhập liệu

Gõ là một quá trình chậm và dễ bị lỗi, và nó đặc biệt khó chịu trên thiết bị di động, nơi người dùng phải đối mặt với những hạn chế do màn hình bị giới hạn. Và với ngày càng nhiều người sử dụng màn hình nhỏ, mọi thứ có thể được thực hiện để ngăn chặn việc nhập không cần thiết sẽ cải thiện trải nghiệm người dùng. Nếu thích hợp, bạn có thể sử dụng các tính năng như tự động điền và điền trước cho dữ liệu, vì vậy người dùng chỉ phải nhập số lượng thông tin tối thiểu.
Điền thông tin địa chỉ của bạn thường là phần cồng kềnh nhất của bất kỳ biểu mẫu đăng ký trực tuyến nào, nhờ vào nhiều trường, tên dài, v.v. Lưu người dùng của bạn không phải nhập vào toàn bộ địa chỉ của họ bằng cách triển khai thực hiện trước cho các trường này. Các thư viện như Google Maps cung cấp một API JavaScript đơn giản để đạt được điều này.

08. Sử dụng xác nhận theo thời gian thực

Trong một thế giới lý tưởng, người dùng điền vào các mẫu đơn với thông tin cần thiết và hoàn thành công việc của họ thành công, nhưng trong thế giới thực, mọi người thường mắc lỗi. Thật là bực bội khi trải qua quá trình điền vào toàn bộ biểu mẫu chỉ để tìm hiểu tại thời điểm gửi mà bạn đã mắc lỗi.

Đúng thời điểm để thông báo cho ai đó về sự thành công hoặc thất bại của dữ liệu mà họ đã cung cấp ngay sau khi họ gửi thông tin. Đây là nơi xác thực thời gian thực xuất hiện. Nó thông báo cho người dùng những sai lầm ngay lập tức và làm cho nó có thể cho họ để sửa chúng nhanh hơn, mà không cần phải chờ đợi cho đến khi họ nhấn nút ‘Gửi’.

Và hãy nhớ, xác thực không chỉ cho người dùng biết họ đã làm gì sai; nó cũng nên nói cho họ biết họ đang làm gì. Điều này giúp người dùng tự tin hơn khi di chuyển qua biểu mẫu.

09. Tránh input format cố định

Lý do phổ biến nhất để ép buộc format cố định là giới hạn tập lệnh xác thực (phần cuối không thể xác định format cần thiết), mà trong hầu hết các trường hợp là một vấn đề triển khai. Thay vì buộc định dạng của một số thứ như số điện thoại trong khi người dùng nhập, bạn nên làm cho nó có thể biến đổi bất cứ điều gì người dùng nhập vào định dạng bạn muốn hiển thị hoặc lưu trữ.

10. Không sử dụng nút Reset

Nút Reset gần như không bao giờ giúp được người dùng. Thật khó để tưởng tượng rằng ai đó sẽ muốn một nút mà reset lại tất cả các dữ liệu đã nhập của họ và họ muốn nút đó được ngồi bên cạnh nút mà lưu nó. Web sẽ là một nơi hạnh phúc hơn nếu hầu như tất cả các nút Reset đã được gỡ bỏ.