來源：ChinaUI 作者：折折熊譯
如果你想最大化你的服務所帶來的效益，你就必須最大化你網站表單的成功率。僅僅簡單的讓用戶在你網站上註冊是不夠的，除非你有能夠讓訪問你網站的人一看就映像深刻的點子。爲了讓服務達到最大化的體現，我們設計師需要提供用戶一個良好的用戶體驗。我們需要邀請用戶，爲他們描述服務產品有多少好，給他們解釋爲什麼他們需要填那些表單並且暗示他們會因此得到利益的回報。當然，我們也應該做的非常方便讓用戶來參與。
但是設計有效的頁面表單不是件容易的事情。有個不爭的事實就是：沒人喜歡填表單——無論是線上還是線下的。因此，作爲設計師我們需要找出能夠讓表單百分百簡單、直接甚至無痛苦的正確的設計決策。
但是怎麼樣才能準確地找出這些決策？佈局上那些鏈接應該放在表單的什麼位置？我們應該怎麼設計它？我們應該怎麼樣高亮標籤，應該怎麼樣排列他們？頁面表單設計樣式怎麼樣才符合現代化的網站？我們拿這些問題問我們自己，並且通過實施調查來得到這些結果。
下面我們介紹一下現在互聯網web表單設計樣式的調查結果。這些結果是分析了100個擁有和web表單相關流程的網站而得出的。我們決定從註冊表單開始。
註冊表單設計調查
調查的目的主要是提供給那些憑直接來判斷有效性的設計師和開發人員參考依據。我們也會介紹一些如何讓web表單成爲完美的友好用戶界面的指導方針。
我們已經選擇了100個和web表單有關的大型網站。這些網站是根據博客搜索和Alexa排名以及搜索引擎中的受歡迎程度等方面去考慮選擇的。這些網站直接商業目標的影響普遍和他們的web表單相關，因此在流程中需要指定爲高優先級進行設計。尤其註冊表單是爲解釋爲什麼許多評論表單是來自於社會類型的網站的關鍵。
我們關注註冊表單是想把更多關鍵表單單獨開來（例如校驗表單）。然後我們分別完成每個被選擇網站的註冊表單並且分析這些表單的設計方法。
我們在每個表單中利用一個特殊的Email賬戶和特殊的用戶名，爲了使調查儘可能地具有廣泛性，我們指出29個在設計web表單時會碰到的不同的設計問題和疑問。
我們將它們分類並試圖找出相似的設計方針和設計思路。我們試圖從可用性觀點上着手，不斷關注兩者的正面和反面的例子並將他們陳列在調查結果中。
請注意這個文章不是關於校驗表單——那是另外一個討論的話題，我們把它獨立開來看待成一個即將要討論的文章。我們要感謝Wufoo爲我們提供構架來引導我們的調查。
1.表單的安置
1.1註冊表單鏈接的標題是怎麼樣的？
當用戶想要加入網站是，用戶會尋找正確的短語，用戶知道它們應該是“sign- up”，“register”，“join”，“join”，“become a member”或者“creat an account”等。顯然，用戶期望他們其中之一的鏈接可以鏈到註冊表單。不幸的是，情況不一定是這樣的。
從圖表可見，最受歡迎的標題是“Sign up”（40%），接着是“Join”（18%），“Register”（18%）以及“Creat account”（17%），我們觀察到極少數有類似於我們去年看到的按鈕那樣即大，又閃亮，並且寫着“start here”的字樣。顯而易見，設計師與其設計並強調服務的功能性還不如試圖去表達信息。
1.2註冊表單的鏈接放在哪兒？
當用戶第一次訪問一個站點，他們試圖找出單獨佈局塊是代表什麼。他們的眼睛運動是跳躍的，並且用戶試圖瞭解哪個區域是更重要的，他們想要的內容可能被放在什麼地方。爲了滿足用戶體驗，設計師需要幫助用戶直觀地知道哪些是在開始使用服務前所需要做的事。
如果用戶找不到通往註冊表單的鏈接，他可能就不會註冊你的服務。因此讓鏈接儘可能地顯而易見是最關鍵的。那麼設計師應該把“註冊”的鏈接放在什麼地方纔會讓用戶感覺更可接近？
根據我們的調查，這個註冊鏈接
- 59%的網站是放在網站的頂部（其中76%是被放在右上角）
- 21%的網站是放在首頁的突出位置（鏈接或者表單自己被放在首頁上）
- 有9%是被隱藏在頂部“登陸”鏈接之後（例如：Craigslist）
實際上註冊鏈接很少被放在側邊欄上（7%-Propeller,Xing），但是4%的站點爲用戶直接提供服務，只有在用戶需要保存設置的時候才需要用戶進行註冊。
2.表單的設計
2.1需要簡化註冊表單的樣式嗎？
當用戶點擊了註冊鏈接之後，他很有可能想要註冊你提供的服務。更重要的是，他並沒有點擊那些探索更深導航操作的鏈接或者具有吸引力的閃亮的廣告鏈接。
因此，設計師嘗試去掉所有沒必要的詳細資料以及不能幫助用戶完成表單的描述。常常只是呈現一個logo和表單自身，沒有任何的導航操作和附加信息。想法：用戶必須儘可能地關注在他要去完成的任務上。任何會分散用戶注意力的因素不得不被刪除。
因此，設計師經常使用“最小化”的佈局來構建註冊表單。根據我們的調查，61%的web表單和普遍的頁面相比更簡單（例如：MovableType, Livejournal, Amazon, Yandex.ru）
根據雅虎的註冊表單可以看出，訪問者僅僅需要填寫賬戶信息即可，沒有別的干擾因素去分散用戶的注意力。注意表單中的語氣和語義都是吸引人的對話式，這既簡單又友好。
Flixster是個典型的反面例子，它把表單塞得很滿，一點也不尊重它的訪問者。註冊頁面上一下子提供了每種可能的操作導航，並且登陸頁面上右邊的廣告比登陸表單還要突出。這樣一點也不友好，Photobucket應該是我們見過的第二擁擠的web表單。
2.2需要提供任何附加信息嗎？
許多設計師試圖通過類似於幫助、信息內容要求甚至是版權申明的附加信息來鼓勵訪問者主動填寫表格。但是它不同於點對點，在大部分例子中註冊的好處依然是通過表單來體現。
- 41%的表單告訴用戶註冊的好處
- (MySpace, Del.icio.us, Last.fm, LinkedIn, Digg, Mister Wong, Break.com)
- 28%僅僅是單純的註冊頁面，沒有任何附加信息
- (Pownce, DeviantArt, Dailymotion)
- 11%告訴用戶需要多久時間來填寫。
- (Threadless, Newsvine, Wordpress)
只有很少一部分（6%）網站正面提及在註冊過程中所需要填寫的信息。一些步驟中會提供一些警告（8%）和示意（6%，例如37signals, Bloglines）
2.3單頁表單VS多頁表單
調查結果中，93%的表單是單頁表單。顯然地，設計師試圖幫助用戶儘可能快速和無痛苦地完成註冊流程。只有一些網站利用多頁表單試圖把探索用戶參數選擇結合在註冊過程中。
比如，Meebo把一個完整的註冊過程整合在一張註冊表單中，並且通過一個彈出框的形式爲用戶提供註冊嚮導。這個表單由6個頁面組成，用戶通過一些附加信息的選擇從而進行他們賬戶的設置。
2.4輸入框標附加信題需要突出嗎？
62%的註冊表單用加粗的方式去突出輸入框的標題。爲了引人注目而不止一個的使用斜體去達到同樣的效果。爲了讓標籤能夠更加可見，20%的註冊表單用色彩，18%的用純文本。
2.5標籤對齊
老實說，我們已經預料到可能對齊是一個很強的趨勢 。但是在我們看來，標籤對齊的趨勢已經不再那麼強烈了。
- 在調查中41%的網站使用標籤右對齊 (YouTube, Facebook, Metacafe)
- 30%的註冊表單使用頂端對齊 (Behance.net, Wufoo, Tickspot, DZone)
- 29%使用的是左對齊 (Digg, Ning, Wykop.pl, 43things, StupZ).
根據“Matteo Penzo的標籤放置研究結果”（1996）和“Luke Wroblewski的發現”（PDF），右對齊能夠戲劇性地減少完成時間因爲它們幾乎不需要眼睛的注視。如果你想要達到相同的目的但是隻有一塊受實際區域制約的垂直屏幕，標籤頂端對齊則會更好一些。還有以防你的表格要求人們掃描標籤去了解什麼是必須的（不熟悉或者高級的數據），左對齊則是最好的。
2.6有多少必填區域？
當進行一個調查時，我們已經注意到表單中的必填項越來越少了。幾年前，設計師要求訪問者填寫他們的姓名、地址、城市和個人興趣，但現在僅僅只需要登錄名、密碼和確認密碼。
我們發現54%的表單要求用戶最多填寫5個輸入框（其中6%的網站在使用服務前根本不需要註冊）。34%的表單使用6-8個輸入框，然而有12%的網站頂着用戶的忍耐度讓他們完成超過9個的必填項。
2.7有多少可選項？
和上面發現的類似，我們注意到大多數網站避免可選項並且要求用戶在完成註冊流程之後補全可選項。其中62%的表單根本就沒有可選項，還有98%的表單有少於5個的可選項。
2.8垂直或者水平的安排區域
在這個方面，垂直無阻礙延伸的垂直佈局區域是註冊表單表現出強大趨勢。86%的網站把輸入框垂直佈局。除此以外，15%的佈局更強調利用漂亮且吸引人的視覺設計來讓訪問者在填寫表單時感到更舒適。
Box.net提供了一個簡單的垂直佈局的輸入區域。當用戶輸入數據的時候，他們的眼睛固定在縱軸輸入框左側的交叉點上。
Mint是一個橫向佈局的註冊表單。當用戶輸入數據的時候，他們的眼睛需要跳來跳出。
更多的發現
- 調查結果中18%的註冊表單旁邊都會有登錄表單或者登錄連接。（例如, YouTube, Reddit, Digg, Lulu, Metacafe）
- 78%的註冊表單沒有用星號或者高光去表示必選框；大多數情況無論星號或者其他形式的高光都不會被使用。
- 9%的註冊表單用流程指示來告訴用戶他們進行到哪一步了，並且告訴他們哪些步驟是完成註冊的必填項。
- 85%的站點更喜歡用儘可能簡單的web表單。
- 區域通常都是用空白區來羣組和拆分的，有時邊框的用途也和空白區一樣（22%），還有9%的情況是利用不同的背景色來區分。
概要
讓我們來爲這個web表單設計樣式調查的第一部分做一個總結。請記住，我們只考慮註冊表單。
- 註冊鏈接的標題大多數是“sign up”（40%）並且被放在右上角。
- 註冊表單爲了避免分散用戶的注意力而使用簡單的樣式。
- 93%的註冊表單是單頁表單。
- 41%的註冊表單通過解釋註冊的優勢來吸引用戶註冊。
- 62%的輸入框標題是通過加粗高亮的。
- 標籤不是都排成一條直線的。
- 設計師試圖不用必填項和可選項。
- 86%的註冊表單更喜歡用垂直佈局的表單。
3、表單的功能性
在研究的第一部分裏，我們已經仔細考慮過註冊鏈接和註冊表單的佈局和視覺表現形式。但是如果表單不能正常工作的話設計的多漂亮都沒有用，表單完成率依然很低。讓我們現在來考慮一下註冊表單功能性的典型問題以及設計時的方式方法。
3.1.Hover,active,focus - 使用中的效果?
顯然地，爲了提高表單的完成率，設計師試圖避免各種各樣的分散因素，並且提供一個清晰明確並且簡單的web表單。這就是爲什麼任何視覺效果需要非常適當地使用的本質原因。
- 84%的web表單沒有任何種類的hover、active或者focus的效果。
- 16%使用非常細微的鼠標上移的效果。
3.2. 幫助，支持，工具技巧：靜態還是動態的？
有時候，輸入區域的標籤不夠明確，但是用戶卻需要足夠理解才能提供這些信息。用戶名適用哪些字符格式？密碼的字符數限制是多少？提供的Email地址會不會自動變成登錄名使用？
用戶通過建議和技巧的幫助最小化地減少輸入框重新考慮的次數。而且，沒有比雖然輸入的內容看上去完全正確，但是輸入框卻不接受的情況更惱怒的了。爲了避免這個問題，設計師（通常）使用不引人注目但清晰的建議提示。
調查報告中57%的web表單只有 “靜態”的幫助提示，這些幫助提示只是之前假定好的一些和用戶有關的提示信息；這些提示被明顯地放在輸入框的旁邊。10%的操作提示通常是在一些幫助圖標被點擊之後或者用戶輸入信息時纔會出現的。
3.3．幫助，支持，操作提示：應該放在什麼位置？
當在爲用戶提供幫助時，一定要確定幫助是簡單地提示，並且可以方便地被找到和理解。這是確保用戶通過幫助提示不犯錯誤地完成表單的決定性因素。爲了達到這個目標，你需要知道用戶希望這些幫助在什麼地方出現。所以，這些幫助和提示通常被放在表單的什麼位置呢？
如果幫助提示出現的話，它們會出現在…
- 在輸入區域下面（57%）
- 在輸入區域的右側（26%）
- 在輸入區域的上方（13%）
- 在輸入區域的左側（4%）
我們注意到提示信息直接放在輸入框下方是一個強烈的趨勢。通常這類幫助提示會有稍微不同的色彩，大部分情況比主要內容要淺一些。
3.4.輸入確認：靜態的還是Ajax動態？
去年一整年，很多網站爲了和用戶進行互動，看上去似乎確實充滿了Ajax的應用，但Ajax在流行網站服務中仍然還沒有設法達到臨界點。令人驚訝的是，我們不能認清Ajax的趨勢。用戶在輸入完所有信息點擊提交按鈕的“經典”確認技術依然比Javascript的實時確認要來的流行。
根據我們的研究：
- 30%的表單只在表單頂部顯示一條錯誤信息。（沒有提示哪個輸入框有問題）
- 29%的表單會在輸入框旁邊提示相應的操作幫助（頂部沒有提供錯誤信息）
- 25%的表單同時使用錯誤信息和輸入框提示。
- 22%的表單利用Ajax的實時確認來進行提示。
- 14%利用Javascript的錯誤提醒。
- 1%的表單是用系統信息提醒，並且給出“後退”鏈接。
3.5．錯誤信息的設計
正如你所看到的，我們已經識別出6種不同類型的錯誤提示。顯而易見，14%的表單仍舊使用Javascript錯誤窗口來傳達問題（例如，YouSendIt, Mail.ru, Newsvine, Clipmarks, Yandex，看下面的截圖），然而只有22%使用Ajax確認（通常用來確認用戶名的有效性）。當然也顯然的是沒有一個網站是沒有任何確認的。
Newsvine使用Javascript錯誤窗口來傳達問題。
通常設計師試圖報告錯誤的使用方法。a、在點擊提交按鈕之後顯示錯誤信息；b、在視覺上高光“不正確”的輸入框。第一種錯誤情況通常會作爲一條信息在頁面的頂部（表單之前）顯示出來。第二種情況通常是把錯誤的輸入框的邊框色彩和輸入的標籤進行高光（大部分情況是紅色的字體以及紅色的背景色）。
有時候設計師合併兩種技術並且利用輸入區域高光錯誤信息的方法。例如，看一下Ning結合兩種技術的註冊表單（請看下面的截圖）
通常，紅色被用於標示錯誤；但是在這種情況下就沒有必要了。當表單完成時，Tickspot, Mixx.com和 Furl使用黃色來表示遇到的問題。
不過，如果有任意一種色彩來表示註冊成功的話，它應該就是綠色，97%的網站表示成功的視覺就是用綠色的。
3.6有必要確認Email嗎？
只有18%的網站需要確認Email（例如，Odeo, Ning）。老實說，我們實在沒有任何理由讓用戶重複輸入email地址，畢竟用戶能夠看到他們輸的是什麼，因爲email地址的區域不像是密碼區域那樣是以星狀顯示的，對吧？
3.7有必要去確認密碼嗎？
當用戶看不到自己所輸的內容（他們看到的是以星號代替的）時讓他們確認輸入感覺上是有理由的。但是很多網站爲了縮短完成註冊表單的時間而去掉二次確認的步驟。
72%的情況是有必要確認密碼的，但是許多例如Facebook，Friendster，LinkedIn, Stumbleupon, Pownce 和 Twitter的網站都不要求確認密碼。
3.8. 需要使用校驗碼嗎？
如果校驗碼去掉的話用戶肯定很開心，但是實際上校驗碼卻是必要的，因爲網站需要防止垃圾註冊軟件創建很多垃圾帳戶，不然他們需要不停地在數據庫中過濾掉這些賬戶。
根據我們的調查，
- 52%的網站沒有使用校驗碼。
- 有39%的網站是不能在不刷新頁面的情況下實時刷新校驗碼的，這個實在是在可用性上非常的糟糕的一件事。
但是我們還是不能看清註冊表單是否需要校驗碼的趨勢。任何情況下，如果你使用校驗碼，請確定它是易可讀的，或者在不可讀的情況用戶可以實時刷新校驗碼的。一些網站沒有提供實時刷新校驗碼的功能，除了Digg，AOL, Slashdot, Google等。Fm倒是能夠讓校驗碼變成可以聽的，當它很難被識別的時候。
3.9.需要使用取消按鈕嗎？
當我們在思考設計表單時一些認爲會碰到的問題時，我們期望註冊表單沒有取消按鈕，因爲畢竟所有選項都已經填寫好了，對於用戶來講就沒有太大的意義去退出這個表單。然而我們在一定程度上錯了。
只有8%的情況使用了取消按鈕，這些情況中的一些取消按鈕正好出現在“條款和協議”的下面（例如，Zoho Writer）。所以如果用戶不同意服務條款，他們會退出這個流程。另一方面，一些服務在註冊之前給出了一個支付方案（例如，Crazyegg）。在這種情況下用戶選擇錯了支付方案時他們需要利用取消按鈕返回並重新選擇另外更好的支付方案。
除此以外：我們還是不明白爲什麼Dzone要把取消按鈕放在註冊表單的左側。
如果使用取消按鈕的話，有4%的情況是放在提交按鈕的右側。在這些網站中觀察發現，取消和提交按鈕沒有非常強烈的視覺區別，而且還被挨在一起。從可用性觀點上去看，把主要動作和次要動作用視覺區分開來並且用明確的空隙去區別它們是更有意義的。
3.10. 提交按鈕的對齊方式
考慮到表單的樣式，把提交按鈕左對齊、右對齊或者放在中間是有實際意義的。有56%的設計師把提交按鈕左對齊，第二位是26%的把按鈕居中對齊。
右對齊的提交按鈕依然比較流行（17%），但是一般都是起到需要進行下一步操作時的指示作用。在這些情況中提交按鈕經常是以“繼續”或者“下一步”爲標題的。理由是：通常桌面軟件中的“下一步”按鈕就是放在右側的。
3.11. 感謝信息
幾年前，大多數服務在成功註冊之後會提供一個簡單，基礎的感謝信息（通常還帶有一個登錄的鏈接），現在大多數站點都試圖去激發用戶立刻探索一下他們的服務。
- 45%的網站要求用戶在完成註冊之後提供更多的信息，在他們的網站上找到自己的朋友，或者邀請用戶的朋友來使用他們的網站。
- 33%的表單會用友好並具有吸引力的語氣指出 “接下來要去地方”（網站功能的探索）。
- 4%的網站提供了一個基礎的“謝謝你”的消息。
- 2%是直接跳轉到首頁。
更多的發現
- 99%的案例中都是用到標籤索引（除了Habrahabr）
- 24%的表單使用談話式的語氣，試圖通過標示的對話達到用戶所需。在這種環境中通常使用類似“你叫什麼？”，“你的Email請告訴我一下？”或者“我想要……”等非正式的語句。
- 38%的網站寧可毅然選擇正式商務的語氣，友好地讓用戶填寫所需的信息。（例如，“您的用戶名”，“確認密碼”等等）
- 38%的網站使用系統語言，用戶被要求“登錄”，“用戶密碼”，“地址”等等。
概要
讓我們對以上調研進行簡單的回顧和總結。請記住我們只考慮註冊表單。
- 註冊表單沒有任何hover,active或者focus的特效（84%）。
- 提示和幫助不管是靜態（57%）或者動態（33%）都是出現在輸入框下方（57%）或者右側(26%)。
- 狀態確認和動態確認一樣流行。當然Ajax不是趨勢
- 82%不需要email確認
- 72%需要密碼確認
- 校驗碼可用（48%）可不用（52%）
- 92%不用取消按鈕
- 提交按鈕是左對齊（56%）或者居中對齊（26%）
- 感謝信息激發用戶繼續探索網站的服務（45%）