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

Mẹo 5 để thiết kế biểu mẫu di động

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ị]

Hình thức liên lạc là một thành phần quan trọng của nhiều trang web. Mặc dù nhìn chung đơn giản, bạn cần đảm bảo chúng dễ sử dụng nếu bạn muốn thu thập khách hàng tiềm năng và giữ liên lạc với người dùng của mình. Điều này thường không phải là một vấn đề với lưu lượng truy cập văn phòng, nhưng sử dụng các hình thức có thể khó khăn nếu bạn sử dụng một thiết bị di động.

Trong hướng dẫn này, chúng ta sẽ nói một chút về tầm quan trọng của việc thiết kế các hình thức tương thích với thiết bị di động. Sau đó, chúng tôi sẽ cung cấp cho bạn năm mẹo để đảm bảo các biểu mẫu của bạn hoạt động hoàn hảo trên thiết bị di động.

Hãy làm việc!

Tại sao việc biểu mẫu của bạn trở nên thân thiện với thiết bị di động lại quan trọng

Các hình thức có đủ hình dạng và kích cỡ. Thông thường, bạn sẽ xử lý các hình thức liên lạc:

ví dụ về contact form.png

Các hình thức đăng ký cũng rất phổ biến vì chúng cho phép bạn thu thập email và nhắm mục tiêu chúng trong các chiến dịch:

nhắm mục tiêu các email trong chiến dịch.png

Tuy nhiên, các hình thức có thể được sử dụng cho tất cả các loại mục đích khác. Ví dụ: bạn có thể thu thập thông tin bằng cách sử dụng bản khảo sát trực tuyến hoặc bảng câu hỏi trong trường hợp đó bạn sẽ cần các biểu mẫu để cho phép người dùng nhập câu trả lời.

Nói cách khác, các biểu mẫu rất linh hoạt và hầu như tất cả các trang web đều sử dụng biểu mẫu theo cách này hay cách khác. Do đó, điều cần thiết là các biểu mẫu của bạn phải dễ sử dụng (trừ khi bạn muốn cung cấp trải nghiệm bực bội cho khách truy cập).

Sử dụng các hình thức từ máy tính để bàn hoặc máy tính xách tay thường rất đơn giản. Bạn có chuột và bàn phím đầy đủ, vì vậy việc chọn trường bạn muốn sử dụng và nhập dữ liệu không phải là vấn đề. Tuy nhiên, duyệt web từ điện thoại thông minh hoặc thiết bị nhỏ gọn khác của bạn rất phức tạp.

Khi làm việc với ngón tay của bạn trên một màn hình nhỏ, việc tương tác với các hình thức đôi khi có thể gây đau đớn do các quyết định thiết kế kém. Đây là điều bạn nên tránh trong các thiết kế của riêng bạn. Rốt cuộc, nếu người dùng di động không thể tương tác với các biểu mẫu của bạn, bạn có nguy cơ mất chuyển đổi, khách hàng tiềm năng hoặc chỉ làm khách truy cập khó chịu.

Điều cũng quan trọng để hiểu rằng lưu lượng truy cập di động bây giờ, nếu không, quan trọng hơn các nguồn máy tính để bàn. Trong thực tế, lưu lượng truy cập di động đã vượt quá sau này trong những năm gần đây. Điều này có nghĩa là thiết kế một trang web thân thiện với thiết bị di động nên là mục tiêu chính của bạn khi khởi động một dự án mới.

Mẹo 5 để thiết kế các biểu mẫu di động dễ sử dụng

May mắn thay, thiết kế các hình thức thân thiện với thiết bị di động không khó như bạn có thể tưởng tượng. Trong hầu hết các trường hợp, chỉ cần ghi nhớ một số nguyên tắc cơ bản và kiểm tra cẩn thận các biểu mẫu của bạn trước khi đưa chúng vào phục vụ. Hãy nói về cách làm điều đó!

1. Xóa tất cả các phần không cần thiết

