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 701.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ể để xây dựng một trang web hướng khách truy cập chuyển đổi. Khi bạn nghiên cứu phân tích, bạn rất vui khi thấy rằng hành trình của người dùng mà bạn đã tạo được hỗ trợ bởi khách truy cập, hết lần này đến lần khác. Tuy nhiên, có điều 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. 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, biểu mẫu liên hệ có thể làm hỏng trải nghiệm nếu không được sử dụng đúng cách. Các nút “bị hỏng”, các trường khó hiểu, quá nhiều bước, giao diện vô tổ chức… thậm chí vị trí của biểu mẫu liên hệ có thể làm gián đoạn trải nghiệm 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 công bố vào năm 2014 cho thấy rằng việc tuân theo các hướng dẫn 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ệ đáp ứng tất cả các quy tắc, 78% người dùng có thể hoàn thành và gửi chúng chỉ trong một lần thử. Tuy nhiên, khi biểu mẫu liên hệ vi phạm các quy tắc này, chỉ 42% có thể làm như vậy trong một lần thử.

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

Quy tắc số 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 lo lắng về độ dài của biểu mẫu liên hệ, điều này thường dẫn đến lựa chọn thiết kế kém. Lấy ví dụ câu hỏi về sự liên kết.

Bạn có thể thấy một biểu mẫu như thế này trên trang web BrainTraffic và nghĩ: Hmmm… nhưng điều đó có phải là quá lâu để hoàn thành không?

điền vào form.png

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

Nếu bạn muốn biểu mẫu liên hệ của mình đáp ứng tiêu chuẩn căn chỉnh, đâ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 trái tất cả các nhãn, trường biểu mẫu và nút gọi hành động chính.
  • Không bao giờ căn chỉnh các trường liên quan theo chiều ngang. Bạn có thể cấu trúc biểu mẫu một cách hợp lý, nhưng mỗi câu hỏi hoặc trường phải được xếp chồng lên nhau 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 thiết kế biểu mẫu liên hệ, bạn có thể nghĩ rằng càng ngắn càng tốt, phải không? Không phải lúc nào cũng vậy. Điều quan trọng nhất là bạn cung cấp cho người dùng tất cả các trường 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, đã một bài thuyết trình vào năm 2015 đã giải quyết vấn đề này. Anh ấy và nhóm của mình muốn biết điều gì sẽ xảy ra nếu họ rút ngắn biểu mẫu liên hệ này:

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

Như bạn có thể thấy, họ đã xóa những gì họ cho là các trường không cần thiết để hợp lý hóa quá trình điền vào biểu mẫu. Tuy nhiên, sau khi kết thúc thử nghiệm, họ nhận thấy số lượt chuyển đổi giảm 14% với hình thức ngắn hơn.

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

Không quan trọng nếu người dùng của bạn 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 hoặc nếu họ cần công nghệ hỗ trợ để giúp họ, biểu mẫu nên được trang bị. để đơn giản hóa quá trình nhập cảnh.

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 tiếp cận, hãy đảm bảo rằng biểu mẫu liên hệ của bạn đã bật thứ tự tab logic.

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]

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

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

Tự động hoàn thành của Google
Thay vì mã hóa từng trường để nó tên chất hóa học tự động theo các tiêu chuẩn được tôn trọng, kích hoạt tự động điền bằng plugin tự động điền địa chỉ Google. Điều này không chỉ giúp bạn không phải đối mặt với các lỗi chính tả và địa chỉ điền sai, mà còn giúp khách truy cập của bạn không phải 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 thấy rằng quy tắc này sẽ đi ngược lại những điều cơ bản của chủ nghĩa tối giản, nhưng đó là một quy tắc mà bạn nên chú ý để tránh làm khách truy cập của bạn khó chịu một cách không cần thiết.

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

Bạn có thể đã gặp phải nó với tư cách là người dùng và bạn biết nó có thể bực bội 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 đưa ra. Vì vậy, thay vì để người dùng đoán những gì cần được sửa chữa và làm thế nào, đừng để nó đến thời điểm này. Đá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 ra tất cả các yêu cầu định dạng nếu bạn không sử dụng dấu hiệu nhập để tự động định dạng trường.
  • Chỉ ra rõ ràng khi một trường là "Tùy chọn" (sử dụng từ, không phải dấu hoa thị màu đỏ).
  • Cung cấp cho người dùng tùy chọn để hiển thị hoặc ẩn trường mật khẩu khi họ nhập vào.
  • Hiển thị thông báo lỗi ngay khi người dùng tham gia vào một 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

Xem cách Target đặt các nhãn vào 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ý điều này hơi khác một chút và di chuyển nhãn lên đầu hộp trường (xem "địa chỉ email").

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]

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 đây là phương pháp thiết kế không tốt bởi vì:

  • Đây là vấn đề đối với người dùng đa nhiệm, bị phân tâm hoặc có tốc độ quá nhanh trong trường tiếp theo. Khi manh mối 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 các mẹo 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, khiến người dùng bỏ qua chúng, gửi biểu mẫu và nhận được 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 đầu mối. Ngay cả khi biểu mẫu của bạn có vẻ lâu hơn để đặt các nhãn hoặc bộ mô tả này phía trên trường, nó sẽ cải thiện khả năng sử dụng.

Đó là nó cho những mẹo này, tôi hy vọng chúng sẽ giúp bạn xây dựng biểu mẫu liên hệ 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
16 cổ phiếu
cổ phiếu8
tweet1
Enregistrer7