閱讀完「如何再App表單設計上留住用戶？（上）」之後，接下來筆者為大家展示的是文章的後半部分——作為設計師，如何更好地簡化表單設計的流程，提高用戶體驗，避免用戶因為表單填寫複雜而放棄填寫。
二、欄位標籤
1. 書寫清晰、簡明的標籤
標籤：告知用戶在特定輸入欄位中期望哪些數據的文本。
書寫清晰的標籤是使表單更易於訪問的最佳方式之一。標籤應幫助用戶了解一眼所需的信息，避免使用完整的句子來解釋，標籤不是幫助文本。寫出簡潔清晰的標籤(一兩個字)，這樣用戶就可以快速掃描表單。
2. 將標籤和輸入緊密地放在一起
把每個標籤靠近輸入欄位，因為眼睛會在視覺上知道它們是綁在一起的。
3. 不要使用消失的佔位符文本作為標籤
雖然內聯標籤看起來很好，並且節省了寶貴的屏幕產業，但這些好處遠遠超過了顯著的可用性缺陷，其中最關鍵的是上下文的丟失。
當用戶開始在欄位中輸入文本時，佔位符文本將消失，並迫使用戶回憶這些信息。雖然對於簡單的雙欄位表單來說，這可能不是一個問題，但是對於有很多欄位(例如，7到10)的表單來說，這可能是一個很大的問題。在輸入數據後，用戶很難回憶起所有欄位標籤。
毫不奇怪，用戶測試不斷表明表單欄位中的佔位符對可用性的影響往往大於幫助。
消除佔位符的問題有一個簡單的解決方案：浮動(或自適應)標籤。
當用戶使用標籤佔位符點擊欄位後，標籤不會消失，它會移動到欄位的頂部，為用戶輸入數據騰出空間。
4. 頂部對齊標籤
將欄位標籤置於表單中的欄位上方，會提高用戶掃描表單的方式。
使用眼睛跟蹤技術，谷歌顯示：在提交表單之前，用戶需要更少的固定時間、更少的固定時間和更少的掃視。
頂級標籤的另一個重要優點是：它們為標籤提供了更多的空間。
長標籤和本地化版本將更容易適應布局。後者特別適用於小型移動屏幕，您可以讓表單欄位擴展屏幕的全部寬度，使其足夠大以顯示用戶的整個輸入。
5. 句子案列vs標題案例
有兩種常用的詞語大寫方式：
標題案例：每個首字母都進行大寫——「This Is Title.」句子案例：句子的第一個單詞首字母進行大寫——「This is sentence.」相比標題大小寫，使用句子大小寫標籤有一個優點：它稍微容易(因此，更快)閱讀。
雖然短標籤的區別可以忽略不計(「全名」和「全名」之間沒有太大的區別)，但對於較長的標籤來說，句子大小寫更好。
現在你知道，在標題中讀長文是多麼困難了。
6. 避免使用全大寫作為標籤
「全大寫文本 - 」：指的是帶有所有字母的文本( - )，在不涉及實質性閱讀(如縮略語和徽標)的上下文中，文本是可以的，但避免使用其他所有大寫字母。
正如，邁爾斯·廷克在他的著作「印刷的清晰性」中所提到的那樣：與小寫字體相比，全大寫印刷大大降低了掃描和閱讀的速度。
三、布局
1. 使用單列布局
CXL研究所的一項研究發現：單列表單比多列表單更快完成。
在這項研究中，測試參與者能夠完成單列表格，比多列表格平均快15.4秒。
多列，會破壞用戶的垂直動量；多列，眼睛開始曲折。
這會大大地增加了眼睛的固定數量，因此，完成時間。
此外，多列表單可能會在用戶中引發不必要的問題，例如：
我應該從哪裡開始？右邊欄中的問題與左邊欄中的問題同等重要嗎？在單列設計中，眼睛向一個自然方向移動，從上到下，一次一行，這有助於為用戶設置明確的路徑。
一列是很好的移動，因為屏幕是較長的垂直，垂直滾動是移動用戶的自然運動。
但，這條規則有一些例外，可以將簡短和邏輯相關的欄位放在同一行(例如城市和區號)。
2. 用你的問題創建一個流程
你問問題的方式也很重要：應在邏輯上，從用戶的角度詢問問題，而不是根據應用程式或資料庫的邏輯，因為它將有助於創建與用戶的對話感。
例如：如果您設計了檢出表，並詢問詳細信息（如全名、電話號碼和信用卡），第一個問題應該是完整的名稱。更改訂單（例如，從電話號碼開始，而不是名稱）將會導致不適。就像在現實世界的對話中，在詢問某人的名字之前要求某人的電話號碼是不尋常的。
3. 把深入的問題拖到最後
當涉及到為您想問的問題設計一個流程時，請考慮優先級。遵循「先易後難」的原則，把深度或個人問題放在最後，這會幫助用戶更加容易地進入這一過程。
一旦他們建立了良好的關係，他們就更有可能回答覆雜和更具侵擾性的問題。
這是有科學依據的：羅伯特·恰爾迪尼的一致性原則規定，當一個人對某事採取小的行動或步驟時，他們會感到更有必要去完成。
4. 組相關欄位
格式塔心理學的一項原則——接近原則，認為相關的因素應該是相互接近的。
這一原則可以適用於一種形式的問題順序——相關的問題越多，它們之間就應該越接近。
設計人員可以將相關欄位分組為區段。如果表單有六個以上的問題，請將相關問題分組為邏輯部分。不要忘記在各部分之間提供大量的空白，以便在視覺上區分它們。
5. 做一個長的表單看起來更簡單
如何設計一個能向用戶提出很多問題的表單？
當然，你可以把所有的問題放在一個屏幕上，但這會妨礙你的完成率。
如果用戶沒有足夠的動力完成表單，表單的複雜性可能會嚇跑他們。第一印象起著至關重要的作用，一般來說，表單看起來越長或越複雜，用戶開始填寫空白的可能性就越小。
儘可能最小化一次可見的欄位數，這就產生了一種感覺——即形式比實際的要短。
有兩種技術可以做到這一點：
逐步解密：
漸進的公開是關於：在正確的時間給用戶正確的東西。
目標是：在合適的時間找到合適的東西放在小屏幕上。
最初，只向用戶展示幾個最重要的選項。而當用戶與表單交互時，則顯示錶單的部分內容。
程序分塊：
chunking需要將一個長的形式分成幾個步驟。
可以通過將表單分成幾個步驟來提高完成率。Chunking還可以幫助用戶處理、理解和記住信息。在設計多步驟表單時，總是用完整的表通知用戶他們的進度。
設計人員使用進度跟蹤器（如上面的示例所示）或「步驟#退出#」指示符，既可以指出總共有多少個步驟，也可以顯示用戶目前距離的有多遠。
後一種方法對於移動表單可能是很好的，因為步驟指示不會佔用太多的空間。
四、操作按鈕
指示用戶採取行動的交互式元素。
1. 使操作按鈕具有描述性
按鈕的標籤應該解釋按鈕的功能，用戶只需看一下按鈕就可以理解：點擊後會發生什麼？
避免使用通用標籤，如：「提交」和「發送」，而使用描述操作的標籤。
2. 不要使用清除或重置按鈕
清除或重置按鈕允許用戶在窗體中擦除其數據。
這些按鈕幾乎從不幫助用戶，而且常常會傷害用戶。刪除用戶輸入的所有信息的風險，超過了不得不重新啟動的小好處。如果用戶填寫了表單，不小心按錯了按鈕，那麼很有可能他們不會重新開始。
3. 對主按鈕和輔助按鈕使用不同的樣式
如果可能的話，避免二次行動。
但是，如果表單有兩個操作調用(例如：具有「應用折扣」和「提交訂單」)按鈕的電子商務表單，請確保主操作和次要操作之間有明確的視覺區別。視覺優先的主要行動，增加更多的視覺重量按鈕，這將防止用戶點擊錯誤的按鈕。
4. 設計手指友好觸控目標
微小的觸摸目標產生了可怕的用戶體驗，因為它們使得用戶能夠與交互對象交互。
設計手指友好的觸摸目標是至關重要的：更大的輸入欄位和按鈕。
（下圖顯示平均成人手指的寬度約為11mm。）
根據材料設計指南：觸摸目標應至少為48/48DP。不管屏幕尺寸如何，該尺寸的觸摸目標都是大約9mm的物理尺寸。
使用更大的觸摸目標來適應更寬的用戶頻譜可能是合適的。
不僅目標尺寸重要，而且觸控目標之間有足夠的空間也很重要。
在觸摸目標之間保持安全距離的主要原因是：防止用戶觸摸錯誤的按鈕和調用錯誤的操作。
當像「同意」和「不同意」這樣的二進位選擇被放置在一起時，按鈕之間的距離變得非常重要。
材料設計指南建議：將觸點目標與8 DP或更多的空間分開，這將創造平衡的信息密度和可用性。
5. 設點擊後禁用按鈕
表單操作通常需要一些時間來處理。
例如：提交後可能需要數據計算。
重要的是，不僅要在操作進行時提供反饋，而且要禁用Submit按鈕，以防止用戶意外地再次點擊按鈕。
這對於電子商務網站和應用尤其重要。通過禁用按鈕，不僅可以防止重複提交(這可能是偶然發生的)，而且還可以向用戶提供有價值的確認(用戶將知道系統已經收到了他們的提交)。
五、幫助與支持
1. 提供成功狀態
在成功完成表單後，通知用戶這一點至關重要。
可以在現有表單的上下文中提供此信息(例如，顯示刷新表單上方的綠色複選標記)，也可以將用戶引導到一個新頁面，該頁面表明提交已經成功。
2. 錯誤與驗證
用戶會犯錯誤，這是不可避免的。
所以，在故障時刻設計一個支持用戶的用戶界面是至關重要的。
雖然錯誤和驗證這一主題值得自己寫一篇文章，但是，仍然值得一提的是：為了改進移動表單的用戶體驗，應該做一些事情。
對每個欄位使用輸入約束：
預防勝於治療。如果您是經驗豐富的設計師，則應熟悉可能導致錯誤狀態（易出錯狀態）的最常見的案例。
例如：通常很難在第一次嘗試中正確填寫表單，或者在行動裝置具有不良網絡連接時正確同步數據。
那麼就應該考慮到這些情況，以最大限度地減少錯誤的可能性。
換句話說：通過利用約束和提供建議，更好地防止用戶在第一位置出錯。
例如：如果您設計的表單允許人們搜索酒店預訂，您應該阻止用戶選擇過去的籤入日期。
如下面的Booking.com示例所示：
您可以簡單地使用一個日期選擇器，它只允許用戶選擇今天的日期或將來的日期。這樣的選擇器將迫使用戶選擇適合的日期範圍。
不要使數據驗證規則太嚴格
雖然在某些情況下使用嚴格的驗證規則是必要的，但在大多數情況下，嚴格的驗證是懶惰編程的標誌。
當用戶以與預期稍有不同的格式提供數據時，在屏幕上顯示錯誤會造成不必要的摩擦，這將對轉換產生負面影響。
一個問題答案的幾個變體是可能的，例如：當表單要求用戶提供有關其狀態的信息時，用戶的響應方式是輸入他們州的縮寫而不是全名（例如CA而不是加利福尼亞）。
表單應該接受這兩種格式，開發人員的任務是：將數據轉換成一致的格式。
明確錯誤信息
當您編寫錯誤消息時，集中注意儘量減少用戶在與表單交互中，遇到問題時所感受到的挫折感。
以下是關於編寫有效錯誤消息的幾條規則：
從不責備用戶：傳遞錯誤消息的方式可能會對用戶對其感知的方式產生巨大影響。一個錯誤消息，例如：假如用戶輸入了錯誤的號碼，所有的責任都將被歸咎於用戶。這樣，用戶可能會受到挫折，並放棄應用程式。寫複製，聽起來是中性的或積極的。一個中性的消息聽起來像：「數字不正確。」避免模糊或一般錯誤信息：比如「出問題了，請稍後再試。」，沒有對用戶說太多話，用戶就會想知道到底出了什麼問題。要一直試圖地解釋問題的根源，確保用戶知道如何修復錯誤。使錯誤信息具有可讀性：不要出現像「用戶輸入錯誤：0x100999」這樣既神秘又可怕的錯誤信息。要像人類一樣寫作，而不是機器人。使用人類語言，解釋：用戶或系統到底做錯了什麼？以及用戶應該做什麼來解決問題？內聯顯示錯誤
當涉及到顯示錯誤消息時，設計人員選擇兩個位置之一：表單頂部或內聯。
第一種選擇可能會帶來糟糕的體驗。
Javier Bargas-Avila和Glenn Oberholzer對在線表單驗證進行了研究，發現：在表單頂部顯示所有錯誤信息會給用戶內存帶來很高的認知負荷。用戶需要花費額外的時間將錯誤消息與需要注意的欄位進行匹配。
最好將錯誤消息內聯放置。
首先，這個位置與用戶自然的自上而下的閱讀流程相對應。其次，錯誤將出現在用戶輸入的上下文中。
內使用動態驗證
選擇顯示錯誤消息的時間至關重要。
只有在按下Submit按鈕後才會看到錯誤消息，這可能會使用戶感到沮喪。不要等到用戶完成表單後，在輸入數據時提供反饋。
使用帶實時反饋的內聯驗證，這個驗證立即告訴人們他們輸入的信息是否與表單的要求兼容。
2009年，LukeWroblewski根據提交後的驗證對內聯驗證進行了測試，並為內聯版本找到了以下結果：
成功率提高22%錯誤減少22%滿意度提高31%完成時間減少42%眼球固定次數減少47%但是，應該謹慎地執行內聯驗證：
避免在焦點上顯示內嵌驗證。
在這種情況下，只要用戶輕擊欄位，就會看到一條錯誤消息。即使欄位是完全空的，也會出現錯誤。當一個錯誤消息被顯示在焦點上時，它可能看起來像在用戶開始填充它之前對用戶發出的聲音。
在鍵入每個字符後，不要進行驗證。
這種方法不僅增加了不必要的驗證嘗試的數量，而且還使用戶沮喪（因為用戶在完成欄位之前可能會看到錯誤消息）。
理想情況下，在用戶停止鍵入或移動到下一個欄位後，內聯驗證消息應顯示在500到1000毫秒左右。
此規則有幾個例外：當創建密碼時（要檢查密碼是否滿足複雜性要求），當創建用戶名時（要檢查名稱是否可用），以及在鍵入具有字符限制的消息時，它有助於驗證內聯。
六、易接近，可到達
所有能力的用戶都應該能夠訪問和享受數字產品。設計師在構建產品時應儘可能多地結合可訪問性需求。
以下是一些您可以做的事情，使您的表單更容易訪問。
1. 確保表格有適當的對比
您的用戶可能會在戶外與您的表單交互，所以要確保這是很容易使用，無論是在陽光和低光環境——檢查表單中欄位和標籤的對比度。
W3C建議正文文本的對比度如下：
小文本與其背景的對比度應至少為：4.5：1。大文本(在14點粗體，18點規則和向上)應該有一個至少3：1的對比度與它的背景，測量顏色對比度似乎是勢不可擋的。幸運的是：一些工具使這個過程變得簡單。其中之一是WebAIM顏色對比檢查器，它幫助設計師測量對比度水平。
2. 不要僅僅依靠顏色來傳達狀態
世界上每12名男性（8%）和1名女性中大約有1個人會患有色盲（或色覺缺陷）。
世界上有許多類型的色盲，但最常見的兩種是Protanomaly——或降低對紅光的敏感性，或降低對綠光的敏感性。
顯示驗證錯誤或成功消息時，不要單獨依賴顏色來傳達狀態（即，通過使輸入欄位綠色或紅色）。作為W3C準則狀態，顏色不應被用作傳達信息的唯一可視手段，指示動作、提示響應或區分視覺元素。
設計者應該使用顏色來突出或補充已經可見的內容，通過提供附加的視覺提示來支持彩色盲人，幫助他們理解用戶界面。
3. 不允許用戶控制字體大小
允許用戶增加字體大小以提高可讀性。
行動裝置和瀏覽器包括一些功能：使用戶能夠在整個系統範圍內調整字體大小。
此外，請確保窗體為大字體分配了足夠的空間。
七、測試您的設計決策
上述所有要點均可視為行業最佳實踐。
但不能和僅僅因為某些東西被稱為「最佳實踐」，就認為它始終是您的形式的最佳解決方案。應用程式和網站很大程度上取決於使用它們的上下文。
因此，測試您的設計決策是至關重要的——確保填寫表單的過程是平滑的，流程不會中斷，用戶可以解決他們面臨的任何問題。定期進行可用性測試會話，收集關於用戶交互的所有有價值的數據，並從中學習。
八、結論
用戶可能對填寫表格猶豫不決。因此，作為設計師，我們的目標是使填寫表格的過程儘可能簡單。在設計表單時，要努力創建快速、無摩擦的交互。
有時，一個小的更改——比如：正確地編寫錯誤消息，可以顯著地提高表單的可用性。
本文由 @潘強 原創發布於人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基於 CC0 協議