如何讓登錄體驗更佳:10個頁面設(shè)計技巧和例子

3 評論 6090 瀏覽 34 收藏 11 分鐘

登錄頁面設(shè)計是網(wǎng)站用戶體驗流程的關(guān)鍵部分。好的設(shè)計有助于推動訪問者訪問你的網(wǎng)站,并把新用戶進行轉(zhuǎn)化。它也給返回用戶一個簡單的方式登錄到您的網(wǎng)站。

以下案例中我們將提供:當你設(shè)計你的登錄界面的時候,你應(yīng)該做什么和不應(yīng)該做什么。不是所有的提示和例子都適用于你的產(chǎn)品。關(guān)鍵是選擇最適合你的。

技巧1:更明顯

你不應(yīng)該讓你的用戶到處尋找登錄區(qū)域。他們找的時間越長,就會越沮喪。他們越沮喪,最終登錄的可能性就越小。

一個很好的例子就是Gmail的登錄頁面。

你可以確切地知道你需要在何處登錄,以及要在輸入?yún)^(qū)域輸入什么內(nèi)容,上面的例子,如果你沒有Gmail帳戶,它允許你通過單擊“創(chuàng)建帳戶”來輕松地創(chuàng)建一個帳戶。

好的用戶體驗是使你的登錄區(qū)域明顯,使你的用戶盡可能容易地進行登錄操作。

技巧2:使用第三方登錄

第三方登錄正迅速成為用戶登錄賬戶的方式,理由很充分。為不同的產(chǎn)品創(chuàng)建多個賬戶既耗時又令人困惑。很難記住一堆不同的密碼和用戶名。

通過允許用戶使用用戶的第三方賬戶中的信息來創(chuàng)建一個賬戶,可以解決所有關(guān)于這些問題。

讓我們來看看下面的石墨文檔和MONO登錄時的選擇方式:

甚至還有更方便的注冊登錄方式,手機短信驗證碼在注冊的同時登錄:

一些產(chǎn)品在用戶點擊第三方注冊登錄時還需要用手機號進行短信登錄,從用戶的角度看,這很明顯是一個不好的體驗,但是產(chǎn)品的角度去思考就不一樣了,產(chǎn)品為了獲取用戶更多的信息,則需要這樣來設(shè)計流程。

這種設(shè)計流程該不該用,這需要在產(chǎn)品和用戶之間進行權(quán)衡,第三方與手機短信驗證碼登錄,在提高用戶體驗的同時,可以提高用戶的效率,使界面更加直觀。

技巧3:更簡單

因為環(huán)境不同,在中國很多網(wǎng)頁端的網(wǎng)站,第三方登錄很高效的產(chǎn)品很少。

例如,如果你的QQ沒有在電腦端登錄,因為即使選擇第三方QQ登錄,你也要拿出手機—打開QQ—打開掃一掃,進行掃碼登錄等一些列的操作。

又或者,當你想要登錄behance,只要瀏覽器有記錄之前的第三登錄,點擊第三方登錄即可直接進入該網(wǎng)站,甚至不用注冊。

可以看下面的騰訊網(wǎng)與behance的網(wǎng)頁登錄:

好的登錄體驗應(yīng)該只有賬號、密碼兩個輸入字段,或者手機號碼、短信驗證碼兩個字段,以及使用第三方登錄的選項。在簡單、高效的同時,并為用戶提供了很好的體驗。

技巧4:區(qū)分注冊與登錄

如果一個用戶來到你的網(wǎng)站進行注冊,或者想他們返回登錄界面,這就需要讓用戶清楚的知道他在何處,下一步應(yīng)該去哪里。

我們通過使用登錄字段與注冊字段的區(qū)別來幫助他們,讓我們看看下面的dribbble注冊界面:

創(chuàng)建賬戶的按鈕已dribbble的主題能很快突出在用戶面前。新用戶可以直接在頁面上注冊,而返回的用戶可以使用最上面右上角的登錄兩字??吹缴厦妗皊ign in ”字段了嗎?

dribbble使用了不同的顏色、布局去區(qū)分注冊按鈕與登錄的入口,這樣更加清晰明了。

同時可以看看dribbble的主頁面,他們會把sign in 與 sign up 的進行區(qū)分,在 sign up 加上微邊框,讓用戶能更快區(qū)分兩者的不同。

