移動端搜索功能研究

2016-11-3    資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

搜索功能無論在web端還是移動端,都是產(chǎn)品中十分重要的功能。文章主要從用戶體驗和產(chǎn)品功能、策略角度來分析,提出一些對應(yīng)的設(shè)計方法。

搜索能夠幫助用戶快速找到想要的結(jié)果,其中兩個重要目標(biāo)是提高搜索結(jié)果的相關(guān)性,降低結(jié)果觸達(dá)的延遲性。用戶使用搜索功能來滿足其信息獲取的需求,其搜索目的是在搜索結(jié)果中進(jìn)行內(nèi)容消費。搜索功能一般來說都是全局性質(zhì)的“模糊搜索”(用戶可以搜索到產(chǎn)品的主要內(nèi)容),有時也會出現(xiàn)在局部結(jié)構(gòu)中(如某個功能模塊下的“定向搜索”)。

產(chǎn)品的用戶體驗一般包括感官體驗、交互體驗、情感體驗、瀏覽體驗和信任體驗幾種,對應(yīng)的產(chǎn)品屬性特征為舒適性、易用性和可用性、友好性、吸引力及可靠性。其中用戶在移動端的搜索過程中對于感官體驗影響較弱以外,其他幾種體驗都會在整個搜索過程中涉及到。

移動端搜索功能研究-IAMUE

搜索功能用戶體驗描述

從用戶角度來看,搜索是給用戶提供其需要的東西,功能目標(biāo)的指向性更強(qiáng);搜索過程出現(xiàn)的所有相關(guān)功能入口或功能訴求點,推薦內(nèi)容作為錦上添花,而不是作為主要的功能載體;對于功能完整度高的搜索功能,體驗的重點更多落腳到搜索結(jié)果的內(nèi)容和呈現(xiàn)上,而結(jié)果的呈現(xiàn),與用戶的選擇行為和認(rèn)知息息相關(guān)。

從產(chǎn)品角度來看,搜索結(jié)果滿足更多用戶的直接和潛在需求,如運營和廣告需求;露出更多功能和內(nèi)容點,提高UV和VV,并向其他入口導(dǎo)流。

本文源于設(shè)計師在實際設(shè)計過程中的經(jīng)驗積累與感觸,寫作邏輯更加傾向于交互設(shè)計師的實際設(shè)計過程與思考,結(jié)合產(chǎn)品和前端開發(fā)的模塊劃分,一般將整個搜索流程分為搜索入口,搜索中間頁,搜索過程和搜索結(jié)果頁四部分。這也與用戶搜索操作流程相一致,但是并不是每個功能會有都會遇到,這也與實際的產(chǎn)品訴求相關(guān)。從“峰終理論”角度來看,用戶體驗的關(guān)鍵點出現(xiàn)在過程的峰值和終點部分,這是影響用戶對整個過程體驗的兩個關(guān)鍵點。搜索過程中的峰值,一般出現(xiàn)在搜索中間頁,讓用戶實現(xiàn)便捷搜索同時獲得更多的相關(guān)信息;終點毋庸置疑是搜索結(jié)果頁。

移動端搜索功能研究-IAMUE

搜索中的產(chǎn)品、設(shè)計與用戶體驗

一.搜索入口-用戶需求的起點,產(chǎn)品功能權(quán)重的體現(xiàn)

搜索入口是用戶開始搜索功能的起點,入口的可見性、易用性是影響產(chǎn)品初次搜索體驗的要素。搜索入口沒有差異化,但是用戶存在差異化特征:

1.目標(biāo)明確型用戶:知道自己想要搜索什么,以及對搜索結(jié)果有一定的心理預(yù)期;

2.目標(biāo)模糊型用戶:操作無目的或目的不明確,對更多目標(biāo)內(nèi)容沒有預(yù)期,或者不了解搜索功能索涵蓋的范圍。

從產(chǎn)品策略層分析,尤其對于內(nèi)容消費的產(chǎn)品而言,搜索功能所占據(jù)的功能權(quán)重更加重要,其功能架構(gòu)也更加厚重,搜索入口的設(shè)計方式,是產(chǎn)品屬性、功能策略的一種直觀反映。

