操不完的心!在設(shè)計(jì)注冊(cè)/登錄界面時(shí)要注意的常見問題

2016-1-20    周周

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

designing-login-registration-pages-1

如何為網(wǎng)站設(shè)計(jì)用戶登錄流程是一個(gè)老生常談的話題。隨著時(shí)代的發(fā)展,新用戶注冊(cè)、登錄到真正加入一個(gè)網(wǎng)站的過程一直在變化,從簡(jiǎn)單的信息填寫發(fā)展到全面的注冊(cè)方式,再從系統(tǒng)的注冊(cè)回歸簡(jiǎn)約直觀的登錄體驗(yàn),新用戶的登錄流程經(jīng)歷了一個(gè)迂回的變遷過程。現(xiàn)如今,絕大多數(shù)的網(wǎng)站已經(jīng)放棄了復(fù)雜、繁復(fù)的注冊(cè)流程,將用戶可能會(huì)遭遇障礙、引起用戶反感和煩躁的部分去除,盡可能簡(jiǎn)單的讓用戶完成注冊(cè)和登錄流程。

當(dāng)用戶完成注冊(cè)之后,可以選擇性地提供額外的信息,而這些信息可能會(huì)給給用戶帶來更加定制化的用戶體驗(yàn)。為了安全起見,絕大多數(shù)的網(wǎng)站還是提供了郵箱驗(yàn)證甚至電話驗(yàn)證的環(huán)節(jié),甚至提供備用安全郵箱的驗(yàn)證機(jī)制。

onboarding-700x399

總而言之,在今天我們來審視網(wǎng)站的新用戶注冊(cè)登錄流程,這是一套系統(tǒng)、完善且具備完整約定俗成規(guī)則的設(shè)計(jì)環(huán)節(jié)。

登錄與注冊(cè)

隨著注冊(cè)流程的優(yōu)化和簡(jiǎn)化,登錄界面和注冊(cè)界面現(xiàn)在很容易被混淆。造成這種混淆的原因不止是簡(jiǎn)化。首先許多網(wǎng)站會(huì)選擇將登錄和注冊(cè)界面設(shè)計(jì)地非常相似,甚至將其直接容納到同一個(gè)界面當(dāng)中去。許多用戶不經(jīng)意間在一個(gè)網(wǎng)站注冊(cè)過好幾個(gè)帳號(hào)的事情,并不鮮見。

evernote_login_signin-700x480

問題不僅僅存在于流程上。在中文中,“登錄”和“注冊(cè)”兩個(gè)詞在視覺上有很明顯的差異,但是英文中,“Sign Up”和“Sign In”也是很容易引起混淆的。

所以,為了讓用戶不再有不必要的混淆,最好是設(shè)計(jì)不同的界面,并進(jìn)行差異化的視覺和內(nèi)容的設(shè)計(jì),確保用戶不會(huì)誤判。在這里說說反例,AxureShare 的登錄/注冊(cè)界面就非常典型地勾勒出簡(jiǎn)化后的重復(fù)布局是具有何等的迷惑性。

郵箱地址和用戶名

在注冊(cè)環(huán)節(jié),還有一個(gè)特別值得注意的問題就是用戶名和注冊(cè)郵箱的問題。當(dāng)用戶注冊(cè)時(shí)候,最好不要讓用戶去創(chuàng)建獨(dú)特的用戶名,并且以此用作登錄服務(wù)的唯一憑證。絕大多數(shù)的用戶會(huì)有至少2個(gè)郵箱——一個(gè)用作工作,一個(gè)用作私人用(在中國許多人可能只有一個(gè)郵箱,QQ郵箱……)。所以,最好的方式是讓用戶使用郵箱登錄,注冊(cè)用戶可以在登錄之后修改信息,增加輔助郵箱,可以添加用戶名。

stripe_payments

另外,在移動(dòng)端發(fā)展迅猛的今天,讓用戶使用手機(jī)號(hào)登錄也是非常不錯(cuò)的方案。首先手機(jī)號(hào)具有獨(dú)特性,作為登錄帳號(hào)擁有便捷性和易于記憶的特征,作為常用的帳號(hào)存在,更易于用戶使用。

值得一提的是,手機(jī)號(hào)還符合目前流行的兩步驗(yàn)證安全機(jī)制,系統(tǒng)可以更加便捷地為用戶發(fā)送驗(yàn)證碼。

展現(xiàn)流程

進(jìn)度條是用戶界面中最重要的存在之一,它為用戶呈現(xiàn)進(jìn)度,設(shè)定目標(biāo),并將信息反饋給用戶。進(jìn)度條讓用戶可以清晰地了解他已經(jīng)完成多少,還有多少有待完成。也正是有了進(jìn)度條,復(fù)雜的加入環(huán)節(jié)才得以分割、簡(jiǎn)化,并且顯得更加清晰。

progressBar-large-700x350

LinkedIn 在這方面做的相當(dāng)突出,它將用戶信息的完成度完全量化,激勵(lì)用戶不斷添加內(nèi)容完善個(gè)人信息。

linkedin_progress

動(dòng)效

