Bỏ qua đến nội dung chính

5 quy tắc để tạo ra một hình thức liên lạc hoàn hảo

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Bạn đang làm mọi thứ có thể để tạo một trang web sẽ dẫn khách truy cập đến chuyển đổi. Khi bạn nghiên cứu phân tích, bạn rất vui mừng khi thấy rằng đường dẫn người dùng bạn đã tạo được chăm sóc bởi khách truy cập hết lần này đến lần khác. Tuy nhiên, có một cái gì đó ngăn cản chúng được chuyển đổi.

Biểu mẫu liên hệ là một phần thiết yếu trong hành trình của khách truy cập của bạn. Ngay cả khi bạn thực sự có hầu hết mọi thứ mà một trang web có thể cung cấp, một hình thức liên lạc có thể làm hỏng trải nghiệm nếu nó không được sử dụng đúng cách. Các nút "bị hỏng", các trường nhầm lẫn, quá nhiều bước, giao diện vô tổ chức ... thậm chí việc đặt biểu mẫu liên hệ có thể làm gián đoạn trải nghiệm của người dùng.

Có rất nhiều thứ có thể sai.

Quy tắc 5 để xây dựng hình thức liên lạc hoàn hảo

Một nghiên cứu theo dõi mắt của Google được xuất bản trong 2014 đã chỉ ra rằng tuân theo các nguyên tắc sử dụng cơ bản nhất cho thiết kế biểu mẫu sẽ cải thiện đáng kể trải nghiệm người dùng. Cụ thể, khi một biểu mẫu liên hệ tuân theo tất cả các quy tắc, 78% người dùng có thể điền chúng và gửi chúng trong một lần thử. Tuy nhiên, khi một hình thức liên lạc vi phạm các quy tắc này, chỉ có 42% có thể làm như vậy trong một lần thử.

Tò mò muốn biết những quy tắc này là gì? Vì vậy, hãy tiếp tục đọc.

Quy tắc # 1: Tập trung vào căn chỉnh

Như bạn sẽ thấy trong các quy tắc khác ở đây, mọi người thường quan tâm đến độ dài của các hình thức liên hệ, điều này thường dẫn đến các lựa chọn thiết kế kém. Lấy câu hỏi về sự liên kết, ví dụ.

Bạn có thể thấy một hình thức như thế này trên trang web BrainTraffic và nghĩ: Hmmm ... nhưng không quá lâu để hoàn thành?

điền vào form.png

Một cách nghĩ về việc giải quyết "vấn đề" này là di chuyển các nhãn sang bên trái và đặt các trường phản hồi ở bên phải. Tuy nhiên, các chuyên gia của UX sẽ nói với bạn rằng đây là điều không có vì nó ảnh hưởng đến khả năng quét biểu mẫu. Điều tương tự cũng xảy ra nếu bạn nghĩ đến việc đặt các trường cạnh nhau theo chiều ngang.

Nếu bạn muốn các mẫu liên hệ của mình đáp ứng tiêu chuẩn căn lề, đây là những gì bạn cần làm:

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

  • Căn chỉnh tất cả các nhãn, trường biểu mẫu và nút kêu gọi hành động chính ở bên trái.
  • Không bao giờ căn chỉnh các lĩnh vực liên quan theo chiều ngang. Bạn có thể cấu trúc biểu mẫu một cách logic, nhưng mỗi câu hỏi hoặc trường phải được xếp theo chiều dọc.
  • Bất kỳ trường nào có câu hỏi trắc nghiệm (có ít hơn sáu tùy chọn) phải được hiển thị trong danh sách dọc các điểm hoặc hộp kiểm, không phải trong menu thả xuống.

Quy tắc 2: Bao gồm tất cả các trường có liên quan

Khi nói đến việc thiết kế các hình thức liên lạc, bạn có thể nghĩ rằng nó càng ngắn thì càng tốt? Điều này không phải lúc nào cũng đúng. Điều quan trọng nhất là bạn cung cấp cho người dùng tất cả các lĩnh vực cần thiết và có liên quan.

Michael Aagaard, Trình tối ưu hóa chuyển đổi cao cấp cho Unbounce, đã tạo một bài thuyết trình trong 2015 người đã giải quyết vấn đề này. Anh ấy và nhóm của anh ấy muốn biết điều gì sẽ xảy ra nếu họ rút ngắn hình thức liên lạc này:

ví dụ mẫu liên hệ.png

Như bạn có thể thấy, họ đã xóa những gì họ nghĩ là các trường vô dụng để hợp lý hóa quy trình điền vào biểu mẫu. Tuy nhiên, khi kết thúc thử nghiệm, họ đã phát hiện ra sự giảm chuyển đổi 14% với hình thức ngắn nhất.

Quy tắc # 3: Đơn giản hóa các trường

Bất kể người dùng của bạn có tương tác với biểu mẫu liên hệ của bạn bằng máy tính để bàn hoặc thiết bị di động hay nếu họ cần công nghệ hỗ trợ để giúp họ, biểu mẫu phải được trang bị để đơn giản hóa quá trình đầu vào.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Dưới đây là một số kỹ thuật bạn nên biết:

