選擇Etsy做為我網站視覺分析是因為我本身就很喜歡手作品,而我認識的所有外國設計師朋友都有在Etsy上開店。台灣的Pinkoi也仿照Etsy的商業模式甚至設計視覺上也都參考Etsy的架構,要如何從設計上觸動消費者購買、停留,並保有設計上的美感是我想要研究的。

Etsy 是2005年創立的以「手作品交易」起家的C2C電子商務平台。到2013年,Etsy的流量已經是全美前50大,擁有超過3000萬的會員、100萬手作創作者,平台年交易額突破了10億美金。

Screen-Shot-2013-09-12-at-8.14.44-AM-550x377.png

 

  • 大量無色彩的配置圖顯重點色 

進到Etsy的首頁可以發現Etsy大量的採用無色彩的分隔區塊方式,只在LOGO、連結字、價格、評價上選用明亮的顏色。而在顏色的選擇上選擇明度、彩度都偏高的對比色系,讓彼此協調卻又能有區隔。比較特別的是價格顏色選擇上,沒有用一般通俗的紅色(也許是為了跟LOGO的橘色區隔)而使用了草綠色,縱使比例不大卻很明顯,是很成功的選擇。

 

  • 色彩層級統一,表示同一件事  

Etsy的重點色使用了草綠色來代表「價格、購買」等行動,在整個網站都落實了這件事情。從首頁、商品頁、購物車,只要與「價格、購買」等意義連結強的icon、字型顏色、call for action的設計上都統一使用草綠色,讓使用者只要看到草綠色,就可以連想到「這是要購買的」。

 Etsy色彩分析-綠4-01  

  • 去除側邊欄,讓使用者更能專注在內容

為了提供消費者更好的使用經驗,Etsy其實也經過幾次的改版,最近的一次改版大膽的將「側邊欄去除」,而這相信也是2014年網站設計的重點。本來我一直覺得,「側邊欄去除」只是為了更好的行動裝置使用經驗,但實際瀏覽過發現,沒有側邊欄的設計讓使用者更能專注在內容上。

 
Screen-Shot-2013-09-12-at-8.14.44-AM-550x377.png
↑舊版的Etsy首頁,層級已經非常清楚。

 

Etsy網站分析-首頁1.jpg 

↑改版後的Etsy首頁,去除側邊欄後讓視覺更能專注在內容上。

Etsy網站分析03  
首頁將LOGO、搜尋、會員登入收納在最上方,以灰階為底、大量留白留呼吸空間。下方導覽列也將原本多達14項的分類精簡為8項(將其他分類收納至最後一項MORE,rollover後才會出現)以藍色粗體、大量留白,讓人很清楚知道哪裡可以點、我需要的東西哪裡找?

 

Etsy網站分析01.jpg  

但去除側邊欄後分類要放哪邊?Etsy巧妙的將分類收納到上方,分類內的產品以等寬不等長的方式呈現。

  • 首頁SUPER BANNER不超過350px

另一個我覺得Etsy首頁很聰明的一點是,上方的banner不會做的過長,事實上Etsy首頁的SUPER BANNER只有320px(call for action的button文案很吸引人、色系也跟NAVI的藍色統一),讓人進到網站就可以看到下面的商品(至少2/3),不自覺的想滾動捲軸看看下面還有甚麼好東西?

Etsy網站分析-首頁1.jpg  

↑首頁進來就可以看見三個推薦商品,令人想往下滑滑看還有什麼好東西?

 

  • 主副標與重點色

Etsy網站分析-首頁2.jpg  

主副標的部分,主標使用#333黑,副標使用#888灰,配以重點色(藍、綠、黃)但佔比很小,視覺上清楚不突兀。在這裡我也在想,一般來說「價格」大部分會使用紅色等強調的色系(或是字體較粗、較為明顯?),但Etsy只很低調用的草綠色來呈現。我想這也許跟Etsy的品牌精神有關,畢竟「手作品」不是「低價促銷」,產品本身的品質才是Etsy想強調的重點吧?

  • 理念圖形化

許多電商網站都會需要告訴消費者網站的理念、堅持以博取信任及好感度,Etsy使用了扁平化的圖形,集合了趣味及實用性,也證明了「一圖勝千言」的經典道理。

Etsy網站分析-首頁3.jpg  

 在處理資料量大的網站架構時候,除了網站的架構、資料的分類很重要外,在視覺上的好感度也相當重要。Etsy乍看之下沒有太多花俏的設計技巧,但仔細研究下卻可以發現許多設計的細節,譬如留白、對齊、顏色處理(整個網站只有灰階配藍、綠、黃重點色)、層級的分類運用都很仔細。同時我也發現目前Etsy的搜尋頁還是舊版,說明了網站的更新維護是沒有盡頭的(天阿~),許多以前認為理所當然的配置(側邊欄、首頁super banner大小、價格標示等)原來都是可以打破的。但要如何打破?能否提供給使用者更好的使用經驗?就是一條富有挑戰性的漫漫長路了。

Etsy網站分析02.jpg  

↑Etsy目前的搜尋頁面仍保留了原先的設計。

創作者介紹
創作者 ariselin0224 的頭像
ariselin0224

Ariselin Design

ariselin0224 發表在 痞客邦 留言(0) 人氣()