因此從入口開始,便能看出搜索功能在產(chǎn)品中的權(quán)重如何。搜索入口從類型上可分為四種,包括獨立的導(dǎo)航標(biāo)簽、常駐的通欄導(dǎo)航條、功能布點的icon入口以及特殊樣式,其中前三種樣式較為常見,權(quán)重依次降低。

移動端搜索功能研究-IAMUE

三種主要搜索入口樣式

1.獨立的導(dǎo)航標(biāo)簽

直接出現(xiàn)在底部或頂部導(dǎo)航欄中,這樣用戶在切換幾個導(dǎo)航頁面時,搜索的入口是實時存在的,全局性的設(shè)計讓用戶可以隨時點擊進(jìn)入到搜索頁面,一般而言,此類操作觸發(fā)后對應(yīng)的搜索頁面功能和層級也更加豐富,承載與搜索、發(fā)現(xiàn)相關(guān)的延伸功能。例如微博的搜索頁面,切換至搜索導(dǎo)航標(biāo)簽時,進(jìn)入的是一個獨立的頁面,其內(nèi)容的豐富程度不亞于首頁,而且承載了話題、明星等更深層級的入口,功能屬性層次感十分飽滿。

移動端搜索功能研究-IAMUE

微博

2.頂部通欄樣式

這種設(shè)計方式占據(jù)了足夠的屏幕寬度,同時在高度上壓縮了其他內(nèi)容的展示區(qū)域;在頁面頂部位置出現(xiàn),用戶對此一目了然,可以快速點擊搜索;這種搜索入口設(shè)計一般在首頁或者二級頁出現(xiàn),讓用戶能夠更容易接觸到搜索功能;更深層級或者落地頁上貿(mào)然加上搜索入口,可能會帶來以下幾方面問題:(1)頁面跳轉(zhuǎn)邏輯的混亂:混淆用戶的使用預(yù)期,也給開發(fā)帶來不便;(2)壓縮頁面高度:在較深層級頁面中,內(nèi)容往往比功能更重要,露出更多內(nèi)容有益于產(chǎn)品目標(biāo)的實現(xiàn);(3)用戶缺乏訴求:最重要的一點,用戶在更深層的內(nèi)容詳情頁,對于搜索功能沒有那么強(qiáng)的場景訴求,此時更多內(nèi)容的露出是用戶當(dāng)前的主要關(guān)注點,無限制的增加入口很容易將操作帶入一個死循環(huán)中。如貓眼電影的首頁的搜索入口為頂部通欄樣式。

移動端搜索功能研究-IAMUE

貓眼

3.icon入口樣式

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

移動端搜索功能研究-IAMUE

Bilibili                                      澎湃新聞

4.特殊樣式

一般特殊樣式的搜索入口與App本身的設(shè)計風(fēng)格緊密相關(guān),如Android原生應(yīng)用中的懸浮按鈕功能等;另外,部分搜索入口中還會露出輔助功能,付拍照掃碼、切換分類內(nèi)容等。

移動端搜索功能研究-IAMUE

空格

二.搜索中間頁-滿足用戶潛在需求,產(chǎn)品運營關(guān)鍵頁面

一般而言,用戶點擊搜索入口后會跳轉(zhuǎn)至獨立的搜索頁面,此時出現(xiàn)的頁面筆者習(xí)慣稱之為搜索(過程的)中間頁,實際上是獨立的搜索頁面。

從用戶層面來看,用戶點擊搜索入口后,第一直覺是直接進(jìn)入搜索功能,調(diào)起輸入法進(jìn)行關(guān)鍵詞輸入,這是用戶最直觀的需求,也是大部分App所做的。但是用戶的潛在需求卻包含更多信息,用戶需要知道在這里可以搜索什么、怎么去搜索的指導(dǎo),搜索中間頁,實際上除了滿足產(chǎn)品運營需求以外,也是對用戶潛在需求的挖掘和滿足,也是產(chǎn)品可靠性的一種體現(xiàn)。

