這樣設計就對了!電子商務網站使用者經驗設計(第二版)

CHAPTER 1 電子商務發展的趨勢
1-1 持續走向跨境全球化
1-2 行動裝置已經成為電子商務的銷售主流
1-3 全通路的一體全觀
1-4 運用AR和VR技術

CHAPTER 2 首頁扮演網站嚮導的獨特角色
2-1 了解不同裝置的使用情境
2-2 網站內容需滿足不同類型的線上消費者
2-3 網站的嚮導
2-4 建構設計良好的首頁
2-5 搜尋是購物經驗的一部分
2-6 好的導覽系統帶您找到所需要的內容
2-7 消費者買的不只是商品
2-8 吸引目光、擄獲人心的大主圖（Hero image）
2-9 讓消費者知道輪播幻燈片（Rotating Banners）的內容
2-10 提供多樣化的內容
2-11 善用頁尾獨特的價值
2-12 重要概念
2-13 一體全觀使用者經驗設計

CHAPTER 3 提供靈感的類別頁
3-1 主動式邀約設計
3-2 多個層級的類別分類
3-3 類別頁的頁面設計
3-4 提供生活靈感的主類別頁
3-5 建立快速找到商品的商品清單頁
3-6 區域導覽選單提供商品種類的資訊
3-7 麵包屑導覽提供消費者所在的資訊
3-8 篩選器眼裡出西施
3-9 排序模式提高瀏覽效率
3-10 依資訊需求提供不同瀏覽模式
3-11 清楚明確的商品資訊
3-12 同時比較多個類似商品
3-13 重要概念
3-14 完形心理學知覺法則的妙用

CHAPTER 4 建立具有說服力的商品頁
4-1 商品頁的第一印象
4-2 商品呈現的廣度和深度
4-3 商品概觀
4-4 建立清楚的商品採買區
4-5 消費者想要知道商品詳情
4-6 可以考慮Spaghetti麵條或是搭配的番茄醬
4-7 最近瀏覽過商品
4-8 重要概念
4-9 視覺設計上的溝通
4-10 範例說明

CHAPTER 5 打造完美的購物車
5-1 讓消費者知道商品已經加入購物車了
5-2 由消費者自行決定下一個步驟要去哪裡
5-3 購物車的介面設計
5-4 購物車裡的商品跑去哪裡了
5-5 重要概念

CHAPTER 6 建置多功能的購物車頁
6-1 購物車頁的設計
6-2 購物清單明細的設計要素
6-3 重要概念

CHAPTER 7 結帳流程最佳化
7-1 結帳的流程
7-2 結帳流程最佳化
7-3 配送
7-4 付款
7-5 建立隱形的「Pay」流程
7-6 提高客戶黏著度的感謝頁
7-7 結帳流程的總觀
7-8 重要概念
7-9 善用正確的表單控制項元素
7-10 元素上的一體全觀

CHAPTER 8 個案研究：蝦皮滋潤了PChome的幼苗
8-1 PChome 24h購物網站首頁
8-2 蝦皮購物網站首頁
8-3 PChome 24h購物網站類別頁
8-4 蝦皮購物網站類別頁
8-5 PChome 24h購物網站商品頁
8-6 蝦皮購物網站商品頁
8-7 PChome 24h購物網站購物車
8-8 蝦皮購物網站購物車
8-9 PChome 24h購物網站購物車頁
8-10 蝦皮購物網站購物車頁
8-11 PChome 24h購物網站結帳流程
8-12 蝦皮購物網站結帳流程

 

前言

　　隨著網路技術的日增月益，電子商務的銷售規模也越來越大，如何結合線上購物與實體店面之間的購物經驗，一直是電子商務網站努力的目標。本書中會探索消費者在線上的購物經驗，剖析他們的行為模式，來探究如何設計一個貼近使用者經驗，以及如何提高轉換率的電子商務網站。

　　使用者經驗設計要貼近使用者的需求，最好的方式之一，就是讓自己成為使用上的消費者，去體驗使用者在使用上的痛點，而不是只站在外面，看看裡面發生了什麼事；當您轉為實際消費者時，才會有深刻的體驗，發現觀察者看不到的地方，就如同X光的立場，當它看到人的時候，只見骨頭不見皮肉；然而就人的角度而言，當看到人的時候，只見皮肉不見骨頭。

　　除此之外，增加生活經驗的厚度絕對是有幫助，這邊的厚度包含廣度與深度變化；以及訓練自己講話時少用「我」字，如果一個人常常講話都帶「我」字，這個人肯定自我為觀點的意識很強烈，永遠住在相對較量上，當他說「我聽您講」，表示他只想聽他想聽的，想聽的聽進去，不想聽的自動聽出去。這些方式都可以提升您的使用者經驗設計。

　　書中分類的方式是以首頁、類別頁、商品頁、購物車、購物車頁和結帳流程為順序性。所使用的研究數據，以台灣的統計資料為優先，如果找不到公開的資料，則改用國外的資料作為參考。書中的範例網站，大都以英國和美國的網站為主軸，台灣和澳洲的網站次之。為什麼不以台灣的網站為主，當大家都在同一個有限量的範疇內做思維時，設計出來的東西，它的同質性就很高，變化性也不大，這就是台灣網站整體的特性。

