提升信息錄入的用戶體驗設(shè)計技巧

信息錄入是最耗費用戶精力的人機(jī)交互行為,在這個過程中,用戶需要理解信息,然后將信息錄入。身處這個高速運轉(zhuǎn)的社會,每個人都像陀螺一樣不停地旋轉(zhuǎn),誰能節(jié)省用戶的時間誰獲得用戶的贊嘆,最近在使用產(chǎn)品的時候發(fā)現(xiàn)幾個提升信息錄入效率設(shè)計,深得我心,在此跟大家分享一下。

本篇文章會通過用戶輸入信息的過程:輸入前、輸入中和輸入后,對信息錄入做系統(tǒng)的分析。

 

輸入前 - 理解信息+預(yù)測

 

1. 內(nèi)容易于理解

是否過于專業(yè):在醫(yī)療、金融等專業(yè)性很強(qiáng)的領(lǐng)域內(nèi),專業(yè)名詞一抓一大把,但是有越來越多的小白用戶進(jìn)入其中,進(jìn)入金融是為了方便理財,進(jìn)入醫(yī)療是為了在線問診,那我們在設(shè)計一些表單的時候就需要將小白用戶和專業(yè)用戶進(jìn)行分類,使用不同的語言來與不同的用戶進(jìn)行交流。

 

eg. 我們公司最初的問診表單中會讓患者選擇疼痛的類型(刺痛、絞痛、陣痛、放射痛等等),雖然也在各種難以理解的疼痛部位做了解釋,但是患者還是難以判斷疼痛的類型;后面就放棄了 ,改為只收集用戶的疼痛等級。

是否有歧義 eg. 之前的問診表單項里有個“癥狀時長”,患者就有疑問了,這個癥狀是每次發(fā)病的癥狀時長,還是這個癥狀存在多長時間了;為了解決用戶的這個疑問只好將這個表單項改為“患病時長”。

 

 

2. 清晰的錄入?yún)^(qū)

這個技巧看起來很簡單,但是對于比較天馬行空的設(shè)計師來說還是很難理解的,因為好些設(shè)計師比較忠于頁面上的視覺呈現(xiàn),為了極簡的展示頁面信息,可能會做出直接將輸入框隱藏掉的設(shè)計,想當(dāng)然的認(rèn)為用戶一定能理解后面是可輸入?yún)^(qū),結(jié)果就是用戶不知道輸入?yún)^(qū)在哪里,造成了一系列不好的體驗。

為什么這樣看似簡單的體驗問題會被我們忽略,有這樣一個聲音 “這些人都不用互聯(lián)網(wǎng)嗎,那誰誰誰上面就用這樣的樣式,我用著就沒有什么問題了”,說這些話的設(shè)計師了自己對互聯(lián)網(wǎng)設(shè)計理解的深度,忘記了自己看的好多都是設(shè)計類的網(wǎng)站。所以我們在做設(shè)計的時候一定要將用戶看做是小白用戶,不要讓用戶去思考去尋找。

 

3. 提前預(yù)測用戶要輸入的內(nèi)容

其實這種方式已經(jīng)存在很久了,但是我最近才注意到這種體驗。它是建立在平臺對用戶熟悉的基礎(chǔ)上,已經(jīng)存儲了用戶的一些信息,在用戶進(jìn)行信息填寫之前將這些信息推薦給用戶,提升用戶錄入信息的效率。

eg. 當(dāng)你打開滴滴出行快車的界面,系統(tǒng)不但會自動定位你現(xiàn)在的位置,也會將你可能要到達(dá)的目的地推薦出來。

eg. 便利蜂在增加新的收獲地址時,會推薦存儲過的收貨人和聯(lián)系電話,如果收貨人是之前存過的人的話,直接選擇即可。

 

小結(jié):

總體來說在信息錄入之前要讓用戶快速理解需要錄入的信息是什么,在哪里錄入,最后能推薦用戶可以選擇的錄入信息。

 

輸入中 - 高效輸入

1. 調(diào)取合適的鍵盤

一說到信息錄入,我們腦子里第一時間想到還是文字的錄入,因為這是信息錄入最基本的形態(tài),雖然現(xiàn)在有很多可替代的方案,但是這種信息輸入還是比較主流的。

