閱讀完“如何再App表單設(shè)計上留住用戶？（上）”之后，接下來筆者為大家展示的是文章的后半部分——作為設(shè)計師，如何更好地簡化表單設(shè)計的流程，提高用戶體驗，避免用戶因為表單填寫復(fù)雜而放棄填寫。

二、字段標(biāo)簽

1.?書寫清晰、簡明的標(biāo)簽

標(biāo)簽：告知用戶在特定輸入字段中期望哪些數(shù)據(jù)的文本。

書寫清晰的標(biāo)簽是使表單更易于訪問的最佳方式之一。標(biāo)簽應(yīng)幫助用戶了解一眼所需的信息，避免使用完整的句子來解釋，標(biāo)簽不是幫助文本。寫出簡潔清晰的標(biāo)簽(一兩個字)，這樣用戶就可以快速掃描表單。

2.?將標(biāo)簽和輸入緊密地放在一起

把每個標(biāo)簽靠近輸入字段，因為眼睛會在視覺上知道它們是綁在一起的。

3. 不要使用消失的占位符文本作為標(biāo)簽

雖然內(nèi)聯(lián)標(biāo)簽看起來很好，并且節(jié)省了寶貴的屏幕產(chǎn)業(yè)，但這些好處遠遠超過了顯著的可用性缺陷，其中最關(guān)鍵的是上下文的丟失。

當(dāng)用戶開始在字段中輸入文本時，占位符文本將消失，并迫使用戶回憶這些信息。雖然對于簡單的雙字段表單來說，這可能不是一個問題，但是對于有很多字段(例如，7到10)的表單來說，這可能是一個很大的問題。在輸入數(shù)據(jù)后，用戶很難回憶起所有字段標(biāo)簽。

毫不奇怪，用戶測試不斷表明表單字段中的占位符對可用性的影響往往大于幫助。

消除占位符的問題有一個簡單的解決方案：浮動(或自適應(yīng))標(biāo)簽。

當(dāng)用戶使用標(biāo)簽占位符點擊字段后，標(biāo)簽不會消失，它會移動到字段的頂部，為用戶輸入數(shù)據(jù)騰出空間。

4.?頂部對齊標(biāo)簽

將字段標(biāo)簽置于表單中的字段上方，會提高用戶掃描表單的方式。

使用眼睛跟蹤技術(shù)，谷歌顯示：在提交表單之前，用戶需要更少的固定時間、更少的固定時間和更少的掃視。

頂級標(biāo)簽的另一個重要優(yōu)點是：它們?yōu)闃?biāo)簽提供了更多的空間。

長標(biāo)簽和本地化版本將更容易適應(yīng)布局。后者特別適用于小型移動屏幕，您可以讓表單字段擴展屏幕的全部寬度，使其足夠大以顯示用戶的整個輸入。

5.?句子案列vs標(biāo)題案例

有兩種常用的詞語大寫方式：

1. 標(biāo)題案例：每個首字母都進行大寫——“This Is Title.”
2. 句子案例：句子的第一個單詞首字母進行大寫——“This is sentence.”

相比標(biāo)題大小寫，使用句子大小寫標(biāo)簽有一個優(yōu)點：它稍微容易(因此，更快)閱讀。

雖然短標(biāo)簽的區(qū)別可以忽略不計(“全名”和“全名”之間沒有太大的區(qū)別)，但對于較長的標(biāo)簽來說，句子大小寫更好。

現(xiàn)在你知道，在標(biāo)題中讀長文是多么困難了。

6. 避免使用全大寫作為標(biāo)簽

“全大寫文本?-?”：指的是帶有所有字母的文本(?-?)，在不涉及實質(zhì)性閱讀(如縮略語和徽標(biāo))的上下文中，文本是可以的，但避免使用其他所有大寫字母。

正如，邁爾斯·廷克在他的著作“印刷的清晰性”中所提到的那樣：與小寫字體相比，全大寫印刷大大降低了掃描和閱讀的速度。

三、布局

1. 使用單列布局

CXL研究所的一項研究發(fā)現(xiàn)：單列表單比多列表單更快完成。

在這項研究中，測試參與者能夠完成單列表格，比多列表格平均快15.4秒。

多列，會破壞用戶的垂直動量；多列，眼睛開始曲折。