Bạn càng có nhiều lĩnh vực trong biểu mẫu của mình, thì càng khó sử dụng trên thiết bị di động. Thật vậy, việc sử dụng các hình thức trên điện thoại di động đơn giản là phức tạp hơn. Bằng cách giảm số lượng trường hoặc phần có trong biểu mẫu của bạn, bạn có thể tối đa hóa cơ hội khách truy cập điền chúng.

Dưới đây là một ví dụ nhanh về biểu mẫu liên hệ với một vài trường bổ sung không cần thiết trên thiết bị di động:

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ác trường không cần thiết trên mobile.png

Trong hầu hết các trường hợp, tất cả những gì bạn cần cho một hình thức liên lạc tuyệt vời là tên, e-mail và nội dung thư bạn muốn nhận. Mọi thứ khác phụ thuộc vào loại trang web bạn sử dụng và nếu bạn đang cố gắng thu thập khách hàng tiềm năng.

Cuối cùng, biểu mẫu càng có ít biểu mẫu, khách truy cập di động sẽ dễ dàng sử dụng chúng hơn. Rốt cuộc, việc chọn một trường bằng màn hình cảm ứng có thể khó khăn, ngay cả khi nó được thiết kế tốt, để giảm thiểu số lần nhảy mà người dùng phải thực hiện.

Mục tiêu của bạn tại thời điểm này là tham khảo các hình thức hiện có của trang web của bạn. Xem lại từng phần của chúng và xác định xem bạn có thực sự cần các trường bổ sung ngoài các phần được đề cập ở trên không. Nếu có một trường thừa, chỉ cần xóa nó.

2. Sử dụng danh sách thả xuống nếu có thể

Hầu hết chúng ta đều thoải mái gõ trên thiết bị di động và sử dụng màn hình cảm ứng. Tuy nhiên, gửi SMS cho bạn bè và điền vào mẫu liên hệ là hai trải nghiệm rất khác nhau. Với những điều này, có một cơ hội tốt mà bạn sẽ thất vọng nếu bạn phải gõ nhiều thông tin.

Một trong những cách giúp cuộc sống của khách truy cập di động của bạn dễ dàng hơn là đơn giản hóa các lựa chọn anh ta phải đưa ra liên quan đến các yếu tố của trang web của bạn. Để cho bạn biết về những gì chúng tôi đang nói, hãy tận dụng ví dụ trước về đặt chỗ nhà hàng của chúng tôi:

đặt phòng.png

Để đặt phòng, có lẽ bạn sẽ cần phải để lại tên, e-mail, điện thoại et cho biết một thời gian, cũng như số lượng người có mặt. Bạn có thể tạo trường biểu mẫu theo hai cách để xác thực thời gian đặt trước:

  1. Cấu hình một trường chỉ chấp nhận các mục số.
  2. Thiết kế một danh sách thả xuống bao gồm tất cả thời gian có sẵn để đặt phòng.

Như bạn có thể hình dung, sau này thân thiện hơn với người dùng di động. Với cách tiếp cận này, họ không cần phải nhập số và họ có thể chỉ cần chọn những gì phù hợp nhất với họ từ các tùy chọn mà bạn đưa vào.

Ý tưởng cho bạn xem biểu mẫu của bạn và xem liệu chúng có bao gồm các trường mà bạn có thể thay thế bằng menu thả xuống không. Điều này sẽ không phải luôn luôn như vậy vì bạn không thể sử dụng menu thả xuống để thu thập tên hoặc email, nhưng các tùy chọn khác có thể được sử dụng.

Bất kể trường hợp sử dụng của họ, bạn muốn đảm bảo rằng các menu thả xuống của bạn bao gồm các tùy chọn dễ chọn từ các thiết bị di động. Nói cách khác, đảm bảo menu đủ lớn để ai đó không phải mổ để chọn đúng tùy chọn.

3. Đảm bảo các nút gửi của bạn dễ chạm vào

