用戶體驗(yàn)師們！別讓登錄將你的用戶拒之門外

@TerryFan?（思科云協(xié)作部門用戶體驗(yàn)設(shè)計(jì)師）：原文作者Raluca Budiu是Nielsen Norman Group的高級(jí)用研人員，這篇文章展示了一些登錄頁(yè)面的案例并且提供了一些處理方法，個(gè)人認(rèn)為雖然從純用戶體驗(yàn)的角度來(lái)說(shuō)很在理，但是從產(chǎn)品的營(yíng)銷角度，有些處理還是有必要的。

歡迎關(guān)注我的微信公眾號(hào)“開卷有譯”獲得新文章推送。

============================= 我是登錄的分割線 =============================

概要：當(dāng)用戶使用移動(dòng)應(yīng)用或查看網(wǎng)站信息時(shí)，強(qiáng)制他們注冊(cè)或登錄，不僅提高了用戶的交互成本，更是違反了設(shè)計(jì)的互惠原則。

在大量的用戶測(cè)試中，我們幾乎沒(méi)有見(jiàn)到有用戶在面對(duì)“登錄墻”的時(shí)候感到不困擾的。“登錄墻”指的是那些要求用戶登錄或者注冊(cè)才能繼續(xù)下去的頁(yè)面。

左圖的RueLaLa在啟動(dòng)后就顯示了登陸界面，而右圖的Gilt則直接將商品展示給所有人

上圖是兩個(gè)快銷型的移動(dòng)應(yīng)用, 左圖的RueLaLa在啟動(dòng)后就顯示了登陸界面：這樣就無(wú)法讓潛在的消費(fèi)者知道自己是否對(duì)應(yīng)用里的商品感興趣。而右圖的Gilt則直接將商品展示給所有人，只有他們購(gòu)買的時(shí)候，才需要進(jìn)行登錄。Gilt的方法顯然更合理，因?yàn)樗麄冏層脩舢a(chǎn)生期望，這也給了用戶一個(gè)注冊(cè)的充分理由。

登錄墻大大提高了用戶的交互成本，對(duì)于那些有賬號(hào)的用戶，他們必須要記住登錄憑證，而沒(méi)有的則需要花時(shí)間去創(chuàng)建新的賬號(hào)。因此，我們應(yīng)該只在登錄墻能給用戶帶來(lái)巨大好處時(shí)才使用它。諸如郵件或是銀行之類的私密的個(gè)人應(yīng)用，登錄墻可以將入侵者阻攔在外。然而，登錄墻對(duì)于那些用戶很少使用的服務(wù)來(lái)說(shuō)總是一個(gè)令人討厭的存在。來(lái)看看研究中用戶是怎么說(shuō)的：

• 注冊(cè)成千上萬(wàn)不同的網(wǎng)站，對(duì)我來(lái)說(shuō)簡(jiǎn)直無(wú)休止的困擾，因?yàn)槲抑皇且榭蠢锩嬉恍O其基本的信息，這樣做有什么意義？

登錄墻并不屬于產(chǎn)品初次體驗(yàn)

雖然我們?cè)缭?999年就建議過(guò)這點(diǎn)，仍然有不少網(wǎng)站在給用戶展現(xiàn)真實(shí)內(nèi)容之前要求他們進(jìn)行登錄。在移動(dòng)端尤為常見(jiàn)，當(dāng)你首次啟動(dòng)一個(gè)應(yīng)用或是訪問(wèn)一個(gè)網(wǎng)頁(yè)時(shí)，一道登錄墻就橫在你的面前。

讓我們來(lái)看看下面的案例，Task Rabbit需要用戶進(jìn)行登錄才能看到網(wǎng)站里的內(nèi)容，他們無(wú)法看到任何的招標(biāo)信息或是威客（譯者注:威客就是自由職業(yè)者高大上的一個(gè)稱呼，具體可以問(wèn)度娘）的資料，也就是說(shuō)，用戶根本無(wú)法得知這個(gè)網(wǎng)站能提供的服務(wù)以及威客質(zhì)量。如果我要找一個(gè)人幫忙翻譯信件，你說(shuō)這個(gè)網(wǎng)站能幫到我么？還是我最好再去看看別的網(wǎng)站？

