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

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

用戶決策的最根本目的就是用最短時間找到最佳的選擇，這個行為一般在搜索結(jié)果頁就特別突出，因?yàn)槲覀兠鎸撁嫔蠋资踔粮嗟乃阉鹘Y(jié)果集，這個時候決策的重要性就凸顯了出來。

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

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

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

1.        那么減什么呢？

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

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

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

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

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

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

合理組織信息

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

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

我們可以來看一個案例：

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

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

B做的相對較好，他將到貨通知放置在購買的位置上，使得用戶在想要購買該商品時就能一下子看到無貨的通知；

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

g)      最重要的信息層級請保留給用戶操作區(qū)

上圖所示，在購買區(qū)域明顯的顏色區(qū)別，使得用戶一目了然。

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

不同的產(chǎn)品類型或者不同的用戶也會有不同的關(guān)鍵性信息。所以我們在減肥的時候需要對癥下藥，去了解產(chǎn)品的特點(diǎn)也需要去了解用戶的關(guān)注點(diǎn)。

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

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

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