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