小雕雕的家

這篇要講的是迷你購物車，迷你購物車是什麼呢?

就是下面這東東，在商品頁點下去購買之後會出現的小型購物清單

雖然我覺得也可以叫做臨時購物車，不過上課時還是用迷你購物車來稱呼

但!! 在開始這次的主題之前，因為上一次上課沒講完，所以再繼續補充有關商品頁的設計與元素

下面兩張投影片因為時間過太久，已經忘記什麼意思了~~

大概是指商品頁給人的感覺吧，包含商品的敘述文字

就參考一下就好

商品頁的元素

在商品頁的商品名稱中，可以在後方加上一些描述，像是下圖被賣掉的 yahoo 一樣

看商品名稱就可以知道 ipod/iphone/ipad 可以使用這個耳機，雖然寫的是廢話哪有耳機不能用在手機

但這種做法就容易吸引想要為 ipod/iphone/ipad 尋找耳機的傢伙們

而除了讓消費者更容易找到符合他需求的商品，另一方面也對 SEO 有幫助

但適可而止就好，不要加一堆莫名其妙的描述，反而會讓消費者眼花

再來下面這份報告雖然是 2012 年，但相信應該跟目前差不了多少

下圖指出，商品的低價格佔了購買說服力的54%，其實這個也很正常，我要買東西前也會先比較一下 $$

被當凱子的感覺不太好，但當然還是會有些因素考量，例如到貨時間....等等

但低價不可否認仍是最吸引人的一點，由於商品頁的功能主要是在購買

因此在頁面上呈現低價訊息會更容易吸引消費者的目光

當消費者想要購買耳機時看到商品有特價，不管這個特價是不是唬爛的 (提高定價)

看到省了那麼多錢就能夠提高消費者購買的機率

因此如果商品在有特價的時候，就要把定價與特價同時顯示，並呈現出有省到錢的感覺

以下是我的想法：

現在購物網站幾乎沒有不做特價與定價價差比較的，而且網站的每個商品都會做這樣的呈現

所以對我而言，這種呈現對常在購物網站鬼混的消費者來說，其實沒什麼太大吸引力

因為網站上每個商品都是類似 定價：$950　特價：$880

當一個網站全部商品呈現都是便宜的，對我來說可能都代表了全都不太便宜，或是沒什麼意義

但!! 如果在  定價：$950　特價：$880 的旁邊有一條紅字寫著：

限時優惠活動 2016/xx/xx ~ 2016/xx/xx 之類的文案，吸引力就會大幅提高

再來是使用者評價，消費者對這個商品的評價，可以增加其他消費者對這個商品的信心

因為是對這個商品有興趣才會去看評價，一般可以在商品名稱下方放評價等級

不要放在加入購物車按鈕附近，任何情況下購物車按鈕都必須凸顯，且四周不能有會讓消費者分心的元素

加入購物車按鈕的設計方式，下面會再提到

接下來看一下使用者評價為何會對其他消費者是重要的，而對我來說這種評價就像是迷你的開箱文一樣

下圖數據顯示有55%的消費者，在購買商品前會重視商品的評價

其實我會先 google 找開箱文

我們可以從上面那些圖表數據上得知，使用者評價對於商品的購買來說有著一定的影響力

(但我覺得可能要注意商品太差，帶來的負評問題與影響)

下圖指的則是不可缺少的商品描述，讓顧客能夠瞭解你的商品特色

如果你的商品還有其他顏色與樣式，就請提供給客戶選擇

有看過電子商務網站是一個顏色一個商品頁的，這種設計就非常的糟糕

快沒庫存了，把握機會

在商品頁加上快要售完的庫存數字，會讓消費者心理產生必須趕快購買不然會被搶光的感覺

但庫存足夠的時候其實放不放都可以

特價活動快結束了，可以刺激消費者購買欲望

另一個在商品頁中常見的功能，就是商品貨到通知

會使用這個功能的顧客，在你商品到貨開放購買後，會有很高的機率再次回來購買

商品頁之中，一定要放消費者所關心的寄送資訊，運費、到貨時間.....等