技巧5:跳過用戶名

讓用戶用他們的用戶名來進行登錄真的不是一和很明智的做法,為用戶省去記錄你產(chǎn)品的用戶名的麻煩,應(yīng)該讓他們使用他們的電子郵件地址或電話號碼注冊來進行代替用戶名。

ins讓用戶有機會用他們的電話號碼或電子郵件地址登錄。

反例:

盡可能讓用戶同時用手機號碼或郵件地址來登錄,因為用戶可能會忘記他們用來登錄你的產(chǎn)品的電子郵件地址,所以這時,用戶能使用手機號碼進行登錄。

技巧6:密碼可顯示

給用戶提供可顯示密碼的按鈕,減少用戶輸錯密碼的操作,當輸錯的同時,可進行對錯的字段進行糾正,不用全部刪掉重新來。

讓我們來下面的脈脈和片刻:

技巧7:記住用戶信息

還有什么比再次到你之前登錄的網(wǎng)站或app,卻發(fā)現(xiàn)你需要再次輸入賬戶密碼登錄更令人沮喪的事情嗎?

當你的用戶返回到你的網(wǎng)站時,請確保他們已經(jīng)登錄了,或者為了方便登錄,提前為他們預(yù)先填充賬戶和密碼等字段。

谷歌在這方面做得很棒。每當用戶需要重新登錄到Y(jié)ouTube、Gmail、或任何其他谷歌品牌時,他們的登錄信息都會被記住,使登錄過程更加簡單。

盟友銀行允許用戶勾選 “保存用戶名” 復(fù)選框,允許網(wǎng)站在用戶到達網(wǎng)站時默認記住用戶名。這是記住用戶信息的另一個好方法,展示形式可以多樣化,可根據(jù)自己產(chǎn)品與用戶需求來進行把控。

技巧8:輕松恢復(fù)密碼

有時你的用戶會忘記他們的登錄信息。當這種情況發(fā)生時,盡量讓恢復(fù)過程盡可能的輕松。

公眾號的賬戶密碼輸入欄有記住密碼復(fù)選框,以防用戶忘記他們的用戶名和密碼,不用每次進來都輸入賬戶密碼進行登錄。

印象筆記對他們的密碼做了一些巧妙的處理,讓用戶知道他們多久以前更改了密碼。

這個小小的提示可以喚起用戶的記憶,幫助他們記起密碼。

如果用戶忘記了他們的登錄信息,要讓他們清楚應(yīng)該去哪里。如果你將使令人沮喪的情況變得不那么令人沮喪,你的用戶將因此會喜歡上你的產(chǎn)品。

技巧9:讓用戶知道大寫鎖定已開啟

我們都有過這樣的經(jīng)歷:令人沮喪地輸入和重新輸入你的密碼都無濟于事,結(jié)果卻發(fā)現(xiàn)你一直開著大寫鎖定鍵。

可以通過警告你的用戶,防止這種情況發(fā)生。微軟的Edge瀏覽器還使用戶可以選擇在鍵入時打開大寫鎖定時打開通知。

技巧10:無密碼登錄

讓你的移動用戶使用無密碼登錄,現(xiàn)在很多特別是金融類app,都可以讓用戶進行指紋登錄,因為不像其他app一樣可以一直保持用戶已登錄狀態(tài),在保障安全的同時能更便捷。

以上的設(shè)計技巧與案例希望能幫助各位讀者提高產(chǎn)品的用戶體驗,更多用戶體驗文章閱讀可以關(guān)注公眾號?。?!

 

譯文地址:https://mp.weixin.qq.com/s/DZ4CUu6kK-N_lyeXjWxwKQ

編譯作者:設(shè)計探,公眾號:設(shè)計探

本文由 @設(shè)計探 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 現(xiàn)在電信和聯(lián)通(移動沒用過不清楚)都有免密登錄,通過驗證sim卡是否是本機用戶,通過就可以登錄

    來自福建 回復(fù)
    1. 移動也有,阿里云有集成了三大運營商的一鍵登錄SDK

      來自上海 回復(fù)
  2. 現(xiàn)在很多的登錄界面,的確體驗不佳。

    來自重慶 回復(fù)