如果你想最大化你的服務(wù)所帶來的效益，你就必須最大化你網(wǎng)站表單的成功率。僅僅簡單的讓用戶在你網(wǎng)站上注冊是不夠的，除非你有能夠讓訪問你網(wǎng)站的人一看就映像深刻的點子。為了讓服務(wù)達到最大化的體現(xiàn)，我們設(shè)計師需要提供用戶一個良好的用戶體驗。我們需要邀請用戶，為他們描述服務(wù)產(chǎn)品有多少好，給他們解釋為什么他們需要填那些表單并且暗示他們會因此得到利益的回報。當(dāng)然，我們也應(yīng)該做的非常方便讓用戶來參與。
　　但是設(shè)計有效的頁面表單不是件容易的事情。有個不爭的事實就是：沒人喜歡填表單——無論是線上還是線下的。因此，作為設(shè)計師我們需要找出能夠讓表單百分百簡單、直接甚至無痛苦的正確的設(shè)計決策。

　　但是怎么樣才能準(zhǔn)確地找出這些決策？布局上那些鏈接應(yīng)該放在表單的什么位置？我們應(yīng)該怎么設(shè)計它？我們應(yīng)該怎么樣高亮標(biāo)簽，應(yīng)該怎么樣排列他們？頁面表單設(shè)計樣式怎么樣才符合現(xiàn)代化的網(wǎng)站？我們拿這些問題問我們自己，并且通過實施調(diào)查來得到這些結(jié)果。

　　下面我們介紹一下現(xiàn)在互聯(lián)網(wǎng)web表單設(shè)計樣式的調(diào)查結(jié)果。這些結(jié)果是分析了100個擁有和web表單相關(guān)流程的網(wǎng)站而得出的。我們決定從注冊表單開始。

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

　　調(diào)查的目的主要是提供給那些憑直接來判斷有效性的設(shè)計師和開發(fā)人員參考依據(jù)。我們也會介紹一些如何讓web表單成為完美的友好用戶界面的指導(dǎo)方針。

　　我們已經(jīng)選擇了100個和web表單有關(guān)的大型網(wǎng)站。這些網(wǎng)站是根據(jù)博客搜索和Alexa排名以及搜索引擎中的受歡迎程度等方面去考慮選擇的。這些網(wǎng)站直接商業(yè)目標(biāo)的影響普遍和他們的web表單相關(guān)，因此在流程中需要指定為高優(yōu)先級進行設(shè)計。尤其注冊表單是為解釋為什么許多評論表單是來自于社會類型的網(wǎng)站的關(guān)鍵。

　　我們關(guān)注注冊表單是想把更多關(guān)鍵表單單獨開來（例如校驗表單）。然后我們分別完成每個被選擇網(wǎng)站的注冊表單并且分析這些表單的設(shè)計方法。

　　我們在每個表單中利用一個特殊的Email賬戶和特殊的用戶名，為了使調(diào)查盡可能地具有廣泛性，我們指出29個在設(shè)計web表單時會碰到的不同的設(shè)計問題和疑問。

　　我們將它們分類并試圖找出相似的設(shè)計方針和設(shè)計思路。我們試圖從可用性觀點上著手，不斷關(guān)注兩者的正面和反面的例子并將他們陳列在調(diào)查結(jié)果中。

　　請注意這個文章不是關(guān)于校驗表單——那是另外一個討論的話題，我們把它獨立開來看待成一個即將要討論的文章。我們要感謝Wufoo為我們提供構(gòu)架來引導(dǎo)我們的調(diào)查。

　　1.表單的安置

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

　　當(dāng)用戶想要加入網(wǎng)站是，用戶會尋找正確的短語，用戶知道它們應(yīng)該是“sign- up”，“register”，“join”，“join”，“become a member”或者“creat an account”等。顯然，用戶期望他們其中之一的鏈接可以鏈到注冊表單。不幸的是，情況不一定是這樣的。

?

