必須面對的問題有：用戶不喜歡提交表單。然我們的目的是讓用戶愿意提交表單。

下面是一個關于web表單設計的調查報告，這個結果來源于100個令人矚目的網(wǎng)站。

注冊表單設計調查

1.表單的安置

1.1注冊表單鏈接的標題是怎么樣的？

當用戶想要加入某個時，他們會試圖尋找“sign-up”，“register”，“join”，“join”，“become a member”或者“creat an account”等這樣的短語。用戶期望可以通過這些鏈到注冊表單。不幸的是，情況不一定是這樣的。

從圖表可見，最受歡迎的標題是“Sign up”（40%），接著是“Join”（18%），“Register”（18%）以及“Creat account”（17%），極少數(shù)是按鈕超大，又閃亮，并且寫著“start here”的字樣。設計師與其設計并強調服務的功能性還不如試圖去表達信息。

1.2注冊表單的鏈接放在哪兒？

當用戶第一次訪問某個網(wǎng)站，他們會試圖找出單獨布局塊代表的意思。他們的眼睛運動是跳躍的，并且用戶試圖了解哪個區(qū)域是更重要的，他們想要的內容可能被放在什么地方。為了滿足用戶體驗，設計師需要幫助用戶直觀地知道哪些是在開始使用服務前所需要做的事。

如果用戶找不到通往注冊表單的鏈接，他可就不會注冊你的服務。因此讓鏈接盡可能地顯而易見是最關鍵的。那么設計師應該把“注冊”的鏈接放在什么地方？根據(jù)調查，這個注冊鏈接

59%的網(wǎng)站是放在網(wǎng)站的頂部（其中76%是被放在右上角）
21%的網(wǎng)站是放在首頁的突出位置（鏈接或者表單自己被放在首頁上）
9%是被隱藏在頂部“登陸”鏈接之后（例如：Craigslist）
很少注冊鏈接會被放在側邊欄上（7%-Propeller, Xing），但是4%的站點為用戶直接提供服務，只有在用戶需要保存設置的時候才需要用戶進行注冊。

2.表單的設計

2.1需要簡化注冊表單的樣式嗎？

當用戶點擊了注冊鏈接之后，他很有可能想要注冊你提供的服務。更重要的是，他并沒有點擊那些探索更深導航操作的鏈接或者具有吸引力的廣告鏈接。

因此，設計師嘗試去掉所有沒必要的詳細資料以及不能幫助用戶完成表單的描述。常常只是呈現(xiàn)一個logo和表單自身，沒有任何的導航操作和附加信息。用戶必須盡可能地關注在他要去完成的任務上。任何會分散用戶注意力的因素不應該被保留。

設計師經(jīng)常使用“最小化”的布局來構建注冊表單。根據(jù)調查，61%的web表單和普遍的頁面相比更簡單（例如：MovableType, Livejournal, Amazon, Yandex.ru）

從雅虎的注冊表單可以看出，訪問者只需要填寫賬戶信息即可，沒有別的干擾因素去分散用戶的注意力。注意表單中的語氣和語義都是吸引人的對話式，這既簡單又友好。

Flixster是個典型的反面例子，它把表單頁面塞得滿滿的，一點也不尊重它的訪問者。注冊頁面上提供了每種可能的操作導航，并且登陸頁面上右邊的廣告比登陸表單還要突出。Photobucket應該是我們見過的第二擁擠的表單。

2.2需要提供任何附加信息嗎？

許多設計師試圖通過類似于幫助、信息內容要求甚至是版權申明的附加信息來鼓勵訪問者主動填寫表格。但是它不同于點對點，在大部分例子中注冊的好處依然是通過表單來體現(xiàn)。

• 41%的表單告訴用戶注冊的好處（MySpace, Del.icio.us, Last.fm, LinkedIn, Digg, Mister Wong, Break.com）
• 28%僅僅是單純的注冊頁面，沒有任何附加信息（Pownce, DeviantArt, Dailymotion）
• 11%告訴用戶需要多久時間來填寫（Threadless, Newsvine, Wordpress)
• 很少一部分（6%）網(wǎng)站提到注冊過程中所需要填寫的信息。一些步驟中會提供一些警告（8%）和示意（6%，例如37signals, Bloglines）

2.3單頁表單VS多頁表單

調查結果中，93%的表單是單頁表單。設計師試圖幫助用戶盡可能快速和無痛地完成注冊流程。只有一些網(wǎng)站利用多頁表單把探索用戶參數(shù)選擇結合在注冊過程中。

比如，Meebo把一個完整的注冊過程整合在一張注冊表單中，并且通過一個彈出框的形式為用戶提供注冊向導。這個表單由6個頁面組成，用戶通過一些附加信息的選擇從而進行他們賬戶的設置。

