轉換移動用戶的新手指南

想一想當您在火車上、坐在機場或只是躺在沙發上時，您必須在智能手機上填寫在線表格。 你有沒有註意過移動表單設計？

很可能你沒有註意到。 這就是目標 — 為用戶提供直觀的體驗，讓他們無縫地填寫表格並繼續他們的一天。

在本指南中，我們將回顧最有效的方法來做到這一點。 在這裡，您將學習如何設計不笨重或錯位的移動表單，但有助於提高轉化率並創造出色的用戶體驗。

目錄

移動與桌面表單設計

今天，您的網站訪問者不僅僅是在他們的台式計算機上瀏覽您的網站、查看您的內容和填寫您的表格。 他們還通過移動設備完成這些任務。

從 2022 年 4 月到 2022 年 6 月，移動設備佔全球網站流量的近 60%。這意味著您的表單必須能夠通過移動設備輕鬆查看、完成和提交。

為什麼移動表單設計很重要？

最好的移動表單設計可以帶來積極的用戶體驗，從而確保網站訪問者快樂，他們更有可能轉化為客戶並成為回頭客。

移動表單的設計、佈局和功能在網站的整體用戶體驗中起著重要作用。

如果您的表單不適合移動設備，您可能會遇到轉化次數減少、移動網站流量減少以及不滿意和沮喪的客戶增加的情況。 誰想要那個？

為什麼移動表單設計應不同於桌面設計？

“一切在移動設備上的運作方式都不同，因此營銷人員需要確保他們網站的任何元素始終針對移動設備進行優化，”屢獲殊榮的營銷影響者和策略師 Lilach Bullock 說。

“當然，這也包括表格——尤其是因為感覺你必須在移動設備上不斷地填寫表格。”

具體來說，考慮移動設備（例如 Apple iPhone）之間的顯示屏或屏幕尺寸的差異，其尺寸通常在 4.7 英寸到 6.7 英寸之間； 以及 Mac 筆記本電腦或台式機，尺寸通常在 13 英寸到 24 英寸之間。 可以安全地假設適合 iPhone 屏幕的表單不會完全適合桌面屏幕。

如果您的移動訪問者無法輕鬆閱讀、填寫和提交您的表格，您可能會失去他們的業務。 因此，創建適合任何移動設備屏幕的移動友好型表單對於創造出色的用戶體驗至關重要，以便給訪問者留下持久的印象並幫助您提高轉化率。

什麼是響應式網頁設計？

如果您想進一步提高移動表單設計並確保您的整個網站在所有類型的設備上都能正常運行，您可以實施響應式網站設計。

響應式網頁設計考慮了用戶的屏幕尺寸、平台、方向和環境。 這是一種創建出色用戶體驗的簡單有效的方法，因為很多人不斷地在各種設備上訪問和瀏覽不同的網站。

有幾種方法可以確保您的網站具有響應式設計。 例如，如果您是 WordPress 用戶，您可以安裝和使用多個響應式 WordPress 主題來設計您的網站。

此外，如果您正在或已經使用 Squarespace 等軟件構建網站，您的網站可能會自動採用響應式網頁設計。

如今，由於通過各種不同的移動設備訪問網站的人數眾多，響應式網頁設計已成為企業的熱門選擇。 但現在，讓我們回到討論移動表單設計。

移動表單設計：11 條用戶體驗指南

“在設計您的移動表單時，”Bullock 解釋說，“保持簡單並儘可能快地完成很重要。 [表格] 在移動設備上更難完成，一切都感覺花費的時間比應該的要長。”

換句話說，最重要的是最終用戶的簡單性。 在創建適合移動設備的表單時，您需要採取一些步驟來為訪問者提供最佳的用戶體驗。 讓我們回顧一下您今天就可以開始實施的 11 個移動表單設計最佳實踐。

1. 盡量減少表單字段的數量。

聽說過“少即是多”這句話嗎？ 嗯，這正是您在創建移動表單時應該考慮的問題。

考慮到移動設備屏幕的大小和您需要在表單中放置的內容量，很容易不小心讓您的表單顯得雜亂無章。 記得去除不必要的絨毛。 僅保留您絕對需要的信息的表單域。

為了簡化流程，您還需要清楚簡潔地標記表單字段，並將可選字段標記為“可選”或在必填字段旁邊加上星號。

圖片來源

目的是使表格盡可能容易填寫，以便人們完成表格的機會增加。

2. 盡可能自動化輸入。

如果您不小心輸入了錯誤的街道地址，而表格為您更正了拼寫，表格會自動更正您的回复。

如果您開始輸入您的送貨地址，然後彈出一個框，其中包含您的其餘地址，詢問您是否要使用您保存的地址“自動填充”其餘的表單字段，那麼您的表單會自動完成您的回复。

通過在您的移動表單上實現自動更正和自動填充功能，您可以讓用戶快速、簡單、直接地輸入他們的詳細信息，從而改善用戶體驗。

在下面的示例中，一個人可以通過單擊出現的小彈出窗口輕鬆地自動填充他們的信息。

圖片來源

3.使用單列佈局。

