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

                       Richard Tsai
                       2010/1/19



                   Bet...
Part 1.
       網路購物流程Survey




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




UserXper   Web...
A. Yahoo購物流程




UserXper   Web User Experience – Planning / Training / Software
Yahoo購物中心訂購流程
           消費者                      Yahoo購物中心

       線上瀏覽商品                      1     我要購買


   6         ...
1


2




    UserXper   Web User Experience – Planning / Training / Software
3




    UserXper   Web User Experience – Planning / Training / Software
3




    UserXper   Web User Experience – Planning / Training / Software
4




    UserXper   Web User Experience – Planning / Training / Software
5




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




    UserXper   Web User Experience – Planning / Training / Software
After




                                         查詢訂單明細            取消訂單




        UserXper   Web User Experience – Pla...
B. PCHOME購物流程




UserXper   Web User Experience – Planning / Training / Software
PCHOME訂購流程
       消費者                               PCHOME

     線上瀏覽商品                      1       立即訂購


 8   E-mail訂單確...
1



2




    UserXper   Web User Experience – Planning / Training / Software
3




    UserXper   Web User Experience – Planning / Training / Software
4




    UserXper   Web User Experience – Planning / Training / Software
5




    UserXper   Web User Experience – Planning / Training / Software
6




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




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




UserXper   Web User Experience – Planning / Training / Software
博客來訂購流程
       消費者                              博客來

     線上瀏覽商品                    1       放入購物車


 8   E-mail訂單確認
      ...
1
                          博客來
2




    UserXper   Web User Experience – Planning / Training / Software
3




    UserXper   Web User Experience – Planning / Training / Software
4




    UserXper   Web User Experience – Planning / Training / Software
4




    UserXper   Web User Experience – Planning / Training / Software
5




    UserXper   Web User Experience – Planning / Training / Software
6




    UserXper   Web User Experience – Planning / Training / Software
7




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




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




UserXper   Web User Experience – Planning / Training / Software
Payeasy訂購流程
       消費者                             Payeasy

     線上瀏覽商品                    1           下一步

              ...
1


2




    UserXper   Web User Experience – Planning / Training / Software
3




    UserXper   Web User Experience – Planning / Training / Software
4




    UserXper   Web User Experience – Planning / Training / Software
5




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




UserXper   Web User Experience – Planning / Training / Software
DHC訂購流程
       消費者                            DHC

     線上瀏覽商品                    1       加入購物袋

                         ...
1



2




3




    UserXper   Web User Experience – Planning / Training / Software
4




    UserXper   Web User Experience – Planning / Training / Software
5




    UserXper   Web User Experience – Planning / Training / Software
6




    UserXper   Web User Experience – Planning / Training / Software
6




    UserXper   Web User Experience – Planning / Training / Software
7




    UserXper   Web User Experience – Planning / Training / Software
8




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




UserXper   Web User Experience – Planning / Training / Software
訂購流程建議
           消費者                              Q網站

       線上瀏覽商品                      1         我要購買


              ...
Part 2.
   EC 購物流程Prototype 規劃
    以 Axure RP 製作網站原型




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




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




                                                 DEMO

 UserXper   Web User Experience – Planning ...
C版. 動線精簡版




     DEMO

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




UserXper   Web User Experience – Planning / Training / Software
同場加演
 http://bingo.handlino.com/machines/3586

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




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

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

1.   籌備中的後進者社群網站 +早餐店的案例...
Upcoming SlideShare
Loading in …5
×

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

5,590 views

Published on

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

Published in: Design
1 Comment
27 Likes
Statistics
Notes
No Downloads
Views
Total views
5,590
On SlideShare
0
From Embeds
0
Number of Embeds
170
Actions
Shares
0
Downloads
350
Comments
1
Likes
27
Embeds 0
No embeds

