App登錄註冊並不是那麼簡單,淺談用戶體驗的「設計感」

登錄和註冊功能,不論是PC端還是移動端,大多數產品都會涉及到。但是不同app的註冊和登錄的設計,會給用戶帶來不一樣的體驗。其中主要如下:

用戶登錄系統,可以細分為三項功能模塊,分別是:登錄、註冊和密碼找回。

App登錄註冊並不是那麼簡單,淺談用戶體驗的“設計感”

一、登陸頁面設計

1、簡單方便:

我們經常見到的登陸頁面通常都是非常簡單,常見的登陸頁面一般是手機號+密碼,郵箱+密碼,用戶名+密碼的組合。

因為這兩類登錄方式便於記憶,且方便找回密碼。但有很多App產品,其實是從其PC端產品衍生而來,它們共用同一套後臺系統,因此需要考慮到一部分過去在PC端註冊的老用戶。所以,雖然由字母和數字組成的用戶名,已經是PC時代的登錄方式,但是在移動端上,也應當提供這樣的選擇。

App登錄註冊並不是那麼簡單,淺談用戶體驗的“設計感”

2、等待提示:提供“正在驗證”的提示,緩解用戶焦慮

在用戶登錄頁面的時候,我們不僅要為用戶提供設置方便易記的登錄方式,還要為用戶考慮登錄時頁面的響應速度。用戶在提交完信息之後,儘量在2秒後提示正在驗證,請耐心等待或者提交成功等信息提示,讓用戶知道自己提交是否成功。如下圖:

App登錄註冊並不是那麼簡單,淺談用戶體驗的“設計感”

3、還有一種錯誤提示:用戶名或密碼錯誤+可試錯次數

當用戶提交信息時,用戶名或者密碼錯誤會有一個提示信息。你的用戶名錯誤or你的密碼錯誤,還可以加上“你還可以嘗試xx次”這類信息,幫助用戶做到心裡有數。當然,如果設置了登錄試錯機制,就需要補充相應的業務流程:當用戶試錯次數用完後,引導用戶“找回密碼”。如下圖:

App登錄註冊並不是那麼簡單,淺談用戶體驗的“設計感”

另外一種情況來說,如果應用監測到一個錯誤的密碼組合,和用戶名,但是沒有明確的報告給用戶問題是什麼,用戶可能會多次嘗試後,很生氣的退出應用。

這是為什麼你應該考慮通用的回覆(例如“你的密碼或郵箱不符合”),並且給他們立馬回覆怎麼解決這個問題。

問下郵箱地址或電話號碼,而不是唯一的用戶名。

App登錄註冊並不是那麼簡單,淺談用戶體驗的“設計感”

為什麼人們登錄時人們很少記住“用戶名”?如果使用用戶名登錄,你會面對很多可避免的困難:用戶名必須是一個唯一的,這意味著人們會重複嘗試輸入一個系統裡目前還沒有的用戶名,或者最終使用其真實姓名。

過了一會兒,用戶想出了一個唯一的登錄名,但是隻過了一小會兒就忘記了,因為這個用戶名對他沒有任何的意義。

另一個事情可以促進登錄,是提供給用戶幾個登錄選項,並且給他們機會來選擇和嘗試用戶名而不會沮喪。在這過程中強迫的一部分是允許他們使用郵箱地址和密碼來註冊。

二、註冊功能

1、註冊方式:手機號 +密碼+驗證碼

註冊頁面在移動APP上幾乎無需置疑,最簡單的方式當然是第三方登陸,比如我們可以點擊QQ、微博、微信、淘寶等圖標實現一鍵登陸,但是這種註冊方式在為用戶提供方便的同時也存在一個問題就是很多用戶都不是單一一個QQ、微博、微信、淘寶。所以這就為用戶的登陸造成了第二種麻煩。所以我們經常看到的註冊頁面都是手機號+驗證碼+密碼。還有很多用戶對用手機號註冊這種方式有所顧慮,擔心自己的信息外洩。考慮到這部分用戶群體的擔憂,我們可以在註冊界面多提供一種用郵箱註冊的方式,但這種方式不作為主要功能突顯,可以放在手機註冊的下方。如下圖4:

App登錄註冊並不是那麼簡單,淺談用戶體驗的“設計感”

三、密碼找回,分為兩種:

首先需要一個“忘記你的密碼”的流程,忘記密碼發生在所有人身上,這也是為什麼,你急迫的給到用戶一個機會來恢復密碼,那麼就直接在登錄界面這麼做吧。

App登錄註冊並不是那麼簡單,淺談用戶體驗的“設計感”

所要做的就是,在輸入框下增加一個“忘記你的密碼”的鏈接,並讓系統能給用戶的郵箱或電話號碼發送驗證碼。

1、通過手機號重置密碼

用戶在App上找回密碼,最快捷方便的方式是通過手機號來找回。這個功能分為兩個步驟:第一步是填寫手機號,獲取驗證碼;第二步是在手機上重置密碼。當然,在重置密碼的時候,可以讓用戶通過可見模式來設置,或者增加“確認新密碼”的字段來確保用戶修改正確。如下圖:

App登錄註冊並不是那麼簡單,淺談用戶體驗的“設計感”

2、通過郵箱找回密碼

除了利用手機號找回密碼之外,針對部分沒有綁定手機號的用戶,還可以提供用郵箱找回密碼的方式。這種方式需要後臺向用戶郵箱發送郵件,將新密碼告知用戶。如下圖:

App登錄註冊並不是那麼簡單,淺談用戶體驗的“設計感”

上面這些內容只是包含了登錄、註冊和找回密碼這幾塊核心的功能,但其實在設計登錄管理系統時,還有諸如第三方登錄、引導用戶綁定手機等其他需求。


這次的分享就到這裡了,想要學習的小夥伴可以在下方領取設計資料的哦~http://t.cn/ROCIyd0(複製到瀏覽器打開即可),更多好玩的設計資料 GZ “職業研學社”。


分享到:


相關文章: