交互設(shè)計(jì)師要懂的預(yù)判設(shè)計(jì)
編輯導(dǎo)讀:預(yù)判設(shè)計(jì)(Anticipatory Design)是一種能夠引導(dǎo)用戶、縮短用戶行為路徑的有效設(shè)計(jì)手段。預(yù)判設(shè)計(jì),可以根據(jù)用戶的行為/用戶所在的場(chǎng)景,讓功能主動(dòng)找到用戶,并讓用戶與之產(chǎn)生自然的交互。本文圍繞預(yù)判設(shè)計(jì)進(jìn)行了七個(gè)維度的深入分析,希望對(duì)你有幫助。
一、關(guān)于預(yù)判設(shè)計(jì)
本文要講的內(nèi)容是“預(yù)判設(shè)計(jì)”,在此之前,我想先聊聊我們?nèi)粘V谐R?jiàn)的的用戶操作路徑,用戶在使用產(chǎn)品時(shí),往往是:產(chǎn)生操作目標(biāo)——找到操作對(duì)象——進(jìn)行對(duì)應(yīng)操作——完成操作。
這種操作模式符合我們對(duì)于絕大多數(shù)產(chǎn)品使用的認(rèn)知,交互設(shè)計(jì)師在設(shè)計(jì)用戶行為路徑時(shí),往往是以功能為出發(fā)點(diǎn),通過(guò)功能優(yōu)先級(jí),將功能分布排列,用戶在界面中找到功能并進(jìn)行操作。 這本質(zhì)上還是依賴于用戶的主動(dòng)觸發(fā),一般來(lái)講,如果用戶不主動(dòng)觸發(fā),就不會(huì)產(chǎn)生后續(xù)行為。
設(shè)計(jì)心理學(xué)中提到,當(dāng)用戶操作一個(gè)設(shè)備,他們會(huì)面對(duì)兩個(gè)心理鴻溝:一個(gè)是執(zhí)行的鴻溝,在這里,用戶試圖弄清楚如何操作;另一個(gè)是評(píng)估的鴻溝,在那里,他們?cè)噲D弄清楚設(shè)備處于什么狀態(tài),他們采取的行動(dòng)是否實(shí)現(xiàn)了目的。
預(yù)判設(shè)計(jì)側(cè)重于解決第一個(gè)鴻溝:執(zhí)行的鴻溝。在產(chǎn)品功能紛繁復(fù)雜的當(dāng)下,界面中的功能元素、信息元素愈發(fā)復(fù)雜,有的時(shí)候,用戶想要在一個(gè)界面中找到某個(gè)功能、操作某個(gè)功能并不輕松。預(yù)判設(shè)計(jì),可以根據(jù)用戶的行為/用戶所在的場(chǎng)景,讓功能主動(dòng)找到用戶,并讓用戶與之產(chǎn)生自然的交互。
舉個(gè)新建收貨地址的例子,我們會(huì)經(jīng)常遇到填寫表單的場(chǎng)景,填寫信息的過(guò)程往往是繁瑣的、費(fèi)時(shí)的,這種過(guò)程并不讓人愉悅。
按照常規(guī)的操作模式,就是:填寫收貨人、手機(jī)號(hào)碼、所在地區(qū)、詳細(xì)地址等,設(shè)計(jì)師會(huì)在設(shè)計(jì)表單的過(guò)程中,優(yōu)化輸入的方式,但是這些都只是基于先出現(xiàn)用戶操作、再產(chǎn)生交互反饋的設(shè)計(jì)。
而預(yù)判設(shè)計(jì)則是在此基礎(chǔ)上,考慮用戶在新建收貨地址時(shí)場(chǎng)景的多樣性、用戶的行為。比如你是否出現(xiàn)過(guò)幫朋友買東西的情況?朋友通過(guò)微信發(fā)來(lái)收貨地址,如果通過(guò)來(lái)回切換淘寶/微信復(fù)制/粘貼輸入收貨信息,這種體驗(yàn)想必令人絕望。
而如果你復(fù)制了收貨地址,打開(kāi)新建收貨地址界面時(shí),App 出現(xiàn)提示彈窗“是否粘貼剛復(fù)制的地址信息?”,點(diǎn)擊“確認(rèn)粘貼”即可粘貼收貨地址到對(duì)應(yīng)列表項(xiàng),這種預(yù)判設(shè)計(jì)對(duì)于用戶來(lái)說(shuō)是自然且讓人愉悅的。這種設(shè)計(jì)現(xiàn)在已經(jīng)被廣泛運(yùn)用了,比如京東、淘寶、順豐等。
二、區(qū)分預(yù)判設(shè)計(jì)
預(yù)判設(shè)計(jì)首先是基于用戶本身的,即系統(tǒng)預(yù)測(cè)用戶即將做的事情,并且?guī)椭脩艨s短操作路徑,整個(gè)過(guò)程雖然是系統(tǒng)主動(dòng)發(fā)起,整體上卻是符合用戶整體預(yù)期的。而如果單純只由系統(tǒng)主動(dòng)觸發(fā),卻與用戶當(dāng)前行為沒(méi)有任何聯(lián)系,就不算預(yù)判設(shè)計(jì)。
比如說(shuō)運(yùn)營(yíng)彈窗,這種彈窗會(huì)在用戶剛進(jìn)入 App 時(shí)就彈出,只符合系統(tǒng)主動(dòng)觸發(fā)這一特性,但是用戶對(duì)彈窗的出現(xiàn)是沒(méi)有預(yù)期,這就容易形成干擾,也不符合預(yù)判設(shè)計(jì)的特征。
同樣是打開(kāi) App 即出現(xiàn)的彈窗,淘寶的好友分享彈窗則不同,這是一條常見(jiàn)的預(yù)判設(shè)計(jì)鏈路。手機(jī)淘寶無(wú)法通過(guò)微信直接調(diào)起,當(dāng)微信好友看到一個(gè)商品,并復(fù)制淘口令通過(guò)微信發(fā)送給你,你復(fù)制了淘口令打開(kāi)淘寶,App 自動(dòng)彈出分享彈窗,這條行為路徑存在關(guān)聯(lián)性的,可以被預(yù)測(cè)成“打開(kāi)淘寶并查看朋友分享的商品”。
三、預(yù)判設(shè)計(jì)的行為與場(chǎng)景
用戶的交互行為是多樣,常見(jiàn)的有復(fù)制/剪切、截圖、手勢(shì)(如搖一搖)等,從理論上講,用戶的各種行為都存在提供預(yù)判設(shè)計(jì)指引的可能性。
預(yù)判設(shè)計(jì)與用戶行為、功能場(chǎng)景是緊密關(guān)聯(lián)的,或者說(shuō),系統(tǒng)基于用戶操作的行為或用戶所處的場(chǎng)景才能形成合理的預(yù)判,否則很容易引起用戶反感。 同一個(gè)行為,在不同場(chǎng)景,也會(huì)存在不同的預(yù)判設(shè)計(jì)方向。
1. 淘寶截圖在搜索場(chǎng)景的預(yù)判
淘寶有強(qiáng)大的圖片搜索功能,我們?cè)谑褂锰詫殨r(shí)會(huì)有以圖搜物的習(xí)慣,而淘寶不是簡(jiǎn)單地只提供圖片搜索的入口。當(dāng)用戶截圖或保存圖片至手機(jī)之后,在短時(shí)間內(nèi)觸發(fā)搜索功能,搜索框內(nèi)的圖片搜索按鈕就會(huì)自動(dòng)提示“你可能搜索的照片”,點(diǎn)擊就可以直接搜索。
淘寶會(huì)判斷用戶是希望搜索最近的一張圖片,因?yàn)椤氨4鎴D片/截圖——搜索”的行為存在潛在的強(qiáng)關(guān)聯(lián)性。基于預(yù)判設(shè)計(jì),用戶不需要點(diǎn)擊圖片搜索按鈕——選擇圖片,將操作路徑縮短。假如用戶手速快或者點(diǎn)擊圖片搜索按鈕本身,進(jìn)入圖片搜索功能頁(yè),該提示依然會(huì)出現(xiàn)。
這種預(yù)判形式是非阻斷性的,只作為一種輔助建議,而并非強(qiáng)制提示,即使用戶不想點(diǎn)擊預(yù)測(cè)的圖片,也不會(huì)影響操作流程。
2. 淘寶截圖在其他場(chǎng)景的預(yù)判
同樣是截圖操作,在淘寶的其他場(chǎng)景有不同的預(yù)判交互。比如在淘寶的商品列表頁(yè)截圖,截圖的提示就不再僅是提示搜索圖片同款,也存在“好友分享”、“問(wèn)題反饋”等操作。
原因是用戶在該場(chǎng)景存在比較復(fù)雜的潛在交互行為,而搜索場(chǎng)景中則更聚焦于圖片搜索行為。由此可見(jiàn),行為是和場(chǎng)景緊密關(guān)聯(lián)在一起的,即使是同一交互行為,在不同的場(chǎng)景中有著不同的預(yù)判方向。交互設(shè)計(jì)師在設(shè)計(jì)時(shí),需關(guān)注行為與場(chǎng)景的關(guān)聯(lián)性。
在一些特定場(chǎng)景中,預(yù)判設(shè)計(jì)并非必須通過(guò)用戶行為進(jìn)行預(yù)判。
以粵省事為例,粵省事小程序的許多功能是與地理位置強(qiáng)相關(guān)的,地理位置不同會(huì)影響展示信息的可用性、準(zhǔn)確性。當(dāng)定位到用戶所在城市發(fā)生變化,即使用戶未進(jìn)行任何交互行為,粵省事也會(huì)假定用戶需要基于正確的地理位置才能正確執(zhí)行相應(yīng)的操作。
一般來(lái)說(shuō),用戶即使跨省/市,位置信息發(fā)生變化,認(rèn)知上也是不會(huì)意識(shí)到要在小程序中切換所在城市的,而如果不切換,就會(huì)影響小程序的體驗(yàn)(粵省事社保公積金等信息都是與城市強(qiáng)綁定)。所以粵省事通過(guò)獲取所在地理位置信息,主動(dòng)提示用戶是否切換到當(dāng)前城市。
支付寶的信息推薦的數(shù)據(jù)也是基于地理信息,檢測(cè)到用戶所在城市發(fā)生變化,也進(jìn)行了主動(dòng)提示,但是提示層級(jí)較弱,采用底部提示條的形式,不阻斷用戶的主要行為路徑。
四、預(yù)判設(shè)計(jì)的作用
預(yù)判設(shè)計(jì)對(duì)于體驗(yàn)與商業(yè)都存在正向作用,比如幫助用戶縮短操作路徑、聚焦價(jià)值信息、提升商業(yè)轉(zhuǎn)化等,下面會(huì)通過(guò)常見(jiàn)的設(shè)計(jì)進(jìn)行解釋。
五、縮短操作路徑
預(yù)判設(shè)計(jì)是一種主動(dòng)式交互,最明顯的作用就是縮短用戶交互路徑,降低操作繁瑣程度,最終目的是降低用戶操作成本,提升交互體驗(yàn)。
1. Chrome 瀏覽器搜索時(shí)主動(dòng)提示
搜索作為瀏覽器的核心功能,在搜索這種場(chǎng)景上,當(dāng)然也需要仔細(xì)挖掘細(xì)膩的交互細(xì)節(jié)。用戶在 Chrome 瀏覽器搜索時(shí),瀏覽器會(huì)檢測(cè)用戶剛剛是否復(fù)制過(guò)文字,如果有,則以輕量的搜索聯(lián)想形式提示“您復(fù)制的文字”,用戶點(diǎn)擊即可直接搜索。
用戶復(fù)制了文本——點(diǎn)擊搜索框,這兩個(gè)行為之間是存在關(guān)聯(lián)性的,Chrome 預(yù)判用戶將要搜索粘貼板的文字信息,這種主動(dòng)提示比起用戶手動(dòng)點(diǎn)擊兩次搜索框后再粘貼文本更加便捷,降低了操作成本。
2. 網(wǎng)易云截圖分享
用戶通過(guò)網(wǎng)易云截圖后,App 會(huì)主動(dòng)提示用戶將截圖分享給好友,提供可以分享的渠道和方式,用戶可以一鍵分享,不需要截圖之后再手動(dòng)切換到其他應(yīng)用分享的繁瑣流程。
截圖后提示用戶分享的設(shè)計(jì)形式,已經(jīng)在各大互聯(lián)網(wǎng)產(chǎn)品上很常見(jiàn)了,這也屬于預(yù)判設(shè)計(jì)。網(wǎng)易云音樂(lè)重視社交,許多用戶截圖后有分享的習(xí)慣,比如分享歌詞。截圖+分享的模式無(wú)論對(duì)于縮短用戶路徑,或者產(chǎn)品分享曝光而言,都有明顯好處,并且這種形式具備強(qiáng)通用性,很多產(chǎn)品都可以采用,所以在很多產(chǎn)品上都可以看到這種設(shè)計(jì)。
3. iPhone 鬧鐘關(guān)閉提示
當(dāng)用戶用 iPhone 設(shè)了起床鬧鐘,如果系統(tǒng)檢測(cè)到鬧鐘響之前的一段時(shí)間內(nèi),用戶在操作手機(jī),就會(huì)彈出彈窗,提示“您好像已經(jīng)醒了,要關(guān)閉鬧鐘嗎?”,詢問(wèn)用戶是否關(guān)掉還未響的鬧鐘。
作為上班族,估計(jì)許多朋友都會(huì)設(shè)好幾個(gè)鬧鐘,避免一個(gè)鬧鐘叫不醒,遲到罰錢工資白領(lǐng)。但是如果起床之后,發(fā)現(xiàn)后面的鬧鐘忘記關(guān)掉,在洗漱的時(shí)候鬧鐘突然響起也是挺鬧心的。iPhone 會(huì)通過(guò)檢測(cè)用戶使用手機(jī)的行為(一般起床之前玩玩手機(jī)是許多人的習(xí)慣),預(yù)判用戶已經(jīng)醒了,并彈出相應(yīng)提示,這樣可以避免用戶忘記關(guān)鬧鐘的情況,同時(shí)也幫助用戶縮短關(guān)閉鬧鐘的路徑。
4. iPhone 驗(yàn)證碼粘貼設(shè)計(jì)
iOS 12 上線了短信驗(yàn)證碼粘貼功能,這是一個(gè)網(wǎng)友千呼萬(wàn)喚始出來(lái)的功能,即當(dāng)你的 iPhone 收到一條短信驗(yàn)證碼,iOS 自帶的輸入法上方,會(huì)出現(xiàn)“來(lái)自短信”和驗(yàn)證碼的提示,可以直接點(diǎn)擊粘貼。
在 iOS 12 之前,iPhone 收到驗(yàn)證碼后,是只能手動(dòng)輸入的,而安卓很早就能直接復(fù)制驗(yàn)證碼,這雖然是一個(gè)輸入的小細(xì)節(jié),對(duì)于許多用戶來(lái)說(shuō)卻很難受。用戶接收驗(yàn)證碼——輸入驗(yàn)證碼應(yīng)當(dāng)是十分明確的流程,這是一條顯而易見(jiàn)的預(yù)判路徑,所以使用起來(lái)也特別順手。
5. 微信輸入手勢(shì)撤銷
在使用微信打字時(shí),如果輸入到一半,想要清空所有文本,不需要一字一字刪除,可以通過(guò)搖一搖進(jìn)行撤銷。
這是一種隱藏交互,用戶一般在輸入文字時(shí),手機(jī)都是保持相對(duì)平穩(wěn)的狀態(tài),所以絕大部分狀態(tài)下不會(huì)觸發(fā)這種操作。而在發(fā)生搖一搖手勢(shì)時(shí),App 預(yù)判用戶的輸入行為已經(jīng)被打斷,此時(shí)會(huì)以彈窗形式提示用戶是否撤銷鍵入的內(nèi)容。
6. 微信發(fā)送圖片提示
用戶在手機(jī)截圖/保存圖片之后,使用微信調(diào)起輸入框,再點(diǎn)擊右側(cè)【+】按鈕,會(huì)提示是否發(fā)送當(dāng)前圖片。
微信的這種操作與上方淘寶的搜索圖片引導(dǎo)相似,如果截圖之后日常點(diǎn)擊輸入框,此時(shí)并不會(huì)有圖片發(fā)送提示,因?yàn)檩斎胛谋拘畔?發(fā)送語(yǔ)音是很平常的操作。當(dāng)用戶點(diǎn)擊【+】按鈕,發(fā)送圖片的潛在行為才被激發(fā),存在明顯的可預(yù)判性。
7. 印象筆記
印象筆記有素材庫(kù)功能,當(dāng)用戶將圖片存儲(chǔ)至素材庫(kù),能在印象筆記的多端同步。用戶截圖之后,如果打開(kāi)印象筆記,就會(huì)彈出是否將屏幕快照添加到素材庫(kù)。
App 會(huì)預(yù)判用戶的目標(biāo)是發(fā)生與圖片相關(guān)的行為,對(duì)于不了解素材庫(kù)的用戶而言,可以通過(guò)這種自然的提示交互了解素材庫(kù)的功能,加強(qiáng)用戶對(duì)產(chǎn)品功能的了解。
六、聚焦關(guān)鍵信息
預(yù)判設(shè)計(jì)除了縮短用戶路徑,還可以通過(guò)用戶行為,預(yù)判用戶關(guān)注的內(nèi)容,幫助用戶聚焦到關(guān)鍵信息,同時(shí)避免分散用戶注意力,讓有價(jià)值的信息得到充分的展示。
1. Safari
用戶通過(guò) Safari 瀏覽器進(jìn)行上滑瀏覽行為時(shí),瀏覽器會(huì)將頂部導(dǎo)航欄和底部操作欄隱藏;而當(dāng)用戶進(jìn)行下滑行為時(shí),導(dǎo)航欄及操作欄同時(shí)出現(xiàn)。
這種設(shè)計(jì)時(shí)預(yù)判了用戶在上滑瀏覽行為中(正常瀏覽),關(guān)注目標(biāo)在于界面內(nèi)容,此時(shí)為了聚焦關(guān)鍵的內(nèi)容信息及內(nèi)容的充分展示,將與當(dāng)前行為相對(duì)無(wú)關(guān)的信息進(jìn)行隱藏。而當(dāng)用戶停止正常的滑動(dòng)行為,進(jìn)行反向操作(下滑)時(shí),關(guān)注的目標(biāo)發(fā)生變化,此時(shí)可能要進(jìn)行其他操作,所以將導(dǎo)航欄標(biāo)簽欄等信息均正常展示出來(lái),整個(gè)過(guò)程是很自然的。
2. 夸克
用戶通過(guò)夸克搜索精準(zhǔn)詞時(shí),會(huì)根據(jù)詞語(yǔ)優(yōu)先推薦關(guān)鍵信息卡片,用戶可以快速關(guān)注到這種卡片,不需要在許多聯(lián)想詞中尋找符合搜索目標(biāo)的詞語(yǔ)。
夸克的搜索聯(lián)想狀態(tài)進(jìn)行了特殊處理,如果用戶搜索的是非精準(zhǔn)詞語(yǔ)時(shí),App 無(wú)法精準(zhǔn)判斷用戶搜索目標(biāo),所以只展示文字聯(lián)想信息。當(dāng)用戶搜索詞語(yǔ)可以被精準(zhǔn)預(yù)判時(shí),關(guān)鍵信息卡片,聚焦于關(guān)鍵信息,提升用戶搜索的效率。
3. 淘寶搜索關(guān)鍵詞
用戶在淘寶搜索關(guān)鍵詞時(shí),這些產(chǎn)品會(huì)根據(jù)搜索詞,在搜索聯(lián)想之外,給出更精準(zhǔn)的搜索預(yù)判,樣式上與普通的搜索聯(lián)想詞有所區(qū)分。
這種設(shè)計(jì)是基于搜索詞算法本身的關(guān)聯(lián)預(yù)判,幫助用戶快速發(fā)現(xiàn)價(jià)值信息。
七、提升商業(yè)轉(zhuǎn)化
預(yù)判設(shè)計(jì)對(duì)于商業(yè)化而言的效果是毋庸置疑的,因?yàn)檫@種設(shè)計(jì)可以將行為于商業(yè)化推薦緊密關(guān)聯(lián)在一起,讓用戶察覺(jué)到“與我有關(guān)”,降低用戶的反感和突兀感、廣告感。
1. 淘寶信息流卡片
當(dāng)用戶點(diǎn)擊淘寶信息流感興趣的商品卡片時(shí),返回信息流后卡片會(huì)根據(jù)用戶點(diǎn)擊卡片的行為進(jìn)行相關(guān)的算法推薦,并將相鄰的卡片進(jìn)行推薦處理。
理論上講,用戶的觸發(fā)是與動(dòng)機(jī)緊密關(guān)聯(lián)的(除了誤觸行為),所以在瀏覽淘寶信息流時(shí),如果用戶點(diǎn)擊某商品,一定程度上可以說(shuō)明用戶被當(dāng)前商品所吸引,所以在點(diǎn)擊查看商品后,通過(guò)用戶行為預(yù)判了用戶喜歡的商品類型并進(jìn)行相應(yīng)展示,對(duì)于商品推薦的轉(zhuǎn)化也有一定幫助。
2. 美團(tuán)外賣
美團(tuán)外賣的信息流卡片與淘寶的預(yù)判設(shè)計(jì)邏輯一致,同樣也是根據(jù)用戶行為進(jìn)行相關(guān)推薦。
3. taptap
用戶在 taptap 瀏覽視頻時(shí),如果在視頻流中某個(gè)游戲視頻播放時(shí)停留數(shù)秒,該視頻下方會(huì)通過(guò)動(dòng)畫形式展示明確的跳轉(zhuǎn)入口,用戶可以點(diǎn)擊查看更多。
這種設(shè)計(jì)最早應(yīng)該是在 ins 等產(chǎn)品上出現(xiàn),后面國(guó)內(nèi)的綠洲等產(chǎn)品也采用了這種設(shè)計(jì)。妙在并非一開(kāi)始就將入口直接展示,而是在預(yù)判用戶對(duì)當(dāng)前視頻感興趣后,進(jìn)行輕量化提示。
八、結(jié)語(yǔ)
本文介紹了常見(jiàn)的預(yù)判設(shè)計(jì)形式,但實(shí)際上還有更廣泛的運(yùn)用。預(yù)判設(shè)計(jì)并不神秘,在我們?nèi)粘J褂玫漠a(chǎn)品中,經(jīng)??梢酝诰虻竭@種設(shè)計(jì)。
預(yù)判設(shè)計(jì)更強(qiáng)調(diào)于交互流程上的優(yōu)化,在展示上往往不是“常態(tài)”而是“臨時(shí)態(tài)”的,讓功能在合適的場(chǎng)景找到用戶,而非靠用戶主動(dòng)去尋找功能,降低用戶的操作成本,正因如此,才顯得這種設(shè)計(jì)形式十分巧妙,讓體驗(yàn)更加流暢。
希望本文能夠?qū)Υ蠹矣袔椭?/p>
本文由 @熱風(fēng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
請(qǐng)問(wèn)交互設(shè)計(jì)是否要先懂前端和后臺(tái)開(kāi)發(fā)才能做好設(shè)計(jì)吶
最重要還是交互設(shè)計(jì)本身的思考,當(dāng)然,了解開(kāi)發(fā)知識(shí)能讓和研發(fā)同學(xué)溝通更順暢一些,以及設(shè)計(jì)方案更好落地
學(xué)到了!感謝
那就好~
這種交互動(dòng)態(tài)視頻是怎么做的
需要視頻轉(zhuǎn) Gif