測試內容：注冊頁(yè)面的用戶(hù)體驗分析
頁(yè)面的內容區域寬度為800px居中顯示，高度大于900px，右側有滾動(dòng)條出現，從而使用戶(hù)注冊過(guò)程中需要拉動(dòng)右側滾動(dòng)條翻看下面的內容，造成視覺(jué)中心的偏移，造成體驗下降。
問(wèn)題所在：頂部?jì)热菡加昧诉^(guò)大的頁(yè)面高度空間，如下圖：
新浪微博注冊頁(yè)面的基本要素有：
通過(guò)用Web工具查看頁(yè)面相應代碼，得出注冊表單的實(shí)際尺寸為520×452px。中間通過(guò)點(diǎn)劃線(xiàn)分割為四個(gè)功能區域，分別為注冊提示功能區、基本賬戶(hù)信息注冊功能區、賬戶(hù)補充信息功能區和驗證提交功能區。
具體的尺寸信息及功能區域劃分見(jiàn)下面的圖片。
縱觀(guān)上述頁(yè)面，表單寬度為520px，而據統計最優(yōu)的閱讀體驗寬度在500–650px之間，現有的頁(yè)面寬度使得用戶(hù)在注冊流程中能夠有一個(gè)較好的閱讀體驗，而不用通過(guò)轉動(dòng)腦袋移動(dòng)視線(xiàn)來(lái)進(jìn)行左右掃描閱讀。
表單內容通過(guò)點(diǎn)劃線(xiàn)區分為四個(gè)功能區域，使內容分組，用以區分不同區域的不同功能需求和細節差異，這也是可取的。不足之處在于，點(diǎn)劃線(xiàn)顏色有點(diǎn)過(guò)淺，同時(shí)對于區域的劃分也不是特別規范，另外就是各個(gè)區域的垂直間距各不相同，細節處理不夠，容易讓人產(chǎn)生粗糙的感覺(jué)。如下圖所示：
另外，從整體上看，注冊表單相當簡(jiǎn)單，這個(gè)初衷是好的。但是用戶(hù)看到這些表單如何區分哪些必填，哪些可以忽略不去填寫(xiě)呢？還有，對于菜鳥(niǎo)級的用戶(hù)來(lái)說(shuō)，這種沒(méi)有任何提示的頁(yè)面是否友好呢？可能在設計過(guò)程中為了節省頁(yè)面高度而采用提示語(yǔ)句點(diǎn)擊觸發(fā)顯示的方式，但是節省高度只有這一種方法嗎？在最佳閱讀體驗范圍之內適當增加表單寬度也不失為一種好的解決方案的。
接下來(lái)，我們深入細節，從每一個(gè)區域入手，去全方位地分析一下每一個(gè)功能細節的用戶(hù)體驗狀況。
1、注冊提示語(yǔ)區域
“提示：如果你有“新浪郵箱”、“新浪會(huì )員賬號”或“新浪UC號”，可以直接登錄”
這個(gè)區域，用一段簡(jiǎn)潔的提示語(yǔ)句告訴用戶(hù)在什么情況下可以跳過(guò)注冊流程直接登錄，對于已有上述賬號的用戶(hù)來(lái)說(shuō)無(wú)疑體驗是非常好的。而對于沒(méi)有上述賬號的用戶(hù)來(lái)說(shuō)，由于提示語(yǔ)句很簡(jiǎn)短且簡(jiǎn)潔也不會(huì )造成不好的體驗。
2、電子郵箱輸入驗證區域
上圖是這一區域的默認設計。但從這一設計上看，“我沒(méi)有郵箱”幾個(gè)文字用一種特殊的顏色放置在輸入框的后面顯得很突兀，而當點(diǎn)擊的時(shí)候直接在本窗口中跳轉到了新浪郵箱的注冊頁(yè)面。用戶(hù)來(lái)這個(gè)頁(yè)面本來(lái)是注冊的，而不經(jīng)意之間竟然跳轉到了一個(gè)相關(guān)度不高的頁(yè)面，如果用戶(hù)再順手把這個(gè)頁(yè)面關(guān)掉，那么注冊流程直接就終止了，因而這個(gè)細節設計的體驗很不好。
當點(diǎn)擊觸發(fā)輸入框的時(shí)候這一區域變?yōu)橄旅娴男问剑?/font>
對比可以看到，在觸發(fā)輸入框的時(shí)候，電子郵箱的標簽名因為輸入框下面提示文字的出現而出現了向下的跳躍。這無(wú)疑會(huì )吸引用戶(hù)的注意力，而這個(gè)操作真正需要用戶(hù)去注意的卻是彈出的提示文字，這個(gè)體驗是不好的。
同時(shí)，新彈出的提示文字在文字顏色上面跟標簽沒(méi)有什么大的區別，再加上標簽文字的下移，兩者就混淆在了一起，使得用戶(hù)不容易分清哪是提示哪是標簽，或者說(shuō)主次混淆在了一起。這一點(diǎn)的體驗也是不夠好的。
與提示信息相關(guān)的還有就是原本就不是很長(cháng)的文本卻出現了折行，這就會(huì )強迫用戶(hù)要移動(dòng)視覺(jué)進(jìn)行閱讀。因而這個(gè)地方可以充分利用良好體驗的閱讀寬度進(jìn)行一行顯示，或者更改文案使文字顯示在一行之中。
另外，提示信息的動(dòng)態(tài)彈出，使頁(yè)面跳動(dòng)，吸引人的視覺(jué)注意力，而把最需要去填寫(xiě)的操作變成為了其次的選項，這樣的體驗也是不夠好的。建議要么采用現有的上下結構靜態(tài)顯示提示文本，要么就利用頁(yè)面寬度，把提示信息放在輸入框右側區域，減少頁(yè)面的跳躍。
關(guān)于“我沒(méi)有郵箱”，這個(gè)描述也應該算作是提示性的文本，因而可以考慮用類(lèi)似“沒(méi)有郵箱？點(diǎn)擊注冊”類(lèi)似的文案作為提示信息的一部分，這樣較之前面的展現方式而言應該體驗要好一些。
當在輸入框中輸入錯誤內容并點(diǎn)擊空白區域的時(shí)候會(huì )觸發(fā)校驗程序并出現如下的提示：
這個(gè)提示，首先輸入框底色標紅，同時(shí)右側用耀眼的紅色提示用戶(hù)錯誤所在，這樣就能及時(shí)提醒用戶(hù)，剛剛輸入的內容是有問(wèn)題的，以便于及時(shí)更改。這樣的提示警告信息在體驗設計上是比較好的，很好地起到了警告和提醒的作用。
而當在輸入框中輸入正確的郵件格式，并觸發(fā)校驗程序之后會(huì )出現下面的提示：
這個(gè)提示，輸入框底色變?yōu)榛疑?，右側出現可以使用的字樣。但是這個(gè)設計給人的感覺(jué)并不好，不是仔細查看的話(huà)可能還看不到相應的提示和變化。既然想給用戶(hù)正確的反饋，就應該使反饋的展現能夠一目了然，易于辨認。通常而言，文本顏色應該是綠色的。而輸入框底色變灰給人的感覺(jué)就像是這個(gè)區域鎖定了一樣，也沒(méi)能很好地展現所要表達的信息，也算是設計和體驗的一個(gè)失誤。
在用戶(hù)輸入的時(shí)候，文本框下方還會(huì )出現一個(gè)可供選擇的郵箱地址列表，如下圖：
這樣做的目的是方便用戶(hù)在下拉列表中選擇郵箱后綴，快速完成輸入。但是把這種交互方式用在用戶(hù)注冊流程之中給人的感覺(jué)還是比較詫異的，畢竟郵箱后綴有成千上萬(wàn)種，這樣做容易讓用戶(hù)在下面挑選自己的后綴，而一旦沒(méi)有的話(huà)還可能會(huì )產(chǎn)生挫敗感，當然挑選過(guò)程中浪費時(shí)間也是肯定的，還不如直接放任用戶(hù)自己輸入來(lái)得快捷。不過(guò)把這種交互方式用在登錄頁(yè)面體驗應該要比在這里好一些。
當我用一個(gè)郵件成功注冊過(guò)賬號之后，再用同樣的郵箱去注冊的時(shí)候會(huì )出現如下提示：
輸入框跟上面的輸入正確的時(shí)候一樣顯示背景灰色，同時(shí)用灰色文字提示“該用戶(hù)名已被占用”。而被占用的情況下應該是警示類(lèi)的提醒信息的，至少也要能夠讓用戶(hù)能夠看清楚問(wèn)題所在，免得在后面出現不能注冊的問(wèn)題。個(gè)人建議這個(gè)地方用紅色文字警示比較好。當然，既然郵箱已經(jīng)被注冊，而郵箱一般而言具有唯一性，別人不可能用你的郵箱地址。這個(gè)時(shí)候用戶(hù)一般會(huì )嘗試用郵箱進(jìn)行登錄以驗證自己是否忘記之前曾經(jīng)注冊過(guò)這個(gè)網(wǎng)站的用戶(hù)。所以，在提示后面給出登錄入口引導用戶(hù)進(jìn)行登錄嘗試應該是一個(gè)比較好的體驗設計。
而在沒(méi)有輸入任何信息的時(shí)候，當鼠標從輸入框移出點(diǎn)擊空白區域，也會(huì )觸發(fā)驗證程序出現下面的情形：
這個(gè)提示跟前面的錯誤提示一樣，設計和表現上還是可以的。但是這個(gè)觸發(fā)時(shí)機就沒(méi)那么好了，我還沒(méi)有填寫(xiě)任何內容，自然不會(huì )去提交注冊，而這樣的驗證就顯得不那么友好了，試想，誰(shuí)會(huì )出現一個(gè)下面這樣的注冊頁(yè)面呢？真正好的驗證時(shí)機應該是在有用戶(hù)輸入并觸發(fā)下一個(gè)輸入選項的時(shí)候再去驗證。
3、創(chuàng )建密碼區域
點(diǎn)擊創(chuàng )建密碼，會(huì )出來(lái)如下的狀態(tài)：
提示密碼是6-16位，我們進(jìn)行輸入測試，在輸入不足6位的時(shí)候會(huì )出現下面的結果：
如上面在分析郵箱輸入區一樣，錯誤的不合規則的，給出警示，同時(shí)顏色各方面也夠突出，體驗良好。
既然長(cháng)度為6-16位，那么我們能不能輸入16位以上的密碼，會(huì )出現什么樣的提示呢？請看下圖：
在輸入到16位的時(shí)候自動(dòng)不允許再輸入過(guò)多的字符，跟提示6-16位的長(cháng)度相吻合，體驗良好。而上圖同樣也是在填寫(xiě)正確時(shí)候的顯示狀態(tài)，這次系統不再給出驗證的提示語(yǔ)句，會(huì )給人一種挫敗感。既然前面我輸入正確你會(huì )給出正確的提示，這里又什么提示信息都沒(méi)有，我到底有沒(méi)有正確輸入了呢？因而這里應該用明快的色調給出輸入正確的提示。
4、密碼確認區域
創(chuàng )建密碼成功之后，我們去進(jìn)行密碼確認。當輸入6位以下的不匹配密碼時(shí)，反饋如下：
有點(diǎn)搞笑的是，竟然也提示“長(cháng)度必須6-16位”，這個(gè)輸入框本來(lái)就是驗證跟之前密碼是否匹配的，現在竟然也要驗證一個(gè)字符串長(cháng)度，真的有點(diǎn)搞笑了。那么輸入6-16位之間的不匹配密碼又會(huì )怎樣呢？請看下圖：
對了，這才是正確的驗證和提示信息。用鮮艷的顏色進(jìn)行警告，給出提示，體驗設計良好。前面的密碼創(chuàng )建區域在合理的時(shí)候是沒(méi)有提示的，而密碼確認應該給出明確的匹配成功的提示吧。下面我們一起看一下：
沒(méi)想到，跟創(chuàng )建密碼的時(shí)候一樣，還是沒(méi)有給出任何提示，這體驗就有點(diǎn)糟糕了。
5、昵稱(chēng)填寫(xiě)區域
點(diǎn)擊觸發(fā)輸入框，提示文字是“可輸入4-20位，包含英文、數字和中文”，字面的意思好像是這4-20位中需要同時(shí)包含英文、數字和中文，而經(jīng)測試，只包含英文、中文或者包含任意兩種或者包含三種都是可以的，而全數字則是不允許的，具體結果見(jiàn)下面的圖片。
因而這里的描述是非常容易誤導用戶(hù)的，這里的“和”應該用“或”更妥當一些。
昵稱(chēng)輸入過(guò)程，不足4位的會(huì )提示上面的警示信息，這個(gè)體驗良好。輸入到20位的時(shí)候也不再允許再輸入，也符合規則。只是我所起的昵稱(chēng)是否可用（當然昵稱(chēng)不怕重復），這個(gè)依然沒(méi)有明確的信息反饋。
6、所在地選擇區域
所在地的第一個(gè)選項框默認是北京，沒(méi)有明確標注是否必填，這容易讓用戶(hù)在這個(gè)位置產(chǎn)生徘徊的心理。經(jīng)實(shí)際驗證，這個(gè)地方不選擇也是可以進(jìn)行注冊的。但是就體驗而言就很是不夠友好了。
7、性別選擇區域
跟地區選擇一樣，這個(gè)經(jīng)驗證也是非必選的，但是也沒(méi)有任何的操作提示，容易讓用戶(hù)在這里產(chǎn)生猶豫，體驗設計不好。
8、驗證碼區域
驗證碼方面，新浪微博采用的是中文驗證碼。采用中文驗證碼，首先會(huì )因為切換輸入法的問(wèn)題增加用戶(hù)的操作流程，造成注冊效率下降。另外一點(diǎn)是使用中文注冊的時(shí)候，易讀性和可辯認性方面也會(huì )有所下降，如上圖中的生僻字就可能會(huì )迫使用戶(hù)去點(diǎn)擊“換一張”進(jìn)行驗證碼圖片更換，效率降低是肯定的。
在不填寫(xiě)驗證碼的時(shí)候，點(diǎn)擊空白區域會(huì )顯示上面的提示信息，這個(gè)驗證時(shí)機把握的不是很好，同時(shí)提示信息的顯示位置在輸入框和驗證碼圖片之前，就像硬塞進(jìn)去一樣，體驗效果感覺(jué)一般。
而當我在輸入框輸入驗證碼，但是故意填寫(xiě)錯誤的時(shí)候又會(huì )怎樣呢？請看下圖：
是的，沒(méi)看錯，沒(méi)有任何的驗證，只有當你在點(diǎn)擊注冊提交按鈕之后才會(huì )判斷并給出相應的錯誤提示信息。而這個(gè)信息的，不論是顯示位置還是文字顏色在體驗上也是很差的，具體請看下面的截圖：
9、注冊按鈕區域
這個(gè)頁(yè)面的注冊按鈕很簡(jiǎn)單，就一個(gè)按鈕，上面“立即注冊”四個(gè)文字，也算是足夠簡(jiǎn)潔明快了。只是注冊按鈕在大小和顏色上面都不是很突出，沒(méi)有那種揮之欲出和讓人產(chǎn)生點(diǎn)擊欲望的感覺(jué)。這個(gè)在設計細節上還應多下點(diǎn)功夫。
10、使用協(xié)議區域
默認已經(jīng)勾選的我以看過(guò)并同意協(xié)議的文本，協(xié)議是新窗口打開(kāi)的，點(diǎn)擊的時(shí)候有窗口彈出，看完關(guān)掉即可，對注冊過(guò)程有影響但不大。再者說(shuō)，基本也沒(méi)人去看這個(gè)。
不過(guò)就流程來(lái)說(shuō)，應該是先同樣協(xié)議再進(jìn)行注冊，這個(gè)應該放置在注冊按鈕的前面。畢竟在注冊按鈕上沒(méi)人提及使用協(xié)議的任何內容。而如果保持這個(gè)順序則應該在注冊按鈕上添加類(lèi)似同意下方協(xié)議的描述。
注冊過(guò)程中，顯示郵箱“可以使用”，而到真正提交的時(shí)候顯示的錯誤信息則是“郵箱無(wú)效”。具體請看下面的截圖：
表面看似十分簡(jiǎn)潔明快和體驗良好的新浪微博注冊頁(yè)面，細細分析下來(lái)竟然用了將近10頁(yè)的篇幅。而其中細節之處的交互體驗細節的一系列問(wèn)題也很值得去分析和研究體會(huì )。產(chǎn)品細節、用戶(hù)體驗在中國Web領(lǐng)域的路還是非常任重而道遠的。
時(shí)間倉促，分析拙劣，另有找茬嫌疑，希望不會(huì )傷到新浪微博的童鞋們。
最近，受朋友之托，要寫(xiě)一份新浪微博注冊頁(yè)面的用戶(hù)體驗分析報告。期間查找了互聯(lián)網(wǎng)上面的一些資料，順便把國內主流網(wǎng)站的注冊頁(yè)面也給瀏覽并分析了一遍?？赐赀@些之后，一個(gè)簡(jiǎn)單的想法就是，表面看似簡(jiǎn)單且沒(méi)有任何技術(shù)和設計含量的用戶(hù)注冊頁(yè)面其實(shí)并沒(méi)有表面看上去那般。注冊頁(yè)面不論在產(chǎn)品設計，交互設計，視覺(jué)設計，前端代碼以及前端技術(shù)實(shí)施上面都有著(zhù)一些需要認真去進(jìn)行斟酌和考慮的東西。
簡(jiǎn)言之，用戶(hù)注冊頁(yè)面做起來(lái)很簡(jiǎn)單，但是做好或者說(shuō)做一個(gè)完美的用戶(hù)注冊頁(yè)面卻是非常有技術(shù)含量并且需要費一番腦筋進(jìn)行思考和驗證的。
注冊頁(yè)面，就其功能而言，就是用戶(hù)取得網(wǎng)站的會(huì )員資格的一個(gè)途徑。因而在功能需求設計階段，需要放在首要位置去優(yōu)先解決的便是這個(gè)最為基本和簡(jiǎn)單的功能。因而，不難想象，最為簡(jiǎn)潔的注冊頁(yè)面只需要用戶(hù)名和密碼兩個(gè)元素。但是，現如今有些網(wǎng)站的注冊表單中的選項之多已經(jīng)到了一個(gè)令人望而卻步的程度了。當然，他們也有自己的理由，“我們需要借此來(lái)了解我們用戶(hù)的更多信息和訴求以便更好地為我們的用戶(hù)定制和改善服務(wù)”。
而實(shí)際效果又會(huì )怎樣呢？先不說(shuō)網(wǎng)站會(huì )不會(huì )或者有沒(méi)有能力或者好的方法來(lái)通過(guò)注冊信息研究用戶(hù)習慣和訴求，也不說(shuō)用戶(hù)注冊信息的真實(shí)性，單就一個(gè)密密麻麻、星羅密布（甚至動(dòng)輒幾頁(yè)）的注冊頁(yè)面來(lái)說(shuō)，已經(jīng)足以嚇走很大一部分用戶(hù)的注冊熱情的。就一新用戶(hù)而言，我注冊成為網(wǎng)站的用戶(hù)，初來(lái)乍到，最大的愿景是能夠快速注冊然后能夠快速使用和體驗網(wǎng)站的各項服務(wù)。而當用戶(hù)喜歡上這個(gè)網(wǎng)站的時(shí)候也就樂(lè )于去補充和完善自己的相關(guān)資料以便得到更適合自己的服務(wù)了。
因而，個(gè)人認為，注冊頁(yè)面提供基本的用戶(hù)注冊功能，能夠使用戶(hù)快速地注冊并使用網(wǎng)站的相應功能。當網(wǎng)站能夠吸引用戶(hù)并使用戶(hù)發(fā)現網(wǎng)站價(jià)值的時(shí)候，通過(guò)簡(jiǎn)單的引導，用戶(hù)自然會(huì )對個(gè)人資料進(jìn)行相應的修改和完善。這樣即能滿(mǎn)足用戶(hù)快速注冊并使用網(wǎng)站的心理，又可以在后續收集到更多更有價(jià)值的用戶(hù)信息。
既然我們的目標是使用戶(hù)能夠快速地完成注冊流程并提供網(wǎng)站運行所需的必要的信息，那么一個(gè)基本的用戶(hù)注冊頁(yè)面需要哪些基本的元素，又需要用戶(hù)提供哪些必需的信息呢？接下來(lái)，我將分析一些主流的中文站點(diǎn)的用戶(hù)注冊頁(yè)面，并在這一基礎之上提煉出我們需要的注冊頁(yè)面的最為基本的也是必需的元素。
首先我們看一下Google的注冊頁(yè)面（https://www.google.com/accounts/NewAccount），頁(yè)面截圖如下：
簡(jiǎn)單分析可以看出，Google注冊頁(yè)面的主要元素包括：
下面我們再來(lái)看一下百度的注冊頁(yè)面（https://passport.baidu.com/?reg），頁(yè)面截圖如下。
分析百度注冊頁(yè)面可以看出，其包含的主要元素如下：
接下來(lái)我們來(lái)看一下騰訊QQ的注冊頁(yè)面（http://newreg.qq.com/），其網(wǎng)站注冊頁(yè)面的截圖如下所示。
分析騰訊QQ注冊頁(yè)面可以看出，其包含的主要元素有：
下面，再來(lái)分析一下豆瓣網(wǎng)的注冊頁(yè)面(http://www.douban.com/register)，如下圖：
綜合上述四個(gè)注冊頁(yè)面，我們已經(jīng)可以簡(jiǎn)要概括出用戶(hù)注冊頁(yè)面的一些基本要素。當然，在概括這些基本要素的過(guò)程之中我不可能只是簡(jiǎn)單得通過(guò)上述的四個(gè)頁(yè)面，這四個(gè)頁(yè)面只是其中的具有典型的一小部分。
在概括這些基本要素的過(guò)程之中我所參照的注冊頁(yè)面主要包含但不限于如下的一些：
下面，我們把通過(guò)分析這些頁(yè)面得出的用戶(hù)注冊頁(yè)面的基本要素概括如下：
明確了用戶(hù)注冊頁(yè)面的基本功能要素，接下來(lái)我們就可以從視覺(jué)、交互以及技術(shù)實(shí)現等角度去進(jìn)行進(jìn)一步的分析和研究了。
首先，用戶(hù)注冊頁(yè)面，或者說(shuō)用戶(hù)注冊表單區域應該設置多大的寬度呢？這一點(diǎn)上，需要考慮人的視覺(jué)范圍等一些列的因素在里面。據研究表面，頁(yè)面寬度跟閱讀是有相應關(guān)系的，頁(yè)面寬度不能過(guò)寬，否則會(huì )傷害閱讀者的眼睛，同時(shí)也不適合流暢性閱讀。而這個(gè)最為適合的瀏覽寬度，據研究報告應該是650px左右。
這這一問(wèn)題上面，Google、百度、淘寶做出了表率，注冊頁(yè)面寬度基本都在650px左右。而新浪、搜狐、網(wǎng)易等網(wǎng)站則表現不好，其注冊頁(yè)面的寬度基本都在730px左右，同時(shí)在頁(yè)面較大的情況之下還因為內容的過(guò)多堆積而造成頁(yè)面視覺(jué)效果非常擁擠，其中的緣由值得回味和分析探尋。
注冊引導或者提示區域，主要是用于用戶(hù)正式開(kāi)始注冊前的相關(guān)提示，以便于用戶(hù)能夠更好地了解注冊流程、方法和需要注意的事項。
如Google的提示語(yǔ)：如果已有一個(gè) Google 帳戶(hù)，即可在此登錄。一句簡(jiǎn)短的提示語(yǔ)，就可以省卻已有Google帳戶(hù)者的注冊流程，轉而直接登錄。
再如常見(jiàn)的提示語(yǔ)：請注意：帶有*的項目必須填寫(xiě)。這樣就使用戶(hù)在注冊過(guò)程之中能夠明白哪些必填，哪些不用去浪費時(shí)間。
而對于有些網(wǎng)站的本來(lái)只有兩步的注冊流程，即“填信息”—“成功”，個(gè)人感覺(jué)就沒(méi)有必要去加這個(gè)注冊流程的描述了。因為當你填完信息并提交之后，就已經(jīng)注冊成功了，而你的流程在這里擺著(zhù)容易讓人產(chǎn)生一種流程很繁瑣的感覺(jué)。如新浪的注冊提示：注冊步驟：1.選擇登錄名- 2.注冊成功本來(lái)提交完就注冊成功了，再加這個(gè)就沒(méi)必要了。
注冊引導和注冊區域的另外一個(gè)注意的事項就是描述語(yǔ)言一定要簡(jiǎn)潔明快，讓人看完就知道什么意思，不要用一大段的話(huà)來(lái)描述一段自己都看不明白的內容。如新浪的描述語(yǔ)句：請用英文和簡(jiǎn)體中文（GB）填寫(xiě)。提示：使用您常用郵箱注冊新浪通行證，請點(diǎn)這里！相信看到這樣的描述語(yǔ)句，原本清晰的思路也會(huì )變得混亂。
注冊表單的排版布局方式按照標簽的排列方式來(lái)說(shuō)一般有三種方式，即標簽垂直對齊方式、標簽水平左對齊方式以及標簽水平右對齊。
標簽垂直對齊，如百度注冊頁(yè)面：
這種布局方式主要適用于表單數量較少的情況，因為標簽單獨一行占用的高度是標簽與內容在同一行時(shí)候的2倍。這種布局方式的好處是用戶(hù)可以在一列中由上到下掃視，而不用過(guò)多的左右掃視。
標簽水平左對齊，如Google注冊頁(yè)面：
標簽水平左對齊便于用戶(hù)對輸入標簽的閱讀，但從標簽到輸入區的距離可能會(huì )因特殊標簽內容的長(cháng)度而影響其它標簽到輸入區的間隔距離較長(cháng)，這樣會(huì )間接影響到填寫(xiě)速度。
標簽水平左對齊適用于排版相對整齊，同時(shí)用戶(hù)易于理解所需填寫(xiě)內容的時(shí)候。雖然標簽水平左對齊會(huì )增加更多的眼部注視和更長(cháng)距離的視線(xiàn)移動(dòng)同時(shí)會(huì )使表單填寫(xiě)速度變慢，但是標簽水平左對齊的表單通常更整齊、清晰。它能促使用戶(hù)去快速地掃視標簽，并增加了標簽的可讀性。
標簽水平右對齊，如騰訊QQ注冊頁(yè)面：
目前大多數網(wǎng)站注冊頁(yè)面采用的都是標簽水平右對齊的方式，在使用這種對齊方式的時(shí)候，用戶(hù)操作會(huì )比較快捷，填寫(xiě)表單時(shí)會(huì )更加快速方便。
標簽水平右對齊縮短了標簽與輸入框之間的距離，同時(shí)也便于它們的一一對應。標簽水平右對齊適用于表單排版不夠整齊的情況。這種對齊方式特別適用于中文標簽長(cháng)短不一致的情況，這樣會(huì )給人一種比較舒服的感覺(jué)。
標簽細節體驗，除去標簽的排版細節之外，標簽還有其相應的細節體驗。比如標簽應用粗體更能讓標簽的視覺(jué)效果突顯，用戶(hù)也會(huì )覺(jué)得使用了粗體的標簽會(huì )使標簽閱讀、內容理解以及內容填寫(xiě)變得更加容易。
同理，如果想強調標簽的文字內容，要讓用戶(hù)去看仔細看標簽，那就使用帶有陰影效果或鮮艷顏色的字體作為標簽內容。如果標簽沒(méi)有那么重要，那就不畢刻意去這么做，因為我們需要避免用戶(hù)在填寫(xiě)信息時(shí)收到額外的干擾。
提示信息的作用是用作解釋或者描述當前注冊所填選項的相關(guān)細則或者規矩的，一般而言看到前面的標簽名稱(chēng)就應該了解后面的內容該如何填寫(xiě)的，因而這個(gè)提示信息應該算作有備無(wú)患之類(lèi)的信息，方便注冊者在不能理解或者出現問(wèn)題的時(shí)候查看的。
就體驗設計角度而言，一般情況下提示信息應該清晰明確但又不引人注目，同時(shí)與標簽的文字顏色要有區別且應較之相對輕淡一些，做到不在視覺(jué)上去干擾用戶(hù)，通常情況下采用灰色系。另外，提示信息的文字應該做到言簡(jiǎn)意賅，用簡(jiǎn)要的少量的文字去描述而不是出現整段整段的文字，否則會(huì )使用戶(hù)產(chǎn)生視覺(jué)上的壓迫感。
對比百度和網(wǎng)易通行證的注冊頁(yè)面不難看出上述的問(wèn)題。
百度用戶(hù)名區域的描述信息：
網(wǎng)易用戶(hù)名區域的描述信息：
提示信息的展現形式
提示信息的展現形式一般來(lái)說(shuō)有兩種，一種是靜態(tài)文本的固定展示，如上面百度和網(wǎng)易的描述文本。另外一種是默認狀態(tài)下不顯示提示文本，只有當鼠標觸發(fā)的時(shí)候才顯示出來(lái)，如下面圖示的淘寶注冊頁(yè)面。
默認狀態(tài)
輸入框鼠標觸發(fā)
對比一下可以發(fā)現，靜態(tài)文本的提示信息是根據用戶(hù)所需輸入的內容制定的一些和這個(gè)操作相關(guān)的幫助和提示。而觸發(fā)顯示的信息也是預先設定好的靜態(tài)文本，只不過(guò)是在用戶(hù)觸發(fā)的時(shí)候才給予顯現。
使用觸發(fā)顯示的提示信息可以使表單在非觸發(fā)狀態(tài)下能夠保持最大限度的干凈和整潔，如設定的提示信息比較多，可以通過(guò)用觸發(fā)顯示的展現方式來(lái)實(shí)現，這樣既能保持頁(yè)面的清晰和整潔又能在用戶(hù)需要的時(shí)候給予合適的提示信息。而如果一開(kāi)始就把過(guò)長(cháng)的提示信息全部展示出來(lái)，一則不易控制展示方式，二來(lái)容易產(chǎn)生視覺(jué)上的壓迫感，三來(lái)容易讓用戶(hù)產(chǎn)生網(wǎng)站規則過(guò)多過(guò)雜的不爽心理。
當然，觸發(fā)顯示的提示信息，在觸發(fā)的過(guò)程中會(huì )產(chǎn)生內容和頁(yè)面的跳躍，容易使用戶(hù)的視覺(jué)中心產(chǎn)生偏移，強迫用戶(hù)去閱讀跳出的信息。而這些信息對于很多用戶(hù)而言卻有可能是沒(méi)用的垃圾信息。這樣不但不會(huì )對用戶(hù)產(chǎn)生好的注冊體驗，還有可能影響注冊速度并產(chǎn)生不好的體驗。
因而，在設計提示信息的時(shí)候最好能夠做到盡量的簡(jiǎn)潔，文字盡量少，直接靜態(tài)展現出來(lái)?；蛟S這樣的體驗比到處充斥著(zhù)所謂高深技術(shù)的觸發(fā)信息帶來(lái)的體驗要好很多。
提示信息的位置設計
就提示信息所能顯示的位置而言，一般來(lái)說(shuō)這個(gè)位置需要易于被用戶(hù)方便地發(fā)現和閱讀?；谶@個(gè)規則，提示信息一般位于所操作選項的下方或者右側。
當提示信息位于操作選項的下方時(shí)，用戶(hù)不需要左右移動(dòng)視線(xiàn)就可以閱讀，給人的體驗是比較好的。同時(shí)，提示信息跟操作選項有明確的從屬關(guān)系，而且由于單獨一行，從而也增加了提示信息的可用寬度，便于文字顯示的同時(shí)還能使頁(yè)面顯得干凈整潔。而不足之處在于單獨占用一行會(huì )拉長(cháng)頁(yè)面的高度，如果內容過(guò)多容易出現信息單屏不能顯示完全，進(jìn)而需要借助右側的滾動(dòng)條進(jìn)行相應的瀏覽。
提示信息位于操作選項右側的時(shí)候，這樣做最大的好處就是可以節省頁(yè)面的高度。當然，由于最優(yōu)的可用寬度有限，這樣容易使提示信息排布密集，設置出現多行的現象，這樣就增加了用戶(hù)的閱讀成本降低了閱讀體驗。而通過(guò)增加頁(yè)面寬度的方式來(lái)解決文字密集又會(huì )在水平方向上使用戶(hù)視線(xiàn)來(lái)回大范圍跳躍，使用戶(hù)的體驗降低。
綜合以上分析，在注冊表單的條目較少時(shí)，把提示信息放在操作選項下面是比較好的，畢竟條目較少，頁(yè)面高度也不會(huì )出現大范圍的增加。而在注冊表單條目較多的情況下，如果提示信息的文字比較少，把提示信息放在操作選項右側就不失為一種好的做法了。
當然，提示信息可能會(huì )有其它的位置設計，也可能會(huì )出現上述兩種位置同時(shí)使用的情況。一切還應該以實(shí)際的應用環(huán)境和需求為設計參考依據。
用戶(hù)注冊過(guò)程的表單驗證，剛開(kāi)始的時(shí)候是放在服務(wù)器端進(jìn)行驗證的，也就是當用戶(hù)填完所需的信息并點(diǎn)擊提交按鈕之后，表單會(huì )把用戶(hù)填寫(xiě)的信息提交到數據庫進(jìn)行驗證，如果信息不沖突就給予注冊，如果想要的ID已經(jīng)被占用，則返回錯誤的提示信息。如果用戶(hù)的信息沒(méi)通過(guò)，只有經(jīng)過(guò)這個(gè)漫長(cháng)的驗證過(guò)程才能得到錯誤的反饋，現在想來(lái)這種方式的用戶(hù)體驗真的是很差。
隨著(zhù)技術(shù)的進(jìn)步，表單驗證的功能逐步放在了前端來(lái)做，也就是當用戶(hù)填寫(xiě)完信息的時(shí)候實(shí)時(shí)進(jìn)行數據的驗證，并把結果直接在一頁(yè)面上反饋給用戶(hù)，這樣就避免了后續錯誤的發(fā)生，使注冊過(guò)程中的用戶(hù)體驗得到了很好的提升。
一般而言，通過(guò)注冊過(guò)程中的實(shí)時(shí)驗證，并把結果實(shí)時(shí)反饋給用戶(hù)，這樣當用戶(hù)填寫(xiě)完成的時(shí)候，提交到后臺的數據已經(jīng)就是一份準確無(wú)誤的數據了，除非發(fā)生服務(wù)器錯誤，這組數據一般來(lái)說(shuō)是能夠成功注冊的。通過(guò)實(shí)時(shí)的驗證和反饋保證用戶(hù)提交數據的準確性和成功率，本身就是對用戶(hù)注冊流程的良好體驗的提升。
表單驗證的時(shí)機
表單驗證選擇什么樣的時(shí)機好呢？是在填寫(xiě)完表單之后即時(shí)驗證并顯示反饋信息，還是在點(diǎn)擊提交按鈕之后再驗證并顯示反饋信息呢？
有的網(wǎng)站沒(méi)有即時(shí)顯示，而是當用戶(hù)提交表單之后才告訴用戶(hù)哪里的信息填錯了，而且還要重新填寫(xiě)密碼，這對用戶(hù)非常不友好。如開(kāi)心網(wǎng)注冊過(guò)程中的驗證碼填寫(xiě)錯誤之后，一直到提交之后才能驗證并反饋錯誤所在。
當然，驗證反饋也不能過(guò)于敏感，有的網(wǎng)站在用戶(hù)什么都沒(méi)有填寫(xiě)，鼠標觸發(fā)頁(yè)面空白區域或者其它選項的時(shí)候就會(huì )觸發(fā)驗證程序并顯示反饋信息。如優(yōu)酷網(wǎng)的表單驗證，在沒(méi)有填寫(xiě)任何信息時(shí)候，已經(jīng)出發(fā)了所有的驗證并得到了錯誤的反饋信息。
誠然這兩種方式都是不可取的。合適的表單驗證時(shí)機是在用戶(hù)填寫(xiě)完當前的選項之后再驗證并給出反饋信息，不能提前，也不能過(guò)分延后。
表單驗證的視覺(jué)反饋
就視覺(jué)反饋來(lái)說(shuō)，一般而言當驗證正確的時(shí)候給出正確的提示，圖標一般應用“√”，而顏色是綠色，提示綠色同行；當驗證錯誤的時(shí)候給出錯誤提示，圖標一般一應用“X”或者“！”，顏色通常是紅色，起到一種警示的效果。
表單驗證反饋信息的顯示位置
對于表單驗證反饋信息的顯示位置，跟前面說(shuō)到的提示信息的顯示位置類(lèi)似，一般而言是顯示在操作項的右側或者下方。但是應當避免是運用彈出層或者窗口來(lái)顯示反饋信息，這樣會(huì )使操作步驟增加并大大降低用戶(hù)體驗。
網(wǎng)站用戶(hù)ID一般有兩種形式，普通的用戶(hù)名或者Email郵件地址，當然兩者兼有的現象也存在。在注冊過(guò)程中，如果提示想要“ID已被注冊”時(shí)，應該如何顯示操作提示呢？是否有必要按照用戶(hù)輸入信息自動(dòng)生成可用的用戶(hù)名ID供用戶(hù)選擇，是否可以提供給用戶(hù)一個(gè)用于登錄的鏈接，以驗證用戶(hù)之前已經(jīng)在本網(wǎng)站注冊過(guò)呢。當然，這樣做對于用戶(hù)來(lái)說(shuō)，體驗是非常好的。如淘寶的用戶(hù)注冊表單：
用戶(hù)ID在注冊過(guò)程中也是需要驗證的。ID驗證一般有自動(dòng)驗證、 手動(dòng)驗證和提交后驗證。自動(dòng)驗證，當用戶(hù)輸入完相應ID，點(diǎn)擊觸發(fā)下一個(gè)輸入選項的時(shí)候系統自動(dòng)默認相應ID輸入完成并開(kāi)始驗證給出反饋結果。手動(dòng)驗證，即提供一個(gè)相應的驗證按鈕，點(diǎn)擊后驗證并給出反饋。最后一種是提交表單后，系統才開(kāi)始驗證并反饋結果。個(gè)人感覺(jué)自動(dòng)驗證比較好，用戶(hù)體驗非常友好，技術(shù)實(shí)現上也沒(méi)有什么難度。
手動(dòng)驗證的例子如Gmail的注冊驗證。
有的網(wǎng)站在注冊過(guò)程中會(huì )實(shí)時(shí)顯示密碼安全程度，以此來(lái)提醒用戶(hù)所設置密碼的安全性。在這種驗證的前提下，應該在沒(méi)輸入密碼前就顯示相應的等級標識，并實(shí)時(shí)給出所輸入密碼達到的安全等級，而不是讓用戶(hù)去猜測。當然這種方式是否真的有必要，用戶(hù)是否會(huì )輕易因為安全提示而改變他們常用的密碼，也值得去思考和調查。
如Google的密碼安全驗證，一開(kāi)始便標識出了密碼的最高等級：
而后，當輸入密碼的時(shí)候進(jìn)行實(shí)時(shí)驗證并反饋安全等級：
因為輸入的密碼以星號顯示出來(lái)，所以絕大多數網(wǎng)站都會(huì )要求用戶(hù)去確認自己的密碼，以避免前面的輸入有問(wèn)題造成后續無(wú)法登錄。有數據顯示，72%的情況是有必要去確認密碼的。但是Facebook，Linkedin，Twitter等網(wǎng)站卻不要求用戶(hù)去確認密碼，而前提是注冊過(guò)程中郵箱不能填寫(xiě)錯誤。而對于密碼驗證還有一個(gè)加強的方法就是初始輸入密碼的輸入框不允許復制，重復輸入密碼的輸入框不允許粘貼，以達到重復輸入密碼以驗證兩種是否相匹配的目的。
為防止惡意注冊或者機器人程序注冊，現在的注冊頁(yè)面一般都添加這樣的校驗碼功能進(jìn)行驗證排除。對于網(wǎng)站來(lái)說(shuō)，驗證碼越復雜越安全，但是從用戶(hù)的角度來(lái)看，則是越簡(jiǎn)單越好。因為有些時(shí)候過(guò)于復雜的驗證碼用戶(hù)也是無(wú)法辯認的，而有的網(wǎng)站還是不能在不刷新頁(yè)面的情況下實(shí)現校驗碼的刷新，這在可用性和用戶(hù)體驗上都是一件非常糟糕的事。
網(wǎng)站使用校驗碼，應該是易讀的，或者用戶(hù)在不可辯認的情況下可以實(shí)時(shí)刷新校驗碼。驗證碼一定要簡(jiǎn)單，不要讓用戶(hù)去猜測里面到底是什么內容。國內如網(wǎng)易等網(wǎng)站采用中文進(jìn)行校驗，個(gè)人感覺(jué)這樣會(huì )增加用戶(hù)的操作流程（切換輸入法），造成注冊效率下降。
而對用戶(hù)最友好的方式則是全英文或者全數字，這樣可以減輕用戶(hù)的負擔，增強體驗。全英文的時(shí)候，對于是否區分大小寫(xiě)也應該給予明確的說(shuō)明或者干脆不區分大小寫(xiě)，以防止出現差錯。當然全數字，應該是最為簡(jiǎn)單和高效的。另外一點(diǎn)是生成的驗證碼中的字符要單獨占位，不能相互疊加，背景色不能對字符形成干擾，不要讓用戶(hù)在辯認驗證碼上面花費過(guò)長(cháng)的時(shí)間。
網(wǎng)易的不宜辯認的中文驗證碼：
優(yōu)酷的不宜辯認的英文驗證碼：
服務(wù)條款的展現形式
服務(wù)條款的展現形式一般有如下幾種：
而對于上面的第三點(diǎn)，按照流程來(lái)說(shuō)，同意協(xié)議應該在注冊步驟之前，同時(shí)在注冊按鈕上面也沒(méi)有相應的表述，因而對于這種展現形式應該使同意注冊協(xié)議的步驟在注冊提交按鈕之前。如下面的注冊順序：
提交按鈕的設計與展現形式
提交按鈕一般來(lái)說(shuō)有左對齊、右對齊以及居中三種展現形式。由于注冊提交按鈕是注冊流程的最終步驟，因而按鈕要做相應的突出或者強調以方便用戶(hù)的操作。同時(shí)，在按鈕的相關(guān)描述上面可以結合相應注冊條款進(jìn)行文案的設計。
如上是通過(guò)對用戶(hù)注冊頁(yè)面的基本要素以及基本要素間的設計、交互以及體驗等方面進(jìn)行的用戶(hù)注冊頁(yè)面的交互體驗細節分析，希望能夠對大家有所幫助。
聯(lián)系客服
