搜索設(shè)計中放大鏡圖標(biāo)的優(yōu)點(diǎn)和缺點(diǎn)

2 評論 11301 瀏覽 2 收藏 12 分鐘

[核心提示] 用戶認(rèn)識一個放大鏡圖標(biāo)的意思是’搜索’,即使沒有一個文本標(biāo)簽。不足之處是圖標(biāo)更難被用戶找到。

在對搜索界面設(shè)計的研究中,我們發(fā)現(xiàn)了搜索框的一個發(fā)展趨勢:越來越多的設(shè)計使用一個純粹的放大鏡圖標(biāo)來替換傳統(tǒng)的帶有“搜索”二字的文本按鈕,甚至有些還丟掉了文本輸入框,僅僅留下了一個放大鏡圖標(biāo)。今天哪一個版本的用戶體驗(yàn)是最好的呢?

之前的搜索框設(shè)計指南

傳統(tǒng)的搜索框設(shè)計已經(jīng)很成熟,其主要原則是:

在頁面的右上角放置一個醒目的搜索框,搜索框的旁邊放置一個搜索按鈕。

搜索框不需要文字說明,旁邊的那個明顯的搜索按鈕告訴用戶在這里就可以搜索,同時還告訴他們?nèi)绾嗡阉鳌?/p>

然而,今天的一些新興的模式打破了這些基本準(zhǔn)則. 放大鏡圖標(biāo)更加節(jié)省空間,所以更多的網(wǎng)站使用它。更加靈活的使用設(shè)計準(zhǔn)則是沒有問題的,但是有一點(diǎn)是需要確認(rèn)的,那就是用戶的需求仍然是保持不變的。用戶并不關(guān)心搜索區(qū)域看上去像什么,他們只是需要一個可以迅速輸入搜索關(guān)鍵詞的地方。如果設(shè)計慣例正在發(fā)生變化,但仍能允許用戶輕松的實(shí)現(xiàn)這個目標(biāo),而不是減慢,那就不會有什么問題??墒窃谖覀冋{(diào)查中發(fā)現(xiàn),只有圖標(biāo)的搜索設(shè)計還是存在一些明顯的缺點(diǎn):

?(a):傳統(tǒng)搜索按鈕的搜索框;

(b,c,d):新興的帶放大鏡圖標(biāo)的搜索框設(shè)計模式;

(e)受移動設(shè)計影響的只有圖標(biāo)無輸入框的設(shè)計(我們并不推薦這種設(shè)計)

圖標(biāo)的采用

放大鏡圖標(biāo)已經(jīng)和搜索緊密聯(lián)系在一起,部分原因是許多不同的網(wǎng)站、應(yīng)用程序和操作系統(tǒng)使用它來提供一種查找信息的方法。 有了這樣的貫徹執(zhí)行,用戶已經(jīng)學(xué)會更快的識別這一圖標(biāo)。隨著響應(yīng)式設(shè)計的流行,僅使用圖標(biāo)的設(shè)計模式更加的流行起來(盡管好的響應(yīng)式設(shè)計的站點(diǎn)在轉(zhuǎn)換到大一點(diǎn)的屏幕時在圖標(biāo)旁邊還會顯示一個搜索框)。

?用于各種應(yīng)用和操作系統(tǒng)搜索功能的放大鏡圖標(biāo)已經(jīng)讓用戶把搜索和放大鏡僅僅的聯(lián)系在了一起。從上到下:谷歌瀏覽器,我 Windows 資源管理器,IE瀏覽器和 Mac 上面的 Office Word。

最新的研究結(jié)果

我們最新的研究結(jié)果顯示,在往放大鏡圖標(biāo)的設(shè)計過渡過程中,設(shè)計師希望盡量平滑而且無風(fēng)險,這里是一些用戶在放大鏡圖標(biāo)設(shè)計模式下可能會碰到的一些問題。

只有放大鏡圖標(biāo)的話,用戶會不太容易定位到搜索的功能

當(dāng)沒有搜索框的時候,放大鏡圖標(biāo)占用更少的空間。視覺上,它不是太突出,因此將不那么明顯。對于桌面網(wǎng)站,我們不推薦只有放大鏡圖標(biāo)的設(shè)計。只有放大鏡圖標(biāo)的設(shè)計在移動設(shè)備上會比較合理,原因是屏幕更小,可放置的圖標(biāo)和文字按鈕也更少。但是在桌面上,單獨(dú)的放大鏡圖標(biāo)就會迷失在眾多的圖標(biāo)和按鈕中。

當(dāng)用戶已經(jīng)可以一眼從放大鏡圖標(biāo)聯(lián)想到搜索的時候,那么就不需要顯示“搜索”二字了

用戶認(rèn)識并了解放大鏡的功能。當(dāng)他們看到它的時候就會聯(lián)想到搜索。如果圖標(biāo)很明顯,而且有很強(qiáng)的隱喻說明它是可點(diǎn)擊的,那么就不需要再顯示“搜索”二字了。因?yàn)楹芏嘤脩羧匀挥悬c(diǎn)擊搜索按鈕提交查詢的習(xí)慣,所以點(diǎn)擊放大鏡圖標(biāo)提交查詢就很有必要了。此外,對于國際版本的站點(diǎn)還有一個額外的好處,沒有必要再翻譯“搜索”這個詞了。(然而,從可訪問性的角度考慮,記得把“搜索”這個詞放在放大鏡按鈕的alt字段中)

當(dāng)搜索被放置在一個意想不到的位置時,用戶需要額外的幫助才能找到它

