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的案例,沒有納入調查之中,如果有時間會在以後的文章裡加以討論。

如果你要問做這樣的調查有什麼意義?我給出這樣幾條理由:

  1. 幫助我理解閱讀的內容與實際生活中的設計是怎樣聯繫在一起的,驗證我所理解的內容,無論是證實還是證偽;
  2. 如果把一件東西單獨放在眼前,是很難對其做出評價的,它究竟是好還是糟糕?好在哪裡?糟糕在哪裡?對比往往是發現問題直接而有效的方式。雖然不是站在某一款產品的立場上去研究競爭產品,似乎缺乏目的性,但這個過程確實讓我看到更敏感的意識到什麼是好的和糟糕的設計;
  3. 當然,做一件事情的終級理由還是: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註冊/登錄)

另外,jo​​yo,卓越,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

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.