文：KIM FLAHERTY? ?Yuxin 翻譯

原文標(biāo)題：The Anatomy o-f a List Entry，剖析列表頁(yè)面條目設(shè)計(jì)?，F(xiàn)在列表頁(yè)面在扁平化的潮流下幾乎無(wú)處不在；這篇文章，分析了多個(gè)案例的信息架構(gòu)和用戶眼動(dòng)軌跡，詳細(xì)敘述了列表頁(yè)面的設(shè)計(jì)原則和用戶行為習(xí)慣；為了學(xué)習(xí)信息架構(gòu)和用戶體驗(yàn)設(shè)計(jì)，就有細(xì)細(xì)研讀并翻譯的想法。新人第一次翻譯，多多指點(diǎn)。

原文鏈接：https://www.nngroup.com/articles/list-entries/

--------------------------------------------------------------------------------------------------------------------------------

關(guān)鍵詞：電子商務(wù) 眼動(dòng)追蹤 信息架構(gòu) 視覺(jué)設(shè)計(jì) 網(wǎng)頁(yè)可用性

摘要：為了用戶更好的瀏覽和對(duì)比產(chǎn)品條目，列表頁(yè)需要被精心設(shè)計(jì)布局和視覺(jué)以保持內(nèi)容優(yōu)先級(jí)。

不久之前，我在線預(yù)定周末旅行要住的酒店。經(jīng)歷了在好幾個(gè)不同的網(wǎng)站上定位、縮小我的選擇范圍。花了幾天的時(shí)間，我才終于決定要住的地方,感覺(jué)的這過(guò)程真是累。

在網(wǎng)上預(yù)訂酒店,我們大部分所做的都一樣,查看、評(píng)估和縮小選項(xiàng)。大多數(shù)時(shí)候，用戶會(huì)查看特定類別或有一組標(biāo)準(zhǔn)來(lái)篩選,然后列表頁(yè)會(huì)顯示若干候選項(xiàng)或者說(shuō)是列表?xiàng)l目。列表頁(yè)面上需要許多選項(xiàng)條目，方便用戶進(jìn)行高效的查看和決策。

備注:列表頁(yè)有時(shí)被稱作“分類頁(yè)”(包含產(chǎn)品的類別)、“目錄頁(yè)“(列出位置或人時(shí))、“圖庫(kù)頁(yè)“(包含圖形或圖像)。搜索引擎的結(jié)果頁(yè)面（簡(jiǎn)稱SERP）是另一種形態(tài)的列表頁(yè)。本文中,我們把這所有概念的頁(yè)面統(tǒng)稱為列表頁(yè)。

列表頁(yè)：與用戶需求可能匹配的各個(gè)候選項(xiàng)條目的顯示樞紐。每個(gè)列表?xiàng)l目通常包含著更深層條目的描述和頁(yè)面鏈接(詳情頁(yè))。備注：深導(dǎo)航結(jié)構(gòu)的網(wǎng)站會(huì)在首頁(yè)和列表頁(yè)之間還存在其他層級(jí)。

列表頁(yè)的可用性取決于每個(gè)條目的設(shè)計(jì)。每個(gè)條目不僅要滿足它自己的功能、能輕松地被理解,它還需要和頁(yè)面上其它條目一起配合；列表頁(yè)及其條目應(yīng)符合以下幾個(gè)可用性要求：

1.為列表的條目創(chuàng)建屬性優(yōu)先級(jí)的信息架構(gòu)

當(dāng)用戶瀏覽一個(gè)產(chǎn)品的選項(xiàng)列表時(shí),他們需要迅速確定哪些可以無(wú)視的，哪些產(chǎn)品是有興趣的。太多的信息量會(huì)淹沒(méi)用戶并形成一個(gè)凌亂的視覺(jué)效果；另一方面,如果列表頁(yè)沒(méi)有足夠的細(xì)節(jié)，留下太多沒(méi)有答案的問(wèn)題,迫使用戶反復(fù)跳轉(zhuǎn)頁(yè)面(就是需要跳轉(zhuǎn)到詳情頁(yè)去獲取他們需要的信息)。換句話說(shuō)，反復(fù)跳轉(zhuǎn)就成為列表頁(yè)的信息不足的信號(hào)。

