最佳UX 設計「搜索框」案例

最佳UX 設計「搜索框」案例

網頁設計中,最重要的是使用者介面使用,UI 在視覺上能傳達UX 設計師展示的路徑,那麼今天分享搜索框UX設計,看看在網頁設計中是如何把搜索框設計的美麗又有兼顧到使用者介面呢?

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

1. 視覺提示

在創建任何類型的用戶介面時,為用戶提供其所需的快速瀏覽頁面工具是你工作職責的一部分。
這樣做可以使你的用戶確切找到他們想要的東西不論什麼時候,以及一旦與其交互之後會發生什麼。
最佳UX 設計「搜索框」案例
放大鏡圖標
使用圖標。我不想對其會增加找到搜索欄的速度進行強調,越簡單越好。
越少的細節能夠保證用戶能快速地掃視它。
雖然,只有一個圖標本身而沒有一個可輸入的容器或按鈕實際上會使搜索變得更加困難。
一個極簡主義搜索圖標的例子
人們通常會意識到,一個放大鏡圖標顯示的是一個搜索工具,即使它沒有標籤。
但是糟糕的是,只有一個圖標則會使搜索更加困難。
一個真實的搜索按鈕
並非每個人都是學會在網上沖浪的千禧一代,這意味著,並不是每個人都知曉在他們輸入查詢之後需要按下Enter鍵。
在搜索輸入旁邊添加一個實際的按鈕將幫助用戶確認他們的下一步行動,進而減少用戶所需的認知負荷。
最佳UX 設計「搜索框」案例
不要把按鈕放在左邊、上邊或下邊
訣竅:

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

2. 輸入特色

有時候,最閃亮、性能最好或是更大的汽車根本無法做到這一點。搜索模式也一樣。
像你想要表達的那樣設計,使設計符合網站或應用程序的主題,同時確保它足夠突出。
最佳UX 設計「搜索框」案例
YouTube新上的且令人驚喜的黑暗主題通過使搜索模式與其他元素保持一致,完美地體現了這一點

「這並不是關於誰最大的問題」

確保可輸入的長度不會太短。諾曼集團的相關研究表明,一個能輸入27個字元的輸入框,可以滿足90%的用戶需求。
最佳UX 設計「搜索框」案例
可以輸入5個字元與26個字元的搜索框的簡單例子

3. 明確佔位符

在輸入的佔位符文本中使用適當的副本是很重要的,通常用戶可以通過搜索得到提示。
這會確保他們知道要搜索什麼,也不會因為寫不明白所要查詢的問題而感到失望且無措。
最近,web工具允許人們輕鬆地添加提示作為HTML5中的佔位符來實現這一點。
最佳UX 設計「搜索框」案例
添加一個佔位符可以幫助用戶過濾他們的查詢行為
訣竅:

眾所周知,人類的短期記憶能力很弱,使副本保持佔位符文本的簡短與直接。
使用長提示最終會增加認知負荷,從而損害用戶體驗。
某些項目需要一個更具體的搜索功能,在這種情況下,你可以使用懸停工具提示來確保提示在任何時候都是可見的,從而允許用戶能通過短期記憶去做其他事情。

最佳UX 設計「搜索框」案例
在這個示例中,工具提示幫助用戶使用查詢格式以及他可以搜索的內容。

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

通常,你的用戶會忙於思考搜索結果而不是專注於確保輸入一個正確的搜索查詢。
對於那些無法搜索到其所期望的結果的人們來說,也會是一個負擔。
這是用戶的失誤,同時也是設計者的失誤。這也是自動建議機制派上用場的地方。
這一機制的目標不是為了更快搜索,而是在查詢建構中提供一點幫助。
實現這一目標的方法之一是實現預測搜索模式。你查詢的這個怪異的詞是什麼?
它只是通過分析用戶寫入的任何字元的行為,從而去預測他們的查詢目標是什麼。
最佳UX 設計「搜索框」案例
眾所周知,大多數未能在第一次查詢中搜索到預期搜索結果的用戶在將接下來的嘗試中會極少成功。
由雅各布·尼爾森領導的團隊的相關研究得出同樣結論。
因此,通過這樣做,除了能夠大大減少用戶進行搜索的工作量,還使得他們查找所需內容的成功次數增加。
訣竅:

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

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

2006年,由AD Shaikh與K. Lenz研究發現,用戶對一些用戶介面元素和模式的位置有一定的期待。
搜索是其中的一種模式,絕大多數用戶希望在介面的頂部或右上角找到它,就像下文所提到的研究一樣。
最佳UX 設計「搜索框」案例
「許多參與者希望在網頁右上角或左上角處找到’網站搜索引擎’位置」,試著根據這一知識定位搜索模式進行設計,它將確保親愛的用戶們很容易找到它。

結論

搜索是一個不斷發展中的行為模式,我知道這篇文章並沒有涵蓋所有現存的指導方針。
基於這一點,我希望這篇文章能幫助一些初學者,甚至是用戶介面和用戶體驗的老手們。
在我看來,我們每天會處理太多所謂的最佳實踐,所以很容易忽略一些簡單的話題,比如我在這篇文章中提到的那樣。


 

【想讓你的網站其他人優秀嗎?這些設計趨勢一個都不要錯過!】

1.9種讓你的網頁很專業
2.預測2018網頁設計趨勢
3.2018年手機應用UI設計趨勢
4.這3個設計趨勢是網頁設計師的最愛
5.2018必看設計懶人包手冊
6.高手進擊懶人包影片-設計師與開發者推薦的精選影片


 

給你最好的網頁設計Gogoshark

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。