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

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

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

 

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

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

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

就參考一下就好

 

商品頁的元素

在商品頁的商品名稱中,可以在後方加上一些描述,像是下圖被賣掉的 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?

 

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

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

 

 

創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

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