正視搜索失敗的情況對(duì)用戶的影響，策劃相應(yīng)的設(shè)計(jì)對(duì)策。

一位顧客走進(jìn)一家線下店鋪，詢問某件商品的詳情。這位店員聳聳肩，除了道歉給不出任何信息（甚至可能道歉也不提供）。顧客對(duì)這次交易滿懷失望地離開，直接走去最近的同類商家。如果我們是這家店的店主，我們會(huì)對(duì)店員非常失望。他們并沒有幫助顧客，甚至完全不試圖挽回這次交易。

然而，很多網(wǎng)站和app的體驗(yàn)，與這沒差。

我在用戶測(cè)試時(shí)最常遇見的體驗(yàn)問題之一，就是毫無幫助的“無結(jié)果”界面。產(chǎn)品開發(fā)團(tuán)隊(duì)對(duì)這個(gè)關(guān)鍵場(chǎng)景考慮之少，讓我覺得非常驚訝。

只要我們?cè)O(shè)計(jì)一個(gè)有搜索功能的網(wǎng)站，我們必須考慮到“搜索無結(jié)果”的情景。當(dāng)意想不到的情況發(fā)生時(shí)，我們應(yīng)該給予用戶的遠(yuǎn)不止道歉。

提供好的搜索體驗(yàn)

在大型網(wǎng)站，訪客可能面臨成千上萬條不同內(nèi)容。對(duì)于電子商務(wù)網(wǎng)站，用戶找到特定產(chǎn)品的能力，可以在很大程度上直接影響網(wǎng)站利潤(rùn)。

Office網(wǎng)站上的搜索無結(jié)果頁面，掐斷了用戶路徑：

• KissMetrics的一項(xiàng)研究發(fā)現(xiàn)，當(dāng)需要在網(wǎng)上尋找某個(gè)特定的商品時(shí)，40%的被調(diào)查用戶更愿意使用自由文本搜索。
• DEMAC媒體的一項(xiàng)報(bào)告說，使用網(wǎng)站搜索進(jìn)行購(gòu)物的用戶，交易率比普通用戶高216%。

簡(jiǎn)單查閱網(wǎng)站分析數(shù)據(jù)，設(shè)計(jì)師可以看到有多少用戶使用搜索，以及其中有多少用戶會(huì)遇到“搜索無結(jié)果”頁面?？梢杂眠@來估算有多少收入是損失在了糟糕的搜索體驗(yàn)上。

好的設(shè)計(jì)師會(huì)仔細(xì)思考如何處理用戶犯的錯(cuò)誤。表單優(yōu)化方面的書有很多，但它們通常聚焦在登記、結(jié)賬或注冊(cè)的界面。搜索應(yīng)該與這些表單一樣受到重視。在設(shè)計(jì)過程中，也要著力考慮搜索的“邊界場(chǎng)景”和錯(cuò)誤情況。

在設(shè)計(jì)更好的搜索體驗(yàn)時(shí)，可以遵循以下指南：

• 第1步：預(yù)防――試圖在剛開始就阻止搜索失敗的發(fā)生
• 第2步：恢復(fù)――當(dāng)搜索不到結(jié)果時(shí)，幫助用戶返回到正軌
• 第3步：變通――將錯(cuò)誤轉(zhuǎn)化為機(jī)會(huì)

第1步：預(yù)防

處理錯(cuò)誤的最好方法，是在第一時(shí)間阻止它的發(fā)生。我鐘愛日本的Poke-Yoke設(shè)計(jì)原則（即防錯(cuò)設(shè)計(jì)）。Poke-Yoke是指通過對(duì)界面的設(shè)計(jì)來防止錯(cuò)誤的發(fā)生。說到搜索，我們有很多技巧來減少“搜索無結(jié)果”的可能性。

（1）提供搜索建議

當(dāng)用戶打字時(shí)，嘗試通過展示熱門詞匯、相關(guān)詞匯，來自動(dòng)補(bǔ)全搜索。用戶選擇其中一個(gè)詞匯可以直接到達(dá)結(jié)果頁面。

