卓仁SEO培訓
01 11月

百度搜索框和谷歌搜索框設計理念

當前位置: 卓仁SEO > 網絡營銷 > 百度搜索框和谷歌搜索框設計理念
分類: 網絡營銷 作者:成都SEO 發布時間:2019-11-01 14:20 圍觀: 101

百度搜索框和谷歌搜索框是全世界使用頻次最高的兩個東西,那么今天就給大家講講搜索框的設計理念是怎么樣的。搜索框是文本輸入框和提交按鈕的組合。有人可能會認為搜索框不需要設計,畢竟,這只是兩個簡單元素的組合。但是,在內容密集的應用或者網站上,搜索框通常是用戶最常用的設計元素。當用戶遇到相對復雜的網站時,他們將立即尋找搜索框以快速而輕松地到達最終目的地。此時,搜索框的設計及其可用性就顯得尤為重要。

在本文中,我們將看到如何改進此元素,以節省用戶前往目的頁面所需要的時間。

01 使用放大鏡圖標

在你設計的搜索框內放置放大鏡圖標。圖標是對象、動作或想法的直觀表示。有一些圖標得到了用戶的普遍認可,放大鏡圖標就是其中之一。

用戶即使沒有文本標簽也可以識別放大鏡圖標

提示:使用示意圖標的最簡單版本即可,較少的圖形細節可加快識別速度。

02 突出顯示搜索入口

如果搜索對您的應用程序/網站很重要,則應突出顯示,因為這可能是用戶發現信息的最快途徑。

左:搜索功能隱藏在圖標后面。圖片來源:thinkwithgoogle

顯示完整的搜索入口很重要,因為將搜索功能隱藏在圖標后面,不僅弱化了搜索功能,還額外增加了交互的成本:

圖片來源:AntonioJDN

不要在搜索中使用漸進式披露,因為它隱藏了上下文。

03 為搜索框提供按鈕

按鈕可以幫助人們認識到,還有另外一個步驟可以觸發搜索操作——即使他們決定通過按Enter來執行此操作。

提示:

  • 適當調整提交按鈕的大小,以便用戶不必非常精確地操控鼠標。較大的可單擊區域使查找和單擊更加容易。

  • 讓用戶可以通過使用Enter或者單擊按鈕來提交搜索。許多用戶仍然習慣單擊實際按鈕來提交搜索。

04 在每個頁面上放置搜索框

我們應該在每個頁面上,給用戶提供搜索的入口,因為如果用戶找不到所需的內容,則無論他們在網站中的位置如何,他們都將嘗試使用搜索功能。

可以參考最近改版的淘寶,頂部的搜索隨時隨地都在,無論是查看寶貝評價還是寶貝詳情。

05 使搜索簡單

如果設計一個搜索框,請確保它看起來像一個搜索框,并且使用起來盡可能簡單。根據可用性研究,默認情況下不顯示任何高級搜索選項對用戶更加友好。高級搜索選項(例如下面示例中的布爾搜索查詢)可能會使嘗試使用它的用戶感到困擾。

布爾搜索

06 將搜索框放在用戶希望找到的地方

搜索框應該被設計得突出并且容易被發現的。若用戶需要額外在頁面上花費精力來尋找搜索框,是不好的體驗。

你在下面看到的圖表是由A. Dawn Shaikh和Keisi Lenz進行的一項研究得出的:它顯示了142位受訪者,對站點搜索功能的預期位置分布圖。研究發現,對用戶來說最方便的位置是站點上每個頁面的左上角或右上角,用戶可以使用常見的F形掃描模式輕松找到它。

該圖說明了參與者希望找到該搜索的區域。右上角仍然是用戶希望找到搜索的第一個位置

因此,將搜索框放置在布局的右上角或中上角區域,可以確保用戶可以在期望的位置找到它。

內容豐富的YouTube的搜索位于中上方

提示:

  • 理想情況下,搜索框應該和網站的總體設計保持協調,但還應在用戶需要時設法使其脫穎而出。

  • 你擁有的內容越多,你就越想突出顯示搜索功能。如果搜索對你的站點至關重要,請使用強烈的對比度,以使搜索框從背景和周圍的元素中脫穎而出。

07 為搜索框設置適當的長度

文本輸入框過短,是設計中的常見錯誤。當然,用戶依然可以鍵入長文本進行查詢,但是頁面上只能顯示一部分內容,這意味著可用性很差,因為用戶無法輕松查看和編輯文本。

實際上,當搜索框的可見字符數量有限時,用戶如果使用較長的查詢文本,將很難且不便閱讀。所以,用戶會被迫去使用一些相對簡短、不精確的查詢文本。如果文本輸入框的長度,可以根據預期的輸入內容的長度而定,將會更加易于使用。

經驗法則是輸入27個字符的文本(可容納90%的查詢)。

亞馬遜使用適當大小的搜索框。

提示:考慮使用長度可變的搜索框,該搜索框會在單擊時擴展文本輸入框的長度。這樣在可以節省屏幕空間的同時,仍然為用戶提供足夠的視覺提示,以快速查找并執行搜索。

08 使用自動提示機制

自動建議機制,可以根據用戶輸入的字符來預測所要查詢的內容,幫助用戶找到合適的查詢關鍵詞。自動建議機制并不是要加快搜索過程,而是要指導用戶并幫助他們構建搜索查詢。當自動完成建議機制有效時,它可以幫助用戶更好地完成搜索查詢。

Google搜索從2008年就掌握并開始實施這種模式。因為用戶傾向于不止一次地搜索相同的東西,于是谷歌通過記住搜索歷史,為用戶節省了時間,創造了一種更加便捷的體驗。

提示:

  • 確保自動建議機制有用。設計不當的自動建議可能會使用戶感到困惑,且會分散用戶的注意力。因此,請使用拼寫自動更正,詞根識別和預想性文本來改進搜索功能。

  • 您應該盡快提供自動建議。以提供即時價值信息,并減少用戶數據輸入的工作量。

  • 建議項少于10個(并且沒有滾動條),避免用戶因為巨大的信息量而不知所措。

  • 允許使用鍵盤操作建議列表。允許用戶通過ESC鍵退出列表。

  • 差異化顯示輸入信息和建議信息之間的差異。

自動完成模式可以節省用戶時間,甚至可以建議內容或適當的措辭。

09 明確說明用戶可以搜索的內容

最好在輸入框中有一個示例文本,以便向用戶展示該搜索功能的用途。如果可以搜索多個內容,則使用輸入提示進行解釋,如下圖:

提示:務必將提示的內容限制為幾個詞,否則會適得其反,增加用戶認知負擔。

結論

在構建一個應用或者網站的時候,搜索是一個最基本的功能,也是很關鍵的元素。對搜索框的一個很小的改變,比如提供合適的輸入框長度,或者指明搜索字段中的信息,都可以顯著提高搜索的可用性和用戶體驗。

文章作者:卓仁SEO培訓
文章標題:百度搜索框和谷歌搜索框設計理念
本文地址:http://www.metrotorontoug.com/wlyx/13917.html

相關文章:

返回頂部
传奇电玩捕鱼