轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.sillybuy.com  )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源：http://sudasuta.com/cooler-photo.html

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請(qǐng)點(diǎn)這里

填寫互聯(lián)網(wǎng)表單幾乎是每個(gè)用戶每天的經(jīng)歷，如用戶進(jìn)行網(wǎng)站注冊(cè)和登錄、購(gòu)物等，都需要填寫各種表單。用戶為了獲得想要的東西，表單成了用戶完成需求和網(wǎng)站系統(tǒng)需要數(shù)據(jù)之間的互動(dòng)形式。那么表單設(shè)計(jì)的首要目標(biāo)也更清晰：讓用戶迅速快捷并且輕松地完成填寫。

設(shè)計(jì)目標(biāo)已清晰，那么如何設(shè)計(jì)表單呢，以下從表單的內(nèi)容、組織方式、流程、表單元素控件及交互等方面詳細(xì)闡述。
表單的元素

研究如何提高表格可用性之前，我們先簡(jiǎn)要了解下一般表單的元素，這里我們暫且這么總結(jié)：

標(biāo)簽：告訴用戶表單問(wèn)題是什么？
輸入框：供給用戶填寫答案信息；
動(dòng)作：用戶提交表單，即用戶點(diǎn)擊一個(gè)按鈕或鏈接，執(zhí)行一個(gè)操作；
幫助文字：為如何填寫表單提供幫助；
輸入反饋：針對(duì)用戶輸入給出反饋，輸入正確還是錯(cuò)誤；

提高表單可用性的一些技巧

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

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

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

新建百度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èn)題作出回答，完成任務(wù)所花時(shí)間最少。

如下面Etre(www.etre.com)提供的眼動(dòng)跟蹤數(shù)據(jù)圖，表單各個(gè)元素構(gòu)成垂直軸，提供了單一路徑，用戶有清晰的瀏覽線，可以迅速對(duì)問(wèn)題做出答復(fù)。而另一張圖，完成過(guò)程變成了彎曲的眼球運(yùn)動(dòng)，采用單一路徑更容易處理表單問(wèn)題。

四 考慮用戶場(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í)，選擇所屬頻道，如果沒(méi)有想要的頻道，就需要新建頻道，增加額外的頁(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í)最常見的問(wèn)題。其實(shí)業(yè)界有很多針對(duì)此問(wèn)題的實(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è)位置）等多種方式。其實(shí)可以考慮更多的方式來(lái)更好地幫助用戶，例如經(jīng)常見到的信用卡有效期填寫，當(dāng)用戶激活輸入框時(shí)，右側(cè)出現(xiàn)可視化的幫助信息，更簡(jiǎn)潔直觀，更好理解。

七 智能默認(rèn)

網(wǎng)絡(luò)表單中有很多地方能利用智能默認(rèn)減少必要的選擇和輸入次數(shù)，加速表單完成過(guò)程。一般通過(guò)恰當(dāng)設(shè)置滿足大多數(shù)人需要的默認(rèn)選擇和數(shù)值，推送默認(rèn)每個(gè)人都相同。還有個(gè)性化默認(rèn)方式，它與表單對(duì)象相關(guān)。如京東購(gòu)買的訂單信息，智能默認(rèn)與個(gè)人相關(guān)，不需要表單輸入，默認(rèn)之前的收貨地址信息、支付配送方式、發(fā)票信息等，符合用戶的需求習(xí)慣，同時(shí)避免了重復(fù)輸入的成本。品牌1.0的新建廣告設(shè)置，96%的用戶折扣率為所屬訂單的折扣率，但又要滿足KA用戶修改廣告折扣率的需求，所以輸入框預(yù)置默認(rèn)為訂單折扣率，加速絕大多數(shù)用戶的表單填寫。

八 即時(shí)反饋驗(yàn)證

雖然設(shè)計(jì)表單時(shí)，保證表單的內(nèi)容結(jié)構(gòu)清晰，提供有意義的輸入幫助，但總有些答案不止一個(gè)。此時(shí)，直接反饋有助于再次確保人們的回答有效，提供即時(shí)校驗(yàn)。即時(shí)驗(yàn)證分為多類反饋：確認(rèn)輸入合適、建議有效回答、核對(duì)輸入信息，通過(guò)實(shí)時(shí)更新設(shè)計(jì)以幫助用戶控制在必要的限制范圍內(nèi)。這類反饋通常發(fā)生在用戶在輸入框開始、繼續(xù)輸入或者停止輸入的時(shí)候。

如在設(shè)置密碼時(shí)，要求用戶輸入字符數(shù)有限制、字符類型有限制的密碼，利用即時(shí)驗(yàn)證，不僅告訴用戶輸入的密碼是否有效，是否合格，而不是填完所有表單，提交之后，才告我密碼需要修改，同時(shí)還能說(shuō)明密碼的安全程度，采用高度可視化方式讓用戶衡量密碼質(zhì)量。

直接反饋不僅限于確認(rèn)所提供的答案，還能提供輸入建議。用戶在搜索時(shí)，搜索框能夠在輸入過(guò)程中自動(dòng)補(bǔ)全、提供相關(guān)聯(lián)的搜索建議，既可以避免用戶輸入出錯(cuò)，又可以節(jié)約用戶的拼寫時(shí)間（這一點(diǎn)在手機(jī)端更加需要）。

九 額外輸入

額外輸入可以提供更多選項(xiàng)或者高級(jí)選項(xiàng)，滿足有需要的用戶，同時(shí)不妨礙許需要的用戶。如圖不到10%的用戶會(huì)填寫一個(gè)以上的曝光監(jiān)控鏈接，這類用戶可以選擇點(diǎn)擊“添加”按鈕來(lái)進(jìn)行更多的輸入，即時(shí)增加并不阻礙完成任務(wù)。

十 其它方法

如果用戶填寫的表單與已有表單的表單項(xiàng)大多數(shù)相同，為避免用戶重復(fù)的輸入，提供復(fù)制導(dǎo)入表單數(shù)據(jù)功能，用戶只需修改少量數(shù)據(jù)即可。

將重點(diǎn)信息或者難以理解的信息可視化，清晰有效地傳達(dá)與溝通信息，形成的功能、使用映射，使用戶完成任務(wù)目標(biāo)。如將廣告管家1.0選擇創(chuàng)意模版，表格列表形式清晰，但用戶理解成本和選擇判斷成本較大；新方案默認(rèn)縮略圖形式，強(qiáng)調(diào)對(duì)創(chuàng)意的直觀，一圖勝千言，用戶選擇較。

除以上方法，還有一些主動(dòng)作和次動(dòng)作的差異、采用垂直或水平選項(xiàng)卡、采用疊層等方法。當(dāng)用戶在填寫表單時(shí)，他們希望盡可能快的完成任務(wù)。因此十分有必要將表單設(shè)計(jì)得清晰和整齊。

 

后續(xù)

隨著科技的發(fā)展，語(yǔ)音智能、拍照及傳感器等新技術(shù)的出現(xiàn)，這些必定會(huì)對(duì)表單設(shè)計(jì)打開新的思路。也可能以后人們不通過(guò)表單形式，直接通過(guò)聲音、眼神等完成與系統(tǒng)互動(dòng)，表單或許更加弱化或消失。