下面放幾個圖表，來說明這類資訊對消費者的重要程度

替代商品可以提昇平均訂單數量，"假設"會員1000人有300人會購買，加入替代商品後可增加至400人

搭配商品可以提昇平均訂單價值，"假設"平均訂單$600，可提升至大約$800

公堂之上假設一下不犯法，以上是用大數據分析後的結果

並且有一個重點：替代商品的價格最好比原商品來的高，且推薦商品的標題要清楚明確

在商品頁之中，也可以放入最近搜尋與最近瀏覽

最近瀏覽的設計上有幾個點要注意

1. 設計的邏輯是什麼? 紀錄瀏覽是否要包含正在瀏覽的商品本身

2. 時間順序性：由左至右，由上到下

3. 清除紀錄的功能

加入購物車按鈕

以上是商品頁可能存在的元素，接下來這個比較重要一點，加入購物車的按鈕該如何設計

商品頁的主要工作就是讓客戶購買與結帳，所以是整個網站中最重要的一頁，可以帶來營收

1. 必須讓加入購物車的按鈕在第一視覺區

有關第一視覺區是什麼請參考這篇 http://sweeteason.pixnet.net/blog/post/43061616

大概就是下面這樣，而加入購物車的按鈕最好要在第一視覺區，網頁一載入就能看到的位置

2. 設計購物車按鈕時，要遵守以下幾個地標設計原則

顏色：對比性要夠

尺寸：夠大

位置：放在第一視覺區

留白：周遭有足夠的留白空間

3. 加入購物車的按鈕要放在購買區中

上面那個我手殘畫的圖就是商品頁的上半部，左邊是商品圖片，右邊是俗稱的購買區

再來參考一下其他網站的設計來做練習，再分別指出加入購物車按鈕，在設計上的缺點

下面這個網站如果要說的話，加入購物車按鈕可以再放大一點效果會更好

https://jococups.com/shop/12oz-joco-cup/

http://shop.nordstrom.com/s/cole-haan-colton-chukka-boot-men-nordstrom-exclusive/3293454?origin=category-personalizedsort&contextualcategoryid=0&fashionColor=Copper%2F+Peacoat+Leather&resultback=523.6363522868513

下面這個網站的加入購物車按鈕已經超過了第一視覺區，使用者必須要捲動頁面才能看到按鈕

是個不好的設計

http://www.danthienne.it/eshop/aurora/

底下這個網站有個比較嚴重的問題，非常難找到加入購物車的按鈕在哪，算是一個非常好的失敗例子

http://www.shopterrain.com/all-outdoor-furniture/all-weather-wicker-open-back-armchair

底下這個網站就很不錯，顏色對比性夠，尺寸夠大、周圍有留白，而且放在第一視覺區內

算是一個好的設計方式 (以加入購物車按鈕擺放來說)

加入購物車的按鈕顏色對比性，基本上可以與網站的 logo 顏色一致，就像上面那個網站一樣

再來看一下商品頁中有關數量的選擇方式，看看哪一種設計在使用上比較簡單操作

數量的選擇設計有以下幾種：

1. 下拉選單

2. 步進器

3. 數字輸入欄位

4. 無數量選項 (就加入購物車只會有一個的意思，但可以在購物車中調整數量)

也是用幾個網站來看比較有感覺

https://www.amazon.com/Samsonite-Luggage-Winfield-Fashion-Charcoal/dp/B00EALLN56/ref=pd_rhf_dp_p_img_5

amazon 使用的是下拉選單

https://www.diapers.com/p/red-cross-safe-travels-first-aid-kit-54469

下面這網站用的是步進器的方式

http://shop.nordstrom.com/s/cole-haan-colton-chukka-boot-men-nordstrom-exclusive/3293454?origin=shoppingbag

下面這網站是用輸入框的方式

http://www2.hm.com/en_gb/productpage.0227460013.html

下面這網站是無法選擇數量的

在商品頁如果有多種資訊要顯示，受限於空間大小，有幾種常見方式可以使用

1. 模組標籤 Module Tabs (就是 tab)

