五個(gè)切入點(diǎn)提升app搜索設(shè)計(jì)體驗(yàn)

在信息爆炸的今天,人們?cè)缫呀?jīng)習(xí)慣通過(guò)搜索引擎獲取想要的信息。特別是在注重內(nèi)容資源的網(wǎng)站上,搜索可能是用戶最常用到的功能模塊。好的搜索設(shè)計(jì)能夠提高轉(zhuǎn)化,提升用戶體驗(yàn)。一個(gè)不好的搜索體驗(yàn)卻能給你的產(chǎn)品帶來(lái)致命的打擊。所以無(wú)論是為了給用戶提供更好的服務(wù),還是避免用戶產(chǎn)生消極的體驗(yàn)感受,做好搜索的體驗(yàn)對(duì)一個(gè)內(nèi)容型產(chǎn)品來(lái)說(shuō)都是至關(guān)重要的。

在搜索的過(guò)程中,用戶的經(jīng)歷大致可以分為五個(gè)部分,分別是:發(fā)現(xiàn)搜索、輸入關(guān)鍵詞、等待結(jié)果、查看結(jié)果、完成搜索,每個(gè)步驟的體驗(yàn)都是整體體驗(yàn)的一部分,將對(duì)用戶最終對(duì)搜索操作的體驗(yàn)產(chǎn)生影響。“得到結(jié)果”只是步驟中查看結(jié)果這一個(gè)部分的體驗(yàn),所以“黑貓白貓抓到老鼠就是好貓”這樣的概念在我們這里是遠(yuǎn)遠(yuǎn)不夠的,在保證搜索技術(shù)的前提下,我們還需要運(yùn)用設(shè)計(jì)師的思維,對(duì)這五個(gè)步驟進(jìn)行特殊的體驗(yàn)設(shè)計(jì)。

本文將把發(fā)現(xiàn)搜索、輸入關(guān)鍵詞、等待結(jié)果、查看結(jié)果、完成搜索這五個(gè)步驟作為切入點(diǎn),探討在不同的階段如何通過(guò)設(shè)計(jì)的方式,提升整體的搜索體驗(yàn)。

 

一、 發(fā)現(xiàn)搜索

 

1、根據(jù)搜索功能的優(yōu)先級(jí)選擇合適的位置

如果搜索是你的應(yīng)用程序/網(wǎng)站的一個(gè)重要功能,那么搜索框的顯示務(wù)必要足夠顯著,以保證用戶能夠最快的發(fā)現(xiàn)它。如果因?yàn)樗阉骺虿粔蛲怀?、不容易察覺(jué),用戶還得花費(fèi)精力去找它,那這個(gè)設(shè)計(jì)無(wú)疑是不夠友好的。

下面的三種樣式較為常見(jiàn),權(quán)重從1到3依次降低:

①獨(dú)立的一級(jí)tab專(zhuān)門(mén)用于搜索

直接出現(xiàn)在底部或頂部導(dǎo)航欄中,這樣用戶在切換幾個(gè)導(dǎo)航頁(yè)面時(shí),搜索的入口是實(shí)時(shí)存在的,全局性的設(shè)計(jì)讓用戶可以隨時(shí)點(diǎn)擊進(jìn)入到搜索頁(yè)面,一般而言,此類(lèi)操作 觸發(fā)后對(duì)應(yīng)的搜索頁(yè)面功能和層級(jí)也更加豐富,承載與搜索、發(fā)現(xiàn)相關(guān)的延伸功能。

 

②頁(yè)面頂部通欄樣式(一般在一級(jí)頁(yè)面使用)

這種設(shè)計(jì)方式占據(jù)了足夠的屏幕寬度,同時(shí)在高度上壓縮了其他內(nèi)容的展示區(qū)域;在頁(yè)面頂部位置出現(xiàn),用戶對(duì)此一目了然,可以快速點(diǎn)擊搜索;這種搜索入口設(shè)計(jì)一般在首頁(yè)或者二級(jí)頁(yè)出現(xiàn),讓用戶能夠更容易接觸到搜索功能。

變形:有的產(chǎn)品的搜索在首頁(yè)時(shí)會(huì)作為浮動(dòng)按鈕懸浮在頁(yè)面中間,當(dāng)頁(yè)面向上滑動(dòng)時(shí),按鈕上升變?yōu)轫敳客诎粹o。

 

③以icon的形式展示(一般在二級(jí)頁(yè)面使用)

以用戶最好理解的放大鏡icon作為搜索的入口,由于占據(jù)空間較小,出現(xiàn)的位置沒(méi)有嚴(yán)格限制;盡管icon樣式的入口能夠有效地觸發(fā)搜索功能,但是形式上的顯著程度不高,因此放置位置較為靈活,可以出現(xiàn)在頁(yè)面角落或者收起在更多入口當(dāng)中,避免與其他同等權(quán)重或高權(quán)重需求爭(zhēng)奪顯著性。

 

2、使用放大鏡圖標(biāo)