這會大大地增加了眼睛的固定數(shù)量，因此，完成時間。

此外，多列表單可能會在用戶中引發(fā)不必要的問題，例如：

• 我應(yīng)該從哪里開始？
• 右邊欄中的問題與左邊欄中的問題同等重要嗎？

在單列設(shè)計中，眼睛向一個自然方向移動，從上到下，一次一行，這有助于為用戶設(shè)置明確的路徑。

一列是很好的移動，因為屏幕是較長的垂直，垂直滾動是移動用戶的自然運動。

但，這條規(guī)則有一些例外，可以將簡短和邏輯相關(guān)的字段放在同一行(例如城市和區(qū)號)。

2.?用你的問題創(chuàng)建一個流程

你問問題的方式也很重要：應(yīng)在邏輯上，從用戶的角度詢問問題，而不是根據(jù)應(yīng)用程序或數(shù)據(jù)庫的邏輯，因為它將有助于創(chuàng)建與用戶的對話感。

例如：如果您設(shè)計了檢出表，并詢問詳細信息（如全名、電話號碼和信用卡），第一個問題應(yīng)該是完整的名稱。更改訂單（例如，從電話號碼開始，而不是名稱）將會導(dǎo)致不適。

就像在現(xiàn)實世界的對話中，在詢問某人的名字之前要求某人的電話號碼是不尋常的。

3.?把深入的問題拖到最后

當(dāng)涉及到為您想問的問題設(shè)計一個流程時，請考慮優(yōu)先級。遵循“先易后難”的原則，把深度或個人問題放在最后，這會幫助用戶更加容易地進入這一過程。

一旦他們建立了良好的關(guān)系，他們就更有可能回答復(fù)雜和更具侵擾性的問題。

這是有科學(xué)依據(jù)的：羅伯特·恰爾迪尼的一致性原則規(guī)定，當(dāng)一個人對某事采取小的行動或步驟時，他們會感到更有必要去完成。

4.?組相關(guān)字段

格式塔心理學(xué)的一項原則——接近原則，認為相關(guān)的因素應(yīng)該是相互接近的。

這一原則可以適用于一種形式的問題順序——相關(guān)的問題越多，它們之間就應(yīng)該越接近。

設(shè)計人員可以將相關(guān)字段分組為區(qū)段。如果表單有六個以上的問題，請將相關(guān)問題分組為邏輯部分。不要忘記在各部分之間提供大量的空白，以便在視覺上區(qū)分它們。

5.?做一個長的表單看起來更簡單

如何設(shè)計一個能向用戶提出很多問題的表單？

當(dāng)然，你可以把所有的問題放在一個屏幕上，但這會妨礙你的完成率。

如果用戶沒有足夠的動力完成表單，表單的復(fù)雜性可能會嚇跑他們。第一印象起著至關(guān)重要的作用，一般來說，表單看起來越長或越復(fù)雜，用戶開始填寫空白的可能性就越小。

盡可能最小化一次可見的字段數(shù)，這就產(chǎn)生了一種感覺——即形式比實際的要短。

有兩種技術(shù)可以做到這一點：

逐步解密：

漸進的公開是關(guān)于：在正確的時間給用戶正確的東西。

目標(biāo)是：在合適的時間找到合適的東西放在小屏幕上。

最初，只向用戶展示幾個最重要的選項。而當(dāng)用戶與表單交互時，則顯示表單的部分內(nèi)容。

程序分塊：

chunking需要將一個長的形式分成幾個步驟。

可以通過將表單分成幾個步驟來提高完成率。Chunking還可以幫助用戶處理、理解和記住信息。在設(shè)計多步驟表單時，總是用完整的表通知用戶他們的進度。

設(shè)計人員使用進度跟蹤器（如上面的示例所示）或“步驟#退出#”指示符，既可以指出總共有多少個步驟，也可以顯示用戶目前距離的有多遠。

后一種方法對于移動表單可能是很好的，因為步驟指示不會占用太多的空間。

四、操作按鈕

指示用戶采取行動的交互式元素。

1. 使操作按鈕具有描述性

按鈕的標(biāo)簽應(yīng)該解釋按鈕的功能，用戶只需看一下按鈕就可以理解：點擊后會發(fā)生什么？