2.4輸入框標附加信題需要突出嗎？

62%的注冊表單用粗體的方式去突出輸入框的標題。還有的使用斜體去達到同樣的效果。為了讓標簽能夠更加可見，20%的注冊表單用色彩，18%的用純文本。

2.5標簽對齊

根據(jù)“Matteo Penzo的標簽放置研究結果（Matteo Penzo’s label placement research）”（1996）和“Luke Wroblewski的發(fā)現(xiàn)（Luke Wroblewski’s findings）”（PDF），右對齊由于幾乎不需要眼睛的注視，能最大的減少完成的時間。如果你想要達到相同的目的但是只有一塊受實際區(qū)域制約的垂直屏幕，標簽頂端對齊則會更好一些。如果你想讓用戶了解標簽的內容，左對齊則是最好的。

2.6有多少必填區(qū)域？

當進行一個調查時，我們已經(jīng)注意到表單中的必填項越來越少了。幾年前，設計師要求訪問者填寫他們的姓名、地址、城市和個人興趣，但現(xiàn)在僅僅只需要登錄名、密碼和確認密碼。

我們發(fā)現(xiàn)54%的表單要求用戶最多填寫5個輸入框（其中6%的網(wǎng)站在使用服務前根本不需要注冊）。34%的表單使用6-8個輸入框，然而有12%的網(wǎng)站頂著用戶的忍耐度讓他們完成超過9個的必填項。

2.7有多少可選項？

和上面發(fā)現(xiàn)的類似，我們注意到大多數(shù)網(wǎng)站避免可選項并且要求用戶在完成注冊流程之后補全可選項。其中62%的表單根本就沒有可選項，還有98%的表單有少于5個的可選項。

2.8垂直或者水平的安排區(qū)域

在這個方面，垂直無阻礙延伸的垂直布局區(qū)域是注冊表單表現(xiàn)出強大趨勢。86%的網(wǎng)站把輸入框垂直布局。除此以外，15%的布局更強調利用漂亮且吸引人的視覺設計來讓訪問者在填寫表單時感到更舒適。

Box.net提供了一個簡單的垂直布局的輸入?yún)^(qū)域。當用戶輸入數(shù)據(jù)的時候，他們的眼睛固定在縱軸輸入框左側的交叉點上。

Mint是一個橫向布局的注冊表單。當用戶輸入數(shù)據(jù)的時候，他們的眼睛需要跳來跳出。

3、表單的功能性

3.1.Hover,active,focus – 使用中的效果?

為了提高表單的完成率，設計師試圖避免各種各樣的分散因素，并且提供一個清晰明確并且簡單的web表單。這就是為什么任何視覺效果需要非常適當?shù)厥褂玫脑颉?/P>

84%的web表單沒有任何種類的hover、active或者focus的效果
16%使用非常細微的鼠標上移的效果

3.2. 幫助，支持，工具技巧：靜態(tài)還是動態(tài)的？

有時候，輸入?yún)^(qū)域的標簽不夠明確，但是用戶卻需要足夠理解才能提供這些信息。用戶名適用哪些字符格式？密碼的字符數(shù)限制是多少？提供的Email地址會不會自動變成登錄名使用？

用戶通過建議和技巧的幫助最小化地減少輸入框重新考慮的次數(shù)。而且，沒有比雖然輸入的內容看上去完全正確，但是輸入框卻不接受的情況更惱怒的了。為了避免這個問題，設計師（通常）使用不引人注目但清晰的建議提示。

調查報告中57%的web表單只有 “靜態(tài)”的幫助提示，這些幫助提示只是之前假定好的一些和用戶有關的提示信息；這些提示被明顯地放在輸入框的旁邊。10%的操作提示通常是在一些幫助圖標被點擊之后或者用戶輸入信息時才會出現(xiàn)的。

3.3．幫助，支持，操作提示：應該放在什么位置？

當在為用戶提供幫助時，一定要確定幫助是簡單地提示，并且可以方便地被找到和理解。這是確保用戶通過幫助提示不犯錯誤地完成表單的決定性因素。為了達到這個目標，你需要知道用戶希望這些幫助在什么地方出現(xiàn)。所以，這些幫助和提示通常被放在表單的什么位置呢？

如果幫助提示出現(xiàn)的話，它們會出現(xiàn)在…

在輸入?yún)^(qū)域下面（57%）
在輸入?yún)^(qū)域的右側（26%）
在輸入?yún)^(qū)域的上方（13%）
在輸入?yún)^(qū)域的左側（4%）
我們注意到提示信息直接放在輸入框下方是一個強烈的趨勢。通常這類幫助提示會有稍微不同的色彩，大部分情況比主要內容要淺一些。

