網(wǎng)站登錄表單設(shè)計(jì)的新思路

登錄網(wǎng)站已經(jīng)融入到大多數(shù)人的生活當(dāng)中。也許是登錄操作太過頻繁，在這個(gè)過程中常常出現(xiàn)這樣或那樣的問題，比如，忘了密碼，用戶名或注冊(cè)的郵件地址。 這樣的經(jīng)歷不只讓我們感到挫敗，而且對(duì)企業(yè)也有不利影響。到底有多糟糕的影響呢？網(wǎng)站User Interface Engineering對(duì)主要的網(wǎng)絡(luò)零售商進(jìn)行了調(diào)查，結(jié)果顯示，45%的客戶在這些系統(tǒng)中進(jìn)行了重復(fù)注冊(cè)，每天有160,000人進(jìn)行了找回密碼的操作，而一旦他們尋回密碼之后，75%的客戶再也不會(huì)完成之前的支付。 沒有登錄的訪客無法看到網(wǎng)站個(gè)性化視圖和精選內(nèi)容，這樣大大降低了網(wǎng)站的轉(zhuǎn)化率和參與度。由此可見登錄操作的重要性，因此，有的網(wǎng)站已經(jīng)開始思索新的設(shè)計(jì)思路來解決這些問題。

這是我的賬戶信息嗎？

Gowalla的登錄表單（下圖）非常標(biāo)準(zhǔn)：輸入用戶名（郵箱地址）及密碼，然后登錄。下方也配有“忘記密碼”和“新手注冊(cè)”等提示信息?？傊?，常見的登錄界面該有的，一個(gè)都沒少。（（譯注：編譯本稿件時(shí)，Gowalla已經(jīng)關(guān)閉）

不過，Gowalla對(duì)登錄表單做了一些創(chuàng)新，提升了用戶登錄成功的幾率。如果用戶首次登錄失敗，比如用戶名，郵件地址或是密碼出錯(cuò)，它不僅會(huì)提示錯(cuò)誤，還會(huì)顯示你當(dāng)前想要登錄的賬戶頭像和用戶名等信息。

頭像和用戶名為用戶提供了直觀的判斷：“這是我的賬戶，可能只是忘記了密碼”，或者“這不是我的帳號(hào)，我肯定是輸錯(cuò)用戶名或郵箱地址了”。Gowalla也針對(duì)這種情況給出了解決方法：“這不是我的賬戶”，或是“我忘記密碼了”。

快速登錄

問答網(wǎng)站Quaro也采用了類似的驗(yàn)證機(jī)制，不過，它更為超前，在提交登錄表單之前就會(huì)顯示相關(guān)信息。如果輸入的賬戶不存在，它會(huì)馬上提示你創(chuàng)建新的賬號(hào)。

如果你輸入的郵箱地址有誤，用戶頭像和名字會(huì)顯示在登錄框的右邊。這種驗(yàn)證機(jī)制與Gowalla類似，不同之處在于，Quora是在提交表單之前就顯示相關(guān)信息。

Quaro的登錄框下方還有另一條提示信息：”在當(dāng)前瀏覽器無需密碼登錄”。如果你默認(rèn)勾選此項(xiàng)，也就是說，當(dāng)你再次登錄時(shí)，不必再次輸入密碼，只需點(diǎn)擊登錄框旁邊的頭像或用戶名即可。

如果你不小心點(diǎn)到“x”，或用“登錄其它賬號(hào)”，你又得麻煩地重新輸入郵件地址和密碼。Quaro的一鍵登錄雖方便，但并不是對(duì)所有網(wǎng)站都通用。為此，許多網(wǎng)站轉(zhuǎn)向采用第三方登錄解決方案。 比如以Facebook，Twitter，openID等為代表的“單點(diǎn)登錄方案”（Single-sign-on），它的解決辦法是通過減少用戶在不同網(wǎng)站的登錄細(xì)節(jié)（比如用戶在不同網(wǎng)站的用戶名，密碼可能有所不同），一個(gè)帳號(hào)即可通用許多不同網(wǎng)站。