避免使用通用標(biāo)簽，如：“提交”和“發(fā)送”，而使用描述操作的標(biāo)簽。

2.?不要使用清除或重置按鈕

清除或重置按鈕允許用戶在窗體中擦除其數(shù)據(jù)。

這些按鈕幾乎從不幫助用戶，而且常常會傷害用戶。刪除用戶輸入的所有信息的風(fēng)險，超過了不得不重新啟動的小好處。如果用戶填寫了表單，不小心按錯了按鈕，那么很有可能他們不會重新開始。

3. 對主按鈕和輔助按鈕使用不同的樣式

如果可能的話，避免二次行動。

但是，如果表單有兩個操作調(diào)用(例如：具有“應(yīng)用折扣”和“提交訂單”)按鈕的電子商務(wù)表單，請確保主操作和次要操作之間有明確的視覺區(qū)別。視覺優(yōu)先的主要行動，增加更多的視覺重量按鈕，這將防止用戶點擊錯誤的按鈕。

4. 設(shè)計手指友好觸控目標(biāo)

微小的觸摸目標(biāo)產(chǎn)生了可怕的用戶體驗，因為它們使得用戶能夠與交互對象交互。

設(shè)計手指友好的觸摸目標(biāo)是至關(guān)重要的：更大的輸入字段和按鈕。

（下圖顯示平均成人手指的寬度約為11mm。）

根據(jù)材料設(shè)計指南：觸摸目標(biāo)應(yīng)至少為48/48DP。不管屏幕尺寸如何，該尺寸的觸摸目標(biāo)都是大約9mm的物理尺寸。

使用更大的觸摸目標(biāo)來適應(yīng)更寬的用戶頻譜可能是合適的。

不僅目標(biāo)尺寸重要，而且觸控目標(biāo)之間有足夠的空間也很重要。

在觸摸目標(biāo)之間保持安全距離的主要原因是：防止用戶觸摸錯誤的按鈕和調(diào)用錯誤的操作。

當(dāng)像“同意”和“不同意”這樣的二進制選擇被放置在一起時，按鈕之間的距離變得非常重要。

材料設(shè)計指南建議：將觸點目標(biāo)與8 DP或更多的空間分開，這將創(chuàng)造平衡的信息密度和可用性。

5.?設(shè)點擊后禁用按鈕

表單操作通常需要一些時間來處理。

例如：提交后可能需要數(shù)據(jù)計算。

重要的是，不僅要在操作進行時提供反饋，而且要禁用Submit按鈕，以防止用戶意外地再次點擊按鈕。

這對于電子商務(wù)網(wǎng)站和應(yīng)用尤其重要。通過禁用按鈕，不僅可以防止重復(fù)提交(這可能是偶然發(fā)生的)，而且還可以向用戶提供有價值的確認(用戶將知道系統(tǒng)已經(jīng)收到了他們的提交)。

五、幫助與支持

1. 提供成功狀態(tài)

在成功完成表單后，通知用戶這一點至關(guān)重要。

可以在現(xiàn)有表單的上下文中提供此信息(例如，顯示刷新表單上方的綠色復(fù)選標(biāo)記)，也可以將用戶引導(dǎo)到一個新頁面，該頁面表明提交已經(jīng)成功。

2.?錯誤與驗證

用戶會犯錯誤，這是不可避免的。

所以，在故障時刻設(shè)計一個支持用戶的用戶界面是至關(guān)重要的。

雖然錯誤和驗證這一主題值得自己寫一篇文章，但是，仍然值得一提的是：為了改進移動表單的用戶體驗，應(yīng)該做一些事情。

對每個字段使用輸入約束：

預(yù)防勝于治療。如果您是經(jīng)驗豐富的設(shè)計師，則應(yīng)熟悉可能導(dǎo)致錯誤狀態(tài)（易出錯狀態(tài)）的最常見的案例。

例如：通常很難在第一次嘗試中正確填寫表單，或者在移動設(shè)備具有不良網(wǎng)絡(luò)連接時正確同步數(shù)據(jù)。

那么就應(yīng)該考慮到這些情況，以最大限度地減少錯誤的可能性。

換句話說：通過利用約束和提供建議，更好地防止用戶在第一位置出錯。

