移動產(chǎn)品設(shè)計(jì)中信息錄入技巧

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

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

目錄:

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

2. 輸入中 - 高效輸入

3. 輸入后 - 糾錯+上傳

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

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

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

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

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

image

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

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

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

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

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

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

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

image

小結(jié):

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

輸入中 - 高效輸入

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

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

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

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

image

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

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

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

image

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)你點(diǎn)擊該圖標(biāo)詞條列表的關(guān)鍵信息就會出現(xiàn)在搜索框里面野芒,然后出現(xiàn)更精細(xì)的聯(lián)想內(nèi)容蓄愁。通過這種形式幫助用戶進(jìn)行精細(xì)化的搜索。eg. 淘寶

image

4. 自動填寫

說到這里就不得不提一下IOS最新更新的系統(tǒng)里有一個非常好的體驗(yàn)狞悲,就是可以直接對驗(yàn)證碼進(jìn)行識別撮抓,這樣用戶就不用去記憶并填寫驗(yàn)證碼。但是Android在效率這方面會做的更好摇锋,因?yàn)樗梢灾苯訉Ⅱ?yàn)證碼直接輸入丹拯,跳轉(zhuǎn)進(jìn)入,我自己非常喜歡這種方式(是不是有安全風(fēng)險不在這次討論范圍之內(nèi))荸恕,因?yàn)槲以谑褂卯a(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è)置的時候可以不要這兩個表單項(xiàng),最后想想還是不合適蔑赘,因?yàn)楹芏嗳说纳崭矸葑C上不一樣)

image

5. 拍照識別

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

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

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

eg. 搜索的文字識別功能兴想,因?yàn)槲覀兠總€月都要看一本書幢哨,并且要提交讀書筆記,以前的都是用很笨的辦法嫂便,摘抄捞镰,一個字一個字的輸入電腦里,極大的降低了讀書效率顽悼,每次寫讀書筆記就耗費(fèi)很多的時間曼振。后來師傅推薦了一個特別牛的軟件很好的解決了我的問題,它就是搜狗的文字識別蔚龙,是搜狗輸入法里的一個功能冰评,識別的準(zhǔn)確率高達(dá)97%。

image

6. 語音識別

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

語音識別廣泛應(yīng)用在各種場景中绝页,搜索荠商、評論,對話框等等续誉,發(fā)展速度非忱趁唬快,甚至可以識別方言酷鸦。

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

image

7. 利用滑塊

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

我們公司在設(shè)計(jì)用戶疼痛等級的時候就利用的滑塊的設(shè)計(jì)手法,因?yàn)槿绻苯幼層脩糨斎胱约旱奶弁吹燃売脩艨赡軟]有概念,所以就將疼痛分級戈毒,并且對每種疼痛進(jìn)行描述质况,再借用這種滑塊的形式,用戶就可以快速選擇出跟自己感受相同的疼痛等級莺丑。

image

8. 范圍選擇

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

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

image

9. 利用圖像

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

image

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

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

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

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

image

小結(jié):

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

輸入后 - 糾錯+上傳

1. 錯誤反饋

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

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

image

2. 自動糾錯

這個功能很厲害唁盏,我在體驗(yàn)的時候是被震驚了,可以直接幫我糾正錯誤的輸入检眯。

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

image

3. 后臺提交

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

提前上傳:用戶錄入圖片或視頻信息的時候就直接將信息上傳至服務(wù)器甘晤,這樣用戶提交的時候就會很快完成上傳,這種處理方式對服務(wù)器的壓力會比較大饲做,因?yàn)橛脩艉芸赡軙谔峤恢胺磸?fù)更改影像信息线婚;

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

image

小結(jié):

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

總結(jié)

信息錄入的效率對用戶使用產(chǎn)品的體驗(yàn)感影響越來越大,因?yàn)橛脩羰恰皯小钡拇匠ǎ脩羲幍沫h(huán)境是復(fù)雜的,用戶是焦慮的咒彤,用戶是迷茫的疆柔,所以我們在進(jìn)行產(chǎn)品設(shè)計(jì)的時候就需要考慮怎樣的方式對用戶來說是最便捷有效的。

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末歇拆,一起剝皮案震驚了整個濱河市鞋屈,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌故觅,老刑警劉巖厂庇,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異输吏,居然都是意外死亡权旷,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進(jìn)店門贯溅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來拄氯,“玉大人躲查,你說我怎么就攤上這事∫氚兀” “怎么了镣煮?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長鄙麦。 經(jīng)常有香客問我典唇,道長,這世上最難降的妖魔是什么黔衡? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任蚓聘,我火速辦了婚禮,結(jié)果婚禮上盟劫,老公的妹妹穿的比我還像新娘夜牡。我一直安慰自己,他們只是感情好侣签,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布塘装。 她就那樣靜靜地躺著,像睡著了一般影所。 火紅的嫁衣襯著肌膚如雪蹦肴。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天猴娩,我揣著相機(jī)與錄音阴幌,去河邊找鬼。 笑死卷中,一個胖子當(dāng)著我的面吹牛矛双,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蟆豫,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼议忽,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了十减?” 一聲冷哼從身側(cè)響起栈幸,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎帮辟,沒想到半個月后速址,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡织阅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年壳繁,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡闹炉,死狀恐怖蒿赢,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情渣触,我是刑警寧澤羡棵,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站嗅钻,受9級特大地震影響皂冰,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜养篓,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一秃流、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧柳弄,春花似錦舶胀、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至萍丐,卻和暖如春轩端,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背逝变。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工基茵, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人壳影。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓耿导,卻偏偏與公主長得像,于是被迫代替她去往敵國和親态贤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 1醋火、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地?cái)?shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,982評論 3 119
  • 每天早上聽到鬧鐘的鈴聲悠汽,起床用手揉一揉朦朧的眼睛,只因?yàn)橐粫r的惰性芥驳,又睡去了柿冲,說好的鍛煉呢,說好的勤奮呢兆旬。 ...
    BJFSU閱讀 298評論 0 0
  • 像一杯硬水 熱的燙嘴 冰的寒胃 以為是溫水 咽下后 又傷了嗓子
    伍丁零閱讀 249評論 0 3