3.4.輸入確認：靜態(tài)的還是Ajax動態(tài)？

去年一整年，很多網(wǎng)站為了和用戶進行互動，看上去似乎確實充滿了Ajax的應用，但Ajax在流行網(wǎng)站服務中仍然還沒有設法達到臨界點。令人驚訝的是，我們不能認清Ajax的趨勢。用戶在輸入完所有信息點擊提交按鈕的“經(jīng)典”確認技術依然比Javascript的實時確認要來的流行。

根據(jù)研究：

30%的表單只在表單頂部顯示一條錯誤信息。（沒有提示哪個輸入框有問題）
29%的表單會在輸入框旁邊提示相應的操作幫助（頂部沒有提供錯誤信息）
25%的表單同時使用錯誤信息和輸入框提示。
22%的表單利用Ajax的實時確認來進行提示。
14%利用Javascript的錯誤提醒。
1%的表單是用系統(tǒng)信息提醒，并且給出“后退”鏈接。

3.5．錯誤信息的設計

正如你所看到的，我們已經(jīng)識別出6種不同類型的錯誤提示。顯而易見，14%的表單仍舊使用Javascript錯誤窗口來傳達問題（例如，YouSendIt, Mail.ru, Newsvine, Clipmarks, Yandex，看下面的截圖），然而只有22%使用Ajax確認（通常用來確認用戶名的有效性）。當然也顯然的是沒有一個網(wǎng)站是沒有任何確認的。

Newsvine使用Javascript錯誤窗口來傳達問題。

通常設計師試圖報告錯誤的使用方法。a、在點擊提交按鈕之后顯示錯誤信息；b、在視覺上高光“不正確”的輸入框。第一種錯誤情況通常會作為一條信息在頁面的頂部（表單之前）顯示出來。第二種情況通常是把錯誤的輸入框的邊框色彩和輸入的標簽進行高光（大部分情況是紅色的字體以及紅色的背景色）。

有時候設計師合并兩種技術并且利用輸入?yún)^(qū)域高光錯誤信息的方法。例如，看一下Ning結合兩種技術的注冊表單

通常，紅色被用于標示錯誤；但是在這種情況下就沒有必要了。當表單完成時，Tickspot, Mixx.com和Furl使用黃色來表示遇到的問題。

不過，如果有任意一種色彩來表示注冊成功的話，它應該就是綠色，97%的網(wǎng)站表示成功的視覺就是用綠色的。

3.6有必要確認Email嗎？

只有18%的網(wǎng)站需要確認Email（例如，Odeo, Ning）。我們實在沒有任何理由讓用戶重復輸入email地址，畢竟用戶能夠看到他們輸?shù)氖鞘裁?，因為email地址的區(qū)域不像是密碼區(qū)域那樣是以星狀顯示。

3.7有必要去確認密碼嗎？

當用戶看不到自己所輸?shù)膬热荩ㄋ麄兛吹降氖且孕翘柎娴模r讓他們確認輸入感覺上是有理由的。但是很多網(wǎng)站為了縮短完成注冊表單的時間而去掉二次確認的步驟。

72%的情況是有必要確認密碼的，但是許多例如Facebook，F(xiàn)riendster，LinkedIn, Stumbleupon, Pownce 和 Twitter的網(wǎng)站都不要求確認密碼。

3.8. 需要使用校驗碼嗎？

如果校驗碼去掉的話用戶肯定很開心，但是實際上校驗碼卻是必要的，因為網(wǎng)站需要防止垃圾注冊軟件創(chuàng)建很多垃圾帳戶，不然他們需要不停地在數(shù)據(jù)庫中過濾掉這些賬戶。

根據(jù)我們的調查：

52%的網(wǎng)站沒有使用校驗碼。
39%的網(wǎng)站是不能在不刷新頁面的情況下實時刷新校驗碼的，這個實在是在可用性上非常的糟糕的一件事。
但是我們還是不能看清注冊表單是否需要校驗碼的趨勢。任何情況下，如果你使用校驗碼，請確定它是易可讀的，或者在不可讀的情況用戶可以實時刷新校驗碼的。一些網(wǎng)站沒有提供實時刷新校驗碼的功能，除了Digg，AOL, Slashdot, Google等。Fm倒是能夠讓校驗碼變成可以聽的，當它很難被識別的時候。

3.9.需要使用取消按鈕嗎？

當我們在思考設計表單時一些認為會碰到的問題時，我們期望注冊表單沒有取消按鈕，因為畢竟所有選項都已經(jīng)填寫好了，對于用戶來講就沒有太大的意義去退出這個表單。然而我們在一定程度上錯了。