Mẹo này khá đơn giản, nhưng vẫn còn được đề cập. Mỗi biểu mẫu bạn thiết kế phải bao gồm một cách để người dùng xác nhận rằng họ muốn gửi dữ liệu đã nhập. Trong hầu hết các trường hợp, điều này có nghĩa là tạo nút gửi:

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]

tạo một nút gửi.png

Khi sử dụng máy tính thông thường, nhấp vào nút gửi là điều tự nhiên nhất trên thế giới. Tuy nhiên, chúng tôi đã gặp một số hình thức trên điện thoại di động, nơi khó hơn nhiều để nhấn nút.

Nếu khách truy cập của bạn không thể gửi thông tin họ đã nhập vào biểu mẫu của bạn, mọi nỗ lực của bạn sẽ vô ích. Ngoài ra, không có gì là không chuyên nghiệp như một nút gởi Điều đó không làm việc như mong đợi.

Để thiết kế các nút gửi tốt hơn cho thiết bị di động, dưới đây là ba mẹo để xem xét:

  1. Đảm bảo chúng đủ lớn để dễ dàng đẩy trên thiết bị di động.
  2. Không đặt các nút của bạn quá gần với các vật phẩm khác để người dùng không chạm vào chúng đúng cách.
  3. Làm nổi bật các nút của bạn, ví dụ như sử dụng màu tương phản hoặc kiểu chữ sáng tạo.

Ngoài tất cả điều này, bạn cũng sẽ muốn kiểm tra các nút của mình trước khi trang web của bạn hoạt động. Chúng ta sẽ đi sâu hơn về cách làm điều đó trong một phút. Bây giờ, hãy nói về hiệu suất.

4. Đảm bảo các biểu mẫu của bạn tải nhanh

Chúng tôi nói rất nhiều về hiệu suất trang web trong nhiều bài viết của chúng tôi và không phải vì chúng tôi cần tốc độ. Thực tế là hầu hết mọi người không thích các trang web chậm, điều này có ý nghĩa.

Với tốc độ của Internet nhanh hơn, có thể khó chờ đợi một trang web tải quá lâu. Ngoài ra, tốc độ Internet di động có xu hướng thay đổi nhiều hơn so với kết nối gia đình thông thường. Điều này có nghĩa là trang web của bạn sẽ cần được tối ưu hóa cao cho thiết bị di động nếu bạn muốn giữ cho những người dùng này hài lòng vì không phải ai cũng sẽ có quyền truy cập Internet (tức là nhanh chóng).

Mẹo đặc biệt này có thể áp dụng cho toàn bộ trang web của bạn, nhưng nó cũng quan trọng đối với các trang di động hiển thị biểu mẫu của bạn. Nếu các phần này của trang web của bạn mất quá nhiều thời gian để tải, bạn mất các hội nghị và cơ hội để kết nối với khách truy cập của bạn.

Theo nguyên tắc chung, một trang web không nên mất hơn hai giây để tải. Khi bạn đã vượt quá giới hạn này, tỷ lệ thoát có xu hướng tăng đáng kể, đó là tin khủng khiếp đối với bạn. Với bản chất của điều hướng di động, cách tốt nhất là giảm thời gian này xuống mức tối đa .

Với suy nghĩ này, có nhiều cách để cải thiện hiệu suất tổng thể của trang web của bạn. Ví dụ: bạn có thể chuyển sang gói lưu trữ tốt hơn, sử dụng chủ đề đáp ứng được tối ưu hóa cho tốc độ và nén hình ảnh của bạn. Tất nhiên, những thứ này sẽ giúp tất cả người dùng, nhưng sẽ đặc biệt hữu ích cho những người sử dụng các thiết bị nhỏ hơn.

5. Kiểm tra biểu mẫu của bạn trước khi xuất bản