從產(chǎn)品策略層來看,對于輕量化的搜索功能,可以不使用搜索中間頁,從而降低信息體量和頁面冗余度,因為這種頁面往往是產(chǎn)品策略和運營需求的“重災(zāi)區(qū)”,動態(tài)推廣內(nèi)容或者需要提升點擊量、導(dǎo)流的入口,都可以讓在這個頁面承載。

綜上來看,在整個搜索過程中,搜索中間頁可以認(rèn)為是僅次于搜索結(jié)果頁而存在的,這也是用戶在整個搜索過程中產(chǎn)生“峰值體驗”的關(guān)鍵點,也是給用戶帶來驚喜,滿足潛在需求的方式。搜索中間頁,主要的設(shè)計要素包括:提示信息、分類搜索功能、搜索歷史、熱門搜索詞、其他用戶推薦信息與廣告運營位幾種。

1.提示信息

提示信息時與該場景下能夠?qū)崿F(xiàn)的搜索功能相關(guān)的文案內(nèi)容,常見樣式為出現(xiàn)在搜索框中的純文案,當(dāng)然也可以在整個頁面中展示。文案提示信息在用戶體驗中相當(dāng)于一種前置反饋,這種設(shè)計體現(xiàn)產(chǎn)品友好性的一個小細(xì)節(jié),對用戶也是一種良性的引導(dǎo),給用戶提供了一個心理預(yù)期,同時也對用戶隨意輸入關(guān)鍵詞造成無結(jié)果的傷害體驗的可能進(jìn)行了限制。例如視頻App的搜索,不僅可以搜索自己站內(nèi)視頻,也可以搜索其他平臺的視頻,不僅可以搜索視頻,還可以搜索明星、娛樂事件等。另一方面,露出必要的提示,有時也是一種宣傳手段。當(dāng)然,對于通欄的搜索入口,提示信息一般會直接顯示在入口中,進(jìn)入搜索中間頁后會直接帶入當(dāng)前文案信息。

移動端搜索功能研究-IAMUE

橘子娛樂                   bilibili                  天天快報

2.分類搜索功能

是指在搜索前就能夠選擇搜索范圍的功能,在一些平臺內(nèi)容較多需要細(xì)分的App中較為常見。搜索功能是全局性的,僅在搜索框中出現(xiàn)提示詞也不足以滿足用戶對于信息分類搜索的需求,因此需要獨立設(shè)置分類搜索按鈕進(jìn)行設(shè)置,在搜索開始前就縮小搜索范圍,提升操作的便捷性和智能化效果;但是不足之處是如果用戶對此感知不足的話,對與搜索結(jié)果只呈現(xiàn)小范圍內(nèi)的信息會產(chǎn)生疑惑,因此需要注意對范圍限制的提醒以及各個搜索范圍入口的打通。

移動端搜索功能研究-IAMUE

虎撲                                    淘寶

3.搜索歷史

搜索歷史前端可以作為一種快速搜索的功能入口,呈現(xiàn)用戶的搜索歷史,一來可以方便用戶下次點擊的時候?qū)τ谥貜?fù)性的內(nèi)容實現(xiàn)快速搜索,二來也便于收集用戶習(xí)慣。

在設(shè)計搜索歷史是需要注意以下幾點,包括用戶行為特征和產(chǎn)品策略的內(nèi)容:

(1)位置:根據(jù)認(rèn)知心理學(xué)中的相似律,搜索內(nèi)容位置會處于頁面頂部,緊貼搜索框展示,此時用戶的視覺焦點在這里,更容易注意到,也不會產(chǎn)生認(rèn)知偏差,因此該位置要避免被其他信息模塊占據(jù)從而割裂二者的聯(lián)系;

(2)顯示樣式:一般搜索詞會作為一個完整的搜索內(nèi)容呈現(xiàn),而且會涉及到點擊操作,因此不適合折行或者截斷顯示,以便讓用戶一目了然自己搜索了哪些詞,一般的處理方式固定行數(shù)顯示,或者以btn樣式顯示,強(qiáng)化可點擊的操作意象;

