小雕雕的家

這篇是上課的心得，聽說上完課要回公司做部門內分享，所以怕記憶力衰退把它寫下來

本篇內容都是上課中提到的，但是偶爾會加上我的一些想法在裡面

第一堂的上課內容包含這些 (總共五堂)

1. 電子商務網站發展趨勢

2. 線上購物行為模式

3. 首頁與類別頁的規劃與設計

電子商務網站發展趨勢

許多大型電子商務網站紛紛走向全球化，例如：建立多地區與多語系的網站與服務

老師舉了個例子：H&M

http://www.hm.com/entrance.ahtml

還有 ikea：http://www.ikea.com/

透過網站服務在地化，等於直接將店面開在你家了

就算資金不是那麼雄厚，沒辦法做到像 H&M 這樣，也至少會有將商品配送到其他國家的服務

例如說這個：http://www.potterybarn.com/

可以配送商品服務至90個國家 (有台灣國旗推)

其實不只是有規模的企業會這樣做，連我們公司都有配送到國外的服務，只是沒有上面做得那麼炫而已

以上講的是配送服務全球化

另一點提到的是電子商務網站紛紛走向社群，利用社群媒體的力量來讓自己的商品能有更多曝光機會

不論是經營粉絲團，或是透過將商品分享到社群媒體的方式來進行曝光或行銷

以上是電子商務網站端的一些目前現況，再來看一下客戶端發生了些什麼事，才是我們比較需要關注的

首先客戶端因為智慧型裝置的興起，大家幾乎都人手一支智慧型手機，除了手機可能還有平板

因此在消費行為可能會在各種裝置上進行，然後老師舉了下圖這個數據來說明跨裝置購物的比例

Criteo 是一家廣告公司，以下是他們所提出的 (美國) 行動電子商務報告

所謂的跨裝置購買行為，指的是你在購買一個商品的行為當中使用了不只一種裝置

例如你可能用手機瀏覽商品，最後用桌上型電腦結帳，或是電腦打開來瀏覽商品，最後在平板上完成訂單

而上圖的意思是，在 37%的跨裝置行為中，有31%最後在手機上完成交易，有69%在桌上型電腦上完成

37%的跨裝置行為大概佔四成，因此了解客戶的跨裝置行為與習慣，也是設計電商網站要考慮的因素之一

再來下圖是客戶在購買前的多裝置行為，最有可能產生購買行為的使用裝置分別是：

智慧型手機 35%、平板 43%、桌上型電腦 37%

有關跨裝置的相關課外資訊也可以看這邊：

Criteo 第三季行動商務報告：跨裝置應用有助銷售額增長

因為跨裝置購買行為的增加，因此我們在設計網站的時候必須要注重使用者經驗的一致性

不能讓使用者到另一個裝置去購買的時候，感覺就像到了另一個網站要重新學習操作

針對這點 RWD 就非常適合，底下簡報圖擺明了就 RWD

其他例子像是：

https://m.johnlewis.com/

https://www.neimanmarcus.com/

其實都是 RWD

接下來看看行動購物目前的狀況，2015 比起 2014 又成長了不少，甚至已經超過整體電商交易的 1/3

下圖是目前行動網站跟手機APP的交易比例，沒想到在APP上的交易量已經超過行動網站

是否在暗示著我要轉行去寫 APP = =

上面分析圖表的地區是在美國或全球，下面來看看台灣目前的狀況，底下的資料來自台灣 yahoo

在台灣使用行動購物的人數已經是去年的3倍了，反而可以看到在個人電腦上從 90% 下降到 68%

智慧型手機從 7% 上昇到 26% 有點誇張，可以證明台灣人走路滑手機果然不是蓋的

剛剛最前面提到全球行動網站與APP的交易比例是 46%：54% (mobile web：app)

而在台灣目前的交易比例為 70%：30%  (mobile web：app)，還好我還沒有那麼急迫需要轉行寫 APP

課程接下來提了幾個目前電子商務網站正在加強，或者可以說是越來越極致化的服務

第一個是越來越快速的宅配到貨服務，第二個是全通路的虛實整合