　　從圖表可見，最受歡迎的標(biāo)題是“Sign up”（40%），接著是“Join”（18%），“Register”（18%）以及“Creat account”（17%），我們觀察到極少數(shù)有類似于我們?nèi)ツ昕吹降陌粹o那樣即大，又閃亮，并且寫著“start here”的字樣。顯而易見，設(shè)計師與其設(shè)計并強調(diào)服務(wù)的功能性還不如試圖去表達信息。

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

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

　　如果用戶找不到通往注冊表單的鏈接，他可能就不會注冊你的服務(wù)。因此讓鏈接盡可能地顯而易見是最關(guān)鍵的。那么設(shè)計師應(yīng)該把“注冊”的鏈接放在什么地方才會讓用戶感覺更可接近？

　　根據(jù)我們的調(diào)查，這個注冊鏈接

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

　　2.表單的設(shè)計

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

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

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

?

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

?

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

?

?

?

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

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

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

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

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

?

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

　　62%的注冊表單用加粗的方式去突出輸入框的標(biāo)題。為了引人注目而不止一個的使用斜體去達到同樣的效果。為了讓標(biāo)簽?zāi)軌蚋涌梢?#xff0c;20%的注冊表單用色彩，18%的用純文本。

?

　　Large version

　　2.5標(biāo)簽對齊

　　老實說，我們已經(jīng)預(yù)料到可能對齊是一個很強的趨勢 。但是在我們看來，標(biāo)簽對齊的趨勢已經(jīng)不再那么強烈了。

在調(diào)查中41%的網(wǎng)站使用標(biāo)簽右對齊? (YouTube, Facebook, Metacafe)
30%的注冊表單使用頂端對齊　(Behance.net, Wufoo, Tickspot, DZone)
29%使用的是左對齊 (Digg, Ning, Wykop.pl, 43things, StupZ).

?

　　根據(jù)“Matteo Penzo的標(biāo)簽放置研究結(jié)果”（1996）和“Luke Wroblewski的發(fā)現(xiàn)”（PDF），右對齊能夠戲劇性地減少完成時間因為它們幾乎不需要眼睛的注視。如果你想要達到相同的目的但是只有一塊受實際區(qū)域制約的垂直屏幕，標(biāo)簽頂端對齊則會更好一些。還有以防你的表格要求人們掃描標(biāo)簽去了解什么是必須的（不熟悉或者高級的數(shù)據(jù)），左對齊則是最好的。

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

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

?

?　　我們發(fā)現(xiàn)54%的表單要求用戶最多填寫5個輸入框（其中6%的網(wǎng)站在使用服務(wù)前根本不需要注冊）。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%的布局更強調(diào)利用漂亮且吸引人的視覺設(shè)計來讓訪問者在填寫表單時感到更舒適。

?

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

?

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

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

調(diào)查結(jié)果中18%的注冊表單旁邊都會有登錄表單或者登錄連接。（例如, YouTube, Reddit, Digg, Lulu, Metacafe）
78%的注冊表單沒有用星號或者高光去表示必選框；大多數(shù)情況無論星號或者其他形式的高光都不會被使用。
9%的注冊表單用流程指示來告訴用戶他們進行到哪一步了，并且告訴他們哪些步驟是完成注冊的必填項。
85%的站點更喜歡用盡可能簡單的web表單。
區(qū)域通常都是用空白區(qū)來群組和拆分的，有時邊框的用途也和空白區(qū)一樣（22%），還有9%的情況是利用不同的背景色來區(qū)分。
　　概要

　　讓我們來為這個web表單設(shè)計樣式調(diào)查的第一部分做一個總結(jié)。請記住，我們只考慮注冊表單。

注冊鏈接的標(biāo)題大多數(shù)是“sign up”（40%）并且被放在右上角。
注冊表單為了避免分散用戶的注意力而使用簡單的樣式。
93%的注冊表單是單頁表單。
41%的注冊表單通過解釋注冊的優(yōu)勢來吸引用戶注冊。
62%的輸入框標(biāo)題是通過加粗高亮的。
標(biāo)簽不是都排成一條直線的。
設(shè)計師試圖不用必填項和可選項。
86%的注冊表單更喜歡用垂直布局的表單。

文章來自中國建站：http://www.jz123.cn/text/046222_3.html

總結(jié)

以上是生活随笔為你收集整理的网页注册表单设计原则的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。