2023年7條準(zhǔn)則提升用戶登錄成功率

條準(zhǔn)則，提升用戶登錄成功率！登錄頁(yè)面的設(shè)計(jì)或許看起來(lái)很簡(jiǎn)潔。我在2022年花了相當(dāng)多的時(shí)間為一家社交媒體巨頭設(shè)計(jì)登錄和注冊(cè)流程，并從中了解到：海量的思索和測(cè)試才能確保用戶勝利和輕松的登錄。

以下是我總結(jié)出來(lái)的重要閱歷。

什么是登錄？

登錄是進(jìn)入一個(gè)應(yīng)用程序、網(wǎng)站或服務(wù)的入口。關(guān)心用戶建立他們的賬戶。

一個(gè)登錄流程通常包括一個(gè)主要的登錄頁(yè)和一個(gè)相當(dāng)簡(jiǎn)單的重置流程，其中包括遺忘密碼、重置密碼和其他登錄方法。登錄的首要目標(biāo)是確保用戶勝利登錄到他們的賬戶。什么是登錄目標(biāo)？

讓我們花點(diǎn)時(shí)間來(lái)定義一下“登錄目標(biāo)”這個(gè)術(shù)語(yǔ)，這是在做設(shè)計(jì)決策時(shí)的關(guān)鍵。

登錄目標(biāo)是指用戶進(jìn)入登錄流程的意愿。以有聲思維來(lái)表達(dá)，它可以是我想登錄、我想檢查我的電子郵件、帶我去那里，等等。

當(dāng)用戶進(jìn)入到登錄頁(yè)時(shí)，他們可能沒(méi)有登錄意愿?？赡軙?huì)產(chǎn)生“嗯，我不在乎，以后再做”或“這太麻煩了”或“呀，我現(xiàn)在該怎么辦？”的想法。遺忘密碼、半路遇到困難或切換到另一個(gè)頁(yè)面/設(shè)備，都可能是缺乏登陸意愿的跡象。?

保留或增加登錄流程中的登陸意愿是很好的目標(biāo)，下面的準(zhǔn)則都是為這個(gè)目標(biāo)量身定做的。

Pinterest有一個(gè)傳統(tǒng)的、居中的掩蓋式登錄頁(yè)。

它有一個(gè)亮紅色的主要登錄按鈕，并供應(yīng)Google和Facebook作為額外的社交登錄選項(xiàng)。

滑到最終——有我對(duì)網(wǎng)絡(luò)上流行的勝利登錄閱歷的總結(jié)。這就把我們帶到了下一個(gè)問(wèn)題——?jiǎng)?chuàng)新的界限在哪里？

登錄是一個(gè)品牌展現(xiàn)的絕佳機(jī)會(huì)點(diǎn)。在視覺(jué)上，它可能使用品牌色、品牌照片、品牌插圖，甚至是營(yíng)銷(xiāo)信息。和大多數(shù)設(shè)計(jì)問(wèn)題一樣，登錄頁(yè)品牌展現(xiàn)的關(guān)鍵在于平衡。

登錄操作應(yīng)當(dāng)始終占據(jù)中心位置。頁(yè)面上的其他元素必需謹(jǐn)慎規(guī)劃好，不應(yīng)當(dāng)奪走登陸操作的留意力。一條優(yōu)秀的閱歷之談：用戶在登錄頁(yè)面上花費(fèi)的時(shí)間越少越好。關(guān)心他們連續(xù)前進(jìn)，盡快發(fā)覺(jué)產(chǎn)品中的優(yōu)點(diǎn)和價(jià)值。

Facebook在頁(yè)面中保持用戶信息在右側(cè)，并將恢復(fù)流程分解為多個(gè)步驟。

亞馬遜把它的恢復(fù)流程分解成多個(gè)步驟。

它將次要的恢復(fù)選項(xiàng)設(shè)置為我需要更多關(guān)心的可擴(kuò)展部分，這有助于保持留意力集中在主要操作。

保持留意力集中在主要操作的技巧：

登錄框可以布局在一個(gè)主頁(yè)、疊加頁(yè)，或一個(gè)獨(dú)立頁(yè)面。使用卡片式布局。將操作分為主要和次要操作。使用一個(gè)大而醒目的登錄按鈕。盡量削減次要操作的數(shù)量——避開(kāi)消失任何與核心登錄操作無(wú)關(guān)的內(nèi)容。

錯(cuò)誤信息包含有用的提示/示意，指明你在失敗時(shí)可以做什么

