登錄網(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ī)推薦

国产欧美一区二区精品忘忧草| 欧美最猛性xxxxx(亚洲精品)| 毛片中文在线观看| caoporn国产精品| 中文字幕免费高| 久久先锋影音| 国产精品一区视频网站| 欧美日韩xxxx| 97国产一区二区精品久久呦| 日韩精品一区二区三区av| 欧美精品v日韩精品v韩国精品v| 快色在线观看| 亚洲最新在线观看| 99ri国产在线| 日本人视频jizz页码69| 激情丁香综合五月| 日韩精品另类天天更新| 999亚洲国产精| 精品久久久久久亚洲| 日韩视频免费| 欧美日韩系列| 久久精品99国产精品日本| 翔田千里亚洲一二三区| 精品日韩av| 欧美一区二区成人| 日本精品在线| 555www色欧美视频| 成全电影大全在线观看| 日韩精品久久久久久福利| 色吧亚洲日本| 久久久99久久精品女同性| 91视频成人| 亚洲 日韩 国产第一| 免费日韩一区二区三区| 国产成人激情小视频| 色88久久久久高潮综合影院| 91久久精品www人人做人人爽| 欧美在线影院| 日本在线高清视频一区| 国产精品综合在线视频| 久久欧美在线电影| 日本在线中文字幕一区| 国产精品三级在线| 日韩一级免费| 成人免费在线视频播放| 国产亚洲成aⅴ人片在线观看 | 日本不卡一区二区三区在线观看| 天使萌一区二区三区免费观看| 伊人情人网综合| 欧美—级在线免费片| 色网址在线观看| 精品久久人人做人人爽| 成人亚洲精品| 2022国产精品| 国产福利一区二区三区在线视频| 久热精品在线播放| 麻豆精品网站| 国产二级片在线观看| 亚洲乱码国产乱码精品精98午夜| 日本中文字幕在线视频| 亚洲人高潮女人毛茸茸| 玖玖玖免费嫩草在线影院一区| 999国产视频| 成人做爰69片免费看网站| 日韩男人天堂| 日韩一区二区三| 亚洲第一二区| 开心色怡人综合网站| 久久久久九九视频| 日本三级视频在线播放| 欧美高清视频一区二区| 中文字幕一区二区精品区| 少妇熟女一区二区| 亚洲精品水蜜桃| 天堂中文最新版在线中文| 国产精品扒开腿做爽爽爽男男 | 蜜桃传媒在线观看免费进入 | 久久综合九色综合网站| 成人免费观看av| 一级毛片在线视频| 国产一区二区成人| 精品av久久久久电影| www日韩在线观看| 欧美一区二区黄色| 日韩久久电影| 男女视频在线看| 亚洲激情视频在线观看| 91视频一区| 韩国一区二区av| 精品小视频在线| 中文字幕有码在线视频| 日韩欧美一区二区三区| 新片速递亚洲合集欧美合集| 成人免费观看a| 91女厕偷拍女厕偷拍高清| 韩国精品视频| 久久人人爽国产| 国产精品123| 成人毛片av在线| 亚洲尤物视频网| 亚洲免费视频成人| 一区二区三区视频免费视频观看网站 | 精品国内产的精品视频在线观看| 欧美视频日韩| 久久久久久77777| 久久国产精品久久国产精品| 日韩激情视频网站| 麻豆导航在线观看| 国产精品久久久久久久久久久新郎 | 欧美成人精品在线观看| 日韩av中文字幕一区二区三区| 性疯狂做受xxxx高清视频| 精品国产区一区二区三区在线观看| 爽好多水快深点欧美视频| 免费男女羞羞的视频网站主页在线观看 | 欧美欧美黄在线二区| 欧美日韩亚洲一二三| 国产精品久久久久久久久久久免费看 | 91免费在线视频观看| 同心难改在线观看| 久久青草福利网站| 972aa.com艺术欧美| 福利小视频在线| 欧美精品尤物在线| 欧美亚洲图片小说| 99久久99久久精品国产片果冰| 国产黄色影视| 欧美性做爰毛片| 亚洲视频一二三区| 蜜臀91精品国产高清在线观看| 九九99九九精彩| 日本人成精品视频在线| 最新日韩av在线| 久久91在线| 4480yy私人影院高清不卡| 日本精品性网站在线观看| 亚洲乱码国产乱码精品精的特点 | 一级黄色特级片| 午夜精品蜜臀一区二区三区免费 | 国产 日韩 欧美 综合 一区| 久久久久久久久久久免费视频| 色av吧综合网| 久久精品亚洲乱码伦伦中文| 国产精品视频首页| 成人在色线视频在线观看免费大全| 国外成人在线视频| 亚洲成人在线网站| 亚洲黄色大片| av在线播放资源| 黄色免费视频大全| 欧美一级在线播放| 欧美日韩另类视频| 一区免费在线| a级片在线免费| 喜爱夜蒲2在线| 久久久最新网址| 欧美日韩免费观看中文| 99精品热视频只有精品10| aaa在线播放视频| 欧美色图另类小说| 国产日韩在线播放| 欧美videos中文字幕| 99久精品国产| 国产伦精品一区二区三区千人斩 | 日韩国产网站| www.xxx亚洲| 成人国产精品免费视频| 宅男在线国产精品| 成人av电影在线| 第一会所亚洲原创| 毛片在线导航| 97超碰在线资源站| 一区二区三区在线视频观看58 | 亚洲三级影院| 第四色男人最爱上成人网| 成人黄色电影网址| 国产伦视频一区二区三区| 日韩电影大片中文字幕| 国产日韩欧美电影| 欧美激情视频一区二区三区在线播放| 欧美激情精品久久久| 天天色天天爱天天射综合| 日本美女一区二区三区| 亚洲一区二区三区在线免费| 在线理论视频| 日本人妻伦在线中文字幕| 国产成人午夜视频网址| 日韩精品一区二区三区视频| 国产日韩欧美在线一区| 亚洲午夜极品| 久久久久久久久成人| 久久国产精品 国产精品| 亚洲精品午夜精品| 亚洲欧美日韩中文字幕一区二区三区 | 欧美另类变人与禽xxxxx| 丁香婷婷综合激情五月色| 国产欧美久久一区二区三区| 在线观看免费视频你懂的| 91黑丝在线| 97久久国产亚洲精品超碰热|