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