網頁制作POLUOLUO文章簡介：人們在購物前都看些什麼：教你如何利用吸引眼球的內容裝飾你的在線購物頁面

人們在購物前都看些什麼：教你如何利用吸引眼球的內容裝飾你的在線購物頁面

根據英國互動媒體零售集團和凱捷咨詢公司的估計，在2008年的第四季度，英國的顧客在網上購物上花了131.6億歐元。這比2007年的同期增長了15％。

另一方面，2007年9月市場調研和咨詢顧問公司丘比特研究公司（Jupiter Research）的數據顯示，在接受調查的1179名網購者中，42％在沒有購買商品的情況下就退出了網站，因為他們對於商品的疑問得不到解答。

我們想做什麼，為什麼要這樣做

我在cxpartners 網站上做了一系列關於什麼內容能吸引顧客的研究，想看一下顧客在浏覽購物網頁時都喜歡看些什麼，他們在選擇商品時都考慮哪些因素。同時我也想找出對於顧客來說最好的購物網頁設計：(1) 能使他們對將要購買的商品更感興趣；(2) 能幫助他們更容易地找到自己所需要的商品。

在這個研究中被考慮的因素包括：頁面的內容（商品的介紹說明，送貨方式），頁面的設計（排版，字體，顏色），特別欄目（推介，顧客評價）和版面布局（兩行三欄式排列，注：原文為two versus three columns ，請高手指教這裡的versus是什麼意思）。

我們研究的是哪些購物網頁？

我們選了2008年英國網上零售商排行前10位的其中6家網站作為研究對象：亞馬遜（Amazon），阿爾格斯（Argos ），特易購（Tesco Direct ），Play.com （譯者找不到這個網站的官方中文譯名），瑪莎百貨（Marks & Spencer ）和約翰路易斯（John Lewis ）。所有參與調查的人都對這些網站十分熟悉，並且在其中至少3個網站上購買過商品。

我們是怎樣調查的？

我們給每位試驗者隨機選取了3個網站（主頁），並且保證在所有試驗者中這些網站分布平均（請教這裡The order of the sites was counterbalanced over the group of participants. The order of the sites 是什麼意思）。他們要在提供的網站上搜索他們決定購買，或者有意購買的商品。

這個博客的重點放在通過研究購物網頁得出的發現上。我們聽取了試驗者們關於網上購物的意見，觀察他們的動作，還有分析他們的眼部運動。

我們的發現：

指引1――“購買指引”（Call to action）一定要清晰

購物網頁的“購買指引”就是加上一個連接到購物籃的鏈接。因此，它必須在視覺上引人注目，而且最好看起來像一個按鈕。試驗者表示，在特易購網站上，他們不清楚點擊哪裡才能購買商品，因為網站上的“添加到購物籃”並不是顯眼的按鈕。對於約翰路易斯網站上的灰色按鈕，試驗者們也有類似的評價。按鈕的灰色與網站其它內容的顏色是一樣的。

另一方面，試驗者認為在瑪莎百貨的網站上很容易就能把商品添加進購物籃，按鈕鮮艷的顏色令其更加吸引顧客的眼球（如下圖所示）

指引2――善於利用項目符號提供有用的產品介紹

試驗者們想要的是能夠提供產品的有關信息，幫助他們作出決定的介紹。另外，他們希望看到“好”的詞句來刺激他們購買，而不是像特易購網站上的那些枯燥冰冷的文字。

試驗者們同時更偏愛利用項目符號排列的產品介紹，像阿爾格斯的網站一樣，方便他們快速浏覽。把產品介紹分段不僅會使頁面凌亂，還會令顧客在尋找他們感興趣的細節時非常費力。他們在評價特易購的網站時這樣說：“閱讀起來吃力又無聊。”

他們喜歡所有細節都在一個頁面上顯示（比如，像約翰路易斯和亞馬遜那樣），而不喜歡過多的鏈接（像阿爾格斯和特易購那樣），需要點擊才能看到所需的信息。

