小雕雕的家

這篇文章是上的第二堂課內容

因為上禮拜內容太多講不完，因此上課一開始繼續接續補充上次課程內容

一樣是因為之後要部門分享，所以先把重點記下來避免失憶

類別頁的設計 (續)

第一堂課請看這邊：

[UX/UI] 電子商務網站的規劃與設計課後心得 (一) - 電子商務網站發展趨勢、線上購物行為模式、首頁與類別頁的規劃與設計

上次下課前老師講到篩選器但還沒講完，所以這禮拜繼續往下講

篩選器

課程一開始首先拿上禮拜教的篩選器負面例子來看

http://www.crateandbarrel.com/kitchen-and-food/coffee-makers/1

上面的篩選器在使用勾選方式選擇完條件後，條件就會縮回去變成類似 Color (2) 代表顏色有兩個條件

但是當篩選條件越來愈多，誰的記憶力會這麼好記得篩選過什麼，或者是說如果想要再去確認篩選條件

就必須要把每個篩選器的層面一個個點開來看，是個非常不好的設計

像下圖這樣：

比較好的設計方式是像這個網站：

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

上面這網站在選擇篩選器的時候如果篩選器的值過多，就使用可捲動的方式呈現，並且提供搜尋功能

在選完條件之後按下 apply 就會如下圖：

條件就會直接列在篩選器的下方，這是一個不錯的設計

一般篩選器放置的位置可放在左邊，結果呈現在右邊

或是放在上面結果就呈現在下面，位置上帶來的效果差異不大

商品縮圖

在呈現列表頁商品縮圖的時候，一般會用

a. 商品情境照

b. 商品特寫圖

兩種方式來呈現，情境照像下面這樣：

或是像下面的沙發這樣，用來展示使用情境

而商品特寫圖像是這樣：

有時候商品情境圖也會跟特寫圖穿插使用，穿插使用的好處是在網頁呈現上會看起來更加活潑

像是下面這樣：

http://www.urbanoutfitters.com/urban/catalog/category.jsp?id=WOMENS_SHOES&description_display=true

使用情境照的優點是容易讓消費者有想像的空間，想像自己在使用商品的時候是否與自己期待的一致

進而讓消費者有更想了解這個商品的慾望  (點進商品頁)

而特色(特寫)圖片也可以幫助消費者更加了解商品的細節，目前來說混用的情況越來越普遍

例如以下這個例子：

https://www.harrods.com/womenswear/new-season-dresses?icid=megamenu_WW_clothing_dresses__gowns

預設是情境照，滑鼠滑過去可以變商品特寫圖

而底下這個網站除了像上面滑鼠移過去或改變圖片類型外，商品的特寫圖上也提供 shop now 按鈕

按下去就會跳出更詳細的說明跟其他圖片 (不會轉頁)

http://www.hm.com/us/products/men/tshirt

就可以做更詳細的預覽，設計得很不錯，只是那個框美觀部分要加強一下 = =  (個人感想)

下面這個網站除了滑鼠移過去會出現不同類型的商品縮圖之外，也可以點選上方的 view as 來切換類型

介面設計得很不錯，可讓使用者自己去選擇要看哪種類型的商品圖片

提供顏色的選擇

再來是有關商品顏色的部分，如果你的商品是有顏色分類的話，可能會有以下的情境

如果消費者看到某個商品圖的款式很喜歡 + 有點興趣，但是不喜歡那個顏色

但是你頁面上沒有提供，這個商品其實還有其他顏色的資訊的話，消費者可能就會直接跳過了

因此在設計的時候，如果商品有其他顏色，可以在下方示意還有其他顏色可以選擇

顏色的呈現有幾種方式，請參考下面三個網站：

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

http://www.esteelauder.com/makeup/lipstick

https://www.zalando.co.uk/van-laack-alisa-shirt-hellblau-vl421e01h-k11.html?size=8

快速查看商品

有些網站在滑鼠移過去的時候會快速瀏覽的功能，可以讓消費者不需點進商品頁也能查看一些內容

像是這個網站：

http://www.anntaylor.com/blouses-2b-tops-/cata000010/?SortByFacetSelectedValue=remove&DocSortOrder=remove&format=json&catid=cata000010&question=&fRequest=true&goToPage=1&N=0&categoryType=regular&priceSort=DESC&country=TW&currency=TWD&Submit=Submit

點下去 Quick Shop 之後會在原頁面跳出可快速查看商品的遮罩