(3)編輯操作:并不是所有用戶對于占據(jù)頁面大部分高度的內(nèi)容都是認(rèn)同或需要的,編輯刪除操作必不可少;

(4)數(shù)量限制:最后還要限制一下露出數(shù)量,前面由于限制了顯示策略,因此要根據(jù)用戶潛在的搜索內(nèi)容文案數(shù)量確認(rèn)當(dāng)前的露出數(shù)量;露出內(nèi)容少則對用戶的了意義不大,因為舊的內(nèi)容很容易被新的搜索詞替換掉,露出較多則會占據(jù)頁面太多高度,考慮到此時頁面會調(diào)起輸入法,因此也不適合露出太多內(nèi)容。

4.熱門搜索詞

當(dāng)前平臺主推的內(nèi)容,或者高頻的搜索詞都可以放置于此。搜索熱詞一般是產(chǎn)品需求驅(qū)動出現(xiàn)的,可以讓頁面內(nèi)容更加豐滿,同時也露出當(dāng)前的主推內(nèi)容,提升內(nèi)容的曝光率和點擊量。熱門搜索詞和搜索歷史的誰家要點相似性很多,因此需要注意在樣式上與搜索歷史內(nèi)容進(jìn)行區(qū)分;另一方面,不同于搜索歷史的時,這是產(chǎn)品后臺配置的內(nèi)容,不是用戶主動有意識或無意識觸發(fā)的,因此就存在用戶接受度的問題。在數(shù)量上需要更加斟酌。根據(jù)產(chǎn)品內(nèi)容屬性的不同,純文案的搜索詞在10(或7±2)個左右能夠讓用戶一目了然,較為復(fù)雜樣式的搜索詞則更要簡化數(shù)量,讓用戶能夠抓住信息的重點。放置過多搜索詞,不僅會稀釋用戶的注意力,更多的情況是被調(diào)起的輸入法遮擋,反而降低曝光率。

移動端搜索功能研究-IAMUE

愛奇藝                               網(wǎng)易新聞

5.其他用戶推薦信息與廣告運營位

依據(jù)平臺產(chǎn)品不同,可擴(kuò)展呈現(xiàn)更多的推薦內(nèi)容或者相關(guān)內(nèi)容,更有甚者可以把平臺內(nèi)容分模塊展現(xiàn)出來。廣告運營位與其他推薦信息的屬性是一致的,只是把內(nèi)容替換成廣告推廣信息。

移動端搜索功能研究-IAMUE

微博

三.搜索過程-用戶操作便捷化與簡潔化,產(chǎn)品功能人性化與智能化

從用戶操作場景來看:在實際的點擊過程中,用戶點擊搜索框,調(diào)起輸入法開始進(jìn)行輸入行為進(jìn)行搜索,核心目標(biāo)就是快速輸入關(guān)鍵詞,同時對于一些較長的關(guān)鍵詞,能夠快速輸入進(jìn)去;或者說,輸入過程的簡潔、便捷、快速是影響用戶體驗的關(guān)鍵痛點,這種快速很難在系統(tǒng)輸入法上做文章,但是可以在其他方面實現(xiàn)給用戶帶來“便捷”“快速”的體驗,包括輸入框結(jié)構(gòu)相應(yīng)的變化以及即時呈現(xiàn)的搜索推薦詞,這也是搜索功能好用性和易用性的一種體現(xiàn)。

從產(chǎn)品策略來看:此時用戶主要的注意力焦點在輸入過程中,因此目前的過程是操作功能為主,策略也需要以更好地滿足用戶的操作功能為導(dǎo)向。