第一個相信大家在台灣也很有感，很多人到網站購物，第一個看得很可能就是多快可以收到購買的商品

amazon 也推出了一個網站，可以兩小時送達，如果要一小時送達也可以，再加點錢就好了

網址：https://primenow.amazon.com

第二個虛實整合，大概就是像下面影片這樣，有興趣自己點進去看

https://www.youtube.com/watch?v=6G3JIyG_GeY

https://www.youtube.com/watch?v=0BmwYE47vVE

以上是目前電子商務網站正在或已經進行的改變，接下來要來看看線上購物的行為模式

線上購物的行為模式

首先電子商務網站必須要滿足不同類型的線上消費者，因此我們要先了解客戶來網站消費的動機有哪些

線上消費者主要分為以下五種類型：

1. 已知購買商品者 Product Focused

2. 充分比較研究者 Researchers 

3. 悠閒瀏覽者 Browsers

4. 比價撿便宜者 Bargin Hunters 

5. 只買一次者 One-Time Shoppers 

這些類型可能會混搭，例如比價撿便宜或許只會買一次

或者充分比較研究者也會撿便宜，但消費行為模式就分為這幾種

1. 已知購買商品者 Product Focused

這類型客戶已經做足了功課，很清楚知道想要買什麼商品了，所以確認後就會立即購買

因為已經知道自己要買什麼了，所以網站必須提供有效率的搜尋系統給這類客戶使用

找到商品後讓使用者確認商品，因此要提供明確的商品名稱與圖片等說明資料

要讓客戶確認商品後能夠快速的完成購買，所以需要有快速流暢的結帳流程

所以這類客戶綜合以上所說，網站要盡可能提供：

a. 有效率的搜尋系統

b. 明確的商品名稱與圖片

c. 快速流暢的結帳流程

2. 充分比較研究者 Researchers 

這類的客戶屬於有計畫要購買，正在收集相關的資訊

因此網站必須提供篩選器 ex: 依金額範圍、品牌、規格....等，在類別頁的設計上可加入商品比較的功能

並在商品頁有詳細的圖文說明，並加上最近瀏覽過的商品歷程

在購物車中提供儲存與編輯商品的功能 (下次再買清單)

所以這類客戶綜合以上所說，網站要盡可能提供：

a. 商品篩選器

b. 商品比較功能

c. 詳細的商品說明

d. 最近瀏覽過的商品功能

e. 購物車儲存與編輯商品的功能 (下次再買)

3. 悠閒瀏覽者 Browsers

這類型的客戶屬於在尋找新的商品、靈感或者是消磨時間

因此網站要儘可能提供：

a. 社群分享功能

b. 有最新商品、熱門商品、促銷優惠、推薦商品區

4. 比價撿便宜者 Bargin Hunters 

這類型的客戶屬於在尋找最優惠的市場價格

因此網站要儘可能提供：

a. 商品原價與折扣都要列出

b. 清楚且明確的商品名稱

c. coupon 折扣優惠、電子報訂閱優惠、促銷商品區

5. 只買一次者 One-Time Shoppers 

這類型的客戶屬於只買一次，買完之後沒有意圖再回來購買

因此網站要儘可能提供：

a. 清楚的導覽系統與有效率的搜尋系統

b. 安心的購物資訊 (ex：退換貨)

c. 商品詳細說明

以上是消費者的五種購買意圖類型，網站設計必須要滿足這五種類型的使用者

了解消費者類型後再來看看這個網站的設計：http://www.saksfifthavenue.com/Entry.jsp 

符合了哪幾種客戶類型 (練習題)

購物流程

購物流程依照上面講的五種類型使用者，大致可以設計成以下幾種 

這沒有絕對答案，但多數網站使用以下這四種流程：

a. 商品頁 --> 購物車頁 --> 登入頁 --> 結帳流程頁

b. 商品頁 --> 登入頁 --> 結帳流程頁

c. 商品頁 --> 購物車頁 --> (登入 + 結帳流程頁)

d. 商品頁 --> (購物車頁 + 登入) --> 結帳流程頁

然後試著用底下的使用者情境來思考哪一種流程比較好 (練習思考)

