[筆記] Design a Perfect Search Box
原文:Design a Perfect Search Box - Nick Babich
在側重內容的網站,搜尋欄是必要的頁面元素,作者總結了 9 項最佳實踐。
1. 使用放大鏡圖示
多數的時候只使用圖示,不使用文字標籤說明,使用者無法正確的辨認意圖。不過在搜尋欄上使用放大鏡則是例外,放大鏡已經成為一種約定成俗的用法,更容易找到搜尋欄位的所在。
另外,作者建議使用簡單的線條呈現圖示,能夠加快使用者辨識。
2. 呈現要顯眼
- 使用顏色或圖形邊界與其他功能區分
- 不要使用隱藏的搜尋欄或是二步驟的搜尋欄(e.g. 點了放大鏡,才顯示出搜尋欄)
3. 提供搜尋按鈕
- 注意按鈕大小要適中
- 同時提供搜尋按鈕與使用「enter」觸發搜尋
4. 在每一頁放搜尋欄
在每一頁放搜尋欄,因為如果使用者找不到想要的東西時,不管在哪一頁,都會想嘗試使用搜尋欄
5. 保持搜尋欄的簡單
不要使用進階搜尋,進階搜尋的規則會讓使用者感到困惑
6. 搜尋欄放在使用者找得到的地方
- 根據調查,右上角還是使用者最容易找到搜尋欄的位置
- 在使用者需要的時候,要凸顯出來
- 如果網站內容很多且搜尋欄是必要功能,可以製造一些差異,讓使用者更容易辨識
7. 適當的搜尋欄大小
- 太短,使用者會常常輸入超過,輸入內容就會被隱藏,沒有辦法容易更改或回顧寫了什麼
- 太長,沒辦法暗示使用者預期中的搜尋內容應該多長
8. 使用自動完成功能
- 自動完成不是為了加速使用者的輸入,而是為了幫助使用者組織輸入內。因為使用者如果第一次嘗試沒有得到好的搜尋結果,很容易會放棄嘗試
- 盡快給出回應,比如說鍵入三個字元就顯示自動完成的結果
- 顯示少於 10 個結果,並且不要有滾動條
- 支援使用鍵盤導覽,並在最後一個項目時可以返回第一個項目
- 將關鍵字與其他內容區隔
9. 清晰地告訴使用者他們可以搜尋些什麼
- 提供範例在搜尋欄上(placeholder),提示預期中的搜尋內容為何
- 不要太多字,要不然反而會增加認知負擔