當您創建長表單或多步驟表單時，請在單列佈局中列出所有內容。

圖片來源

單列表單佈局是：

一種。 更容易閱讀。

將所有表單字段置於單列格式中可以讓訪問者一次只關註一個項目，從而使您的表單更易於閱讀。

b. 不那麼令人生畏。

如果您查看表單，尤其是在狹小的空間內（就像在移動設備上一樣），並且看到大量內容混雜在一起，您可能會感到不知所措。 這就是為什麼按行分隔您的內容並將您的表單字段置於單列格式中可以使您的內容看起來和感覺起來不那麼令人生畏。

C。 更快完成。

當您將多步驟表單放在單列中時，潛在客戶可以比多列表單更快地完成它。 這是因為格式使表單更易於閱讀和逐步完成。

從台式機或筆記本電腦查看 HubSpot 網站上的註冊表單。

圖片來源

兩列佈局在這裡很有意義，因為在更寬的屏幕上有足夠的空間可以使用。 現在在移動設備上查看相同的表單。

圖片來源

這種單列佈局讓眼睛自然流動，同時防止緊湊的移動屏幕上出現混亂。

4. 一致性很重要（外觀也很重要）。

如何關閉筆記本電腦上的文件夾或打開的選項卡？

通過單擊右上角的“x”按鈕。

但是，如果按鈕在特定應用程序上沒有出現怎麼辦？ 當你去關窗時，你會有什麼感覺？

也許是困惑或惱怒。 您可能會花一兩分鐘弄清楚如何關閉應用程序。

這只是一個廣泛的例子，但很好地說明了一致性的重要性。 觀看此視頻以了解更多信息。

表單設計的一致性不僅適用於樣式（顏色、排版、徽標等），還適用於人們習慣的普遍接受的慣例。

以下是確保一致體驗的一些提示：

• 使表單的外觀與您的品牌和網站相匹配。
• 確保表單的樣式和格式一致且互補（任何東西都不應看起來不協調或不合適）。
• 將您的表單字段輸入對齊到左側。
• 將每個標籤貼在其對應的輸入框上方並左對齊。
• 使用星號表示必答題。

圖片來源

第一印象會留下持久的印象（在生活和商業中）。 這適用於您的移動表單。 沒有人願意完成一個黑暗的、難以閱讀的、雜亂的、沒有吸引力的表格。

您的移動表單應該既實用又美觀。 它的外觀應該有助於提高可讀性和積極的用戶體驗。 為實現這一點，請使用簡單易讀的字體樣式和大小、不會讓人感到壓倒性的調色板以及最少的表單字段。

5.牢記觸摸體驗。

想一想您在發短信時如何握住手機。

最有可能的是，用兩隻手握住手機，同時使用拇指與屏幕交互。 或者您甚至可以單手操作或使用食指打字。

我們與智能手機的交互方式與筆記本電腦或台式機的交互方式大不相同（提示短信拇指），移動表單設計應該反映這一點。

以下是一些需要牢記的建議：

• 留出足夠的空白以保持表格整潔並避免意外按下按鈕。
• 確保按鈕的位置合理（例如，提交按鈕靠近表單底部，這樣用戶不必向上滾動就能找到它）。
• 檢查文本（字體大小和样式）在小移動屏幕上是否清晰可辨（沒有人願意捏住他們的屏幕並放大以便能夠閱讀文本）。
• 確保表單字段和按鈕足夠大，以便用手指輕敲。
• 使表單彈出到屏幕的下部（如果可能），以便於訪問。

圖片來源

6. 利用輸入限制。

輸入約束限制了一個人可以在表單字段中輸入的響應類型。 這可能包括字數限制（例如，在填寫工作申請表時）或只能輸入數字（在電話號碼的情況下）。

這可以在下面的表格中看到，當一個人去輸入他們的電話號碼時，會彈出一個數字鍵盤。

圖片來源

輸入約束通過限制無意的錯誤、延遲或混淆來最大化表單效率。 例如，如果某人試圖在一家餐廳預訂餐桌，但不小心選擇了過去的日期，則該約束將阻止他們實際能夠選擇和確認該日期。

這在為移動設備設計時尤為重要，因為較小的屏幕使得準確輸入信息變得更加困難。 通過設置輸入限制，您可以在填寫表單字段時節省人們的時間，並防止您自己收到冗長或無效的答案。

這是輸入約束的另一個示例。

圖片來源

7. 創建清晰的操作按鈕。

按鈕是移動表單設計中被低估的一個方面。 想一想：只有在按下右鍵後，您才會獲得表單提交或轉換。 所以你真的不能忽視這個元素。

這個 UI 備忘單和 UX Planet 博客是設計有效按鈕的重要資源。 以下是您可以應用於移動表單的一些上述原則的快速瀏覽。

• 太多的按鈕破壞了肉湯（就像表單字段一樣，只保留必要的按鈕）。
• 一致地設計和標記按鈕（大寫、格式、對齊等）。
• 通過大小或顏色突出主按鈕（您希望用戶執行的主要操作），讓焦點閃耀在主按鈕上。
• 右就是右——移動設備的一個常見經驗法則是將主按鈕放在右側，第二個按鈕放在左側（儘管這可能會根據個人需要而有所不同）。
• 特定的標籤幾乎總是答案（“編輯此頁面”而不是“編輯”）。