這種登錄方式更快速。如果將Facebook或Twitter帳號(hào)與某個(gè)網(wǎng)站綁定，你只需點(diǎn)擊“Facebook或Twitter登錄”按鈕進(jìn)行登錄。當(dāng)然前提是你已經(jīng)注冊(cè)了Facebook或Twitter賬戶。每天有3.75億Facebook活躍用戶（占Facebook總活躍用戶的一半）會(huì)登入該網(wǎng)站，因此，這種方式大有可為。 Gowalla也采用了這種方案（下圖）。已綁定Facebook賬戶的Gowalla用戶只需點(diǎn)擊“Facebook登錄”即可，當(dāng)然，前提還是已注冊(cè)Facebook。如果尚未注冊(cè)Facebook的用戶，點(diǎn)擊該按鈕之后會(huì)進(jìn)入Facebook的注冊(cè)頁面，之后才會(huì)跳轉(zhuǎn)到Gowalla的頁面登錄。

登錄操作的新麻煩

不過，這些新的便利舉措?yún)s產(chǎn)生新的問題 ?—? 第三方登錄的選擇太多。當(dāng)用戶面對(duì)網(wǎng)站眾多登錄選項(xiàng)時(shí)，可能會(huì)產(chǎn)生如下行為： 他們記得曾注冊(cè)過該服務(wù)或綁定過帳號(hào)，很快登錄成功。當(dāng)然，這是最好的情況。 不管他們是否注冊(cè)了當(dāng)前登錄的網(wǎng)站帳號(hào) ，他們想當(dāng)然地認(rèn)為任何第三方服務(wù)的賬號(hào)都可登錄當(dāng)前網(wǎng)站。既然我可以登錄Facebook，我也有Facebook帳號(hào)，理所當(dāng)然能夠登錄當(dāng)前網(wǎng)站。 他們忘記以前到底使用的是哪種服務(wù)，要么就撓破頭皮，要么就登錄失敗。 更糟糕的是，如果用戶記錯(cuò)了第三方服務(wù)，登錄綁定之后，反而又創(chuàng)建了一個(gè)新帳號(hào)。網(wǎng)站可以盡量與不同服務(wù)的賬號(hào)相匹配，但也無法精準(zhǔn)判斷出某個(gè)Facebook帳號(hào)和Twitter帳號(hào)是否歸同一人所有。 第三方登錄方案在解決一部分問題的同時(shí)，又產(chǎn)生了新的問題。為解決這些新問題，我們把目光轉(zhuǎn)向網(wǎng)站Bagcheck的登錄設(shè)計(jì)。 Bagcheck的登錄設(shè)計(jì)很好解決了一鍵登錄輸入錯(cuò)誤（用戶名或密碼）的問題。它的原理是，使用即時(shí)搜索的結(jié)果與Bagcheck已存在的賬戶進(jìn)行匹配。當(dāng)輸入用戶名的前幾個(gè)字母，就能迅速找到你的賬戶，速度比輸入完整的郵件地址快很多。不過，考慮到可能出現(xiàn)重名的情況，我們還是選用郵件地址登錄。 一旦你輸入用戶名或郵件地址之后，登錄框才會(huì)顯示已注冊(cè)的賬號(hào)。

事實(shí)上，Bagcheck的設(shè)計(jì)摒棄了過去傳統(tǒng)的一鍵登錄形式，因?yàn)?，登錄按鈕默認(rèn)不顯示。不過，這種方式也不妨一試，原因如下： 用戶在確定登出之前，一直處于登錄狀態(tài)。因此，用戶幾乎不必經(jīng)歷整個(gè)登錄過程。切記：用戶登錄次數(shù)越少，登錄出現(xiàn)的問題也越少。 用戶登錄方便：要么輸入用戶名，然后選擇搜索結(jié)果，要么就輸入完整郵件地址，點(diǎn)擊登錄按鈕。雖然不是一鍵登錄，但操作起來并不麻煩。 如果你登錄的第三方賬號(hào)沒有與Bagcheck建立連接，是無法登錄的。因?yàn)?，登錄按鈕要等到你選擇用戶名之后才會(huì)顯示。此舉可杜絕同名帳號(hào)，同時(shí)用戶也不必糾結(jié)于到底選擇哪個(gè)已經(jīng)注冊(cè)或是綁定的帳號(hào)。（尤其是沒有設(shè)置cookies的瀏覽器或電腦） 不過，這種做法在Bagcheck的移動(dòng)頁面可能就不大靈光了。大家都知道，在移動(dòng)設(shè)備上打字不方便。因此，他們把第三方登錄按鈕放在了移動(dòng)頁面的重要顯示位置，這樣用戶只需一點(diǎn)，就能實(shí)現(xiàn)登錄。這也反映出不同設(shè)備對(duì)設(shè)計(jì)所產(chǎn)生的影響。

