如何優化您的網站搜索表單以提高客戶滿意度

已發表: 2022-06-03
海爾加 作者 Helga 2018 年 8 月 17 日

1. 您網站上的搜索表單如何幫助您提高客戶滿意度
2. 搜索按鈕如何增加您的業務指標
3. 網站搜索欄設計技巧
4. 搜索模式和搜索結果
5. 額外的搜索欄提示

有用的工具:
1. Newoldstamp - 電子郵件簽名營銷
2. Mailchimp - 電子郵件生成器和發件人
3. Hubspot 電子郵件營銷 - 營銷自動化平台
4. MailerLite - 登陸頁面構建器
5. Canva - 製作設計的在線工具
6. Zyro的AI Logo Maker-免費的網站標誌製作者

並非每個網站都需要搜索框。 如果一個小網站的內容有限,這個功能可能不會花費您的時間和精力,因為沒有人會使用它。 但是,如果您有一個相當大的網站並且會隨著時間的推移而增長,那麼一個設計合理的搜索框是必須的。

您網站上的搜索表單如何幫助您提高客戶滿意度 

通過 GIPHY

根據eConsultancy的數據,只有 15% 的公司致力於優化電子商務網站的搜索體驗,而 42% 的公司完全忽略了它。 如果網站搜索可用性未優化或優化不正確,您的訪問者(潛在買家)將迅速切換到競爭對手網站,在那裡更容易找到他們想要的東西。 你為什麼要那個?

搜索按鈕如何增加您的業務指標

讓我們再看一下來自 eConsultancy 的一些統計數據 他們發現大約 30% 的訪問者會使用內部站點搜索字段來尋找產品。 上面提到的報告還描述了優化搜索功能的好處。 它們是增加網站使用率、提高轉化率、提高客戶忠誠度和增加銷售額。

網站搜索欄設計技巧

以下六個技巧將幫助您深入了解真正有效的方法。

提示 #1 使用合適的尺寸和白色區域

確保您的搜索框足夠長,以包含針對您的內容的典型查詢。 讓我很惱火的是盒子太小,我看不到我輸入的內容。 “可是我空間不夠!” - 你可能會說。 在這種情況下,您可以設置交互以在用戶單擊該字段時展開該字段。

看看阿迪達斯的這個例子。 主頁佈局大多是深色的,但他們將搜索框設為白色以實現對比度和更高的可見性。 他們還將它放在右上角,讓用戶立即註意到它。 此外,一旦您單擊它,該欄就會展開。

阿迪達斯搜索欄
圖片來源阿迪達斯

提示 #2 在搜索欄中添加放大鏡

通過添加放大鏡圖標,您將使網站訪問者更容易找到您的搜索欄,因為該圖標在用戶中是可識別的。

提示 #3 在字段中添加搜索按鈕

許多網站所有者認為用戶足夠聰明,可以通過點擊“Enter”開始搜索。 也許這有一定道理,但有些用戶可能仍然有點擊更傳統的“提交”按鈕的習慣。 添加搜索按鈕

圖片來源Mockplus

提示 #4 在預期位置找到您的搜索表單

不要將您的框隱藏在頁面底部或導航菜單中。 人們應該很容易找到它。 根據 Nielsen Norman Group 進行的研究,搜索框的理想位置是頁面頂部,通常在右上角。 但是,左上角也幾乎同樣有效。 NEXT UK 將他們的搜索欄放在左側,更靠近中心,由於它的顏色、放大鏡圖標、“搜索”文本和適當的大小,它仍然很容易找到。
下一個搜索欄設計

圖片來源NEXT

提示 #5 使用輸入文本向用戶展示他們可以搜索的內容

如果您在搜索欄中添加一個小提示,它可能對用戶有用 - 一個文本來指導人們他們可以在您的網站上尋找什麼。 例如,“查找電影、電視節目、名人等”。 順便說一句,您可以在 Google Analytics(分析)報告中檢查您最常用的查詢,並將它們作為建議添加到您的搜索字段中。

IMDb搜索欄設計
圖片來源IMDb

提示 #6 選擇添加搜索表單的頁面

如果是電子商務網站,請將此選項添加到所有頁面。 如果您正在處理諸如“Newoldstamp”之類的服務,請考慮僅將搜索框添加到博客、支持和幫助頁面。 在下面的示例中,您可以看到我們的博客頁面,其中包含在我們的博客中搜索的選項。