但這種做法必須要考慮到裝置，因為在行動裝置上比較難模擬 mouseover 

所以可以像下面這個網站一樣，使用 click 的方式展開

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

其他參考網站:

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

商品影片

如果你的商品頁是有提供影片的，那你可以考慮把影片拿到類別頁來使用

像下面這個網站：

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

在商品的左方有一個播放按鈕，按下去之後就會開始播放該服裝的展示影片

讓使用者不需要進到商品頁，就可以觀看商品本身有展示影片 (不然你要進到商品頁才知道有影片)

在類別頁增加這個功能，感覺將消費者推向商品頁去購買的目的力道又更加強了一些

另一個參考

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

點了會開一個小視窗來播影片

類別頁的介紹到此，接下來是今天真的要上課的內容線框圖與商品頁的設計

wireframe (線框圖) 的基本繪製、商品頁的設計要點

短短的前言：

這節課其實最重要的就是商品頁的設計，因為這是主要創造營收的頁面

上一堂課曾經說過，頁面的設計在功能面上主要有三種，讓我們再來回憶一下

1. 導覽：

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

2. 互動：

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

3. 消費：

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

因此在商品頁設計上，要讓使用者不受影響的立即按下購買是我們最終的目的！ (熱血)

wireframe (線框圖) 的繪製

但首先來是來看看線框圖怎麼畫 (瞬間冷掉)

老師可能因為上禮拜有人不會畫 wireframe ，所以這禮拜稍微花了點時間介紹一下

不得不說底下的圖實在難倒我了，因為網路上找不到人家畫好的只好用小畫家自己畫

線框圖繪製的元素可以參考以下網站

https://developer.yahoo.com/ypatterns/about/stencils/

https://mockupstogo.mybalsamiq.com/projects

http://konigi.com/tools/omnigraffle-wireframe-stencils/

至於底下上課講的圖片是通用的，就是你畫出來大家都懂你在幹嘛的那種通用

部分畫面的表達：

下圖表示這個頁面的上面跟下面都還有內容，但是只取中間的部分來討論

下面這張的意思是已到頁首了，下面還有內容

下面這圖的意思是已到頁尾，上面還有資料

下面這張指的是網頁內容很長，但只想討論頁首跟頁尾

至於為什麼跟上面的圖寬度不一樣，只是手殘沒有什麼特別的意思

文字內容 (草圖)：

畫圖實在是太痛苦了，很想趕快結束這回合

數字表示：

終於可以用打字的

數字可以用 X 來表示，例如： $xxxxx、$900

日期表示：

年/月/日、yyyy/mm/dd

圖片表示：

線框圖一些基本元素大致上是像上面這樣畫，但這是比較多數人用的畫法沒有絕對

只要畫出來的圖團隊能看得懂並且知道用意即可

至於上面有提到文字的畫法，有時候在畫線框圖時需要放上範例文字

底下這兩個網站可以讓你產生假字 (廢文產生器的意思)，有需要可以參考一下

http://www.blindtextgenerator.com/lorem-ipsum

http://www.richyli.com/tool/loremipsum/

接下來終於擺脫繪圖，進入到電子商務網站頁面的設計重點之一，商品頁的設計

商品頁的設計

底下是一張商品頁的 wireframe (線框圖)

依照個人裝置螢幕的大小，在頁面一載入的可視範圍平均大概如下圖

接下來的說明很重要

上面那個紅線之上的範圍稱作"第一視覺區"，這個區域指的就是頁面一載入消費者會看到的頁面部分

記得之前在寫 Google PageSpeed 這篇文章的時候也有提到這個區域

有興趣可以參考這篇 (打廣告)：

使用 Google PageSpeed Insights 為行動網站進行效能調校 [優化網站速度與體驗]

主要是頁面載入且未超過可視區的話，可以延遲載入後面部分 (因為第一時間看不到) 讓網頁瀏覽更為順暢

我當時的圖畫的比較美 

離題了

第一視覺區取決於客戶端的螢幕尺寸，大約坐落在 600px ~ 800px 之間

兩個區域各自有其不同的吸引消費者類型，要設計商品頁之前我們要先了解消費者的動機有哪些 

所以再回憶一下上一堂課提到的消費者五大類型：

1. 已知購買商品者 Product Focused

2. 充分比較研究者 Researchers 

3. 悠閒瀏覽者 Browsers

4. 比價撿便宜者 Bargin Hunters 

5. 只買一次者 One-Time Shoppers 