指引3――使用質量上乘的產品圖片

通常來說，產品圖片是試驗者進入頁面後首先看到的，不論它們處於頁面的什麼位置（參考下面的引人注意的圖片）。多數網站都會把產品圖片放在頁面的左上角。阿爾格斯是例外，他把圖片放在了右上角。

不同於在商店裡購物，產品圖片是顧客在決定某商品是否迎合他們的需求，是否適合他們的口味時考慮的唯一因素。這是展示你產品的強有力的方法。因此，提供簡單生動且高質的產品圖片十分重要，能起到吸引公眾注意，提高產品知名度的作用。（這裡譯者猜的成分較多，原文是easy graphic manipulation functions for zooming, panning and rotations. 煩請高手指教）。

有許多文章都介紹了頂級的零售商是如何展示他們的產品圖片的，比如Get Elastic上的文章。

另外，從多個角度展示產品同樣行之有效，特別是最能體現產品重要性的那個角度。你必須清楚地了解顧客考慮的首要因素是什麼，他們最希望了解產品哪一方面的信息――比如，對於登山訓練者來說，他們只關心鞋子的抓地力是否好。同樣，如果可能的話，盡量展示出產品的尺寸和相關用途（比如，一張裝滿啤酒罐的手袋的照片能幫助顧客估計該手袋的大小）。

指引4――使用簡約的版面設計

試驗者中的大部分人偏向在頁面的左邊浏覽產品圖片，在右邊浏覽產品介紹（像瑪莎百貨那樣）。當產品的詳細介紹都位於折行（原文：When product details are above the fold. fold在這裡什麼意思？）上方時，用戶很可能會直接向下滾動頁面。

約翰路易斯的版面十分美觀，上面只有必需的信息。試驗者們幾乎浏覽了頁面上的全部信息，並沒有受到他們所心儀的產品類型的限制；衣服，家居用品或者是數碼產品。

“我喜歡這樣。簡單，時尚，不顯混亂。”

然而，所有的試驗者都忽略了約翰路易斯網頁底部的“你曾經浏覽的商品”這一部分。他們向下滾動頁面，在看完產品內容後又重新向上滾動（參考下面的圖片）。造成這種現象的原因是這部分與頁面的其它內容完全隔絕開來，因此看起來就像是頁面的盡頭了。總的來說，垂直的版面會刺激顧客往下滾動頁面。

指引5――不要冗長的頁面

顧客從不，或者說很少，會把頁面上的全部信息閱讀完，特別是在頁面上有許多內容的情況下。即使版面設計非常棒，冗長的頁面也不會取得好的效果。顧客通常會忽略底部零碎的部分，或者只是草草浏覽一遍，根本不會留意每個欄目。還有，就算他們向下滾動了頁面，他們都不會認真地閱讀，或者留意頁面底部的所有內容。

“即使我滾動到最底部，我也不會看它們一眼。”[亞馬遜]

Play.com 和亞馬遜的頁面都非常長（亞馬遜網頁的長度是特易購的8倍！）試驗者們在形容這個頁面時使用了“太困難了”這樣的字眼。從下面引用的語句可看出，試驗者們僅僅看了網頁的2/3內容，而完全忽略了另外1/3的內容。

“我直接把網頁關掉了。（這裡block them out是這個意思嗎？）不知道從哪裡開始，在哪裡結束。需要集中精力去閱讀。”[Play.com]

“我傾向於只看網頁的頂部，因為我知道他們會隨便把一些信息放在折行後，特別是在長網頁中。所以我忽略了它們。” [Amazon]

指引6――只提供與產品相關的必需信息

不要令顧客感到無所適從。你只需提供待售商品的重要信息。