那文字信息錄入的關(guān)鍵就在于調(diào)用合適的鍵盤,IOS原生的鍵盤有21種之多,作為設(shè)計師應(yīng)該對不同形態(tài)的鍵盤有所了解,當(dāng)產(chǎn)品需求輸入特殊的信息,也可以自己設(shè)計更合適的鍵盤(eg. 58同城)

輸入純數(shù)字的時候就調(diào)用數(shù)字鍵盤;輸入數(shù)字加字庫的時候就調(diào)用英文鍵盤;輸入文字的時候就調(diào)用用戶常用的鍵盤形式等等

 

 

2. 內(nèi)容選項標(biāo)簽化

系統(tǒng)提供固定的標(biāo)簽選項: 標(biāo)簽錄入表單時很常見的一種形式,有些表單項會有一些固定的內(nèi)容選項,eg. 性別選擇;或者選擇頻率較高的內(nèi)容項,eg. 馬蜂窩的熱門旅游城市,那在進(jìn)行表單設(shè)計的時候,就可以考慮直接將常用的選項展示出來,用戶直接選擇即可;

將用戶錄入的內(nèi)容標(biāo)簽化:這個出現(xiàn)在那些需要用戶反復(fù)錄入的場景下。搜索就是一個很典型的例子,產(chǎn)品會將用戶搜索過的內(nèi)容進(jìn)行記錄,用戶下次再查看相同的信息時就可以直接選擇一些記事/記賬類的APP也會出現(xiàn)。eg. 鯊魚記賬,我會將飲食分為早餐、午餐和晚餐進(jìn)行記錄,這樣我只需要輸入一次,下次再記錄的時候直接選擇就可以了,發(fā)現(xiàn)這個體驗的時候很是興奮呢,因為之前堅持不下來的很大原因就是覺得太麻煩了。

 

 

3. 自動聯(lián)想 - 多級聯(lián)想

這個很容易理解,產(chǎn)品搜索過程幾乎都會有自動聯(lián)想的功能,但是今天我想在這里提一下多級聯(lián)想,也是最近在做搜索的時候新了解到的一種很有意思的功能,它并不是最近才出現(xiàn),只是才被我注意到。

具體來講就是當(dāng)你輸入關(guān)鍵字的時候會出現(xiàn)自動聯(lián)想,在自動聯(lián)想的標(biāo)簽后面會有一個箭頭沖左上角的小圖標(biāo),當(dāng)你點擊該圖標(biāo)詞條列表的關(guān)鍵信息就會出現(xiàn)在搜索框里面,然后出現(xiàn)更精細(xì)的聯(lián)想內(nèi)容。通過這種形式幫助用戶進(jìn)行精細(xì)化的搜索。eg. 淘寶

 

 

4. 自動填寫

說到這里就不得不提一下IOS最新更新的系統(tǒng)里有一個非常好的體驗,就是可以直接對驗證碼進(jìn)行識別,這樣用戶就不用去記憶并填寫驗證碼。但是Android在效率這方面會做的更好,因為它可以直接將驗證碼直接輸入,跳轉(zhuǎn)進(jìn)入,我自己非常喜歡這種方式(是不是有安全風(fēng)險不在這次討論范圍之內(nèi)),因為我在使用產(chǎn)品的時候真的是個超級懶人。

自動填寫的使用場景還是很豐富的,主要有2種:調(diào)取系統(tǒng)信息、對信息進(jìn)行判斷

調(diào)取系統(tǒng)信息:最常見的就是地址的輸入,現(xiàn)在各類APP在你初始打開的時候就會讓你選擇是否可以使用地理位置,這樣他們就可以在你需要錄入地址信息的時候,直接調(diào)用地理位置。 eg. 美團(tuán)外賣、餓了么在新增添配送地址的時候會自動定位你所處的位置

對信息進(jìn)行判斷:比如說用戶輸入身份證號,系統(tǒng)就可以根據(jù)數(shù)字判斷用戶的性別和生日,將這兩部分信息直接填入對應(yīng)的表單里(我一開始還在考慮是不是在進(jìn)行表單設(shè)置的時候可以不要這兩個表單項,最后想想還是不合適,因為很多人的生日跟身份證上不一樣)

