網(wǎng)頁(yè)表單設(shè)計(jì):怎樣提高表單可用性？

一、信息內(nèi)容的合理組織。

考慮用戶填寫表單的目的，哪些表單需要填寫，去掉沒必要的表單項(xiàng)，確定完表單內(nèi)容。如何組織起來(lái)呢?表單項(xiàng)并不是一個(gè)個(gè)從上到下無(wú)序羅列，而是根據(jù)表單內(nèi)容，按照一定的邏輯，經(jīng)過組織，分成不同的內(nèi)容組，不同的主題。同時(shí)各個(gè)邏輯組和同一個(gè)主題的表單項(xiàng)，也是按照邏輯順序或者用戶熟悉的模式順序，使用戶瀏覽和填寫自如。如果表單過長(zhǎng)時(shí)，也可拆解成不同網(wǎng)頁(yè)，類似于任務(wù)拆解，讓用戶一步步填寫。

品牌1.0系統(tǒng)，新建訂單時(shí)，將表單內(nèi)容，進(jìn)行邏輯劃分為兩個(gè)內(nèi)容組：基本信息(重要/必填)和附加信息 (次要/選填)，通過分割線區(qū)分內(nèi)容組，結(jié)構(gòu)清晰，易于瀏覽。考慮區(qū)分內(nèi)容組時(shí)，應(yīng)當(dāng)考慮采用較少的視覺信息，過多的視覺信息可能會(huì)導(dǎo)致注意力分散，給表單帶來(lái)大量視覺噪音。

新建百度Union賬戶，表單內(nèi)容較長(zhǎng)，同時(shí)有若干主題，一個(gè)網(wǎng)頁(yè)信息量太大，所以采用多個(gè)網(wǎng)頁(yè)來(lái)組織表單，分步驟給用戶，提供清晰的路徑步驟，即清晰又簡(jiǎn)單。用戶在填寫時(shí)，提供進(jìn)程指示，避免緊張和疑惑。

二、簡(jiǎn)化表單，突出重點(diǎn)。

根據(jù)用戶使用數(shù)據(jù)，適當(dāng)將使用頻次不高、或者提供給專業(yè)用戶的高級(jí)表單項(xiàng)隱藏起來(lái)。比如品牌1.0的新建創(chuàng)意表單，90%的人不進(jìn)行曝光監(jiān)控鏈接的填寫，那么默認(rèn)收起，保持表單的簡(jiǎn)潔，讓絕大多數(shù)用戶快速完成，避免大量的表單給用戶的焦慮，而又滿足了小眾用戶的需求。

三、清晰的瀏覽線。

思考如何設(shè)計(jì)表單結(jié)構(gòu)和路徑時(shí)，需要有個(gè)基本原則：由始至終提供清晰的瀏覽線。采用眼動(dòng)儀實(shí)驗(yàn)即可檢驗(yàn)用戶的瀏覽線。如標(biāo)簽的對(duì)齊方式、輸入框的布局等都影響著用戶的瀏覽線。當(dāng)提供了垂直單一路徑，使用戶減少注意力分散，可以迅速對(duì)問題作出回答，完成任務(wù)所花時(shí)間少。

四、考慮用戶場(chǎng)景，**主流程順暢。

我們?cè)谠O(shè)計(jì)表單時(shí)，定義了清晰的線性步驟，但很少真正實(shí)現(xiàn)?？紤]用戶場(chǎng)景，**主流程不要中斷，將導(dǎo)致人們放棄填寫的元素解決。例如，招商銀行卡號(hào)密碼的付款流程，分為三項(xiàng)表單步驟：填寫銀行卡號(hào)、填寫其他驗(yàn)證信息、支付成功。但在用戶填完卡號(hào)和其他驗(yàn)證信息后，經(jīng)常會(huì)發(fā)現(xiàn)付款額超出每日限額，以前的流程是，用戶中斷付款流程，不得不新打開一個(gè)網(wǎng)頁(yè)，招行主頁(yè) → 網(wǎng)上個(gè)人銀行登錄 → 選擇一卡通(輸一卡通卡號(hào)、查詢密碼、附加碼)登錄后→ 網(wǎng)上支付 → 網(wǎng)上支付額度管理調(diào)整額度，然后再次重新支付，使用戶在兩個(gè)操作流程中切換，讓用戶各種折騰。而改版后的設(shè)計(jì)，可謂十分貼心，給予信息提示的同時(shí)，用戶可在當(dāng)前流程設(shè)置限額，避免了付款流程的中斷，同時(shí)大大節(jié)省了用戶的操作成本。

還有新建廣告位時(shí)，選擇所屬頻道，如果沒有想要的頻道，就需要新建頻道，增加額外的頁(yè)面來(lái)添加新頻道，而在設(shè)計(jì)時(shí)，考慮到用戶的此場(chǎng)景，在下拉選擇框旁邊，增加“新建頻道”按鈕，為用戶提供便捷，減少了新建廣告位流程的打斷。

五、選擇合適的標(biāo)簽對(duì)齊方式。

“輸入框標(biāo)簽應(yīng)該是頂對(duì)齊、右對(duì)齊、左對(duì)齊還是輸入框內(nèi)標(biāo)簽?”是我們?cè)谠O(shè)計(jì)表單時(shí)常見的問題。其實(shí)業(yè)界有很多針對(duì)此問題的實(shí)驗(yàn)和研究(Matteo Penzo的眼動(dòng)實(shí)驗(yàn)、Luke Wroblewski的Luke Wroblewski’s findings、Vitaly Friedman的web表單設(shè)計(jì)之注冊(cè)表單)，都表明每種方式有不同的優(yōu)缺點(diǎn)，根據(jù)具體目標(biāo)等因素具體考慮。

Matteo Penzo的眼動(dòng)實(shí)驗(yàn)發(fā)現(xiàn)，頂部標(biāo)簽方式，標(biāo)簽移動(dòng)到輸入框需50毫秒，比左對(duì)齊標(biāo)簽方式(500毫秒)快了10倍，比右對(duì)齊標(biāo)簽方式(240毫秒)快了5倍左右。

總之，頂部標(biāo)簽方式，填表時(shí)間短。但如果盡量減少垂直面積，可以考慮右對(duì)齊方式。如果希望用戶填表時(shí)認(rèn)真瀏覽標(biāo)簽，了解仔細(xì)考慮表單的每個(gè)輸入框時(shí)，可以采用左對(duì)齊方式。

六、提供幫助。

為了用戶快地填寫表單，一般在難以理解的表單項(xiàng)增加幫助信息，引導(dǎo)用戶成功填表。幫助信息，提示用戶應(yīng)該如何填寫，常見的幫助，一般在標(biāo)簽或者輸入框旁提供幫助文字，交互方式也有一直展現(xiàn)(即一直出現(xiàn)在輸入框右側(cè)、下方或輸入框內(nèi))、即時(shí)幫助(即激活輸入框時(shí)，幫助文字自動(dòng)出現(xiàn))、用戶激活的即時(shí)幫助(即幫助信息默認(rèn)不顯示、用戶鼠標(biāo)懸浮觸發(fā)幫助圖標(biāo)來(lái)顯示幫助)、用戶激活的區(qū)域幫助(將表單所有的幫助信息統(tǒng)一放在一個(gè)位置)等多種方式。