輸入搜索詞的過程中,光標(biāo)已經(jīng)定位于此,搜索框處于激活狀態(tài),此時的頁面元素一般包括:(1)搜索框(一般帶著提示詞);(2)清除按鈕(一般以X的形式出現(xiàn),點擊可清空當(dāng)前全部搜索詞,同時點擊后可返回搜索中間頁或跳出搜索功能);(3)搜索btn(iOS端鍵盤有搜索按鍵,但Android的輸入法可能不是原生的,無法判斷當(dāng)前的狀態(tài),因此從通用性角度考慮,適宜放置一個顯著的搜索btn)。

移動端搜索功能研究-IAMUE

QQ音樂                               橘子娛樂

除了搜索框的變化,用戶在輸入搜索詞的過程中也伴隨著對應(yīng)的反饋,此時出現(xiàn)的即時反饋主要包括兩種樣式,搜索聯(lián)想詞和分類匹配,提高產(chǎn)品的友好性體驗。

1.搜索聯(lián)想詞

搜索聯(lián)想詞,也稱為搜索suggestion,是根據(jù)用戶逐漸輸入內(nèi)容而不斷呈現(xiàn)的包含輸入關(guān)鍵詞的列表。對于功能完整的搜索過程,搜索聯(lián)想詞能夠幫助用戶的輸入信息起到糾正、提醒、引導(dǎo)的作用,對于有固定搜索結(jié)果頁的產(chǎn)品而言,搜索聯(lián)想詞是起到便捷搜索的作用,例如愛奇藝App的搜索功能;但是對于一些輕量化的搜索功能而言,即搜索目標(biāo)單一、搜索維度單一或者無專門的搜索結(jié)果聚合頁面來說,則可以不設(shè)置搜索中間頁,直接通過suggestion列表的樣式呈現(xiàn)搜索結(jié)果,點擊后直接跳轉(zhuǎn)至搜索結(jié)果頁或者對應(yīng)的目標(biāo)落地頁,從而幫助用戶實現(xiàn)快速搜索功能,例如產(chǎn)品中的地區(qū)設(shè)置搜索(維度單一)或者百度地圖App中的搜索(目標(biāo)單一)等。

移動端搜索功能研究-IAMUE

愛奇藝                                 百度地圖

2.分類匹配

對于多某塊或者多內(nèi)容的產(chǎn)品來說,不僅在結(jié)構(gòu)中需要對不同范疇或?qū)傩韵碌膬?nèi)容進(jìn)行分類,在搜索過程中也要明確告知用戶該分類下的內(nèi)容,提高信息內(nèi)容的清晰度。用戶在搜索的過程中可以實時切換分類范圍,同時顯示固定范圍下的搜索數(shù)量,不斷自己的搜索范圍能夠讓最終的搜索結(jié)果更加準(zhǔn)確。此類設(shè)計方式在電商應(yīng)用中更常見。

根據(jù)分類結(jié)果或產(chǎn)品策略的不同,可以使用標(biāo)簽或者列表上的入口引導(dǎo)樣式來設(shè)計,如下圖所示。

移動端搜索功能研究-IAMUE

京東                         淘寶                         nice

四.搜索結(jié)果頁-用戶的終極目標(biāo),產(chǎn)品策略的爆發(fā)地

搜索結(jié)果頁是指用戶點擊搜索后看到的搜索內(nèi)容的聚合頁面,是用戶搜索的目標(biāo)所在。

從用戶操作場景來看,搜索結(jié)果頁就是想找到我想找的信息,因此目標(biāo)的準(zhǔn)確性呈現(xiàn)是重點,用戶需要一眼就看到目標(biāo)信息;另一方面,本著所見即所得的觀念,有了目標(biāo)信息,全端通用的交互操作和功能,在這里也都需要能夠?qū)崿F(xiàn);這樣全端的操作體驗才具有一致性和連續(xù)性。

從產(chǎn)品策略來看,搜索結(jié)果頁也是一個信息內(nèi)容聚合的關(guān)鍵頁面,除了呈現(xiàn)必要的目標(biāo)信息,往往還可以在其中放置更多偏向于產(chǎn)品策略的相關(guān)信息。當(dāng)然,其中還存在一類輕量化的搜索結(jié)果頁樣式,與搜索suggestion樣式相似。

1.多維度展示