5. 拍照識別

這個幾乎是購物類APP的標(biāo)配,在購物時這個拍照識別功能特別偉大,我是個淘寶懶人,所以很長時間一段時間里我不知道如何在淘寶里快速找到我需要的商品,因為我無法使用準(zhǔn)確的關(guān)鍵詞,曾經(jīng)因為這個還特地請教身邊的購物達(dá)人是怎樣找到自己喜歡的商品的。有了照片識別這個功能就很好的解決了我的問題,拍照識別查看自己需要的商品,速度很快~

隨著圖片識別技術(shù)的發(fā)展,它的使用場景也是越來越多,下面舉幾個我印象比較深刻或者是對我有所觸動的例子,我們一起感受一起它帶給我們的體驗感。

eg. 銀行卡號輸入,在沒有拍照識別的時候,這真的是我的一個痛點,不知道為啥我總是不能一次正確的把銀行卡號填寫正確,所以當(dāng)我第一次感受到這個功能的時候,我就一個感覺,太棒了~

eg. 搜索的文字識別功能,因為我們每個月都要看一本書,并且要提交讀書筆記,以前的都是用很笨的辦法,摘抄,一個字一個字的輸入電腦里,極大的降低了讀書效率,每次寫讀書筆記就耗費很多的時間。后來師傅推薦了一個特別牛的軟件很好的解決了我的問題,它就是搜狗的文字識別,是搜狗輸入法里的一個功能,識別的準(zhǔn)確率高達(dá)97%。

 

 

6. 語音識別

開始對語音識別有很深刻的印象是在網(wǎng)易云音樂中,我是一個很喜歡聽歌的人,經(jīng)常在外面聽見好聽的歌或者是熟悉的歌想不出名字就特別著急,有時候會去問店員,但是有了語音識別這一功能就很好的解決了我的問題,我可以直接通過語音識別來確定是哪一首歌,不用費勁回憶,也不用麻煩別人,很好,如果準(zhǔn)確率需要再提升一下下就更好了。

語音識別廣泛應(yīng)用在各種場景中,搜索、評論,對話框等等,發(fā)展速度非??欤踔量梢宰R別方言。

因為說話總是比輸入文字錄入更快,所以很多人會習(xí)慣直接發(fā)語音,之前就有人吐槽別人總是發(fā)語音,但是接受信息者所處的場合可能真的不適合聽語音。所以解決的方案就是可以將說話者的語音直接轉(zhuǎn)化成文字,然后再發(fā)送給對方,這樣就可以顧及對話雙方的方便性和體驗感了。eg. 子彈短信

 

 

7. 利用滑塊

經(jīng)常出現(xiàn)在擁有系列等級選擇的表單里,比如價格區(qū)間、字號大小、亮度、聲音大小等等。因為用戶的選擇可以不是一個特定的數(shù)值,可以直接根據(jù)自己當(dāng)下的感受去做調(diào)整,拖動滑塊非常方便,并且可以實時給與用戶反饋,比如聲音或屏幕亮度。

我們公司在設(shè)計用戶疼痛等級的時候就利用的滑塊的設(shè)計手法,因為如果直接讓用戶輸入自己的疼痛等級用戶可能沒有概念,所以就將疼痛分級,并且對每種疼痛進(jìn)行描述,再借用這種滑塊的形式,用戶就可以快速選擇出跟自己感受相同的疼痛等級。

 

 

8. 范圍選擇

范圍選擇跟利用滑塊選擇想要達(dá)到的目的是一樣的,就可以讓用戶可以進(jìn)行模糊性的范圍搜索,目前主要應(yīng)用在地理位置的搜索中(我能發(fā)現(xiàn)的,有別的更多的使用場景也可以在評論告知我~)

eg. 自如APP中在找房的時候,可以使用地圖,標(biāo)注你想找的房子的區(qū)域范圍,在地圖上直接顯示房源的位置及價格。

 

9. 利用圖像

