HP4 網站企劃輕鬆聚的分享主題之一 http://userxper.com/courses/events/hp4

1. 以網站原型來確認需求 –
電子商務網站的購物動線規劃
Richard Tsai
2010/1/19
Better user experience
Lower cost & risk
悠識數位顧問有限公司
UserXper Digital Consulting Co., Ltd.
UserXper Web User Experience – Planning / Training / Software

2. Part 1.
網路購物流程Survey
UserXper Web User Experience – Planning / Training / Software -2-

3. A. Yahoo購物流程
B. PCHOME購物流程
C. 博客來購物流程
D. Payeasy購物流程
E. DHC購物流程
G. 購物流程建議
UserXper Web User Experience – Planning / Training / Software

4. A. Yahoo購物流程
UserXper Web User Experience – Planning / Training / Software

5. Yahoo購物中心訂購流程
消費者 Yahoo購物中心
線上瀏覽商品 1 我要購買
6 2 登入
E-mail訂單確認
3 選擇付款方式
ATM價 刷卡價 分期價
4 查看購物清單
填寫付款人/收件資料
刷卡資料
5 訂購資料填寫完成
UserXper Web User Experience – Planning / Training / Software

6. 1
2
UserXper Web User Experience – Planning / Training / Software

7. 3
UserXper Web User Experience – Planning / Training / Software

8. 3
UserXper Web User Experience – Planning / Training / Software

9. 4
UserXper Web User Experience – Planning / Training / Software

10. 5
UserXper Web User Experience – Planning / Training / Software

11. 6 完成訂購，取得訂單號碼
(email/sms)
UserXper Web User Experience – Planning / Training / Software

12. After
查詢訂單明細 取消訂單
UserXper Web User Experience – Planning / Training / Software

13. B. PCHOME購物流程
UserXper Web User Experience – Planning / Training / Software

14. PCHOME訂購流程
消費者 PCHOME
線上瀏覽商品 1 立即訂購
8 E-mail訂單確認
2 購物清單
開始結帳
3 登入
4 購物清單
填寫付款人/收件資料
選擇付款方式
ATM 刷卡 貨到付款 便利商店
5 閱讀購買條款
6
輸入刷卡資料
7
訂購完成
UserXper Web User Experience – Planning / Training / Software

15. 1
2
UserXper Web User Experience – Planning / Training / Software

16. 3
UserXper Web User Experience – Planning / Training / Software

17. 4
UserXper Web User Experience – Planning / Training / Software

18. 5
UserXper Web User Experience – Planning / Training / Software

19. 6
UserXper Web User Experience – Planning / Training / Software

20. 7
完成訂單，出現訂單號碼
UserXper Web User Experience – Planning / Training / Software

21. C. 博客來購物流程
UserXper Web User Experience – Planning / Training / Software

22. 博客來訂購流程
消費者 博客來
線上瀏覽商品 1 放入購物車
8 E-mail訂單確認
2 購物車明細
登入
3 確認購物明細
4 選付款方式
付款資料/收件資料
選擇付款方式
ATM 刷卡 貨到付款 便利商店
5 最後確認訂購/付款資料
6
輸入刷卡資料
7
訂購完成
UserXper Web User Experience – Planning / Training / Software

23. 1
博客來
2
UserXper Web User Experience – Planning / Training / Software

24. 3
UserXper Web User Experience – Planning / Training / Software

25. 4
UserXper Web User Experience – Planning / Training / Software

26. 4
UserXper Web User Experience – Planning / Training / Software

27. 5
UserXper Web User Experience – Planning / Training / Software

28. 6
UserXper Web User Experience – Planning / Training / Software

29. 7
UserXper Web User Experience – Planning / Training / Software

30. After
訂單明細不出現在email中
訂單明細不出現在 中
UserXper Web User Experience – Planning / Training / Software

31. After
UserXper Web User Experience – Planning / Training / Software

32. D. Payeasy購物流程
UserXper Web User Experience – Planning / Training / Software

33. Payeasy訂購流程
消費者 Payeasy
線上瀏覽商品 1 下一步
2 確認身分,登入
7 E-mail訂單確認
登入
3 購物清單,
選付款方式
選擇付款方式
ATM 刷卡 貨到付款 便利商店
4 確認訂購,填付款/收件資料
5 輸入刷卡資料
6
訂購完成
UserXper Web User Experience – Planning / Training / Software

34. 1
2
UserXper Web User Experience – Planning / Training / Software

35. 3
UserXper Web User Experience – Planning / Training / Software

36. 4
UserXper Web User Experience – Planning / Training / Software

37. 5
UserXper Web User Experience – Planning / Training / Software

38. E. DHC購物流程
UserXper Web User Experience – Planning / Training / Software

39. DHC訂購流程
消費者 DHC
線上瀏覽商品 1 加入購物袋
2 確認加入購物袋
11 E-mail訂單確認 3 觀看購物袋明細
結帳
4 登入
5 觀看購物袋明細
6 填訂購人資料/送貨資料
選擇付款方式
7 選試用贈品
8 核對訂單資料
9 輸入刷卡資料
UserXper 10 訂購完成
Web User Experience – Planning / Training / Software

40. 1
2
3
UserXper Web User Experience – Planning / Training / Software

41. 4
UserXper Web User Experience – Planning / Training / Software

42. 5
UserXper Web User Experience – Planning / Training / Software

43. 6
UserXper Web User Experience – Planning / Training / Software

44. 6
UserXper Web User Experience – Planning / Training / Software

45. 7
UserXper Web User Experience – Planning / Training / Software

46. 8
UserXper Web User Experience – Planning / Training / Software

47. G. 一般EC購物流程建議
UserXper Web User Experience – Planning / Training / Software

48. 訂購流程建議
消費者 Q網站
線上瀏覽商品 1 我要購買
2 購物明細
6 E-mail訂單確認
登入
3 填寫訂購資料
選擇付款方式
ATM 超商付款 線上刷卡
4b
4a 實體付款動作 輸入信用卡
5 訂購完成
UserXper Web User Experience – Planning / Training / Software

49. Part 2.
EC 購物流程Prototype 規劃
以 Axure RP 製作網站原型
UserXper Web User Experience – Planning / Training / Software -49-

50. A版. 直接利用金流代收公司的購物車
DEMO
UserXper Web User Experience – Planning / Training / Software

51. B版. 仿Amazon的購物流程與介面
DEMO
UserXper Web User Experience – Planning / Training / Software

52. C版. 動線精簡版
DEMO
UserXper Web User Experience – Planning / Training / Software

53. 以 Axure RP 畫出邏輯判斷流程
UserXper Web User Experience – Planning / Training / Software

54. 同場加演
http://bingo.handlino.com/machines/3586
• 和多繽紛樂 專案出包理由產生器
UserXper Web User Experience – Planning / Training / Software

55. 本投影片-「以網站原型來確認需求 – 電子商務網站的購物動線規劃 」
著作權屬於 悠識數位顧問有限公司。
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
UserXper Web User Experience – Planning / Training / Software