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

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

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

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

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

二、簡化表單，突出重點。

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

三、清晰的瀏覽線。

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

四、考慮用戶場景，**主流程順暢。

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

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

五、選擇合適的標簽對齊方式。

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

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

總之，頂部標簽方式，填表時間短。但如果盡量減少垂直面積，可以考慮右對齊方式。如果希望用戶填表時認真瀏覽標簽，了解仔細考慮表單的每個輸入框時，可以采用左對齊方式。

六、提供幫助。

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