文：KIM FLAHERTY? ?Yuxin 翻譯

原文標題：The Anatomy o-f a List Entry开呐，剖析列表頁面條目設(shè)計⌒虮郏現(xiàn)在列表頁面在扁平化的潮流下幾乎無處不在；這篇文章稿壁，分析了多個案例的信息架構(gòu)和用戶眼動軌跡幽钢，詳細敘述了列表頁面的設(shè)計原則和用戶行為習慣；為了學習信息架構(gòu)和用戶體驗設(shè)計傅是，就有細細研讀并翻譯的想法匪燕。新人第一次翻譯蕾羊，多多指點。

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

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

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

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

不久之前，我在線預定周末旅行要住的酒店尼变。經(jīng)歷了在好幾個不同的網(wǎng)站上定位利凑、縮小我的選擇范圍∠邮酰花了幾天的時間哀澈，我才終于決定要住的地方,感覺的這過程真是累。

在網(wǎng)上預訂酒店,我們大部分所做的都一樣,查看度气、評估和縮小選項割按。大多數(shù)時候，用戶會查看特定類別或有一組標準來篩選,然后列表頁會顯示若干候選項或者說是列表條目蚯嫌。列表頁面上需要許多選項條目哲虾，方便用戶進行高效的查看和決策。

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

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

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

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

當用戶瀏覽一個產(chǎn)品的選項列表時,他們需要迅速確定哪些可以無視的，哪些產(chǎn)品是有興趣的硕淑。太多的信息量會淹沒用戶并形成一個凌亂的視覺效果课竣；另一方面,如果列表頁沒有足夠的細節(jié)，留下太多沒有答案的問題,迫使用戶反復跳轉(zhuǎn)頁面(就是需要跳轉(zhuǎn)到詳情頁去獲取他們需要的信息)置媳。換句話說于樟，反復跳轉(zhuǎn)就成為列表頁的信息不足的信號。

Circalighting.com:在這個壁燈的列表頁上只顯示了圖片和產(chǎn)品名稱拇囊，省去了如涂飾迂曲、燈泡類型、甚至價格這樣的重要的細節(jié)說明寥袭。所以用戶必須去到各個產(chǎn)品的詳情頁上才能得到這些信息路捧。雖然,購買壁時,圖像可能是對消費者最重要的元素,但是價格和其他重要差異性的信息不應(yīng)該在這個層級中舍去关霸。

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

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

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

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

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

Travelocity.com的航班列表頁包括的關(guān)鍵信息如：起飛時間、到達時間见剩、旅程時間杀糯、停站數(shù)量和停留的長度,以及航班號和運營商。這些信息足以幫助用戶選擇一個航班并且不會覺得信息過載苍苞，而需要其他細節(jié)時也還有路徑是可以調(diào)出來的固翰。

2．每個列表條目的視覺設(shè)計和信息架構(gòu)都應(yīng)該反映出該屬性的優(yōu)先級

獨立的列表條目的設(shè)計都應(yīng)該是能夠幫助用戶快速了解每個選項并且支持產(chǎn)品之間的對比、比較羹呵。

好像它是一個小的網(wǎng)頁的態(tài)度來對待每個列表條目,布局和視覺的處理能讓每個描述屬性都匹配其優(yōu)先級骂际。

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

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

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

a）強調(diào)屬性的秘訣：增加字體型號、重量或使用一個獨特的顏色种吸。

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

c） 用周圍的空白將重要屬性孤立出來,使它脫穎而出吸引注意力。

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

Booking.com上的一個列表條目，它缺乏一個明確的信息層次艺糜，并且沒有為用戶提供任何視覺路徑剧董。這個列表條目包含太多的獨特和競爭視覺處理,需要很多注意力來瀏覽和理解它。

Nextwarehouse.com上的一俄國列表條目破停，產(chǎn)品名稱翅楼、價格、庫存和其他細節(jié)都是相同的字體和視覺樣式真慢，完全沒有信息結(jié)構(gòu)毅臊。雖然品牌名稱和零件號是紅色和藍色表示,但是內(nèi)容的對比度太低,無法有效地吸引眼球,使得用戶很難解析重要屬性。

3. 列表條目使用一致的樣式來支持橫向?qū)Ρ?/h2>

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

一個用戶購買數(shù)碼相機的眼動追蹤圖朗鸠，顯示用戶的眼睛來回移動在兩個不同的相機蚯撩。這個視線模型表明,用戶是在比較產(chǎn)品的屬性。

Travelocity的航班列表條目是一致的童社。對于每一個航班的同一塊信息都在同一個地方求厕，并且使用相同的視覺處理。

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

用戶在Redmart.com上購買牙膏蹬竖，發(fā)現(xiàn)有用的銷售指標評論到：“一眼看過所有的牙膏沼沈，很容易分出哪些有哪些沒有折扣，所以我購買了其中的一個有折扣的币厕×辛恚”

Booking.com的列表條目不同酒店不一致——酒店的細節(jié)從一個項目變化到下一個位置旦装。這個示例還展示了使用過多的標識容易失控。在上面的3個酒店描述中,有11個具有不同的信息的標識,使頁面凌亂，比較酒店變得困難

結(jié)論

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