Task Rabbit需要用戶進(jìn)行登錄才能看到網(wǎng)站里的內(nèi)容

相反，oDesk就讓潛在用戶看到網(wǎng)站中的招標(biāo)信息以及威客列表，他們就能更好的得知這個(gè)網(wǎng)站是否適合他們。

oDesk在用戶登錄前就展示了網(wǎng)站的內(nèi)容

oDesk在用戶登錄前就展示了網(wǎng)站的內(nèi)容，僅在后續(xù)用戶發(fā)布招標(biāo)信息或是雇用威客時(shí)才需要登錄。就算如此這個(gè)網(wǎng)站仍然能得到收益（事實(shí)上也許更多），因?yàn)橛懈嗟臐撛谟脩魧?huì)在他們的平臺(tái)上完成交易。

在我們關(guān)于移動(dòng)端的用戶體驗(yàn)培訓(xùn)課程上，我們也談?wù)摰搅说卿泬Φ膯?wèn)題，而得到最多的評(píng)論就是“但這僅僅在第一次啊，下次用戶來(lái)的時(shí)候就在保持登錄的狀態(tài)了！”你猜怎么著？也許根本就沒(méi)有下次了。用戶對(duì)于嘗試未知事物前必須輸入自己的信息感到萬(wàn)分困擾。根據(jù)期望效用原則（交互成本與收益比較），用戶對(duì)于他們使用你的應(yīng)用或者網(wǎng)站能得到什么并沒(méi)有太多概念，但是他們清楚地知道填一堆信息對(duì)他們來(lái)說(shuō)是個(gè)負(fù)擔(dān)（尤其在觸屏手機(jī)上，輸入用戶名和密碼簡(jiǎn)直太痛苦了。）你需要給用戶極大的動(dòng)力，才能讓他們寧愿承受這些，也不會(huì)刪除的應(yīng)用，然后尋找替代品，而這僅僅需要兩步。

（當(dāng)然，當(dāng)用戶十分青睞你的品牌時(shí)，那就另當(dāng)別論了——如果我有Facebook的賬號(hào)并且想在手機(jī)上使用時(shí)，Twitter即使不需要登錄就能使用，這對(duì)我也沒(méi)有任何幫助。但是對(duì)于大部分公司來(lái)說(shuō)并不是這樣：市場(chǎng)上總有其他類似應(yīng)用能比你更簡(jiǎn)單的。）

有些設(shè)計(jì)師認(rèn)為給用戶預(yù)覽產(chǎn)品的功能（而非實(shí)際功能）就足以引起用戶的好奇心然后注冊(cè)。也許吧，一個(gè)好的產(chǎn)品預(yù)覽能夠增加用戶對(duì)產(chǎn)品期望效用的評(píng)估，但是他們?nèi)匀恍枰ゲ聹y(cè)，而且保險(xiǎn)起見(jiàn)，他們還會(huì)降低期望，要知道，許多在線服務(wù)說(shuō)得天花亂墜，用戶已經(jīng)見(jiàn)怪不怪了。

大部分情況下，這些預(yù)覽或者介紹都是含糊不清的，以至于用戶并不會(huì)因此下定決心使用你的產(chǎn)品，雖然總比什么都沒(méi)有強(qiáng)，但是離理想的目標(biāo)還遠(yuǎn)著呢——用戶無(wú)法與產(chǎn)品進(jìn)行真實(shí)互動(dòng)，而是需要浪費(fèi)大量的時(shí)間去看那些介紹。

Trip it iPad版允許用戶在登錄前查看他們所提供的服務(wù)的，但是介紹幾乎全是步驟和功能點(diǎn)，用戶根本無(wú)法判斷這些是否有用或是好用。

網(wǎng)站和應(yīng)用為了強(qiáng)迫用戶注冊(cè)，他們常使用的一個(gè)詭計(jì)是將這個(gè)功能設(shè)計(jì)得毫不起眼并將界面的焦點(diǎn)都放在了登錄和注冊(cè)的選項(xiàng)上。Yelp在這點(diǎn)上是有罪的：不用登錄就能使用的功能被隱藏在了兩個(gè)被不同處理的設(shè)計(jì)中。許多用戶都忽視這個(gè)功能，認(rèn)為自己必須要有賬號(hào)才能使用Yelp。