No notes for slide

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

  1. 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. 2. Part 1. 網路購物流程Survey UserXper Web User Experience – Planning / Training / Software -2-
  3. 3. A. Yahoo購物流程 B. PCHOME購物流程 C. 博客來購物流程 D. Payeasy購物流程 E. DHC購物流程 G. 購物流程建議 UserXper Web User Experience – Planning / Training / Software
  4. 4. A. Yahoo購物流程 UserXper Web User Experience – Planning / Training / Software
  5. 5. Yahoo購物中心訂購流程 消費者 Yahoo購物中心 線上瀏覽商品 1 我要購買 6 2 登入 E-mail訂單確認 3 選擇付款方式 ATM價 刷卡價 分期價 4 查看購物清單 填寫付款人/收件資料 刷卡資料 5 訂購資料填寫完成 UserXper Web User Experience – Planning / Training / Software
  6. 6. 1 2 UserXper Web User Experience – Planning / Training / Software
  7. 7. 3 UserXper Web User Experience – Planning / Training / Software
  8. 8. 3 UserXper Web User Experience – Planning / Training / Software
  9. 9. 4 UserXper Web User Experience – Planning / Training / Software
  10. 10. 5 UserXper Web User Experience – Planning / Training / Software
  11. 11. 6 完成訂購,取得訂單號碼 (email/sms) UserXper Web User Experience – Planning / Training / Software
  12. 12. After 查詢訂單明細 取消訂單 UserXper Web User Experience – Planning / Training / Software
  13. 13. B. PCHOME購物流程 UserXper Web User Experience – Planning / Training / Software
  14. 14. PCHOME訂購流程 消費者 PCHOME 線上瀏覽商品 1 立即訂購 8 E-mail訂單確認 2 購物清單 開始結帳 3 登入 4 購物清單 填寫付款人/收件資料 選擇付款方式 ATM 刷卡 貨到付款 便利商店 5 閱讀購買條款 6 輸入刷卡資料 7 訂購完成 UserXper Web User Experience – Planning / Training / Software
  15. 15. 1 2 UserXper Web User Experience – Planning / Training / Software
  16. 16. 3 UserXper Web User Experience – Planning / Training / Software
  17. 17. 4 UserXper Web User Experience – Planning / Training / Software
  18. 18. 5 UserXper Web User Experience – Planning / Training / Software
  19. 19. 6 UserXper Web User Experience – Planning / Training / Software
  20. 20. 7 完成訂單,出現訂單號碼 UserXper Web User Experience – Planning / Training / Software
  21. 21. C. 博客來購物流程 UserXper Web User Experience – Planning / Training / Software
  22. 22. 博客來訂購流程 消費者 博客來 線上瀏覽商品 1 放入購物車 8 E-mail訂單確認 2 購物車明細 登入 3 確認購物明細 4 選付款方式 付款資料/收件資料 選擇付款方式 ATM 刷卡 貨到付款 便利商店 5 最後確認訂購/付款資料 6 輸入刷卡資料 7 訂購完成 UserXper Web User Experience – Planning / Training / Software
  23. 23. 1 博客來 2 UserXper Web User Experience – Planning / Training / Software
  24. 24. 3 UserXper Web User Experience – Planning / Training / Software
  25. 25. 4 UserXper Web User Experience – Planning / Training / Software
  26. 26. 4 UserXper Web User Experience – Planning / Training / Software
  27. 27. 5 UserXper Web User Experience – Planning / Training / Software
  28. 28. 6 UserXper Web User Experience – Planning / Training / Software
  29. 29. 7 UserXper Web User Experience – Planning / Training / Software
  30. 30. After 訂單明細不出現在email中 訂單明細不出現在 中 UserXper Web User Experience – Planning / Training / Software
  31. 31. After UserXper Web User Experience – Planning / Training / Software
  32. 32. D. Payeasy購物流程 UserXper Web User Experience – Planning / Training / Software
  33. 33. Payeasy訂購流程 消費者 Payeasy 線上瀏覽商品 1 下一步 2 確認身分,登入 7 E-mail訂單確認 登入 3 購物清單, 選付款方式 選擇付款方式 ATM 刷卡 貨到付款 便利商店 4 確認訂購,填付款/收件資料 5 輸入刷卡資料 6 訂購完成 UserXper Web User Experience – Planning / Training / Software
  34. 34. 1 2 UserXper Web User Experience – Planning / Training / Software
  35. 35. 3 UserXper Web User Experience – Planning / Training / Software
  36. 36. 4 UserXper Web User Experience – Planning / Training / Software
  37. 37. 5 UserXper Web User Experience – Planning / Training / Software
  38. 38. E. DHC購物流程 UserXper Web User Experience – Planning / Training / Software
  39. 39. DHC訂購流程 消費者 DHC 線上瀏覽商品 1 加入購物袋 2 確認加入購物袋 11 E-mail訂單確認 3 觀看購物袋明細 結帳 4 登入 5 觀看購物袋明細 6 填訂購人資料/送貨資料 選擇付款方式 7 選試用贈品 8 核對訂單資料 9 輸入刷卡資料 UserXper 10 訂購完成 Web User Experience – Planning / Training / Software
  40. 40. 1 2 3 UserXper Web User Experience – Planning / Training / Software
  41. 41. 4 UserXper Web User Experience – Planning / Training / Software
  42. 42. 5 UserXper Web User Experience – Planning / Training / Software
  43. 43. 6 UserXper Web User Experience – Planning / Training / Software
  44. 44. 6 UserXper Web User Experience – Planning / Training / Software
  45. 45. 7 UserXper Web User Experience – Planning / Training / Software
  46. 46. 8 UserXper Web User Experience – Planning / Training / Software
  47. 47. G. 一般EC購物流程建議 UserXper Web User Experience – Planning / Training / Software
  48. 48. 訂購流程建議 消費者 Q網站 線上瀏覽商品 1 我要購買 2 購物明細 6 E-mail訂單確認 登入 3 填寫訂購資料 選擇付款方式 ATM 超商付款 線上刷卡 4b 4a 實體付款動作 輸入信用卡 5 訂購完成 UserXper Web User Experience – Planning / Training / Software
  49. 49. Part 2. EC 購物流程Prototype 規劃 以 Axure RP 製作網站原型 UserXper Web User Experience – Planning / Training / Software -49-
  50. 50. A版. 直接利用金流代收公司的購物車 DEMO UserXper Web User Experience – Planning / Training / Software
  51. 51. B版. 仿Amazon的購物流程與介面 DEMO UserXper Web User Experience – Planning / Training / Software
  52. 52. C版. 動線精簡版 DEMO UserXper Web User Experience – Planning / Training / Software
  53. 53. 以 Axure RP 畫出邏輯判斷流程 UserXper Web User Experience – Planning / Training / Software
  54. 54. 同場加演 http://bingo.handlino.com/machines/3586 • 和多繽紛樂 專案出包理由產生器 UserXper Web User Experience – Planning / Training / Software
  55. 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

×