只有8%的情況使用了取消按鈕，這些情況中的一些取消按鈕正好出現(xiàn)在“條款和協(xié)議”的下面（例如，Zoho Writer）。所以如果用戶不同意服務條款，他們會退出這個流程。另一方面，一些服務在注冊之前給出了一個支付方案（例如，Crazyegg）。在這種情況下用戶選擇錯了支付方案時他們需要利用取消按鈕返回并重新選擇另外更好的支付方案。

除此以外：我們還是不明白為什么Dzone要把取消按鈕放在注冊表單的左側。

如果使用取消按鈕的話，有4%的情況是放在提交按鈕的右側。在這些網(wǎng)站中觀察發(fā)現(xiàn)，取消和提交按鈕沒有非常強烈的視覺區(qū)別，而且還被挨在一起。從可用性觀點上去看，把主要動作和次要動作用視覺區(qū)分開來并且用明確的空隙去區(qū)別它們是更有意義的。

3.10. 提交按鈕的對齊方式

考慮到表單的樣式，把提交按鈕左對齊、右對齊或者放在中間是有實際意義的。有56%的設計師把提交按鈕左對齊，第二位是26%的把按鈕居中對齊。

右對齊的提交按鈕依然比較流行（17%），但是一般都是起到需要進行下一步操作時的指示作用。在這些情況中提交按鈕經(jīng)常是以“繼續(xù)”或者“下一步”為標題的。理由是：通常桌面軟件中的“下一步”按鈕就是放在右側的。

3.11. 感謝信息

幾年前，大多數(shù)服務在成功注冊之后會提供一個簡單，基礎的感謝信息（通常還帶有一個登錄的鏈接），現(xiàn)在大多數(shù)站點都試圖去激發(fā)用戶立刻探索一下他們的服務。
45%的網(wǎng)站要求用戶在完成注冊之后提供更多的信息，在他們的網(wǎng)站上找到自己的朋友，或者邀請用戶的朋友來使用他們的網(wǎng)站。
33%的表單會用友好并具有吸引力的語氣指出 “接下來要去地方”（網(wǎng)站功能的探索）。
4%的網(wǎng)站提供了一個基礎的“謝謝你”的消息。
2%是直接跳轉到首頁。

更多的發(fā)現(xiàn)

18%的注冊表單旁邊都會有登錄表單或者登錄連接。（例如, YouTube, Reddit, Digg, Lulu, Metacafe）
78%的注冊表單沒有用星號或者高光去表示必選框；大多數(shù)情況無論星號或者其他形式的高光都不會被使用。
9%的注冊表單用流程指示來告訴用戶他們進行到哪一步了，并且告訴他們哪些步驟是完成注冊的必填項。
85%的站點更喜歡用盡可能簡單的web表單。
區(qū)域通常都是用空白區(qū)來群組和拆分的，有時邊框的用途也和空白區(qū)一樣（22%），還有9%的情況是利用不同的背景色來區(qū)分。
99%的案例中都是用到標簽索引（除了Habrahabr）
24%的表單使用談話式的語氣，試圖通過標示的對話達到用戶所需。在這種環(huán)境中通常使用類似“你叫什么？”，“你的Email請告訴我一下？”或者“我想要……”等非正式的語句。
38%的網(wǎng)站寧可毅然選擇正式商務的語氣，友好地讓用戶填寫所需的信息。（例如，“您的用戶名”，“確認密碼”等等）
38%的網(wǎng)站使用系統(tǒng)語言，用戶被要求“登錄”，“用戶密碼”，“地址”等等。

總結

注冊鏈接的標題大多數(shù)是“sign up”（40%）并且被放在右上角。
注冊表單為了避免分散用戶的注意力而使用簡單的樣式。
93%的注冊表單是單頁表單。
41%的注冊表單通過解釋注冊的優(yōu)勢來吸引用戶注冊。
62%的輸入框標題是通過加粗高亮的。
標簽不是都排成一條直線的。
設計師試圖不用必填項和可選項。
86%的注冊表單更喜歡用垂直布局的表單。
注冊表單沒有任何hover,active或者focus的特效（84%）。
提示和幫助不管是靜態(tài)（57%）或者動態(tài)（33%）都是出現(xiàn)在輸入框下方（57%）或者右側(26%)。
狀態(tài)確認和動態(tài)確認一樣流行。當然Ajax不是趨勢
82%不需要email確認
72%需要密碼確認
校驗碼可用（48%）可不用（52%）
92%不用取消按鈕
提交按鈕是左對齊（56%）或者居中對齊（26%）
感謝信息激發(fā)用戶繼續(xù)探索網(wǎng)站的服務（45%）

原文地址：
http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/ 
http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/

來源：http://hi.baidu.com/yumcn/blog/item/7c868bef5d6413e2cf1b3e23.html