Circalighting.com:在這個(gè)壁燈的列表頁(yè)上只顯示了圖片和產(chǎn)品名稱，省去了如涂飾、燈泡類型、甚至價(jià)格這樣的重要的細(xì)節(jié)說(shuō)明。所以用戶必須去到各個(gè)產(chǎn)品的詳情頁(yè)上才能得到這些信息。雖然,購(gòu)買(mǎi)壁時(shí),圖像可能是對(duì)消費(fèi)者最重要的元素,但是價(jià)格和其他重要差異性的信息不應(yīng)該在這個(gè)層級(jí)中舍去。

就像金發(fā)女孩的故事,產(chǎn)品詳情列表的數(shù)量也需要恰如其分:太多則過(guò)載，阻礙用戶在一個(gè)頁(yè)面上得到足夠的選擇；太少會(huì)讓他們反復(fù)跳轉(zhuǎn)頁(yè)面。滿足大多數(shù)用戶對(duì)列表?xiàng)l目的信息需求并保證其識(shí)別性，用戶研究和分析的結(jié)果可以指導(dǎo)：哪些屬性可以為用戶傳遞最多的信息。

分析——如果你目前的列表頁(yè)有排序或篩選功能,就可以找出哪些篩選項(xiàng)和排序標(biāo)準(zhǔn)使用最頻繁；哪些用于第一輪調(diào)整,哪些用于第二輪。

用戶研究——進(jìn)行日記分析和可用性研究，可以明白哪些元素是起決策性的、它的具體重要性程度、以及通常是哪些產(chǎn)品屬性用于縮小選項(xiàng)。

用戶數(shù)據(jù)和分析將幫助你確定哪些屬性應(yīng)該包含在你的列表?xiàng)l目,哪些需要高亮,哪些可以淡化。每個(gè)屬性的順序優(yōu)先級(jí)是在開(kāi)始思考列表?xiàng)l目的布局和視覺(jué)設(shè)計(jì)之前需要確定的。這些優(yōu)先級(jí)的設(shè)置是列表頁(yè)面信息結(jié)構(gòu)的基礎(chǔ)。

我們之前的整整22年的可用性測(cè)試經(jīng)驗(yàn)告訴我們,有一塊信息是每個(gè)用戶的需求:價(jià)格。

Travelocity.com的航班列表頁(yè)包括的關(guān)鍵信息如：起飛時(shí)間、到達(dá)時(shí)間、旅程時(shí)間、停站數(shù)量和停留的長(zhǎng)度,以及航班號(hào)和運(yùn)營(yíng)商。這些信息足以幫助用戶選擇一個(gè)航班并且不會(huì)覺(jué)得信息過(guò)載，而需要其他細(xì)節(jié)時(shí)也還有路徑是可以調(diào)出來(lái)的。

2．每個(gè)列表?xiàng)l目的視覺(jué)設(shè)計(jì)和信息架構(gòu)都應(yīng)該反映出該屬性的優(yōu)先級(jí)

獨(dú)立的列表?xiàng)l目的設(shè)計(jì)都應(yīng)該是能夠幫助用戶快速了解每個(gè)選項(xiàng)并且支持產(chǎn)品之間的對(duì)比、比較。

好像它是一個(gè)小的網(wǎng)頁(yè)的態(tài)度來(lái)對(duì)待每個(gè)列表?xiàng)l目,布局和視覺(jué)的處理能讓每個(gè)描述屬性都匹配其優(yōu)先級(jí)。

位置和布局——根據(jù)經(jīng)驗(yàn),最頂層和最左邊的區(qū)域的列表?xiàng)l目獲得最多的關(guān)注。高優(yōu)先級(jí)的信息應(yīng)放置在這些位置(在從左到右的閱讀文化地區(qū))。基于這一理論，來(lái)創(chuàng)建每列表?xiàng)l目的信息架構(gòu)，組織每個(gè)屬性的優(yōu)先級(jí)。

眼動(dòng)儀注視一個(gè)搜索引擎的結(jié)果頁(yè)面的圖片，顯示出用戶最先瀏覽列表頁(yè)條目的最頂層和左邊的區(qū)域。

視覺(jué)優(yōu)先——吸引眼球的最重要的信息通過(guò)視覺(jué)設(shè)計(jì):

a）強(qiáng)調(diào)屬性的秘訣：增加字體型號(hào)、重量或使用一個(gè)獨(dú)特的顏色。

b）考慮用圖像來(lái)支持瀏覽和吸引關(guān)注力。

