設(shè)計(jì)干貨:關(guān)于登錄界面的設(shè)計(jì)觀點(diǎn)
之前在總結(jié)表單設(shè)計(jì)《設(shè)計(jì)干貨:3類表單設(shè)計(jì)指南》的時(shí)候已經(jīng)對(duì)比過(guò)登錄界面的例子,這次想更詳細(xì)地分享下自己的觀點(diǎn)。
關(guān)鍵字
路徑清晰,主次分明,專注眼前,分場(chǎng)景。
路徑清晰
登錄頁(yè)面通常包含多個(gè)入口:注冊(cè)、登錄方式A、登錄方式B、第三方賬號(hào)登錄等,我們無(wú)法準(zhǔn)確預(yù)測(cè)用戶會(huì)究竟要選擇哪一個(gè),因此,各個(gè)路徑必須一目了然。再一次以google、大眾點(diǎn)評(píng)和美團(tuán)為例:在我看來(lái)三個(gè)界面在我看來(lái)都不及格。Google較簡(jiǎn)潔(因?yàn)樗恢С值谌劫~號(hào)登錄),功能說(shuō)明和輸入?yún)^(qū)域擠在同一區(qū)域,上半部屏幕直接浪費(fèi)掉,也沒(méi)有區(qū)分清楚登錄和注冊(cè)兩個(gè)路徑;大眾點(diǎn)評(píng)和美團(tuán)雖然界面信息更多,但比起google登錄和注冊(cè)路徑區(qū)分更明確。
給我一個(gè)機(jī)會(huì),我會(huì)去掉多余的一小部分內(nèi)容(現(xiàn)在先說(shuō),請(qǐng)繼續(xù)往下看)
主次分明
貪心是全人類的通病,設(shè)計(jì)師要壓制好自己和產(chǎn)品經(jīng)理的欲望。手機(jī)號(hào)快速登錄逐漸成為主流,但某些產(chǎn)品依然不愿放棄傳統(tǒng)登錄,魚(yú)與熊掌不可兼得,取舍不夠決絕會(huì)導(dǎo)致功能主次不分。設(shè)計(jì)之前請(qǐng)選好一種主推的登錄方式,哪種是當(dāng)前最急需的?哪種是符合業(yè)務(wù)長(zhǎng)遠(yuǎn)利益的?分清優(yōu)先級(jí)的同時(shí)也要在界面上體現(xiàn)。對(duì)比大眾點(diǎn)評(píng)和美團(tuán):大眾點(diǎn)評(píng)已經(jīng)把賬密登錄方式弱化成一個(gè)二級(jí)入口,而美團(tuán)依然想保持兩種登錄方式直接切換的便利性(也許是數(shù)據(jù)上暫時(shí)沒(méi)有明顯的偏向,產(chǎn)品經(jīng)理無(wú)法拍板pa bei guo)。突出一種登錄方式,其他該弱化的弱化,該拋棄的拋棄。
專注眼前
既然做了選擇,就不要三心二意。用戶選擇了一種登錄方式后,其他的方式可以大膽放一邊去了。然而某些設(shè)計(jì)師(或PM)一直把用戶當(dāng)成是購(gòu)物中的選擇困難癥女性,“登錄方式要切換方便,萬(wàn)一用戶要更換。。。萬(wàn)一用戶選錯(cuò)怎么辦?”。也許有5%的用戶會(huì)選錯(cuò),為此就要降低剩下95%的用戶的體驗(yàn)?假如遵循好上述的兩個(gè)觀點(diǎn),所謂的萬(wàn)一會(huì)更加少。美團(tuán)在這一點(diǎn)做的比較好,調(diào)起鍵盤(pán)輸入并隱去第三方賬號(hào)登錄。
輸出
綜合上述觀點(diǎn),以下是我設(shè)計(jì)的登錄界面(交互圖,非效果圖)。默認(rèn)登錄界面僅保留登錄入口、切換登錄方式、注冊(cè)入口和第三方賬號(hào)登錄,盡可能保持路徑清晰。賬密登錄僅作為次要登錄方式弱化成跳轉(zhuǎn)入口,主次分明。調(diào)起鍵盤(pán)后(確認(rèn)登錄方式)才顯示驗(yàn)證碼、登錄按鈕等控件,同時(shí)第三方賬號(hào)登錄下滑隱去,專注當(dāng)前任務(wù)。
PS:分場(chǎng)景
最后補(bǔ)充上次在《設(shè)計(jì)干貨:3類表單設(shè)計(jì)指南》的場(chǎng)景分析:
登錄及注冊(cè)界面,其流程該是一次性展現(xiàn)還是按任線性務(wù)流一步步展現(xiàn)?線性任務(wù)流的好處是:分別對(duì)每個(gè)提交的信息檢測(cè)并反饋,用戶理解起來(lái)清晰安全,屬于“can’t go wrong” 的設(shè)計(jì),但其一步步的跳轉(zhuǎn)容易給用戶一種漫長(zhǎng)的感覺(jué)。對(duì)比之下大眾點(diǎn)評(píng)及美團(tuán)拿任務(wù)流清晰度換取了便捷性。
取舍
線性任務(wù)流和集成任務(wù)究竟如何取舍,取決設(shè)計(jì)師如何平衡清晰度和便捷性。我的理解是:登錄是留給老用戶的,用戶對(duì)應(yīng)用有一定的熟悉度,另外結(jié)合場(chǎng)景分析,無(wú)論是主動(dòng)觸發(fā)或是在購(gòu)買(mǎi)商品時(shí)被動(dòng)觸發(fā)登錄,用戶總是不耐煩的希望盡快結(jié)束此流程,因此登錄流程約簡(jiǎn)短越好,選用集成任務(wù);注冊(cè)面對(duì)的是新用戶,用戶此刻更需要的是安全感,明確的說(shuō)明和清晰的步驟比操作便捷更重要,因此選用線性任務(wù)流。
博客地址:jakd007.com
本文由 @Jakd007?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
如果用戶年齡比較大30歲以上 40歲為主的話,在電話號(hào)輸入前 ,看不到 登陸按鈕 是不是 第一感覺(jué)不知道怎么操作呢
還可以吧,還是要分產(chǎn)品,有的產(chǎn)品就不需要設(shè)置三方登錄就一種電話和密碼。
作者有想過(guò)為什么google這樣設(shè)計(jì)嗎?
個(gè)人理解
1、谷歌的受眾群比較分散,所以在文字提示上非常的清晰,以文字提示為主
2、谷歌本身有一整套的服務(wù),所以他比較強(qiáng)制的要求用戶必須使用谷歌賬號(hào)登錄,就不用考慮第三方登錄的設(shè)計(jì)了
3、整體設(shè)計(jì)排版上是延續(xù)了谷歌Material Design的設(shè)計(jì)規(guī)范
4、谷歌將賬號(hào)和密碼的輸入分開(kāi),這里采用的是“can’t go wrong”的設(shè)計(jì),用戶每一步的操作更加聚焦
第2、4點(diǎn)我是贊同的;google賬號(hào)貫穿于google服務(wù),清晰的文字介紹很有必要。然而,該界面對(duì)注冊(cè)、登錄的指引并沒(méi)有明顯指示,輸入框“輸入你的電子郵箱地址”就會(huì)讓用戶困惑:“這里究竟是注冊(cè)還是登錄?”。文中舉的3個(gè)例各有優(yōu)缺點(diǎn)。
其實(shí)主要是擔(dān)心用戶使用習(xí)慣,谷歌的賬號(hào)輸入完成之后會(huì)進(jìn)行判斷,判斷當(dāng)前賬號(hào)是否進(jìn)行了注冊(cè),如果未注冊(cè),直接輸入密碼注冊(cè)成功并且登錄成功,如果已經(jīng)注冊(cè),輸入密碼登錄成功,但是很多中國(guó)的用戶都不習(xí)慣這種方式,以前的時(shí)候都是登錄跟注冊(cè)在一起的,最近我發(fā)現(xiàn)由于手機(jī)注冊(cè)登錄成了主流,國(guó)內(nèi)對(duì)這個(gè)流程進(jìn)行了改進(jìn),會(huì)直接讓用戶輸入自己的手機(jī)號(hào),然后判斷這個(gè)手機(jī)號(hào)有沒(méi)有注冊(cè),如果沒(méi)有注冊(cè),輸入驗(yàn)證碼注冊(cè)成功,如果注冊(cè)過(guò)輸入密碼完成登錄,如果用戶人群年齡比較大的話,還可以把注冊(cè)放出來(lái)。
補(bǔ)充一點(diǎn),站在中文小白用戶的角度上考慮:費(fèi)勁弄上了個(gè)VPN好不容易打開(kāi)了,第三方登錄卻只有FB和Twitter?那我還是得重新注冊(cè)一個(gè)郵箱賬號(hào)。
個(gè)人觀點(diǎn) ,對(duì)于手機(jī)的快速登錄,其實(shí)更想知道這個(gè)背后的安全性問(wèn)題。未來(lái)的手機(jī)號(hào)可能會(huì)有銷號(hào)繼承的可能性,怎么處理后臺(tái)的歷史數(shù)據(jù)?只能靠用戶來(lái)進(jìn)行申請(qǐng)嗎?
影響不大,后臺(tái)數(shù)據(jù)不會(huì)清除這些無(wú)用的數(shù)據(jù),也就會(huì)繼承但是這種可能性太低了。