而在第一視覺區可能會吸引到的消費者類型有以下這些：

a. 已知購買商品者 Product Focused

該用戶可能會直接購買，所以購買按鈕的設計方式很重要 (下面會有失敗例子)

b. 比價撿便宜者 Bargin Hunters

可能會比較注意看到價格的比較

c. 悠閒瀏覽者 Browsers

可能會分享到社群，或是將商品儲存起來 or 加入下次再買清單

而第一視覺區以外的區域吸引到的消費者類型有以下這些

a. 充分比較研究者 Researchers 

看到商品後會去看看其他使用者對商品的評價，或檢視商品材質

b. 悠閒瀏覽者 Browsers

因此在商品頁的設計上，必須要滿足所有類型的消費者

最後整理一下如下圖：

因此我們必須要針對已知購買商品者、比較撿便宜者、優閒瀏覽者來設計第一視覺區

底下是老師說的 

在開始設計商品頁之前我們要先來思考一個問題，就是類別頁與商品頁的目的對消費者而言到底是什麼?

在上一堂課有提到

類別頁的其中一個目的是，提供資訊上的線索，讓消費者在選取商品時做出更好的決定

商品頁的其中一個目的是，幫助消費者找到正確的商品

這兩個差別是什麼呢?

意思是在類別頁時消費者只能抓大概 80% 認為這可能是他要的，但不是那麼確定

所以到商品頁時再進一步確認這個商品就是他要的

但是他如果發現剛剛在類別頁選到了不是他要的商品，一般來講我們不會希望他再回到類別頁重選

我們會在商品頁提供一個推薦商品區，讓他從推薦商品區裡面去找到正確的商品

但是有關推薦之類的東西下堂課才會說! 所以先跳過!

首先看看第一張投影片

為什麼要跟 Nike 學習?  

因為 Nike 這網站曾經在 2013 年在 Webby 得到最佳購物電商網站的獎項

Webby 這個獎算是網路界的奧斯卡，據說持續已經有20年了

幫大家找了一下連結：

http://webbyawards.com/winners/2016/websites/general-website/shopping/

因此 Nike 的網站設計對我們學習 UXUI 會有一定的學習參考

Nike 的網站：

http://store.nike.com/us/en_us/pd/flyknit-lunar-3-mens-running-shoe/pid-10939836/pgid-1561757

接下來老師要大家拿幾個例子，可能在上面買過鞋子，或是覺得有不錯的網站設計拿來與 Nike 比較 (作業)

視覺元素的重要性

底下投影片是視覺元素的三個重要性

其他補充：

1. 只需要50毫秒就建立了網站的第一印象，決定率大約是 94%，指的是依照你設計的好壞來決定第一印象

2. 處理圖像能力比文字速度快 6萬/50倍，這兩個數據都是網路上提供的，這邊只是把他列出來說明很重要

3. 所以我們再回到 Nike，當我們來到商品頁的時候第一個注意的一定是商品圖，所以在設計上要提供：

a. 高品質的商品圖，因為來到商品頁最想看的其實就是商品本身

b. 除此之外，如果喜歡款式但顏色不喜歡，在 Nike 的設計上也提供了顏色的挑選

c. 加入購物車按鈕顏色鮮明，對比性夠，很容易讓人找到

也告訴了你有其他款式你可能會喜歡，就像個虛擬的店員在旁邊提醒你一樣

消費者對這個商品的評價

正面的評價等於是消費者在幫你的商品背書，會加強其他消費者選擇該商品的意願 (上一堂課有講)

在 Nike 的整個設計上，視覺動線非常清楚，視覺上有層次，例如標題字要夠大，內文字體小......之類的

視覺元素也有放在相對對的位置上，視覺動線就會自然而然自己形成

再來我們看看一樣是賣鞋子，但其他網站的設計與 Nike 這網站的差異為何

這是台灣 Yahoo：

https://tw.buy.yahoo.com/gdsale/gdsale.asp?act=gdsearch&gdid=6270303

消費者一進入商品頁就是要看這張商品圖，但是 yahoo 在商品圖片旁邊放了一些不應該放在這邊的元素

因此消費者在看這張圖片的時候，或多或少就會受到干擾

所以在設計的時候盡量不要把與商品本身無關的訊息，放在商品圖片旁邊

我們在實體的購物經驗跟線上的購物經驗相比，其實線上的技術已經非常進步，但兩者之間還是有非常大的鴻溝

