設計行動友好表單的5個技巧
聯絡表格是許多網站設計的關鍵組成部分。儘管它們的功能通常很簡單，但如果您想收集潛在客戶並與用戶保持聯絡，您仍然需要確保它們易於使用。這通常不是桌面流量的問題，但如果您使用行動裝置，使用表單可能會變得棘手。
為什麼您的表單對行動裝置友好很重要
表單有各種形狀和大小。最常見的是，您將處理聯絡表格：
註冊表單（或選擇加入）也非常受歡迎，因為它們使您能夠在活動期間收集電子郵件並定位它們：
但是，表單可用於各種其他目的。例如，您可能希望使用在線投票或測驗來收集訊息，在這種情況下，您將需要用戶輸入響應的表單。
換句話說，表單非常通用，幾乎每個站點都以某種方式使用表單。因此，確保您的表單易於使用至關重要。
使用桌上型電腦或筆記型電腦中的表單通常非常簡單。您有滑鼠和全鍵盤，因此選擇要使用的欄位並輸入數據應該不是問題。但是，從智慧型手機或其他小型設備瀏覽網頁會帶來一些麻煩。
當您在小螢幕上使用手指工作時，由於糟糕的設計決策，與表單交互有時會很痛苦。這是您在自己的設計中需要避免的事情。畢竟，如果行動用戶無法與您的表單進行交互，您可能會失去轉化、潛在客戶或完全惹惱訪問者。
同樣重要的是要了解行動流量現在與桌面來源一樣重要——如果不是更重要的話。事實上，行動流量在過去幾年內已經超過後者。這意味著在啟動新項目時，設計一個適合行動裝置的網站應該是您的主要目標。
設計行動友好表單的 5 個技巧
1. 刪除所有不必要的部分
表單包含的欄位越多，在行動裝置上使用就越困難。這是因為，儘管設計得很好，但在行動裝置上使用表單卻更加複雜。通過減少表單包含的欄位或部分的數量，您可以最大限度地增加訪問者填寫它們的機會。
這是一個聯絡表單的快速示例，其中包含一些可以不使用的附加欄位：
在大多數情況下，一個優秀的聯絡表單所需要的只是姓名、電子郵件和要接收的消息正文。其他一切都取決於您正在運行的網站類型以及您是否要收集潛在客戶。
最終，您的表單包含的欄位越少，行動訪問者就越容易使用它們。畢竟，即使設計良好，使用觸控螢幕選擇欄位也可能很困難，因此您希望儘量減少用戶必須進行的「跳轉」次數。
您在此階段的目標是查看站點的現有表單。仔細檢查它們的每個部分，並考慮您是否真的需要我們前面提到的欄位之外的任何其他欄位。如果有多餘的欄位，只需將其剪掉即可。
2. 儘可能使用下拉列表
我們大多數人都習慣在行動裝置上打字和使用觸控螢幕。然而，給朋友發簡訊和填寫聯絡表格是兩種截然不同的體驗。
使行動訪問者的生活更輕鬆的方法之一是簡化他們需要針對您的網站元素做出的選擇。為了讓您了解我們在說什麼，讓我們以我們之前的餐廳預訂示例為基礎：
要進行預訂，您可能需要留下姓名、電子郵件、電話， 並 註明時間以及參加人數。您可以通過兩種方式創建表單域來驗證預訂時間：
設定一個只接受數字輸入的欄位。
設計一個下拉列表，包括預訂的所有可用時間。
正如您想像的那樣，後者對於行動用戶來說更加人性化。使用這種方法，他們不需要輸入數字，他們可以從您提供的選項中選擇最適合他們的選項。
讓您查看表單並查看它們是否包含您可以用下拉選單替換的任何欄位的想法。情況並非總是如此，因為您無法使用下拉選單來收集姓名或電子郵件，但還有其他選項可能會起作用。
無論他們的用例是什麼，您都希望確保您的下拉選單包含易於從行動裝置中選擇的選項。換句話說，使選單足夠大，這樣人們就不必四處尋找正確的選項。
3. 確保您的提交按鈕易於觸摸
這個技巧非常簡單，但仍然值得一提。您設計的每個表單都需要包含一種方式，供用戶確認他們想要提交他們輸入的數據。在大多數情況下，這意味著創建一個提交按鈕：
當您使用桌上型電腦時，單擊提交按鈕是世界上最自然的事情。但是，我們在行動裝置上遇到了一些表單，其中按下按鈕比應有的要困難得多。
如果您的訪問者無法提交他們在表單中輸入的訊息，那麼您的所有努力都將白費。另外，沒有什麼比不按預期工作的提交按鈕更不專業了 。
要為行動裝置設計更好的提交按鈕，您需要牢記以下三個快速提示：
確保它們足夠大，以便在使用行動裝置時輕鬆按下。
不要把你的按鈕放在離其他元素太近的地方，這樣用戶就不會打錯一個。
以某種方式突出顯示您的按鈕，例如使用對比色或創意排版。
除此之外，您還需要在網站上線之前徹底測試您的按鈕。我們將在一分鐘內更深入地了解如何做到這一點。現在，讓我們談談性能。
4. 確保您的表單快速加載
我們在幾篇文章中談論了很多關於網站性能的問題，並不是因為我們需要速度。事實是，大多數人不喜歡緩慢的網站，這絕對有道理。
隨著網際網路速度越來越快，等待網站加載時間過長可能是一件苦差事。此外，行動網際網路速度的變化往往比普通家庭連接大得多。這意味著如果您想讓這些用戶滿意，您的網站將需要針對行動裝置進行高度優化，因為並非所有用戶都擁有合適（即快速）的網際網路訪問權限。
這個特別的技巧通常適用於您的整個網站，但它對於顯示錶單的行動頁面也很重要。如果您網站的這些部分加載時間過長，您將失去潛在客戶和與訪問者建立聯絡的機會。根據經驗，網站加載時間不應超過兩秒鐘。一旦你越過那條線，跳出率往往會急劇上升，這對你來說是個可怕的消息。
鑑於在行動裝置上瀏覽的性質，儘可能縮短這段時間是一個福音。考慮到這一點，您可以通過多種方式提高網站的整體性能。例如，您可能會升級到更好的託管計劃，使用針對速度進行了優化的響應式主題，並壓縮您的圖像。當然，這些將幫助所有用戶，但對使用較小設備的用戶尤其有益。
5. 在發布之前測試你的表單
考慮到表單是大多數網站的關鍵元素，因此您應該在發布之前徹底測試您的表單。使用 WordPress，這個過程非常簡單。您可以繼續設計特定頁面來顯示您的表單，並且在您完全測試它們之前不要發布它們。
當然，你想使用的插件或主題由你決定（只要它可以幫助開發行動網站）。但是，就測試階段而言，我們建議您保持簡單並使用諸如Chrome 開發工具之類的工具來完成工作。
讓我們看一個簡單的例子。如果您使用的是 Chrome，請繼續預覽包含您要測試的表單的頁面。接下來，右鍵單擊該頁面上的任意位置並選擇「檢查」選項。Chrome 會向您展示一組工具，您可以使用這些工具在右側和左側查看和編輯頁面的原始碼，您可以預覽它在行動裝置上的外觀：
在螢幕頂部，有一個選單可用於在不同解析度之間切換。Chrome 包含多種流行行動裝置的設定，但您也可以輸入自定義解析度。
此時，您應該檢查您的聯絡表單在多個設備上的外觀和行為。以下面的示例為例——該表單運行良好，但您可以看到它沒有按應有的比例縮放。尤其要注意太靠近螢幕邊框的文本和圖標：
正如我們在第一個技巧中概述的那樣，防止此問題的一種方法是保持表單簡單。在下面的示例中，表單使用多個下拉列表並且只需要三個欄位。這使得它易於使用，更重要的是，表單非常簡單，它應該可以在每個設備上完美地擴展：
如果您遇到任何表單問題，顯然應該立即修復它們。否則，您可能會疏遠您的行動受眾，而這正是我們首先要避免的！
結論
確保您的網站適合行動裝置對於保持流量和不讓訪問者感到沮喪至關重要。具體來說，如果您不想錯過接收消息或收集有價值的潛在客戶，您的表單需要在行動裝置上易於使用。
在設計適合行動裝置的表單時，這裡有五個快速提示，可讓您的生活更輕鬆：
刪除所有不必要的部分。
儘可能使用下拉列表。
確保您的提交按鈕易於按下。
確保您的表單加載速度快。
在發布之前測試您的表單。