當(dāng)你密碼登陸失敗，但你有一個(gè)GmailID時(shí)，F(xiàn)acebook會(huì)增加一個(gè)用Google賬號(hào)登錄的功能

指導(dǎo)用戶恢復(fù)的技巧：

鼓舞用戶嘗試合適的替代方案。在用戶失敗后，支配替代的登錄方案，同時(shí)將用戶導(dǎo)航至一個(gè)獨(dú)立的頁(yè)面。在文本中展現(xiàn)出最有用的登錄方案，并在消失錯(cuò)誤時(shí)對(duì)用戶做出樂(lè)觀響應(yīng)！

在此供應(yīng)Medium登錄頁(yè)的案例——雖然清楚且設(shè)計(jì)良好，但它的確有太多的登錄方法。不得不回訪Medium的設(shè)計(jì)者，假如這個(gè)設(shè)計(jì)對(duì)他們來(lái)說(shuō)是好的！

無(wú)密碼登錄正火速流行起來(lái)。特殊對(duì)于只有移動(dòng)端的應(yīng)用程序來(lái)說(shuō)，基于電話號(hào)碼的認(rèn)證已常態(tài)化。指紋和FaceID在很多地方消失，使認(rèn)證流程變得快速、平安。為平臺(tái)找到最適合（且可開(kāi)發(fā)）的方法，并將其作為主要登錄選項(xiàng)。

Google（谷歌）打破了標(biāo)識(shí)優(yōu)先的格式——改成了分步式登錄模式，在不同的步驟中輸入電子郵件和密碼。這種模式對(duì)于Google有平安優(yōu)勢(shì)，也可以使他們?cè)诮酉聛?lái)的步驟中為用戶供應(yīng)共性化的選擇。頁(yè)面也是最小的、全白的、聚焦的。

Uber的登錄頁(yè)是簡(jiǎn)潔且聚焦的，允許用戶輸入他們的電話號(hào)碼并進(jìn)入下一步。

Facebook有幾個(gè)登錄方案，他們用這些方案進(jìn)行試驗(yàn)和A/B測(cè)試——這是一個(gè)右對(duì)齊的登錄框案例，它很好地突出了重點(diǎn)。左側(cè)的空間被用來(lái)打造樂(lè)觀的品牌形象——總體來(lái)說(shuō)是勝利的登錄體驗(yàn)。

Pinterest做了一個(gè)簡(jiǎn)潔居中的疊加表單，有碩大的輸入框——不斷吸引用戶！還有一個(gè)亮紅色的登錄主按鈕，以及一些額外的社交登錄選項(xiàng)。

盡管Airbnb（愛(ài)彼迎）在許多方面都做得很好，但它的登錄頁(yè)讓人感到操作繁多——這或許是由于基于手機(jī)號(hào)碼登錄，或許是由于大量的次要登錄選項(xiàng)，導(dǎo)致相當(dāng)多的認(rèn)知負(fù)荷！

LinkedIn（領(lǐng)英）很好地保持登錄框的簡(jiǎn)介、聚焦和居中，有一個(gè)醒目的主登錄按鈕。

我對(duì)Dropbox的登錄頁(yè)面持遲疑態(tài)度——插圖很好看，但它的顏色與界面按鈕的顏色相像——這是附加元素分散留意力的案例。就我個(gè)人而言，我喜愛(ài)在界面中大膽使用插圖——但評(píng)估插圖的使用環(huán)境也很重要。

Amazon（亞馬遜）的登陸頁(yè)視覺(jué)設(shè)計(jì)上有些老舊，但對(duì)于管理用戶留意力是一個(gè)很好的案例——巨大的黃色“連續(xù)”按鈕以及頁(yè)面上沒(méi)有任何干擾，使登錄任務(wù)看起來(lái)簡(jiǎn)潔快速。

在登錄頁(yè)面上放置廣告可能不是一個(gè)好辦法——但同時(shí)Yahoo（雅虎）有一個(gè)與眾不同的標(biāo)識(shí)在登錄框中，其中設(shè)計(jì)了一些奇妙的功能，關(guān)心用戶削減輸入。(參考下圖)

我想把Figma納入優(yōu)秀的登錄案例中——該頁(yè)居中于浮層，Google登錄被突出展現(xiàn)（或許是Figma的首選和推廣的登錄形式？），它特別簡(jiǎn)潔，幾乎是線框式的。用戶體驗(yàn)特別好。

感謝我的產(chǎn)品合作伙伴Apurva和我一起學(xué)習(xí)。實(shí)行微小的