指尖上跳舞!聊聊拇指碼字那點事兒

編者按:什么樣的登錄過程不會讓人厭煩?今天@ME網(wǎng)易移動設(shè)計?的同學(xué)從手機碼字這件小事上,聊聊他觀察到的那些優(yōu)雅的登錄體驗,以及一些反人類的糟心過程,以此對照 >>>

指尖上跳舞!聊聊拇指碼字那點事兒

如果說互聯(lián)網(wǎng)改變了人類的生活,那么移動互聯(lián)網(wǎng)則改變了人類的習(xí)慣,它讓用戶扔掉鍵盤和鼠標(biāo),隨時隨地在一個巴掌大的屏幕上聊天、視頻、訂機票酒店、購物等。如今的移動互聯(lián)網(wǎng)已經(jīng)把用戶慣壞了,隨著功能的增多和用戶體驗的增強,想象著一個陽光明媚的周日,拇指族們足不出戶的窩在床上和朋友聊天、看電影、訂餐、購物甚至收發(fā)郵件和工作,懶惰讓他們的脾氣越來越浮躁,會因為一個細節(jié)的體驗不好而分分鐘吐槽你的設(shè)計。他們懶得輸入太多內(nèi)容,因為手機屏幕實在是太小了,小到他們只愿意點擊和滑動,好像這樣就能不消耗卡路里一樣,也許他們的未來和下一代已經(jīng)不會記得如何打字,那時候的高科技手機也許成為了一個徹頭徹尾的秘書,動動嘴巴就能幫你做好你想要的一切,這并不是一個遙不可及的夢想。

不可否認的是,科技的發(fā)展和用戶體驗的改善確實是讓用戶沉迷和依賴移動互聯(lián)網(wǎng)的原因,也是設(shè)計師們工作的動力。但移動端因為屏幕尺寸受限以及交互方式的差別,使得其一些功能還遠不如在PC端更方便,其中最大的一項就是輸入,今天我們通過分析一些在輸入上體驗良好的設(shè)計來給我們今后的工作一些參考。

登錄的必要性

登錄就好比一個APP大門外的守衛(wèi),如果你真的有公事要辦,那么進門查崗和登記是有必要的;可你要是憋了一泡尿,只想進去上個廁所,此時守衛(wèi)還要你出示身份證,你恨不得直接撒在他身上然后再暴打他一頓。登錄的目的基本上有兩種:①需要帳號來獲取用戶數(shù)據(jù)并使用一些基本功能如跟貼、評論等(例如Facebook、新浪微博、網(wǎng)易新聞)②需要將數(shù)據(jù)同步到不同設(shè)備和平臺(例如印象筆記)。說到這兒,就不得不說說有些個產(chǎn)品經(jīng)理,為了那點可憐的KPI和用戶數(shù)據(jù),硬將自己的產(chǎn)品加上登錄的功能,殊不知因為登錄將多少用戶阻擋在你的產(chǎn)品之外。很多APP的開機引導(dǎo)頁最后一幀,都是大大的一個登錄按鈕,有些稍微有點良心的APP會把“直接進入”顯示出來,不過是小到肉眼難見、手指難點擊,這種感覺就好像去政府辦事被官員們耍了一樣。

當(dāng)一個產(chǎn)品成熟了之后,登錄是必不可少的功能,此時登錄出現(xiàn)的時機就很重要,如果你的APP沒有牛到像Facebook和Twitter賬號人人都熟知,也沒有像微信和QQ那種有著非登錄不可的功能,那就在用戶有需求的時候再登錄吧,少一個頁面的輸入就減少了一道門檻,也留住了更多的用戶。

被迫害妄想癥的發(fā)明 —— 輸入兩次密碼

最初PC端的帳號注冊都是需要輸入兩遍密碼的,因為密碼都是隱藏的,擔(dān)心因為不小心按錯鍵而導(dǎo)致輸入和心中記憶的不同,就輸入第二遍進行確認,這樣確實能避免手誤,不過由此帶來的問題是,沒有手誤的人要輸入兩遍相同的密碼,真正手誤的人不知道是第一遍不對還是第二遍不對,只能無比抓狂的刪掉密碼,重新小心翼翼的輸入兩遍密碼。