這不僅節(jié)省時(shí)間，也能防止拼寫錯(cuò)誤。最重要的是，它引導(dǎo)用戶去搜索有結(jié)果的關(guān)鍵詞。

asos在用戶打字時(shí)展示了搜索建議，他們甚至更進(jìn)了一步，展示每個(gè)搜索關(guān)鍵詞將返回的搜索結(jié)果數(shù)量

（2）在搜索建議中推薦特定的內(nèi)容或產(chǎn)品

除了建議，我們也可以提前提供一些特定的搜索結(jié)果。

如果用戶正在尋找特定的東西，我們應(yīng)該盡快呈現(xiàn)給他們。直接快速地呈現(xiàn)可以省去額外的頁面加載。

Staple網(wǎng)站中，當(dāng)用戶開始打字時(shí)，就在右側(cè)展示出特定的商品。

（3）給予有用的搜索指令

在搜索欄附近有意的展示一些有用的說明或例子。說明應(yīng)該突出我們的內(nèi)容的特點(diǎn)，指導(dǎo)用戶進(jìn)行更有效的搜索。

例如，搜索新聞時(shí)可能需要查詢文章的關(guān)鍵詞、作者或日期。通過提示信息提前向用戶解釋清楚，可以防止有問題的搜索。

Monster.com?在搜索框中提供輸入說明和例子，這幫助用戶輸入合適的信息

（4）適應(yīng)語言差異和同義詞

根據(jù)用戶的文化或地域差異，一個(gè)物體可以有幾十個(gè)不同的名字。舉一個(gè)極端的例子，‘drunk’有超過2985個(gè)同義詞！

我們需要考慮這些差異會(huì)如何影響搜索詞。設(shè)計(jì)師應(yīng)該要規(guī)劃重要的內(nèi)容主題和類別的所有別名。開放式卡片分類研究，可以幫助我們識(shí)別用戶分類信息的不同方式。這些用戶的分類信息可以幫助我們?cè)O(shè)計(jì)內(nèi)容的元信息。

元信息是一種對(duì)網(wǎng)站內(nèi)容進(jìn)行結(jié)構(gòu)化描述的方式。元信息也許永遠(yuǎn)都不會(huì)展現(xiàn)在用戶面前，但它對(duì)于協(xié)助用戶搜索、找到要去的地方至關(guān)重要。我們可以在元信息中，對(duì)某個(gè)內(nèi)容記錄幾打（甚至幾百個(gè)）別名。這些都能夠在網(wǎng)站搜索中被檢索。保證內(nèi)容可以被多個(gè)檢索詞搜索到。

第2步：恢復(fù)

盡管我們盡了最大努力設(shè)計(jì)防錯(cuò)搜索，但總有出現(xiàn)“搜索無結(jié)果”的可能性。在真正的“沒有結(jié)果”的情況下，我們需要盡可能的讓用戶回歸正軌。

（1）識(shí)別拼寫錯(cuò)誤

如果可能的話，網(wǎng)站應(yīng)該針對(duì)搜索結(jié)果頁面添加自動(dòng)拼寫檢查。這可能對(duì)開發(fā)團(tuán)隊(duì)是一個(gè)是很高的要求。不過許多內(nèi)容管理系統(tǒng)會(huì)提供相關(guān)的擴(kuò)展插件，因此這可能沒有你想的那么難做。

如果用戶很明顯地拼錯(cuò)一個(gè)了單詞，我們應(yīng)該立即顯示正確拼寫所得出的結(jié)果。這將在用戶犯錯(cuò)時(shí)，節(jié)省時(shí)間和操作成本。快速帶他們?nèi)バ枰牡胤健?/p>

Ebay會(huì)立刻為我展示我原本可能想拼寫的單詞的搜索結(jié)果

（2）提供一些有用的建議

