譯者心得：

即使是看起來非常簡單的搜索功能的設計，都包含著非常多的細節，每一個細節都可能影響體驗。
如何去考慮到這么多的細節呢？除了在設計過程中盡量考慮清楚多場景、多角色和多環境的情況，還有針對每一個領域都多多參考一些經驗法則。

搜索就像是用戶與應用或者網站之間的一場對話：用戶通過查詢表達他們的信息需求，應用或者網站以一組搜索結果作為回應。用戶在搜索時期待流暢的體驗，并且他們往往基于一兩組搜索結果的質量就會對應用的價值做出快速的判斷。

在設計搜索和搜索結果背后的UI時，有很多事情需要考慮。為了方便閱讀，我將這篇文章分為兩個主要部分：搜索框設計和結果頁布局。雖然根據你的需求和目標的不同（比如，對于你的網站來說搜索可能是個主要的/次要的特性；提供平行選項可能是個不利的或者有利的選擇），確切的建議未必適用，但還是有一些適用于很多不同類型的應用和網站的通用技巧。在我們開始之前，先問一個重要的問題：什么時候你會需要搜索？

什么時候應該（或者不應該）在網站上提供搜索

越小的網站，不提供搜索可能越好。對于一個內容有限（比如，少于100-200頁）的網站來說，不需要搜索。

當網站變得越來越大和復雜的時候，搜索就變得越來越重要。電子商務網站可能是提供搜索的最常見的例子，因為用戶在尋找具備特定屬性的產品。在打的電商網站，搜索欄會離開網站頭部并在界面中承擔一個核心角色。多達30%的訪客會使用網站的搜索工具，并且存在完全知道自己想找什么的高動機的購物者。

對于那些通過信息傳遞提供服務的網站（新聞門戶網站），以及提供航班、旅程、交易的預定服務的網站來說，搜索是必要的。

當你訪問Skyscanner的主頁，注意力會首先集中在搜索框

搜索框設計

搜索框是輸入區和提交按鈕的組合。有人可能會覺得搜索框不需要設計；無論如何，它只有兩個簡單的元素。但是因為搜索框已經成為了以內容為主的網站中使用率最高的設計元素，它的可用性就變得尤其重要了。

更明顯地展示搜索框

搜索框設計中最重要的規則是，讓它可被發現。如果搜索在你的應用或者網站中是一個重要功能，那它就應該足夠顯眼，因為它是發現內容的最快路徑。

保留開放的文本輸入區。用戶希望可以快速輸入搜索詞。

將搜索隱藏在按鈕下面會帶來一些負面結果：

• 讓搜索功能不容易被注意到。如果沒有使用一個開放的文本輸入區，搜索就會占據更少的位置。從視覺上，它就會變得更加不顯眼所以很難注意到。
• 增加了交互成本。也就是說，為了進入搜索框用戶需要做額外的操作。

不要用漸進展開的搜索按鈕因為內容會被遮擋

使用放大鏡圖標

從概念上，圖標是一個物體、動作或者想法的視覺代表。用戶對一些圖標具有最通用的認知。放大鏡圖標就是其中一個。即使沒有文字標簽用戶也會認為放大鏡圖標代表搜索。

Tip：使用最簡單的放大鏡圖標，因為減少圖片細節可以加速辨認。

將搜索框放在用戶期望的位置

關于網站上的搜索框的最佳位置有一些持續的爭論。但是很多著名網站比如YouTube、Amazon、IMDB、BEST BUY都將搜索框放在頂部中間或者頁面右上角的位置。A. Dawn Shaikh和Keisi Lenz創建了一個圖表，顯示了網站搜索框的預期位置，數據來源于他們做的一個包含142個被試的調查。研究發現對用戶來說最方便的點是網站每個頁面的右上角或者左上角，用戶使用一般的F形掃描模式可以很容易地找到。如果把搜索框放在用戶不期待的位置，意味著用戶需要花費額外的精力去尋找搜索框。

用戶在右上角尋找搜索框，如果沒有找到，他們就會掃描頁面頂部

Tip：使用熱圖或者眼動追蹤工具去研究用戶行為。這會幫助你識別出用戶注意的地方。你可以把搜索框放在那個位置。

為搜索框提供一個搜索按鈕

雖然通過按下Enter鍵也能輕易地出發搜索，有一些用戶仍然會尋找一個傳統的“搜索”按鈕。同時這也允許用戶通過傳統的搜索按鈕觸發搜索，即使他們最終選擇使用Enter鍵。

