人們在購物前都看些什么 -網頁設計 |
|
原文作者:Chui Chui Tan 人們在購物前都看些什么:教你如何利用吸引眼球的內容裝飾你的在線購物頁面 我們想做什么,為什么要這樣做 在這個研究中被考慮的因素包括:頁面的內容(商品的介紹說明,送貨方式),頁面的設計(排版,字體,顏色),特別欄目(推介,顧客評價)和版面布局(兩行三欄式排列,注:原文為two versus three columns ,請高手指教這里的versus是什么意思)。 我們研究的是哪些購物網頁? 我們是怎樣調查的? 這個博客的重點放在通過研究購物網頁得出的發現上。我們聽取了試驗者們關于網上購物的意見,觀察他們的動作,還有分析他們的眼部運動。 我們的發現: 指引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――讓顧客自己閱讀,避免過多的點擊 試驗者如果不知道鏈接的網頁是什么,就不樂意點擊這個鏈接或者按鈕。例如,在特易購網站上點擊一個鏈接,會打開一個新的窗口,出現可供選擇的商品。試驗者拒絕點擊這個鏈接,他們擔心點擊后會離開原來的購物頁面。 小結 如果你認為這項研究很有趣,歡迎與我們深入討論。撥打電話+44 (0) 117 946 3930,或者通過發送電子郵件到[email protected] 聯系我們。 原文:http://ucdchina.com/snap/4720 |
11 月
21
發佈留言