　　為了拓展不同的設計思維，書中總共使用了169個範例網站，而且橫跨不同的產業類型，從這些範例中，我們可以同時學習到這169位設計師的思維邏輯，有的很有深度，有的很有廣度，有的深度、廣度兼備，有的只有淺層面的設計思維。在學習上考量可能會有語言上隔閡，所有的範例都會將重要元素解成中文，讓讀者貼近原設計，了解有哪些特點值得學習，有哪些地方需要做調整會更好。

　　在部分章節的後面，都有一篇設計專欄，專欄的內容是用來提升設計概念的基本功，內容包含使用者經驗設計、完形心理學知覺法則、視覺設計溝通和表單元素的啟用，每一個專欄既各自獨立，彼此之間又串聯在一起。在完形心理學知覺法則的範例網站，有來自於泰國、印尼、荷蘭、俄羅斯、韓國等，其用意在於培養讀者們的觀看能力，語言只是一個符號，即使您不懂該國的語言，也應該要能看懂它想要傳達的含意。

　　最後一個章節是關於介面的剖析，透過解說PChome網站和蝦皮網站的使用者介面，來學習與應用設計的思維邏輯。每一個章節的最後，都會列出範例網站的網址給讀者參考。

　　在您閱讀這本書之前，可能已經通曉很多設計的原則性、概念性或邏輯性，這些內容可能來自於過去學校的教育，職場的社會教育，或是書本、網路上學習到的知識；然而這些內容都不是真理，包含本書所分享的任何方法，都只是一時，並不會永恆不變，如果您只是守著過去別人講的東西，那您的思維永遠被牽著走，一直落入在別人的框架與思想範疇裡面。

　　這些原則性、概念性或邏輯性，它們是可以被打破、被轉換，您可以重組自己的原則性，蓋在它的上面或是根據不同的人、事、物、主客觀因素、時空背景給予重新詮釋，附予更加圓滿的涵蓋性與運用。因此，大膽地去改變它、超越它，提升和擴量這些內容的不足性，或是它沒有關照的地方。

　　字詞使用說明

　　在設計網站時，網站上的每一張網頁都有其主要的性質，它可以用來幫助設計師，去檢視頁面上的設計是否恰當，其性質可以分為「導覽」、「消費」和「互動」三大類。

　　• 導覽：頁面上提供眾多的選項讓消費者選擇，然後在把他們送往下一個目的地。

　　• 消費：頁面上提供消費者所需的完整內容，讓他們充分瞭解商品/服務的資訊。

　　• 互動：消費者透過頁面上的介面，來了解更多的資訊，或是完成所需的目的。

　　每一張網頁只會有一個很明顯的主要性質，但是有時也會包含其它的次要性質。書中的每一個章節，都會先標出該類別的網頁性質，第一個是主要性質，其後才接次要性質。

　　• 「消費者」與「使用者」：書中使用「消費者」一詞，來泛指瀏覽電子商務網站的人，「使用者」一詞來泛指瀏覽沒有交易機制網站的人。

　　• 「使用者經驗」與「使用者體驗」：這二個詞在英文上都是指User Experience，書中會混合使用這二個詞，取決於文詞上的順暢度。

　　感謝

　　有幸在職場上結識到的同事和朋友，在網路上默默貢獻智慧與創意的設計師，以及投入使用者行為研究與分析的專家們，人生中如果沒有這些人的參與，這本書將無法實現。感謝深石數位科技編輯團隊，和Terisa設計師的幫忙，指導如何規畫與製作，讓這本書能夠如期的完成。

　　本書中所有圖像請勿移作它用，不得掃描輸出、翻印而散播傳布、或作其它商業用途之用。

推薦序1

前Corel數位媒體產品部門副總　王維麟

　　初夏午後，我在華山1914再度與James相遇，一樣的沉著自信，一樣的目光炯炯，在滿室書牆的咖啡屋，我聽著James的故事，如同每個電子商務產品背後都有個故事，James帶領著我走入充滿設計氣味的世界，我們開始對話，James有時像一位大師，但不一會兒又變成一位精靈，穿梭走跳，我這才領悟到，他正在引導我走入使用者經驗的歷程。

　　James是我之前在Corel的同事，負責產品的使用者經驗設計，以Corel這類消費軟體大廠來說，產品有縱深，路線夠寬廣，這絕對是消費者經驗試驗中千載難逢的戰場，James秉其設計專業，默默地建立起他在使用者經驗設計領域雄厚的實務經驗；有感於台灣使用者經驗人才之缺乏，James毅然走出業者界，轉而投入了研究教學的工作，幾年下來，教育出為數不少現今設計業中的菁英，然而，教學所能影響的設計者有限，James於是興起了出書的念頭，期望數年來實務經驗及研究心得能讓台灣的使用者經驗設計跟上國際腳步，讓台灣能成為真正的設計體驗大國。

