登錄網(wǎng)站已經(jīng)融入到大多數(shù)人的生活當(dāng)中。也許是登錄操作太過(guò)頻繁,在這個(gè)過(guò)程中常常出現(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ú)法看到網(wǎng)站個(gè)性化視圖和精選內(nèi)容,這樣大大降低了網(wǎng)站的轉(zhuǎn)化率和參與度。由此可見登錄操作的重要性,因此,有的網(wǎng)站已經(jīng)開始思索新的設(shè)計(jì)思路來(lái)解決這些問題。

這是我的賬戶信息嗎?

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

登錄表單設(shè)計(jì)的新思路


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

登錄表單設(shè)計(jì)的新思路

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

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

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

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

登錄表單設(shè)計(jì)的新思路

如果你不小心點(diǎn)到“x”,或用“登錄其它賬號(hào)”,你又得麻煩地重新輸入郵件地址和密碼。Quaro的一鍵登錄雖方便,但并不是對(duì)所有網(wǎng)站都通用。為此,許多網(wǎng)站轉(zhuǎn)向采用第三方登錄解決方案。

比如以Facebook,Twitter,openID等為代表的“單點(diǎn)登錄方案”(Single-sign-on),它的解決辦法是通過(guò)減少用戶在不同網(wǎng)站的登錄細(xì)節(jié)(比如用戶在不同網(wǎng)站的用戶名,密碼可能有所不同),一個(gè)帳號(hào)即可通用許多不同網(wǎng)站。
登錄表單設(shè)計(jì)的新思路
這種登錄方式更快速。如果將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è)頁(yè)面,之后才會(huì)跳轉(zhuǎn)到Gowalla的頁(yè)面登錄。

登錄表單設(shè)計(jì)的新思路

登錄操作的新麻煩

不過(guò),這些新的便利舉措?yún)s產(chǎn)生新的問題  ―  第三方登錄的選擇太多。當(dāng)用戶面對(duì)網(wǎng)站眾多登錄選項(xiàng)時(shí),可能會(huì)產(chǎn)生如下行為:

1.他們記得曾注冊(cè)過(guò)該服務(wù)或綁定過(guò)帳號(hào),很快登錄成功。當(dāng)然,這是最好的情況。
2.不管他們是否注冊(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)站。
3.他們忘記以前到底使用的是哪種服務(wù),要么就撓破頭皮,要么就登錄失敗。

更糟糕的是,如果用戶記錯(cuò)了第三方服務(wù),登錄綁定之后,反而又創(chuàng)建了一個(gè)新帳號(hào)。網(wǎng)站可以盡量與不同服務(wù)的賬號(hào)相匹配,但也無(wú)法精準(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è)字母,就能迅速找到你的賬戶,速度比輸入完整的郵件地址快很多。不過(guò),考慮到可能出現(xiàn)重名的情況,我們還是選用郵件地址登錄。

一旦你輸入用戶名或郵件地址之后,登錄框才會(huì)顯示已注冊(cè)的賬號(hào)。

登錄表單設(shè)計(jì)的新思路


事實(shí)上,Bagcheck的設(shè)計(jì)摒棄了過(guò)去傳統(tǒng)的一鍵登錄形式,因?yàn)椋卿洶粹o默認(rèn)不顯示。不過(guò),這種方式也不妨一試,原因如下:

1.用戶在確定登出之前,一直處于登錄狀態(tài)。因此,用戶幾乎不必經(jīng)歷整個(gè)登錄過(guò)程。切記:用戶登錄次數(shù)越少,登錄出現(xiàn)的問題也越少。
2.用戶登錄方便:要么輸入用戶名,然后選擇搜索結(jié)果,要么就輸入完整郵件地址,點(diǎn)擊登錄按鈕。雖然不是一鍵登錄,但操作起來(lái)并不麻煩。
3.如果你登錄的第三方賬號(hào)沒有與Bagcheck建立連接,是無(wú)法登錄的。因?yàn)?,登錄按鈕要等到你選擇用戶名之后才會(huì)顯示。此舉可杜絕同名帳號(hào),同時(shí)用戶也不必糾結(jié)于到底選擇哪個(gè)已經(jīng)注冊(cè)或是綁定的帳號(hào)。(尤其是沒有設(shè)置cookies的瀏覽器或電腦)

