如何給你的搜索列表設(shè)計(jì)健康減肥

很多網(wǎng)站都會(huì)非常關(guān)注購(gòu)買(mǎi)行為的用戶(hù)體驗(yàn)而忽略了如何促進(jìn)用戶(hù)去進(jìn)行購(gòu)買(mǎi)操作。其實(shí)對(duì)于用戶(hù)來(lái)說(shuō)只有當(dāng)他決策了之后才會(huì)去進(jìn)行購(gòu)買(mǎi)的行為，那么我們首先要了解，怎么樣能讓用戶(hù)更容易決策呢？

用戶(hù)決策的最根本目的就是用最短時(shí)間找到最佳的選擇，這個(gè)行為一般在搜索結(jié)果頁(yè)就特別突出，因?yàn)槲覀兠鎸?duì)頁(yè)面上幾十甚至更多的搜索結(jié)果集，這個(gè)時(shí)候決策的重要性就凸顯了出來(lái)。

現(xiàn)在很多網(wǎng)站的搜索結(jié)果集非常的冗長(zhǎng)，信息量很大，無(wú)法讓用戶(hù)一目了然，做出決策。

我經(jīng)常聽(tīng)到需求方跟我說(shuō)：請(qǐng)幫我在列表項(xiàng)突出xx信息。而當(dāng)我問(wèn)起理由的時(shí)候他通常會(huì)告訴我用戶(hù)會(huì)用的到，或者是他認(rèn)為用戶(hù)覺(jué)得因?yàn)檫@個(gè)信息而影響 決策。這個(gè)導(dǎo)致在我設(shè)計(jì)搜索結(jié)果頁(yè)的時(shí)候，最初干凈簡(jiǎn)潔的版本就變得越來(lái)越冗長(zhǎng)，越來(lái)越多可用可看的信息，也導(dǎo)致css的同事們經(jīng)常1px1px的壓縮列 表寬度，為的就是避免換行而造成的不必要的錯(cuò)位。

所以急需幫我們的搜索列表減減肥。

1.        那么減什么呢？

凸顯關(guān)鍵信息，減少不必要的干擾

提取關(guān)鍵性信息

比如說(shuō)機(jī)票列表項(xiàng)信息有很多，時(shí)間、機(jī)場(chǎng)、航空公司、艙位、航班、機(jī)型、價(jià)格、折扣、備注、燃油機(jī)建費(fèi)、飛行時(shí)長(zhǎng)、退改簽、禮盒、日歷展示的價(jià)格。對(duì)于這么多信息，我們?nèi)绾稳チ私庥脩?hù)真正的關(guān)注點(diǎn)呢？

由這張熱點(diǎn)圖可以看出，用戶(hù)始終在價(jià)格和時(shí)間上反復(fù)比較，所以在機(jī)票的搜索結(jié)果頁(yè)中對(duì)于用戶(hù)最關(guān)心的因素應(yīng)該是價(jià)格和時(shí)間。我們?cè)谠O(shè)計(jì)搜索結(jié)果頁(yè)的 時(shí)候就應(yīng)該突出時(shí)間和價(jià)格兩個(gè)特征。他們也同樣關(guān)注如航空公司或者機(jī)型等信息，但是這些信息是否真正影響用戶(hù)的決策呢？曾經(jīng)有一個(gè)用戶(hù)參加訪(fǎng)談時(shí)聊到，非 常關(guān)注機(jī)型，可是當(dāng)她參與眼動(dòng)任務(wù)流時(shí)，在決策中卻完全沒(méi)有關(guān)注到機(jī)型信息。所以這種現(xiàn)象被稱(chēng)為“夸耀效用原理”：人們喜歡自己被包圍在不必要的功能中 [來(lái)自《簡(jiǎn)約至上》] 。我們需要保留的是那些真正影響用戶(hù)決策的關(guān)鍵信息。

2.        怎么減的“凹凸有致”？