　　在本書中，James提供了大量的範例，在行動商務流行的今天，除了一般網頁版面之外，另外加強了手機版的比較，其間運用了美學、設計學、行為心理學、數據分析等，巨細靡遺地剖析了消費者行為，以及設計者常犯的錯誤，隨著網路工具的進步，有許多以前難以做到的功能，現在都已逐步成型，其中又以互動功能最能帶來驚喜，這幾年來流行線上線下的互動行銷，帶給了消費者豐富的購物體驗，也強化了業主與消費者之間的溝通模式，不過，James也指出了盲點，對消費者而言，實體和虛擬的通路均為使用者體驗的一環，必須視為一體，不能因為自己是電子商城，就忽略了線下通路的經營。

　　我們常聽到音樂是沒有國界的，其實好的設計同樣也是沒有國界的，許多好的網頁設計，是超越文字隔閡的，James書中有一句話說得非常好，「消費者在瀏覽網頁時，不會在乎設計師用的是哪一門必殺設計絕技，他們只求好的瀏覽體驗。」

　　這幾年來，由於網路商城的競爭，以單純線上購物要贏得新客戶的青睞，成本已是越來越高，與其搶時效、免運費、互挖牆腳等兩敗俱傷的做法，還不如好好檢視自身電子商務的使用者經驗；我相信大家都有經驗，在看台灣的電視新聞報導時，主螢幕顯示條列式新聞訊息，下面兩排跑馬燈，左邊再加垂直字幕，讓你眼睛都不知道該放哪裡，如果把同樣邏輯放在購物網站上，消費者同樣的不知從何下手，這樣的體驗會好嗎？要留住消費者則更是一種奢求，James給我看了台灣某大購物網站十年前和現今入口網頁的比對，我驚覺這十年來這個主頁幾乎沒有什麼變化，基本上就是百花齊放式的布局，讓你看了之後會有一種想立刻逃離此地的感覺，這類使用者經驗貧乏的電子商城之所以業績疲弱，屢屢被競爭對手超越，是沒什麼好驚訝的，James也偷偷告訴我，他出書背後的一個強烈動機，就是他實在看不下去許多台灣的電子商城是如此地輕忽消費者體驗，他希望經過本書的推廣，能喚起人們對使用者經驗的體認。

　　時間似乎暫停在午後的這間咖啡屋，James像是介紹老朋友似的，讓我走進了他和他使用者經驗的故事，不知不覺中，咖啡都涼了；本書巧妙地將觀察、思考、分析融入到設計的元素之中，挑戰傳統，開創新局，我在James高瘦的身軀下看到執著，熱切的眼光中看到希望，我誠摯地向大家推薦這本書！

推薦序2

遊石設計創辦人　張群儀

　　在我們日常生活中的許多設計，重點不在於物件的產出，而在於體驗的營造。當我們購買大件小件的商品，這一整個消費流程實際上涵蓋了認知、購買、使用、與回饋各個層面。過程中的認知感受無非就是「使用者體驗」。以當下趨勢和科技的普及性來說，電子商務的銷售比重持續上揚，在整體消費體驗的前期，扮演了非常重要的角色。回顧我們網路購物的經驗，從產生購物動機的那一刻開始，我們透過網路進行搜尋、瀏覽、比較、下單，然後物流送貨，一連串線上線下O2O的銜接與整合，才讓消費者得以快樂享用。在跨國跨境平台激烈的全球化競爭下，各路好漢不得不各顯神通，提供最佳的服務來吸引顧客。有別於傳統銷售渠道，地點與人潮已經不是成功的保證。誰能夠提供更好的線上體驗才能夠聚集網路人潮、提昇轉換率，並成為最後的贏家。據此，電子商務網站的設計，更應該針對消費者行為模式來理解，從動機來進行設計，並簡化購

　　物決策流程。如同作者所言，消費者具有五種類型：研究型消費者、優閒瀏覽型、交易型、社群購物型與衝動型。即使無法「千人千面」地全面客製化，也要能夠透過引導、功能與內容配置的適當表現，來符合不同類型的需要。回想一下自己過往的購物經驗，何嘗不是在不同的角色特性中切換？此時網站是否提供了我們最需要的工具，好讓我們完成任務呢？作為一個網路銷售平台，好的介面設計就如同是好的櫥窗、好的門面、好的氛圍、好的銷售員、與好的服務。如何透過設計來打造完美的電商，「設計模式」是一個有效的途徑，模式語彙的應用得以讓設計者以既有的「設計語言」與「互動模式」增強設計專業的深度。本書寫作透過電商功能性頁面分類，逐一解說其設計重點。各章節內容說明和應用範例深入淺出，電腦與手機設計原則齊頭並進。更加難得的是理論與實務相輔相成不偏廢，在心理學與人因工程學研究的佐證下，打破了設計的黑箱，讓我們得以一窺電子商務網站的堂奧。於是設計，我們知其然更知其所以然。