編者按：用戶界面設計是任何應用程序和網站想要留住用戶的非常重要的一部分，而如何設計出貼合用戶習慣的服務產品并非一件易事。本文作者Bruno Charters在“Getting the Search Pattern Right”一文中講述了其所希望設計師們需要注意的五個細節。盡管切入點較為細小與零散，卻都是入行菜鳥甚至是老手們需要一直謹記的事項。

完美案例

1. 視覺提示

在創建任何類型的用戶界面時，為用戶提供其所需的快速瀏覽頁面工具是你工作職責的一部分。這樣做可以使你的用戶確切找到他們想要的東西不論什么時候，以及一旦與其交互之后會發生什么。

（1）放大鏡圖標

使用圖標。我不想對其會增加找到搜索欄的速度進行強調。越簡單越好。越少的細節能夠保證用戶能快速地掃視它。雖然，只有一個圖標本身而沒有一個可輸入的容器或按鈕實際上會使搜索變得更加困難。

一個極簡主義搜索圖標的例子

人們通常會意識到，一個放大鏡圖標顯示的是一個搜索工具，即使它沒有標簽。但是糟糕的是，只有一個圖標則會使搜索更加困難。

（2）一個真實的搜索按鈕

并非每個人都是學會在網上沖浪的千禧一代，這意味著，并不是每個人都知曉在他們輸入查詢之后需要按下Enter鍵。在搜索輸入旁邊添加一個實際的按鈕將幫助用戶確認他們的下一步行動，進而減少用戶所需的認知負荷。

不要把按鈕放在左邊、上邊或下邊

小貼士：

• 或者，你可以隱藏輸入按鈕，直到文本輸入行為已經完成。
• 確保按鈕的大小合適，這樣才使得點擊行為十分自然。

2. 輸入特色

有時候，最閃亮、性能最好或是更大的汽車根本無法做到這一點。搜索模式也一樣。

（1）像你想要表達的那樣設計

使設計符合網站或應用程序的主題，同時確保它足夠突出。

YouTube新上的且令人驚喜的黑暗主題通過使搜索模式與其他元素保持一致，完美地體現了這一點 ：“這并不是關于誰最大的問題”。

確?？奢斎氲拈L度不會太短。諾曼集團的相關研究表明，一個能輸入27個字符的輸入框，可以滿足90%的用戶需求。

可以輸入5個字符與26個字符的搜索框的簡單例子

3. 明確占位符

在輸入的占位符文本中使用適當的副本是很重要的，通常用戶可以通過搜索得到提示。這會確保他們知道要搜索什么，也不會因為寫不明白所要查詢的問題而感到失望且無措。最近，web工具允許人們輕松地添加提示作為HTML5中的占位符來實現這一點。

添加一個占位符可以幫助用戶過濾他們的查詢行為

小貼士：

眾所周知，人類的短期記憶能力很弱。使副本保持占位符文本的簡短與直接。使用長提示最終會增加認知負荷，從而損害用戶體驗。

某些項目需要一個更具體的搜索功能。在這種情況下，你可以使用懸停工具提示來確保提示在任何時候都是可見的，從而允許用戶能通過短期記憶去做其他事情。

在這個示例中，工具提示幫助用戶使用查詢格式以及他可以搜索的內容。

4. 引導查詢自動建議功能

通常，你的用戶會忙于思考搜索結果而不是專注于確保輸入一個正確的搜索查詢。對于那些無法搜索到其所期望的結果的人們來說，也會是一個負擔。這是用戶的失誤，同時也是設計者的失誤。這也是自動建議機制派上用場的地方。

這一機制的目標不是為了更快搜索，而是在查詢建構中提供一點幫助。實現這一目標的方法之一是實現預測搜索模式。你查詢的這個怪異的詞是什么？它只是通過分析用戶寫入的任何字符的行為，從而去預測他們的查詢目標是什么。

眾所周知，大多數未能在第一次查詢中搜索到預期搜索結果的用戶在將接下來的嘗試中會極少成功。由雅各布·尼爾森領導的團隊的相關研究得出同樣結論。因此，通過這樣做，除了能夠大大減少用戶進行搜索的工作量，還使得他們查找所需內容的成功次數增加。

小貼士：

• 不要錯誤的給他們提供任何自動建議。無論你使用哪種機制，確保它是有意義的且符合用戶的需要。
• 給用戶提供最近搜索歷史的視覺提示。這對于經常性搜索行為十分有用。
• 保持簡單，使用最少的元素來分隔不同的自動建議。（也即：填充與邊界）
• 將提供給用戶的建議數量限制在5個到9個之間。記住米勒定律在用戶體驗設計中的應用。

5. 不要忘記位置的重要性

2006年，由A. D. Shaikh 與 K. Lenz研究發現，用戶對一些用戶界面元素和模式的位置有一定的期待。搜索是其中的一種模式，絕大多數用戶希望在界面的頂部或右上角找到它，就像下文所提到的研究一樣。

“許多參與者希望在網頁右上角或左上角處找到‘網站搜索引擎’位置?！?/p>

試著根據這一知識定位搜索模式進行設計，它將確保親愛的用戶們很容易找到它。

結論

搜索是一個不斷發展中的行為模式，我知道這篇文章并沒有涵蓋所有現存的指導方針?；谶@一點，我希望這篇文章能幫助一些初學者，甚至是用戶界面和用戶體驗的老手們。

在我看來，我們每天會處理太多所謂的最佳實踐，所以很容易忽略一些簡單的話題，比如我在這篇文章中提到的那樣。

原文鏈接：https://uxplanet.org/getting-the-search-pattern-right-e71dbb59dc67

譯者：木木子，有36氪編譯組出品。編輯：郝鵬程

譯文地址：http://36kr.com/p/5124738.html

本文由 @郝鵬程 授權發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議