Embed Size (px)
DESCRIPTION
提高轉換率 – 令人心動的行為召喚設計
Citation preview
提⾼高轉換率 – 令⼈人⼼心動的⾏行為召喚設計Hans - 20141002 @ HPX Life
Photo Credit：simpleinsomnia/ http://goo.gl/JMeb38
ERP 系統、網站、電信網路監控
使⽤用者經驗
物流管理系統
⼈人⼒力派遣管理系統
項⺫⽬目管理報告系統
供貨商信息查詢系統
內部教育訓練講師
新⼈人招募與教育訓練
電信網絡成本管理系統
電信網管⼯工作管理系統
電信障礙告修管理系統
客⼾戶IP管理系統
員⼯工數據管理系統
網路中⼼心⼯工作流程模塊建置
ＩＰＶＰＮ網絡實時監控系統
ＶＤＳＬ網絡實時監控系統
客⼾戶數據管理系統
質性研究
量性研究
＋
程式設計
＋ 設計
使⽤用者經驗
程式設計 興
趣探索
ＵＸ學習
轉職
對⼈人與設計有濃厚的興趣，往使⽤用者經驗發展
Player Experience!三個部分、兩個⺫⽬目標
網站分析 遊戲數據
體驗研究
網站分析 遊戲數據
體驗研究
1. 滿意度!Satisfaction
網站分析 遊戲數據
體驗研究
2. 轉換率!Conversion
Player Experience!遊戲⽣生命歷程＆⼯工作項⺫⽬目
Players
形象官網
正式官網
Time
營運活動
ＣＢ前 CB OB/正式上市
遊戲改版
活動網⾴頁
營運活動
遊戲改版
活動網⾴頁
網站分析：Google Analytics
體驗研究：滿意度、Kano Model、玩家訪談、易⽤用性測試、情感研究
遊戲數據：分析 ARPU、流失率、⽇日活躍、同上⼈人數 etc.
準備期 成⻑⾧長期 成熟期 衰退期 瀕死期
遊戲⽣生命歷程＆⼯工作項⺫⽬目
Online 的 Call To Action：網站設計!Offline 的 Call To Action：實體活動
專案經理 Developer
設計師 Copywriter
UXer
打雜＝⽼老闆
⾏行銷
今⽇日參加者職業組成
顧問
今天的分享主軸是!Online 的 Call To Action!
Offline 的 Call To Action
⾸首先為您介紹 4 個重要的概念
適⽤用於提升轉換率、⾏行為召喚、網站設計
1. 了解商業要什麼
Business
商業要什麼! $_$，要利潤、要轉換率
儲值
下載/安裝訂閱
試⽤用
購買
註冊
廣告捐款 常⾒見轉換率!Conversion
儲值
下載/安裝訂閱
試⽤用
購買
註冊
廣告捐款 內容網站轉換率!Conversion
儲值
下載/安裝訂閱
試⽤用
購買
註冊
廣告捐款 NPO轉換率!Conversion
儲值
下載/安裝訂閱
試⽤用
購買
註冊
廣告捐款 購物網站轉換率!Conversion
儲值
下載/安裝訂閱
試⽤用
購買
註冊
廣告捐款 SaaS轉換率!Conversion
儲值
下載/安裝訂閱
試⽤用
購買
註冊
廣告捐款 遊戲轉換率!Conversion
Business
什麼是你的轉換指標，順序是什麼!除了指標以外，還需要了解什麼
Business
了解網站背後的商業邏輯 • 網站類型 • 網站⺫⽬目的 • 提供什麼資訊 • 提供什麼價值 • 希望引發什麼情緒（品牌） • 想要使⽤用者停留多久 • 想要使⽤用者看多少⾴頁 • 使⽤用者離開後該做什麼 • 想要使⽤用者達成什麼任務
2. 了解使⽤用者/⺫⽬目標消費群
User
試試看⽤用 5W1H 描述你的使⽤用者!Who Why What When Where How
User
了解螢幕前⾯面的使⽤用者 • 前提知識（知道什麼） • 動機是什麼 • ⺫⽬目的是什麼 • 期待是什麼 • 當下的情緒 • 習慣（如何創造習慣） • 使⽤用者進來前上⼀一⾴頁是什麼 • 使⽤用者離開後想做什麼 • 使⽤用者想完成的任務是什麼
User 轉換
了解使⽤用者!創造需求、改變觀點、啟動轉換
如果是新品牌 / 新創公司 通常客⼾戶會像這樣
… 你在跟我說話嗎
我不知道你是誰 我不認識你的公司 我不知道你公司的產品 我不知道你公司代表什麼 我不知道你公司客⼾戶是誰 我不知道你公司的歷史 我不知道你公司的聲譽 現在，你說你想要賣我什麼？
3. 了解誰在服務⽤用⼾戶
UserBusiness
Business、User 跟網站的關係
網站
我們⽤用 Don Norman 的 Mental Model 來解釋
Don Norman 唐·諾曼
美國認知科學，⼈人因⼯工程等設計領域的著名學者，曾被《商業週刊》雜誌評選為世紀最有影響⼒力的設計師之⼀一 - Wiki
設計&⽇日常⽣生活 情感化設計
Don Norman：Mental Model
設計師實現商業邏輯、透過網站服務⽤用⼾戶、滿⾜足⽤用⼾戶需求
UserBusiness
網站
設計師 使⽤用者
網站
設計師不直接服務⽤用⼾戶、服務⽤用⼾戶的是網站
網站可以分成三個層次
3. 拼裝出來的科學怪⼈人低智能
⾼高智能
2. ⼀一問⼀一答的機器⼈人
1. 貼⼼心的美⼥女服務⽣生
如果網站是⼀一個⼈人，您會希望誰來服務
如果“我的 E 政府”是⼀一個⼈人的話 您覺得它是個怎樣的⼈人
您覺得這個網站是：
您覺得這個網站是：
每⼀一次踏進網站，都是⼀一次 Branding
設計師
您會希望由誰來服務客⼾戶？!誰來服務⽐比較容易成交，有轉換？
使⽤用者
4. 學習以使⽤用者的觀點去看網站
我們都希望能夠將好的設計傳達給使⽤用者!但經常事與願違
造成設計無法正確傳達的狀況 ⼤大致可歸納成兩種原因
設計師
狀況⼀一：設計師愛上⾃自⼰己的作品
⼼心肝寶⾙貝
威廉·莎⼠士⽐比亞：詩⼈人、劇作家
Love is blind and lovers cannot see the
pretty follies that themselves commit.
!
愛情是盲⺫⽬目的，戀⼈人們看不到⾃自⼰己做的傻事。
- 莎⼠士⽐比亞
在情⼈人眼中沒有缺點
狀況⼆二：被整形
美⼥女 怪⼈人
上⾯面⼀一點，左邊⼀一點，Logo ⼤大⼀一點
美⼥女 怪⼈人
Design by committee never fails to fail. 設計被⼀一群⼈人做決定，從來沒有不失敗的
壞設計很少是由設計師造成的 多數時候，原因在於壞的組織架構
- Don Norman
學習以使⽤用者的⾓角度檢視設計
設計師 網站 使⽤用者
If I think it’s broken, it is broken.!如果我覺得它壞了，它就是壞了!
- Seth Godin
賽斯．⾼高汀 Seth Godin：⾏行銷⼤大師
從使⽤用者的觀點出發，才有機會找到問題
Ted Talk “This is Broken”：http://www.ted.com/talks/seth_godin_this_is_broken_1
⼩小結⼀一下：四個概念
3. ȾĒ7 �ǙZǫƚƅ�
lƅ�
2. �È�Ǯ�mǖ
1. Ȑ&�N\öƛ*
in�Ł���ʢ��ŝç¿ öƛ
User
�ýɊȂ���ąDď • �ĊbƇɖbPQ"ɗ • \i�Q" • ı��Q" • ÛĤ�Q" • � �EȈ • ĶNJɖeþƊŪĶNJɗ • ąDďº ���Ş�Q" • ąDďĘ>H�]Q" • ąDď�ª?�ęŹ�Q"
Business
�ý�ĨŻH�Žäɉǁ • �ĨƤƌ • �Ĩı� • ĊȆQ"šȇ • ĊȆQ"ĉŭ • łÕdž;Q"EȈɖ¥ƥɗ • ��ąDďŵū�Ĝ • ��ąDď��ÅŞ • ąDďĘ>Hð]Q" • ��ąDďņ?Q"ęŹ
W�5ąDď�ƅÉ,ȔîşĀ
şĀó �Ĩ ąDď
⾏行為召喚設計 Call To Action Design
Call To Action 最簡單的定義 To make users/customers to do what you want them to do. 讓⼈人們做你想要他們做的事。
聽起來簡單，要做到有難度
講到 Call To Action，⼤大家會想到什麼？
促銷活動：買⼀一送⼀一、優惠折扣
可能想到⼀一顆按鈕
可能想到⼀一張網⾴頁
廣告 成交
也可能想到⼀一個購物/註冊流程
好奇 看⾒見 ⼼心動 動作 完成
Call To Action 設計，是在設計⼀一個打動⼈人⼼心的流程
在打動⼈人⼼心的流程中 有 5 個關鍵的 A
Call To Action 的 5 個 Ａ
Attention > Attraction > Action > Assistance
抓住使⽤用者的注意⼒力
Attention > Attraction > Action > Assistance
增加吸引⼒力、打動使⽤用者
Attention > Attraction > Action > Assistance
要求⾏行動
Attention > Attraction > Action > Assistance
幫助使⽤用者完成
Attention > Attraction > Action > Assistance
Again再做⼀一次 Call To Action
1. Attention!!
抓住使⽤用者的注意⼒力
Attention 是設計師的專業強項
Attention : 尺⼨寸
會員登⼊入與加⼊入會員⼀一樣重要嗎？
看起來 Evernote 覺得“⽴立即註冊”⽐比登⼊入還重要
Attention : 顏⾊色
再看⼀一次，我的 E 政府
MEGA 覺得“Create Account”⽐比較重要
Attention : 字型Aa
不同字型想表達的情緒不⼀一樣，情緒影響⾏行為，⾏行為影響轉換
請問您覺得專業嗎
Attention : 對⽐比
對⽐比做得很多，多到失去視覺重點
對⽐比太低，不容易讓⼈人注意到⽂文案
Attention : 排版
Attention : Affordance看起來像什麼就是什麼
聯想樂屏保
聯想樂屏保 - 這張圖有什麼問題？
聯想樂屏保 - 這裡有按鈕可以按嗎？
第⼀一個進⼊入購買⾴頁的點
第⼆二個進⼊入購買⾴頁的點 但是⽤用⼾戶認不出按鈕
Attention : 動態效果
當過兵⽐比較能體會 不⼩小⼼心動⼀一動，就會吸引班⻑⾧長的注意⼒力
天
當⼤大家都靜⽌止不動的時候 你稍微動⼀一動就會很明顯了
- 艾未未
英國雜誌藝術評論：世界百⼤大影響⼒力藝術家榜⾸首
透視學（系列攝影）天安⾨門 1998年 艾未未作品
猜猜看哪裏會動http://www8.www.gov.tw/policy/2009career/index.html
Attention : 格式塔 接近、相似、對稱、閉合
格式塔：接近律
格式塔：相似律
格式塔：對稱律 對稱的物件容易被視為⼀一個整體
[ ] { } [ ]
格式塔：閉合律 整體⼤大於部分的總和
以上是格式塔簡單的介紹 有興趣的朋友可以 Google ⼀一下更多資訊
Attention : 留⽩白
留⽩白很明顯，鬍⼦子是⽩白的
http://hanauta-kappan.com/
はなうた活版堂：活版印刷
Attention : 移除分⼼心
按鈕 URL
Dropbox vs box 哪個⾸首⾴頁看起來容易讓⼈人分⼼心？
Dropbox
Box
Box 的導覽列會造成較多的分⼼心
Box 的 Footer 也會造成較多的分⼼心
Attention : 視覺路徑 前⾯面兩種很常⾒見，只介紹第三種Ｚ型瀏覽
F
第⼀一種 Z 的視覺路徑
1 2
3 4
3 是視覺路徑的弱區域
起點
終點
強
弱
Gutenberg Diagram
1 2
3 4
如果要擺⼀一顆 CTA 按鈕，應該擺哪邊，哪邊最好不要擺
起點
終點
強
弱
Gutenberg Diagram
Buy Now
ASOS 網站範例
1 2
3 4
第⼆二種 Z 的視覺路徑
第⼀一種排版
第⼆二種排版
這兩種排版在⽤用⼾戶瀏覽的感受上有什麼差別
Z 型排版讓⼈人感覺⽐比較有趣
有趣單調
2. Attraction!!
增加吸引⼒力，打動使⽤用者
Attraction : 價值主張 Value Proposition 是影響轉換率的重要因素
Airbnb 價值主張：歡迎回家
Kickstarter：Bring creative projects to life
500 Startups：WE ARE #500STRONG
新創公司能學 500 Startups 的寫法嗎？
TizU：Tease like there’s no tomorrow
TizU 服務：發送簡訊給朋友，到指定時間才讓朋友打開訊息
新創公司的價值主張要能寫出明確價值 沒⼈人認識你，你必須清楚介紹
Attraction : ⽂文案
Airbnb：向 190 個國家的當地⼈人租獨⼀一無⼆二的家
Google Drive：將⼯工作檔案安全存⼊入雲端環境...
500 Startups：
Meet our badass, global family of startup founders, mentors, and investors
⼩小⽶米⼿手機：就是快！（為了⼝口碑傳播設計的⽂文案）
Attraction : 照⽚片
TERSI：Matali Crasset 法國知名設計師，時尚⼥女鞋
京都、本家尾張屋：和菓⼦子
Attraction : 影⽚片
先看三家設計公司的網站⾸首⾴頁影⽚片
雖然前⾯面三段影⽚片拍的不錯 但可惜的是，價值主張、⽂文案、影⽚片、照⽚片
沒有呈現明確價值給⽤用⼾戶
再看其他的例⼦子
Apple
http://www.apple.com/tw/your-verse/organizing-a-movement/
Attraction : 社交證明
這則社交證明有可信度嗎？
社交證明有時會降低吸引⼒力 因為使⽤用者不認識這個⼈人，沒有產⽣生影響⼒力
Attraction : 降低感知⾵風險
Attraction : 獎勵
SkillShare 推廣獎勵： 免費送朋友⼀一個⽉月，朋友註冊後，⾃自⼰己可以免費⼀一個⽉月
Attraction : 值得相信
設計的品質會影響可信度，可信度會影響轉換率
Attraction : ⼤大腦無法不注意的事物危險、⻝⾷食物、性愛、動作、⼈人臉、故事
Photograph by Wout (eworm on Flickr)
你無法阻⽌止⼤大腦不注意到⼈人臉
Photograph by Barbara Dunkelman | @Blawndee on Twitter
更多⼈人臉：http://goo.gl/K8Eiqh
因為被⼈人臉吸引，你也可能沒看到⼤大猩猩
Attraction : 價格差異化 定價、售價、不同價格的⽅方案
＄
Case Study. 經濟學⼈人訂閱 Dan Ariely ⾏行為經濟學家的實驗
訂閱經濟學⼈人 線上訂閱 59 美元
紙本訂閱 125 美元
線上＋紙本 也是125 美元
你會選擇哪⼀一個⽅方案
訂閱經濟學⼈人 線上訂閱 59 美元
紙本訂閱 125 美元
線上＋紙本 也是125 美元
16%
0%
84%
中間那⼀一項 0%，拿掉沒關係，對吧？
訂閱經濟學⼈人 線上訂閱 59 美元
線上＋紙本 125 美元
重新選⼀一次，你會選擇哪⼀一個⽅方案
兩種都訂閱的⽐比率從 84% 降到 32% 中間選項會影響⽤用⼾戶決策
訂閱經濟學⼈人 線上訂閱 59 美元
紙本訂閱 125 美元
線上＋紙本 125 美元
68%
0%
32%
3. Action!!
要求⾏行動
Action : ⾏行為召喚的時間點
Commitment
Call To Action
時間點怎麼抓
User
了解螢幕前⾯面的使⽤用者 • 前提知識（知道什麼） • 動機是什麼 • ⺫⽬目的是什麼 • 期待是什麼 • 當下的情緒 • 習慣（如何創造習慣） • 使⽤用者進來前上⼀一⾴頁是什麼 • 使⽤用者離開後想做什麼 • 使⽤用者想完成的任務是什麼
Most Aware : !User ⾮非常了解產品，他們只需要交易。
Product-Aware :
User 知道產品，但不確定合不合適。
Solution-Aware :
User 知道解決⽅方案，但不知道產品有提供解決⽅方案。
Problem-Aware : !User 知道有問題，但不知道解決⽅方案是什麼。
Completely Unaware : !User 完全不知道有問題。
Most Aware :
Product-Aware :
Solution-Aware :
Problem-Aware :
Completely Unaware :
了解 User 知道什麼，去佈局時間點
依不同類型 User 所需要傳達的資訊量
為什麼中間的按鈕是”如何使⽤用Airbnb”，⽽而不是註冊？
Action : 簡化⽂文字
Simple
加⼊入會員
會員登⼊入 註冊
或登⼊入
我的 E 政府 Dropbox
Action : 使⽤用明確動作
Login Buy Find Get Order
Purchase Pay Review Shop Add
Share Like Take Download Check
Submit Next Join Sign-in
DonateSubscribe Follow Register Read
Sign-up
常⾒見的 Call To Action 動作
Login Buy Find Get Order
Purchase Pay Review Shop Add
Share Like Take Download Check
Submit Next Join Sign-in
DonateSubscribe Follow Register Read
Sign-up
嚴格來說，能讓使⽤用者明確感受到“得到價值”只有⼀一個
Action : ⽤用 User 內⼼心 OS 做⽂文案
記憶⼤大考驗：你記得⼿手機右上⾓角放了什麼 App 嗎？
真正的題⺫⽬目不是要考驗記憶⼒力
剛剛找 App 的時候，你有看到現在幾點嗎？
10:30 Time
Tunnel Vision Field Effect
沒看到，是因為在⼼心中尋找的不是時間 ⽤用 User 內⼼心 OS 做⽂文案
Action : 強調得到的價值
Call To Action = Action + Value
Crazy Egg：網站分析服務
Heatmap：點擊熱圖，分析使⽤用者在網⾴頁上的活動
Call To Action = Action + Value
4. Assistance!!
幫助使⽤用者完成
Assistance : 提供協助 如果遇到障礙，⽤用⼾戶要能找到地⽅方求救
提供多項聯絡管道，協助排除障礙 ＦＡＱ > 線上客服（Web/Line） > 客服電話
Assistance : ⽴立即性的回覆
0.1秒 1秒 10秒開始感覺怪怪的
不會感覺延遲
感覺延遲
覺得系統壞了
http://www.nngroup.com/articles/response-times-3-important-limits/By Jakob Nielsen on January 1, 1993
0秒
系統回覆速度： 0.1 秒以內⽐比較好
Assistance : Emails 通知 訂單完成後，要通知、創造機會、保持聯絡
Assistance : 錯誤控制 系統發⽣生錯誤時，幫助使⽤用者處理
If there is a wrong way to do something
then someone will do it.
- Murphy’s law (墨菲定律)
Assistance : 可以反悔
如果使⽤用者不滿意⾃自⼰己的決定 要能讓使⽤用者很簡單就回到上⼀一步的狀態
訂票⾸首⾴頁 登⼊入
選擇戲院 ⽇日期、電影
選擇座位選擇票價 完成訂票
電影票線上購買流程
5. Again!!
使⽤用者主要任務結束後，再做⼀一次
Attention > Attraction > Action > Assistance
Again
Call To Action 的 5 個 A
Call To Action 的 10 個 Tips
Tip 1. 你的 TA 是誰？
透過各種 UX 研究⽅方法了解使⽤用者
Tip 2. 說服模型：動機與能⼒力
要先提升動機 還是先提升使⽤用者的能⼒力？
先想提升使⽤用者的能⼒力，再想加強動機 動機太多元，提升能⼒力相對單純
Tip 3. 引發好奇⼼心
The Curiosity Gap
Curiosity Gap : 透過不完全的資訊讓你好奇
不可預測性讓⼈人們持續搜尋
給予少量資訊，再提供⼈人們尋求更
多資訊的⽅方法，會導致⼈人們資訊搜
尋⾏行為的增加。︒
!
資訊取得的不可預測性越⾼高，⼈人們
會越沈迷於資訊的搜尋
⾏行為⼼心理學博⼠士
了解「⼈人」，你才知道怎麼設計
Susan Weinschenk 蘇珊．威⾟辛克
Tip 4. 設計主要與次要的 CTA 按鈕
有些網⾴頁只設計⼀一個 CTA 按鈕 轉換率會⽐比較低
???
Tip 5. 強調現在
購買 ⾺馬上購買
Tip 6. 態度直接強硬
註冊 ⽴立即註冊
Tip 7. 不⼀一定是最上⽅方
只要感興趣，使⽤用者會捲動網⾴頁 CTA 的按鈕不⼀一定要放在最上⽅方
Tip 8. 要改版、熟悉感會導致漠然 ⽂文案、圖⽚片、影⽚片、網站設計，久了效果會遞減
Tip 9. 別重新造輪⼦子
會員登⼊入 Login
Tip 10. 多做測試與研究（質性＋量性） 最重要的⼀一點
總結 & Take Away
3. ȾĒ7 �ǙZǫƚƅ�
lƅ�
2. �È�Ǯ�mǖ
1. Ȑ&�N\öƛ*
in�Ł���ʢ��ŝç¿ öƛ
User
�ýɊȂ���ąDď • �ĊbƇɖbPQ"ɗ • \i�Q" • ı��Q" • ÛĤ�Q" • � �EȈ • ĶNJɖeþƊŪĶNJɗ • ąDďº ���Ş�Q" • ąDďĘ>H�]Q" • ąDď�ª?�ęŹ�Q"
Business
�ý�ĨŻH�Žäɉǁ • �ĨƤƌ • �Ĩı� • ĊȆQ"šȇ • ĊȆQ"ĉŭ • łÕdž;Q"EȈɖ¥ƥɗ • ��ąDďŵū�Ĝ • ��ąDď��ÅŞ • ąDďĘ>Hð]Q" • ��ąDďņ?Q"ęŹ
W�5ąDď�ƅÉ,ȔîşĀ
şĀó �Ĩ ąDď
Call To Action � 10 � TipsAttention > Attraction > Action > Assistance
Again
Call To Action � 5 � A
Call To Action 設計，是設計⼀一個打動⼈人⼼心的流程
![Lehrstuhl fur Informatik 10 (Systemsimulation) · formance ParalleX (HPX) runtime system [2]. HPX is the rst open source implementation of the concepts of the ParalleX execution model](https://img.pdfslide.tips/doc/110x75/5ec7f0ec818b43225b3ee804/lehrstuhl-fur-informatik-10-systemsimulation-formance-parallex-hpx-runtime-system.jpg)