對(duì)于一個(gè)搜索結(jié)果來(lái)說(shuō)，關(guān)鍵性信息也許會(huì)有很多，那么如何更合理的組織這些信息，并且讓它們呈現(xiàn)的更加有層次，使用戶(hù)在搜索結(jié)果這個(gè)步驟中更易進(jìn)行選擇呢？

合理組織信息

所謂合理組織信息，就是將關(guān)鍵性信息以及輔助信息內(nèi)容按照相關(guān)性、從屬性進(jìn)行區(qū)塊化呈現(xiàn)。

比如一般的搜索列表項(xiàng)會(huì)包括重新搜索區(qū)域、篩選區(qū)域、主要產(chǎn)品區(qū)域、輔助特價(jià)區(qū)域。目前大部分網(wǎng)站對(duì)于這四個(gè)區(qū)域的塊狀劃分還是比較清晰的，但是對(duì)于用戶(hù)最關(guān)注的產(chǎn)品列表區(qū)域反而有些參差不齊，也是對(duì)設(shè)計(jì)師挑戰(zhàn)最大的地方。

我們可以來(lái)看一個(gè)案例：

如果讓你判斷是否缺貨，哪個(gè)圖讓你更能一眼看出呢？

在A中，將無(wú)貨通知夾在價(jià)格信息下方，導(dǎo)致其關(guān)注度遠(yuǎn)遠(yuǎn)降低，無(wú)法被用戶(hù)關(guān)注到。

B做的相對(duì)較好，他將到貨通知放置在購(gòu)買(mǎi)的位置上，使得用戶(hù)在想要購(gòu)買(mǎi)該商品時(shí)就能一下子看到無(wú)貨的通知；

C不僅在購(gòu)買(mǎi)位置上放上了到貨通知的按鈕，并且還在圖片區(qū)域明顯標(biāo)志使得該信息更加明顯。

所以從這個(gè)細(xì)節(jié)點(diǎn)就能看出，合理組織信息，能夠幫助到用戶(hù)更快速更有效地了解產(chǎn)品信息避免給用戶(hù)造成困惑。那么如何才能合理的組織信息呢？我們可以通過(guò)一些案例來(lái)進(jìn)行分析。

a)      將信息按照不同的功能模塊來(lái)組織構(gòu)架

比如，機(jī)票信息，分為航程信息、航班信息、艙位信息，在信息中，和航程信息相關(guān)的，比如出發(fā)城市到達(dá)城市，出發(fā)日期到達(dá)日期等都是航程類(lèi)信息；航班 類(lèi)信息包括，如機(jī)型、起抵時(shí)間、起抵機(jī)場(chǎng)、航空公司；艙位信息包括，如價(jià)格、折扣、備注、退改簽等。那么在組織這些信息的時(shí)候需要考慮信息的從屬和相關(guān) 性，應(yīng)該把其對(duì)應(yīng)呈現(xiàn)，如下圖：

將來(lái)如果有任何其他信息的加入可以考慮對(duì)應(yīng)信息類(lèi)別來(lái)放置其位置。

b)      做成縱向列表并且結(jié)構(gòu)化會(huì)更容易比較

如下圖所示：B和A均為縱向列表，但是B的產(chǎn)品信息呈現(xiàn)方式是按照從上至下從左至右的順序組織，而A的產(chǎn)品信息是經(jīng)過(guò)結(jié)構(gòu)化分類(lèi)之后而分欄展示的。很明顯用戶(hù)能在A中進(jìn)行上下不同的信息的對(duì)比。

c)      避免不必要信息的重復(fù)顯示

如攜程列表項(xiàng)中燃油機(jī)建和飛行時(shí)長(zhǎng)信息，在列表項(xiàng)中重復(fù)出現(xiàn)，在用戶(hù)訪(fǎng)談中，用戶(hù)基本對(duì)于灰色條目并沒(méi)有任何關(guān)注度，因此作為輔助型信息相對(duì)比較重要的燃油機(jī)建信息更換位置，刪除飛行時(shí)長(zhǎng)。

d)     某些輔助信息可以隱藏顯示，但保留入口