這個在醫(yī)療類APP中比較常見,患者進(jìn)行線上問診的時候,知道自己哪里不舒服但是又沒辦法準(zhǔn)確描述的時候,就可以放置人體圖讓患者選擇不舒服的部位。

 

10. 聯(lián)動式鍵盤

上面說的都是怎么快速增加用戶錄入的效率,這個是提升用戶錄入效率的交互形式。這個是在58同城設(shè)計師寫的文章中發(fā)現(xiàn)的,然后就下載了58同城的軟件體驗了一下這個功能,深深的感覺這是個很棒的處理方式。

這個聯(lián)動鍵盤出現(xiàn)在簡歷編寫中,它打破了傳統(tǒng)的表單從上到下的排布形式,將出生年份、最高學(xué)歷、工作時間3個都需要選擇的項目整理在一行,點擊其中一個后,另外兩項也會同時被放置在鍵盤上方,這樣用戶選擇一個后就可以直接點擊另外一個直接選擇,而不是像傳統(tǒng)列表中選擇一個收起后再選擇另一個。

房天下有個類似的功能,用戶在進(jìn)行填寫的時候,鍵盤上會有一個確定并下一項功能。

 

小結(jié):

輸入中就是要提升用戶的錄入效率,錄入效率的提升其實可以歸結(jié)為兩個方面,能選擇就不用輸入,能識別就不用輸入。

 

輸入后 - 糾錯+上傳

 

1. 錯誤反饋

用戶錄入信息的時候難免會出錯,所以在進(jìn)行表單填寫的時候,我們可以對用戶的錯誤進(jìn)行反饋,標(biāo)注出錯的表單項,提示應(yīng)該如何改正。

eg. 電話號碼輸入錯誤,可以告訴用戶手機(jī)格式錯誤;昵稱輸錯的時候,可以告知用戶昵稱不符合規(guī)范;

 

 

2. 自動糾錯

這個功能很厲害,我在體驗的時候是被震驚了,可以直接幫我糾正錯誤的輸入。

eg. 京東在新建收貨人時,當(dāng)我填寫的詳細(xì)地址與所在地區(qū)不符時,直接彈層提示我不符,并且說要幫我修改,這簡直太好了,我自欣然接受,點擊好的,表單的信息就直接變成正確的了~

 

 

3. 后臺提交

當(dāng)用戶將所有的信息都改正之后,就進(jìn)入表單填寫的最后一步“提交”,簡單的表單可以直接提交讓用戶稍作等待沒關(guān)系(網(wǎng)絡(luò)不好不再討論范圍,可以看無網(wǎng)絡(luò)的處理方式),但是當(dāng)表單內(nèi)容很多尤其涉及到大量的圖片和視頻的時候,這時候及時是網(wǎng)絡(luò)非常好也勢必會消耗用戶一段時間,這里有兩種處理方式:

提前上傳:用戶錄入圖片或視頻信息的時候就直接將信息上傳至服務(wù)器,這樣用戶提交的時候就會很快完成上傳,這種處理方式對服務(wù)器的壓力會比較大,因為用戶很可能會在提交之前反復(fù)更改影像信息;

后臺提交:另一種方式是用戶點擊提交之后,提交的過程在后臺處理,在導(dǎo)航欄出做上傳提示,用戶可以在這個過程中進(jìn)行其它的操作,操作完成后會給用戶上傳成功或失敗的提示。

 

小結(jié):

這一步解決的問題主要有兩個,一個是檢查、輔助修改,另一個是快速提交。

 

總結(jié)

信息錄入的效率對用戶使用產(chǎn)品的體驗感影響越來越大,因為用戶是“懶”的,用戶所處的環(huán)境是復(fù)雜的,用戶是焦慮的,用戶是迷茫的,所以我們在進(jìn)行產(chǎn)品設(shè)計的時候就需要考慮怎樣的方式對用戶來說是最便捷有效的。

本片文章只列舉了一些技巧的使用場景,但是不限于此,大家可以根據(jù)自己的產(chǎn)品將這些技巧進(jìn)行靈活的運用,最后希望大家都設(shè)計出體驗感特別棒的產(chǎn)品~

 

每天更新,
全站高品質(zhì)素材免費下載!