1. 已知要購買的商品：只要購買上次買過的那一件商品，很熟悉這個網站的購物流程

ANS：這類客戶很熟悉網站購物流程而且已經鎖定商品，所以比較適合流程 b

2. 充分比較研究：經過比較後，就是這個型號的商品最適合

ANS：自己想

3. 優閒瀏覽：這件商品款式很好看，價格上也算合理

ANS：自己想

4. 比價撿便宜：清潔用品大減價，這次多買一點

ANS：自己想

5. 只買一次：第一次在這個網站買東西，總共選了5件商品

ANS：自己想

首頁的設計

網站的頁面依照功能區分主要有三種類型：

1. 導覽：

導覽可以看成一個中繼站，它的作用是用來將客戶引導至商品頁，主要工作並不是讓客戶停留

2. 互動：

像是表單的填寫 (註冊、訂閱電子報之類的)、或是篩選器的使用都是與客戶互動

3. 消費：

指的就是創造營收的商品頁

要開始製作頁面前，要先定義好是屬於哪種類型，首頁很明顯就是導覽用，用來將客戶送到商品頁進行購買

首頁的區塊大致上可分為以下幾種：

1. 頁首 Header

2. 內容 Content

3. 頁尾 Footer

4. 全站導覽 Global Nav

1.首頁 Header

上一般會有個工具性導覽 (Utility Navigation)，大部分在右上方

工具性導覽指的就是下圖這個區塊 (這名詞一開始還不知道是啥，回家 google 後才知道)

工具性導覽 (Utility Navigation) 不只存在 Page Header ，他也可能會在其他區塊看到

有關工具性導覽的設計，可以參考一下這個網站

Utility Navigation: What It Is and How to Design It

首頁 Head 上的工具性導覽一般會有：登入、註冊、會員專區、搜尋、購物車、核心價值.....之類的

另外在搜尋框的設計，有經過研究統計最適的寬度為 27 ~ 28 個英文字母小寫 

再來所謂的核心價值，指的就是你網站的特點 (我一開始還以為是企業經營理念之類)

一般包含以下幾種：

1. 獨特銷售特點

ex：滿 ? 元免運費、幾小時到貨

2. 服務機制

ex：宅配到貨、7-11取貨

3. 促銷活動

ex：慶祝婦幼節活動

4. 商品資訊

ex：新品到貨

這些所謂的核心價值一般都會放在全站導覽的下方，或是 Head 之上

相信大家看到一堆 xx 導覽一開始跟我一樣不知道在講哪裡，以下附圖參考一下

標誌一般指的就是 Logo，頁尾導覽就是 foot 上的導覽，例如下面這樣

而右上方的會員登入、加入會員、客服中心，甚至包含搜尋功能就是工具性導覽

而全站導覽指的是像下圖這樣：

首頁的 Head 上一般有幾個元素可以去搭配 (不是絕對，只是參考)

a. Logo

b. 搜尋列

c. 登入、註冊

d. 會員帳號

e. 我的最愛

f. 購物車

g. 全站導覽

h. 核心價值

2. 內容 Content

所謂內容區指的就是整張網頁除了 Head 跟 Foot 之外的部分

一般內容區域會有 slideshow 去做廣告的輪播，但這 slideshow 在設計上有些注意的要點

經過統計，一般使用者會很直覺的認為那是廣告，很容易就對廣告輪播失去耐性

因為客戶沒有時間與耐心去等一個一個輪播

所以在設計上最好要可以讓使用者能夠預覽下一張，例如像 amazon 這樣

或是有一種在右方的小縮圖 + 標題，在左方輪播的那種設計 (一時找不到類似的網址)

用手畫一下大概是這樣，右方的小區塊會在左方放大輪播

這樣的好處是輪播的內容一開始就可以透過右方縮圖讓客戶看到，有興趣的話就會直接點縮圖了

再來版面設計上有分以下幾種 (參考用，應該還有其他)

a. 卡片式編排設計

這種設計方式會放大要凸顯的商品卡片凸顯客戶的目光

像下圖左下方的大尺碼卡片，就凸顯了這個網站有提供大尺寸服務

卡片式設計其他參考網站：

