作者：Smashing Editorial 譯者：折折熊
原文鏈接：http://www.jojobox.cn/blog/article.asp?id=135
英文鏈接：http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/
.
上周我們已經(jīng)給大家介紹了我們對(duì)于web表單調(diào)查研究結(jié)果的第一部分。調(diào)研的主要目的是提供給憑直接來(lái)判斷有效性的設(shè)計(jì)師和開(kāi)發(fā)人員一些理論依據(jù)。我們也介紹了一些如何讓web表單成為完美的友好用戶(hù)界面的指導(dǎo)方針。
我們把更多關(guān)鍵表單單獨(dú)開(kāi)來(lái)（例如校驗(yàn)表單）從而關(guān)注注冊(cè)表單。然后我們分別完成每個(gè)被選擇網(wǎng)站的注冊(cè)表單并且分析這些表單的設(shè)計(jì)方法。以下我們介紹這個(gè)研究的第二部分——關(guān)于100個(gè)流行網(wǎng)站web表單的調(diào)研結(jié)果。
請(qǐng)注意這個(gè)文章不是關(guān)于校驗(yàn)表單——那是另外一個(gè)討論的話(huà)題，我們把它獨(dú)立開(kāi)來(lái)看待成一個(gè)即將要討論的文章。我們要感謝Wufoo為我們提供構(gòu)架來(lái)引導(dǎo)我們的調(diào)查。
.
在研究的第一部分里，我們已經(jīng)仔細(xì)考慮過(guò)注冊(cè)鏈接和注冊(cè)表單的布局和視覺(jué)表現(xiàn)形式。但是如果表單不能正常工作的話(huà)設(shè)計(jì)的多漂亮都沒(méi)有用，表單完成率依然很低。讓我們現(xiàn)在來(lái)考慮一下注冊(cè)表單功能性的典型問(wèn)題以及設(shè)計(jì)時(shí)的方式方法。
顯然地，為了提高表單的完成率，設(shè)計(jì)師試圖避免各種各樣的分散因素，并且提供一個(gè)清晰明確并且簡(jiǎn)單的web表單。這就是為什么任何視覺(jué)效果需要非常適當(dāng)?shù)厥褂玫谋举|(zhì)原因。
有時(shí)候，輸入?yún)^(qū)域的標(biāo)簽不夠明確，但是用戶(hù)卻需要足夠理解才能提供這些信息。用戶(hù)名適用哪些字符格式？密碼的字符數(shù)限制是多少？提供的Email地址會(huì)不會(huì)自動(dòng)變成登錄名使用？
用戶(hù)通過(guò)建議和技巧的幫助最小化地減少輸入框重新考慮的次數(shù)。而且，沒(méi)有比雖然輸入的內(nèi)容看上去完全正確，但是輸入框卻不接受的情況更惱怒的了。為了避免這個(gè)問(wèn)題，設(shè)計(jì)師（通常）使用不引人注目但清晰的建議提示。
調(diào)查報(bào)告中57%的web表單只有 “靜態(tài)”的幫助提示，這些幫助提示只是之前假定好的一些和用戶(hù)有關(guān)的提示信息；這些提示被明顯地放在輸入框的旁邊。10%的操作提示通常是在一些幫助圖標(biāo)被點(diǎn)擊之后或者用戶(hù)輸入信息時(shí)才會(huì)出現(xiàn)的。
當(dāng)在為用戶(hù)提供幫助時(shí)，一定要確定幫助是簡(jiǎn)單地提示，并且可以方便地被找到和理解。這是確保用戶(hù)通過(guò)幫助提示不犯錯(cuò)誤地完成表單的決定性因素。為了達(dá)到這個(gè)目標(biāo)，你需要知道用戶(hù)希望這些幫助在什么地方出現(xiàn)。所以，這些幫助和提示通常被放在表單的什么位置呢？
我們注意到提示信息直接放在輸入框下方是一個(gè)強(qiáng)烈的趨勢(shì)。通常這類(lèi)幫助提示會(huì)有稍微不同的色彩，大部分情況比主要內(nèi)容要淺一些。
去年一整年，很多網(wǎng)站為了和用戶(hù)進(jìn)行互動(dòng)，看上去似乎確實(shí)充滿(mǎn)了Ajax的應(yīng)用，但Ajax在流行網(wǎng)站服務(wù)中仍然還沒(méi)有設(shè)法達(dá)到臨界點(diǎn)。令人驚訝的是，我們不能認(rèn)清Ajax的趨勢(shì)。用戶(hù)在輸入完所有信息點(diǎn)擊提交按鈕的“經(jīng)典”確認(rèn)技術(shù)依然比Javascript的實(shí)時(shí)確認(rèn)要來(lái)的流行。
根據(jù)我們的研究：
正如你所看到的，我們已經(jīng)識(shí)別出6種不同類(lèi)型的錯(cuò)誤提示。顯而易見(jiàn)，14%的表單仍舊使用Javascript錯(cuò)誤窗口來(lái)傳達(dá)問(wèn)題（例如，YouSendIt, Mail.ru, Newsvine, Clipmarks, Yandex，看下面的截圖），然而只有22%使用Ajax確認(rèn)（通常用來(lái)確認(rèn)用戶(hù)名的有效性）。當(dāng)然也顯然的是沒(méi)有一個(gè)網(wǎng)站是沒(méi)有任何確認(rèn)的。
Newsvine使用Javascript錯(cuò)誤窗口來(lái)傳達(dá)問(wèn)題。
通常設(shè)計(jì)師試圖報(bào)告錯(cuò)誤的使用方法。a、在點(diǎn)擊提交按鈕之后顯示錯(cuò)誤信息；b、在視覺(jué)上高光“不正確”的輸入框。第一種錯(cuò)誤情況通常會(huì)作為一條信息在頁(yè)面的頂部（表單之前）顯示出來(lái)。第二種情況通常是把錯(cuò)誤的輸入框的邊框色彩和輸入的標(biāo)簽進(jìn)行高光（大部分情況是紅色的字體以及紅色的背景色）。
有時(shí)候設(shè)計(jì)師合并兩種技術(shù)并且利用輸入?yún)^(qū)域高光錯(cuò)誤信息的方法。例如，看一下Ning結(jié)合兩種技術(shù)的注冊(cè)表單（請(qǐng)看下面的截圖）
通常，紅色被用于標(biāo)示錯(cuò)誤；但是在這種情況下就沒(méi)有必要了。當(dāng)表單完成時(shí)，Tickspot, Mixx.com和 Furl使用黃色來(lái)表示遇到的問(wèn)題。
不過(guò)，如果有任意一種色彩來(lái)表示注冊(cè)成功的話(huà)，它應(yīng)該就是綠色，97%的網(wǎng)站表示成功的視覺(jué)就是用綠色的。
只有18%的網(wǎng)站需要確認(rèn)Email（例如，Odeo, Ning）。老實(shí)說(shuō)，我們實(shí)在沒(méi)有任何理由讓用戶(hù)重復(fù)輸入email地址，畢竟用戶(hù)能夠看到他們輸?shù)氖鞘裁矗驗(yàn)閑mail地址的區(qū)域不像是密碼區(qū)域那樣是以星狀顯示的，對(duì)吧？
當(dāng)用戶(hù)看不到自己所輸?shù)膬?nèi)容（他們看到的是以星號(hào)代替的）時(shí)讓他們確認(rèn)輸入感覺(jué)上是有理由的。但是很多網(wǎng)站為了縮短完成注冊(cè)表單的時(shí)間而去掉二次確認(rèn)的步驟。
72%的情況是有必要確認(rèn)密碼的，但是許多例如Facebook，F(xiàn)riendster，LinkedIn, Stumbleupon, Pownce 和 Twitter的網(wǎng)站都不要求確認(rèn)密碼。
如果校驗(yàn)碼去掉的話(huà)用戶(hù)肯定很開(kāi)心，但是實(shí)際上校驗(yàn)碼卻是必要的，因?yàn)榫W(wǎng)站需要防止垃圾注冊(cè)軟件創(chuàng)建很多垃圾帳戶(hù)，不然他們需要不停地在數(shù)據(jù)庫(kù)中過(guò)濾掉這些賬戶(hù)。
根據(jù)我們的調(diào)查，
但是我們還是不能看清注冊(cè)表單是否需要校驗(yàn)碼的趨勢(shì)。任何情況下，如果你使用校驗(yàn)碼，請(qǐng)確定它是易可讀的，或者在不可讀的情況用戶(hù)可以實(shí)時(shí)刷新校驗(yàn)碼的。一些網(wǎng)站沒(méi)有提供實(shí)時(shí)刷新校驗(yàn)碼的功能，除了Digg，AOL, Slashdot, Google等。Fm倒是能夠讓校驗(yàn)碼變成可以聽(tīng)的，當(dāng)它很難被識(shí)別的時(shí)候。
當(dāng)我們?cè)谒伎荚O(shè)計(jì)表單時(shí)一些認(rèn)為會(huì)碰到的問(wèn)題時(shí)，我們期望注冊(cè)表單沒(méi)有取消按鈕，因?yàn)楫吘顾羞x項(xiàng)都已經(jīng)填寫(xiě)好了，對(duì)于用戶(hù)來(lái)講就沒(méi)有太大的意義去退出這個(gè)表單。然而我們?cè)谝欢ǔ潭壬襄e(cuò)了。
只有8%的情況使用了取消按鈕，這些情況中的一些取消按鈕正好出現(xiàn)在“條款和協(xié)議”的下面（例如，Zoho Writer）。所以如果用戶(hù)不同意服務(wù)條款，他們會(huì)退出這個(gè)流程。另一方面，一些服務(wù)在注冊(cè)之前給出了一個(gè)支付方案（例如，Crazyegg）。在這種情況下用戶(hù)選擇錯(cuò)了支付方案時(shí)他們需要利用取消按鈕返回并重新選擇另外更好的支付方案。
除此以外：我們還是不明白為什么Dzone要把取消按鈕放在注冊(cè)表單的左側(cè)。
如果使用取消按鈕的話(huà)，有4%的情況是放在提交按鈕的右側(cè)。在這些網(wǎng)站中觀(guān)察發(fā)現(xiàn)，取消和提交按鈕沒(méi)有非常強(qiáng)烈的視覺(jué)區(qū)別，而且還被挨在一起。從可用性觀(guān)點(diǎn)上去看，把主要?jiǎng)幼骱痛我獎(jiǎng)幼饔靡曈X(jué)區(qū)分開(kāi)來(lái)并且用明確的空隙去區(qū)別它們是更有意義的。
考慮到表單的樣式，把提交按鈕左對(duì)齊、右對(duì)齊或者放在中間是有實(shí)際意義的。有56%的設(shè)計(jì)師把提交按鈕左對(duì)齊，第二位是26%的把按鈕居中對(duì)齊。
右對(duì)齊的提交按鈕依然比較流行（17%），但是一般都是起到需要進(jìn)行下一步操作時(shí)的指示作用。在這些情況中提交按鈕經(jīng)常是以“繼續(xù)”或者“下一步”為標(biāo)題的。理由是：通常桌面軟件中的“下一步”按鈕就是放在右側(cè)的。
幾年前，大多數(shù)服務(wù)在成功注冊(cè)之后會(huì)提供一個(gè)簡(jiǎn)單，基礎(chǔ)的感謝信息（通常還帶有一個(gè)登錄的鏈接），現(xiàn)在大多數(shù)站點(diǎn)都試圖去激發(fā)用戶(hù)立刻探索一下他們的服務(wù)。
讓我們對(duì)以上調(diào)研進(jìn)行簡(jiǎn)單的回顧和總結(jié)。請(qǐng)記住我們只考慮注冊(cè)表單。
聯(lián)系客服
