很久沒有發表文章了，主要是在研究注冊表單的問題，并且翻譯了國外關于注冊表單設計樣式的調查報告（花了近一周時間……），第一次翻譯，希望有什么錯誤的地方能幫我修訂一下，謝謝。以下是翻譯的上半部分。(轉載請注明翻譯版權信息，謝謝)

　　如果你想最大化你的服務所帶來的效益，你就必須最大化你網站表單的成功率。僅僅簡單的讓用戶在你網站上注冊是不夠的，除非你有能夠讓訪問你網站的人一看就映像深刻的點子。為了讓服務達到最大化的體現，我們設計師需要提供用戶一個良好的用戶體驗。我們需要邀請用戶，為他們描述服務產品有多少好，給他們解釋為什么他們需要填那些表單并且暗示他們會因此得到利益的回報。當然，我們也應該做的非常方便讓用戶來參與。

　　但是設計有效的頁面表單不是件容易的事情。有個不爭的事實就是：沒人喜歡填表單——無論是線上還是線下的。因此，作為設計師我們需要找出能夠讓表單百分百簡單、直接甚至無痛苦的正確的設計決策。

　　但是怎么樣才能準確地找出這些決策？布局上那些鏈接應該放在表單的什么位置？我們應該怎么設計它？我們應該怎么樣高亮標簽，應該怎么樣排列他們？頁面表單設計樣式怎么樣才符合現代化的網站？我們拿這些問題問我們自己，并且通過實施調查來得到這些結果。

　　下面我們介紹一下現在互聯網web表單設計樣式的調查結果。這些結果是分析了100個擁有和web表單相關流程的網站而得出的。我們決定從注冊表單開始。

　　注冊表單設計調查

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

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

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

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

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

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

[Page: ]

　　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表單。

[Page: ]

　　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%的用純文本。

　　Large version

　　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），右對齊能夠戲劇性地減少完成時間因為它們幾乎不需要眼睛的注視。如果你想要達到相同的目的但是只有一塊受實際區域制約的垂直屏幕，標簽頂端對齊則會更好一些。還有以防你的表格要求人們掃描標簽去了解什么是必須的（不熟悉或者高級的數據），左對齊則是最好的。

[Page: ]

　　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%的注冊表單更喜歡用垂直布局的表單。