Tips：

• 確保搜索按鈕的大小合適，別讓用戶需要精確地移動鼠標或者手指進行點擊。更大的可點擊區域可以讓點擊更加容易。
• 讓用戶通過Enter和點擊按鈕提交搜索。很多用戶仍舊保留著點擊按鈕去提交搜索的習慣。為了避免鍵盤可及性問題，需要對表單進行測試。鍵盤測試的基礎很簡單——Tab鍵可以用來在表單控件之間導航，Enter鍵可以用來選中元素。

明確用戶能搜索什么

在輸入區中包含一個簡單的搜索查詢以提示用戶可以怎樣查詢，這是個不錯的主意。如果用戶可以通過多種條件搜索，可以使用一個輸入提示來解釋。但是保證限制搜索提示的字數，否則會提高認知負荷。

占位符文本能夠很好地提示用戶能夠搜索什么。

同時，正如Mike Madaio最近提到的，在某些情況下，占位符文本會帶來可及性問題：當占位符文本在顏色上被設計得更淡時，會導致對比問題——無法滿足網站可及性的通用規范（普通文本保持4.5:1的比例）（譯注：在白底上的淺灰色文本無法滿足網站對比度要求）。另外，根據W3C，占位符文本不能被輔助技術很廣泛地支持，提高了這些用戶正確地輸入表單的難度。

在每個頁面上放置搜索框

Tucker FitzGerald在另一篇文章中強調了讓用戶在每個頁面都能觸達到搜索框的必要性。用戶最可能在他們找不到自己想要的內容時使用搜索框。對于像404這樣的沒有出口的頁面來說尤其如此。

推特的404

合適的尺寸

輸入區域太短是設計師常犯的錯誤。當然用戶在端的輸入區中還是可以輸入長的搜索詞，但是輸入框中一次只能呈現文本的一部分，這就是不好的體驗，因為用戶不能夠檢查或者修改全部的搜索詞。事實上，如果一個輸入框能夠看到的字符數有限，用戶會傾向于使用短的、不精確的搜索詞，因為長的搜索詞不方便閱讀。如果輸入區可以根據預期的輸入來確定尺寸，對用戶來說就會更容易閱讀和解釋。一個經驗法則是在輸入框中顯示27個字母（將搜索框延伸到27個字母的長度可以滿足90%的搜索詞）。

谷歌的搜索框足夠容納長句

亞納遜的輸入框很大，因為幾乎所有人都會首先使用搜索

Tips：

• 用em設定寬度，不要用px或者pt。一個em就是一個m字母的高度和寬度（不管網站使用什么字號）。

• 如果需要保留空間，同時需要讓搜索框明顯，使用增長型的輸入框，當用戶點擊的時候會展開。這能夠節約屏幕空間，同時給用戶足夠的視覺線索去發現和執行搜索。

  
  
  當用戶點擊時，輸入框延伸以保證用戶可以輸入搜索詞

使用自動建議機制

自動建議是一個能夠減少數據輸入的有力工具。設計師通常認為自動建議機制是為了提高用戶輸入的速度，但是它實際上能夠幫助用戶創建他們的搜索語句。典型的用戶都很不擅長構思查詢內容：如果他們在第一次嘗試時沒有得到所需的結果，之后的搜索嘗試也很少會成功。如果自動補全建議運行良好的話，就可以幫助用戶創建更好的搜索查詢。

Tips：

• 確保自動建議是有用的。設計得不好的自動建議反而會迷惑和分散用戶注意力。所以，使用拼寫自動校正，識別跟詞以及可預測的文本以提高自動建議工具的效用。

  
  

• 建議的個數不要超過10個（并且不要使用滾動條），不要造成信息過載。

• 建議的列表要允許鍵盤導航。當用戶滾動到最后一項時，應該能夠返回到列表頂部。允許使用Esc退出列表。

• 明顯區分輸入的信息和建議的信息。比如，輸入的文本使用標準的字體，而建議的文本使用粗體字。

• 為項目添加圖片預覽以及文字描述，以增強建議的功能。

LED HUT通過在自動建議中加入了圖片預覽，從而提高了搜索轉化率

結果頁布局

在幫助用戶盡可能快速、簡單和準確地輸入數據后，你現在的目標應該是以清晰的和易于閱讀的樣式去提供最準確的搜索結果。結果頁是搜索體驗的關鍵部分：它提供了機會去引發出一個可以引導用戶的信息需求的對話。

不要在用戶點擊搜索按鈕后隱藏用戶的查詢

