幾年前當(dāng)我第一次看到Twitter的表單驗(yàn)證時(shí)很驚訝. 對(duì)用戶界面呆板厭煩的你應(yīng)該知道我在說(shuō)什么. 當(dāng)時(shí)我?guī)缀跖d奮的要跳起來(lái).

　　Twitter精心設(shè)計(jì)的分離式表單驗(yàn)證相當(dāng)引人注意.當(dāng)我輸入錯(cuò)誤時(shí)右側(cè)彈出錯(cuò)誤提示信息, 立即就能讓我消除錯(cuò)誤.”在線驗(yàn)證”幫助我明白什么是正確的方向. 我能感受到這種簡(jiǎn)潔的形式是想跟我有個(gè)隨時(shí)的對(duì)話. 這是一個(gè)啟示! 我不必等待加載整個(gè)頁(yè)面來(lái)檢查這個(gè)表單添寫的是否正確.

　　這個(gè)體驗(yàn)完全改變了我對(duì)表單的設(shè)計(jì)方法. 它讓我明白表單驗(yàn)證意味著和用戶的交流并引導(dǎo)他們改正錯(cuò)誤和不確定的輸入.

　　術(shù)語(yǔ)“表單驗(yàn)證”可能需要一些說(shuō)明安全鏈。表單驗(yàn)證是一門處理在一個(gè)web表單里檢查用戶提供的信息是否正確的技術(shù)。這個(gè)處理的輸出結(jié)果更多是情緒上的而不是技術(shù)上的創新為先。表單或者指出用戶操作錯(cuò)誤錄入軟件真正做到，或者確認(rèn)提供的數(shù)據(jù)是準(zhǔn)確的。給你一個(gè)例子：如果一個(gè)用戶在一個(gè)標(biāo)簽為“email address”的表單字段里提供了數(shù)據(jù)創新延展，表單應(yīng)該檢查提供的文本是否在正確的格式([email protected])和提供的e-mail地址是否已經(jīng)注冊(cè)了數(shù)據(jù)錄入軟件強化意識。

　　通常來(lái)說(shuō)，有兩種類型的表單驗(yàn)證：

　　提交后驗(yàn)證——當(dāng)用戶提供了所有數(shù)據(jù)同時(shí)提交表單之后基本情況，通常會(huì)點(diǎn)擊按鈕現場，信息會(huì)發(fā)送到服務(wù)器同時(shí)進(jìn)行驗(yàn)證。“驗(yàn)證器”的返回信息發(fā)送會(huì)用戶的電腦同時(shí)它顯示一段確認(rèn)的信息(“所有東西都正確!”)或者一系列的錯(cuò)誤信息力量。

　　在線驗(yàn)證——驗(yàn)證信息在用戶輸入數(shù)據(jù)到表單字段后直接展示我有所應。通常，信息會(huì)展示在字段旁邊同時(shí)鼓勵(lì)用戶采取直接行動(dòng)提升行動。

　　表單驗(yàn)證的重要性

　　表單驗(yàn)證是web/手機(jī)瀏覽者與界面交互時(shí)重要的一個(gè)核心溝通流程能力建設。它的重要性遠(yuǎn)超過(guò)我們所認(rèn)識(shí)到的，不相信我?試想一下你經(jīng)常遇到的需要表單驗(yàn)證的情形:

　　注冊(cè)/登錄表單

　　購(gòu)物車 – 支付表單

　　郵件表單

　　在你的界面整個(gè)流程中這是一些重要的流程研究進展，不是嗎?你業(yè)務(wù)方面的努力可能全體現(xiàn)在這里了無障礙。.

　　比較一下在線和離線兩種狀態(tài)下的不同，這會(huì)讓事情進(jìn)入一個(gè)熟悉的視角快速融入。讓我們做一個(gè)簡(jiǎn)單的類比：表單驗(yàn)證相當(dāng)于在購(gòu)買東西之前和推銷員之間的一次談話-所有的事情還在成交的邊緣上認為。如果推銷員粗魯無(wú)禮并且拒絕提供幫助，你自然會(huì)離開(kāi)商店不買他的東西.增強。如果推銷員很專業(yè)重要意義，有禮貌并且樂(lè)于助人-你就會(huì)樂(lè)意掏錢包了。

　　大多數(shù)表單驗(yàn)證都像是個(gè)粗魯無(wú)禮的推銷員更加廣闊。表單的錯(cuò)誤提示信息形如：“數(shù)據(jù)庫(kù)錯(cuò)誤!”通用表單數(shù)據(jù)錄入系統(tǒng)規劃，“錯(cuò)誤的郵箱地址!”這樣的提示不僅沒(méi)有禮貌-還會(huì)導(dǎo)致用戶的高流失率。

　　缺乏溝通導(dǎo)致了不友好的業(yè)務(wù)設(shè)計(jì)成效與經驗，有很多類似的例子適應性。Luke Wroblewski進(jìn)行的研究清楚地表明了使用一個(gè)內(nèi)聯(lián)的表單驗(yàn)證將帶來(lái)巨大的不同效果:

數(shù)據(jù)錄入軟件 　　“相比我們的控制版本，內(nèi)聯(lián)驗(yàn)證表單對(duì)數(shù)據(jù)的驗(yàn)證信息顯示更加醒目并且更加友好稍有不慎。尤其是重要作用，我們看到的:

　　增加了22%的成功率,

　　減少了22%的錯(cuò)誤率,

　　增加31%的滿意度,

　　完成時(shí)間縮短42%,

　　減少了47%時(shí)間的視覺(jué)停留等地。

　　這些不能被忽視。合理的表單驗(yàn)證設(shè)計(jì)可能會(huì)大幅的提升你的業(yè)務(wù)量!

　　我們來(lái)跳出理論進(jìn)入實(shí)踐尤為突出，讓我們看看在實(shí)際設(shè)計(jì)中什么才是最好的設(shè)計(jì)方法規定，并且通過(guò)循序漸進(jìn)的方式來(lái)設(shè)計(jì)一個(gè)完美的表單驗(yàn)證。

　　興奮了吧?

　　下面使用的每一個(gè)例子都可以在UXPin – The UX Design App下載.空間載體。

　　避免困惑