View
4.587
Download
2
Category
Preview:
DESCRIPTION
HP4 網站企劃輕鬆聚的分享主題之一 http://userxper.com/courses/events/hp4
Citation preview
UserXper Web User Experience – Planning / Training / Software
以網站原型來確認需求 –電子商務網站的購物動線規劃
悠識數位顧問有限公司UserXper Digital Consulting Co., Ltd.
Better user experience
Lower cost & risk
Richard Tsai
2010/1/19
UserXper Web User Experience – Planning / Training / Software
Part 1.網路購物流程Survey
-2-
UserXper Web User Experience – Planning / Training / Software
A. Yahoo購物流程
B. PCHOME購物流程
C. 博客來購物流程
D. Payeasy購物流程
E. DHC購物流程
G. 購物流程建議
UserXper Web User Experience – Planning / Training / Software
A. Yahoo購物流程
UserXper Web User Experience – Planning / Training / Software
Yahoo購物中心消費者
線上瀏覽商品 我要購買
登入
選擇付款方式
ATM價 刷卡價 分期價
查看購物清單填寫付款人/收件資料
刷卡資料
訂購資料填寫完成
E-mail訂單確認
Yahoo購物中心訂購流程
3
1
2
4
5
6
UserXper Web User Experience – Planning / Training / Software
2
1
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
完成訂購,取得訂單號碼(email/sms)
6
UserXper Web User Experience – Planning / Training / Software
查詢訂單明細
After
取消訂單
UserXper Web User Experience – Planning / Training / Software
B. PCHOME購物流程
UserXper Web User Experience – Planning / Training / Software
PCHOME消費者
線上瀏覽商品 立即訂購
購物清單
登入
ATM 刷卡 貨到付款
購物清單填寫付款人/收件資料
訂購完成
E-mail訂單確認
PCHOME訂購流程
3
1
2
4
5
8開始結帳
閱讀購買條款
選擇付款方式
便利商店
6 輸入刷卡資料
7
UserXper Web User Experience – Planning / Training / Software
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
博客來消費者
線上瀏覽商品 放入購物車
購物車明細
確認購物明細
ATM 刷卡 貨到付款
選付款方式付款資料/收件資料
訂購完成
E-mail訂單確認
博客來訂購流程
3
1
2
4
5
8登入
最後確認訂購/付款資料
選擇付款方式
便利商店
6 輸入刷卡資料
7
UserXper Web User Experience – Planning / Training / Software
博客來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中中中中
UserXper Web User Experience – Planning / Training / Software
After
UserXper Web User Experience – Planning / Training / Software
D. Payeasy購物流程
UserXper Web User Experience – Planning / Training / Software
Payeasy消費者
線上瀏覽商品 下一步
確認身分,登入
ATM 刷卡 貨到付款
購物清單,選付款方式
訂購完成
E-mail訂單確認
Payeasy訂購流程
3
1
2
4
7
確認訂購,填付款/收件資料
選擇付款方式
便利商店
5 輸入刷卡資料
6
登入
UserXper Web User Experience – Planning / Training / Software
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消費者
線上瀏覽商品 加入購物袋
確認加入購物袋
觀看購物袋明細
訂購完成
E-mail訂單確認
DHC訂購流程
3
1
2
4
5
11
結帳
選試用贈品
6
輸入刷卡資料
登入
觀看購物袋明細
填訂購人資料/送貨資料選擇付款方式
7
核對訂單資料8
10
9
UserXper Web User Experience – Planning / Training / Software
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網站消費者
線上瀏覽商品 我要購買
選擇付款方式
ATM 超商付款 線上刷卡
購物明細
訂購完成
E-mail訂單確認
訂購流程建議
3
1
2
4b
5
6登入
填寫訂購資料
輸入信用卡實體付款動作4a
UserXper Web User Experience – Planning / Training / Software
Part 2.EC 購物流程Prototype 規劃
以 Axure RP 製作網站原型
-49-
UserXper Web User Experience – Planning / Training / Software
A版. 直接利用金流代收公司的購物車
DEMO
UserXper Web User Experience – Planning / Training / Software
B版. 仿Amazon的購物流程與介面
DEMO
UserXper Web User Experience – Planning / Training / Software
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 / Software
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
Recommended