Day1:搜索框的設(shè)計(jì)(2days 4hours)
【學(xué)習(xí)part1—交互】
輸入框和提交按鈕的組合,頻率最高的組件。
設(shè)計(jì)范例:
·使用放大鏡圖標(biāo)(使用大眾理解趨于一致的圖標(biāo))
·搜索框明顯
·增加搜索按鈕:讓用戶可以同時通過按回車和點(diǎn)擊按鈕去觸發(fā)搜索。其實(shí)還是有很多用戶習(xí)慣去點(diǎn)擊頁面上的按鈕。
·為每一個張頁面加上搜索框:當(dāng)用戶找不到他們想要的內(nèi)容的時候,他們會去找搜索框,不管他們在你網(wǎng)站的哪個位置。(??)
·把搜索框放在用戶想出現(xiàn)的位置:,網(wǎng)站的左上角和右上角是用戶所期待的搜索框的位置,用戶在使用F型掃視法查看內(nèi)容的時候,可以輕松找到搜索框。
·合適的輸入欄尺寸:讓輸入欄長度大概保持在27個字左右(英文)就可以滿足90%的情況了。
·請為用戶列出自動候選項(xiàng):歷史記錄、關(guān)聯(lián)詞語、拼音修正
Tips:
確保自動候選欄是有用的。不好的候選項(xiàng)反而會讓用戶困惑。使用拼寫修正,辨別輸入,并且預(yù)測用戶想要搜索的內(nèi)容以為了提高使用體驗(yàn)。
你應(yīng)該以最快的速度列出建議選項(xiàng),大概三個字左右,就要快速列出候選項(xiàng)了,以來減少用戶后面的輸入。
控制在十個選項(xiàng)之內(nèi),不要用滾動條,以讓信息不會過多。
支持鍵盤選擇,當(dāng)用戶選到最后一個選項(xiàng)時,下一個選項(xiàng)應(yīng)該轉(zhuǎn)到第一個。ESC鍵應(yīng)該可以讓用戶離開候選列表。
標(biāo)出輸入與建議信息的不同處(例如:輸入信息用一般字重,建議信息用加粗字重)。
·請讓用戶更加清楚什么可以搜索
Part2 搜索框的產(chǎn)品設(shè)計(jì)
思路1:基于步驟的搜索設(shè)計(jì)(轉(zhuǎn)自菜花談產(chǎn)品)
第1步:輸入關(guān)鍵詞
信息錄入目前來說最常見的就是文字錄入,不過現(xiàn)在我們也開始看到新興的錄入方式:語音錄入和圖片錄入。
輸入關(guān)鍵詞這步主要考慮的包含2部分:關(guān)鍵詞識別和關(guān)鍵詞推薦
1、關(guān)鍵詞識別
對于輸入關(guān)鍵詞的識別上,通常要考慮以下幾種情況的搜索需求:
(1)多字符串識別
假設(shè)用戶提交了不只一個查詢串,那么搜索引擎需根據(jù)分隔符比如空格,標(biāo)點(diǎn)符號,將查詢串分割成若干子查詢串。例如,用戶輸入“氣墊 粉底 BB” 和“氣墊,粉底,BB” ,會展示所有包含“氣墊” 或“粉底”或 “BB” 三個關(guān)鍵詞的商品,而非同時包含這三個關(guān)鍵詞的商品。
根據(jù)下圖我們看到,小紅書和網(wǎng)易考拉都做了這種識別。不論輸入空格還是逗號,查詢結(jié)果都是一致的。
(2)分詞
除了多查詢串的識別,對長查詢串的分詞識別也是搜索最基礎(chǔ)的要求之一。分詞就是當(dāng)用戶提交了一個長字符串,可根據(jù)詞義分割成若干字符串。例如用戶輸入“遮瑕氣墊粉底bb霜”,能拆分成“遮瑕” “氣墊” “粉底” “bb霜”幾個詞串進(jìn)行匹配,而不是只匹配與搜索詞串完全相同的結(jié)果。
(3)錯別字識別
用戶在搜索時輸入錯別字也是不可避免的情況。例如,用戶搜索“永衣”,能給用戶按“泳衣”關(guān)鍵詞進(jìn)行推薦。
(4)同義詞近義詞
為了最大可能覆蓋用戶想要的結(jié)果,可建立一個同義詞近義詞的詞庫,當(dāng)沒有完全符合搜索詞的結(jié)果時,可推薦近義詞或同義詞的搜索結(jié)果,例如,在考拉中,用戶搜“花露水”,系統(tǒng)推薦了“驅(qū)蚊”關(guān)鍵詞的結(jié)果,并推薦了另2個相關(guān)關(guān)鍵詞。
(5)重復(fù)內(nèi)容識別
假設(shè)用戶提交的查詢有重復(fù)的內(nèi)容,可將重復(fù)查詢歸并成一個處理。例如“遮瑕氣墊粉底bb粉底”,能去重分詞為:“遮瑕”“氣墊”“粉底”“bb”
6)英文字母數(shù)字識別
查詢串中包含英文字母或數(shù)字,將英文或數(shù)字作為一個整體保留,做模糊匹配。例如:“sulwhasoo面膜”被拆分為“sulwhasoo”“面膜”
1)歷史搜索
歷史搜索詞就是推薦用戶自己最近搜索過N個關(guān)鍵詞,避免用戶重復(fù)輸入,支持用戶手工清空
(2)熱門搜索
熱門搜索一般有兩種做法:
一是根據(jù)用戶搜索的關(guān)鍵詞熱度進(jìn)行排序,獲取真實(shí)的熱門關(guān)鍵詞進(jìn)行推薦
二是受商業(yè)價值驅(qū)動,推薦從商業(yè)角度,最希望用戶搜索查詢的內(nèi)容。這會有一個供運(yùn)營配置的后臺,由運(yùn)營人工配置。
當(dāng)然也可以綜合以上兩種方式,兼而有之。
第2步:確定關(guān)鍵詞
確定關(guān)鍵詞為了幫助用戶用最小的成本獲取最準(zhǔn)確的關(guān)鍵詞,關(guān)鍵詞聯(lián)想也是搜索的基本功能。聯(lián)想關(guān)鍵詞一般來自兩個渠道:
一是所有用戶歷史熱搜的關(guān)鍵詞
二是自建的常用關(guān)鍵詞庫
當(dāng)用戶輸入的關(guān)鍵詞被包含匹配到以上兩類關(guān)鍵詞時,則被列入聯(lián)想詞列表。
第3步:搜索結(jié)果
1、檢索范圍
搜索范圍的規(guī)則制定也是搜索設(shè)計(jì)最基礎(chǔ)的環(huán)節(jié)。是決定用戶搜索關(guān)鍵詞跟什么內(nèi)容去做匹配的問題。同時,影響到搜索權(quán)重。
跟什么內(nèi)容做匹配,也取決于用戶搜索場景的分析。例如用戶想搜索的是商品,則應(yīng)該跟商品屬性做匹配,那具體是哪些屬性,優(yōu)先級如何,就是需要制定的規(guī)則。
商品而言,可以跟商品名稱、商品關(guān)鍵詞、商品詳情等屬性進(jìn)行匹配,且商品名稱的權(quán)重>商品關(guān)鍵詞>商品詳情。
有的平臺可能沒有商品關(guān)鍵詞庫,商品詳情也用純圖片展示,那就只跟商品名稱做匹配。
所以具體匹配的屬性需根據(jù)不同的實(shí)際情況而定。
2、呈現(xiàn)方式
對搜索結(jié)果的呈現(xiàn)方式也是值得研究的點(diǎn)。同樣需要從用戶發(fā)起搜索的場景思考。
還是以小紅書為例,用戶的搜索需求有三種,搜索內(nèi)容、商品、用戶。
如果用戶從商城搜索,那搜索結(jié)果默認(rèn)定位至商品列表是最符合場景的,同理,如果用戶從社區(qū)進(jìn)入搜索,那默認(rèn)定位至社區(qū)內(nèi)容TAB
但是有的產(chǎn)品首頁是一個綜合頁,包含了所有內(nèi)容模塊,如果用戶是從首頁搜索,那在不清楚用戶想搜索的到底是哪一部分內(nèi)容的情況下,需定位至綜合結(jié)果頁。綜合結(jié)果頁會羅列出幾部分中相關(guān)性最高的幾個搜索結(jié)果供用戶選擇。綜合結(jié)果的設(shè)計(jì)可以參考微信搜索結(jié)果頁。
第4步:細(xì)化篩選
通常在搜索結(jié)果里,都會默認(rèn)按照相關(guān)度排序。但是也允許用戶按需從其它維度進(jìn)行排序篩選。可篩選的條件跟搜索結(jié)果所屬的特性強(qiáng)相關(guān)。例如,如果是商品列表,那可以考慮根據(jù)商品的價格、分類、銷量、功能等排序。如果是一個平臺電商,那還可以根據(jù)品牌等進(jìn)行篩選。
除了考慮商品本身的屬性進(jìn)行篩選外,還要從商業(yè)利益的角度,把最想展示給用戶的商品組合成一個分類,方便用戶刪選,例如考拉的分類中,加入了“618”活動商品、考拉自營等分類。
剛才說的都是搜索結(jié)果過多的情況下應(yīng)該怎么辦。我們還應(yīng)該考慮的是搜索結(jié)果為零的時候,我們?nèi)绾谓o用戶設(shè)計(jì)合適的空頁面。
現(xiàn)在一些搜索結(jié)果是通過加載一個新的頁面來展示的,如果我們不給用戶說清楚。用戶會誤以為是網(wǎng)絡(luò)原因?qū)е马撁婕虞d失敗而不是搜索不到你想要的商品。所以空頁面設(shè)計(jì)一定要向用戶解釋清楚原因。
二、搜索數(shù)據(jù)的跟蹤
數(shù)據(jù)驅(qū)動產(chǎn)品,是做任何產(chǎn)品都需要具備的意識。搜索也不例外。搜索上線后,我們需要監(jiān)控哪些數(shù)據(jù)來幫助我們不斷優(yōu)化搜索功能呢?
1、用戶搜索路徑及漏斗轉(zhuǎn)化
主要監(jiān)控用戶是從哪里進(jìn)入搜索的?搜索后有點(diǎn)擊搜索結(jié)果嗎?有完成最終轉(zhuǎn)化嗎?用戶的路徑能幫助我們檢驗(yàn)搜索結(jié)果是不是用戶想要的。此外,如果用戶在某個搜索入口高頻搜索某個關(guān)鍵詞,也可以幫我們反思搜索入口所在頁面餓設(shè)計(jì)是不是沒有滿足用戶某個痛點(diǎn)。
2、關(guān)鍵詞搜索數(shù)據(jù)監(jiān)控
用戶在產(chǎn)品下留下任何行為數(shù)據(jù)都是有意義的。搜索過的關(guān)鍵詞更是如此。關(guān)鍵詞代表了用戶對產(chǎn)品最直接的訴求。不論關(guān)鍵詞最終的搜索結(jié)果如何,都值得被記錄。并定期拉出來,進(jìn)行分析。
分析的結(jié)果不僅能幫助搜索的優(yōu)化,還能反推運(yùn)營、業(yè)務(wù)進(jìn)行改進(jìn)。例如,如果一個電商平臺,5月份開始用戶搜索“花露水”及類似驅(qū)蚊類商品的搜索增加,而平臺在驅(qū)蚊產(chǎn)品上沒有充足的備貨,那就可以推動對驅(qū)蚊類商品的采購。
3、搜索結(jié)果為空的數(shù)據(jù)監(jiān)控
搜索結(jié)果為空的關(guān)鍵詞,最能反映用戶對產(chǎn)品的期待,但是卻未達(dá)成所愿的那部分產(chǎn)品缺憾。所以,專項(xiàng)存儲記錄搜索為空的關(guān)鍵詞,及關(guān)鍵詞的搜索熱度也是非常必要的。可以幫助我們不斷彌補(bǔ)產(chǎn)品的不足。
思路2:根據(jù)場景的設(shè)計(jì)
在設(shè)計(jì)搜索之前首先需要思考的問題是:誰在什么場景下會使用搜索功能?他想搜什么?
1、小紅書
小紅書的定位是生活方式分享社區(qū),旗下設(shè)立了電商平臺“小紅書商城”作為變現(xiàn)業(yè)務(wù),所以小紅書的核心布局:社區(qū)+電商。所以對小紅書有認(rèn)知的用戶,主要在如下幾種場景下有搜索訴求:
(1)想了解生活達(dá)人們對某類商品的推薦、評價
(2)想在小紅書商城購買某類商品
(3)想關(guān)注某位達(dá)人
由此,可以確定,小紅書搜索范圍在社區(qū)內(nèi)容、商品、用戶。從小紅書搜索結(jié)果頁TAB的分類看,也是按照這3類進(jìn)行的劃分,其中“全部”其實(shí)就是UGC社區(qū)內(nèi)容。
2、網(wǎng)易嚴(yán)選
網(wǎng)易嚴(yán)選的定位是原創(chuàng)生活類自營電商,是一個純電商平臺,所以用戶搜索訴求很單一:找到想要的商品
所以純電商平臺的搜索范圍只局限于商品。
3、知乎
知乎的定位是網(wǎng)絡(luò)問答社區(qū),連接各行各業(yè)的用戶。用戶分享著彼此的知識、經(jīng)驗(yàn)和見解。所以知乎用戶的主要搜索訴求是:
(1)找到想了解的經(jīng)驗(yàn)、內(nèi)容
(2)找到想關(guān)注的知識咖
我們看知乎搜索的模塊設(shè)計(jì),雖然分為用戶、話題、想法、專欄、電子書等分類。但是從本質(zhì)上仍然分為人和內(nèi)容兩部分。話題、想法、專欄、電子書等都屬于內(nèi)容一類,只是不同的內(nèi)容形態(tài)、業(yè)務(wù)形態(tài)而已。
大多數(shù)情況下,會使用搜索功能的用戶,主要是產(chǎn)品的老用戶,對產(chǎn)品的基本內(nèi)容和服務(wù)有一定的了解,并且有著非常明確的自身訴求。在這種場景下,如果用戶能檢索到自己想要的內(nèi)容或服務(wù),必將會產(chǎn)生很高的轉(zhuǎn)化。所以,搜索功能的重要性,不言而喻。
【個人總結(jié)】
1.對搜索框的理解
2.不同搜索框的設(shè)計(jì)
·QQ Mac版
·微信mac版
使用場景更偏向辦公、信息搜索等
3.針對音樂軟件搜索框設(shè)計(jì)
·網(wǎng)易云音樂mac版本