不過(guò),這種做法在Bagcheck的移動(dòng)頁(yè)面可能就不大靈光了。大家都知道,在移動(dòng)設(shè)備上打字不方便。因此,他們把第三方登錄按鈕放在了移動(dòng)頁(yè)面的重要顯示位置,這樣用戶只需一點(diǎn),就能實(shí)現(xiàn)登錄。這也反映出不同設(shè)備對(duì)設(shè)計(jì)所產(chǎn)生的影響。

登錄表單設(shè)計(jì)的新思路
自從Bagcheck的這種登錄方式推出以來(lái),我們收到了許多讀者對(duì)于提升其交互性的良好反饋和創(chuàng)意。許多人提議通過(guò)瀏覽器的cookies為老用戶建立默認(rèn)的登錄選項(xiàng)。這或許對(duì)使用相同瀏覽器登錄的老用戶很有幫助,但問題來(lái)了,更多的用戶是在不同瀏覽器或電腦登錄。在這種情況下,cookies不起作用。

另一個(gè)常見問題:是否應(yīng)該允許通過(guò)用戶名或郵件地址來(lái)搜索Bagcheck用戶,因?yàn)檫@樣會(huì)降低安全性。雖然這樣的設(shè)計(jì)確實(shí)在某種程度上降低了賬戶的安全性(相比上一個(gè)登錄設(shè)計(jì)),但相比那些要求你使用公開的用戶名登錄的網(wǎng)站(比如Twitter)而言,也沒那么糟糕。

由于Bagcheck的用戶資料頁(yè)面是公開的,用戶在Google和Bagcheck上都能搜索到。因此,如果你想體驗(yàn)一下,首先確保你的個(gè)人主頁(yè)是處于開放狀態(tài),同時(shí)你也要意識(shí)大家對(duì)個(gè)人信息都比較敏感。

對(duì)郵件地址登錄的思考

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

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

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

Bagcheck和Google從宏觀角度重新思考了登錄頁(yè)面的設(shè)計(jì),但并非所有針對(duì)登錄頁(yè)面的創(chuàng)新都要做得如此全面。即便是細(xì)微的改動(dòng)也能產(chǎn)生很大影響。比如,在移動(dòng)設(shè)備上打字的準(zhǔn)確率很低,再加之密碼采用的是暗文顯示方式,這就為移動(dòng)設(shè)備登錄帶來(lái)了難度。

Fcebook的移動(dòng)頁(yè)面解決了這個(gè)問題,雖說(shuō)是細(xì)微改動(dòng),但卻很有用。如果你在登錄時(shí)輸入的密碼錯(cuò)誤,輸入框中密碼字段會(huì)顯示明文密碼,這樣一來(lái)你就能看到你輸入的密碼。Facebook還有另一種登錄方式,使用電子郵件或電話號(hào)碼(下圖)登錄。這是一種細(xì)微的提升,但卻對(duì)移動(dòng)頁(yè)面的體驗(yàn)意義重大。

登錄表單設(shè)計(jì)的新思路
前路漫漫

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

隨機(jī)推薦

