很久沒有發(fā)表文章了，主要是在研究注冊(cè)表單的問題，并且翻譯了國(guó)外關(guān)于注冊(cè)表單設(shè)計(jì)樣式的調(diào)查報(bào)告（花了近一周時(shí)間……），第一次翻譯，希望有什么錯(cuò)誤的地方能幫我修訂一下，謝謝。以下是翻譯的上半部分。(轉(zhuǎn)載請(qǐng)注明翻譯版權(quán)信息，謝謝)
如果你想最大化你的服務(wù)所帶來(lái)的效益，你就必須最大化你網(wǎng)站表單的成功率。僅僅簡(jiǎn)單的讓用戶在你網(wǎng)站上注冊(cè)是不夠的，除非你有能夠讓訪問你網(wǎng)站的人一看就映像深刻的點(diǎn)子。為了讓服務(wù)達(dá)到最大化的體現(xiàn)，我們?cè)O(shè)計(jì)師需要提供用戶一個(gè)良好的用戶體驗(yàn)。我們需要邀請(qǐng)用戶，為他們描述服務(wù)產(chǎn)品有多少好，給他們解釋為什么他們需要填那些表單并且暗示他們會(huì)因此得到利益的回報(bào)。當(dāng)然，我們也應(yīng)該做的非常方便讓用戶來(lái)參與。
但是設(shè)計(jì)有效的頁(yè)面表單不是件容易的事情。有個(gè)不爭(zhēng)的事實(shí)就是：沒人喜歡填表單——無(wú)論是線上還是線下的。因此，作為設(shè)計(jì)師我們需要找出能夠讓表單百分百簡(jiǎn)單、直接甚至無(wú)痛苦的正確的設(shè)計(jì)決策。
但是怎么樣才能準(zhǔn)確地找出這些決策？布局上那些鏈接應(yīng)該放在表單的什么位置？我們應(yīng)該怎么設(shè)計(jì)它？我們應(yīng)該怎么樣高亮標(biāo)簽，應(yīng)該怎么樣排列他們？頁(yè)面表單設(shè)計(jì)樣式怎么樣才符合現(xiàn)代化的網(wǎng)站？我們拿這些問題問我們自己，并且通過(guò)實(shí)施調(diào)查來(lái)得到這些結(jié)果。
下面我們介紹一下現(xiàn)在互聯(lián)網(wǎng)web表單設(shè)計(jì)樣式的調(diào)查結(jié)果。這些結(jié)果是分析了100個(gè)擁有和web表單相關(guān)流程的網(wǎng)站而得出的。我們決定從注冊(cè)表單開始。
注冊(cè)表單設(shè)計(jì)調(diào)查
調(diào)查的目的主要是提供給那些憑直接來(lái)判斷有效性的設(shè)計(jì)師和開發(fā)人員參考依據(jù)。我們也會(huì)介紹一些如何讓web表單成為完美的友好用戶界面的指導(dǎo)方針。
我們已經(jīng)選擇了100個(gè)和web表單有關(guān)的大型網(wǎng)站。這些網(wǎng)站是根據(jù)博客搜索和Alexa排名以及搜索引擎中的受歡迎程度等方面去考慮選擇的。這些網(wǎng)站直接商業(yè)目標(biāo)的影響普遍和他們的web表單相關(guān)，因此在流程中需要指定為高優(yōu)先級(jí)進(jìn)行設(shè)計(jì)。尤其注冊(cè)表單是為解釋為什么許多評(píng)論表單是來(lái)自于社會(huì)類型的網(wǎng)站的關(guān)鍵。
我們關(guān)注注冊(cè)表單是想把更多關(guān)鍵表單單獨(dú)開來(lái)（例如校驗(yàn)表單）。然后我們分別完成每個(gè)被選擇網(wǎng)站的注冊(cè)表單并且分析這些表單的設(shè)計(jì)方法。
我們?cè)诿總€(gè)表單中利用一個(gè)特殊的Email賬戶和特殊的用戶名，為了使調(diào)查盡可能地具有廣泛性，我們指出29個(gè)在設(shè)計(jì)web表單時(shí)會(huì)碰到的不同的設(shè)計(jì)問題和疑問。
我們將它們分類并試圖找出相似的設(shè)計(jì)方針和設(shè)計(jì)思路。我們?cè)噲D從可用性觀點(diǎn)上著手，不斷關(guān)注兩者的正面和反面的例子并將他們陳列在調(diào)查結(jié)果中。
請(qǐng)注意這個(gè)文章不是關(guān)于校驗(yàn)表單——那是另外一個(gè)討論的話題，我們把它獨(dú)立開來(lái)看待成一個(gè)即將要討論的文章。我們要感謝Wufoo為我們提供構(gòu)架來(lái)引導(dǎo)我們的調(diào)查。
[Page: ]
1.
1.1注冊(cè)表單鏈接的標(biāo)題是怎么樣的？
當(dāng)用戶想要加入網(wǎng)站是，用戶會(huì)尋找正確的短語(yǔ)，用戶知道它們應(yīng)該是“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ù)有類似于我們?nèi)ツ昕吹降陌粹o那樣即大，又閃亮，并且寫著“start here”的字樣。顯而易見，設(shè)計(jì)師與其設(shè)計(jì)并強(qiáng)調(diào)服務(wù)的功能性還不如試圖去表達(dá)信息。
1.2注冊(cè)表單的鏈接放在哪兒？
當(dāng)用戶第一次訪問一個(gè)站點(diǎn)，他們?cè)噲D找出單獨(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è)”的鏈接放在什么地方才會(huì)讓用戶感覺更可接近？
根據(jù)我們的調(diào)查，這個(gè)注冊(cè)鏈接
- 59%的網(wǎng)站是放在網(wǎng)站的頂部（其中76%是被放在右上角）
- 21%的網(wǎng)站是放在首頁(yè)的突出位置（鏈接或者表單自己被放在首頁(yè)上）
- 有9%是被隱藏在頂部“登陸”鏈接之后（例如：Craigslist）
實(shí)際上注冊(cè)鏈接很少被放在側(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ì)分散用戶注意力的因素不得不被刪除。
因此，設(shè)計(jì)師經(jīng)常使用“最小化”的布局來(lái)構(gòu)建注冊(cè)表單。根據(jù)我們的調(diào)查，61%的web表單和普遍的頁(yè)面相比更簡(jiǎn)單（例如：MovableType, Livejournal, Amazon, Yandex.ru）
根據(jù)雅虎的注冊(cè)表單可以看出，訪問者僅僅需要填寫賬戶信息即可，沒有別的干擾因素去分散用戶的注意力。注意表單中的語(yǔ)氣和語(yǔ)義都是吸引人的對(duì)話式，這既簡(jiǎn)單又友好。
Flixster是個(gè)典型的反面例子，它把表單塞得很滿，一點(diǎn)也不尊重它的訪問者。注冊(cè)頁(yè)面上一下子提供了每種可能的操作導(dǎo)航，并且登陸頁(yè)面上右邊的廣告比登陸表單還要突出。這樣一點(diǎn)也不友好，Photobucket應(yīng)該是我們見過(guò)的第二擁擠的web表單。
[Page: ]
2.2需要提供任何附加信息嗎？
許多設(shè)計(jì)師試圖通過(guò)類似于幫助、信息內(nèi)容要求甚至是版權(quán)申明的附加信息來(lái)鼓勵(lì)訪問者主動(dòng)填寫表格。但是它不同于點(diǎn)對(duì)點(diǎn)，在大部分例子中注冊(cè)的好處依然是通過(guò)表單來(lái)體現(xiàn)。
- 41%的表單告訴用戶注冊(cè)的好處
- (MySpace, Del.icio.us, Last.fm, LinkedIn, Digg, Mister Wong, Break.com)
- 28%僅僅是單純的注冊(cè)頁(yè)面，沒有任何附加信息
- (Pownce, DeviantArt, Dailymotion)
- 11%告訴用戶需要多久時(shí)間來(lái)填寫。
- (Threadless, Newsvine, Wordpress)
只有很少一部分（6%）網(wǎng)站正面提及在注冊(cè)過(guò)程中所需要填寫的信息。一些步驟中會(huì)提供一些警告（8%）和示意（6%，例如37signals, Bloglines）
2.3單頁(yè)表單VS多頁(yè)表單
調(diào)查結(jié)果中，93%的表單是單頁(yè)表單。顯然地，設(shè)計(jì)師試圖幫助用戶盡可能快速和無(wú)痛苦地完成注冊(cè)流程。只有一些網(wǎng)站利用多頁(yè)表單試圖把探索用戶參數(shù)選擇結(jié)合在注冊(cè)過(guò)程中。
比如，Meebo把一個(gè)完整的注冊(cè)過(guò)程整合在一張注冊(cè)表單中，并且通過(guò)一個(gè)彈出框的形式為用戶提供注冊(cè)向?qū)А＿@個(gè)表單由6個(gè)頁(yè)面組成，用戶通過(guò)一些附加信息的選擇從而進(jìn)行他們賬戶的設(shè)置。
2.4輸入框標(biāo)附加信題需要突出嗎？
62%的注冊(cè)表單用加粗的方式去突出輸入框的標(biāo)題。為了引人注目而不止一個(gè)的使用斜體去達(dá)到同樣的效果。為了讓標(biāo)簽?zāi)軌蚋涌梢姡?0%的注冊(cè)表單用色彩，18%的用純文本。
2.5標(biāo)簽對(duì)齊
老實(shí)說(shuō)，我們已經(jīng)預(yù)料到可能對(duì)齊是一個(gè)很強(qiáng)的趨勢(shì) 。但是在我們看來(lái)，標(biāo)簽對(duì)齊的趨勢(shì)已經(jīng)不再那么強(qiáng)烈了。
- 在調(diào)查中41%的網(wǎng)站使用標(biāo)簽右對(duì)齊 (YouTube, Facebook, Metacafe)
- 30%的注冊(cè)表單使用頂端對(duì)齊 (Behance.net, Wufoo, Tickspot, DZone)
- 29%使用的是左對(duì)齊 (Digg, Ning, Wykop.pl, 43things, StupZ).
根據(jù)“Matteo Penzo的標(biāo)簽放置研究結(jié)果”（1996）和“Luke Wroblewski的發(fā)現(xiàn)”（PDF），右對(duì)齊能夠戲劇性地減少完成時(shí)間因?yàn)樗鼈儙缀醪恍枰劬Φ淖⒁?。如果你想要達(dá)到相同的目的但是只有一塊受實(shí)際區(qū)域制約的垂直屏幕，標(biāo)簽頂端對(duì)齊則會(huì)更好一些。還有以防你的表格要求人們掃描標(biāo)簽去了解什么是必須的（不熟悉或者高級(jí)的數(shù)據(jù)），左對(duì)齊則是最好的。
[Page: ]
2.6有多少必填區(qū)域？
當(dāng)進(jìn)行一個(gè)調(diào)查時(shí)，我們已經(jīng)注意到表單中的必填項(xiàng)越來(lái)越少了。幾年前，設(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)站頂著用戶的忍耐度讓他們完成超過(guò)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è)方面，垂直無(wú)阻礙延伸的垂直布局區(qū)域是注冊(cè)表單表現(xiàn)出強(qiáng)大趨勢(shì)。86%的網(wǎng)站把輸入框垂直布局。除此以外，15%的布局更強(qiáng)調(diào)利用漂亮且吸引人的視覺設(shè)計(jì)來(lái)讓訪問者在填寫表單時(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í)候，他們的眼睛需要跳來(lái)跳出。
更多的發(fā)現(xiàn)
- 調(diào)查結(jié)果中18%的注冊(cè)表單旁邊都會(huì)有登錄表單或者登錄連接。（例如, YouTube, Reddit, Digg, Lulu, Metacafe）
- 78%的注冊(cè)表單沒有用星號(hào)或者高光去表示必選框；大多數(shù)情況無(wú)論星號(hào)或者其他形式的高光都不會(huì)被使用。
- 9%的注冊(cè)表單用流程指示來(lái)告訴用戶他們進(jìn)行到哪一步了，并且告訴他們哪些步驟是完成注冊(cè)的必填項(xiàng)。
- 85%的站點(diǎn)更喜歡用盡可能簡(jiǎn)單的web表單。
- 區(qū)域通常都是用空白區(qū)來(lái)群組和拆分的，有時(shí)邊框的用途也和空白區(qū)一樣（22%），還有9%的情況是利用不同的背景色來(lái)區(qū)分。
概要
讓我們來(lái)為這個(gè)web表單設(shè)計(jì)樣式調(diào)查的第一部分做一個(gè)總結(jié)。請(qǐng)記住，我們只考慮注冊(cè)表單。
- 注冊(cè)鏈接的標(biāo)題大多數(shù)是“sign up”（40%）并且被放在右上角。
- 注冊(cè)表單為了避免分散用戶的注意力而使用簡(jiǎn)單的樣式。
- 93%的注冊(cè)表單是單頁(yè)表單。
- 41%的注冊(cè)表單通過(guò)解釋注冊(cè)的優(yōu)勢(shì)來(lái)吸引用戶注冊(cè)。
- 62%的輸入框標(biāo)題是通過(guò)加粗高亮的。
- 標(biāo)簽不是都排成一條直線的。
- 設(shè)計(jì)師試圖不用必填項(xiàng)和可選項(xiàng)。
- 86%的注冊(cè)表單更喜歡用垂直布局的表單。