http://www.lordandtaylor.com/webapp/wcs/stores/servlet/en/lord-and-taylor

https://www.zalando.de/herren-home/

用卡片式設計陳列商品

b. 視差滾動設計

這種網站第一次來訪時會讓客戶有新鮮感，但缺點是看久了會膩，商品呈現數也無法太多

底下這網站用視差滾動設計說明了這個包包 (嗎?) 的使用與介紹

http://www.bagigia.com/

缺點是你網頁要從頭拉到尾，也只介紹了一個包包，但就是會讓一開始來訪的客戶有新鮮感

但玩久了會有點浪費生命的感覺

其他視差滾動設計的網站例子：

https://www.libratone.com/uk

http://moto.oakley.com/#start

http://us.rimmellondon.com/

網站商品種類的廣度

上面介紹了兩種網站首頁主要的設計方式，其實一般還是卡片式啦

再來課堂上老師說的這個主題是網站的商品種類廣度

了解這個的用意是，當消費者第一次來到你的網站，他會知道你在賣什麼嗎?

並舉了這個網站例子：

http://www.zappos.com/

從上圖的圖片可以看到有賣鞋子、而且很多鞋子!! 再來右方有個像廣告的東西好像有在賣衣服

但這廣告做得有點太像廣告，感覺跟自家東西沒什麼太大關聯，加上頁面上全都鞋子讓我更覺得他是廣告

(個人感想)

但其實這個網站賣的不只是鞋子，你ˋ其實可以看到他網站導覽有衣服、包包......之類的

但頁面上的商品圖片大概 95% 是鞋子，可能會讓客戶一開始進來沒注意就以為你只賣鞋子

畢竟網站最吸引人的就是商品圖片

經過統計，一般來說如果是小型電子商務網站，你的首頁至少要放你網站上 70%的商品

如果是大型電子商務網站，因為商品種類真的太多，就大約是 40% ~ 50% 之間

底下用幾個網站來練習，你知道這網站主要是賣什麼商品嗎：

http://www.kurtgeiger.com/

http://www.gooutdoors.co.uk/Index.aspx

http://global.llbean.com/

提供不同面向的推薦方式

網站在設計上除了剛剛講的商品類型的廣度之外，也可以提供不同面向的推薦區塊

例如......最新商品、特色商品、季節性商品、熱賣商品、特價商品......等

其中的熱賣商品，背後也代表著有很多消費者替你的商品背書

而特價商品則可以擴大你的市場，吸引更多人來消費

這些推薦方式，都可以保持客戶對你網站的新鮮感與維持關注力

所以在規劃首頁設計的時候，就要盡量把這些元素都規劃進去

其他可參考網站：

http://www.saksfifthavenue.com/Entry.jsp

提供類別連結

類別連結的意思就是指"更多這類型商品"的意思，也就是提供 more 的連結，連結到同一類型的商品清單

可以讓消費者知道網站還有更多這類型的商品在後面沒有被呈現出來

像以下這樣： 

其他可參考的網站：

http://www.newegg.com/

讓使用者知道其它投影片的內容

這個就是上面一開始講 Content 時有提到的，抱歉我太早寫了

投影片指的就是 slideshow，因為經過統計消費者會認為那些輪播的東西都是廣告

所以消費者不會在意你到底有幾張投影片，且會很容易會對這區塊失去耐心

所以最好可以提供輪播的預覽給使用者看，像以下這樣 (終於找到網址了)

消費者會更有耐心去等待輪播，或是直接去點選

在右方呈現輪播的小縮圖與標題，然後在左方輪播

其他可參考的網站：

http://www.amazon.com/movies-tv-dvd-bluray/b/ref=nav_shopall_mov?ie=UTF8&node=2625373011

http://uk.moodbyme.com/

分享客戶的生活

結合社群的力量，當消費者看到別人對商品的認可與討論商品服務的時候

就會加強想要去了解這個商品的想法，進而會有想要去使用看看這個商品的動機

因此可以鼓勵你的消費者，盡量上傳有關使用這個商品的照片

像是以下這網站就有提供上傳自己照片來分享的功能

或是可以結合 Facebook 之類的社群網站來做使用經驗的分享，這種做法可以提高客戶忠誠度