Xem xét rằng các hình thức là một phần quan trọng của hầu hết các trang web, có nghĩa là bạn kiểm tra chúng cẩn thận trước khi xuất bản chúng. Với WordPress, quá trình này khá đơn giản. Bạn có thể tiếp tục và thiết kế các trang cụ thể để hiển thị biểu mẫu của mình và không xuất bản chúng cho đến khi bạn đã kiểm tra đầy đủ chúng.

Tất nhiên, plugin hoặc chủ đề bạn muốn sử dụng thuộc về bạn (theo như nó có thể giúp phát triển các trang web di động). Tuy nhiên, liên quan đến giai đoạn thử nghiệm, chúng tôi khuyên bạn nên giữ mọi thứ đơn giản và sử dụng các công cụ như công cụ phát triển cơ rôm để thực hiện công việc.

Hãy xem lại một ví dụ nhanh. Nếu bạn đang sử dụng Chrome, hãy tiếp tục và xem trước trang có chứa biểu mẫu bạn muốn kiểm tra. Sau đó, nhấp chuột phải vào bất cứ nơi nào trên trang này và chọn tùy chọn thanh tra . Chrome sẽ hiển thị một bộ công cụ mà bạn có thể sử dụng để xem xét và chỉnh sửa mã nguồn của trang ở bên phải và bên trái, bạn có thể xem bản xem trước về sự xuất hiện của nó từ thiết bị di động:

Tổng quan về các công cụ phát triển Chrome.

Ở đầu màn hình, bạn có thể sử dụng menu để chuyển giữa các độ phân giải khác nhau. Chrome bao gồm các cài đặt cho nhiều thiết bị di động phổ biến, nhưng bạn cũng có thể nhập độ phân giải tùy chỉnh.

Tại thời điểm này, bạn cần kiểm tra sự xuất hiện và hành vi của biểu mẫu liên hệ của bạn trên nhiều thiết bị. Lấy ví dụ dưới đây - biểu mẫu hoạt động hoàn hảo, nhưng bạn có thể thấy rằng nó không phù hợp như mong muốn. Đặc biệt chú ý đến văn bản và các biểu tượng cụ thể, quá gần với cạnh của màn hình:

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]

thiết kế biểu mẫu cho mobile.png

Một cách để ngăn chặn vấn đề này là giữ cho biểu mẫu của bạn đơn giản, như chúng tôi đã nói ở mẹo đầu tiên. Trong ví dụ dưới đây, biểu mẫu sử dụng nhiều danh sách thả xuống và chỉ yêu cầu ba trường. Điều này làm cho nó dễ sử dụng và quan trọng hơn là hình thức đơn giản đến mức nó phải được điều chỉnh hoàn hảo cho tất cả các thiết bị:

Một ví dụ về một hình thức mà không có vấn đề mở rộng.

Nếu bạn gặp vấn đề với một trong các hình thức của mình, rõ ràng bạn cần giải quyết chúng ngay lập tức. Nếu không, bạn có nguy cơ xa lánh khán giả di động của mình, điều mà chúng tôi cố gắng tránh trước tiên!

Kết luận

Đảm bảo rằng trang web của bạn tương thích với các thiết bị di động là rất quan trọng để duy trì lưu lượng truy cập và không làm khách truy cập của bạn thất vọng. Cụ thể, biểu mẫu của bạn phải dễ sử dụng trên thiết bị di động nếu bạn không muốn bỏ lỡ tin nhắn hoặc thu thập khách hàng tiềm năng có giá trị.

Khi nói đến thiết kế biểu mẫu thân thiện với thiết bị di động, dưới đây là năm mẹo để đơn giản hóa cuộc sống của bạn:

  1. Xóa tất cả các phần không cần thiết.
  2. Sử dụng danh sách thả xuống nếu có thể.
  3. Hãy chắc chắn rằng các nút gửi của bạn dễ bấm.
  4. Đảm bảo các biểu mẫu của bạn tải nhanh.
  5. Kiểm tra các biểu mẫu của bạn trước khi xuất bản chúng.

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
2 cổ phiếu
cổ phiếu1
tweet
Enregistrer1