最近，研究了一下web表單的設(shè)計(jì)，收獲頗多。從接觸互聯(lián)網(wǎng)以來，我們就一直在和各種表單打交道，它們無處不在，同時(shí)也為我們?cè)鎏砹撕芏嗖槐匾�的�?惱。但隨著時(shí)間的推移，大多數(shù)網(wǎng)絡(luò)用戶對(duì)很難用卻又千篇一律的表單已經(jīng)產(chǎn)生了一種習(xí)慣，似乎即使體驗(yàn)過程并不美好，也不會(huì)發(fā)出反對(duì)聲音，繼續(xù)鉆研。

但是，隨著電子商務(wù)的興起，表單設(shè)計(jì)的重要性又上了一個(gè)層次，因?yàn)楹芏嚯娚叹W(wǎng)站已經(jīng)意識(shí)到：表單的體驗(yàn)不好，就可能丟掉已經(jīng)準(zhǔn)備付賬的顧客。

今天體驗(yàn)了一下qq郵箱的注冊(cè)表單，雖然表單本身優(yōu)點(diǎn)甚多，而且界面干凈，但還是從雞蛋里挑出很多骨頭來。

在說問題之前，還是說一下優(yōu)點(diǎn)，雖然這并不那么重要。

• 界面清晰且干凈，基本沒有干擾因素
• 標(biāo)簽采用右對(duì)齊，提升完成率
• 擁有答案填寫提示、即時(shí)反饋、即時(shí)幫助、部分輸入框的即時(shí)檢查
• 提供錯(cuò)誤規(guī)避機(jī)制

Ps：其實(shí)還有很多優(yōu)點(diǎn)，但是下文更加重要，下圖是整體界面截圖

1. 友好性

雖然這是一個(gè)嚴(yán)肅的注冊(cè)過程，但是如果能稍微添加一些友好元素會(huì)更好。

比如：

控件外觀稍加潤(rùn)色，不至于從頭到尾的矩形；

增添較淡的冷靜背景色；

提問的方式更換為更加善意且值得信任的語言；

2. 輸入框的長(zhǎng)度

輸入框的長(zhǎng)度應(yīng)該與答案的長(zhǎng)度具有一致性，從而避免疑惑。

用戶疑問：這么長(zhǎng)的輸入框，我會(huì)不會(huì)因?yàn)殛欠Q長(zhǎng)度不夠而無法成功注冊(cè)？

3. 所問的問題都是必須馬上得到答案嗎？如果不是，delete！

這是很重要的一項(xiàng)檢查標(biāo)準(zhǔn)，用戶來到這個(gè)界面，唯一的目的就是快速的成功注冊(cè)，那么問題越多，讓用戶產(chǎn)生的疑慮越多，用戶quit的可能性就越大。

用戶疑問：生日？性別？所在地？我到底是不是在注冊(cè)郵箱？難道是人口普查頁面？

存在問題：

• 這些問題并非需要馬上得到答案；
• 浪費(fèi)了用戶的時(shí)間；
• 讓用戶產(chǎn)生了疑慮和信任危機(jī)；

解決方法

• 把這些問題轉(zhuǎn)移到注冊(cè)成功后發(fā)問，且采取更加友好和值得信任的方式；
• 在注冊(cè)頁面說明，問這些問題的用意，讓用戶放心；
• 告知用戶此項(xiàng)不是必填的選項(xiàng)

4. 不合理的提示會(huì)誤導(dǎo)用戶

用戶疑問：example是什么意思？一定要是2009嗎？（甚至）要這么長(zhǎng)嗎？

存在問題：

• 有相當(dāng)部分用戶英文不怎么樣
• 沒有按照用戶的習(xí)慣輸入舉例子，用戶更喜歡用姓名拼音等注冊(cè)
• 用戶并不知道字符限制是什么

解決方法：

• 說明輸入的字符種類限制
• 根據(jù)用戶的習(xí)慣提供舉例，如wangwei1987

5. 并不完善的檢查機(jī)制

在檢查機(jī)制中非常重要的兩點(diǎn)：

1. 及時(shí)提醒用戶系統(tǒng)無法接納當(dāng)前輸入（注意要等待用戶完成該項(xiàng)之后）
2. 提供建議的解決方法

用戶疑問：被注冊(cè)了？那其他名字我可能記不住�。吭趺崔k？

解決方法：提供建議“您可以試一下wolfwang1234，還沒人注冊(cè)哦！”

同樣問題：告訴用戶什么才算密碼強(qiáng)度高。

6. 默認(rèn)選項(xiàng)很有必要，你確定是用戶想要的嗎？

優(yōu)秀的默認(rèn)選項(xiàng)可以極大地提高填表效率，但是注意：

1. 確認(rèn)默認(rèn)的選項(xiàng)滿足大多數(shù)用戶的選擇
2. 確保你的默認(rèn)是準(zhǔn)確的選項(xiàng)
3. 相當(dāng)比例的用戶會(huì)接受默認(rèn)選項(xiàng)，即使有時(shí)候它是錯(cuò)的

存在問題：

• 大概一般的用戶需要更正這個(gè)默認(rèn)選項(xiàng)
• 提供錯(cuò)誤信息，用戶會(huì)以為大多數(shù)男性來此注冊(cè)
• 可能造成性別歧視
• 產(chǎn)生信任危機(jī)

解決方法：

• 不做默認(rèn)選擇
• 提醒用戶無須顧慮安全

存在問題：

• 系統(tǒng)默認(rèn)選擇了第一個(gè)選項(xiàng)，這并非準(zhǔn)確
• 用戶不去修改，則誤導(dǎo)了系統(tǒng)統(tǒng)計(jì)信息

解決方法：

• 使用更強(qiáng)大的技術(shù)，確認(rèn)用戶具體所在區(qū)
• 不做默認(rèn)選擇

7. 選用合適的輸入框

存在問題：年和日的選項(xiàng)，選擇過程更加費(fèi)事

解決方法：參照google表單設(shè)計(jì)

8. 采用更加直接的語言

用戶疑問：��？難道后面還有其他注冊(cè)步驟嗎？

• 提供用詞的一致性
• 告知用戶所處位置：我確實(shí)在注冊(cè)

解決方法：

• 將“確定”改為“注冊(cè)”

9. 不要把“注冊(cè)”按鈕默認(rèn)選中，除非我已經(jīng)注冊(cè)完了

存在問題：輸入過程中，回車鍵會(huì)處罰“提交按鈕”

• 用戶每填寫完成一項(xiàng)，經(jīng)常會(huì)按回車
• 填寫完成之前，系統(tǒng)并不希望用戶點(diǎn)擊“提交”

解決方法：去掉這一關(guān)聯(lián)，“回車”不等于“提交”

10. 一次性檢驗(yàn)出所有錯(cuò)誤

存在問題：如果有三個(gè)錯(cuò)誤，用戶點(diǎn)擊提交，只會(huì)顯示第一個(gè)錯(cuò)誤，用戶修改完成之后，再次提交才會(huì)檢查出第二個(gè)錯(cuò)誤。

解決方法：一次性檢查出所有錯(cuò)誤。

ok，很有成就感，更重要的是，我的交互設(shè)計(jì)之路更上一層樓了，希望與同行交流，得大家的指正！

作者：書生wilson

文章來源：flyalone.net

標(biāo)簽： 表單設(shè)計(jì) 注冊(cè)流程 交互設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。