指尖上跳舞!聊聊拇指碼字那點事兒

我沒有翻看歷史,不知道這種兩遍密碼的功能是誰因為什么原因發(fā)明的,我猜想是一個有被迫害妄想癥的人,擔(dān)心他輸入密碼的時候旁邊有人偷窺,于是把密碼隱藏,然后因為看不到密碼怕自己輸入錯誤,順手加了兩遍驗證......這功能一定是電腦還沒有在家庭普及的時代發(fā)明的,人們在公共場所使用電腦,不可避免會擔(dān)心陌生人的偷看。可如今電腦是一個多么隱私的物品,無論是家庭還是辦公室,大家都有自己隱私空間,已然不需要如此隱藏密碼,更何況是手機,手機本身隱私性就更高,屏幕大小也有限,不想被人看到就用手擋一下或者躲開他們,也就是被迫害妄想癥的人才會在手機端也要堅持兩遍驗證密碼的功能。每每看到這些APP的注冊需要輸入兩遍密碼,我的狂躁癥簡直要犯了!

指尖上跳舞!聊聊拇指碼字那點事兒

一個好的設(shè)計并不是完全照搬PC端的功能和設(shè)計,而是要考慮適合移動端應(yīng)用的場景,如上述所說,在移動端使用兩遍驗證密碼是沒有必要的,無疑增加了移動端輸入的成本。蘋果iOS系統(tǒng)的輸入鍵盤會在點按下后變大,這本身就能讓用戶感知輸入的正確性,同時在輸入密碼的時候先顯示輸入的字母再快速轉(zhuǎn)換成隱藏的黑點,也能幫助用戶檢查輸入的正確性;而一些體驗更優(yōu)雅的APP則會為用戶提供顯示密碼的功能,默認不顯示,當(dāng)用戶需要確認密碼是否輸入正確的時候再點擊顯示,這樣即避免了偷窺,又防止了輸錯,也減少了兩次輸入的成本。一些APP甚至在此功能上做了很好玩的隱喻,例如tumblr用睜眼和閉眼的icon來表示顯示和隱藏密碼,bingo!向一切美好的細節(jié)體驗設(shè)計致敬。

指尖上跳舞!聊聊拇指碼字那點事兒

指尖上跳舞!聊聊拇指碼字那點事兒

誰說登錄非要輸入

當(dāng)你的APP需要登錄,但你恰好沒有公眾認知的一套賬號體系時,拉下臉授權(quán)接入下那些熟知的第三方帳號不代表降低了你的登錄和注冊數(shù),反而會讓用戶更加快捷的完成登錄并開始使用你APP的功能。不要覺得委屈,因為你不夠牛逼,用戶從來沒在你這兒注冊過,他們也不需要再多記一個帳號,有更好的選擇誰不愿意呢?!

第三方帳號登錄的好處是你的手機中已經(jīng)有一些現(xiàn)成的登錄信息,你只要獲取授權(quán)就可以,不用輸入任何用戶名和密碼,有些權(quán)限高的可以將你在其他APP中的昵稱頭像生日學(xué)校血型等一并拿過來,這些個人資料要是自己填可真令人討厭啊!

那么問題來了,登錄頁面到底要怎么布局?如何在突出自己帳號系統(tǒng)的同時展示第三方登錄按鈕?答案是,將用戶最想要的信息呈現(xiàn)在最重要的位置。有些APP扭扭捏捏,用第三方登錄還要弱化顯示,恨不得讓自己的帳號登錄亮瞎用戶的眼,快選我快選我(⊙o⊙),事實上你是否做過用戶調(diào)研,是否能理直氣壯的證明這樣第三方登錄的點擊率就降低了?相比之下我更喜歡直接凸顯第三方登錄的設(shè)計方案。

指尖上跳舞!聊聊拇指碼字那點事兒

指尖上跳舞!聊聊拇指碼字那點事兒