sự sắp loại
Đối với người dùng máy tính để bàn và những người có vấn đề về khả năng truy cập, hãy đảm bảo biểu mẫu liên hệ của bạn có thứ tự tab hợp lý được bật.

Nhập mặt nạ
Thay vì buộc người dùng đoán cách bạn muốn định dạng các trường nhất định, bạn có thể thêm chúng bằng các mặt nạ đầu vào định dạng chúng tự động.

định dạng trường html.png

Tự động hoàn thành của Google
Thay vì mã hóa từng lĩnh vực cho tên chất hóa học tự động theo các tiêu chuẩn được tuân thủ, kích hoạt điền tự động bằng cách sử dụng plugin để tự động điền địa chỉ Google. Nó không chỉ giúp bạn không phải đối mặt với lỗi chính tả và địa chỉ được điền không chính xác mà còn ngăn khách truy cập của bạn nhập hầu hết các thông tin này.

Quy tắc # 4: Thoát tất cả

Mặc dù tôi nhận ra rằng quy tắc này sẽ đi ngược lại các nguyên tắc cơ bản của chủ nghĩa tối giản, đây là quy tắc mà bạn nên đặc biệt chú ý để tránh làm phiền khách truy cập của mình một cách không cần thiết.

Hãy để tôi giải thích: Bạn có một hình thức liên lạc có vẻ khá đơn giản. Người dùng của bạn điền nó theo những gì nhãn gợi ý và họ nhấp vào nút gửi. Sau đó, họ nhận được thông điệp màu đỏ khủng khiếp này: "Bạn đã không làm đúng! Quay trở lại, sửa mẫu và gửi lại! "

Bạn có thể đã gặp anh ấy với tư cách là một người dùng và bạn biết nó có thể gây khó chịu như thế nào, đặc biệt là nếu một số thông tin bạn đã nhập bị xóa khi lỗi được gỡ bỏ. Vì vậy, thay vì để người dùng đoán những gì cần phải sửa chữa và làm thế nào, đừng để nó đi đến điểm đó. Đánh vần mọi thứ trên đường đi:

  • Cung cấp trọng tâm trong lĩnh vực (đặc biệt là trên thiết bị di động) để người dùng biết chính xác nơi họ đang điền vào biểu mẫu.
  • Viết tất cả các yêu cầu định dạng nếu bạn không sử dụng mặt nạ đầu vào để tự động định dạng các trường.
  • Hiển thị rõ ràng khi một trường là "Tùy chọn" (sử dụng từ này, không phải dấu hoa thị màu đỏ).
  • Cung cấp cho người dùng khả năng hiển thị hoặc ẩn trường mật khẩu khi họ nhập.
  • Hiển thị thông báo lỗi ngay khi người dùng vào trường. Đừng chờ đợi cho đến khi kết thúc để làm điều đó.

form wordpress.png lỗi

Quy tắc # 5: Đừng giấu lời khuyên

Văn bản bảng trong một hình thức liên lạc trông như thế này:

field with tips.png

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Xem cách Target đặt nhãn trong trường? Trong một số biểu mẫu liên hệ, các nhãn / chỉ dẫn này chỉ biến mất khi người dùng nhấp vào một trường. Mục tiêu xử lý việc này một chút khác nhau và di chuyển nhãn đến đầu hộp trường (xem "địa chỉ email").

Bất kể việc này được xử lý như thế nào, các chuyên gia về khả năng sử dụng, như nhóm Nielsen Norman, sẽ cho bạn biết rằng đó là thực hành thiết kế tồi vì:

  • Đây là vấn đề đối với người dùng đa nhiệm, mất tập trung hoặc quá nhanh trong lĩnh vực tiếp theo. Khi chỉ mục biến mất, người dùng phải rời khỏi trường để khám phá lại những gì họ cần.
  • Các mẹo biến mất cũng ngăn người dùng quay lại biểu mẫu để kiểm tra công việc của họ hoặc sửa lỗi mà không xóa hoàn toàn phản hồi để xem những gì bên dưới.
  • Văn bản màu xám nhạt hơn được sử dụng cho gợi ý giữ chỗ không lý tưởng để dễ đọc.
  • Các trường có văn bản gợi ý có thể bị nhầm lẫn với các trường đã điền dữ liệu, cho phép người dùng bỏ qua chúng, gửi biểu mẫu và nhận thông báo lỗi.
  • Một số công cụ đọc màn hình không thể đọc văn bản gợi ý.

Theo NNG, người dùng thấy các trường trống hấp dẫn hơn các trường chứa văn bản chỉ mục. Ngay cả khi biểu mẫu của bạn có vẻ dài hơn để đặt các thẻ hoặc mô tả này phía trên trường, nó sẽ cải thiện khả năng sử dụng.

Đó là tất cả cho những lời khuyên này, tôi hy vọng họ sẽ giúp bạn xây dựng các hình thức liên lạc tốt hơn.

Bài viết này chứa comments 0

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
14 cổ phiếu
cổ phiếu8
tweet1
Enregistrer5