自從Bagcheck的這種登錄方式推出以來，我們收到了許多讀者對(duì)于提升其交互性的良好反饋和創(chuàng)意。許多人提議通過瀏覽器的cookies為老用戶建立默認(rèn)的登錄選項(xiàng)。這或許對(duì)使用相同瀏覽器登錄的老用戶很有幫助，但問題來了，更多的用戶是在不同瀏覽器或電腦登錄。在這種情況下，cookies不起作用。 另一個(gè)常見問題：是否應(yīng)該允許通過用戶名或郵件地址來搜索Bagcheck用戶，因?yàn)檫@樣會(huì)降低安全性。雖然這樣的設(shè)計(jì)確實(shí)在某種程度上降低了賬戶的安全性（相比上一個(gè)登錄設(shè)計(jì)），但相比那些要求你使用公開的用戶名登錄的網(wǎng)站（比如Twitter）而言，也沒那么糟糕。 由于Bagcheck的用戶資料頁面是公開的，用戶在Google和Bagcheck上都能搜索到。因此，如果你想體驗(yàn)一下，首先確保你的個(gè)人主頁是處于開放狀態(tài)，同時(shí)你也要意識(shí)大家對(duì)個(gè)人信息都比較敏感。 對(duì)郵件地址登錄的思考

有的人還不太習(xí)慣采用用戶名登錄，所以，郵件地址登錄依然是主流。Google的Identity Toolkit和Account Chooser允許用戶使用其郵件地址登錄網(wǎng)站，這樣一來，本文所提到的問題也就很好得到解決。

當(dāng)多個(gè)用戶在同一瀏覽器登錄時(shí)，每個(gè)賬戶都會(huì)列在一旁供選擇，這樣既方便又省事。 你可以去Google體驗(yàn)一番，也可用Google Toolkit在你自己網(wǎng)站上實(shí)現(xiàn)。

細(xì)節(jié)至關(guān)重要

Bagcheck和Google從宏觀角度重新思考了登錄頁面的設(shè)計(jì)，但并非所有針對(duì)登錄頁面的創(chuàng)新都要做得如此全面。即便是細(xì)微的改動(dòng)也能產(chǎn)生很大影響。比如，在移動(dòng)設(shè)備上打字的準(zhǔn)確率很低，再加之密碼采用的是暗文顯示方式，這就為移動(dòng)設(shè)備登錄帶來了難度。 Fcebook的移動(dòng)頁面解決了這個(gè)問題，雖說是細(xì)微改動(dòng)，但卻很有用。如果你在登錄時(shí)輸入的密碼錯(cuò)誤，輸入框中密碼字段會(huì)顯示明文密碼，這樣一來你就能看到你輸入的密碼。Facebook還有另一種登錄方式，使用電子郵件或電話號(hào)碼（下圖）登錄。這是一種細(xì)微的提升，但卻對(duì)移動(dòng)頁面的體驗(yàn)意義重大。

前路漫漫

前面的例子告訴我們，就算網(wǎng)頁上最常見的交互行為（比如登錄）也能從新的構(gòu)想和設(shè)計(jì)改進(jìn)上受益。并非所有的登錄表單都會(huì)用到今天所提及的設(shè)計(jì)思路，但也不盡然。請(qǐng)不要停止嘗試，路漫漫，其修遠(yuǎn)兮。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

當(dāng)前文章：網(wǎng)站登錄表單設(shè)計(jì)的新思路
網(wǎng)頁網(wǎng)址：http://www.muchs.cn/news13/326863.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、響應(yīng)式網(wǎng)站、標(biāo)簽優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)