B端產品日記——注冊、登錄功能設計

8 評論 26031 瀏覽 197 收藏 14 分鐘

編輯導語:如今,很多企業在B端設計中投入較多,B端的產品以及需求在近幾年也變大;對于B端產品的設計,更注重功能以及用戶的使用感,所以在設計方面也會更注重功能的設計;本文作者分享了關于B端產品日記的注冊登錄功能設計,我們一起來看一下。

To B 平臺往往針對企業或者公司內部員工,由于用戶量不大,對注冊登錄功能也就不太重視。

但是隨著平臺用戶量增長以及對安全性易用性要求的提高,注冊與登錄也是B端功能設計中重要的一環。

01 注冊

常見的注冊方式分兩種:郵箱注冊與手機號碼注冊,內測或眾測階段還會在注冊時候提示輸入激活碼(邀請碼).

存在同時利用郵箱與手機號進行注冊的情況。對于用戶名,目前除去一些舊平臺之外,極少的平臺會在用戶注冊時候,提示用戶輸入用戶名。

一些擁有手機端以及自己移動平臺的pc端,會使用二維碼掃碼登錄的方式進行登錄,而注冊操作通常在手機端已經完成,或者相反;對于第三方登錄與注冊,在邏輯上我們理解為注冊后綁定的第三方賬號,達到快速登錄的目的,注冊本質上沒有發生變化。

1. 郵箱注冊/登錄

郵箱注冊流程圖:

最常見的PC端注冊方法,至今國外的網站也是郵箱注冊居多本文描述了下面兩種普遍存在的郵箱注冊流程,區別在于驗證的節點:

進入郵箱激活即表示,激活郵件,激活郵件常用的有兩種:鏈接和數字驗證碼兩種,如下圖:

toast提示:

注冊成功后流程:

2. 手機注冊

目前大部分APP都采用手機號為主要注冊登錄的方案,主要是因為手機號本身的特性,手機號具有高滲透率、唯一性、真實性(實名認證)、可聯絡性,手機號不僅可以確認用戶身份,還可以在必要時聯系用戶、通過通訊錄導入社交關系等。國內大多數PC網站,目前大部分也都是在使用手機號碼注冊。

手機號注冊的設計表現形式有兩種,分步注冊與非分步注冊。

數據顯示,分步注冊的每一步的用戶操作復雜度低,提高用戶專注程度,減少錯誤率以及提高流程流暢度,但是也不排除部分網站需要用戶提供大量的注冊信息,這樣分步注冊會顯得繁雜冗余。

所以分步注冊最好控制在3步以內,否則用戶會感覺操作復雜。

注冊分類思維導圖如下,測試了花瓣、ui中國、站酷、bilibili、人人都是產品經理、京東、天貓等web網站發現前三種注冊方式都有,關于設置登錄名/昵稱、支付方式的注冊輸入項這里暫不提及。

手機注冊流程圖:

忽略“下一步顯示”或“觸發顯示”這些交互,“分步”和“非分步-全部顯示”流程相同,全部顯示中沒有驗證安全碼而點擊”獲取短信驗證碼”會報錯,“非分步-全部顯示”同“分步”:

?toast提示:

toast提示應該簡單明了,一般用于錯誤發生時。

比如:輸入信息不完全、輸入錯誤(登錄)、輸入不合法(注冊)、已注冊/未注冊(手機號)等,注冊操作中,最好能實時提醒,不要等到用戶輸入所有信息后,再提示錯誤。

提示明細如下:

02 登錄

目前主流的登錄方式是短信登錄和第三方授權登錄,手機端和web端都有其特有登錄方式,手機端中的一鍵快速登錄、手勢密碼、指紋登錄,web端的二維碼登錄。

toast提示:

登錄操作有很多應用會在點擊登錄button時才提示錯誤信息,當然個別諸如安全碼類的提示會第一時間反饋。下表中整理的提示信息登錄方式為密碼登錄、短信登錄。

切換登錄界面:

在測試中,發現有的平臺同時為用戶提供了兩種登錄界面:獨立界面和彈窗;獨立界面跳轉方式有兩種,本頁打開方式、新開窗口。

  • 只提供一種:參考站酷,跳轉登錄注冊界面使用在本頁打開方式,登錄成功后自動跳轉到登錄操作前所瀏覽的界面。
  • 提供兩種:視頻播放類平臺bilibili,在首頁觸發登錄時新開窗口打開獨立界面,在播放界面觸發登錄時打開彈

03 交互要點

1. 表單交互要點

注冊登錄過程中涉及的要素通常是五種,分別是手機號、郵箱、安全碼、短信驗證碼、密碼,這些要素都有其作用和優化方案。掌握并運用得當,會大大的節省用戶操作時間,提高賬戶的安全性和用戶體驗。

2. 其它交互要點或概念剖析

輸入框提示:

輸入框提示語是必不可少的,措辭要簡潔,現在普遍做法是輸入框中提示,獲取焦點時提示消失,如果輸入項少,這種做法是可取的。

當然最好是在輸入的過程中保留提示,如下圖3種方式。后兩種比較炫,每行輸入后,提示會上移顯示,其開發難度也會稍大。

簡單標注補充說明:大多數用戶是產品小白,*表示必填項只有高段位用戶才理解。

因此,在設計表單界面過程中,選填項、必填項最好用文字標注。簡短的操作說明也建議使用文字表述,圖標隱藏說明文字雖然視覺效果好,但一定程度消耗了用戶體驗。

一方面,圖標類提示得點擊圖標后才顯示,增加了用戶操作步驟;另一方面,圖標也容易被用戶忽略。

短信驗證碼:

系統下發的短信一般會設定有效期,有效期設定在5-10分鐘為宜,短信碼獲取間隔為1分鐘,短信碼若有必要,可設定一天下發次數驗證,或者在有效期內用戶多次點擊時下發相同驗證碼。

這樣不僅可以節省成本(下發短信需要付費),也不會因為同時受到多條短信而分不清。

安全碼:

驗證碼目前主要有四種:滑動驗證、按圖片提示選字、圖形驗證碼、旋轉圖片;目的是為了確認是人為注冊,防止軟件惡意注冊。圖片碼支持隨時刷新切換,不做次數限制。

驗證順序說明:

發送短信驗證碼之前用安全碼驗證,通常有以下3種順序:

  1. 先隱藏,點擊“發送短信驗證碼”時顯示并驗證,驗證成功后,提示發送短信成功,或點擊“發送驗證碼”獲取短信,此種安全碼多以彈窗顯示。如:左1—滑動驗證(上)、左2-按提示選字或圖片;
  2. 先顯示并隱藏短信驗證碼行,驗證通過后顯示“短信驗證碼”輸入欄,如:左1—滑動驗證(下);
  3. 顯示并驗證,若未驗證,點擊“發送短信驗證碼”時提示“請輸入驗證碼”,如左3,這種方式大型網站很少見了。

安全碼界面樣式:

彈窗類安全碼,看圖選圖/選字、滑動、旋轉安全碼這三種類型均有,觸發條件為點擊“發送短信驗證碼”或者如下圖。

用戶協議:

用戶協議出現在注冊界面的情況居多,早期一般是默認被選中狀態或是點擊注冊即視為同意協議條款。

但是支付寶新聞事件提醒我們,用戶協議最好是需要用戶自己去點擊確認,現在很多應用也開始這樣做,如下右圖,未勾選協議前,下一步按鈕不可點。

密碼眼睛開合:

出于使用場景考慮,比如:用戶在注冊時身邊有人,為了保護用戶的密碼隱私,可以在輸入密碼時關閉眼睛icon。開啟眼睛是為了讓用戶清楚的看見自己密碼,避免密碼輸入錯誤。

一鍵刪除賬戶名/密碼:

這個功能是給用戶在注冊登錄頁面輸入有誤或是切換賬戶時使用,可以有效減少用戶點擊次數,提升用戶體驗。

保留賬戶名數據:

如果用戶曾登錄過,可以保留用戶的賬戶名數據,這樣用戶重新登錄時只需輸入密碼或者驗證碼即可。當然,用戶如果想重新輸入賬戶名,一鍵刪除數據的功能就顯得很有必要,例如:QQ郵箱登錄。

多賬戶之間的登錄切換:

在登錄時可以選擇多個賬號,這個功能在to C端應用比較少,一般是to B類應用可能會用到,因為企業可能會擁有多個賬號,這個功能就顯得很重要。

去除雞肋操作:

注冊登錄過程中,一些雞肋的操作會影響用戶體驗,從而導致用戶流失,比方說密碼重復輸入,完善個人資料等。這些操作可以放在個人中心或是設置中讓用戶自行填寫,在注冊登錄頁面只保留必填的內容。

 

本文由 @蘇木 翻譯發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. B端的登錄注冊可不是這樣去抄C端競品的

    來自重慶 回復
    1. 這篇文章的本意是拋磚引玉,閣下有高見可以直抒胸臆!

      來自廣東 回復
  2. 都涉密了,還拿出來說?你這個悖論啊。B端哪有給你照搬流程的?同一個行業,處理相同業務,不同公司都會有自己模式。

    回復
  3. 記得昨天也看到一篇B端登陸注冊設計的,果然B端、G端也就只能翻來覆去講這些不涉密的流程了

    來自福建 回復
    1. 有什么是涉密的,本來就是很成熟的流程了

      來自廣東 回復
    2. 你沒看懂我說的

      來自福建 回復
    3. 他意思是,只有登錄注冊這類不涉密的流程,大家寫得多,其他的功能流程幾乎都比較少

      來自廣東 回復
    4. 感覺不是涉密的問題 而是B端基本上都為企業量身定做的,通用化程度不高

      來自廣東 回復