既然有登錄,就會有退出登錄的需求。大部分APP退出登錄后再次登錄的頁面和最初登錄一樣,沒有幫助用戶記錄用戶名,這著實是一個不能稱作好的設(shè)計,不管你是什么原因,減少用戶信息的輸入會讓用戶覺得再次登錄好像沒有那么困難,尤其是中國的用戶,他們的用戶名可能是不好打出來但自己覺得酷酷的中文,也可能是國際范兒的中英文結(jié)合,更有可能是一些90后流行的顏文字等,沒有人想再重新輸入一遍。而且對于大部分非社交APP來說,賬號并沒有非常重要的隱私性,登錄主要是為了方便使用其中某些功能,這時候哪怕記住用戶名和密碼都不為過。例如雅虎新聞APP,退出登錄后,會記住所有在該設(shè)備上登錄過的用戶名和密碼,再次登錄只要選擇想要登錄的帳號就行,十足方便。

指尖上跳舞!聊聊拇指碼字那點事兒

目前很多主流的國外APP都已經(jīng)接入了1password登錄,1password是一個幫助你管理所有賬號密碼的APP,它的好處是在你重裝APP或者多設(shè)備登錄的時候幫你一鍵登錄,前提是你將該網(wǎng)站的帳號密碼存入1password。

指尖上跳舞!聊聊拇指碼字那點事兒

注冊是在考驗用戶的耐心

如果你真的不接入授權(quán)第三方帳號,或者你的用戶是個死忠,他非要注冊你的產(chǎn)品,那么首先得恭喜你!但是不要覺得用戶走到了這一步就能妥妥的注冊成功,也許下一步他就會發(fā)怒卸載掉你的APP,簡單且體驗良好的注冊頁面非常重要。試問看到如下behance的注冊頁面,不管他的APP里面內(nèi)容有多么好,我都進行不下去,而且會抓狂。暫不說Adobe的帳號有多么小眾,這么多的表單是在查我的戶口嗎?!

指尖上跳舞!聊聊拇指碼字那點事兒

注冊的目的是建立一個帳號,這個帳號是以后你使用網(wǎng)站或者APP的憑證,簡單來說,用戶名(郵箱)和密碼就夠了,先讓用戶成功的注冊,能夠正常使用功能,至于什么昵稱頭像生日,用戶想完善他自己就去找了,用不著你來操心,如果你不是社交類型APP,這些完善功能你甚至都不需要。下圖中Booking的注冊界面非常干凈簡潔。

指尖上跳舞!聊聊拇指碼字那點事兒

當(dāng)然如果是社交網(wǎng)站,是需要填寫一個用戶名或者昵稱的,這時候?qū)τ陉欠Q重復(fù)性的檢測也是必不可少的,大部分產(chǎn)品只會提示“昵稱被使用”,用戶能做的是換一個昵稱,非常不幸的是可能昵稱仍舊被使用,因為對一個有成千上百萬用戶的產(chǎn)品來說,你所想到的昵稱別人也早想到了,與其這樣不停的試,倒不如給用戶一個參考,因為有些用戶對名字無所謂,他們想要的是快速注冊完成。

Flickr的注冊頁面在我填完姓名之后自動匹配給我用戶名(暫不說為毛要填這么多表單),如果不喜歡,可以點擊左右按鈕去更換;輸入密碼的時候會實時提示我密碼的強度,這樣的好處是及時反饋及時修改,不會等到所有都填寫完成點擊注冊時再告訴我一堆錯誤。

指尖上跳舞!聊聊拇指碼字那點事兒

【有哪些值得推薦的高端字體?】

高端中文字體:
《超實用!有哪些活潑而高端且不俗套的中文字體?》

UI設(shè)計字體:
《新手進階寶典!UI實戰(zhàn)指南之留在電腦里的字體(一)》

高端英文字體:
《永不過時!有哪些值得推薦的經(jīng)典款英文字體?(已打包)》

作者:方圓的形狀 ?@ME網(wǎng)易移動設(shè)計

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺,專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書:史上最全的設(shè)計師圖書導(dǎo)航:http://hao.uisdc.com/book/
設(shè)計微博:擁有粉絲量93萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ,歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航:全球頂尖設(shè)計網(wǎng)站推薦,設(shè)計師必備導(dǎo)航:http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎?
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號:【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加:

指尖上跳舞!聊聊拇指碼字那點事兒

收藏 1
點贊

復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。