即使沒有華麗的拼寫檢查功能，給用戶友好的說明仍然是一個(gè)好的開始。因?yàn)槲覀儧]有結(jié)果顯示，有足夠的空間來顯示一些非常明確的提示，來告訴用戶下一步可以做什么。

可以提示用戶：

• 檢查他們的拼寫
• 搜索更簡(jiǎn)單、更短的條目
• 搜索得更加籠統(tǒng)一些
• 告訴他們?cè)谀睦锟梢詾g覽到那個(gè)內(nèi)容

使用清晰、友好的語言是非常重要的。最重要的一點(diǎn)，我們的文案中應(yīng)該確保無結(jié)果的責(zé)任放在我們這，而不是用戶。我們不能給他們他們想要的東西，并不是用戶的錯(cuò)誤。有用的錯(cuò)誤文案并不是一個(gè)新鮮事，但它確實(shí)很重要并且經(jīng)常被人們忽略！

該網(wǎng)站在沒有搜索結(jié)果時(shí)，提供用戶清晰、有用的建議

第3步：變通

我們已經(jīng)盡力于防錯(cuò)搜索。我們?cè)噲D讓用戶回到正軌。但當(dāng)問題不在于搜索本身，而是我們的內(nèi)容呢？我們放棄嗎？

答案是：不。

這時(shí)，我們應(yīng)將錯(cuò)誤轉(zhuǎn)化為機(jī)會(huì)。“沒有結(jié)果”頁面的另一個(gè)重要作用是從用戶那獲取一些有價(jià)值的行動(dòng)。

（1）提供一些類似的結(jié)果

如果我們沒有用戶想要的，他們還是可能會(huì)對(duì)別的內(nèi)容感興趣。展示其他一些受歡迎的產(chǎn)品、文章，或者檢索詞，可以防止他們?cè)谒阉魇『箅x開。再不濟(jì)我們也抓住了用戶的注意力，可以引導(dǎo)他們發(fā)現(xiàn)一些他們?cè)緵]打算尋找的東西。

當(dāng)Target的網(wǎng)站上搜索無結(jié)果時(shí)，它用這空間展示熱門分類和最受歡迎的商品

（2）給用戶一個(gè)傾訴的對(duì)象

在搜索無結(jié)果的情況下，線上交互的方式可能沒有辦法再繼續(xù)了，但這不是結(jié)局。也許業(yè)務(wù)還能夠通過其他渠道幫助到他的用戶。我們可以提供電子郵件地址、電話號(hào)碼，甚至一個(gè)即時(shí)通訊渠道。即使我們沒有辦法幫助用戶，溝通和討論也有助于我們識(shí)別內(nèi)容上的缺漏。

即便聯(lián)系信息已經(jīng)在網(wǎng)站上其他地方展示了(通常埋在頁腳)，用戶可能并不會(huì)去尋找。只要合適，“無結(jié)果”頁面是最理想的、突出此類信息的地方。

Wayfair網(wǎng)站在搜索無結(jié)果頁面提供了一個(gè)非常明顯的“聯(lián)系我們”按鈕

（3）當(dāng)內(nèi)容可獲得時(shí)告知用戶

用戶查找的內(nèi)容可能現(xiàn)在沒有，但是過段時(shí)間就會(huì)出現(xiàn)。這不對(duì)所有業(yè)務(wù)適用。不過，告知用戶何時(shí)可以搜索到結(jié)果，是一種非常好的挽回用戶的方式。

許多房地產(chǎn)網(wǎng)站使用這種技術(shù)并取得了極佳的效果。新區(qū)域的房產(chǎn)不斷的被提交到網(wǎng)站上，也許不到一周，曾經(jīng)的“搜索無結(jié)果”頁面就有滿滿的內(nèi)容了。

Primelocation?網(wǎng)站讓我保存搜索記錄，或者注冊(cè)賬號(hào)，以便在有符合的搜索結(jié)果出現(xiàn)時(shí)提醒我