圖片來源

8. 提供刷卡器進行支付。

嘗試通過智能手機以表格形式輸入您的信用卡詳細信息嗎？ 在小屏幕上用小鍵盤輸入一堆數字可能是一個乏味的過程。

出於這個原因，卡片掃描應用程序（例如 Microblink）變得越來越流行。 進行購買時，您的訪問者可以點擊一個按鈕，將他們帶到一個屏幕，在那裡他們可以使用他們的移動設備的相機拍攝他們的卡正面和背面的安全照片，無論是他們的執照還是信用卡。

圖片來源

只需幾張圖片，您的潛在客戶就可以完成移動表單完成過程中最耗時的部分之一——讓您的訪客保持高效、沮喪和無錯誤。

9. 解釋對特定信息的需求。

在完成簡單的電子郵件註冊或註冊表時，您是否曾被要求提供與註冊表本身無關的個人信息？

這在所有類型的表單中都很常見（不僅僅是移動）。 向某人詢問個人或其他敏感信息而不解釋您的需求，這看起來很粗略。

當詢問與訪問者填寫表格的原因沒有直接關係的問題時，必須創建一個摘要框（包含附加信息），訪問者可以單擊該框以了解您詢問此信息的原因。

當說明不是很明顯時，此類指示符還可以幫助提供有關填寫表單字段的額外指導。 在下圖中，當有人將鼠標懸停在圖標上時，會彈出一個摘要框。

圖片來源

這些小細節將使您的表單感覺專業和周到，同時減少用戶中途離開的機率。

10. 收集驗證和反饋。

用戶體驗是良好移動表單設計的核心。 驗證和反饋在提供出色的用戶體驗方面發揮著重要作用。

驗證讓人們知道他們輸入的信息是否正確。 請注意下方表單字段中的綠色勾號。

圖片來源

在填寫移動表單時，您的訪問者一定會在這里或那裡犯錯誤。 表單應實時標記這些錯誤，以便用戶可以立即更正它們。

例如，如果有人在他們的街道地址旁邊添加了錯誤的郵政編碼，則移動表單應顯示一條錯誤消息。 這應該以易於理解的語言指示錯誤位置以及此人如何糾正錯誤（如下圖所示）。

圖片來源

在人們填寫表格時給予反饋也很重要。 例如，冗長的多步驟表單上的進度條可以通過向用戶顯示他們已經完成了多長時間以及他們還剩下多長時間來完成表單填寫過程，從而使表單填寫過程更具吸引力。

圖片來源

考慮一個人在沒有進度條的情況下填寫上述表格。 他們會在不知道表單何時結束的情況下點擊“下一步”按鈕，甚至可能在最後一步之前放棄它，感到沮喪。

一旦人們提交了他們的表格，你應該將他們引導到另一個屏幕或頁面，上面寫著類似“成功！”的字樣。 或“謝謝”，讓他們知道他們的提交有效。

下面是 HubSpot 上的一個成功頁面示例，該頁面在用戶註冊接收免費的 Google Ads 工具包後出現。

圖片來源

11. 使表單易於訪問。

輔助功能是表單可用性的基礎。 在設計時考慮到可訪問性的表單可供更廣泛的人使用，包括那些有視覺、身體、感官和認知障礙的人。

以下是萬維網聯盟 Web 可訪問性倡議、WebAIM 和 A11Y 項目清單中創建可訪問表單的一些具體建議。

• 在放大表單時檢查文本是否像素化或變得模糊（為了更好的可視化）。
• 以屏幕閱讀器閱讀時可以清楚理解的方式標記您的表單元素。
• 確保您的表單可以在縱向和橫向模式下訪問。
• 避免使用時間限制（如果可能）來讓人們有足夠的時間做出回應。
• 在表單中包含任何視頻或音頻組件的字幕或文字記錄。
• 記住顏色對比。 這是一個可以幫助解決這個問題的免費工具。
• 檢查您的表單是否僅需鍵盤即可完全使用。

確保上述所有移動表單設計策略堅持下去的一個好方法是探索您在表單設計中不應該做的事情。 下面的視頻展示了一些在移動和桌面上設計表單時不要做的事情的例子。

回到你身邊

您的網站訪問者正在通過他們的移動設備填寫和提交您的網絡表單，這已經不是什麼秘密了。 這是因為它既方便又高效，因為大多數人隨身攜帶某種類型的移動設備，這使得您的表單對移動設備友好至關重要。

否則，您的表格將難以閱讀、填寫和提交，這可能會阻礙您的潛在客戶或導致您完全失去他們的業務。

通過考慮您的移動表單設計並實施這些準則，您將增強您的移動表單用戶體驗，與您的潛在客戶和客戶建立積極的關係，並提高您的轉化率。

編者註：這篇文章最初發表於 2018 年 12 月，為了全面性已經更新。