白白色在线观看| 免费观看成人在线视频| 亚洲性图一区二区| 久久久亚洲午夜电影| 久久伊人一区| 国产农村妇女精品一区二区| 欧美成人免费大片| 色在线免费观看| 久久免费视频在线观看| 1234区在线观看视频免费| 精品国产欧美日韩一区二区三区| 极品销魂美女一区二区三区| 亚洲欧美国产另类| 亚洲免费不卡| 9999热视频在线观看| 亚洲成人av观看| 2020国产精品自拍| 亚洲国产成人精品久久| 日韩视频免费大全中文字幕| 人妻熟女一二三区夜夜爱| 果冻天美麻豆一区二区国产| 日韩成人精品一区二区| 中文字幕欧美三区| 青青精品视频播放| 成年人在线看| 成人亚洲一区二区一| 欧美放荡办公室videos4k| 国产伦精品一区二区三区视频孕妇 | 欧美在线不卡一区| 性欧美videossex精品| 国产日韩精品一区二区三区在线| 国产1区2区在线| 久久精品人人做人人综合 | 国产美女一区| 亚洲高清123| 国产69精品久久久久毛片| 男女激情免费视频| 亚洲国产高清在线观看视频| 欧美xxxxxxxxx59| 在线观看不卡视频| 草草视频在线观看| 搡老女人一区二区三区视频tv| 波多野结衣一区二区三区免费视频| 欧亚精品在线观看| 欧美fxxxxxx另类| 一区二区三区四区视频在线| 国产v综合v亚洲欧| 美女黄a一级视频| 在线播放91灌醉迷j高跟美女| 周于希免费高清在线观看| 欧美黑人巨大xxx极品| 午夜激情久久| 中文字幕免费在线不卡| 国产精品美女久久久久久| 黄色影院在线播放| 中文字幕国产亚洲| 久久亚洲精品中文字幕蜜潮电影| 欧美一区1区三区3区公司| 成人免费视频视频| 羞羞视频在线免费看| av片在线观看| 最新91在线视频| 日韩在线精品| 51xx午夜影福利| 亚洲综合色网站| 美女搞黄视频在线观看| 久久久久久久色| 丝袜美腿亚洲色图| 成人福利影院| 亚洲高清福利视频| 成人免费在线观看av| 一区二区三视频| 精品国产户外野外| 日本欧美一区| 国产精品theporn88| 9久草视频在线视频精品| 欧美女子与性| 中文字幕日韩综合av| 在线中文一区| 日本在线观看a| 日韩欧美在线综合网| 成人午夜大片| 欧美国产视频在线观看| 国产精品网曝门| 两个人看的在线视频www| 国产精品视频久久| 91美女福利视频| av毛片在线| 国产日本欧美在线观看| 国产白丝网站精品污在线入口| www.在线视频.com| 欧美亚洲免费电影| 国产剧情av麻豆香蕉精品| www.久久热.com| 国产精品18久久久久久首页狼| 99久久精品一区二区| www555久久| 国产a一区二区| 亚洲黄色免费电影| 欧美成年网站| 青春草国产视频| 亚洲第一男人av| 黑人一区二区| 在线观看av每日更新免费| 欧美激情免费观看| 高清日韩电视剧大全免费| 中文在线免费| 国产一区二区视频在线免费观看| 亚洲一二三专区| 大香伊人久久精品一区二区 | 国产情侣久久| 一二三中文字幕在线| 久久久人成影片一区二区三区观看| 国产成人小视频| 国产www视频在线观看| 超碰国产精品久久国产精品99| 亚洲女人小视频在线观看| 色999久久久精品人人澡69| 国产系列第一页| 亚洲精品一区二区三区精华液 | 国产片一区二区三区| 色香欲www7777综合网| 亚洲图色在线| 精品久久久久久亚洲综合网| 欧美午夜在线视频| 日韩精品福利| 亚洲va久久久噜噜噜| 亚洲电影第三页| 久久在线免费| 外国精品视频在线观看| 国产精品丝袜一区二区三区| 亚洲影视在线观看| 日韩精品影视| 国产毛片av在线| 国产精品久久久久av福利动漫| 在线亚洲+欧美+日本专区| 欧美激情五月| 免费黄网站在线| 性欧美精品一区二区三区在线播放| 日韩欧美一区中文| 久久国产成人午夜av影院| 韩国美女久久| 国产精品wwwww| 欧美一区二三区| 亚洲高清视频中文字幕| 亚洲激情久久| 色欧美激情视频在线| 免费看国产精品一二区视频| 欧美va亚洲va香蕉在线| 国产成人午夜视频| 91国内精品| 一区二区电影网| 九九99玖玖| 亚洲精品短视频| 成人性生交大合| 欧美黑人做爰爽爽爽| 亚洲图片欧美| 日本午夜精品一区二区三区| 国产一区二区三区精品久久久| 91亚洲精品一区二区乱码| 老司机aⅴ在线精品导航| 在线播放91| 欧美日韩一区二区三区免费| 亚洲欧美成人精品| 国产精品三级视频| 中文精品久久| 自拍在线观看| 成人丁香基地| 精品一区二区三区视频日产| 一本一道久久a久久精品逆3p| 欧美国产日本韩| 激情综合久久| 日韩午夜视频在线| 亚州av电影免费在线观看| 一本一道久久a久久综合精品| 这里只有视频精品| 亚洲成av人片| 麻豆精品视频在线观看免费| 日韩有吗在线观看| 国产青青草在线| 国产最新免费视频| www日韩av| 免费av一区二区| 欧美日韩成人综合天天影院| 99久久99久久久精品齐齐| 综合激情在线| 欧美一级做一级爱a做片性| 蜜桃成人在线视频| 天天摸天天碰天天添| 国产精品久久久久久久免费大片| 日韩三级成人av网| 欧美人妖巨大在线| 中文字幕一区二区三区视频| 午夜在线观看视频| 精品久久一二三| 豆国产97在线| 久久久久久中文字幕| 精品国精品国产| 亚洲成人精品一区二区| 成人一区二区三区在线观看|