另一個(gè)很好的例子是Gumtree網(wǎng)站。他們的分類信息隨時(shí)都在改變，所以現(xiàn)在即使沒有結(jié)果，滿足用戶的需要的東西可能會(huì)很快的補(bǔ)充上。讓用戶設(shè)置搜索提醒的功能，可以確保通知到用戶，并且在將來促成交易。

Gumtree 在搜索無結(jié)果頁面明顯展示搜索提醒的功能。

（4）允許用戶貢獻(xiàn)缺失的內(nèi)容

有時(shí)提供查詢結(jié)果的最佳人選可能是進(jìn)行查詢的用戶自己。在一個(gè)“沒有結(jié)果”頁面，我們可以讓用戶有機(jī)會(huì)提交或者建議他們找不到的內(nèi)容。

在以用戶生成內(nèi)容為主的網(wǎng)站或應(yīng)用程序的中，這種方法最合適。我目前在做一個(gè)名為listmaker的應(yīng)用程序。這個(gè)應(yīng)用程序允許用戶創(chuàng)建和共享十大樣式列表?！八阉鳠o結(jié)果”頁面在內(nèi)容策略中扮演著重要的角色。我們鼓勵(lì)用戶成為創(chuàng)建該列表的第一人，讓他對(duì)于搜索失敗依然體驗(yàn)良好。

Listmaker在搜索無結(jié)果頁面鼓勵(lì)用戶創(chuàng)建自己的內(nèi)容

如果使用恰當(dāng)，鼓勵(lì)用戶在“搜索無結(jié)果”頁面提交自創(chuàng)內(nèi)容，可以將一個(gè)可用性問題轉(zhuǎn)換為一個(gè)用戶參與的機(jī)會(huì)。

Collins的在線詞典在“搜索無結(jié)果”頁面也將失敗的搜索變?yōu)闄C(jī)會(huì)，讓用戶可以將該詞匯推薦到下一次的詞典更新中。

（5）使用數(shù)據(jù)分析來識(shí)別內(nèi)容的缺漏

即使我們不能直接幫助用戶,“無結(jié)果”頁面仍然可以提供巨大的機(jī)會(huì)來擴(kuò)展你的內(nèi)容。

大多數(shù)企業(yè)會(huì)定期監(jiān)控他們的網(wǎng)站數(shù)據(jù)。回顧沒有返回結(jié)果的檢索關(guān)鍵詞，應(yīng)該也是定期監(jiān)控中的一項(xiàng)。額外設(shè)置一下?GoogleAnalytics，你可以得到一個(gè)站內(nèi)搜索行為的整體報(bào)告。仔細(xì)分析用戶正在搜索什么，可以幫助我們識(shí)別內(nèi)容上的缺失。用戶對(duì)某個(gè)內(nèi)容的搜索數(shù)據(jù)，也可以為增加該內(nèi)容提供商業(yè)依據(jù)。

在網(wǎng)站分析中仔細(xì)檢查檢索詞，有助于發(fā)現(xiàn)網(wǎng)站內(nèi)容上的缺漏。

結(jié)語

優(yōu)秀的用戶體驗(yàn)就是在每個(gè)時(shí)機(jī)都能對(duì)用戶起到幫助，即使不能提供給用戶他們想要的東西。作為設(shè)計(jì)師，我們需要盡可能防止用戶旅程中的死路?！八阉鳠o結(jié)果”頁面在產(chǎn)品的用戶體驗(yàn)中是一個(gè)“不成則敗”的關(guān)鍵點(diǎn)，只要努力一點(diǎn)點(diǎn)就會(huì)產(chǎn)生極大的回報(bào)。

確保你的設(shè)計(jì)考慮了這些極端情況。Be helpful！

原文作者：Christopher Myhill

原文地址：http://www.uxbooth.com/articles/design-no-results-found-pages-that-get-results/

譯者：羊湯

譯文地址：微信公眾號(hào)“滬江UED”（ID：J-UED）

題圖來自 unsplash