其他可參考的網站：

http://www.express.com/

http://www.saksfifthavenue.com/Entry.jsp

綜合以上所說，首頁的內容 (Content) 上一般有幾個元素或設計可以去搭配 (不是絕對，只是參考)

a. 商品種類的廣度

b. 特色商品

c. 最新商品

d. 季節性商品

e. 熱賣商品

f. 流行商品

g. 熱門品牌

h. 特價商品

i. 社群內容

3. 頁尾 Footer

一般頁尾可以包含這幾種元素：

a. 客服專線

b. 會員服務

c. 購買說明

d. 關於公司

e. 網站地圖

f. 社群媒體

g. 聲明條款

清楚明顯的客服專線

這個在頁尾項目中算是最重要的，像以下這個網站你絕對不會沒注意到他的客服專線

因為設計的很俏皮也跟跟網站販售的商品形象很有關，讓我一度覺得這網站是為我這肥宅而開的

而且這網站在頁尾也有做頁尾導覽與社群媒體

可參考的網站：

http://johnnycupcakes.com/

https://www.eyescream.com.tw/default.asp

4. 全站導覽 Global Nav

全站導覽系統再複習一下，指的就是這塊

全站導覽系統可以幫助客戶用來比較商品的種類，是網站最頂端的層級

用戶會因為全站導覽系統的規劃與設計，來對你網站的分類有初步的了解

以同類型的購物網站來看，彼此間的差異性已經越來越小，如果設計好全站導覽系統

除了幫助使用者快速引導至該類別，也可以讓消費者大致了解你的網站內容與分類方式

例如：

lativ http://www.lativ.com.tw/

OB 嚴選 http://www.obdesign.com.tw/

相比兩個網站的全站導覽數量會讓人感覺 OB嚴選的商品種類比較豐富 

選單不只是選單

傳統的導覽選單是長這樣

但也有另一種寬選單設計，因為可容納的內容區塊變大了，所以也可以結合一些行銷的手法來呈現

例如以下這個寬選單 (mega menu) 例子

如果導覽主題是女裝，那設計上就可以把女裝的元素與行銷手法放入寬選單中

可參考的網站：

http://www.matchesfashion.com/intl/womens

http://www.harrods.com/

類別頁的設計

類別頁的功能在於提供資訊上的線索，讓消費者清楚裡面的商品有哪些，讓消費者做出更好的決定

類別的分類類型可以分成

a. 

主類別  -->  次類別類型

類別  --->   商品清單類型

類別子類    --->   商品清單類型

b. 

主類別   --->   次類別類型

類別    --->   次類別類型

次類別   --->   商品清單類型

次類別子類   --->   商品清單類型

=======================

商品清單類型指的就是商品清單頁面

次類別指的是資訊架構的層級

次類別類型指的是內容

相信大家跟我一樣都不知道到底在說啥!

我剛又稍微想了一下，簡而言之以上指的就是網站分類的層級，與該層級適合呈現的內容

以這個網站為例：http://www.ralphlauren.com/home/index.jsp

大概是下圖這個意思

如果階層有四層的，最後一層就叫次類別子類

大概是下圖這個意思

這頁：http://www.ralphlauren.com/family/index.jsp?categoryId=34641416&cp=12150841.34641416&ab=ln_women_cs_shoes

Shoes 是次類別，底下如果還有分類就是次類別子類

那次類別類型指的就是這樣的頁面呈現，下圖是點進 women 之後的類別頁

定義抽象與具象的標籤名稱

所謂抽象指的像是客廳、臥室，因為客廳臥室裡面還有很多其他東西，所以客廳、臥室屬於抽象

所謂具象指的像是電冰箱、筆記型電腦、桌子......等明確的物品

那定義這兩個名詞要幹嘛咧!

在設計面上如果標籤名稱屬於抽象類型，那頁面設計時就比較適合使用次類別設計類型

如果是屬於具象類型的標籤，在頁面設計上就比較適合使用商品清單的設計類型

但是也有例外就是如果你的具象標籤有要強調有所不同，就可以使用次類別類型來設計

例如下面這個特例：