Yelp在設(shè)計(jì)上故意讓用戶很難發(fā)現(xiàn)不登錄使用的功能，”現(xiàn)在注冊(cè)（Sign Up Now）”的按鈕相比之下明顯得多。

結(jié)賬時(shí)的登錄墻

許多電商類的網(wǎng)站和應(yīng)用在結(jié)賬時(shí)設(shè)置了登錄墻。 設(shè)計(jì)師認(rèn)為，登錄可以獲得先前設(shè)置的賬戶信息，這樣用戶就不需要進(jìn)行輸入地址和信用卡之類的操作了。

這對(duì)大部分用戶和大部分情境來(lái)也許說(shuō)是正確，但是并非絕對(duì)。用戶常常在某個(gè)網(wǎng)站進(jìn)行一次性的購(gòu)買。（這是我們之前有篇文章提到的五種電商用戶之一）他們希望盡快地完成購(gòu)買，這類用戶即使創(chuàng)建一個(gè)新的賬號(hào)，之后可能再也不會(huì)使用它，這對(duì)網(wǎng)站來(lái)說(shuō)幾乎沒(méi)有任何好處可言。就算那些擁有賬號(hào)的用戶也可能忘記密碼或是沒(méi)有備忘在手邊——這是很常見(jiàn)的移動(dòng)用戶情境。（沒(méi)錯(cuò)，你可以進(jìn)行密碼的恢復(fù)，但是這又是一個(gè)漫長(zhǎng)又浪費(fèi)時(shí)間的過(guò)程。）為了給用戶提供最大的便利，我們建議網(wǎng)站提供訪客結(jié)賬的功能，允許用戶在不用登錄或注冊(cè)賬號(hào)就能完成購(gòu)買行為。

Amazon 在這點(diǎn)上是有罪的：他們并沒(méi)有訪客結(jié)賬的選項(xiàng)。也許大部分的亞馬遜用戶都是回頭客，這也是為什么亞馬遜的用戶體驗(yàn)需求和其他大部分電商網(wǎng)站是不同的。盡管如此，這也不意味著這些買家能夠記住密碼。事實(shí)上，我們發(fā)現(xiàn)許多Amazon用戶無(wú)法在移動(dòng)端順利登錄，他們是其他平臺(tái)（例如桌面瀏覽器）的常客，而且密碼是自動(dòng)保存著的，這讓用戶很少有機(jī)會(huì)去輸入他們的密碼并且記住它。

Amazon 強(qiáng)迫用戶在結(jié)賬時(shí)登錄或是注冊(cè)

Overstock用戶有如下三種選擇：創(chuàng)建賬戶，登錄以及以訪客身份直接結(jié)賬。

我們也能用訪客結(jié)賬的功能來(lái)取代注冊(cè)。當(dāng)用戶添加了所有的信息，網(wǎng)站可以提供他們一個(gè)創(chuàng)建密碼的選項(xiàng)，來(lái)自動(dòng)完成注冊(cè)，并且將他們的數(shù)據(jù)保存在這個(gè)關(guān)聯(lián)的賬號(hào)里。我們可以直到用戶完成了購(gòu)買行為之后再進(jìn)行密碼創(chuàng)建，根據(jù)互惠原則，你幫助用戶順利完成了交易，他們也許會(huì)對(duì)你提供的良好體驗(yàn)感到心情大好，那么順手創(chuàng)建新賬戶就不在話下了。

PayPal結(jié)賬是比訪客結(jié)賬更好的選擇。（或是Google結(jié)賬，“開賬單給我”結(jié)賬，或是其他類似的選擇）這樣，網(wǎng)站可以重用用戶與PayPal賬號(hào)綁定的信息，這樣可以大大減少用戶的操作，除了輸入PayPal的密碼。（是的，這聽起來(lái)確實(shí)很諷刺，我們反對(duì)登錄墻的存在，卻提倡你讓用戶在其他服務(wù)上進(jìn)行登錄，但是你要知道，用戶總是會(huì)記著他們的PayPal密碼，因?yàn)樵S多用戶會(huì)經(jīng)常通過(guò)它來(lái)完成在線購(gòu)買。此外，在移動(dòng)端，PayPal還允許用戶使用PIN碼進(jìn)行登錄，這個(gè)可比輸入常規(guī)密碼簡(jiǎn)單得多了。）雖然PayPal結(jié)賬是個(gè)好的選擇，但是我們不能用它簡(jiǎn)單地取代訪客結(jié)賬，因?yàn)椴⒉皇撬械娜硕加蠵ayPal賬號(hào)的。

