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

下面是一個(gè)關(guān)于web表單設(shè)計(jì)的調(diào)查報(bào)告，這個(gè)結(jié)果來源于100個(gè)令人矚目的網(wǎng)站。

注冊(cè)表單設(shè)計(jì)調(diào)查

1.表單的安置

1.1注冊(cè)表單鏈接的標(biāo)題是怎么樣的？

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

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

1.2注冊(cè)表單的鏈接放在哪兒？

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

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

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

2.表單的設(shè)計(jì)

2.1需要簡(jiǎn)化注冊(cè)表單的樣式嗎？

當(dāng)用戶點(diǎn)擊了注冊(cè)鏈接之后，他很有可能想要注冊(cè)你提供的服務(wù)。更重要的是，他并沒有點(diǎn)擊那些探索更深導(dǎo)航操作的鏈接或者具有吸引力的廣告鏈接。

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

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

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

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

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

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

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

2.3單頁表單VS多頁表單

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

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

2.4輸入框標(biāo)附加信題需要突出嗎？

62%的注冊(cè)表單用粗體的方式去突出輸入框的標(biāo)題。還有的使用斜體去達(dá)到同樣的效果。為了讓標(biāo)簽?zāi)軌蚋涌梢姡?0%的注冊(cè)表單用色彩，18%的用純文本。

2.5標(biāo)簽對(duì)齊

• 41%的網(wǎng)站使用標(biāo)簽右對(duì)齊 （YouTube,?Facebook,?Metacafe）
• 30%的注冊(cè)表單使用頂端對(duì)齊（Behance.net,?Wufoo,?Tickspot,?Mixx,?DZone）
• 29%使用的是左對(duì)齊（(Digg,?Ning,?Wykop.pl,?43things,?StudiVZ）

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

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

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

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

2.7有多少可選項(xiàng)？

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

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

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

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

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

3、表單的功能性

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

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

• 84%的web表單沒有任何種類的hover、active或者focus的效果
• 16%使用非常細(xì)微的鼠標(biāo)上移的效果

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

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

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

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

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

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

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

• 在輸入?yún)^(qū)域下面（57%）
• 在輸入?yún)^(qū)域的右側(cè)（26%）
• 在輸入?yún)^(qū)域的上方（13%）
• 在輸入?yún)^(qū)域的左側(cè)（4%）

我們注意到提示信息直接放在輸入框下方是一個(gè)強(qiáng)烈的趨勢(shì)。通常這類幫助提示會(huì)有稍微不同的色彩，大部分情況比主要內(nèi)容要淺一些。

3.4.輸入確認(rèn)：靜態(tài)的還是Ajax動(dòng)態(tài)？

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

根據(jù)研究：

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

3.5．錯(cuò)誤信息的設(shè)計(jì)

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

Newsvine使用Javascript錯(cuò)誤窗口來傳達(dá)問題。

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

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

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

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

3.6有必要確認(rèn)Email嗎？

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

3.7有必要去確認(rèn)密碼嗎？

當(dāng)用戶看不到自己所輸?shù)膬?nèi)容（他們看到的是以星號(hào)代替的）時(shí)讓他們確認(rèn)輸入感覺上是有理由的。但是很多網(wǎng)站為了縮短完成注冊(cè)表單的時(shí)間而去掉二次確認(rèn)的步驟。

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

3.8. 需要使用校驗(yàn)碼嗎？

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

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

• 52%的網(wǎng)站沒有使用校驗(yàn)碼。
• 39%的網(wǎng)站是不能在不刷新頁面的情況下實(shí)時(shí)刷新校驗(yàn)碼的，這個(gè)實(shí)在是在可用性上非常的糟糕的一件事。

但是我們還是不能看清注冊(cè)表單是否需要校驗(yàn)碼的趨勢(shì)。任何情況下，如果你使用校驗(yàn)碼，請(qǐng)確定它是易可讀的，或者在不可讀的情況用戶可以實(shí)時(shí)刷新校驗(yàn)碼的。一些網(wǎng)站沒有提供實(shí)時(shí)刷新校驗(yàn)碼的功能，除了Digg，AOL, Slashdot, Google等。Fm倒是能夠讓校驗(yàn)碼變成可以聽的，當(dāng)它很難被識(shí)別的時(shí)候。

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

當(dāng)我們?cè)谒伎荚O(shè)計(jì)表單時(shí)一些認(rèn)為會(huì)碰到的問題時(shí)，我們期望注冊(cè)表單沒有取消按鈕，因?yàn)楫吘顾羞x項(xiàng)都已經(jīng)填寫好了，對(duì)于用戶來講就沒有太大的意義去退出這個(gè)表單。然而我們?cè)谝欢ǔ潭壬襄e(cuò)了。

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

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

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

3.10. 提交按鈕的對(duì)齊方式

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

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

3.11. 感謝信息

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

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

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

總結(jié)

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