微信
手機版
商務合作

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

2019-11-01 14:20 投稿人 : 成都SEO 圍觀 : 評論

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

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

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 明確說明用戶可以搜索的內容

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

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

結論

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

相關文章

  • 春哥營銷軟件_QQ群批量采集加群工具Ver1.0
    春哥營銷軟件_QQ群批量采集加群工具Ver1.0

    重慶營銷軟件_QQ群批量收集和分組工具版本1.0,軟件描述: 該軟件是市場上唯一免費的QQ群收藏和批量添加軟件。其主要功能是收集QQ群竝批量添加QQ群。 加法組不是很穩定,不具有処理騐証碼的...

    2019-10-27
  • 驅動測試寶典自由流動特定操作方法
    驅動測試寶典自由流動特定操作方法

     各位使用駕考寶典的用戶們,真滴哦在其中如何實現免流量嗎?在此,就為你們帶來的駕考寶典中免流量的具體操作方法。 1、打開我們的駕考寶典APP,顯示出來界面后,點擊右下角的“駕考”...

    2019-08-27
  • 如何播放流行的辣椒
    如何播放流行的辣椒

    花椒直播是一款非常好用的視頻直播軟件,小伙伴們通過軟件即可將自己的生活往事進行在線直播,發揮自己的特長,小伙伴們快來下載使用吧。 方法步驟 1.首先下載花椒直播,小編已經為大...

    2019-08-27
  • 以太坊區區塊鏈獎勵投票結果宣布減少獎勵成為人們的共識
    以太坊區區塊鏈獎勵投票結果宣布減少獎勵成為人們的共識

    的區塊獎勵投票結果終于在長達1個月后揭曉,據了解,在此次的投票中,在參與的ETH當中,接近99.7%的票數支持減少區塊獎勵。支持提高或者是維持當前獎勵的僅有348.7個ETH(約0.03%)。不過這...

    2019-08-27
  • 搜狗如何隱藏和顯示桌面工具欄
    搜狗如何隱藏和顯示桌面工具欄

    有些朋友在用搜狗壁紙的時候,不喜歡它在右下角的工具欄覺得用不到,想要隱藏它怎么辦呢,下面小編為大家介紹一下搜狗壁紙如何顯示和隱藏桌面工具欄 1、打開搜狗壁紙點擊“設置”按鈕...

    2019-08-27
  • SEO優化之萬能301重定向權重轉移全套視頻
    SEO優化之萬能301重定向權重轉移全套視頻

    SEO優化全能301重定曏重量轉移全套眡頻,眡頻介紹:我很久沒有錄制眡頻了,這次大家都是SEO優化全能301重定曏重量轉移全套眡頻,錄制這個眡頻是有原因的,因爲集團裡有兄弟,前段時間我問...

    2019-10-27
  • 2017網絡營銷公司如何保證效果?
    2017網絡營銷公司如何保證效果?

    隨著互聯網和移動互聯網的快速發展和普及,成都越來越多的企業開始進行 網絡營銷外包 ,由于大部分中小企業沒有建立營銷團隊,都是由第三方 網絡營銷公司 進行營銷托管。那么, 成都網...

    2017-09-14
  • 黑馬程序員-數據營銷如何抓取百萬精準手機號
    黑馬程序員-數據營銷如何抓取百萬精準手機號

    黑馬程序員——數據營銷(Dark Horse)如何抓取百萬個準確的手機號碼,眡頻簡介:這段眡頻主要教你如何快速獲取準確的用戶手機號碼,竝使用平臺配郃工具抓取預定用戶的手機信息。阿裡巴巴商...

    2019-10-27
  • 花生殼內聯網滲透教程
    花生殼內聯網滲透教程

    花生殼于2013年11月11日正式發布花生殼(內網穿透)服務。無需公網IP,無需路由器,從此對NAT說NO!顛覆式的動態域名技術創新,全新的交互界面及功能體驗,滿足你多元化的需求,帶給你煥然...

    2019-08-27
  • 原創阿里通手機/電話轟炸機V1.0
    原創阿里通手機/電話轟炸機V1.0

    原創阿裡通手機/手機轟炸機1.0版,團隊中的很多兄弟都需要手機轟炸機,所以他們花時間爲兄弟們寫了一個軟件。它非常有用。操作步驟如下: 1.下載 ali tong 不支持阿裡通使用舊版本、新版本...

    2019-10-27
無法在這個位置找到: plus/comment.htm
標簽列表
網站首頁
減肥論壇
減肥話題
減肥工具
金瓶梅在线观看_性色的免费视频网站_老湿机69福利区