看似簡(jiǎn)單的App登錄注冊(cè)功能,怎樣做到用戶體驗(yàn)最佳?

44 評(píng)論 72487 瀏覽 448 收藏 9 分鐘

用戶登錄系統(tǒng),可以細(xì)分為三項(xiàng)功能模塊,分別是:登錄、注冊(cè)和密碼找回。本文作者將結(jié)合自身經(jīng)歷,談?wù)勊谧鲞@塊的時(shí)候一些想法,主要是涉及業(yè)務(wù)流程。

登錄和注冊(cè)功能,不論是PC端還是移動(dòng)端,大多數(shù)產(chǎn)品都會(huì)涉及到。而不同的產(chǎn)品邏輯和業(yè)務(wù)流程,會(huì)帶來不一樣的用戶體驗(yàn)。過去做的大多是后臺(tái)產(chǎn)品,面向的是內(nèi)部用戶,因此在做登錄和注冊(cè)功能時(shí),前臺(tái)界面相對(duì)簡(jiǎn)單,主要是后臺(tái)的權(quán)限管理較為復(fù)雜。而最近正在做一款A(yù)pp和一款PC端前臺(tái)產(chǎn)品,面向外部的普通用戶,因此在登錄與注冊(cè)的產(chǎn)品設(shè)計(jì)上,需要考慮更多的細(xì)節(jié)因素。下面把我做產(chǎn)品原型時(shí)的一些思考放在下面,供大家討論。

用戶登錄系統(tǒng),可以細(xì)分為三項(xiàng)功能模塊,分別是:登錄、注冊(cè)和密碼找回。下面分別談?wù)勎以谧鲞@塊的時(shí)候一些想法,主要是涉及業(yè)務(wù)流程。

一、登錄功能

1、登錄方式:手機(jī)號(hào)/郵箱/用戶名+密碼

現(xiàn)在App常見的登錄賬號(hào)是手機(jī)號(hào)和郵箱,因?yàn)檫@兩類登錄方式便于記憶,且方便找回密碼。但有很多App產(chǎn)品,其實(shí)是從其PC端產(chǎn)品衍生而來,它們共用同一套后臺(tái)系統(tǒng),因此需要考慮到一部分過去在PC端注冊(cè)的老用戶。所以,雖然由字母和數(shù)字組成的用戶名,已經(jīng)是PC時(shí)代的登錄方式,但是在移動(dòng)端上,也應(yīng)當(dāng)提供這樣的選擇。

如下圖1:

2、等待提示:提供“正在驗(yàn)證”的提示,緩解用戶焦慮

一般來說,如果產(chǎn)品的后臺(tái)能做到快速響應(yīng),及時(shí)反饋用戶操作的結(jié)果,自然是最理想的狀態(tài)。但我之前在做其他產(chǎn)品時(shí),碰到過很多次后臺(tái)無法及時(shí)響應(yīng)前臺(tái)請(qǐng)求的情況,這個(gè)時(shí)候,用戶可能會(huì)面臨一種無所適從的吃瓜狀態(tài)。

比如:用戶點(diǎn)擊登錄按鈕后,后臺(tái)響應(yīng)不及時(shí)或是網(wǎng)絡(luò)中斷,這個(gè)時(shí)候,用戶行為可能有兩種:重復(fù)提交或者直接退出。永遠(yuǎn)不要挑戰(zhàn)用戶的耐心,我就是這樣,每次使用其他產(chǎn)品時(shí),如果提交之后頁面無反應(yīng),等待2秒之后我就沒有耐心了,對(duì)這個(gè)產(chǎn)品的印象也打了折扣。為了預(yù)防這種情況,建議增加等待提示如,“正在驗(yàn)證,請(qǐng)耐心等待……”,或更加明確的指令“正在驗(yàn)證,請(qǐng)不要重復(fù)提交”。如下圖2

3、錯(cuò)誤提示:用戶名或密碼錯(cuò)誤+可試錯(cuò)次數(shù)