例如在實體購物來講，眼 (可以看到)、耳 (聽到)、鼻 (聞到)、舌 (嘗到)、身 (觸摸)

但是在線上購物的購物經驗，僅能眼睛看到、耳朵聽到這兩個功能，因此要怎樣去彌補這兩者之間在購物間的差異性

我們只能使用圖片或影片，增強使用消費者的體驗與想像

例如說將商品穿在模特兒身上、跟只有一張商品圖的圖片相比，給人的感覺就會有很大的不同

例如下面這三張：

因此在呈現商品圖時，要盡量增加商品呈現的廣度

因此接下來要來看該怎麼設計商品圖片才能盡可能彌補與實體購物經驗上的鴻溝

1. 你的圖片一定要有可放大的功能，可看到商品細節

例如：

http://www.sephora.com/aburatorigami-japanese-beauty-papers-P382357?skuId=1375401

2. 必須要有情境照 (例如最上面有說的情境圖片)，將商品融入日常生活中的情境照

可以讓消費者知道商品該如何使用，並且清楚在使用中的狀況是怎樣，這樣的好處是可以讓消費者去想像使用這個商品時的情況

進而促使消費者有購買的慾望

例如：

https://www.betabrand.com/womens/skirts/womens-convertible-wrap-skirt-cape.html

3. 使用特寫照，表達材質與質感

也可以提供幾張商品特寫圖，讓消費者可以看到商品的細部材質，進而去想像觸摸之後的感覺

例如： 

http://www.made.com/ritchie-3-seater-sofa-ochre-yellow

4. 顯示商品的原型 (尺寸與比例)

消費者有時候可能很難可以從單張圖片上，去了解這個商品到底有多大或多小

因此一般我們會提供商品的尺寸資訊，假設有一個喇叭規格寫著 5.3 x 2.1 x 5 英吋

但看到這個規格還是很難想像實際商品的大小，因此我們可以在設計圖片時加上一些元素

例如：

https://www.supermagnete.de/eng/physics-magnets/bar-magnet-rectangular-short-60-x-15mm-alnico5_EDU-7?img=1

http://www.timbuk2.com/customizer#/product/18-custom-classic-messenger-bag/size/4

像上面的包包，就可以裝一些東西來讓消費者心理有底這個包包能裝多少東西、實際大概多大....之類的

如果商品是衣服，也可以讓模特兒穿上衣服並註明模特兒的身高，就可以讓消費者去想像這件商品的大小

5. 360度全覽

讓消費者可以去觀看商品的各個面相

例如：

http://www.bhphotovideo.com/c/product/847546-REG/Canon_5260B009_EOS_5D_Mark_III.html/prm/alsVwDtl

http://www.lowes.com/pd/Samsung-4-2-cu-ft-High-Efficiency-Stackable-Front-Load-Washer-with-Steam-Cycle-Merlot-ENERGY-STAR/50151504

6. 將商品融入客戶的生活

像下面這個網站

https://www.ae.com/women-aeo-sateen-x-jegging-jet-onyx/web/s-prod/0431_9356_322?cm=sTW-cTWD&catId=womens&origProdId=0431_9356_322&catId=cat7250010

鼓勵消費者把穿上去的生活照分享到網站上，其他消費者看到就會產生一些靈感

例如：如果是我穿起來會是什麼樣子，進而讓消費者對這個商品產生購買的慾望

其他例子：http://www.made.com/range-round-coffee-table-oak-and-brass

上面的商品是一個小桌子，網站提供上傳客戶家裡面擺設這個桌子的照片功能

其他消費者看到圖片心裡就會有：如果是我這個桌子要怎麼利用的想法，進而產生購買慾望

上傳照片在背後也有另一層的含意，願意上傳照片的客戶也等於間接的替你的商品背書

7. 利用影片來消彌距離感

有時候我們會利用上面所說的方式來設計圖片(例如特寫圖、情境照..等) 但對消費這來說還是會有些距離感

我們就可以使用影片去彌補與實體購物之間的一些距離感

例如下面這個網站影片：

https://www.bugaboo.com/US/en_US/strollers/bugaboo-bee3

就很清楚的表達了這個商品該怎麼使用、有什麼其他的功能.......等

那為什麼影片會有這麼大的功效呢? 底下有一些數據可以參考一下

71%市場經營者證實，影片比其他內容有較佳的轉換率

ps: 71%是 19% + 52%

96%消費者認為影片對線上購物的決定有幫助

