如何優(yōu)化我們的登錄頁面

2015-5-8    周周

登錄?
兩個輸入框加一個按鈕?還能怎么做?

那就先來看看為什么而做?

就數(shù)據(jù)而言,網(wǎng)站的流量仍是大量的匿名用戶帶來的。我們無法根據(jù)請求的任何方面(ip地址,用戶代理等)準(zhǔn)確識別來自同一人的連續(xù)請求。
不能識別,自然無法對其分類進(jìn)而轉(zhuǎn)化挖掘,獲取網(wǎng)站所需的價值。
互聯(lián)網(wǎng)服務(wù)于人,要開發(fā)一個真正令人動心的網(wǎng)站,我們必須觸達(dá)到瀏覽器后面那些活生生的人。

  • 他們是誰?他們想要什么?
  • 我們?nèi)绾畏?wù)他們?

以下是4種具有代表性的用戶識別方法,我們來看一下它們的優(yōu)劣:

ip地址:IP地址是最容易獲取到的信息。但用它來標(biāo)識唯一用戶會有很大弊端,偽IP、代理、動態(tài)IP、局域網(wǎng)共享同一公網(wǎng)IP出口等情況都會干擾獲取的IP地址的唯 一性和準(zhǔn)確性。

IP+User Agent :多個信息聯(lián)合確定用戶身份。對于用戶而言,當(dāng)使用相同的終端瀏覽網(wǎng)站時,user agent的信息是相對固定的,固定的操作細(xì)水長流斷裂,相對固定的瀏覽器,這種方式可以適當(dāng)提高IP代理、公用IP這類情況下的用戶分辨度,當(dāng)還是同樣避免不了動態(tài)IP和VPN等IP變動的情況。

cookie:Cookie是網(wǎng)站以一小段文本的形式存放在用戶本地終端的信息,以便網(wǎng)站之后的讀取。Cookie幾乎能夠唯一對應(yīng)到用戶的訪問終端,但不像IP地址都能獲取到,Cookie需要預(yù)先寫入訪問終端,如果用戶禁用Cookie,vfb么這種用戶識別機制就會失效,當(dāng)用戶執(zhí)行了清理Cookie或者重裝系統(tǒng)等操作時,Cookie同樣也會丟失。

User ID:用戶ID與上述的區(qū)別就是綁定的不再是設(shè)備而是用戶本身,具有唯一的識別性。

同時,很多網(wǎng)站把這個用戶ID寫入到Cookie中以便用戶下次訪問時直接判別用戶身份而完成“自動登錄”的功能。 用戶ID還可以串聯(lián)用戶的訪問記錄數(shù)據(jù)和CRM及后臺其它的用戶數(shù)據(jù),為之后的關(guān)聯(lián)和分析提供了便利。(以上用戶識別方法摘取自《網(wǎng)站分析實戰(zhàn)》)

另外還可以獲取MAC地址,SIM卡IMIS號(移動端優(yōu)化可用上),也可以作為識別用戶唯一身份的標(biāo)識。

設(shè)計思路和過程:

現(xiàn)在大家都在說“以用戶為中心”。

用戶可能會因為“以用戶為中心”的設(shè)計所給予的關(guān)注而比以往的感覺好一些,但把們置于開發(fā)過程的中心未必能給他們帶來更好的產(chǎn)品。我們要理解的并不是用戶,而是使用。

關(guān)注用戶此刻所要完成的任務(wù),以及我們怎樣才能以最佳方式支持其完成。
所以我們要考慮如何來支持用戶達(dá)成每一個目標(biāo),而不會干擾或妨礙他們。同時,再把這些完全不同的部分凝聚成整體。

以下就是具體做了哪些優(yōu)化:

1、使任務(wù)更明確:

  • 登錄的主線任務(wù)就是登錄輸入框和提交按鈕,加大處理,讓其任務(wù)更突出,去除圖的干擾,使流程清楚,用戶可以直線思維操作, 用戶名>密碼>登錄 一氣呵成快捷地完成登錄。
  • 原有的“忘記密碼,忘記賬號以及記住我”不屬于主線任務(wù),其實放在哪里不重要,重要的是我們需要給表現(xiàn)成“相關(guān)任務(wù)”,故移至一旁弱化表現(xiàn)。
  • 刪除“忘記賬號”(忘記密碼可以找回,忘記賬號并不能解決,現(xiàn)有線上的處理方式是跳轉(zhuǎn)去找回密碼頁,毫無意義)。

2、使輸入更快捷,提高易用性

準(zhǔn)則一:功效

最大化減少用戶輸入和操作:

當(dāng)其點擊登錄按鈕時,判斷是否在本地登錄,登錄過就讓其自動登錄,沒登錄過,進(jìn)來時默認(rèn)焦點就對準(zhǔn)輸入用戶名上。

自動聯(lián)想功能:

注冊面板中減少一次密碼的輸入:

常規(guī)注冊需要填兩次密碼,有數(shù)據(jù)表明,只需要做一次輸入即可。
根據(jù)調(diào)研報告,用戶時常分不清昵稱是否可以用來登錄。最好的方式是在注冊時連昵稱都去掉,而取其@前面的字符或手機號作為暫時的用戶昵稱,而在后續(xù)的環(huán)節(jié)中再去引導(dǎo)其更換頭像和昵稱。

準(zhǔn)則二:支持

系統(tǒng)應(yīng)該支持一個熟練用戶對系統(tǒng)進(jìn)行率的使用:

新增快捷鍵的支持:

Tab及上一鍵支持切換;

Enter及空格鍵支持提交;

ESC鍵取消蒙層及面板。

準(zhǔn)則三:寬容

人是會出錯的。人進(jìn)行信息處理不可避免會出差錯。出差錯是正常的,但減少差錯不應(yīng)當(dāng)從人這一方面進(jìn)行努力。設(shè)計良好的系統(tǒng)應(yīng)該把出錯和出錯處理也考慮其中。

容錯前后空格:用戶在PC輸入的過程中,會自然地帶入空格鍵,密碼及賬號的輸入應(yīng)該能容錯前后空格。
不再檢驗密碼強度,簡單密碼也可以通過。同樣根據(jù)調(diào)研報告,用戶不care視頻類網(wǎng)站賬號密碼的安全性。

準(zhǔn)則四:環(huán)境

系統(tǒng)應(yīng)當(dāng)適應(yīng)其被使用和操作的真實條件和實際環(huán)境。衣服擺著好看和穿在身上是否合適是兩回事。

3、優(yōu)化移動設(shè)備體驗,為以后各終端互通做準(zhǔn)備

移動設(shè)備崛起,種種數(shù)據(jù)表明,移動屏正在超越PC屏,但最終結(jié)果肯定不會是一屏取代另一屏,而會是一個多屏互通,同時使用這么一個局面。在設(shè)計web頁面時,都要考慮到響應(yīng)設(shè)計來自適應(yīng)各終端。

移動端第三方登錄建議采用SSO登錄:

SSO的優(yōu)勢: 不需要重復(fù)輸入微博用戶名、密碼,只需要一步操作,直接點擊授權(quán)按鈕即可完成。增強了操作簡便性及帳號安全性??蓞⒖闯?、360 手機瀏覽器等一些應(yīng)用。

網(wǎng)頁上同樣能夠做到登錄第三方應(yīng)用使其自動登錄。

至此,交互畫圖的工作已完成。接下來是視覺同學(xué)的跟進(jìn),詳細(xì)過程不再累述。


最后,以一張圖小節(jié)一下交互的工作:

PS:產(chǎn)品定義功能,解決產(chǎn)品是否有用有價值的問題,交互關(guān)注易用好用的問題,視覺關(guān)注讓人是否想用。重構(gòu)和開發(fā)是解決能不能用的問題,同樣也關(guān)注好不好用,與交互的區(qū)別在于交互從設(shè)計上解決,而開發(fā)從技術(shù)上解決。

分享本文至:

日歷

鏈接

個人資料

存檔