之前看過一篇文章,專門討論怎樣優(yōu)化登錄功能的用戶體驗(yàn)。文章里提到,最佳的提示方式是清楚地告訴用戶到底是用戶名錯(cuò)了,還是密碼錯(cuò)了,從而引導(dǎo)用戶去修改。這種提示方式固然是將用戶體驗(yàn)做的很好,但這其中卻隱藏了安全隱患:如果盜用賬號(hào)密碼,豈不是成功率更高了?

所以,我個(gè)人還是傾向于提供一個(gè)模糊的提示:“用戶名或密碼錯(cuò)誤”。同時(shí),可以加上一個(gè)試錯(cuò)機(jī)會(huì)提示,比如“你還可以嘗試xx次”,幫助用戶做到心里有數(shù)。當(dāng)然,如果設(shè)置了登錄試錯(cuò)機(jī)制,就需要補(bǔ)充相應(yīng)的業(yè)務(wù)流程:當(dāng)用戶試錯(cuò)次數(shù)用完后,引導(dǎo)用戶“找回密碼”。如下圖3:

登錄環(huán)節(jié)通常涉及到的細(xì)節(jié)主要是以上這些內(nèi)容,所以整個(gè)登錄的業(yè)務(wù)流程可以歸納為:①用戶輸入賬號(hào)+密碼,點(diǎn)擊提交→②界面提示“正在驗(yàn)證,請(qǐng)等待”→③界面提示信息錯(cuò)誤→④用戶再度嘗試,或成功,或重復(fù)先前提示。

二、注冊(cè)功能

1、注冊(cè)方式:手機(jī)號(hào) +密碼+驗(yàn)證碼

App產(chǎn)品在做新用戶注冊(cè)的時(shí)候,通用方式是用“手機(jī)號(hào)+驗(yàn)證碼”,好處顯而易見,快捷便利。我個(gè)人也是比較推崇這種注冊(cè)方式。但是, 還有很多用戶對(duì)用手機(jī)號(hào)注冊(cè)這種方式有所顧慮,擔(dān)心自己的信息外泄??紤]到這部分用戶群體的擔(dān)憂,我們可以在注冊(cè)界面多提供一種用郵箱注冊(cè)的方式,但這種方式不作為主要功能突顯,可以放在手機(jī)注冊(cè)的下方。如下圖4:

2、成功提示:激勵(lì)用戶

當(dāng)用戶提交信息后,一般最省事兒的做法就是直接跳轉(zhuǎn)到用戶的“個(gè)人中心”。這種方式固然沒有什么錯(cuò),但是總覺得缺點(diǎn)什么激勵(lì)性的東西。我之前在網(wǎng)上預(yù)訂了一本限購+預(yù)售的新書,真的要搶購才能買到,然后等了好多天終于收到書的時(shí)候,里面有一個(gè)黑色的信封,信紙上寫著“你是本書的第XXX名讀者”,這樣用戶體驗(yàn)做的還不錯(cuò),至少給我一種安慰和鼓勵(lì)的感覺。

在做App注冊(cè)的時(shí)候也可以這樣,當(dāng)用戶注冊(cè)成功之后,可以先不著急跳轉(zhuǎn)到個(gè)人中心,而是給用戶呈現(xiàn)一個(gè)激勵(lì)信息,比如“終于等到你!你是我們第 888 名用戶”這樣的反饋信息,還可以加上簡(jiǎn)單的引導(dǎo)按鈕,讓用戶去完善信息,但一定不要給用戶施加壓力,要讓用戶有自由選擇的機(jī)會(huì)。如下圖5:

三、密碼找回

1、通過手機(jī)號(hào)重置密碼

在App上找回密碼,最快捷方便的方式是通過手機(jī)號(hào)來找回。這個(gè)功能分為兩個(gè)步驟:第一步是填寫手機(jī)號(hào),獲取驗(yàn)證碼;第二步是在手機(jī)上重置密碼。當(dāng)然,在重置密碼的時(shí)候,可以讓用戶通過可見模式來設(shè)置,或者增加“確認(rèn)新密碼”的字段來確保用戶修改正確。如下圖6、7:

2、通過郵箱找回密碼

除了用手機(jī)號(hào)找回密碼之外,針對(duì)部分沒有綁定手機(jī)號(hào)的用戶,還可以提供用郵箱找回密碼的方式。這種方式需要后臺(tái)向用戶郵箱發(fā)送郵件,將新密碼告知用戶。如圖8:

