電商網(wǎng)站建設(shè)的搜索框是怎樣設(shè)計(jì)的？

    電商網(wǎng)站建設(shè)的搜索框是怎樣設(shè)計(jì)的？在進(jìn)行一次大規(guī)模的迭代之后，最近在查看公司網(wǎng)站運(yùn)營(yíng)數(shù)據(jù)時(shí)，發(fā)現(xiàn)數(shù)據(jù)并不是太好看，通過(guò)查看瀏覽頁(yè)面的查看時(shí)間以及下單的轉(zhuǎn)化率，發(fā)現(xiàn)并沒(méi)有太大變化，于是一直在思考如何提升數(shù)據(jù)，達(dá)到公司的最大利潤(rùn)化。

    通過(guò)不斷地使用產(chǎn)品，仔細(xì)揣摩，發(fā)現(xiàn)站內(nèi)搜索太爛，于是決定針對(duì)搜索進(jìn)行詳細(xì)深入研究，為用戶創(chuàng)造一個(gè)好的搜索用戶體驗(yàn)，相信會(huì)提高網(wǎng)站的購(gòu)買(mǎi)轉(zhuǎn)化率。

    在這里先說(shuō)下背景，所說(shuō)的站內(nèi)搜索指的是以電商網(wǎng)站的站內(nèi)搜索為例，然后我分為幾部分進(jìn)行講解。

    這篇文章針對(duì)搜索框的用戶體驗(yàn)進(jìn)行詳細(xì)講解，如果感興趣，隨時(shí)關(guān)注之后的文章。

    搜索框的位置

    圖片示例：亞馬遜

    現(xiàn)狀：進(jìn)入亞馬遜的網(wǎng)站頁(yè)面，搜索框放在一個(gè)很明顯的位置。

    設(shè)計(jì)的理由：當(dāng)用戶進(jìn)入電商網(wǎng)站，大部分人都是很精準(zhǔn)地根據(jù)需要才進(jìn)行網(wǎng)上購(gòu)物，進(jìn)行搜索就需要尋找搜索框，搜索框就必然置于顯要的位置

    默認(rèn)商品提示

    圖片示例：淘寶

    現(xiàn)狀：淘寶頁(yè)面的輸入框內(nèi)有默認(rèn)的一句話：裙裝節(jié)新品大賞！

    設(shè)計(jì)的理由：

    當(dāng)網(wǎng)站想推薦某一個(gè)品類(lèi)的商品時(shí)，搜索是用戶使用高頻次的功能，那么在搜索框中進(jìn)行推薦，那么這個(gè)品類(lèi)的銷(xiāo)量也將會(huì)帶動(dòng)起來(lái)

    網(wǎng)站推薦的資源位置是有限的，如何充分利用起來(lái)，很明顯這是一個(gè)不錯(cuò)的方法。

    下拉框熱搜詞推薦提示

    圖片示例：蘇寧易購(gòu)

    現(xiàn)狀：在點(diǎn)擊輸入框時(shí)，下方彈出推薦類(lèi)：正在熱搜中，下方有眾多的品類(lèi)以及商品進(jìn)行推薦

    設(shè)計(jì)的理由：當(dāng)用戶在進(jìn)行網(wǎng)上購(gòu)物時(shí)，準(zhǔn)備精準(zhǔn)地搜索想購(gòu)買(mǎi)的商品時(shí)，出現(xiàn)熱搜詞，無(wú)意中會(huì)出現(xiàn)用戶也想購(gòu)買(mǎi)的商品，那么很容易激發(fā)用戶的購(gòu)買(mǎi)欲，可以提升熱搜商品的銷(xiāo)量。

    用戶情景模擬：我平生痛恨逛超市，本來(lái)想去買(mǎi)點(diǎn)菜，在逛的過(guò)程中，不知不覺(jué)最后又買(mǎi)了一堆水果以及零食回來(lái)，所買(mǎi)商品是我預(yù)想中的幾倍。

    如何進(jìn)行設(shè)計(jì)：在設(shè)計(jì)此功能時(shí)，作為產(chǎn)品經(jīng)理，不應(yīng)當(dāng)只關(guān)注到表面太膚淺的用戶體驗(yàn)，同樣應(yīng)該分兩方面進(jìn)行處理

    根據(jù)網(wǎng)站的所有售賣(mài)結(jié)果進(jìn)行統(tǒng)計(jì)，自動(dòng)將熱搜詞推上去

    根據(jù)網(wǎng)站運(yùn)營(yíng)部門(mén)的需要，因?yàn)檫\(yùn)營(yíng)會(huì)有推薦品類(lèi)商品的需求，技術(shù)需要在后臺(tái)開(kāi)發(fā)出一套獨(dú)立于熱搜詞可以手動(dòng)設(shè)置排名在前的功能。

    既有系統(tǒng)自動(dòng)抓取更新，同時(shí)滿足運(yùn)營(yíng)需要，這才是一個(gè)完整的熱搜詞推薦。

    搜索框下拉框歷史記錄推薦提示

    圖片示例：京東

    現(xiàn)狀：在京東網(wǎng)站中先后搜索和顯卡以及電腦的選項(xiàng)，再次進(jìn)入京東主頁(yè)時(shí)，點(diǎn)擊搜索，會(huì)出現(xiàn)你的搜索歷史記錄。

    設(shè)計(jì)的理由：用戶進(jìn)行過(guò)搜索的商品，是有極大的購(gòu)買(mǎi)傾向，在進(jìn)行查看后，但是沒(méi)有購(gòu)買(mǎi)行為，返回去再進(jìn)行搜索時(shí)，自動(dòng)出現(xiàn)搜索歷史記錄，無(wú)需手動(dòng)繼續(xù)進(jìn)行再次輸入，極大地提高了用戶體驗(yàn)。相應(yīng)地可以提升用戶購(gòu)買(mǎi)的轉(zhuǎn)化率。

    搜索下拉框出現(xiàn)分類(lèi)提示

    圖片示例：亞馬遜、淘寶

    現(xiàn)狀：在用戶進(jìn)行搜索商品時(shí)，搜索框下拉框進(jìn)行提示在某品類(lèi)中進(jìn)行搜索

    設(shè)計(jì)的理由：

    性別男，想買(mǎi)一件短袖，那么直接進(jìn)行搜索后，系統(tǒng)會(huì)出現(xiàn)男性和女性的短袖，你需要再次進(jìn)行篩選，但是如果在輸入框下方直接選擇品類(lèi)，那么顯然可以更快地達(dá)到精準(zhǔn)搜索的目的。

    當(dāng)然，現(xiàn)在的淘寶根據(jù)用戶資料以及行為進(jìn)行了大量的數(shù)據(jù)存儲(chǔ)，所以我直接進(jìn)行搜索，搜索結(jié)果頁(yè)也是出現(xiàn)男裝，但是新建賬號(hào)，沒(méi)有數(shù)據(jù)基礎(chǔ)直接進(jìn)行搜索短袖，是會(huì)出現(xiàn)男女裝并存在頁(yè)面的情況。

    分類(lèi)選擇框

    參考圖片：亞馬遜

    現(xiàn)狀：在搜索框的左方，可以先選擇品類(lèi)，然后輸入商品進(jìn)行搜索。

    設(shè)計(jì)的理由：通過(guò)先選擇搜索的品類(lèi)，再進(jìn)行填寫(xiě)輸入的內(nèi)容，那么會(huì)更容易精準(zhǔn)地搜索到想要的結(jié)果。

    自動(dòng)容錯(cuò)功能

    參考圖片：亞馬遜、淘寶

    現(xiàn)狀：

    在亞馬遜中，輸入drass，下拉框中自動(dòng)糾正為dress的一些選項(xiàng)，而淘寶并無(wú)此功能

    在淘寶中，輸入斷袖，在搜索結(jié)果中出現(xiàn)你要找的是不是斷袖的提示

    以上兩類(lèi)，統(tǒng)稱(chēng)為自動(dòng)容錯(cuò)功能。

    在用戶搜索商品，打錯(cuò)字符進(jìn)行搜索時(shí)，系統(tǒng)自動(dòng)識(shí)別進(jìn)行糾正，并推薦正確的字符（用戶想進(jìn)行搜索的結(jié)果）。

    設(shè)計(jì)的理由：當(dāng)用戶在無(wú)意間輸入錯(cuò)誤的字符進(jìn)行搜索，得到一個(gè)無(wú)結(jié)果提示或是不想要的結(jié)果頁(yè)，再進(jìn)行返回搜索框重新輸入字符，這個(gè)過(guò)程是崩潰的。

    所以有了自動(dòng)容錯(cuò)功能，將極大地提升用戶體驗(yàn)，并提升用戶的購(gòu)買(mǎi)率。

    語(yǔ)音輸入搜索

    現(xiàn)狀：市場(chǎng)上主流的電商網(wǎng)站web端是無(wú)此功能的，而移動(dòng)端大部分都添加了此功能。

    設(shè)計(jì)的理由：人不可能對(duì)著電腦去進(jìn)行語(yǔ)音搜索，還沒(méi)這種用戶習(xí)慣，而手機(jī)的方便便攜性，微信等一系列的社交APP培養(yǎng)了用戶使用語(yǔ)音的習(xí)慣，添加此功能，自然為最佳之選。

    以上只是有關(guān)搜索框用戶體驗(yàn)的一部分，更多的體驗(yàn)需要多去研究探討。

    作為搜索的展示面：搜索框，細(xì)細(xì)深究發(fā)現(xiàn)有如此多的規(guī)則以及交互體驗(yàn)可以讓我們進(jìn)行提升，每一個(gè)細(xì)節(jié)的改善都可以讓用戶的搜索體驗(yàn)更加棒，討好了用戶，自然可以讓網(wǎng)站從中受益。

    以上的搜索框用戶體驗(yàn)不僅針對(duì)于電商網(wǎng)站的站內(nèi)搜索，同樣地適用于其他類(lèi)型網(wǎng)站。