當(dāng)用一個(gè)圖標(biāo)來(lái)代表搜索入口時(shí),放大鏡圖標(biāo)是這個(gè)功能的不二之選。有人會(huì)問(wèn),代表搜索的圖標(biāo)可以有很多選擇,比如雷達(dá),望遠(yuǎn)鏡,為什么一定要用放大鏡。所謂圖標(biāo),其實(shí)就是代表著一個(gè)對(duì)象、動(dòng)作、想法等多種含義的圖形符號(hào)。我們通過(guò)圖標(biāo)看到的不僅僅是圖標(biāo)本身,而是它所代表的內(nèi)在含義。然而,對(duì)于用戶來(lái)講,具有通用性代表含義的圖標(biāo)為數(shù)并不多,幸運(yùn)的是,放大鏡圖標(biāo)正是其中之一。長(zhǎng)久以來(lái),“放大鏡圖標(biāo)就代表搜索”這個(gè)概念已經(jīng)被各種產(chǎn)品的長(zhǎng)期教育深深植入了用戶的思維中。這里并不是說(shuō)你不能夠使用別的圖形,而是你如果換成別的圖形,用戶在辨識(shí)起來(lái)會(huì)非常困難,甚至要付出一定的試錯(cuò)成本,這并不利于用戶體驗(yàn)。

即使沒(méi)有文本標(biāo)簽,用戶也能輕易地識(shí)別放大鏡圖標(biāo)

 

二、輸入關(guān)鍵詞

 

1、關(guān)鍵詞提醒,明確告知用戶可以搜索哪些東西

在輸入框中顯示一個(gè)搜索查詢的示例,向用戶表明他們究竟可以應(yīng)用該搜索框搜索哪些內(nèi)容,幫助用戶更容易使用這個(gè)功能。常用的方式有以下兩種:

在一個(gè)APP不同位置的搜索,要格外注意這一點(diǎn),因?yàn)槿绻蛔鎏嵝眩脩艨赡軙?huì)認(rèn)為這兩種搜索是一樣的,會(huì)出現(xiàn)搜不到想要的內(nèi)容,或者與之前搜出內(nèi)容不符的情況:

注意:搜索推薦不能過(guò)多,避免出現(xiàn)信息冗長(zhǎng)或信息過(guò)載

2、關(guān)鍵詞自動(dòng)糾錯(cuò)

打字本就是容易出錯(cuò)的。如果用戶錯(cuò)誤地輸入了某個(gè)搜索關(guān)鍵詞而你的搜索引擎又可以檢測(cè)到該錯(cuò)誤,則可以針對(duì)系統(tǒng)猜測(cè)和“更正”后的關(guān)鍵詞顯示搜索結(jié)果。這避免了由于沒(méi)有返回任何結(jié)果,迫使用戶重新輸入關(guān)鍵詞而導(dǎo)致的郁悶挫折感。

如圖當(dāng)在手機(jī)百度和ASOS發(fā)生打字錯(cuò)誤時(shí),產(chǎn)品很好地顯示了替代結(jié)果,而不會(huì)令用戶不愉快。 它使用“已顯示XXX,仍然搜索”“we searched for Overcoats”這樣的文字,既能提示用戶搜索詞有誤,又能讓用戶明白產(chǎn)品之所以搜索出這樣結(jié)果的原因,并且提供繼續(xù)搜索的選項(xiàng),措辭友好,考慮周到。

3、關(guān)鍵詞自動(dòng)檢索匹配

自動(dòng)檢索匹配機(jī)制可根據(jù)用戶輸入的字符進(jìn)行預(yù)測(cè)來(lái)幫助用戶找到一個(gè)可能匹配的查詢條件。 該機(jī)制并不是為了加快搜索過(guò)程,而是為了引導(dǎo)用戶并幫助他們構(gòu)建他們的查詢條件。普通用戶在構(gòu)建查詢方面往往會(huì)有困難:如果他們?cè)诘谝淮螄L試查詢后沒(méi)有獲得滿意的結(jié)果,后面的查詢也會(huì)很難順利,事實(shí)上,他們常常就會(huì)放棄。而當(dāng)自動(dòng)檢索匹配機(jī)制運(yùn)作順利時(shí),它們就能幫助用戶將查詢條件表達(dá)的更加清楚。

注:

1)盡快提供自動(dòng)檢索匹配,如在輸入第三個(gè)字符后就提供匹配以減少用戶的輸入成本;

2)匹配的查詢條件不要多余10個(gè)、不要顯示滾動(dòng)條,以保證信息不會(huì)過(guò)載;

3)將用戶原本的輸入部分跟匹配內(nèi)容做出區(qū)分,以免用戶困惑。

三、等待結(jié)果

 

顯示搜索進(jìn)度

理想情況下,搜索結(jié)果應(yīng)該做到即時(shí)顯示,但如果做不到,則應(yīng)該使用一個(gè)進(jìn)度指示器向用戶反饋當(dāng)前的系統(tǒng)狀態(tài),而且能夠清楚的指示他們需要等待多長(zhǎng)時(shí)間。常用的過(guò)渡方式有以下四種:

 