NEWOLDSTAMP 搜索表格
圖片來源 NEWOLDSTAMP

搜索模式和搜索結果

通過添加最必要的轉換功能來創建更智能的結果。

必備功能 #1:自動建議和智能預測

通過在搜索字段中包含自動填充選項,使訪問者的搜索更加舒適。 自動完成功能會在用戶開始輸入時立即向他們推薦特定的產品和關鍵字。 這對於難以拼寫的查詢特別方便。

必備功能 #2:無論如何都顯示搜索結果

當一個人在搜索查詢中拼錯一個詞時,搜索功能必須識別它,以便用戶無論如何都能找到他們正在尋找的東西。

必備功能 #3:始終顯示結果頁面

此功能在某種程度上與前一個功能相關。 為避免用戶感到沮喪,請始終顯示結果頁面。 展示暢銷書、類似產品,運用你的幽默感,提供與用戶相關的東西。 為什麼如此重要? 如果用戶看到“沒有找到”,他們會怎麼做? 他們很可能會離開您的網站並從您的競爭對手那裡尋找合適的東西。 但是,如果您向他們提供可能滿足他們需求的東西,那麼他們很可能會購買您提供的東西,而不是空手而歸。

必備功能 #4:搜索您的移動版本或應用程序的表單

沒有智能手機的生活是難以想像的。 對於我們中的許多人來說,它們是我們每天早上起床時首先看到的東西。 因為人們使用移動設備主要是為了尋找東西,所以適合移動設備的搜索將幫助他們快速輕鬆地找到他們想要的東西。 理想情況下,您的應用程序或移動網站版本應在屏幕頂部提供易於識別的搜索字段,並且不需要用戶進行額外操作。 此外,強烈建議集成自動建議以減少錯誤和數據輸入; 存儲所有最近的用戶搜索,以便在他們下次進行新搜索時向他們提供這些數據; 提供對搜索結果進行排序或過濾的選項; 當沒有找到匹配的項目時,建議相關的替代方案。

其他搜索欄提示

如果您想更進一步,將用戶體驗提升到更高的水平,請考慮實現以下功能。

提示 #1 顯示搜索進度

添加進度指示器,讓用戶知道他們需要等待多長時間。 這非常方便,讓訪客感到受到重視,因為您表明您關心他們的時間。

提示 #2 顯示結果數量

當我在 Pandora 網站上尋找吊墜時,他們告訴我有 181 件物品與我的搜索查詢相匹配,因此我可以決定要花多長時間查看結果。

潘多拉搜索欄
圖片來源潘多拉

提示 #3 添加搜索過濾器

允許用戶過濾和自定義他們的搜索結果以準確找到他們想要的內容,這將使他們的生活變得更加輕鬆。 例如,讓他們按最高/最低價格、品牌、尺寸、顏色等過濾搜索結果。

提示 #4 為您的搜索模式添加同義詞

為了增加訪問者找到所需內容的機會,建議使用同義詞。 例如,錢包 -> 手提包 -> 包等。請參見下面 Bershka 的示例。

bershka 同義詞搜索
圖片來源 Bershka

提示 #5 顯示相關結果

搜索失敗後顯示“無結果”頁面的訪問者通常會感到沮喪。 即使您沒有與他們的搜索相匹配的產品,也要向他們提供其他推薦,例如類似類別或類似項目。 想像一下,當您訪問基輔時,您嘗試了 varenyky,這是一道著名的烏克蘭菜餚,由不同餡料的煮麵團製成。 現在您想看看是否可以在亞馬遜上找到 varenyky。 雖然你不能在那裡買到它們,但亞馬遜建議你使用一種特殊的工具來自己製作 varenyky。 順便說一句,你試過 varenyky 嗎?

亞馬遜
圖片來源亞馬遜

結論

如果您想通過幫助他們快速找到他們正在尋找的內容來節省您的網站訪問者的時間和精力,那麼您應該在您的網站上添加一個搜索欄。 這對於內容密集的資源極為重要。

有效的搜索框:

  • 很明顯;
  • 放置在頁面頂部;
  • 不需要額外的努力即可開始使用它;
  • 具有輸入文本以向用戶顯示他們可以查找的內容;
  • 有一個明確定義的“提交/執行/等”。 按鈕;
  • 尺寸合適;
  • 提供自動建議和智能預測;
  • 顯示結果的數量;
  • 顯示相關結果;
  • 快;
  • 並且永遠不會將用戶引導到“未找到”頁面。