你盡你所能 創建一個網站 這將引導訪問者進行轉換。 當您研究分析時,您會很高興地看到您創建的用戶旅程一次又一次地得到訪問者的支持。 然而,有一些東西阻止他們被轉換。

Le 聯繫表格 是訪客旅程的重要組成部分。 即使您實際上擁有網站可以提供的幾乎所有內容, 聯繫表格 如果使用不當可能會破壞體驗。 「損壞的」按鈕、混亂的欄位、太多的步驟、雜亂的介面…甚至是 聯繫表格 可能會破壞使用者體驗。

有很多事情可能會出錯。

5建立完美聯繫表的規則

2014 年發布的一項谷歌眼動追踪研究表明,遵循最基本的設計使用指南 形式 將顯著改善用戶體驗。 具體來說,當聯繫表滿足所有規則時,78% 的用戶可以一次性填寫並提交。 然而,當聯繫表違反這些規則時,只有 42% 的人能夠一次嘗試這樣做。

好奇這些規則是什麼? 因此,請繼續閱讀。

規則1:專注於對齊

正如您將在此處的其他規則中看到的那樣,人們通常關心的是 形式 聯繫,這往往會導致糟糕的設計選擇。 以對齊問題為例。

您可能會在BrainTraffic網站上看到類似這樣的表格,並認為:嗯……那不是太長了嗎?

填寫form.png

解決此“問題”的一種方法是將標籤向左移動,並將答案字段向右移動。 但是,UX專家會告訴您這是主要的禁止事項,因為它會損害掃描表單的能力。 如果您考慮將這些字段水平相鄰放置,則同樣適用。

如果你想要你的 形式 觸點符合對齊標準,您需要執行以下操作:

  • 將所有標籤,表單字段和主要的號召性用語按鈕向左對齊。
  • 切勿水平對齊相關字段。 您可以在邏輯上構造表單,但是每個問題或字段都應垂直堆疊。
  • 任何具有多項選擇題(選項少於六個)的字段都必須顯示在點或複選框的垂直列表中,而不是在下拉菜單中。

規則2:包括所有相關字段

在設計聯繫表單時,您可能會認為越短越好,對嗎? 並非總是如此。 最重要的是,您為用戶提供了所有必要且相關的字段。

Unbounce的高級轉化優化工具Michael Aagaard做了 演講 在2015年解決了這個問題。 他和他的團隊想知道如果縮短此聯繫表會發生什麼:

聯繫方式的例子court.png

如您所見,他們刪除了他們認為不必要的字段,以簡化填寫表單的過程。 但是,測試結束後,他們發現轉換形式較短的轉化率下降了14%。

規則#3:簡化字段

用戶是否正在使用台式機或移動設備與您的聯繫表單進行交互,或者他們是否需要輔助技術來幫助他們,都必須配備該表單。簡化入境手續。

這是您應該知道的一些技術:

製表
對於桌面用戶和具有可訪問性問題的用戶,請確保您的聯繫表已啟用邏輯選項卡排序。

輸入掩碼
可以使用戶使用自動將其格式化的輸入掩碼來添加它們,而不是強迫用戶猜測要如何格式化某些字段。

格式化字段html.png

Google自動補全
而不是編碼每個字段,以便 形成 根據要遵守的標準自動執行,請使用Google Addresses自動填充插件激活自動填充。 這不僅使您免於處理拼寫錯誤和錯誤填寫地址的麻煩,而且還使您的訪客免於鍵入大多數此類信息。

規則#4:全部退出

雖然我意識到此規則將違背極簡主義的基本原則,但是您應該密切注意這條規則,以避免不必要地使您的訪客感到沮喪。

讓我解釋一下:您有一個看起來很簡單的聯繫表。 您的用戶根據標籤的建議進行填寫,然後單擊“提交”按鈕。 然後他們收到一條可怕的紅色消息:“您做錯了! 返回,更正表格並寄回! ” 

您可能以用戶身份遇到過它,並且知道它會令人沮喪,尤其是當引發錯誤時,您輸入的某些信息被刪除時。 因此,不要讓用戶猜測什麼需要修復以及如何解決,不要讓它到達這一點。 拼寫途中的所有內容:

  • 在該領域(尤其是在移動領域)提供重點,以便用戶確切地知道他們在哪裡填寫表格。
  • 如果您不使用輸入掩碼自動格式化字段,請寫下所有格式要求。
  • 明確指出字段何時為“可選”(使用單詞,而不是紅色星號)。
  • 輸入用戶時,讓用戶選擇顯示或隱藏密碼字段。
  • 用戶參與到字段中後立即顯示錯誤消息。 不要等到最後。

形式wordpress.png錯誤

規則#5:不隱藏建議

聯繫人表單中的板文本如下所示:

領域與tips.png

查看目標如何將標籤放置在字段中? 在某些聯繫表中,這些標籤/指示僅在用戶單擊字段時消失。 目標對此稍有不同,將標籤移到字段框的頂部(請參閱“電子郵件地址”)。

無論如何處理,可用性專家(例如該小組) 尼爾森諾曼, 會告訴您這是不良的設計習慣,因為:

  • 對於下一個領域中的多任務處理,分心或過於快節奏的用戶而言,這是個問題。 當線索消失時,用戶必須離開該字段才能重新發現他們需要的東西。
  • 消失的提示還會阻止用戶返回表格來檢查其工作或更正錯誤,而無需完全刪除響應以查看下面的內容。
  • 用於佔位符提示的較淺的灰色文本不是易於閱讀的理想選擇。
  • 帶有提示文本的字段可以與已經填寫數據的字段混淆,從而使用戶忽略它們,提交表單並收到錯誤消息。
  • 某些屏幕閱讀工具無法閱讀提示文本。

根據NNG,用戶發現空字段比包含線索文本的字段更具吸引力。 即使您的表單看起來更長,將這些標籤或描述符放置在字段上方,它也會提高可用性。

就是這些提示,希望它們能幫助您建立更好的聯繫表。