當(dāng)內(nèi)容品類過多時,可以分tab標(biāo)簽或者分card顯示對應(yīng)的內(nèi)容;盡管搜索結(jié)果頁不是固定常駐的頁面,每次搜索都會重新請求服務(wù)器加載新的內(nèi)容,但是頁面聚合的信息內(nèi)容的種類是固定的,同樣需要按模塊進(jìn)行管理,提升信息的清晰度和可讀性,幫助用戶快速找到目標(biāo)信息。

2.功能操作

與搜索結(jié)果的屬性相關(guān),主要用戶大部分中間用戶快速完成相關(guān)功能操作,縮短操作路徑。如果視頻類內(nèi)容,則會露出播放或下載緩存btn,如電商類產(chǎn)品則可出現(xiàn)購買或者加入購物車btn,用戶可直接點擊加入購物車,縮短整個流程的操作次數(shù)等。

移動端搜索功能研究-IAMUE

淘寶                       愛奇藝                        美團(tuán)

3.輕量化搜索結(jié)果頁

一些輕量化的搜索設(shè)計,會在用戶輸入的過程中實時顯示搜索結(jié)果,樣式與suggestion列表相似,但是實際呈現(xiàn)的是具體的搜索結(jié)果,而非搜索關(guān)鍵詞,用戶點擊后直接跳轉(zhuǎn)到對應(yīng)的詳情頁或者觸發(fā)相應(yīng)的交互操作。這種搜索結(jié)果頁樣式使用戶單維度的搜索,例如電話簿或者地區(qū)選擇等,搜索的結(jié)果和用戶的搜索目標(biāo)都是單一維度且高度一致的。這種設(shè)計方式主要源自于以下幾種原因:(1)用戶端:用戶在這種搜索場景下的目標(biāo)比較單一和固定,同時對于結(jié)果有一定的預(yù)期,因此可直接顯示搜索結(jié)果;(2)產(chǎn)品端:搜索范圍固定,內(nèi)容固定,目標(biāo)內(nèi)容在很長一段時間內(nèi)不會變化,同時搜索功能在該場景下較弱,因此可以實現(xiàn)快速搜索,避免了請求服務(wù)器的加載loading過程中耗費的時間;(3)其他:一般需要有搜索結(jié)果的頁面,除了搜索結(jié)果的內(nèi)容,還會放置很多結(jié)構(gòu)化、模塊化或者推薦的內(nèi)容;反觀地區(qū)或者電話聯(lián)系人搜索功能,用戶不需要再搜索結(jié)果頁中推薦多余的無關(guān)信息,不需要雜亂的信息干擾自己的操作目標(biāo),而且在這兩種場景下,用戶的搜索結(jié)果是單一的,內(nèi)容局限性較強(qiáng),使用獨立的搜索結(jié)果頁,可能大部分的頁面空間是空白的,也會影響頁面的視覺美觀效果。

移動端搜索功能研究-IAMUE

貓眼

文章內(nèi)容對于搜索功能,從用戶體驗和產(chǎn)品策略兩個方面進(jìn)行了分析,并結(jié)合自身的設(shè)計經(jīng)驗提出了一些設(shè)計策略,基本涵蓋了較為完整的搜索功能設(shè)計樣式,但是也并不全面,只是對較為常見的搜索樣式設(shè)計并不是固定化的,是根據(jù)產(chǎn)品需求、目標(biāo)人群、技術(shù)實現(xiàn)、后臺數(shù)據(jù)等因素共同作用的結(jié)果,因此并不需要拘泥于一定的樣式。在設(shè)計過程中還是需要根據(jù)實際情況進(jìn)行調(diào)整,滿足用戶在目標(biāo)場景下的需求,同時達(dá)到產(chǎn)品的KPI目標(biāo)。

作者:蝦米&胖喵

原文鏈接:http://fatcatdesign.lofter.com/post/28e14e_ca5b455

藍(lán)藍(lán)設(shè)計m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù) 

分享本文至:

日歷

鏈接

個人資料

存檔