四、查看結(jié)果

 

1、顯示數(shù)量

顯示有效的搜索結(jié)果的總數(shù)量或總頁(yè)數(shù),以便用戶自己決定他們要花費(fèi)多長(zhǎng)時(shí)間來(lái)查看這些結(jié)果,同時(shí)也可以讓用戶通過(guò)數(shù)量判斷結(jié)果是否是符合他們預(yù)期的,有助于用戶做出更明智的搜索。

2、分類(lèi)展示結(jié)果

當(dāng)搜索的關(guān)鍵詞對(duì)應(yīng)多個(gè)種類(lèi)的結(jié)果時(shí),將結(jié)果按照種類(lèi)分開(kāi)展示,便于用戶從搜索結(jié)果中找到他們希望的結(jié)果。

3、提供排序和篩選項(xiàng)

當(dāng)搜索結(jié)果跟用戶輸入的關(guān)鍵詞看起來(lái)不相關(guān)并且/或搜索結(jié)果太多時(shí),用戶往往就會(huì)感到茫然。 你應(yīng)該向用戶提供與其搜索相關(guān)的篩選項(xiàng),并使其能夠在每次選擇多個(gè)選項(xiàng)以篩選掉不必要的結(jié)果。

篩選項(xiàng)能有效的幫助用戶縮小其結(jié)果范圍,否則他們可能需要大量的滾動(dòng)/翻頁(yè)后才能找到滿意的結(jié)果

提示:

1)不要給用戶太多的選擇,否則可能會(huì)引起選擇恐懼癥。如果搜索篩選項(xiàng)很多,將優(yōu)先級(jí)高的排在前面,不重要的隱藏起來(lái)。

2)不要把排序功能隱藏在篩選功能里面,它們本就是不同的任務(wù)。

3)當(dāng)用戶選擇一個(gè)狹窄的搜索范圍時(shí),在結(jié)果頁(yè)面的頂部明確說(shuō)明該范圍。

4、顯示適合的頁(yè)面布局

當(dāng)搜索結(jié)果涉及多圖文組合時(shí),考慮是使用列表形式排列還是宮格形式排列。列表的方式利于信息展示,用戶可以在短時(shí)間內(nèi)獲取詳細(xì)信息,適合以內(nèi)容為主的結(jié)果,如Facebook、亞馬遜;宮格利于圖片的展示,用戶可以方便地進(jìn)行圖片瀏覽,適合以圖片展示為主的搜索結(jié)果,如花瓣。

5、無(wú)結(jié)果頁(yè)的處理

將用戶置于沒(méi)有任何搜索結(jié)果的頁(yè)面(空頁(yè)面)上難免會(huì)令人沮喪,尤其是他們嘗試過(guò)幾次搜索之后仍然沒(méi)有結(jié)果。當(dāng)他們的搜索沒(méi)有任何匹配結(jié)果時(shí),你應(yīng)該避免讓他們步入死胡同,應(yīng)該考慮是不是能為用戶提供其他有價(jià)值的替代品(例如,在線商店可以從相似類(lèi)別中為用戶推薦替代商品)。

示例中看到的“無(wú)結(jié)果”頁(yè)面實(shí)際上是一條死胡同。它與在無(wú)結(jié)果頁(yè)面上顯示有價(jià)值的替代品形成鮮明對(duì)比,如示例中所示。

 

五、完成搜索

 

1、搜索后,搜索框內(nèi)不要清除關(guān)鍵詞

保留用戶鍵入的關(guān)鍵詞。?查詢重組是許多信息瀏覽過(guò)程中關(guān)鍵的一個(gè)步驟。 如果用戶找不到他們要查找的內(nèi)容,他們可能會(huì)使用稍微修改的關(guān)鍵詞再次搜索。為了方便用戶,請(qǐng)?jiān)谒阉骺蛑斜A舫跏嫉乃阉麝P(guān)鍵詞,這樣他們就可以在原來(lái)的基礎(chǔ)上進(jìn)行修改,而不必再次重新鍵入。

2、保留搜索歷史

即使用戶對(duì)搜索功能已經(jīng)了然于心,每一次搜索也都需要用戶從記憶中調(diào)用一些信息。為了想出一個(gè)有意義的搜索關(guān)鍵詞,用戶需要考慮到他要查找的目標(biāo)所具有的相關(guān)屬性,并將它們?nèi)诤系讲樵儣l件中。在設(shè)計(jì)搜索體驗(yàn)時(shí),你應(yīng)該記住基本的可用性規(guī)則:【尊重用戶的努力】。你應(yīng)該保存所有最近的搜索歷史,以便在下次進(jìn)行搜索時(shí)更快的向用戶提供該信息。

最近的搜索有利于用戶節(jié)省他們?cè)谠俅嗡阉飨嗤畔r(shí)的時(shí)間和精力。

注意:顯示的記錄不要多于10條(并且不要顯示滾動(dòng)條),過(guò)多的信息會(huì)引起用戶選擇困難和焦慮。

每天更新,
全站高品質(zhì)素材免費(fèi)下載!