Hi，我是小紀(jì)。我們每天都在填寫(xiě)各種表單，例如發(fā)帖、填單、登錄等等。然而，在填寫(xiě)時(shí)經(jīng)常容易出錯(cuò)，例如可能會(huì)輸錯(cuò)密碼。從用戶(hù)體驗(yàn)角度看，幫助用戶(hù)盡可能順利地處理這些錯(cuò)誤至關(guān)重要。
對(duì)于我們?cè)O(shè)計(jì)師來(lái)說(shuō)，尤其是現(xiàn)在 B 端設(shè)計(jì)如此流行的情況下，表單設(shè)計(jì)細(xì)節(jié)尤其需要各位設(shè)計(jì)師注意。今天會(huì)分享表單設(shè)計(jì)中那些你不注意的細(xì)節(jié)點(diǎn)，必須先點(diǎn)贊收藏了，這些干貨知識(shí)相信你一定用的上。
比如以登錄為例，當(dāng)你把密碼輸錯(cuò)后，網(wǎng)站清空你剛剛才填好的表單，是不是非常讓你崩潰？刪除所有數(shù)據(jù)對(duì)用戶(hù)來(lái)說(shuō)很煩人，這會(huì)讓你必須重新輸入用戶(hù)名和密碼，即便只是拼錯(cuò)了密碼而已。
因此，任何專(zhuān)業(yè)的用戶(hù)體驗(yàn)設(shè)計(jì)師不僅應(yīng)該考慮順利的流程情況，還應(yīng)該考慮失敗時(shí)應(yīng)該怎么辦。
錯(cuò)誤提示應(yīng)該讓用戶(hù)容易找到原因并方便理解。否則，他們可能沒(méi)辦法解決這些錯(cuò)誤。所以對(duì)于設(shè)計(jì)師來(lái)說(shuō)，一個(gè)非常重要的目標(biāo)是要設(shè)計(jì)出一個(gè)易于解決錯(cuò)誤的流程。一個(gè)錯(cuò)誤信息應(yīng)該能清晰的解釋到底發(fā)生了什么，如果可能的話，最好也提供解決方案。
左邊的錯(cuò)誤信息很清晰的解釋了發(fā)生的問(wèn)題，右邊的錯(cuò)誤信息對(duì)用戶(hù)來(lái)說(shuō)非常困惑。
1. 什么時(shí)候告知用戶(hù)發(fā)生了錯(cuò)誤比較好？
當(dāng)用戶(hù)出錯(cuò)后，首先要考慮的事情就是應(yīng)該在用戶(hù)填表時(shí)提醒還是最后通知用戶(hù)。錯(cuò)誤預(yù)警中有三種常見(jiàn)模式：
- 內(nèi)聯(lián)/實(shí)時(shí)：在輸入時(shí)或移開(kāi)焦點(diǎn)后立即提供反饋。
- 提交后/客戶(hù)端：當(dāng)用戶(hù)點(diǎn)擊提交按鈕之后
- 服務(wù)器端：當(dāng)請(qǐng)求發(fā)送到服務(wù)器后再返回反饋給用戶(hù)
這些方法中的每一種都有其優(yōu)點(diǎn)和缺點(diǎn)。
2. 內(nèi)聯(lián)驗(yàn)證
一般來(lái)說(shuō)，當(dāng)表單非常短小時(shí)用內(nèi)聯(lián)驗(yàn)證，因?yàn)樗试S在內(nèi)存中的數(shù)據(jù)仍然最新時(shí)更正錯(cuò)誤。
你可以用內(nèi)聯(lián)驗(yàn)證立即告訴用戶(hù)哪里錯(cuò)了。
”盡可能的進(jìn)行內(nèi)聯(lián)驗(yàn)證“”這種類(lèi)型的錯(cuò)誤消息很容易被察覺(jué)“，此外，輸入完成后立即告知錯(cuò)誤，對(duì)用戶(hù)的交互成本最低——UX專(zhuān)家Rachel Krause
另一位專(zhuān)家 Luke Wroblewski 建議，當(dāng)問(wèn)題的答案不明顯時(shí)，可以使用內(nèi)聯(lián)驗(yàn)證。例如，在選擇用戶(hù)名時(shí)，用戶(hù)可能不知道哪些用戶(hù)名可用。在這種情況下，在用戶(hù)輸入數(shù)據(jù)時(shí)立即告知錯(cuò)誤可能會(huì)有所幫助。
3. 提交后驗(yàn)證
另一方面，當(dāng)表單很大且需要保持關(guān)注時(shí)，你希望幫助用戶(hù)保持專(zhuān)注，而不是通過(guò)不斷顯示錯(cuò)誤來(lái)打斷他們。
“使用內(nèi)聯(lián)驗(yàn)證，用戶(hù)必須在兩種截然不同的思維模式之間反復(fù)切換:填寫(xiě)表單和糾正錯(cuò)誤。這減慢了用戶(hù)的速度，增加了認(rèn)知努力，通常會(huì)降低用戶(hù)的滿意度。”Jessica Enders 在她的書(shū)《設(shè)計(jì) UX:表單》中寫(xiě)道
4. 服務(wù)器端驗(yàn)證
服務(wù)器端驗(yàn)證是最不友好的方式，但卻為網(wǎng)站提供了很高的穩(wěn)定性。當(dāng)需要二次檢查用戶(hù)的數(shù)據(jù)時(shí)，這種方法最有效。
5. 如何提示用戶(hù)錯(cuò)誤？
錯(cuò)誤提示告訴用戶(hù)他們做錯(cuò)了，但是他們究竟做錯(cuò)了什么，要如何修復(fù)它？很顯然，清楚地說(shuō)明錯(cuò)誤，而不僅僅是顯示 Error:90803，對(duì)用戶(hù)有很大幫助。
使用用戶(hù)能理解的話，而不是用專(zhuān)業(yè)術(shù)語(yǔ)
6. 使用積極語(yǔ)言而不是消極語(yǔ)言
錯(cuò)誤提示措辭要使用積極語(yǔ)言而不是消極語(yǔ)言。例如，如果用戶(hù)遺漏了一個(gè)字段，與其說(shuō)”該字段不應(yīng)該是空的“，不如說(shuō)”請(qǐng)?zhí)顚?xiě)此字段“。當(dāng)使用積極語(yǔ)言時(shí)，用戶(hù)不會(huì)因?yàn)橐粋€(gè)錯(cuò)誤而受到責(zé)備，這能減少用戶(hù)的焦慮感，減少流失。
7. 必要時(shí)提供幫助
在某些情況下，用戶(hù)無(wú)法自己修復(fù)錯(cuò)誤，他需要額外的幫助。例如，當(dāng)用戶(hù)無(wú)法登錄時(shí)，大多數(shù)應(yīng)用只提供找回密碼，而沒(méi)有找回用戶(hù)名。但事實(shí)上，用戶(hù)名和密碼都可能會(huì)忘記。因此，在這種情況下，嘗試提供所有必要的操作和信息資源來(lái)幫助用戶(hù)解決問(wèn)題。
標(biāo)簽是表單可用性最關(guān)鍵的組成部分。如果標(biāo)簽不清晰，那么其他元素就算把可用性做得再好也沒(méi)意義。所以，不要讓用戶(hù)來(lái)猜測(cè)這里面到底要填什么內(nèi)容。
不要用一些模棱兩可的詞，比如”數(shù)字“可能會(huì)讓人感到困惑，一定要明確意思。
1. 將標(biāo)簽放在輸入字段的頂部
許多研究表明，將標(biāo)簽放置在輸入字段的頂部可以幫助用戶(hù)更快地填寫(xiě)表單，因?yàn)樗试S用戶(hù)遵循一條垂直線而不是 Z 模式。但是，如果它占用太多的垂直空間，您也可以使用浮動(dòng)標(biāo)簽。因此，如果你希望用戶(hù)更快地填充表單，請(qǐng)將他們放置在字段的頂部。
將標(biāo)簽放置在字段的頂部和使用浮動(dòng)標(biāo)簽，這兩種方式都很有效
2. 將標(biāo)簽放在輸入字段的左側(cè)
另一方面，當(dāng)你詢(xún)問(wèn)用戶(hù)比較復(fù)雜的問(wèn)題，用戶(hù)需要更多時(shí)間思考問(wèn)題答案的時(shí)候，研究表明將標(biāo)簽放在輸入框的左側(cè)會(huì)比較好。
當(dāng)用戶(hù)需要思考答案時(shí)，將標(biāo)簽放在輸入框的左側(cè)會(huì)更好
3. 標(biāo)簽應(yīng)該是可見(jiàn)的，無(wú)論什么輸入狀態(tài)
無(wú)論你用什么方式，確保當(dāng)用戶(hù)填完內(nèi)容后，標(biāo)簽是可見(jiàn)的。因?yàn)?，?dāng)用戶(hù)需要再次確認(rèn)表單內(nèi)容的時(shí)候，他們不用刪除填好的數(shù)據(jù)來(lái)查看系統(tǒng)需要他們填什么。
不管輸入狀態(tài)如何，標(biāo)簽都應(yīng)該是可見(jiàn)的
4. 減少不必要的輸入項(xiàng)
要填的表單越多，用戶(hù)就不愿意填完它。所以盡可能地為用戶(hù)減少不必要的輸入項(xiàng)。如果實(shí)在做不到，可以將必填和非必填的字段區(qū)分開(kāi)，減少用戶(hù)的負(fù)擔(dān)。
5. 可見(jiàn)性
不管狀態(tài)如何，字段都應(yīng)該是清晰可辨的。此外，活動(dòng)字段和非活動(dòng)字段之間的區(qū)別應(yīng)該要明顯。
輸入字段應(yīng)該有高對(duì)比度，在所有狀態(tài)下都是可見(jiàn)的。
6. 自動(dòng)激活 PC 端表單的第一個(gè)字段
自動(dòng)激活表單的第一個(gè)字段，這可以提高處理效率，避免用戶(hù)額外點(diǎn)擊。
7. 幫用戶(hù)預(yù)先填好
在某些情況下，你可以幫用戶(hù)預(yù)先填好字段。例如，可以很容易地檢測(cè)到郵政編碼，或者某些數(shù)值可能是頻繁的。在這些情況下，為用戶(hù)填充字段。
8. 格式
含有大量小數(shù)的數(shù)字很難讀懂。因此，當(dāng)要求較大的數(shù)字時(shí)，需要考慮添加格式以支持可讀性。例如，在詢(xún)問(wèn)卡號(hào)時(shí)，使用自動(dòng)格式化:讀取 5678-9876-9738-8394 比讀取 5678987697388394 容易得多。
此外，當(dāng)請(qǐng)求需要特定格式化數(shù)據(jù)時(shí)，要包含一個(gè)實(shí)例，讓用戶(hù)準(zhǔn)確理解要填什么。
幫助用戶(hù)了解如何格式化數(shù)據(jù)
9. 表單區(qū)域大小
輸入框的大小應(yīng)該要與所填的內(nèi)容長(zhǎng)度相匹配。比如，當(dāng)要用戶(hù)填寫(xiě)用戶(hù)名時(shí)，如果顯示的填寫(xiě)區(qū)域是一個(gè)長(zhǎng)段輸入框會(huì)讓用戶(hù)感到困惑。另一方面，如果你希望用戶(hù)寫(xiě)一些反饋，但只能看到所寫(xiě)內(nèi)容的最后一小段，那就很難用了。（彩云注：我就經(jīng)常在一些體驗(yàn)不好的產(chǎn)品上碰到過(guò)這種情況，簡(jiǎn)直太難受了。）
如果你不能準(zhǔn)確預(yù)測(cè)信息的長(zhǎng)短，比如留言反饋，建議表單區(qū)域最好是能在用戶(hù)填寫(xiě)內(nèi)容觸碰邊界時(shí)，自動(dòng)變高。
輸入字段的大小應(yīng)該與它預(yù)期的數(shù)據(jù)大小相對(duì)應(yīng)
10. 為桌面系統(tǒng)設(shè)計(jì)靈活的表單
在鍵盤(pán)和鼠標(biāo)之間切換很煩人。在理想的情況下，用戶(hù)應(yīng)該只使用一種媒介來(lái)填寫(xiě)表單，但有時(shí)，這是不可能實(shí)現(xiàn)的。因此，如果用戶(hù)需要多種媒介來(lái)填寫(xiě)表單，至少要盡量減少切換。為此，將需要同一種工具的輸入組合在一起。
另外，當(dāng)創(chuàng)建一個(gè)網(wǎng)頁(yè)表單時(shí)，要確保用戶(hù)可以只使用鍵盤(pán)來(lái)瀏覽表單——使用TAB和方向鍵。
11. 為移動(dòng)端系統(tǒng)設(shè)計(jì)靈活的表單
當(dāng)在移動(dòng)設(shè)備上時(shí)，將你顯示的鍵盤(pán)與用戶(hù)必須輸入的數(shù)據(jù)相匹配。我們經(jīng)?？吹叫枰獢?shù)字鍵盤(pán)的輸入可以很好地實(shí)現(xiàn)這一點(diǎn)，但幾乎很少有 APP 顯示支持輸入電子郵件地址的鍵盤(pán)。
支持通過(guò)顯示正確的鍵盤(pán)輸入電子郵件
下拉框的使用比單選按鈕更有挑戰(zhàn)性，因?yàn)樗枰~外的點(diǎn)擊來(lái)打開(kāi)它們。此外，用戶(hù)無(wú)法提前看到選項(xiàng)，這可能會(huì)讓他們感到困惑。因此，如果你只有少量的選項(xiàng)，使用單選按鈕。如果選項(xiàng)的數(shù)量超過(guò) 4 個(gè)，下拉菜單的效果會(huì)更好。
1. 復(fù)選框
通過(guò)勾選復(fù)選框，用戶(hù)應(yīng)該是同意某些內(nèi)容。我的意思是，他們應(yīng)該說(shuō)，“是的，我想要這個(gè)”，而不是，“是的，我不想要這個(gè)”。不幸的是，我經(jīng)?？吹接姓`導(dǎo)性的復(fù)選框試圖在創(chuàng)建賬戶(hù)時(shí)欺騙人們訂閱他們的產(chǎn)品。當(dāng)你不想訂閱他們的通訊時(shí)，你又必須勾選復(fù)選框，像這樣的伎倆對(duì)信譽(yù)是不合適的，所以不要?jiǎng)有氖褂盟鼈儭?/p>
通過(guò)勾選復(fù)選框，用戶(hù)應(yīng)該同意某些內(nèi)容，而不是確認(rèn)他們不同意。
一個(gè)結(jié)構(gòu)充分的表單就像一個(gè)與用戶(hù)的良好對(duì)話。所以記住這一點(diǎn)，仔細(xì)規(guī)劃結(jié)構(gòu)。
1. 從簡(jiǎn)單的問(wèn)題開(kāi)始
從簡(jiǎn)單的問(wèn)題開(kāi)始，從用戶(hù)已經(jīng)很清楚知道答案的問(wèn)題開(kāi)始，像名字、郵件這類(lèi)。然后再循序漸進(jìn)問(wèn)稍微復(fù)雜的問(wèn)題，像賬戶(hù)信息之類(lèi)的。
首先，一個(gè)很自然的順序，當(dāng)你第一次見(jiàn)某些人的時(shí)候，你會(huì)找一些比較好切入的問(wèn)題，比如叫什么名字啊之類(lèi)的。其次，當(dāng)用戶(hù)已經(jīng)填了一些字段之后，那么之后會(huì)增加他填完表單的機(jī)會(huì)。
2. 創(chuàng)建邏輯信息塊
將不相關(guān)的信息按邏輯分組。例如，你可以將結(jié)帳表單分為“個(gè)人信息”和“帳戶(hù)信息”組，將信息分組可以幫助用戶(hù)一次只考慮一個(gè)主題。
通過(guò)對(duì)相關(guān)信息進(jìn)行分組，使表單可被快速掃描
3. 單步 VS 多步表單
當(dāng)你有很多問(wèn)題要問(wèn)的時(shí)候，你可能想知道哪一個(gè)最有效：?jiǎn)尾搅鞒踢€是多步流程。一般來(lái)說(shuō)，單步表單的轉(zhuǎn)化率更高，因?yàn)樗雌饋?lái)更小，而且不會(huì)勸退用戶(hù)。如果你詢(xún)問(wèn)基本信息并希望用戶(hù)快速填寫(xiě)表單，單步表單就非常不錯(cuò)。
當(dāng)用戶(hù)被要求必須填寫(xiě)更多復(fù)雜信息時(shí)，多步表單會(huì)更好。為了幫助用戶(hù)在進(jìn)行多步驟填寫(xiě)時(shí)不至于失去耐心，可以給到進(jìn)度條，提示還剩多少步。
4. 單列 vs 多列布局
一般來(lái)說(shuō)，用單列布局會(huì)更好，因?yàn)榭梢詭椭脩?hù)更好地掃描，也可以盡量減少用戶(hù)遺漏填寫(xiě)。
但當(dāng)用戶(hù)多次填寫(xiě)同一個(gè)表單時(shí)，他們更喜歡多列表單，因?yàn)檫@樣不會(huì)浪費(fèi)時(shí)間滾動(dòng)。一般來(lái)說(shuō)，在 B 端應(yīng)用中這種多列表單會(huì)比較合適。
設(shè)計(jì)可用的按鈕對(duì)提高轉(zhuǎn)化率至關(guān)重要。如果按鈕上的文字內(nèi)容比較模糊，會(huì)容易勸退新手用戶(hù)。
根據(jù)用戶(hù)按下按鈕會(huì)發(fā)生什么來(lái)命名按鈕
1. 提高用戶(hù)的容錯(cuò)率
對(duì)于更復(fù)雜的表單來(lái)說(shuō)，按鈕最重要的一點(diǎn)是，應(yīng)該有提交和取消表單的單一方法。用戶(hù)應(yīng)該至少有補(bǔ)救的機(jī)會(huì)。舉個(gè)例子，如果用戶(hù)點(diǎn)了在線幫助時(shí)，他已經(jīng)填好的數(shù)據(jù)不應(yīng)該被丟失?；蛘?，如果用戶(hù)由于意外點(diǎn)擊了按鈕，請(qǐng)求不應(yīng)該被提交。
2. 主要按鈕和次要按鈕應(yīng)該很容易區(qū)分
為了避免點(diǎn)擊錯(cuò)誤的按鈕，用戶(hù)應(yīng)該能比較容易地區(qū)分主要和次要按鈕。另外，最好不要只依賴(lài)顏色，樣式上最好有比較大的差異。
讓主要和次要的按鈕樣式上有比較大的區(qū)分度
3. 正確的標(biāo)簽按鈕
按功能明確地標(biāo)注按鈕。例如，如果按一個(gè)按鈕可以創(chuàng)建一個(gè)賬戶(hù)，在按鈕上的文案叫”創(chuàng)建賬戶(hù)”要好過(guò)“提交”
當(dāng)用戶(hù)打開(kāi)表單時(shí)，他首先肯定是想要填完它的。嘗試幫助他們而不是用糟糕的設(shè)計(jì)給他們?cè)O(shè)置障礙。
不幸的是，這里面提到的許多錯(cuò)誤，并不需要多么高級(jí)的技巧，而是因?yàn)樵O(shè)計(jì)沒(méi)有同理心。仔細(xì)思考你的設(shè)計(jì)流程，檢查是否能讓所有內(nèi)容對(duì)不同背景和專(zhuān)業(yè)知識(shí)的人都是清晰的。
通常來(lái)說(shuō)，一般要達(dá)到以下目的，大多數(shù)指導(dǎo)原則都來(lái)自這些規(guī)則：
- 用戶(hù)應(yīng)該只輸入一次數(shù)據(jù)
- 用戶(hù)應(yīng)該填盡可能少的信息
- 用戶(hù)應(yīng)該只需要記住少量的信息
- 用戶(hù)檢查和恢復(fù)錯(cuò)誤內(nèi)容應(yīng)該要很容易