2. 折疊式面板 Collapasible panels 

3. 空間指標

畫圖實在太辛苦，所以畫在紙上

迷你購物車的設計 

接下來才是這次上課的主題，迷你購物車的設計，一般也會結合臨時購物車的概念

在購買商品要結帳之前都不需要登入會員，方便使用者儲存要購買的商品清單

所謂的迷你購物車就是指按下商品頁的加入購物車按鈕時，會在某處出現小型的購物車清單

這種設計可以讓使用者不需要進入到購物車頁面，就可以清楚的了解目前的購買清單

同時也可以在這個迷你購物車之中去管理自己的商品，例如修改數量之類的功能

但是在按下加入購物車按鈕時的反饋動作非常重要，這就是這個主題要討論的

這種迷你購物車的設計已經普遍存在於大部分的電商網站，但仍有少部分是直接進入購物車頁面

但其實主要還是取決於網站販售商品的類型，如果你是超高單價的商品，其實迷你購物車用處不大

還不如直接進購物車頁面

早期的技術因為AJAX應用還不普遍，所以行為模式大概是像下面這樣

按下加入購物車按鈕後就直接到購物車頁面了

商品頁 (購買模式) ---------->　購物車頁面 (結帳模式)

如今AJAX應用氾濫之後，上面的流程也可以變成這樣

商品頁 (購買模式) ----------->  商品頁 (結帳模式)

意思就是你可以直接商品頁選好商品，就直接進入結帳模式了

這就是迷你購物車的功用

再來很重要的是，加入購物車按鈕跟迷你購物車之間該怎麼讓他有關聯

所謂有關聯的意思是指，如何讓使用者知道這個東西是你按下加入購物車之後跑出來的

在迷你購物車的設計目前大概有幾種

1. 崁入式文字

2. 下拉式視窗

3. 動畫

4. 覆蓋式視窗

5. 搭配商品促銷頁

6. 到購物車頁

7. 沒有回饋的回饋

崁入式文字就像這個網站

http://www.boots.com/en/No7-Men-Energising-Face-Wash-150ml_1537310/

按下加入購物車之後會有崁入式文字提示，商品已經加入購物車

下拉式視窗就像這個網站

http://www.harrods.com/product/skull-heel-ankle-boots-40/alexander-mcqueen/000000000005265854?cat1=new-shoes&cat2=shoes-women-boots

動畫就像這個網站，但因為是動畫，所以自己點進連結看會比較清楚

http://store.starbucks.com/starbucks-vanilla-syrup-011048109.html?navid=xsellPDP

覆蓋式視窗就像這個網站

http://www.tredz.co.uk/.Altura-Transformer-Windproof-Jacket-2012_34407.htm

搭配商品促銷頁，其實是下面這個網站，但現在找不太到，有時間的人可以找一下

但這種方式容易讓使用者的心智模式突然被切換，需要時間去習慣

https://uk.lush.com/products/hands/salted-coconut

沒有回饋的回饋指的是像這樣，按下去後遠方的袋子就莫名其妙 + 1

https://www.kodz.com.tw/Product/Detail?p=5024120&color=%E5%8D%A1%E5%85%B6

迷你購物車的好處，可以讓使用者決定接下來是要繼續逛還是要結帳

而不是傳統的加入商品後，只能進入購物車清單頁面

並且可以讓使用者隨時可以瀏覽要購買的商品，不需要回到購物車頁面才能得到這個資訊

也可以在迷你購物車中提示使用者，免運的門檻還差多少可以到達

這種資訊就不用等到進入購物車頁面之後才能知道

而迷你購物車除了放運費資訊之外，也可以放置其他的推薦商品，等於你的商品多了一個曝光的地方

底下是一堆數據，參考一下就好

再來一個設計要注意的點是，當商品已經存在迷你購物車之中了

你再按下加入購物車的話，商品是會累加還是維持數量 1?

有關迷你購物車的說明先到這邊，這篇寫太久了......

下一篇是迷你購物車後篇 + 購物車頁面與購物流程的規劃