APP UI 結(jié)構(gòu):注冊&登錄
注冊登錄一直是應用中必不可少的一環(huán),用戶打開應用可能第一步就是登錄頁面,這相當于一款應用的臉面,也是用戶使用產(chǎn)品的源頭。
今天的主題是和注冊登錄相關(guān)的內(nèi)容,相對比較簡單,大家應該都很熟悉。
注冊登錄一直是應用中必不可少的一環(huán),用戶打開應用可能第一步就是登錄頁面,這相當于一款應用的臉面,也是用戶使用產(chǎn)品的源頭。當然也是因為不常被用到所以更最容易被忽視,它作為一項基礎(chǔ)功能,使用場景一般是用戶初次使用應用或者退出登錄,又或是大版本更新和登錄過期才會使用到。
注冊登錄的意義就在于給用戶獨有的個人中心,包括數(shù)據(jù)的同步,或是用戶注冊后會通過用戶已完善的資料進行相關(guān)的內(nèi)容推薦。
登錄相對而言屬于高頻次的操作,注冊、修改密碼等屬于相對低頻次的操作,但是他們都會關(guān)聯(lián)到產(chǎn)品內(nèi)的個人資料和設(shè)置模塊。幾乎所有的社交應用都是需要注冊登錄的,用戶擁有了個人賬號才能繼續(xù)使用產(chǎn)品。
當然也有一些系統(tǒng)的應用是不需要注冊登錄就可以使用的,比如:系統(tǒng)自帶的計算器、日歷、天氣等或是一些第三方的輕應用,這里就不多贅述了,下面主要還是說說需要用到注冊登錄功能的情況。
還是先來看一下整體結(jié)構(gòu):
(以下圖片來源于應用截圖,僅作為學習交流使用)
一、注冊登錄的方式
1. 只使用第三方賬號注冊登錄
這種方式比較少但是無疑是最快捷的方式,相信大家平時應該用這種方式也比較多,因為可以避免使用手機注冊帶來的繁瑣步驟,可以節(jié)約很多時間。
你在第三方應用中進行授權(quán)后產(chǎn)品會直接調(diào)用接口,生成ID登錄后,你的頭像、昵稱等個人信息甚至可能同時會獲取你的好友列表,讓你知道還有哪些好友也在使用產(chǎn)品,可以有效地減少對產(chǎn)品的陌生感,同時也便于應用在第三方中進行分享。
當然這種方式對產(chǎn)品也很有利,因為相信很多用戶在不了解產(chǎn)品的情況下,用戶可能只是想初步了解一下產(chǎn)品,但是又不想進行手機注冊那么麻煩,所以就直接使用第三方進行注冊吧,待進入應用初步使用了解后,再通過產(chǎn)品的用戶引導(比如:紅點標記或是局部引導等)功能再進行手機號/郵箱/微信/微博等賬號的綁定,這樣做對新用戶的產(chǎn)生有積極作用。
我遇到過當已經(jīng)使用了第三方應用注冊登錄了之后,會立即出現(xiàn)讓用戶綁定手機號的頁面,這樣做是想快速產(chǎn)生新用戶,出發(fā)點是好的,但是我覺得用戶在不了解產(chǎn)品的情況下,綁定手機號的可能性很低。
所以最好可以在綁定手機號頁面有“跳過”功能,給用戶選擇的余地,不要強制用戶,待初步了解產(chǎn)品后再通過引導進行綁定,這樣做最佳。
2. 只使用手機號注冊登錄
使用手機號獲取驗證碼是目前最常用的注冊登錄方式,這種方式的優(yōu)勢不必多說,相信大家都很熟悉流程,通過發(fā)送短信獲取驗證碼在60-90秒內(nèi)進行注冊登錄,這么做是為了確認用戶擁有該手機號的使用權(quán)。手機號+密碼是用戶常用的方式,而手機號+驗證碼是比較簡便的方式。
這里注意一點的是在輸入手機號后,為了讓用戶查看是否輸入正確,建議手機號顯示樣式為3-4-4模式(比如:156 5555 5555),這些都是細微之處,雖然無關(guān)大雅,但是可以看出一個產(chǎn)品的用心之處,比如:下圖可以對比一下,明顯圖二更優(yōu)。
手機號也是商家進行用戶維護的有效手段,畢竟手機都是隨身攜帶,可以在節(jié)假日發(fā)送祝?;蚴谴黉N短信,也可以在你長期未使用產(chǎn)品,進行短信提示,避免你將產(chǎn)品遺忘,但是過度的短信轟炸則會讓用戶感到反感。
另外使用手機號注冊登錄,需要做一個判斷,是否是第一次登錄,是的話就跳轉(zhuǎn)引導頁,不是的話就跳轉(zhuǎn)至首頁。
這里插一句題外話,你們有沒有遇到過在已經(jīng)注冊成功后,但是還需要重新輸入賬號密碼登錄的情況,其實這種做法個人覺得是比較多余的,可能2次輸入賬號密碼可以加強用戶的記憶。但是可能很多人用手機號注冊都是用的一個同密碼,因為現(xiàn)在的應用可選擇的余地實在是太多了,如果每個應用都使用不同的密碼可能很難記得住。
3. 使用手機號/第三方賬號注冊登錄
這種樣式是最常見的,也是上面兩種樣式的結(jié)合,這種樣式給用戶留有選擇的余地,自愿使用手機號或是第三方。但是一般這樣的組合方式多數(shù)是希望用戶使用手機號注冊,所以手機注冊登錄比較突出,第三方注冊會置于頁面底部,相對弱化。
但是還有一類是希望用戶使用第三方登錄,弱化手機號注冊登錄的情況。BAT旗下的眾多應用,會使用一個賬號或是進行賬號關(guān)聯(lián),比如:阿里旗下的應用閑魚、菜鳥裹裹等,登錄時為了用戶數(shù)據(jù)之間連接,會推薦用戶使用淘寶賬號進行登錄,從而弱化了手機號注冊登錄,這是出于產(chǎn)品屬性或是戰(zhàn)略需求考慮,無可厚非。
4. 使用郵箱注冊登錄
使用郵箱進行注冊登錄也是比較常用的方式,多數(shù)用于pc端,郵箱容易記憶,便于頻繁使用的產(chǎn)品,注冊后郵箱會收到驗證鏈接,驗證成功后會自動跳轉(zhuǎn)進入該網(wǎng)頁首頁。因為web端屏幕較大,還是和移動端有點差別,需要填寫的表單可能也會比較多,關(guān)于表單的設(shè)計可以參照我早期的文章:《進行表單設(shè)計需要注意這十點》
當然移動端也有使用郵箱注冊的,可能是國外的應用居多,比如:facebook、twitter、dribbble…或是國內(nèi)的應用同時擁有網(wǎng)頁和移動端,可以將用戶數(shù)據(jù)進行同步。
5. 先體驗后注冊登錄
這種方式也很多見,一般多為閱讀類、游戲類或是電商類產(chǎn)品,用戶多為游客狀態(tài),可能只是進來逛逛,可能暫時還沒有使用到添加、收藏、關(guān)注、評論、購買等功能,如果使用這些功能就必須要進行注冊登錄了,注意在完成注冊登錄后記得頁面要回到之前瀏覽的頁面,而不是回到首頁。
6. 短信注冊
比較少見的一種方式,通過編輯短信發(fā)送至XXX后,可獲取賬號和密碼。這種方式屬于早期的一種方式,現(xiàn)在基本用不到了,就不多說了。
二、注冊登錄頁面要點
1. 簡潔風 VS logo+輸入框
iOS 11更新帶動了新的設(shè)計趨勢,大標題+留白被廣泛使用,注冊登錄也不例外,現(xiàn)在很多產(chǎn)品都使用相對簡潔的設(shè)計(下面左圖),僅使用大標題和必要的線框和提示語,讓用戶只聚焦注冊登錄本身,去除多余的干擾元素,可以節(jié)省用戶的時間。
相對早期的設(shè)計手法是在頁面中加入logo(下面右圖),好處是可以進一步強化用戶對產(chǎn)品品牌的記憶點。兩種方式各有優(yōu)點,沒有對錯,產(chǎn)品可以酌情使用。
2. 分步驟注冊登錄
現(xiàn)在有很多應用是采用分步驟進行注冊的,比如先輸入手機號,點擊“下一步”的同時,系統(tǒng)查詢該手機號是否可以注冊,通過的話則進入輸入驗證碼頁面,這樣做的好處是可以及時反饋給用戶,避免了用戶在輸完手機號和驗證碼之后出現(xiàn)錯誤toast的情況。
需要注意的是步驟不宜過多,建議3步以內(nèi),如果你的產(chǎn)品對用戶來說不是非用不可,可能會有很多用戶會放棄注冊。
3. 注冊登錄合二為一
這種方式和分步驟注冊類似,將注冊和登錄合到一起,不管你是否有注冊,只要輸入手機號再填寫驗證碼,成功后即可使用產(chǎn)品,比如:小黃車就是使用這一方式。
4. 輸入框提示語
輸入框提示語是必不可少的,措詞需要簡潔,大部分的做法是點擊輸入框后提示語自動消失,這樣做也是可以,畢竟需要填寫的選項不是很多,用戶不易忘記。當然更好的做法是保留提示語,比如:星巴克的登錄頁面,在點擊輸入框后,提示語會上移,依舊保留,只是這樣的開發(fā)成本可能會稍大一點。
5. 忘記密碼
忘記密碼的功能一般都是放在登錄頁面,因為兩者有較強的關(guān)聯(lián)性。使用忘記密碼功能一般是通過手機號發(fā)送驗證碼,驗證通過后再進行新密碼的設(shè)置。如果起初是用郵箱注冊登錄的話,就要到郵箱中進行驗證,驗證通過后再進行新密碼的設(shè)置。
6. toast提示
這里的toast提示一般用于有錯誤發(fā)生的情況下,比如:賬號不存在、賬號已被占用、密碼錯誤、驗證碼錯誤等,及時的反饋給用戶注冊登錄不成功的地方在哪里,以免用戶摸不著頭腦,憤而離開應用。
三、其他要點
1. 安全碼
出于安全考慮,有些應用會讓用戶輸入圖形驗證碼、字符驗證碼、旋轉(zhuǎn)圖片、滑動驗證等方式,目的是確認是人為注冊而非軟件惡意注冊。
2. 用戶協(xié)議
用戶協(xié)議看似非常的不起眼,用戶也很少會去點擊查看,出現(xiàn)在注冊頁面的情況居多。早期一般是默認被選中狀態(tài)或是點擊注冊即視為同意協(xié)議條款(圖一),用戶填完賬戶密碼之后點擊注冊就完成了。
但是前去年支付寶默認用戶協(xié)議被選中導致的一系列新聞提醒我們,用戶協(xié)議最好需要用戶自己去點擊確認,現(xiàn)在很多應用也開始這么做,在沒有勾選用戶協(xié)議之前,“注冊”button是無法點擊的(圖二)。
3. 密碼眼睛開合
出于使用場景考慮,比如:在戶外或是注冊登錄時身邊有人,為了有效保護用戶的密碼隱私,可在輸入密碼時關(guān)閉眼睛icon,只顯示密碼點。開啟眼睛icon時是為了讓用戶清楚的看見自己的密碼,避免密碼輸入錯誤。
4. 一鍵刪除賬戶名/密碼
這個功能是給用戶在注冊登錄頁面輸入有誤或是切換賬戶時使用,可以有效減少用戶的點擊次數(shù),提升用戶體驗。
5. 保留賬戶名數(shù)據(jù)
在用戶曾登錄過的情況下,應該保留用戶的賬戶名數(shù)據(jù),這樣用戶重新登錄時只需填寫密碼或驗證碼即可。當然,用戶如果想重新輸入賬戶名,一鍵刪除數(shù)據(jù)的功能也顯得很有必要。
還有一點是多賬戶之間的登錄切換,在登錄時可以選擇多個賬號,這個功能在to C類應用比較少,一般是to B類應用可能會用到,因為企業(yè)可能會擁有多個賬號,這個功能就會顯得很有必要。
6. 賬號后綴關(guān)聯(lián)
這種針對使用郵箱注冊,比如說在用戶填寫賬戶名輸入@的同時,關(guān)聯(lián)出@qq.com、@163.com等,可以減少用戶的輸入,體驗也會更好。
7. 去除雞肋操作
在注冊登錄時也會有一些比較多余的操作,比如:二次確認密碼、完善個人資料等,這些操作最好是放置在個人中心或是設(shè)置里讓用戶自行填寫,在注冊登錄頁面只保留必須填寫的內(nèi)容。
總結(jié)
綜上所述,注冊登錄看似是很簡單的頁面布局,并且容易忽視,但是它的地位是不可忽視的,其中的交互方式和細微之處還需要我們多多考慮,不同的產(chǎn)品需要根據(jù)自己的屬性來選擇符合自己的方式。
如有遺漏,歡迎大家留言補充,一起交流~
作者:EasonZhang,公眾號:Eason張UED(ID:EasonZhangUED)
本文由 @EasonZhang 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
二次確認密碼屬于雞肋操作么
目前來看是比較雞肋的,輸錯密碼的場景太少,而且密碼錯誤可以使用驗證碼糾正
寫的很全面,希望作者多分享給大家,謝謝。
很好的文章,受教了
話說為什么輸入錯密碼都是提示,賬號或者密碼錯誤? 而不是密碼錯誤?
一是可以提醒用戶都查詢一遍,二是可以防止用戶進行猜測錄入。
當然現(xiàn)在也有采用 賬號不存在等提示
一定不要把火熱的交互設(shè)計,言過其神,應用就是解決問題,挖掘最深就是業(yè)務(wù)層面了,科幻電影里的顯示屏,仔細分析一下就會發(fā)現(xiàn),并不好用,常規(guī)中的微創(chuàng)新就很不錯!總之所有互聯(lián)網(wǎng)核心就是解決問題!交互不是第一位甚至不是第三位