如何給你的搜索列表設計健康減肥

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

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

現在很多網站的搜索結果集非常的冗長，信息量很大，無法讓用戶一目了然，做出決策。

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

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

1.        那么減什么呢？

凸顯關鍵信息，減少不必要的干擾

提取關鍵性信息

比如說機票列表項信息有很多，時間、機場、航空公司、艙位、航班、機型、價格、折扣、備注、燃油機建費、飛行時長、退改簽、禮盒、日歷展示的價格。對于這么多信息，我們如何去了解用戶真正的關注點呢？

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

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

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

合理組織信息

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

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

我們可以來看一個案例：

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

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

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

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

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

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

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

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

b)      做成縱向列表并且結構化會更容易比較

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

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

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

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

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

信息呈現有層次

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

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

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

f)      塊狀化列表項

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

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

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

3.        考慮不同產品和不同人群的差異性

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

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

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

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