冰箱是屬於具象類型，但是在設計上用次類別類型設計，主要就是要強調冰箱可能有不同功能與特色

或是強調我家的冰箱類型最齊全，因此使用了次類別類型設計

http://www.bestbuy.com/site/home-appliances/refrigerators/abcat0901000.c?id=abcat0901000

其他參考網站：

http://www.kmart.com/toys-games/b-20007 (次類別類型)

類別頁的重要元素

類別頁主要的功能在於導覽與互動，依設計方式又分為次類別頁類型與商品清單頁設計 (上面講的)

次類別頁類型設計方式，主要是在提供資訊上的線索，讓消費者選取商品時，做出更好的決定

商品清單頁設計方式，主要在幫助消費者能夠快速找到他們想要的商品

次類別頁類型設計

一般可運用的元素有以下這些：

a. 特色主題

b. 特色商品類

c. 特色商品：最新商品、獨賣商品、熱門商品

d. 促銷商品、限時搶購商品

e. 熱門品牌

f. 區域導覽選單

商品清單頁設計

一般可運用的元素有以下這些：

a. 區域導覽選單

b. 篩選器

c. 排序模式

d. 商品縮圖

e. 品牌 / 商品名稱

f. 價格

g. 顏色

h. 我的最愛

i. 快速查看商品

j. 影片

k. 商品比較

主類別頁特色內容

依照上面的元素來檢視一下下面參考網站：

http://www.williams-sonoma.com/shop/cookware/?cm_type=gnav

上面連結是個類別頁，左方有許多特色主題，例如可以依照材質、依照品牌.....等購買

加上購買連結

參考網站：http://www.littlewoods.com/women/e/b/1589.end

如果你的類別頁當中有熱門商品、促銷商品......之類的區塊，那請幫區塊內的商品加上購買連結

另一個例子：

上圖的加號點下去可以開啟加入購物車的小視窗，讓消費者可以看到喜歡的商品立即購買

區域導覽

消費者可以透過區域導覽去切換他們想看的商品類型，以及清楚商品之間差異性

因次類別頁中最好加入區域導覽的設計

複習一下區域導覽是指這裡

在商品清單中可以尋找商品是否有共通的類型，然後把該類型獨立出來放到區域導覽中

或是當作篩選器的過濾條件，例如下面網站用顏色來當篩選器

使用顏色當篩選器，並且提供排序

篩選器與商品模式都可以提昇瀏覽時的易用性

其他可參考的網站：

區域導覽選單

http://www.hm.com/us/products/ladies/dresses_jumpsuits

http://www.ralphlauren.com/family/index.jsp?categoryId=4332103&cp=1760782&ab=ln_women_cs_dresses

資訊上的線索

http://www.hm.com/tw/products/ladies/jeans/skinny/skinnyregular

http://www.ikea.com/tw/zh/catalog/categories/departments/living_room/10732/

篩選器的層面與層面的值

篩選器的層面類型 facet 有以下這些

a. 一般性

ex：尺寸、顏色、品牌、價格

b. 主題性

ex：季節、樣式、戶外

c. 相容性

ex：商品屬性、連接器可使用的品牌

d. 商品特性/規格/樣式

ex：衣服材質、商品規格

篩選器指的是這個，可能出現在左方或商品清單上方

所以篩選器的層面指的就是篩選器是篩選什麼，而他的值就是實際篩選的項目

舉例來說

洗衣機 ----> 層面可能有品牌、幾門，層面值就是國際牌、三洋，2門、3門

因此篩選器就是篩選品牌，裡面的值就是國際牌、三洋.......之類的

篩選器層面值 (Facet value) 的呈現方式有以下幾種

a. 文字連結

http://shop.foodnetworkstore.com/nav/department/cookware/0?ecid=PRF-FOOD-100293&pa=PRF-FOOD-100293

b. 勾選單

http://www.jenierteas.com/green-tea-b4#&health[]=contented&health[]=detoxed&orderby=product_price&DescOrderBy=ASC

c. 滑桿