c） 用周?chē)目瞻讓⒅匾獙傩怨铝⒊鰜?lái),使它脫穎而出吸引注意力。

在美國(guó)醫(yī)療保健網(wǎng)站的醫(yī)療提供者目錄列表?xiàng)l目頁(yè)面，強(qiáng)調(diào)提供者名稱在大型藍(lán)色字體。提供者的專業(yè)還強(qiáng)調(diào)在一個(gè)較小的字體直接放在名字下面。其他重要的信息或被孤立、或者搭配圖標(biāo)在前面來(lái)吸引注意力。讓關(guān)鍵信息被掃一眼就可以輕松看到。

Booking.com上的一個(gè)列表?xiàng)l目，它缺乏一個(gè)明確的信息層次，并且沒(méi)有為用戶提供任何視覺(jué)路徑。這個(gè)列表?xiàng)l目包含太多的獨(dú)特和競(jìng)爭(zhēng)視覺(jué)處理,需要很多注意力來(lái)瀏覽和理解它。

Nextwarehouse.com上的一俄國(guó)列表?xiàng)l目，產(chǎn)品名稱、價(jià)格、庫(kù)存和其他細(xì)節(jié)都是相同的字體和視覺(jué)樣式，完全沒(méi)有信息結(jié)構(gòu)。雖然品牌名稱和零件號(hào)是紅色和藍(lán)色表示,但是內(nèi)容的對(duì)比度太低,無(wú)法有效地吸引眼球,使得用戶很難解析重要屬性。

3. 列表?xiàng)l目使用一致的樣式來(lái)支持橫向?qū)Ρ?/h2>

在眼動(dòng)研究中,我們發(fā)現(xiàn),當(dāng)用戶必須在列表頁(yè)上的幾個(gè)選項(xiàng)做出選擇時(shí),他們會(huì)反復(fù)從一個(gè)條目到另一個(gè)條目來(lái)回比較類似的信息。為了幫助這個(gè)過(guò)程,列表?xiàng)l目相同位置和屬性的視覺(jué)處理應(yīng)該相同，以保證信息是可預(yù)見(jiàn)的和一致。

一個(gè)用戶購(gòu)買(mǎi)數(shù)碼相機(jī)的眼動(dòng)追蹤圖，顯示用戶的眼睛來(lái)回移動(dòng)在兩個(gè)不同的相機(jī)。這個(gè)視線模型表明,用戶是在比較產(chǎn)品的屬性。

Travelocity的航班列表?xiàng)l目是一致的。對(duì)于每一個(gè)航班的同一塊信息都在同一個(gè)地方，并且使用相同的視覺(jué)處理。

雖然每個(gè)列表?xiàng)l目分布局和屬性位置應(yīng)該基本相同,當(dāng)有重要信息需要區(qū)分的情況下，可能需要一些特別處理。例如,如果一個(gè)產(chǎn)品是“特賣(mài)中”或“售罄”,這樣的是可以接受用獨(dú)特的標(biāo)注或指標(biāo)來(lái)吸引注意力的。然而,以這種方式調(diào)用信息是需要有選擇性的，獨(dú)特的標(biāo)示超過(guò)2 – 3種時(shí)，列表頁(yè)的瀏覽將變得混亂和困難。

用戶在Redmart.com上購(gòu)買(mǎi)牙膏，發(fā)現(xiàn)有用的銷售指標(biāo)評(píng)論到：“一眼看過(guò)所有的牙膏，很容易分出哪些有哪些沒(méi)有折扣，所以我購(gòu)買(mǎi)了其中的一個(gè)有折扣的?！?/div>

Booking.com的列表?xiàng)l目不同酒店不一致——酒店的細(xì)節(jié)從一個(gè)項(xiàng)目變化到下一個(gè)位置。這個(gè)示例還展示了使用過(guò)多的標(biāo)識(shí)容易失控。在上面的3個(gè)酒店描述中,有11個(gè)具有不同的信息的標(biāo)識(shí),使頁(yè)面凌亂，比較酒店變得困難

結(jié)論

確定你的用戶最需要什么用信息縮小來(lái)他們的選擇范圍。每個(gè)列表?xiàng)l目都優(yōu)先考慮這些信息并創(chuàng)建一個(gè)一致都信息架構(gòu)，使它更容易被用戶理解，并且高效的縮小選擇范圍。