產(chǎn)品設(shè)計經(jīng)驗分享:6個輸入框 ,47個設(shè)計點
“乍一看到某個問題,你會覺得很簡單,其實你并沒有理解其復(fù)雜性。當(dāng)你把問題搞清楚之后,又會發(fā)現(xiàn)真的很復(fù)雜,于是你就拿出一套復(fù)雜的方案來。實際上,你的工作只做了一半,大多數(shù)人也都會到此為止……。但是真正偉大的人還會繼續(xù)向前,直至找到問題的關(guān)鍵和深層次原因,然后再拿出一個優(yōu)雅的、堪稱完美的有效方案?!?– 史蒂夫·喬布斯
這篇文字只是描述對于簡單的三個界面,我做每個設(shè)計決策的歷程。
設(shè)計任務(wù)是對以下注冊過程的優(yōu)化,目標(biāo)是降低注冊門檻,讓過程高效,平臺為iOS。
設(shè)計分兩步走,分別是信息架構(gòu)設(shè)計和細(xì)節(jié)設(shè)計,細(xì)節(jié)再從默認(rèn)狀態(tài)、填寫狀態(tài)、反饋狀態(tài)三個角度進(jìn)行設(shè)計。
以下是過程描述:
一、信息架構(gòu)
也就是整理信息、規(guī)劃步驟,把需要用戶錄入的信息全部列舉出來,然后設(shè)定到一個或多個步驟里,形成整個注冊過程。
首先列出需要的信息有:[1]
- 通過驗證的手機(也就是手機號、驗證碼)
- 密碼
- 昵稱
- 性別
- 生日
原來的密碼要填兩遍,手機輸入太痛苦,果斷去掉一遍。
星座本就是由生日推算,放在注冊環(huán)節(jié)徒增操作成本,果斷去掉。
技術(shù)及運營需求,全部為必要信息(也就是必填)。
接下來就是組織這些信息,可能的組織方式有:[2]
最后選擇了這個:
具體是這樣:
為什么呢?
從用戶操作流程考慮,我想讓入門這一下足夠簡單[3],所以用戶看到的第一步只有一個要求,輸入手機號,關(guān)于這個目標(biāo),后續(xù)細(xì)節(jié)分析還有進(jìn)一步的交代。第二步開始漸難,第三步相對最難,從簡到繁。
那為什么不每一步只完成一個任務(wù),每一步都簡單呢?這樣會使得整個流程變得很長[4]。后面適當(dāng)?shù)膹?fù)雜我覺得是可以接受的,這里動了一個邪惡的小心思,關(guān)于沉沒成本的原理[5],大致就是對“哥既然已經(jīng)填了兩步了,就再填一步吧,反正只剩一步了”這種心理的利用。
細(xì)心的人也許會問,為什么中間一步是密碼和驗證碼,且最后一步?jīng)]有返回按鈕呢?其實這是一個技術(shù)上的約束造成[6]。首先,對于我們系統(tǒng)來說,手機號一旦驗證(驗證碼一旦正確提交),手機號就不能再被使用,而完成注冊還得搭上密碼,所以驗證碼和密碼得同一個動作提交給系統(tǒng),不能分成兩步,驗證碼如果單獨作為一步先提交,也就是手機單獨被驗證,中間若發(fā)生非常規(guī)退出,密碼還沒填,下次再想注冊就會被提示手機已被占用了。其次,在第二步填完驗證碼和密碼后,其實已經(jīng)注冊成功啦,也就是說,用戶在第三步就把應(yīng)用強制退出,下次回來也能夠憑手機號和密碼登錄啦,當(dāng)然登錄完第三步的基本資料填寫還是會等著他,跟他說未完待續(xù)。這也就是為什么第三步基本資料沒有返回修改密碼驗證碼的入口,看上去怪怪的,但游戲規(guī)則就這樣,如果你有好辦法,記得告訴我。
于是,從用戶操作流程和系統(tǒng)約束雙線考慮,得到了這么一個信息架構(gòu)。因為界面內(nèi)容不多,無需框架,直接進(jìn)入細(xì)節(jié)設(shè)計。
二、細(xì)節(jié)設(shè)計,注冊第1步(手機號)
每一個界面都分別對默認(rèn)、輸入和反饋三個狀態(tài)進(jìn)行設(shè)計。第一個界面元素少,相對好處理。
默認(rèn)狀態(tài)設(shè)計如下:
導(dǎo)航欄左側(cè)按鈕用X,代表對注冊任務(wù)的取消[+7],代表這個界面跟上一個界面沒有層級關(guān)系,當(dāng)然個人認(rèn)為這不是很重要,就算是放一個返回按鈕,用戶也完全能夠理解的。輸入框采用左邊固定標(biāo)簽,輸入域在右邊的設(shè)計,
因為空間足夠,不需要整合輸入域和標(biāo)簽,在輸入時去除標(biāo)簽,這樣感覺更穩(wěn)一些[+8]。標(biāo)簽用淺色(后面會跟視覺設(shè)計師探討),輸入正文用深色,以表示主次[+9],我也想過標(biāo)簽?zāi)J(rèn)用深色,等輸入內(nèi)容時,再相應(yīng)變淺,但總覺得有些花哨,就放棄了。
提交按鈕用大按鈕的形式放在輸入框下方,標(biāo)簽是“獲取驗證碼”,沒有用“下一步”是想給用戶一個更清晰的預(yù)期[+10],按鈕沒有放在導(dǎo)航欄右側(cè),因為字太多,放不下了嘛,而且一個大按鈕也顯得比較清晰[+11]。
原本輸入框里的提示文字“請輸入手機號碼”這句廢話被我廢了,同時也重寫了用戶許可協(xié)議的入口引導(dǎo),也是怎么簡單怎么寫[+12]。
輸入狀態(tài)設(shè)計如下:
填寫就要呼出鍵盤,鍵盤要默認(rèn)呼出嗎?從操作效率考慮,自動呼出比較好,省一步點擊嘛,不過我做了一個相反的決定,決定不讓鍵盤默認(rèn)彈出,為的是整個界面第一眼看上去,足夠簡單。作為第一步,這時我覺得感官上的簡單比操作上的簡單更重要[+13]。因為是手機號碼是數(shù)字,所以當(dāng)然要調(diào)用數(shù)字鍵盤[+14]。填寫的是電話號碼,用自動分段的顯示方式,如:138? 0000? 0000,方便用戶閱讀確認(rèn)[+15]。
反饋狀態(tài)設(shè)計如下:
反饋的規(guī)則其實是從后面的界面往前做的,因為后面的輸入項多,能概括出更適用的規(guī)則,所以規(guī)則就后面再說吧。至于這個界面反饋的內(nèi)容,就是對于輸入手機號的值進(jìn)行判斷,正確直接通過,不做提示(或者說界面的跳轉(zhuǎn)本身就是最有效的反饋),若出錯,分“是否為空”“是否格式正確”“是否已被占用”三種情況對應(yīng)提示[+16],行文稍微詼諧一些,作用也是放松情緒[+17]。
三、細(xì)節(jié)設(shè)計,注冊第2步(驗證碼,密碼)
默認(rèn)狀態(tài)設(shè)計如下:
依然很簡單,首先告訴用戶短信驗證碼已經(jīng)發(fā)送到手機號xxx,特意寫多“短信”兩個字想把事情說清楚,這個有些糾結(jié),貌似以現(xiàn)在用戶們的app使用經(jīng)驗,把這兩個字去掉也是ok的[+18]。
在密碼下方有一行說明文字“8-20位,不能有空格,純數(shù)字的話要9位以上”,是密碼的輸入規(guī)則說明,用的是大系統(tǒng)的通行證密碼規(guī)則,大系統(tǒng)的規(guī)則是這么說明的:
我做了兩件事情,精簡和口語化,特別是“不能是9位以下純數(shù)字”,這句話是典型站在程序員的角度說的,而且拗口,所以改成了“純數(shù)字的話要9位以上”,如果你剛好想用純數(shù)字做密碼,看,要9位以上哦[+19]。這也會被用在后面的錯誤反饋里面[+20]。
輸入框的標(biāo)簽和大按鈕依然延續(xù)之前的風(fēng)格。按鈕標(biāo)簽用“注冊”而不用“下一步”,試圖營造一種這就注冊了的感覺,實際上也已經(jīng)注冊了[+21]。
輸入狀態(tài)設(shè)計如下:
還是不默認(rèn)呼出鍵盤,眼不見為凈。
驗證碼當(dāng)然還是用數(shù)字鍵盤[+22]。
密碼用英文默認(rèn)鍵盤[+23],鍵盤多了一個設(shè)定,右下角的按鈕,用“GO”,表示且執(zhí)行“提交”,問過研發(fā)的同學(xué),盡管是英文鍵盤,依然可以顯示成中文“前往”的,但考慮到是英文鍵盤,“前往”可能會讓人覺得這是中文鍵盤,還是GO吧[+24]。
因為密碼只輸入一次,手機的輸入又相對困難,為了更確認(rèn)自己的密碼輸入,所以索性默認(rèn)用明文顯示[+25],我記得亞馬遜kindle和小米盒子設(shè)置密碼的時候也都是默認(rèn)顯示,輸入麻煩嘛,如果你真的要在大庭廣眾下注冊,輸入框右邊有個“隱藏”按鈕可以切換[+26]。
反饋狀態(tài)設(shè)計如下:
這里可以說說反饋的規(guī)則了。
規(guī)則一、出錯的標(biāo)簽視覺區(qū)分對待(變紅)[+27]。
規(guī)則二、按下提交按鈕后再驗證并作出可能的反饋[+28]。
輸入域少,就兩三個,沒有定位的大問題,在輸入過程中,切換輸入域的過程中,所有的正確與否的干擾我都不希望出現(xiàn)。
規(guī)則三、徹底解決完一項輸入,再去下一項[+29]。
什么意思呢?多數(shù)做法是,提交時先針對某一類問題全局檢查一遍,比如是否為空,等都不為空了,再對下一類問題檢查一遍,比如格式。這樣的結(jié)果就是用戶可能因為一類問題,填完一遍表單,又因為另一類問題,從頭到尾來多一遍,整個過程在多個輸入項之間來回切換。而我不想讓切換這個事情導(dǎo)致用戶焦點來回,于是,就做了這么一個決定。先驗證第一個輸入域,比如這里的“驗證碼”,一定是驗證碼不為空且正確了,才開始提示下一項“密碼”,也就是:
四、細(xì)節(jié)設(shè)計,注冊第3步(基本資料)
默認(rèn)狀態(tài)設(shè)計如下:
三個控件是輸入框、單選按鈕和時間選擇器。
昵稱作為比較靈活的輸入字段,我們想給用戶最大的自由,也就是“隨便”輸入[+30],想來想去,實在想不出為什么要限制字?jǐn)?shù)什么的,以后用戶自然會根據(jù)昵稱顯示的效果決定改成什么名字。為什么前面的“隨便”要加雙引號,因為不是真的隨便輸入,總不能讓你粘貼一篇文章來當(dāng)昵稱吧,服務(wù)器還要裝昵稱,load昵稱出來還要帶寬,其實這里默默地限制了100個漢字/200個字符,當(dāng)輸入溢出,輸入框就會輸入不了。但這一切,對于絕大多數(shù)用戶來說,是透明的[+31]。對了,原版本的提示文字“輸入昵稱是為了……”直接廢掉,你會閱讀這種文字嗎?
性別是單選,一般就是提供兩個選項(也有3個的。。。),為了讓注冊過程有意思一點點,也好辨認(rèn)一點點,用圖標(biāo)代替了文字選項,其實這里抄了忘記是哪個應(yīng)用的[+32]。
生日是呼出時間選擇控件,貌似沒什么好考慮的,有看過用輸入代替選擇的,確實是不用滾動那么麻煩,但看上去復(fù)雜,就放棄了[+33]。
最后這三個按鈕都是必填,原版本的設(shè)計是,為了高效,默認(rèn)選擇了性別和生日,用戶直接填個昵稱,就能提交了,但這樣“必填”就沒意義了,因為將得到一堆無意義的性別和生日。于是默認(rèn)全部不選[+34]。
按鈕標(biāo)簽是“完成”,因為這是最后一步了[+35]。
輸入狀態(tài)設(shè)計如下:
昵稱是中文鍵盤,右下角按鈕用中文“完成”,點擊是關(guān)閉鍵盤[+36]。
性別單擊選擇,這里有一個運營規(guī)則,性別以后不能再改了。于是在選擇后有這么一個動態(tài)提示“此后不可更改”出現(xiàn)在右側(cè)。為什么默認(rèn)不顯示,默認(rèn)顯示界面復(fù)雜度多一分,且可能沒人看[+37]。單擊后以動態(tài)的方式出現(xiàn),從無到有且?guī)幼鳎脩舻难凵窬湍鼙晃^去[+38]。
反饋狀態(tài)設(shè)計如下:
昵稱沒限制,性別和生日的控件又天然限制,所以沒有出錯提示,只有空值提示,依然采用標(biāo)簽標(biāo)紅,從上到下逐個解決的提示規(guī)則,提示設(shè)計為[+39]:
因為是最后一步,有一個提交的過程需要緩緩,于是需要一個提示[+40],提示的組成元素用了我們系統(tǒng)的標(biāo)準(zhǔn)元素,就不做解釋,想說的是文字,不是“注冊中”,而是用戶的昵稱,讓新用戶感受一絲關(guān)懷吧[+41]。然后,因為剛才的昵稱輸入是沒有限制的,而我們的標(biāo)準(zhǔn)控件有所限制,所以可能超量溢出,對于太長昵稱的用戶,只好省略號啦[+42],根據(jù)我們對存量用戶的昵稱觀察,這里被省略號的幾率并不高。
四、其他補充
注冊流程還沒有走完,還差最后一步,就是提交后到達(dá)哪里[+43]。注冊界面原本設(shè)定的觸發(fā)時刻是“首次啟動應(yīng)用呼出”或者“非登錄狀態(tài)使用過程中呼出”,所以結(jié)論是在哪里呼出,注冊后就回到哪里,延續(xù)使用場景。
另外,漏講了一件事,所有窗口的轉(zhuǎn)場動畫(進(jìn)入方式)[+44]。從簡處理,就是各種橫滑,遵循臨時窗口上下滑、層級之間左右滑的規(guī)律。也就是第一步的界面從屏幕下方向上覆蓋原界面滑出,第二、三步就從右邊滑進(jìn)來推走原界面,最后提交后,界面向屏幕下方滑出。
另另外,關(guān)于輸入時鍵盤遮擋的問題也考慮了[+45],設(shè)計時刻意把內(nèi)容往屏幕上半部分布局,基本不會出現(xiàn)鍵盤遮擋現(xiàn)象。如果萬一真的遮擋了,在遮擋時是允許界面上下滑動的,滑動時鍵盤不隱藏,這一招也只對第二步填密碼或者按注冊按鈕有效,第三步的后兩個輸入項是單選,完成時控件早已消失,不可能遮擋。
另另另外,還有兩個注冊外部界面,但也作為流程的一部分被設(shè)計。首先是第一步時的協(xié)議詳情,臨時窗口,點擊從下方滑進(jìn)就好[+46]。另外一個是短信驗證碼的內(nèi)容,從簡設(shè)計為“[app名稱]驗證碼22222,十分鐘有效”,十分鐘的“十”特意使用中文,避免跟前面的驗證碼阿拉伯?dāng)?shù)字混淆[+47]。
以上就是整個過程的全部設(shè)計點,設(shè)計的時候當(dāng)然想過更多的解決方案,自己一邊發(fā)散一邊收斂,最后出來原型再跟PM過一遍,再修改,最終定稿。
最終效果如何,還得持續(xù)觀察,這也不是問題的唯一答案,我想說的只是,把細(xì)節(jié)一遍遍打磨,打磨到自然,正是設(shè)計的樂趣所在而已。
本文由 @Danis 原創(chuàng)首發(fā),并經(jīng)人人都是產(chǎn)品經(jīng)理編輯。未經(jīng)許可,禁止轉(zhuǎn)載。
感覺第一步和第二步可以整合成一個步驟;
驗證碼和密碼分開的技術(shù)難題不太理解,輸入手機號 驗證碼,接口驗證驗證碼的準(zhǔn)確性不提交注冊,再輸入密碼時才請求注冊,這樣就可以避免啊,手機和驗證碼跳轉(zhuǎn)到密碼設(shè)置頁面可以帶個標(biāo)識字段,避免請求被攔截串改;
這里有一個疑惑想問一下 第一個頁面輸入手機號碼后 到大第二個頁面 等待短信 如果用戶又返回到上一頁面 又點了一次 是不是說這里獲取驗證碼60秒的間隔控制被刷新了 如果不是 是不是第一個頁面要記錄按鈕狀態(tài) 從第二個頁面返回的話 按鈕存在倒計時呢
手機號碼和驗證碼最好應(yīng)該在一個頁面比較好吧,萬一手機號碼輸入錯誤,改正起來方便。
非常詳細(xì),但有一點疑問。如果手機驗證碼沒有收到,如何重新獲???目前看驗證碼頁面,沒有特殊直觀的顯示。必須激活驗證碼輸入框后才可看到。
這個很好
有一個問題,在第三界面反饋狀態(tài)是從上往下檢查,有的用戶是還沒想好昵稱先把性別或生日選上了最后想昵稱,這個場景就不能從上往下檢查。
學(xué)習(xí)了
有一個問題,密碼選項,有沒有考慮不用輸入。
用戶可以直接使用手機號登錄,手機記錄登陸狀態(tài),第二次打開也可以正常登陸。
如果用戶選擇了退出,那么下次登錄依舊使用手機號+驗證碼的格式。
每次登陸都要驗證碼…會死人啊
只是用戶點擊“退出”按鈕,下次登錄才用驗證碼。
如果不點擊,則手機記錄登陸狀態(tài)(這個不難實現(xiàn)吧)
其實現(xiàn)在密碼已經(jīng)太多了,用戶自己都記憶亂了,如果沒有密碼,也很方面用戶登錄。
這樣會存在的問題是,如果某些情況下需要換手機登陸,比如自己手機沒電了、想借一下別人的手機登陸自己的賬號,就沒轍了。當(dāng)然這是極端情況了。個人還是傾向于用驗證碼登錄。
驗證碼很貴的~
驗證碼貴.驗證碼也是很討厭的東西,需要等待,如果短信延遲了就更鬧心了.
我比較贊同。因為美團目前采用的就是不用密碼,只需要驗證碼的方式。對用戶來說其實體驗更好。輸入密碼其實意義不大,因為手機端用戶很少自己去退出這個應(yīng)用,除非換手機。將來要換手機還可以重新接受一次驗證碼。
驗證碼登陸確實很好很方便,現(xiàn)在好多app也都采取了這種形式 。但每家app使用的短信通道并不相同,成本低的短信通道很有可能讓用戶收不到驗證碼短信,或者收到有延遲,那這時用戶就很尷尬了。所以,是否用驗證碼登錄,還和公司的投入成本有關(guān)。
恩,有些短信通道是被用戶被屏蔽的導(dǎo)致用戶無法接受短信
可以驗證碼登錄和密碼密碼登錄雙重選擇的設(shè)計啊,單純驗證碼登錄,那短信費不得唰唰的,輸入密碼的話相對安全一些吧,如果你手機丟了,被別人撿到,別人就可以根據(jù)你的手機驗證碼更換手機號,當(dāng)然任何可能性都會存在
雙重選擇的體驗肯定不好,不能讓用戶做選擇,尤其是在注冊階段。
不管是驗證碼還是使用密碼,只要手機丟了,都可以更改號碼,密碼可以找回。
從簡化角度考慮,使用驗證碼登錄我還是比較推崇的。
現(xiàn)在越來越多是采用手機號+驗證碼,但是這種一般不怎么涉及到錢的。
對有的業(yè)務(wù)類型來說,短信驗證碼其實并不貴,相對于用戶價值
我覺得直接用手機號登陸的問題是,萬一是盜用了別人的手機號怎么辦?所以才需要發(fā)驗證碼驗證一下吧~
如果是盜用別人的手機號,或者注冊的時候手機號輸入錯誤,那么肯定第一次的驗證碼都收取不到,也就無法注冊。