注冊登錄功能設(shè)計(jì)(一):全面的邏輯分析
編輯導(dǎo)語:我們下載一個APP、登錄一個網(wǎng)站往往都需要進(jìn)行注冊或者登錄,由此可見,注冊登錄功能的設(shè)計(jì)有多么重要。本文作者對此進(jìn)行了全面的邏輯分析,看看注冊登錄功能如何設(shè)計(jì)才能提升用戶的體驗(yàn)感吧。
很多to B端平臺,由于用戶量不大,對注冊登錄功能也就不太重視。
就我而言,在沒研究注冊登錄功能時,覺得它很簡單,想著幾乎每個應(yīng)用都有,能有多難。就算運(yùn)用中有疑問,也只會針對當(dāng)前問題分析,也因此沒有一個系統(tǒng)的概念和認(rèn)知。
通過這幾天的深入挖掘,發(fā)現(xiàn)做好登錄注冊界面真的沒有想象中簡單。本文主要以pc端界面為案例分析注冊登錄,相比注冊,登錄寫的不那么全面。
1. 注冊
常見的注冊共有2種,分別是手機(jī)號注冊和郵箱注冊。邀請碼注冊登錄通常在產(chǎn)品內(nèi)測階段啟用,用戶名注冊幾乎已經(jīng)銷聲匿跡。
1.1 手機(jī)號注冊
目前大部分APP都采用手機(jī)號為主要注冊登錄的方案,主要是因?yàn)槭謾C(jī)號本身的特性,手機(jī)號具有高滲透率、唯一性、真實(shí)性(實(shí)名認(rèn)證)、可聯(lián)絡(luò)性,手機(jī)號不僅可以確認(rèn)用戶身份,還可以在必要時聯(lián)系用戶、通過通訊錄導(dǎo)入社交關(guān)系等。
1.1.1 分步和非分步注冊
注冊界面一般設(shè)計(jì)表現(xiàn)形式有兩種,分步注冊和非分步注冊。
據(jù)facebook數(shù)據(jù)統(tǒng)計(jì),分步注冊的用戶留存率大大高于非分步注冊。當(dāng)然也不能一概而論,但是分步注冊確實(shí)能屏蔽干擾信息,讓用戶按照引導(dǎo)順序來操作,減少了用戶犯錯率,不過分步步驟最好不要超過3步,否則會讓用戶感覺操作復(fù)雜。
注冊分類思維導(dǎo)圖如下,測試了花瓣、ui中國、站酷、bilibili、人人都是產(chǎn)品經(jīng)理、京東、天貓等web網(wǎng)站發(fā)現(xiàn)前三種注冊方式都有,關(guān)于設(shè)置登錄名/昵稱、支付方式的注冊輸入項(xiàng)這里暫不提及。
1.1.2 注冊流程圖
忽略“下一步顯示”或“觸發(fā)顯示”這些交互,“分步”和“非分步-全部顯示”流程相同,全部顯示中沒有驗(yàn)證安全碼而點(diǎn)擊”獲取短信驗(yàn)證碼”會報(bào)錯,“非分步-全部顯示”同“分步”:
1.1.3 toast提示
toast提示應(yīng)該簡單明了,一般用于錯誤發(fā)生時。
比如:輸入信息不完全、輸入錯誤(登錄)、輸入不合法(注冊)、已注冊/未注冊(手機(jī)號)等,注冊操作中,最好能實(shí)時提醒,不要等到用戶輸入所有信息后,再提示錯誤。
提示明細(xì)如下:
1.2 郵箱注冊
郵箱注冊屬于pc時代的常見做法,現(xiàn)在多見于國外網(wǎng)站注冊,比方說dribbble、twitter、facebook。如果用戶是第一次使用郵箱注冊登錄,那么會發(fā)送郵箱驗(yàn)證碼或是驗(yàn)證鏈接到郵箱,然后需要用戶到郵箱中進(jìn)行操作,這樣用戶體驗(yàn)會非常差。
不少企業(yè)從pc時代一路走過來,會考慮沒有綁定手機(jī)號的老用戶,而設(shè)置郵箱/密碼登錄方式。
1.2.1 分步和非分步注冊
以上測試的幾款web網(wǎng)站中,只有天貓?jiān)O(shè)置了郵箱注冊方式,還是在手機(jī)號被占用的情況下,通過提示鏈接中進(jìn)入。同類電商京東并沒提供郵箱注冊方式,只是提示手機(jī)號已超過關(guān)聯(lián)上限數(shù)量,請更換。
由此可見,郵箱注冊已被大多數(shù)國內(nèi)企業(yè)棄用。
這里分類分步和非分步是基于忽略激活步驟的前提下,思維導(dǎo)圖如下:
激活郵件常用的有兩種:鏈接和數(shù)字驗(yàn)證碼兩種,如下圖:
1.2.2 注冊流程圖
相比手機(jī)號注冊,郵箱注冊多了郵箱激活過程,這讓它的注冊流程相對偏復(fù)雜,這里通過流程圖特意說明下。
1.2.3 toast提示
1.3 注冊成功后流程圖
2. 登錄
目前主流的登錄方式是短信登錄和第三方授權(quán)登錄,手機(jī)端和web端都有其特有登錄方式,手機(jī)端中的一鍵快速登錄、手勢密碼、指紋登錄,web端的二維碼登錄。
2.1 toast提示
登錄操作有很多應(yīng)用會在點(diǎn)擊登錄button時才提示錯誤信息,當(dāng)然個別諸如安全碼類的提示會第一時間反饋。下表中整理的提示信息登錄方式為密碼登錄、短信登錄。
2.2 切換登錄界面
在測試中,發(fā)現(xiàn)有的平臺同時為用戶提供了兩種登錄界面:獨(dú)立界面和彈窗;獨(dú)立界面跳轉(zhuǎn)方式有兩種,本頁打開方式、新開窗口。
- 只提供一種:參考站酷,跳轉(zhuǎn)登錄注冊界面使用在本頁打開方式,登錄成功后自動跳轉(zhuǎn)到登錄操作前所瀏覽的界面。
- 提供兩種:視頻播放類平臺bilibili,在首頁觸發(fā)登錄時新開窗口打開獨(dú)立界面,在播放界面觸發(fā)登錄時打開彈窗。
3. 交互要點(diǎn)
3.1 表單交互要點(diǎn)
注冊登錄過程中涉及的要素通常是五種,分別是手機(jī)號、郵箱、安全碼、短信驗(yàn)證碼、密碼,這些要素都有其作用和優(yōu)化方案。
掌握并運(yùn)用得當(dāng),會大大的節(jié)省用戶操作時間,提高賬戶的安全性和用戶體驗(yàn)。
3.2 其它交互要點(diǎn)或概念剖析
3.2.1 輸入框提示
輸入框提示語是必不可少的,措辭要簡潔,現(xiàn)在普遍做法是輸入框中提示,獲取焦點(diǎn)時提示消失,如果輸入項(xiàng)少,這種做法是可取的。
當(dāng)然最好是在輸入的過程中保留提示,如下圖3種方式。后兩種比較炫,每行輸入后,提示會上移顯示,其開發(fā)難度也會稍大。
簡單標(biāo)注補(bǔ)充說明:大多數(shù)用戶是產(chǎn)品小白,*表示必填項(xiàng)只有高段位用戶才理解。
因此,在設(shè)計(jì)表單界面過程中,選填項(xiàng)、必填項(xiàng)最好用文字標(biāo)注。簡短的操作說明也建議使用文字表述,圖標(biāo)隱藏說明文字雖然視覺效果好,但一定程度消耗了用戶體驗(yàn)。
一方面,圖標(biāo)類提示得點(diǎn)擊圖標(biāo)后才顯示,增加了用戶操作步驟;另一方面,圖標(biāo)也容易被用戶忽略。
3.2.2 短信驗(yàn)證碼
系統(tǒng)下發(fā)的短信一般會設(shè)定有效期,有效期設(shè)定在5-10分鐘為宜,短信碼獲取間隔為1分鐘,短信碼若有必要,可設(shè)定一天下發(fā)次數(shù)驗(yàn)證,或者在有效期內(nèi)用戶多次點(diǎn)擊時下發(fā)相同驗(yàn)證碼。
這樣不僅可以節(jié)省成本(下發(fā)短信需要付費(fèi)),也不會因?yàn)橥瑫r受到多條短信而分不清。
3.2.3 安全碼
3.2.3.1 驗(yàn)證碼目前主要有四種
滑動驗(yàn)證、按圖片提示選字、圖形驗(yàn)證碼、旋轉(zhuǎn)圖片;目的是為了確認(rèn)是人為注冊,防止軟件惡意注冊。圖片碼支持隨時刷新切換,不做次數(shù)限制。
3.2.3.2 驗(yàn)證順序說明
發(fā)送短信驗(yàn)證碼之前用安全碼驗(yàn)證,通常有以下3種順序:
- 先隱藏,點(diǎn)擊“發(fā)送短信驗(yàn)證碼”時顯示并驗(yàn)證,驗(yàn)證成功后,提示發(fā)送短信成功,或點(diǎn)擊“發(fā)送驗(yàn)證碼”獲取短信,此種安全碼多以彈窗顯示。如:左1—滑動驗(yàn)證(上)、左2-按提示選字或圖片;
- 先顯示并隱藏短信驗(yàn)證碼行,驗(yàn)證通過后顯示“短信驗(yàn)證碼”輸入欄,如:左1—滑動驗(yàn)證(下);
- 顯示并驗(yàn)證,若未驗(yàn)證,點(diǎn)擊“發(fā)送短信驗(yàn)證碼”時提示“請輸入驗(yàn)證碼”,如左3,這種方式大型網(wǎng)站很少見了。
3.2.3.3 安全碼界面樣式
有非彈窗和彈窗兩種,非彈窗安全碼樣式如下:
彈窗類安全碼,看圖選圖/選字、滑動、旋轉(zhuǎn)安全碼這三種類型均有,觸發(fā)條件為點(diǎn)擊“發(fā)送短信驗(yàn)證碼”或者如下圖。
3.2.4 用戶協(xié)議
用戶協(xié)議出現(xiàn)在注冊界面的情況居多,早期一般是默認(rèn)被選中狀態(tài)或是點(diǎn)擊注冊即視為同意協(xié)議條款。
但是支付寶新聞事件提醒我們,用戶協(xié)議最好是需要用戶自己去點(diǎn)擊確認(rèn),現(xiàn)在很多應(yīng)用也開始這樣做,如下右圖,未勾選協(xié)議前,下一步按鈕不可點(diǎn)。
3.2.5 密碼眼睛開合
出于使用場景考慮,比如:用戶在注冊時身邊有人,為了保護(hù)用戶的密碼隱私,可以在輸入密碼時關(guān)閉眼睛icon。開啟眼睛是為了讓用戶清楚的看見自己密碼,避免密碼輸入錯誤。
3.2.6 一鍵刪除賬戶名/密碼
這個功能是給用戶在注冊登錄頁面輸入有誤或是切換賬戶時使用,可以有效減少用戶點(diǎn)擊次數(shù),提升用戶體驗(yàn)。
3.2.7 保留賬戶名數(shù)據(jù)
如果用戶曾登錄過,可以保留用戶的賬戶名數(shù)據(jù),這樣用戶重新登錄時只需輸入密碼或者驗(yàn)證碼即可。當(dāng)然,用戶如果想重新輸入賬戶名,一鍵刪除數(shù)據(jù)的功能就顯得很有必要,例如:QQ郵箱登錄。
3.2.8 多賬戶之間的登錄切換
在登錄時可以選擇多個賬號,這個功能在to C端應(yīng)用比較少,一般是to B類應(yīng)用可能會用到,因?yàn)槠髽I(yè)可能會擁有多個賬號,這個功能就顯得很重要。
3.2.9 去除雞肋操作
注冊登錄過程中,一些雞肋的操作會影響用戶體驗(yàn),從而導(dǎo)致用戶流失,比方說密碼重復(fù)輸入,完善個人資料等。這些操作可以放在個人中心或是設(shè)置中讓用戶自行填寫,在注冊登錄頁面只保留必填的內(nèi)容。
圖片來自網(wǎng)絡(luò)或截圖,僅供學(xué)習(xí)交流。
本文由 @windy 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Pexels,基于 CC0 協(xié)議
收藏了
寫的不錯,挺全面的,詳細(xì)。
謝謝
流程圖有問題
哪一個??
1
22
11