http://www.dorothyperkins.com/en/dpuk/category/clothing-203535/tops-t-shirts-1974337?intnav=clothing-supercat_52_d04_expand_style_tops&t-shirts&geoip=noredirect#pageSize=20&catalogId=33053&viewAllFlag=false&langId=-1&storeId=12552&categoryId=208650&pageNum=1&No=0&N=23591+15622&Nrpp=20&siteId=%2F12552&sort_field=Relevance&Nf=product.price|BTWN+10+40&beginIndex=1&endIndex=null&pageFlag=s_20&catId=208650&parent_categoryId=208600

d. 輸入欄位

https://www.wolfandbadger.com/uk/category/men/

e. 視覺化

 https://www.theoutnet.com/en-TW/Shop/Clothing/Jeans

f. 超過 (10) 個以上的值

ex : https://www.rei.com/c/paddling?r=c&ir=category%3Asit-on-top-kayaks&page=1

g. 選出來的值

http://intl.target.com/c/bedding-sets-collections-home/-/N-5xtv1?#navigation=true&category=3941&view_type=medium&sort_by=Featured&facets=&offset=0&pageCount=60&page=1&response_group=Items%2CVariationSummary&zone=PLP&isLeaf=true&custom_price=false&min_price=from&max_price=to

http://www.crateandbarrel.com/kitchen-and-food/coffee-makers/1#~EDGE~!sort.axis__default~~!display.color__Black..Clear..Metallic!~~!display.type__Coffee%20Maker!~EDGE~

http://www.saksfifthavenue.com/Women-s-Apparel/Jeans/shop/_/N-52flov?Ne=399545539&Ne=399545539&Ne=399545539&Ne=399545539&FOLDER%3C%3Efolder_id=2534374306418063

這篇實在寫太久，而且老師還沒講完，下面先列出內容

可參考網站：

http://www.anntaylor.com/blouses-2b-tops-/cata000010

http://www.williams-sonoma.com/shop/cookware/specialty-cookware/?

http://www.hugoboss.com/uk/mens-shoes/

可參考網站：

http://www.saksfifthavenue.com/Women-s-Apparel/Jackets-and-Vests/shop/_/N-52fzyx/Ne-6lvnb5?FOLDER%3C%3Efolder_id=2534374306436569&Ns=P_bestsellers_units%7C1%7C%7CP_brandname%7C%7CP_product_code

http://www.simplyhike.co.uk/departments/Tents.aspx?State=Price&Price=100-1000

最後是一個很重要的觀念與名詞，在設計頁面時應該要把這個觀念帶入

錨點效應 (Anchoring Effect)

錨點效應指的是一種心理現象

是指當人們需要對某個事件做定量估測時，會將某些特定數值作為起始值，就會下錨把這個值當基準點

然後再依照這個基準點逐步修正，因此在做決策的時候，會不自覺地給予最初獲得的信息過多的重視

就像是要靠岸的船，得先下錨再移動船身，才能停在準確位置一樣，所以叫錨點效應

有興趣可以參考這個網站：

http://wiki.mbalib.com/zh-tw/%E9%94%9A%E5%AE%9A%E6%95%88%E5%BA%94

意思就是第一眼看到的數字會影響到他之後的決定

假設消費者到網站來看到有個"湯品促銷折扣"，他可能會買三罐

但如果該區域是寫"湯品促銷折扣，限買10罐"，那消費者反而會平均買七罐

因此在設計上應該要把數字比較高的放在商品清單頁的上方，或內容起始處

消費者會比較有機會購買價格高的商品

以網站來舉例：

http://www.rogers.com/consumer/wireless/compare-iphones

價格由高到低就正確了

比較不好的作法是這樣幾乎沒在管排序

http://www.compareraja.in/mobiles/apple-mobile-prices.html

其他資料與網站參考：

商品比較

https://www.rei.com/c/sit-on-top-kayaks?ir=category%3Asit-on-top-kayaks&r=c&page=1

http://www.bhphotovideo.com/c/search?setView=LIST&catName=Lights&ci=11593&N=4011740577&view=LIST

https://www.libratone.com/uk/compare-speakers

http://www.amazon.com/Amazon-Kindle-Ereader-Family/b?ie=UTF8&node=6669702011

這篇實在寫太久先 end

還有其他資料有空再補