用戶首先會去右上角找,如果沒有找到,他們就開始掃描頁面的頂部。在那些搜索圖標(biāo)在左側(cè)的站點(diǎn)中,那些使用了一個大的空的搜索框的站點(diǎn)讓用戶更容易找到搜索。雖然用戶最終找到了搜索框,他們從一開始就不應(yīng)該為了一個搜索功能就找遍了整個頁面。

只有放大鏡圖標(biāo)的搜索增加了交互成本

只顯示一個放大鏡圖標(biāo)的搜索的一個負(fù)面效果是用戶必須等待一個搜索框顯示出來,找到在哪輸入,然后有時還需要點(diǎn)擊多次聚焦在輸入?yún)^(qū)域。這些額外的步驟拉長了搜索流程,本來是只需要點(diǎn)擊搜索框立即開始輸入的。

大多數(shù)的其他圖標(biāo)仍然需要文字才能表達(dá)清楚

清晰的文字幫助用戶更快的做決策。文字可以提供更好的信息線索。對于較新的圖標(biāo),應(yīng)該輔以文字說明,比如三行的菜單圖標(biāo)。地圖標(biāo)記圖標(biāo)是另外一個仍然有著不清晰的含義而且使用不一致的圖標(biāo),有時它意味著當(dāng)前的位置或者是一個不同的特定位置,又或是一般的地方,又或者是附近的地方。

?用戶還很陌生的新圖標(biāo),包括三線菜單圖標(biāo)(左)和地圖標(biāo)記圖標(biāo)(右圖)

用戶仍然在學(xué)習(xí)了解這些圖標(biāo)的含義和它的功能,所以最好有一個清晰的文字說明。此外,在桌面屏幕上有足夠的空間,為啥不使用戶更快更容易的找到他們想要的呢?

對于使用放大鏡圖標(biāo)的一些設(shè)計建議

1、首先,在桌面版本的網(wǎng)站上保留一個搜索框,放置在圖標(biāo)的旁邊。最好同時也在平板電腦上保證這個搜索框。當(dāng)一個網(wǎng)站在更小的屏幕上被瀏覽時(比如智能手機(jī)和智能手表),搜索框可以被隱藏直到用戶觸摸了放大鏡圖標(biāo)。在上面的所有情況中沒有必要再在搜索框中保留“搜索”文字說明了。

2、使用一個簡潔的概要圖標(biāo),放大鏡的最簡版本。更少的圖形細(xì)節(jié)可以加速識別。

?3、使用一個有更大內(nèi)邊距的大圖標(biāo),更大的可點(diǎn)擊面積更加容易被發(fā)現(xiàn)和點(diǎn)擊。

  

?4、使用大量的對比,使該圖標(biāo)可以從背景已經(jīng)周圍的元素中脫穎而出。

5、將其放置在右上角,這仍然是大多數(shù)人認(rèn)為搜索應(yīng)該在的位置。

6、讓用戶既可以使用回車鍵也可以點(diǎn)擊圖標(biāo)提交搜索請求。我在上面提到過,但是仍然值得重申一下,許多用戶仍然有點(diǎn)擊一個按鈕提交搜索請求的習(xí)慣。

7、可以考慮使用一個可變大的搜索框,這個搜索框可以在點(diǎn)擊的時候擴(kuò)大輸入?yún)^(qū)域。這樣既可以節(jié)省屏幕空間,又可以給用戶提供足夠的視覺線索讓用戶找到并執(zhí)行搜索,還能在執(zhí)行搜索的時候給用戶提供足夠的輸入空間。

?上面:搜索框被點(diǎn)擊前。下面:被點(diǎn)擊后,搜索框擴(kuò)大

8、不要把搜索按鈕和其他圖標(biāo)擠在一起,給搜索提供它應(yīng)有的優(yōu)先權(quán)。

9、這一條跟上面剛好相反,不要孤立搜索。這也會跟上面一樣讓搜索難以找到。

?10、當(dāng)用戶點(diǎn)擊搜索圖標(biāo)時,在圖標(biāo)的附近顯示搜索框,放得太遠(yuǎn)將增加用戶的交互成本。

  

?11、不要讓用戶點(diǎn)擊兩次。尤其是當(dāng)一次(或者沒有)就夠的時候。在一些情況下,用戶不得不先點(diǎn)擊圖標(biāo)打開搜索框,然后再點(diǎn)擊將輸入焦點(diǎn)移動到搜索框中。點(diǎn)擊圖標(biāo)一次就應(yīng)該把輸入焦點(diǎn)放到搜索框中,用戶立即就可以開始輸入。更好的是,當(dāng)鼠標(biāo)懸浮的時候就展開搜索框,同時焦點(diǎn)也準(zhǔn)備好,用戶立即可以輸入。

最終的目標(biāo)是幫助用戶更快的找到并執(zhí)行搜索

如果你的網(wǎng)站或者應(yīng)用使用一個放大鏡圖標(biāo)而不是一個“搜索”按鈕,上面的建議應(yīng)該會有一些幫助。我們還會注意一些其他的新興搜索設(shè)計模式,比如說將搜索框放在左側(cè),使用語音識別命令等。

作者:葛燦輝-搜索數(shù)據(jù)挖掘;via:極客公園

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 全文沒有配圖說明,希望可以改進(jìn)一下,不過還是要點(diǎn)個贊!

    來自廣東 回復(fù)
  2. 寫得太不通順了。。。。。

    來自四川 回復(fù)