上面這些內(nèi)容只是包含了登錄、注冊(cè)和找回密碼這幾塊核心的功能,但其實(shí)在設(shè)計(jì)登錄管理系統(tǒng)時(shí),還有諸如第三方登錄、引導(dǎo)用戶綁定手機(jī)等其他需求。

 

本文由 @jokefuture 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 作者寫的登錄方式還是比較早的,現(xiàn)在的大多app登錄注冊(cè)都是在一個(gè)流程中,輸入手機(jī)號(hào)碼-點(diǎn)擊下一步,選擇短信驗(yàn)證碼登錄或者是輸入密碼登錄,是在輸入手機(jī)號(hào)時(shí)就可以加校驗(yàn),但是不會(huì)對(duì)用戶進(jìn)行提醒,兩種登錄方式,當(dāng)然新用戶只能選擇短信驗(yàn)證碼登錄,進(jìn)入后自行設(shè)置新密碼。之后我會(huì)寫一篇文章說明的

    來自浙江 回復(fù)
  2. 還有一種比較有意思的情況,登錄跟注冊(cè)放在一起,第一步先輸入手機(jī)號(hào)碼,點(diǎn)擊確定驗(yàn)證手機(jī)號(hào)碼是否已經(jīng)注冊(cè),已注冊(cè),第二步輸入登錄密碼,相反進(jìn)入注冊(cè)流程(設(shè)置密碼和驗(yàn)證手機(jī)號(hào)碼)。

    來自廣東 回復(fù)
    1. 目前未注冊(cè)的手機(jī)號(hào)碼都是用驗(yàn)證碼快捷注冊(cè)了,密碼這個(gè)環(huán)節(jié)都沒有

      來自廣東 回復(fù)
  3. 看到前面覺得寫得很好,結(jié)尾的時(shí)候看到通過郵箱找回密碼,覺得有點(diǎn)瑕疵,用戶應(yīng)該通過后臺(tái)發(fā)送的郵件自己設(shè)置密碼,而不是后臺(tái)直接發(fā)個(gè)密碼給用戶,這會(huì)使用戶記住密碼的成本提高,下次登陸忘掉密碼的可能性很大。

    來自福建 回復(fù)
    1. 現(xiàn)在比較流行的應(yīng)該是給郵箱發(fā)驗(yàn)證碼,確認(rèn)后,在手機(jī)端進(jìn)行密碼修改吧,這樣子對(duì)于那些手機(jī)可以收到郵件的用戶來說,就不用在重新輸入賬號(hào)密碼來登錄電腦端的郵箱了,減少了用戶操作時(shí)間。

      來自廣東 回復(fù)
    2. 更需要考慮的應(yīng)該是安全性

      來自北京 回復(fù)
    3. 請(qǐng)問為什么后臺(tái)發(fā)送密碼給用戶會(huì)更安全?

      來自廣東 回復(fù)
    4. 你理解錯(cuò)了,我的意思是,后臺(tái)發(fā)送密碼給用戶是不安全的做法。

      來自北京 回復(fù)
  4. 1:可以提示用戶注冊(cè)手機(jī)號(hào)和郵箱的部分內(nèi)容。
    2:第三方登陸的流程沒有寫明

    來自廣東 回復(fù)
  5. 并沒有講到手機(jī)號(hào)收回之后二次投放帶來的注冊(cè)、登錄問題

    來自上海 回復(fù)
    1. 這個(gè)問題你有沒有比較好的解決思路呢?畢竟這是以短信驗(yàn)證碼為最終憑據(jù)的時(shí)代

      來自廣東 回復(fù)
  6. 筆者通過3個(gè)場(chǎng)景,逐一描述,考慮的比較全面,側(cè)重在了提示用戶的一些語言上,贊!對(duì)于APP企業(yè)希望可以直接得到用戶的信息,比如手機(jī)號(hào)碼,目前任信了點(diǎn)驗(yàn)可以用戶在注冊(cè)/登錄時(shí)輸入手機(jī)號(hào)碼,免輸驗(yàn)證碼即可完成驗(yàn)證,對(duì)于用戶也簡(jiǎn)單快捷

    來自湖北 回復(fù)
  7. 細(xì)節(jié)還是寫得挺好,考慮的東西比叫全面。很多產(chǎn)品設(shè)計(jì)在小細(xì)節(jié)的確有缺陷,都是依靠功能性的優(yōu)勢(shì)來彌補(bǔ),為什么就不可以把細(xì)節(jié)和功能都做好呢?比如我看到有人做第三方登錄接入,就只接入了一個(gè)微信登錄。別人不用微信的怎么辦?你這個(gè)第三方不就相當(dāng)于擺設(shè)了嗎?起碼把QQ、微博也放上吧,如果想讓客戶體驗(yàn)一下獨(dú)出心裁獨(dú)特的登錄體驗(yàn),把天翼接進(jìn)來也沒毛病啊,唉…

    來自廣東 回復(fù)
    1. 只接入一個(gè)微信登錄,會(huì)有戰(zhàn)略上面的考量。就比如支付方式,很多都只能用一種支付方式(微信/支付寶),這個(gè)用戶體驗(yàn)極差,但是也是戰(zhàn)略考量。在某些時(shí)候,用戶體驗(yàn)就只能讓步于公司戰(zhàn)略

      來自北京 回復(fù)
    2. 這個(gè)戰(zhàn)略上的考量,比如這個(gè)產(chǎn)品和微信有合作,能夠拿到用戶在微信上的一些數(shù)據(jù),而這些數(shù)據(jù)構(gòu)成了這個(gè)產(chǎn)品的很重要的一個(gè)要素,那么產(chǎn)品肯定會(huì)引導(dǎo)用戶使用微信登錄。而且現(xiàn)在不使用微信的用戶可以說是忽略不計(jì),也沒必要為了這百分之一的人的用戶體驗(yàn),去損害公司的戰(zhàn)略目標(biāo)

      來自北京 回復(fù)
    3. 一看 就是小白,接入什么第三方登錄是有業(yè)務(wù)上的考慮的,并不是你想怎么樣就怎么樣的

      來自浙江 回復(fù)
  8. 我覺得作者并沒有優(yōu)化用戶體驗(yàn),還是保持了傳統(tǒng)PC端注冊(cè)登錄老樣子,比較繁瑣

    回復(fù)
  9. 很多細(xì)節(jié)啊,現(xiàn)在很多app更新了以后都習(xí)慣于在注冊(cè)的時(shí)候把手機(jī)號(hào)碼和驗(yàn)證碼放到一個(gè)頁面上,填了驗(yàn)證碼以后在跳到下一個(gè)頁面設(shè)置密碼,這樣你覺得如何呢?

    來自四川 回復(fù)
  10. 應(yīng)該加上防刷機(jī)制!不然如果有人刷短信驗(yàn)證碼,那就也是錢?。?/p>

    來自上海 回復(fù)
  11. 感覺注冊(cè)成功后告知用戶的歡迎頁想法很贊~作者大大厲害了~

    來自河南 回復(fù)
    1. 沒意義 功能要分清主次 用戶注冊(cè)的目的是為了使用 app 內(nèi)的功能。與其讓用戶在這里停留 不如想象著陸頁怎么設(shè)計(jì)

      來自北京 回復(fù)
    2. +1,給用戶一個(gè)過渡頁,再給用戶兩個(gè)選擇,大部分用戶都會(huì)在這個(gè)頁面懵逼半天,懵逼以后可能還會(huì)點(diǎn)錯(cuò)選項(xiàng),我個(gè)人是傾向盡量少給用戶選擇,只要讓用戶一路點(diǎn)點(diǎn)點(diǎn)輸入輸入輸入~

      來自四川 回復(fù)
  12. 關(guān)于密碼是否可見輸入,對(duì)用戶體驗(yàn)影響很大,一般我的經(jīng)驗(yàn)是以密碼的復(fù)雜度來區(qū)分,普通的4-6位數(shù)字密碼,選擇不可見輸入方式,如果你的密碼要求很多,例如必須字母數(shù)字組合,必須7位以上,使用App的密碼鍵盤等,滿足這類1種或一種以上情況的,比如可由用戶選擇可見或不可見輸入方式。

    來自江蘇 回復(fù)
  13. 在目前的體驗(yàn)上,驗(yàn)證碼有一種體驗(yàn),我覺得很棒。就是用戶點(diǎn)擊獲取驗(yàn)證碼時(shí),自動(dòng)彈出輸入驗(yàn)證碼框,用戶輸入正確后,無需點(diǎn)擊提交,自動(dòng)判斷正確并跳轉(zhuǎn)。我覺得可以考慮這種方式~

    回復(fù)
    1. 如果以這種方式,用戶名或密碼有其中一個(gè)錯(cuò)誤的話,即使驗(yàn)證碼輸入正確,也不可能登陸到系統(tǒng)。而且要及時(shí)判斷到底屬于哪種錯(cuò)誤(是用戶名還是密碼還是驗(yàn)證碼錯(cuò)了),然后在界面上顯示出來。

      回復(fù)
    2. 你都用手機(jī)接收到驗(yàn)證碼,也是正確的,就表示用戶名是正確的的,哪里還需要判斷?

      來自廣東 回復(fù)
    3. 說的應(yīng)該是直接用手機(jī)號(hào)和驗(yàn)證碼登陸的那種方式,不是注冊(cè)的時(shí)候

      回復(fù)
  14. 注冊(cè)頁面,驗(yàn)證碼放在密碼后面好還是前面好呢?

    回復(fù)
    1. 個(gè)人認(rèn)為放在后面,點(diǎn)擊輸入驗(yàn)證碼彈出,是否正確直接在驗(yàn)證碼邊上給出提示,即不必刷新頁面就能看出。這樣快捷又不妨礙用戶自己判斷要不要繼續(xù)(可能會(huì)想修改其他信息之類的)

      回復(fù)
    2. 我覺得應(yīng)該放在密碼前面,現(xiàn)在的驗(yàn)證碼肉眼可識(shí)別度有很多太低,很容易輸入錯(cuò)誤

      來自江蘇 回復(fù)
    3. 原來大家都有一樣的疑問吶~~

      來自江蘇 回復(fù)
    4. 最好放在密碼前面,主要原因是因?yàn)轵?yàn)證碼的目的有時(shí)候是為了驗(yàn)證手機(jī)號(hào)是否被注冊(cè)或者有效,如果放在密碼后面,用戶都設(shè)置完密碼了,再告訴別人手機(jī)號(hào)已注冊(cè),那感覺太尷尬了“為啥不早告訴我!”

      來自重慶 回復(fù)
    5. 這塊大家對(duì)驗(yàn)證碼是否是有一個(gè)誤區(qū),驗(yàn)證碼的一個(gè)重要屬性是對(duì)身份的一個(gè)驗(yàn)證。再移動(dòng)端的注冊(cè)環(huán)節(jié),只有在點(diǎn)擊確定或注冊(cè)按鈕時(shí)才會(huì)對(duì)賬號(hào)是否注冊(cè)有一個(gè)判斷。所以這里的驗(yàn)證碼并不是對(duì)手機(jī)號(hào)是否被注冊(cè)進(jìn)行一個(gè)驗(yàn)證,而是看注冊(cè)者是否是本人。這種情況下,輸入完賬號(hào)和密碼之后,再要求對(duì)賬號(hào)驗(yàn)證,輸入驗(yàn)證碼是較合理的。驗(yàn)證通過之后直接注冊(cè)成功,如當(dāng)前賬號(hào)已經(jīng)注冊(cè)過,注冊(cè)按鈕在驗(yàn)證之后,提示當(dāng)前賬號(hào)已經(jīng)注冊(cè),去登錄。這樣是否體驗(yàn)會(huì)好一些。注冊(cè)和登錄這塊的流程和邏輯,印象筆記移動(dòng)端的交互做的特別好~大家可以參考下~

      來自山西 回復(fù)
    6. 個(gè)人覺得是分情況:一個(gè)是正如文中,手機(jī)號(hào)、驗(yàn)證碼和密碼全部在同一個(gè)頁面,順序上并沒有太大講究,當(dāng)然最好是驗(yàn)證碼在前,可以較快定位到手機(jī)號(hào)輸入錯(cuò)誤,而不用輸入完手機(jī)號(hào)和密碼之后才發(fā)現(xiàn)手機(jī)號(hào)輸入錯(cuò)誤;另外一個(gè)是手機(jī)號(hào)、驗(yàn)證碼和密碼在三個(gè)不同頁面,頁面之前按順序跳轉(zhuǎn),從用戶行為連貫性來說手機(jī)號(hào)后面進(jìn)行短信驗(yàn)證是比較符合邏輯的,在手機(jī)號(hào)跟短信驗(yàn)證之間加入了輸入密碼環(huán)節(jié)會(huì)讓人覺得行為中斷。

      來自上海 回復(fù)
    7. 我認(rèn)為如果是注冊(cè)的話,驗(yàn)證碼還是放在最后比較好,用戶設(shè)置完密碼,輸好驗(yàn)證碼基本就有一種大功告成的感覺了,而把輸完驗(yàn)證碼還需要設(shè)置密碼才能注冊(cè),感覺很繁瑣;另外,如果擔(dān)心用戶輸完手機(jī)號(hào)和密碼之后,獲取驗(yàn)證碼階段發(fā)現(xiàn)手機(jī)號(hào)已經(jīng)注冊(cè)這樣尷尬的情況,可以在輸入手機(jī)號(hào)階段就驗(yàn)證手機(jī)號(hào)啊,看是否注冊(cè),已注冊(cè)就及時(shí)給出提示,就不會(huì)發(fā)生設(shè)置完密碼獲取驗(yàn)證碼才出現(xiàn)手機(jī)號(hào)已經(jīng)注冊(cè)這樣的尷尬情況了

      來自河南 回復(fù)
    8. 我認(rèn)為放在密碼前面好,手機(jī)接收到驗(yàn)證碼之后立即輸入驗(yàn)證碼,這是一個(gè)很流暢的過程,如果我接收到了驗(yàn)證碼,你反而先讓我填寫密碼,感覺會(huì)有些別扭

      來自河北 回復(fù)
    9. 最好放在密碼前面,輸入手機(jī)號(hào)后對(duì)手機(jī)號(hào)進(jìn)行驗(yàn)證保證流暢度,其次最后輸入密碼會(huì)加深用戶對(duì)密碼的印象,因?yàn)橛洸坏妹艽a這個(gè)太常見了

      來自北京 回復(fù)
    10. 我覺得放在后邊比較好,一般接收驗(yàn)證碼的時(shí)間為60秒,比如我信號(hào)不好還剩5秒鐘的時(shí)候才收到,那我輸入密碼的時(shí)間肯定不夠了,就要再次獲取驗(yàn)證碼,而先設(shè)置密碼就不會(huì)出現(xiàn)這種情況

      來自北京 回復(fù)
    11. 我想說,你們都是產(chǎn)品經(jīng)理嗎?思維太局限了!驗(yàn)證手機(jī)號(hào)是否被注冊(cè)或格式是否正確根本不需要驗(yàn)證碼來驗(yàn)證,讓程序猿在代碼里邊加個(gè)JS就能搞定,當(dāng)你輸入完手機(jī)號(hào),焦點(diǎn)離開手機(jī)號(hào)輸入框的時(shí)候,觸發(fā)JS校驗(yàn),先校驗(yàn)?zāi)爿斎氲倪@個(gè)手機(jī)號(hào)格式是否正確,然后再校驗(yàn)是否已經(jīng)注冊(cè),根本不需要獲取驗(yàn)證碼!而且跟驗(yàn)證碼放在密碼前或后沒一點(diǎn)關(guān)系,真不知道都是怎么想的。

      來自山東 回復(fù)
    12. 當(dāng)然了,你要是說那個(gè)更美觀和實(shí)用的話,肯定是放在密碼后邊好一些。

      來自山東 回復(fù)
    13. +1;輸入手機(jī)號(hào)就可以判定是否已經(jīng)注冊(cè),是的話就變?yōu)榈卿洠皇堑脑捑瓦€是注冊(cè),調(diào)用不同的接口

      來自上海 回復(fù)
  15. 大家怎么看

    回復(fù)