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

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

用戶決策的最根本目的就是用最短時間找到最佳的選擇，這個行為一般在搜索結(jié)果頁就特別突出，因為我們面對頁面上幾十甚至更多的搜索結(jié)果集，這個時候決策的重要性就凸顯了出來。

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

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

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

1.        那么減什么呢？

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

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

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

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

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

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

合理組織信息

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

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

我們可以來看一個案例：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

f)      塊狀化列表項

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

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

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

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

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

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

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

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