Neiman Marcus提供用戶以訪客身份結(jié)賬或是通過(guò)PayPal結(jié)賬

小結(jié)

根據(jù)經(jīng)驗(yàn)，我們建議你在考慮是否要對(duì)用戶設(shè)置登錄墻時(shí)，用互惠原則來(lái)衡量一下。以用戶為先來(lái)思考，登錄墻的設(shè)置能給產(chǎn)品帶來(lái)什么樣的好處：如果這些好處并不明顯，放棄登錄墻，或是讓用戶明白它存在的意義并且讓用戶清楚地知道他們能夠從你的網(wǎng)站里獲得什么。

電商網(wǎng)站應(yīng)使用半開放式的登錄墻，在登錄和注冊(cè)之外，提供允許用戶以訪客身份結(jié)賬或是通過(guò)PayPal結(jié)賬的選項(xiàng)，這能給用戶展現(xiàn)出你們網(wǎng)站對(duì)不同用戶情境以及交互渠道的思考。

更多的登錄界面案例，供你研究：
《收集靈感！一組APP注冊(cè)登錄界面設(shè)計(jì)欣賞》

登錄界面用戶完全調(diào)教指南就在下方：
《牽線搭橋！讓用戶更高效地完成表單填寫》

構(gòu)建好登錄界面之后打磨細(xì)節(jié)非常重要：
《細(xì)節(jié)決定成敗！提高用戶登錄體驗(yàn)的5個(gè)細(xì)節(jié)》

譯者@TerryFan?的公眾微信號(hào)，干貨滿滿當(dāng)當(dāng)，推薦設(shè)計(jì)師們掃碼關(guān)注：

原文地址：nngroup
譯者：@TerryFan

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

=================== 曬照贈(zèng)書！設(shè)計(jì)師男神女神在哪兒？ ===================

炎炎夏日！送書解暑！現(xiàn)在優(yōu)設(shè)微信社區(qū)也有送書福利活動(dòng)啦！

【活動(dòng)日期】本周一（7月28日）至周日（8月3日），發(fā)話題時(shí)附上自己的真實(shí)照片即可。
【活動(dòng)規(guī)則】根據(jù)大家的【點(diǎn)贊量】選取男/女神各一名
【活動(dòng)獎(jiǎng)品】我們會(huì)送出圖靈出版社《網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)意書（卷2）》哦！

P.S.照片不能作假哦，必須是本人的真實(shí)照片，帶臉照！！ 工作照、生活照、都可以，當(dāng)然一起上更好了(*^__^*)
早發(fā)皂片早收贊，微信的小伙伴們趕快行動(dòng)起來(lái)吧~\(≧▽≦)/~
進(jìn)入優(yōu)設(shè)微信，看到底部 點(diǎn)擊“聊天交友”進(jìn)入【優(yōu)設(shè)聊吧】? 在點(diǎn)擊一次“發(fā)話題”就可以爆照啦~快快行動(dòng)起來(lái)吧~

========================== 參 與 方 式 ==========================

①首先，你要關(guān)注一下優(yōu)設(shè)哥的微信啦~【youshege】或者直接掃描二維碼：

②然后，進(jìn)入優(yōu)設(shè)哥的微信，看到底部，點(diǎn)擊“聊天交友”進(jìn)入【優(yōu)設(shè)聊吧】；

③在點(diǎn)擊一次“發(fā)話題”就可以爆照啦~ 快快行動(dòng)起來(lái)吧~

P.S.群內(nèi)如果有親想要參與微社區(qū)活動(dòng)，但是手機(jī)不支持傳圖發(fā)帖的可以聯(lián)系@【江蘇】花花