以網站原型來確認需求 – 電子商務網站的購物動線規劃

UserXper Web User Experience – Planning / Training / Software

以網站原型來確認需求 –電子商務網站的購物動線規劃

悠識數位顧問有限公司UserXper Digital Consulting Co., Ltd.

Better user experience

Lower cost & risk

Richard Tsai

2010/1/19


Part 1.網路購物流程Survey

-2-


A. Yahoo購物流程

B. PCHOME購物流程

C. 博客來購物流程

D. Payeasy購物流程

E. DHC購物流程

G. 購物流程建議


A. Yahoo購物流程


Yahoo購物中心消費者

線上瀏覽商品我要購買

登入

選擇付款方式

ATM價刷卡價分期價

查看購物清單填寫付款人/收件資料

刷卡資料

訂購資料填寫完成

E-mail訂單確認

Yahoo購物中心訂購流程

3

1

2

4

5

6


2

1


3


4


5


完成訂購，取得訂單號碼(email/sms)

6


查詢訂單明細

After

取消訂單


B. PCHOME購物流程


PCHOME消費者

線上瀏覽商品立即訂購

購物清單

登入

ATM 刷卡貨到付款

購物清單填寫付款人/收件資料

訂購完成

E-mail訂單確認

PCHOME訂購流程

3

1

2

4

5

8開始結帳

閱讀購買條款

選擇付款方式

便利商店

6 輸入刷卡資料

7


1

2


3


4


5


6


完成訂單，出現訂單號碼7


C. 博客來購物流程


博客來消費者

線上瀏覽商品放入購物車

購物車明細

確認購物明細


選付款方式付款資料/收件資料

訂購完成

E-mail訂單確認

博客來訂購流程

3

1

2

4

5

8登入

最後確認訂購/付款資料

選擇付款方式

便利商店


7


博客來1

2


3


4


5


6


7


After訂單明細不出現在訂單明細不出現在訂單明細不出現在訂單明細不出現在email中中中中


After


D. Payeasy購物流程


Payeasy消費者

線上瀏覽商品下一步

確認身分,登入


購物清單,選付款方式

訂購完成

E-mail訂單確認

Payeasy訂購流程

3

1

2

4

7

確認訂購,填付款/收件資料

選擇付款方式

便利商店


6

登入


1

2


3


4


5


E. DHC購物流程


DHC消費者

線上瀏覽商品加入購物袋

確認加入購物袋

觀看購物袋明細

訂購完成

E-mail訂單確認

DHC訂購流程

3

1

2

4

5

11

結帳

選試用贈品

6

輸入刷卡資料

登入

觀看購物袋明細

填訂購人資料/送貨資料選擇付款方式

7

核對訂單資料8

10

9


1

2

3


4


5


6


7


8


G. 一般EC購物流程建議


Q網站消費者

線上瀏覽商品我要購買

選擇付款方式

ATM 超商付款線上刷卡

購物明細

訂購完成

E-mail訂單確認

訂購流程建議

3

1

2

4b

5

6登入

填寫訂購資料

輸入信用卡實體付款動作4a


Part 2.EC 購物流程Prototype 規劃

以 Axure RP 製作網站原型

-49-


A版. 直接利用金流代收公司的購物車

DEMO


B版. 仿Amazon的購物流程與介面

DEMO


C版. 動線精簡版

DEMO


以 Axure RP 畫出邏輯判斷流程


同場加演http://bingo.handlino.com/machines/3586

• 和多繽紛樂專案出包理由產生器


HP4 (Happy Project Manager) 網站企劃輕鬆聚第4次活動內容

1. 籌備中的後進者社群網站 +早餐店的案例分享，Adam 陳泓霖，訊南寬頻電信

2. 從行銷企劃轉戰網站企劃工作之歷程，Lillian 簡婉莉，雄獅旅行社/網站企劃

3. Kick off之後, 是專案的開始還是災難的開始，Robert Fan, 特洛伊製作公司 PM

4. 以網站原型來確認需求 – 電子商務網站的購物動線規劃，Richard Tsai, UseXper 首席資訊架構師

5. 讓網站企畫工作愉快的數位工具，李一詩, 比比王網站企劃

6. 進入UE領域，你必須認識的重要UI/UE機構及活動，Mumin Yu, 使用者經驗設計專家 UserXing Founder, 前BenQ Mobile UED Leader

本投影片-「以網站原型來確認需求 – 電子商務網站的購物動線規劃」著作權屬於悠識數位顧問有限公司。

其他HPx Slide：http://www.slideshare.net/Happy.Prototyper

以網站原型來確認需求 – 電子商務網站的購物動線規劃

Design