保留原始的文本。重新輸入查詢在很多信息旅程中是備受詬病的步驟：如果用戶沒有找到他們想要找的信心，他們可能會想要通過調整查詢詞重新搜索。為了讓用戶更加方便地做到這件事，把原始的搜索詞留在搜索框中，這樣用戶就不需要重新輸入完整的查詢詞了。

為你的信息選擇一個合適的布局

展示搜索結果的挑戰之一就是不同類型的內容需要不同的布局。兩種基本的內容展現布局是列表視圖和網格視圖。經驗法則：呈現細節用列表，呈現圖片用網格。

讓我們在產品頁面的環境中檢查一下這個法則。在選擇列表視圖和網格視圖時關鍵的因素時用戶在選擇產品的時候需要多少信息。對于像電氣用具這樣的產品，用戶選擇產品時最重要的因素時模型數量、等級和維度，這時列表視圖最合適。

列表視圖更適合細節導向的布局，對于高規格的產品來說在結果頁中包含產品介紹可以幫助用戶選擇

網格視圖適用于當用戶選擇產品需要考慮的產品信息較少時。網格視圖對于類似服裝這樣的產品來說很常用，因為用戶通常通過產品的外觀而不是文字描述來做決定。對于這些類型的產品，用戶在意的是產品之間的視覺區分，而且更愿意在一個單獨的長頁面滾動而不是重復地在列表視圖和產品細節頁面之間轉換。

網格視圖更適合視覺導向的布局

允許用戶為搜索結果選擇列表視圖或者網格視圖。這讓用戶能夠選擇以自己更喜歡的方式瀏覽結果。

顯示匹配結果的數量

顯示搜索出來的結果的數量，以便用戶可以決定他們要花費多長時間瀏覽結果。

匹配結果的數量讓用戶知道如何再次查詢

展示搜索過程

理想情況下搜索結果應該馬上呈現，但是如果做不到，應該使用進程指示器作為給用戶的系統反饋。你應該讓用戶清晰地知道他們還需要等多久。

Aviasales網提示用戶搜索需要花費一點時間

Tip：如果搜索花的時間比較長（超過10秒）你可以使用動畫。好的動畫可以分散用戶的注意力并且讓他們忽視了搜索的時間較長。

不要返回“無結果”

把用戶丟在一個顯示無結果的頁面會令人感到沮喪，尤其是他們已經嘗試搜索了好幾次時。

在無結果頁面上，你可以通過下面的兩點幫助用戶進行修復：

• 清晰地解釋沒有匹配的結果。

• 提供繼續前進的起點（比如，在線商店可以從相似的類別里提供可選產品建議）。

  
  
  在HP的例子里一個“無結果”頁面對用戶來說沒有出路。而形成鮮明對比的是亞馬遜在無結果頁面中使用了內容類別或者搜索詞建議。

提供篩選和排序選項

當搜索結果看起來跟搜索詞沒有關系時，用戶是感到崩潰的。篩選和排序可以幫助用戶篩選數據。

• 排序和篩選不是相同的。不要把排序功能隱藏在篩選功能中——它們是兩個不同的任務。不像篩選，排序不會限制展示什么內容，而是改變了結果呈現的順序。
• 限制可視的篩選選項數量。因為我們的短期記憶只能將很少數量的信息（一般在7個項目或者更少）保留很短的時間，所以不要使用太多信息讓用戶超負荷——同時顯示不多于7個可視的篩選選項。如果你的搜索需要很多篩選選項，就將其中一些默認折疊起來。此時需要添加一個鏈接“查看所有篩選器”確保它們都可以被觸達。
• 對篩選器排序。定義你的網站的基本搜索標準，并且基于這些發現去組織篩選器。比如，Airbnb知道大多數人使用價格篩選器，所以他們將它放在了頂部。
• 確保排序邏輯對用戶來說足夠清楚。當展示了大量結果時，用戶想要搞清楚的第一件事情就是排序規則。

• 清楚地顯示什么篩選選項被應用到了搜索結果中。當用戶進行了篩選后，在結果頁頂部清晰地展示篩選范圍。

  
  

好的搜索就是好的體驗

對于創建一個內容為主的應用或者網站來說，搜索是一項基本活動和重要的元素。盡管細微的改動比如輸入區的合適大小或者指出可以搜索哪些信息都能明顯地提高搜索的可用性以及整體的用戶體驗。

翻譯自：http://www.uxbooth.com/articles/best-practices-for-search/