動(dòng)效是目前最常用也最實(shí)用的元素之一。使用動(dòng)效來告訴用戶如何填寫表單,將動(dòng)效和行為召喚按鈕等設(shè)計(jì)結(jié)合到一起,可以讓用戶明白下一步的操作流程。

readmeio_login-1-700x376readmeio_register-1-700x376

在 Readme.io 這個(gè)網(wǎng)站中,貓頭鷹會(huì)隨著操作而變化,當(dāng)用戶輸入密碼的時(shí)候,會(huì)非??蓯鄣厣w住自己的眼睛。動(dòng)效和動(dòng)畫的加入讓頁面無形中加入了更多的互動(dòng),顯得更加引人入勝了。同樣的,Shopify 在注冊(cè)界面中,會(huì)用彈出的標(biāo)簽動(dòng)效來幫助用戶了解下一個(gè)操作步驟。

第三方登錄

雖然并不是每個(gè)用戶都會(huì)使用第三方的帳號(hào)(微博、微信、Facebook、Twitter、LinkedIn等)來注冊(cè)/登錄網(wǎng)站服務(wù),但是預(yù)留第三方帳號(hào)登錄的選項(xiàng)是很有必要——這樣的登錄方式更加便捷。

顯示密碼

越來越多的網(wǎng)站和APP的注冊(cè)流程中,密碼不再是輸入兩次,這樣的情景下,注冊(cè)時(shí)密碼輸入錯(cuò)誤幾乎是致命的,所以為用戶提供密碼顯示可以有效的避免這個(gè)問題。要知道,目前許多注冊(cè)都是在移動(dòng)端上完成的,拇指在屏幕上輸入密碼比在鍵盤上輸入的失誤率更高。

adobe_mobile_login_toggle

超過82%的人有忘記網(wǎng)站登錄密碼的經(jīng)歷,隨著網(wǎng)站、APP和各類服務(wù)的增長,這個(gè)數(shù)字只會(huì)增加不會(huì)減少。

提醒大寫鎖定

當(dāng)用戶輸入密碼的時(shí)候,提醒他們鍵盤是否有大寫鎖定,也是值得注意的點(diǎn)。為用戶提供文本提醒或者視覺提醒都有助于避免多次輸入錯(cuò)誤,降低用戶瀏覽受挫機(jī)率。大多數(shù)的瀏覽器已經(jīng)集成了大寫鎖定提醒,所以這個(gè)問題只要稍加注意就可以看到。不過,用戶在屬于密碼的時(shí)候注意力大都集中在輸入的內(nèi)容上,所以大寫鎖定提醒必須優(yōu)雅又醒目。

避免反模式設(shè)計(jì)

設(shè)計(jì)模式的存在,順應(yīng)用戶的習(xí)慣和交互的規(guī)律,讓用戶可以更好地與界面進(jìn)行操作。反模式的存在,同樣可以引導(dǎo)用戶行為,但是引導(dǎo)的結(jié)果往往不可控或者無法達(dá)成目標(biāo)。常見的反模式設(shè)計(jì)并不少:

·用戶輸入信息失誤的時(shí)候報(bào)錯(cuò),然后刪除所有輸入的而內(nèi)容
·當(dāng)用戶已經(jīng)擁有帳號(hào)的時(shí)候,依然允許用戶使用該用戶進(jìn)行注冊(cè)
·為用戶添加了看似可點(diǎn)擊但是實(shí)則無法點(diǎn)擊的標(biāo)簽
·限制用戶輸入字段長度但是完全不給予提醒

去除驗(yàn)證碼

移除驗(yàn)證碼可以有效的提高轉(zhuǎn)化率。雖然驗(yàn)證碼可以很好的避免注冊(cè)機(jī),但是驗(yàn)證碼對(duì)于用戶而言的挫折更多,12306 堪稱反人類的驗(yàn)證碼就是個(gè)很好的反例。據(jù)統(tǒng)計(jì),有38%的用戶會(huì)在第一次輸入驗(yàn)證碼的時(shí)候輸錯(cuò),15%的用戶會(huì)一直輸錯(cuò),而這類用戶通常在第五次輸錯(cuò)之后徹底放棄注冊(cè)。

REDDIT 就徹底移除了注冊(cè)環(huán)節(jié)的驗(yàn)證碼,去除之后網(wǎng)站的新用戶注冊(cè)率同比增長8%。當(dāng)然,反注冊(cè)機(jī)和機(jī)器人還是很有必要的,如果情況比較嚴(yán)重可以選擇比較人性化的驗(yàn)證機(jī)制來規(guī)避。

結(jié)語

想要提升新用戶注冊(cè)的轉(zhuǎn)化率,絕大多數(shù)要應(yīng)對(duì)的用戶體驗(yàn)的問題,了解用戶的痛點(diǎn),除了要考慮傳統(tǒng)的桌面端用戶的問題,還要應(yīng)對(duì)移動(dòng)端用戶的新需求。在好體驗(yàn)和安全性之間把握好平衡點(diǎn),這也是新用戶注冊(cè)環(huán)節(jié)最難兩全的問題。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