小功能大學(xué)問(wèn)——搜索框應(yīng)該怎么設(shè)計(jì)?
搜索對(duì)于一個(gè)互聯(lián)網(wǎng)產(chǎn)品來(lái)說(shuō),看起來(lái)是個(gè)小功能,能搜出東西就行,但是其實(shí)是一個(gè)很細(xì)致的功能,甚至有可能形象到產(chǎn)品內(nèi)的轉(zhuǎn)化。
最近在優(yōu)化上線的app,發(fā)現(xiàn)搜索框其實(shí)是一個(gè)很細(xì)致的東西,在做電商項(xiàng)目和用戶溝通的時(shí)候,很多用戶覺(jué)得這個(gè)APP或者小程序不好用,很大程度是因?yàn)樗阉鞑坏阶约合胍臇|西。
我需要的是蘋(píng)果,搜索后你給我的結(jié)果是梨子。這就會(huì)讓用戶覺(jué)得很困擾,并且會(huì)想這個(gè)平臺(tái)到底有沒(méi)有我需要的東西。如果多次搜索結(jié)果都是達(dá)不到預(yù)期,用戶很有可能會(huì)放棄這個(gè)產(chǎn)品。
所以搜索功能其實(shí)并不小,甚至有可能影響到業(yè)務(wù)轉(zhuǎn)化數(shù)據(jù),并不是說(shuō)能有這個(gè)功能就可以了。
以下的思維導(dǎo)圖為思考的方向。
一、淘寶搜索框分析
1. 搜索框下方內(nèi)容顯示方式——完全實(shí)時(shí)
以淘寶為例,點(diǎn)擊搜索框后輸入內(nèi)容,搜索框下方會(huì)實(shí)時(shí)顯示內(nèi)容相關(guān)的條目,并且會(huì)補(bǔ)充搜索關(guān)鍵字。
2. 搜索范圍——全局搜索
進(jìn)行了第一部根據(jù)關(guān)鍵字的搜索后,跳轉(zhuǎn)到新的頁(yè)面,才能進(jìn)行更細(xì)致的分類搜索。
3. 實(shí)時(shí)搜索出來(lái)的內(nèi)容是否被分類——無(wú)
實(shí)時(shí)搜索出的內(nèi)容會(huì)根據(jù)關(guān)鍵字進(jìn)行補(bǔ)充,沒(méi)有對(duì)具體商品的機(jī)型、品牌進(jìn)行預(yù)分類。
4. 搜索按鈕功能——象征意義大于功能意義
淘寶的首頁(yè)的搜索框無(wú)論是點(diǎn)擊搜索框還是搜索按鈕,最后都會(huì)跳轉(zhuǎn)到新的頁(yè)面,也就是說(shuō),兩者其實(shí)是相同的功能,引導(dǎo)搜索。
按照視覺(jué)動(dòng)線來(lái)說(shuō),輸入內(nèi)容后,更多人會(huì)選擇會(huì)點(diǎn)擊下方的顯示條目,而不是搜索按鈕。
搜索按鈕的功能性被弱化,淘寶的搜索更多是為了補(bǔ)充搜索內(nèi)容的信息,進(jìn)行更精準(zhǔn)的定位。
5. 淘寶搜索功能總結(jié)
電商平臺(tái)的產(chǎn)品會(huì)有一個(gè)很明顯的特稱,產(chǎn)品的名稱或者簡(jiǎn)介都會(huì)有很多的關(guān)鍵字,有時(shí)候一個(gè)商品名可能長(zhǎng)達(dá)30個(gè)字,目的就是為了用戶搜索的時(shí)候可以能夠根據(jù)關(guān)鍵字搜到商品,所以一個(gè)商品的關(guān)鍵字足夠多,那么被搜到的概率就會(huì)提升。
這種實(shí)時(shí)并補(bǔ)充關(guān)鍵字的設(shè)計(jì)個(gè)人認(rèn)為很大程度上就是為用戶去篩選長(zhǎng)名稱的商品,而且給用戶提供具體的性別信息,設(shè)計(jì)取向,從而減少用戶的時(shí)間成本。
而且全局搜索的種類繁多,一個(gè)商品可能會(huì)有多個(gè)分類屬性,因?yàn)檫M(jìn)行了商品定位后,在進(jìn)行商品分類,得出的搜索結(jié)果會(huì)更讓用戶滿意。
建議像電商、應(yīng)用商城等這些有較多的分類,較多商品的應(yīng)用,適用這種搜索模式,一步步引導(dǎo)用戶做精準(zhǔn)的搜索,如果搜索不到相應(yīng)內(nèi)容,也應(yīng)該給出提示,說(shuō)你想要的蘋(píng)果我們這里沒(méi)有賣,建議你看一下梨子。
而不是把梨子放出來(lái)說(shuō),你愛(ài)要就要,不要這里你也搜不到。
二、微信首頁(yè)搜索功能分析
1. 搜索框下方內(nèi)容顯示方式——部分實(shí)時(shí)
以微信為例,首頁(yè)的搜索并非完全實(shí)時(shí),會(huì)區(qū)分為兩個(gè)模塊,一個(gè)模塊是該賬戶關(guān)注的內(nèi)容,以及聊天信息,朋友圈等實(shí)時(shí)顯示,另一部分為未關(guān)注的內(nèi)容等需要點(diǎn)擊“搜一搜”跳轉(zhuǎn)到另一個(gè)頁(yè)面顯示。
2. 搜索范圍——全局搜索
微信首頁(yè)的搜索不僅僅針對(duì)用戶本身產(chǎn)生行為的內(nèi)容,也就是進(jìn)行聊天、關(guān)注后的內(nèi)容,而且也針對(duì)其他用戶產(chǎn)生的內(nèi)容。
3. 實(shí)時(shí)搜索出來(lái)的內(nèi)容是否被分類——有
首頁(yè)的搜索內(nèi)容包括朋友圈、文章、公眾號(hào)、小程序、音樂(lè)、表情,而被分類的內(nèi)容包括關(guān)注的公眾號(hào)、聊天記錄等等。
個(gè)人認(rèn)為將這些內(nèi)容進(jìn)行模塊分類的原因,其一是方便用戶查找信息,很多時(shí)候我們查找自己行為產(chǎn)生的信息,其實(shí)已經(jīng)定位過(guò)我是在哪里看到的,比如是公眾號(hào)的某一段,比如是聊天的時(shí)候的信息;其二是因?yàn)樗](méi)有像商品一般有過(guò)長(zhǎng)的條目,搜索的內(nèi)容并不需要曝光量,而是用戶自己的行為,用戶需要找到因?yàn)樽约旱男袨槎a(chǎn)生的內(nèi)容,或許是進(jìn)行二次分享,或許是進(jìn)行查看等操作。
4. 搜索按鈕功能——象征意義大于功能意義
從圖上我們能更明顯的看到,微信對(duì)比淘寶,它連搜索按鈕都沒(méi)有給到,而是直接在下方給予搜一搜的入口,搜索框后面是“取消”功能,點(diǎn)擊取消后可以直接跳轉(zhuǎn)到上一個(gè)頁(yè)面。取消按鈕放在搜索框的后方,而且不顯眼,用戶一般很少會(huì)用到這個(gè)功能,因?yàn)橐曈X(jué)動(dòng)線和視覺(jué)效果都并不引起用戶的關(guān)注。
試想一下我們會(huì)在社交產(chǎn)品里進(jìn)行搜索操作的時(shí)候會(huì)搜索什么?好友、聊天記錄、文章。也就是說(shuō),實(shí)時(shí)顯示里有的就是有了,沒(méi)有你就只能去搜索別的用戶產(chǎn)生的內(nèi)容。
根據(jù)視覺(jué)動(dòng)線,下方的“搜一搜”入口其實(shí)是強(qiáng)化了搜索入口的視覺(jué),而它在我個(gè)人看來(lái),比起一個(gè)搜索按鈕,更像是一個(gè)搜索出來(lái)的內(nèi)容的標(biāo)題。
5. 微信首頁(yè)搜索功能總結(jié)
對(duì)于通信社交產(chǎn)品而言,搜索功能可能承載的需求并沒(méi)有那么的重要,不像電商一樣是一個(gè)轉(zhuǎn)化的入口,而這個(gè)搜索功能更像是一個(gè)目錄的存在,內(nèi)容都已經(jīng)寫(xiě)好了,你把目錄找出來(lái)就可以看到對(duì)應(yīng)的內(nèi)容。
可能對(duì)于某些內(nèi)容輸出者而言這個(gè)功能還是挺有用的,比如可以找到對(duì)應(yīng)的公眾號(hào)或者文章,但是前提還是要讓用戶先知道有這篇東西,有這個(gè)公眾號(hào)。
所見(jiàn)即所得,所知即所查。
三、某個(gè)外貿(mào)APP地址搜索功能分析
1. 搜索框下方內(nèi)容顯示方式——非實(shí)時(shí)
習(xí)慣了實(shí)時(shí)顯示這種搜索內(nèi)容顯示的方式之后,還是我第一次遇到非實(shí)時(shí)顯示搜索內(nèi)容的情況,比如需要搜索GOOGLE MAP的地址的時(shí)候,如果讀者有遇到其他有限制的情況歡迎評(píng)論~
輸入內(nèi)容后需要點(diǎn)擊搜索按鈕才可以顯示對(duì)應(yīng)的搜索內(nèi)容。
2. 搜索范圍——局部搜索
僅僅搜索用戶在地址簿上的內(nèi)容。
3. 實(shí)時(shí)搜索出來(lái)的內(nèi)容是否被分類——無(wú)
因?yàn)閭€(gè)人信息的問(wèn)題這里就不貼圖了,但是個(gè)人認(rèn)為其實(shí)可以按照省/市的方式去進(jìn)行分類,像外貿(mào)的產(chǎn)品,一個(gè)用戶可能會(huì)有高達(dá)數(shù)十個(gè)地址,那么除了搜索功能之外,更容易定位到具體地址的方式就是按照地址所在區(qū)域進(jìn)行分類。
4. 搜索按鈕功能——功能意義大于象征意義
像這種搜索有限制的話,搜索按鈕的功能意義大于象征意義,輸入后必須要進(jìn)行搜索才可以得出內(nèi)容。
因此,在設(shè)計(jì)搜索功能交互的時(shí)候,最好去了解一下某些限制條件,避免需求完成后卻達(dá)不到想要的結(jié)果。
從圖上看功能意義大于象征意義的時(shí)候,搜索按鈕更應(yīng)該做一些突出顯示,現(xiàn)在的設(shè)計(jì)其實(shí)是不符合用戶體驗(yàn)的,搜索按鈕僅僅是文字,而且為灰色,對(duì)于新用戶而言其實(shí)會(huì)造成一定的操作困擾,優(yōu)化方向可以使用品牌色將文字進(jìn)行按鈕化,其次可以把搜索放在搜索框的下方,而不是放在搜索框的后方。
5. WEB端的優(yōu)化
既要做全局搜索,又要做局部搜索,個(gè)人認(rèn)為需要將局部搜索的入口放在特定的頁(yè)面,而不是將它放在同一個(gè)頁(yè)面,這樣會(huì)造成用戶的迷惑,兩個(gè)功能是否一樣?哪一個(gè)入口能夠滿足我的需求。
如果以WEB端為例的話,以下這個(gè)搜索就是一個(gè)錯(cuò)誤的設(shè)計(jì)。
優(yōu)化方式可以把局部的搜索刪除,最上面的全局搜索如果在點(diǎn)進(jìn)了分類之后,搜索范圍與分內(nèi)的內(nèi)容自動(dòng)適配。
也就是說(shuō),搜索框的范圍會(huì)隨著點(diǎn)擊的分類范圍而改變。
6. 某個(gè)外貿(mào)APP搜索功能總結(jié)
對(duì)應(yīng)有限制的搜索,如果不知道有這些限制的話,在測(cè)試的時(shí)候應(yīng)該盡早提出優(yōu)化方案,如果提前知道的話,更應(yīng)該配合設(shè)計(jì)去做一些界面上的優(yōu)化。
搜索功能的設(shè)計(jì),搜索出來(lái)的內(nèi)容對(duì)于下一步的操作有著很重要的意義,搜索作為最容易得到結(jié)果的功能,如果操作步驟上有卡頓或者讓用戶感到迷茫,就會(huì)很容易造成流失。
最好的話,搜索功能可以進(jìn)行埋點(diǎn),用數(shù)據(jù)去看搜索后到下一個(gè)頁(yè)面的轉(zhuǎn)化情況。數(shù)據(jù)驅(qū)動(dòng),可以得到更優(yōu)解,但是前提數(shù)據(jù)是較為準(zhǔn)確的情況。
總結(jié)
搜索對(duì)于一個(gè)互聯(lián)網(wǎng)產(chǎn)品來(lái)說(shuō),看起來(lái)是個(gè)小功能,能搜出東西就行,但是其實(shí)是一個(gè)很細(xì)致的功能,甚至有可能形象到產(chǎn)品內(nèi)的轉(zhuǎn)化。功能雖小,作用很大,以上就是我對(duì)搜索功能的一些思考。
歡迎指正。
本文由 @Feng 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
很有用,謝謝作者的分享 ??