例如：如果您設(shè)計的表單允許人們搜索酒店預(yù)訂，您應(yīng)該阻止用戶選擇過去的簽入日期。

如下面的Booking.com示例所示：

您可以簡單地使用一個日期選擇器，它只允許用戶選擇今天的日期或?qū)淼娜掌?。這樣的選擇器將迫使用戶選擇適合的日期范圍。

不要使數(shù)據(jù)驗證規(guī)則太嚴格

雖然在某些情況下使用嚴格的驗證規(guī)則是必要的，但在大多數(shù)情況下，嚴格的驗證是懶惰編程的標(biāo)志。

當(dāng)用戶以與預(yù)期稍有不同的格式提供數(shù)據(jù)時，在屏幕上顯示錯誤會造成不必要的摩擦，這將對轉(zhuǎn)換產(chǎn)生負面影響。

一個問題答案的幾個變體是可能的，例如：當(dāng)表單要求用戶提供有關(guān)其狀態(tài)的信息時，用戶的響應(yīng)方式是輸入他們州的縮寫而不是全名（例如CA而不是加利福尼亞）。

表單應(yīng)該接受這兩種格式，開發(fā)人員的任務(wù)是：將數(shù)據(jù)轉(zhuǎn)換成一致的格式。

明確錯誤信息

當(dāng)您編寫錯誤消息時，集中注意盡量減少用戶在與表單交互中，遇到問題時所感受到的挫折感。

以下是關(guān)于編寫有效錯誤消息的幾條規(guī)則：

• 從不責(zé)備用戶：傳遞錯誤消息的方式可能會對用戶對其感知的方式產(chǎn)生巨大影響。一個錯誤消息，例如：假如用戶輸入了錯誤的號碼，所有的責(zé)任都將被歸咎于用戶。這樣，用戶可能會受到挫折，并放棄應(yīng)用程序。寫復(fù)制，聽起來是中性的或積極的。一個中性的消息聽起來像：“數(shù)字不正確。”
• 避免模糊或一般錯誤信息：比如“出問題了，請稍后再試?！?，沒有對用戶說太多話，用戶就會想知道到底出了什么問題。要一直試圖地解釋問題的根源，確保用戶知道如何修復(fù)錯誤。
• 使錯誤信息具有可讀性：不要出現(xiàn)像“用戶輸入錯誤：0x100999”這樣既神秘又可怕的錯誤信息。要像人類一樣寫作，而不是機器人。使用人類語言，解釋：用戶或系統(tǒng)到底做錯了什么？以及用戶應(yīng)該做什么來解決問題？

內(nèi)聯(lián)顯示錯誤

當(dāng)涉及到顯示錯誤消息時，設(shè)計人員選擇兩個位置之一：表單頂部或內(nèi)聯(lián)。

第一種選擇可能會帶來糟糕的體驗。

Javier Bargas-Avila和Glenn Oberholzer對在線表單驗證進行了研究，發(fā)現(xiàn)：在表單頂部顯示所有錯誤信息會給用戶內(nèi)存帶來很高的認知負荷。用戶需要花費額外的時間將錯誤消息與需要注意的字段進行匹配。

最好將錯誤消息內(nèi)聯(lián)放置。

首先，這個位置與用戶自然的自上而下的閱讀流程相對應(yīng)。其次，錯誤將出現(xiàn)在用戶輸入的上下文中。

內(nèi)使用動態(tài)驗證

選擇顯示錯誤消息的時間至關(guān)重要。

只有在按下Submit按鈕后才會看到錯誤消息，這可能會使用戶感到沮喪。不要等到用戶完成表單后，在輸入數(shù)據(jù)時提供反饋。

使用帶實時反饋的內(nèi)聯(lián)驗證，這個驗證立即告訴人們他們輸入的信息是否與表單的要求兼容。

2009年，LukeWroblewski根據(jù)提交后的驗證對內(nèi)聯(lián)驗證進行了測試，并為內(nèi)聯(lián)版本找到了以下結(jié)果：

• 成功率提高22%
• 錯誤減少22%
• 滿意度提高31%
• 完成時間減少42%
• 眼球固定次數(shù)減少47%

但是，應(yīng)該謹慎地執(zhí)行內(nèi)聯(lián)驗證：