多數商品頁含有影片的網站 有較高的轉換率

這個的意思是：

如果有A、B兩個網站，都各有1000張的商品頁，A 網站的1000個商品頁中有 800張含有影片

而B網站在1000個商品頁中，只有100個商品頁有影片，那網站A就會有比較高的轉換率

並且可以提高68%的AOV (平均訂單價值)

底下是資策會的研究，雖然是2013年但還是可以參考一下

影片之所以會有這麼大幫助的原因在於，影片是用流線型的方式來讓消費這了解商品

因此可以把消費者內心對於這個商品的一些疑惑解除，例如：他可能不知道該如何使用這個商品

透過影片的解釋就可以讓消費者對這個商品的疑惑解除

那針對商品而言，影片內容該怎麼去設計主要有底下三種

1. 介紹商品如何使用

參考網站：

https://www.bugaboo.com/US/en_US/strollers/bugaboo-bee3

http://shop.camelbak.com/2012-womens-powderbak/d/1197

2. 商品使用中情況

參考網站：

http://www.saksfifthavenue.com/main/ProductDetail.jsp?FOLDER%3C%3Efolder_id=2534374306418063&PRODUCT%3C%3Eprd_id=845524446861960&R=841109103809&P_name=Made+Gold&N=306418063+1556&bmUID=lc2OEEF

http://www.simplyhike.co.uk/products/TerraNova/QuasarETCTent.aspx

3. 教學式影片

參考網站：

http://video.advanceautoparts.com/v/10489/how-to-jump-start-a-car-battery-advance-auto-parts-autocraft/

一般影片的設計最好在30秒左右，但如果你的商品單價比較高或是商品功能比較複雜

那就可以把影片長度拉到 1~2分鐘左右，並且!!!

不要網頁一載入就自動播放影片，客戶會容易被嚇死並且會對你的網站有不好的觀感 

分享您喜愛的商品

分享到社群網站的功能幾乎每個電商網站都會有，但以下來比較一下幾個網站的設計

http://www.asos.com/New-Look/New-Look-Navy-Shirt-with-Yellow-Check/Prod/pgeproduct.aspx?iid=6219114&cid=3602&sh=0&pge=0&pgesize=36&sort=-1&clr=Navy&totalstyles=1173&gridsize=3

這個網站的分享按鈕是放在商品圖片的下方

http://www.dillards.com/p/daniel-wellington-classic-st-mawes-watch/505793380?di=04619380_zi&facetCache=pageSize%3D100%26beginIndex%3D0%26orderBy%3D1

這個網站是放在加入購物袋的下方

以這兩這網站來看，比較好的設計是放在商品圖片的下方，盡可能不要讓消費者在"購買"時受到干擾

故放在購物袋下方可能會有一個問題，當消費者想要購買時找到了 Add To Bag 按鈕

但看到了下方有個分享功能就分享到FB去了，然後就一直回留言之類的....下次回來不知道什麼時候了

此時購買行為就被中斷了，因此在加入購物車按鈕附近盡量不要放跟"購買"無關的功能

因為有可能會讓使用者分心

加入我的最愛

以這兩個網站來比較：

asos：

http://www.asos.com/women/tops/shirts-blouses/cat/pgecategory.aspx?cid=11318&wt.ac=ww%7cnav%7cshirtsblouses&via=top

neimanmarcus：

http://www.neimanmarcus.com/en-tw/Designer-Collections/Premier-Designer/cat000727_cat17740742_cat000001/c.cat

asos 的加入我的最愛，會將商品當作你有可能下次會買的商品，因此在購物車頁面下方會出現該區塊

neimanmarcus 的加入我的最愛，就真的是我的最愛清單，因此兩個網站設計邏輯上很不同

台灣有些電商網站會使用第一種 (當作你下次可能會購買的商品)，這種方式有一個問題

當你加入我的最愛的商品非常多的時候，整個購物車頁面會被拉到非常的長，雖然消費者可能不會在意

因為他們可能會專注在此次購買的商品上，但是會有一個這樣的問題存在

但是好處是可以直接從我的最愛清單中直接移到購買清單之中

兩種設計方式各有好壞，但neimanmarcus的設計偏向好的

因為下次再買的用意可能是因為

1. 想要等其他商品一起湊免運費

2. 這次預算不足，想要之後購買

意義跟我的最愛很不一樣，因此分開管理是比較好的方式

這篇因為本人破病寫超久，下一篇是迷你購物車與商品頁

END