把所有東西都拋給顧客，讓他們自己選擇他們需要的相關產品的信息，這種做法並不可取。最好的做法是，了解清楚你的產品（比如說，它的獨特性），知道顧客可能會問哪些問題。

當一個產品網頁上有太多的信息時，顧客就會很容易忽略掉一些對於他們來說非常重要的東西。在亞馬遜的網站上，試驗者沒有去浏覽顧客評價部分以下的內容。因此，他們沒有看到顧客討論，推薦商品和“類似商品”這些內容。

指引7――優先展示重要的內容（避免網絡上的“捉迷藏”）

與在現實世界中購物不同，在網上，沒有銷售人員會告訴顧客他們想知道的關於產品的一切。顧客必須在充滿各種各樣信息的網頁上找到答案。如果他們找不到，或者是在尋找的過程中失去耐性，他們就會閃電般地離開那個頁面，再也不會看第二遍了。

比如說，與DVD相關的技術性細節，如年份，屏幕，語言，字幕和地區，都是顧客關心的信息。然而在Play.com 的網站上，試驗者評價道，他們必須不斷向下滾動頁面，才能看到這些在“顧客評價”和“相關產品”之後的信息（例如，DVD，精巧設計，適合家庭娛樂 注：原文DVD, gadgets and games 是這個意思嗎？）不要跟你的顧客玩“捉迷藏”的游戲！

指引8――如果產品相關信息都在一個縱欄裡，就不要把重要的信息放在左右兩邊的縱欄裡

當顧客浏覽購物網頁時，他們的主要任務就是了解一件商品，並且購買它。他們不喜歡因為一些無關重要的信息而分心。因此，所有試驗者都完全忽略掉Play.com 網頁上左右縱欄的信息，特別是在全部的產品介紹都集中在一個縱欄的情況下。但是，如果購物頁面設計成3縱欄式的（其中2個縱欄都是產品的相關信息），試驗者會更加關注左邊豎欄的信息（雖然這種傾向並不嚴重）。瑪莎百貨和約翰路易斯的頁面就是這樣設計的（參考下面的圖片）。

所以，如果你把商品的主要信息都放在一個垂直的豎欄裡，就要避免把重要的信息放在兩邊的欄目裡（比如說，交互銷售[cross-selling]的信息）。

指引9――提供足夠的空間，避免過多的顏色

瑪莎百貨的網站把過多的信息都塞到頁面右邊的產品圖片的旁邊――商品名稱，價格，商品代碼，等級，評論，產品介紹和購買方式。而且，所有字體都是同樣大小，文字之間也沒有什麼空白的位置。這樣的布局顯得擁擠不堪，試驗者也會選擇跳過這些部分，除非他們在其它頁面找不到自己想要的信息。

網頁上的顏色也會令試驗者分心。特易購網站上有超過5種的不同顏色的字體――價格和積分卡（原文card point是什麼意思？）是紅色的，產品內容是黑色的，“添加到購物籃”按鈕是綠色的，標簽（tab label）是藍色的，其它鏈接則是灰色的（參考下面的圖片）。這樣的設計會令試驗者感到困惑，也引起視覺上的混亂。

指引10――讓顧客自己閱讀，避免過多的點擊

試驗者如果不知道鏈接的網頁是什麼，就不樂意點擊這個鏈接或者按鈕。例如，在特易購網站上點擊一個鏈接，會打開一個新的窗口，出現可供選擇的商品。試驗者拒絕點擊這個鏈接，他們擔心點擊後會離開原來的購物頁面。

小結

盡可能快地向顧客提供他們所需的信息（例如，產品圖片，簡要的介紹，價格和送貨方式）。為他們提供簡潔而清晰（不是五顏六色或者冗長）的頁面，避免令顧客混亂。展示質量良好的產品圖片（如果你能同時展示商品的用途就最好不過了），圖片能透露出產品的許多信息。為你的顧客提供愉快的購物旅程，使他們買得高興，這樣他們就會再次回頭光顧。