避免在焦點上顯示內(nèi)嵌驗證。

在這種情況下，只要用戶輕擊字段，就會看到一條錯誤消息。即使字段是完全空的，也會出現(xiàn)錯誤。當(dāng)一個錯誤消息被顯示在焦點上時，它可能看起來像在用戶開始填充它之前對用戶發(fā)出的聲音。

在鍵入每個字符后，不要進行驗證。

這種方法不僅增加了不必要的驗證嘗試的數(shù)量，而且還使用戶沮喪（因為用戶在完成字段之前可能會看到錯誤消息）。

理想情況下，在用戶停止鍵入或移動到下一個字段后，內(nèi)聯(lián)驗證消息應(yīng)顯示在500到1000毫秒左右。

此規(guī)則有幾個例外：當(dāng)創(chuàng)建密碼時（要檢查密碼是否滿足復(fù)雜性要求），當(dāng)創(chuàng)建用戶名時（要檢查名稱是否可用），以及在鍵入具有字符限制的消息時，它有助于驗證內(nèi)聯(lián)。

六、易接近，可到達

所有能力的用戶都應(yīng)該能夠訪問和享受數(shù)字產(chǎn)品。設(shè)計師在構(gòu)建產(chǎn)品時應(yīng)盡可能多地結(jié)合可訪問性需求。

以下是一些您可以做的事情，使您的表單更容易訪問。

1. 確保表格有適當(dāng)?shù)膶Ρ?/h3>

您的用戶可能會在戶外與您的表單交互，所以要確保這是很容易使用，無論是在陽光和低光環(huán)境——檢查表單中字段和標(biāo)簽的對比度。

W3C建議正文文本的對比度如下：

• 小文本與其背景的對比度應(yīng)至少為：4.5：1。
• 大文本(在14點粗體，18點規(guī)則和向上)應(yīng)該有一個至少3：1的對比度與它的背景，測量顏色對比度似乎是勢不可擋的。

幸運的是：一些工具使這個過程變得簡單。其中之一是WebAIM顏色對比檢查器，它幫助設(shè)計師測量對比度水平。

2. 不要僅僅依靠顏色來傳達狀態(tài)

世界上每12名男性（8%）和1名女性中大約有1個人會患有色盲（或色覺缺陷）。

世界上有許多類型的色盲，但最常見的兩種是Protanomaly——或降低對紅光的敏感性，或降低對綠光的敏感性。

顯示驗證錯誤或成功消息時，不要單獨依賴顏色來傳達狀態(tài)（即，通過使輸入字段綠色或紅色）。作為W3C準則狀態(tài)，顏色不應(yīng)被用作傳達信息的唯一可視手段，指示動作、提示響應(yīng)或區(qū)分視覺元素。

設(shè)計者應(yīng)該使用顏色來突出或補充已經(jīng)可見的內(nèi)容，通過提供附加的視覺提示來支持彩色盲人，幫助他們理解用戶界面。

3. 不允許用戶控制字體大小

允許用戶增加字體大小以提高可讀性。

移動設(shè)備和瀏覽器包括一些功能：使用戶能夠在整個系統(tǒng)范圍內(nèi)調(diào)整字體大小。

此外，請確保窗體為大字體分配了足夠的空間。

七、測試您的設(shè)計決策

上述所有要點均可視為行業(yè)最佳實踐。

但不能和僅僅因為某些東西被稱為“最佳實踐”，就認為它始終是您的形式的最佳解決方案。應(yīng)用程序和網(wǎng)站很大程度上取決于使用它們的上下文。

因此，測試您的設(shè)計決策是至關(guān)重要的——確保填寫表單的過程是平滑的，流程不會中斷，用戶可以解決他們面臨的任何問題。定期進行可用性測試會話，收集關(guān)于用戶交互的所有有價值的數(shù)據(jù)，并從中學(xué)習(xí)。

八、結(jié)論

用戶可能對填寫表格猶豫不決。因此，作為設(shè)計師，我們的目標(biāo)是使填寫表格的過程盡可能簡單。在設(shè)計表單時，要努力創(chuàng)建快速、無摩擦的交互。

有時，一個小的更改——比如：正確地編寫錯誤消息，可以顯著地提高表單的可用性。

本文由 @潘強 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議