原文：Design a Perfect Search Box - Nick Babich

在側重內容的網站，搜尋欄是必要的頁面元素，作者總結了 9 項最佳實踐。

1. 使用放大鏡圖示

多數的時候只使用圖示，不使用文字標籤說明，使用者無法正確的辨認意圖。不過在搜尋欄上使用放大鏡則是例外，放大鏡已經成為一種約定成俗的用法，更容易找到搜尋欄位的所在。

另外，作者建議使用簡單的線條呈現圖示，能夠加快使用者辨識。

2. 呈現要顯眼

  • 使用顏色或圖形邊界與其他功能區分
  • 不要使用隱藏的搜尋欄或是二步驟的搜尋欄（e.g. 點了放大鏡，才顯示出搜尋欄）

3. 提供搜尋按鈕

  • 注意按鈕大小要適中
  • 同時提供搜尋按鈕與使用「enter」觸發搜尋

4. 在每一頁放搜尋欄

在每一頁放搜尋欄，因為如果使用者找不到想要的東西時，不管在哪一頁，都會想嘗試使用搜尋欄

5. 保持搜尋欄的簡單

不要使用進階搜尋，進階搜尋的規則會讓使用者感到困惑

6. 搜尋欄放在使用者找得到的地方

  • 根據調查，右上角還是使用者最容易找到搜尋欄的位置
  • 在使用者需要的時候，要凸顯出來
  • 如果網站內容很多且搜尋欄是必要功能，可以製造一些差異，讓使用者更容易辨識

7. 適當的搜尋欄大小

  • 太短，使用者會常常輸入超過，輸入內容就會被隱藏，沒有辦法容易更改或回顧寫了什麼
  • 太長，沒辦法暗示使用者預期中的搜尋內容應該多長

8. 使用自動完成功能

  • 自動完成不是為了加速使用者的輸入，而是為了幫助使用者組織輸入內。因為使用者如果第一次嘗試沒有得到好的搜尋結果，很容易會放棄嘗試
  • 盡快給出回應，比如說鍵入三個字元就顯示自動完成的結果
  • 顯示少於 10 個結果，並且不要有滾動條
  • 支援使用鍵盤導覽，並在最後一個項目時可以返回第一個項目
  • 將關鍵字與其他內容區隔

9. 清晰地告訴使用者他們可以搜尋些什麼

  • 提供範例在搜尋欄上（placeholder），提示預期中的搜尋內容為何
  • 不要太多字，要不然反而會增加認知負擔