如上圖，贈(zèng)品作為輔助信息，也許未必能影響主流用戶(hù)對(duì)于產(chǎn)品的決策，但是做成小的icon hover上去顯示出其贈(zèng)品，也給予喜歡查看贈(zèng)品信息的用戶(hù)保留了一個(gè)顯示的區(qū)域，又不干擾用戶(hù)對(duì)主要信息的獲取。

信息呈現(xiàn)有層次

有很多次，需求方經(jīng)常會(huì)要突出某個(gè)重要信息，而要求設(shè)計(jì)師增大字體，增加顏色或者加粗等等行為，但是經(jīng)驗(yàn)表示，當(dāng)你想突出某一個(gè)信息的時(shí)候，或者加 粗或者做明顯的顏色都行，但是當(dāng)信息多的時(shí)候，那么你這些舉動(dòng)也許完全沒(méi)有幫助。所以如何呈現(xiàn)信息的層次性不僅需要?jiǎng)h減非關(guān)鍵信息，還需要視覺(jué)上做合理的 設(shè)計(jì)。

e)      降低輔助信息的顯示層級(jí)從而來(lái)突出關(guān)鍵性信息是一個(gè)好方法。

上圖中，雖然信息層級(jí)是從左到右按照用戶(hù)瀏覽方向依次減弱其重要級(jí)別，但是右側(cè)各種花哨的icon和信息內(nèi)容反而影響到用戶(hù)對(duì)于評(píng)價(jià)和成交信息的關(guān)注度。

f)      塊狀化列表項(xiàng)

使得列表塊狀化的方式可以通過(guò)：框線(xiàn)或者空間間隔等各種視覺(jué)方式來(lái)實(shí)現(xiàn)。

g)      最重要的信息層級(jí)請(qǐng)保留給用戶(hù)操作區(qū)

上圖所示，在購(gòu)買(mǎi)區(qū)域明顯的顏色區(qū)別，使得用戶(hù)一目了然。

3.        考慮不同產(chǎn)品和不同人群的差異性

不同的產(chǎn)品類(lèi)型或者不同的用戶(hù)也會(huì)有不同的關(guān)鍵性信息。所以我們?cè)跍p肥的時(shí)候需要對(duì)癥下藥，去了解產(chǎn)品的特點(diǎn)也需要去了解用戶(hù)的關(guān)注點(diǎn)。

我們還應(yīng)該要考慮到不同產(chǎn)品類(lèi)型。就以淘寶為例，不同行業(yè)的產(chǎn)品會(huì)有完全不同的信息展現(xiàn)。就好比dvd、圍巾和服裝產(chǎn)品對(duì)于圖片的關(guān)注度是由低到高，因此從下圖中可看出，它們的搜索結(jié)果，對(duì)于圖片的尺寸處理也是從小到大的。

度假產(chǎn)品的人群是非常多樣化的，有自由行、團(tuán)隊(duì)游、郵輪、當(dāng)?shù)赜蔚鹊?。每一?lèi)型的產(chǎn)品所展示的信息是各有特色的，因此攜程在對(duì)度假產(chǎn)品搜索結(jié)果頁(yè)進(jìn)行處理的時(shí)候，是根據(jù)不同的產(chǎn)品類(lèi)型，做成了不同的tab切換模式，來(lái)進(jìn)行合理的人群分流。

總結(jié)：當(dāng)我在設(shè)計(jì)搜索列表的時(shí)候，雖然盡量的給搜索列表減肥，可是它的頑固性完全不亞于真正的減肥。在不經(jīng)意間，不停有人提出的增加這個(gè)信息那個(gè)信 息的要求，慢慢地使搜索列表的減肥不僅不成功，反而反彈的更兇猛。這個(gè)或許就是無(wú)法協(xié)調(diào)的業(yè)務(wù)型需求和用戶(hù)型需求的永久矛盾。所以減肥不僅僅是交互設(shè)計(jì)師 需要考慮的項(xiàng)，而是更多部門(mén)協(xié)作更多部門(mén)理解的大話(huà)題。