起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識To Sign-up or not to Sign-up
作為Form的應用，注冊是最基本而廣泛的形式之一。隨著對Form設計相關內容的閱讀，收集了105個網站的注冊Form，從幾個方面進行了一些粗略的數據收集，也記錄了一些出現的問題，初衷是為了將書中的內容，與實際生活中的設計對比，這里將一些分析數據，有問題的設計等記錄在這里，作為一個學習積累的過程。
Smashing-Magazine在兩年前做過一份關于注冊Form的調查（中文譯本：Web表單設計之注冊表單），我的調查并沒有按照Smashing Magazine的思路進行，完全根據這段時間對Form設計的理解制定的調查計劃，雖然一些內容因為時間、精力的原因沒能納入收集的范圍，不過這次小范圍的調查也能對注冊Form的大體狀況有所了解了。
這105個網站有如Google，Yahoo，國內門戶等大型網站，也有小的Web應用，比如Wufoo這樣可能沒多少人聽說的網站。這些網站的選取完全沒有參照Smashing Magazine的100個網站（如有雷同，純屬巧合），沒有絕對的選擇標準。不用問為什么是105個，當我意識到該停下來時，105就是這個數字了。這其中中文網站40個，非中文網站65個。很遺憾缺少了Facebook、 Foursquare、Tumblr、Posterous這樣優秀的網站（測試和截圖的兩天里恰巧沒能翻上大火墻，便宜了在最后時刻替代他們的網站）。而關于Twitter的注冊有一個成功的Re-design的案例，沒有納入調查之中，如果有時間會在以后的文章里加以討論。
如果你要問做這樣的調查有什么意義？我給出這樣幾條理由：
- 幫助我理解閱讀的內容與實際生活中的設計是怎樣聯系在一起的，驗證我所理解的內容，無論是證實還是證偽；
- 如果把一件東西單獨放在眼前，是很難對其做出評價的，它究竟是好還是糟糕？好在哪里？糟糕在哪里？對比往往是發現問題直接而有效的方式。雖然不是站在某一款產品的立場上去研究競爭產品，似乎缺乏目的性，但這個過程確實讓我看到更敏感的意識到什么是好的和糟糕的設計；
- 當然，做一件事情的終級理由還是：it’s fun! (for me)。
（沒有經過任何處理的原始數據可以通過這條鏈接得到，所有截圖可以在這里下載（7.9M，其中包含了沒有納入統計的網站，如Facebook等），原始截圖時間集中在2010年8月22日到28日的一個星期內，所處環境是 Ubuntu下的Opera 10.61（需翻越大火墻的網站截圖使用的是Firefox 3.6.8），這樣的環境可能非常“小眾”，算是我在考驗各網站的跨平臺跨瀏覽器支持吧）。
問題數量
問題數量直接影響用戶注冊所需要的時間，雖然對于不同類型的網站，對用戶數據需求的考慮不同，但我個人所見證的多于6個問題的注冊，絕大多數都可以將多余的問題延遲到用戶使用服務以后的適當時刻，而不需要延長用戶注冊時間。雖然有些網站將“多余”問題單獨分組，讓用戶“可選”，好像尊重用戶選擇，但無論用戶是否選擇，都必須思考選擇與否，這是否是合適的時刻呢？用戶注冊是為了享用服務，不是為了提交個人數據。
（105個網站問題數量統計）
（40個中文網站問題數量統計）
（65個非中文網站問題數量統計）
105個網站的問題數量算術平均為8個，其中數量為6的網站最多，基本上包括ID、Email、密碼、重復密碼、驗證碼和同意服務條款，沒有驗證碼的情況下則可能詢問重復Email，或者與服務緊密相關的問題，例如LBS類型網站的所屬城市。
中文網站的注冊問題數量全部在5個以上，最多的達到24個，算術平均8.4，問題數量為6個網站最多。
非中文網站最少2個注冊問題：Email地址，密碼，而最多也達到20個，算術平均7.8，問題數量為7個網站最多。
為什么要注冊
這個問題似乎很傻。當用戶已經到了注冊界面，不是已經說明他們有答案了？多數網站似乎也是這么想的。
（為何要注冊？）
60個網站沒有在注冊頁面進一步說明注冊理由。不過我發現在此時簡煉的告訴用戶網站的服務宗旨，影響范圍，注冊后享受的服務，在很大程度上增強了我對網站的信任（別說得天花亂墜就行），特別是如果問題較多或涉及隱私信息時。
Label對齊方式
這大概是個永久的話題，前一篇文章已經有所分析，這里不再重復。
（Label對齊方式）
中文網站的注冊Form極度偏好右對齊，即使在問題數目較少的情況下，上對齊這種最適合人眼掃描的對齊方式也很難見到蹤影。非中文網站的左對齊和上對齊占了大半比例。當然，這105個網站中對齊方式唯一的另類也是一個中文網站，將在后面“登場”。
提交按鈕的對齊方式
從Eye Tracking的結果來看，將按鈕與輸入域的左端對齊應該是最有效率的。那么這105個網站呢？
（提交按鈕對齊方式）
一共出現了6種對齊方式，以輸入域左端對齊最多，與理論吻合；其次居中放置是中文網站的偏好，而非中文網站則平衡于居右與居中；最少見的是與label對齊（19樓），和與輸入域右端對齊（CNTV英文）。
次級按鈕
次級按鈕出現的情況很少（13%），絕大多數網站（91/105）都希望你一條路走到黑，剩下14個網站面臨一個問題就是當用戶真的選擇“非主流”，你把他們帶向哪里？除去“RESET”選項，最執著的選擇是將用戶帶到“User Account Q&A”（Slashdot）。多數會返回主頁。
要冒號嗎？
（冒號的選擇）
對中文網站的統計來說似乎是：要。從非中文網站來看，似乎是：隨你便。我的想法是，無論你怎么選擇，保持一致性最重要。
星號與必填/選填
星號作為必填基本是一統天下了，除了英超利物浦的官方網站將其用作可選的標識，而Wikipedia將星號做注釋之用。
（必填/選填標示）
過半網站沒有任何提示，默認全部問題必須回答，這一點無論中文還是非中文網站基本一致。
采用星號的網站面臨另一個問題：星號的位置。前一篇文章里，我認為放置在Label和輸入域之間應該是最為合理的，那么實際數據呢？27個采用星號且非上對齊的網站中，14個將星號放置在Label與輸入域之間，10個放置在Label的左端，3個放置在輸入域的右端。
將星號放在Label左端是很多網站采用的方式，可能是認為按照人的閱讀習慣，從左開始閱讀Label，然而就像前一篇文章提到的，用戶的視覺掃描線集中在輸入域的左端，即Label和輸入域之間，這個區域或許是這種提示出現的最好區域。
隱私信息
這里我將隱私信息囊括了真實姓名、性別、出生日期等。一半以上注冊都不涉及隱私信息，但涉及隱私的注冊依然比我想象要多。
動態幫助信息與錯誤驗證提示
- 32個網站沒有任何幫助信息，中文3個，非中文29個；
- 34個網站提供靜態幫助信息，中文18個，非中文16個；
- 39個網站提供動態幫助信息，中文19個，非中文20個。
似乎中文網站都很熱心，93%都提供幫助；非中文網站里有44%十分“冷淡”，不提供幫助信息。
- 47個網站沒有動態錯誤驗證提示，中文6個，非中文41個；
- 58個網站提供動態錯誤驗證提示，中文34個（20個檢測空域），非中文24個（6個檢測空域）。
85%的中文網站提供動態錯誤驗證提示，對比僅37%的非中文網站，我國網站技術水平和對用戶體貼度大幅領先…真是這樣嗎？
另類的對齊
WSJ中文的注冊問題達到17個，在媒體類網站中數量僅次于FT中文，而更恐怖的是，這17個問題的對齊方式在105個網站獨樹一幟：
（WSJ中文對齊方式）
對比一下WSJ日文：
（WSJ日文對齊方式）
雖然并列輸入域并不是最優，但比較WSJ中文的設計，后者還是顯得專業許多。
請不要忘了Label與輸入域的對齊
（電影網注冊）
Label未與輸入域對齊，幫助信息與Label同字體、同大小，劈頭蓋臉上來就懷疑你不是人（驗證碼開頭），多好的設計實踐??！
要求平等權利的次級按鈕
（VeryCD按鈕）
（優酷按鈕）
（SpringNote按鈕）
（搜狐按鈕）
設計的一條原則是對比（Contrast），Luke的書里也專門談到次級按鈕的呈現問題。Non-Designer’s Design Book里更有一條亙古不變的吶喊就是：Don’t be a wimp！
我還沒開始輸入呢（搜狐，新浪）
（搜狐密碼安全強度）
這是個不大不小的問題。我還沒輸入密碼，為什么就告訴我密碼安全度低呢？
（新浪密碼安全強度）
相比較，新浪沒有出現這個非常細小的區別。請多一份對用戶的關懷和對自己產品設計細節的苛刻。
為什么認為我是女的？
（19樓默認選項）
有幾個網站默認注冊用戶的性別為女性，從程序設計來說，select類型的輸入域指定一個默認值可以防止出現用戶輸入為空的驗證錯誤，如果網站絕大多數用戶被證明都是女性，那我也算無話可說，但如果不是，那么還是不要讓男性用戶在此“詫異”的停頓一下為好，性別是個slot-in類型的問題，給用戶選擇比讓他甄別你的默認值，再選擇要快而且無意識。
（開心001默認選項）
生日的選擇也有類似的情況，我不知道是否有人調查過，當注冊時設定一個默認出生日期，是否會讓一部分早于這個日期出生的用戶停下來感慨自己“老了”（估計十年后遇到了我會這樣聯想），不是這個網站的主要服務群體了。我所見到的最極端的默認選擇大概是下面這個例子：
（Academic Earth令人詫異的默認選項）
默認選項的使用也請基于用戶數據的支持。
OICQ？！
（杭州綠城足球俱樂部會員注冊）
既然做一件事，那就用心盡力把每個細節都做好，OICQ聽上去就像是遠古傳來的呼喚，誰能記得這是QQ的乳名…
我不同意！
上面提到VeryCD有一個與提交按鈕地位平等的次級按鈕，這個次級按鈕很有意思，如果沒猜錯它使用JavaScript的history實現的，這大概是Cancel類按鈕最簡單懶惰的實現了，基本就是對你說哪里來的就回哪里去。
然而VeryCD讓人費解的是，無論是主頁還是其它頁面的注冊鏈接都定義為新建頁面：你要注冊就會打開新的 Tab、新的窗口，這時候問題來了，沒有history！此時這個“不同意”什么作用都沒有，你只能眼巴巴的看著。如果你想多實驗一下，從VeryCD以外的任何網頁直接跳到它的注冊頁面，點擊“不同意”，你又被VeryCD簡單粗暴的請出去，誰叫你丫的不按規矩進來！
這到底是注冊還是登錄？
（Amazon.cn注冊/登錄）
考察Amazon.cn讓我想起兩年前注冊Amazon.co.uk的莫名。當我的意識里已經把注冊和登錄區分的非常清楚時，將兩者結合在一個界面上，不加區分的使用一個提交按鈕處理，只能讓我遲疑自己的選擇。我實在不解Amazon的設計決策，即使有過注冊的經驗，我仍然會在這里停頓下來思考自己是否處在正確的位置。
而Amazon.cn也沒有讓用戶閑著，上圖中要求提供提供的用戶名到下一步時實際上是變成了Email地址。如果Amazon.cn真的要與總部的設計亦步亦趨，那至少這一步該跟上吧！
（Amazon.com注冊/登錄）
另外，joyo，卓越，Amazon.cn，我到底在和什么公司打交道？
即使再牛，也請尊重慣例。設計的“創新”是為了讓用戶更省心，不是更費心。
呃，第一步…沒了？
（天涯社區注冊）
天涯的注冊頁面讓我思考了半天，原因就是左上角那個1。我不知道這究竟要經歷多少步驟，但從這個頁面來說，似乎只需要這一步。然而接著出現了2，告訴我要去郵箱收信，等我通過郵箱打開新的頁面見到了3，此時我才明白自己結束了茫然的注冊之旅。就好像被人蒙著眼，穿過大廳、走廊，進門，最后，Surprise！
麻煩你告訴我一共多少步，每一步的目的是什么，don’t try to surprise me，除非你打算寄給我一張百萬美刀支票。
（天涯注冊，修改）
入鄉隨俗
（IBM DeveloperWorks注冊）
這里是中國，我們把姓放在名的前面，如果你不打算讓我把葛優的那段關于中美姓名論述的臺詞搬出來，請考慮做點什么。
Retype password有多少種說法？
最后一點，我發現有些幫助和出錯提示過于冗余繁復。例如“確認密碼”作為Label已經明確了問題，有些設計卻要用“請再輸一遍密碼”，輸入域后面還要跟上一段非常冗余的幫助信息說“請再輸入一遍您上面輸入的密碼”，看得抓狂！
將“確認密碼”寫作“再次確認密碼”的Label是否有些奇怪？如果說確認密碼是“Re-type password”，那“再次確認密碼”就是“Re-Re-type password”…
有些網站使用“重新輸入密碼”這樣的用語，好像不是“確認密碼”的意思吧，不是嗎？
注冊該見鬼了？越來越多非中文網站拋棄了注冊，轉而使用Twitter、Facebook、Yahoo和Google認證身份。雖然一些網站保留了注冊，但也把其作為“old style”，不推薦使用，這樣的舉動極大方便了用戶。國內是否也該做類似這樣的事情了呢？QQ？淘寶？
（向注冊說再見？）
這種調查其實還有一點重要的內容：同類型網站的對比，同一網站中英文版的對比等。因為還沒有整理出數據，我會在以后的文章里介紹。
就此結束兩篇對Web Form的討論，趕在此時分享出來，做為對8月的告別，對9月的第一聲招呼。
Cheers, everyone, and have a nice day!
源地址：http://arslanyard.blogbus……74177981.html
- 目前還沒評論，等你發揮！
