提高轉換率 – 令人心動的行為召喚設計

1. –
Hans - 20141002 @ HPX Life
Photo Credit simpleinsomnia/ http://goo.gl/JMeb38

2. www.hansshih.com

3. ERP 時覺結 結 完
多 兩
⼦子
時
覺
⼦子
時
覺
主
⼦子
成
時
覺
體
才
次
真
時
覺
座
表
好
別
領
座
表
⼦子
時
覺
⼦子
⼦子
時
覺
法
成
⽅方
⼦子
時
覺
⽇日
IP
⼦子
時
覺
你
中
⼦子
時
覺 ⽽而
定
做
物
物
期
完
時
覺
元
完
時
覺
⽇日
中
⼦子
時
覺
過
但 但
⽽而發 會
會

4. 多
兩
⽽而
發
會 享
所
受
誰
應
分
會 享所 最多 兩 全

5. Player Experience!
結 知

6. 中
兩 但

7. 中
兩 但
1. !
Satisfaction

8. 中
兩 但
2. !
Conversion

9. Player Experience!
地⾏行⽽而 主

10. Players
經
發
Time
前
都
遊 CB OB/ 發
很
點
前
都
很
點
Google Analytics
兩 但 能 結Kano Model結 結 友 結 但
中 ARPU結 是相結 圖結 中 etc.
學 其
地⾏行⽽而 主

11. Online Call To Action 會!
Offline Call To Action

12. Developer
會好 Copywriter
UXer
⾵風
起 作

13. Photo Credit simpleinsomnia/ http://goo.gl/JMeb38
什相新說

14. 息 !
Online Call To Action!
Offline Call To Action

15. 國 少
4 快
道 新說 什相結 量結 會

16. 1. 次

17. Business
次 !
$_$ 路結 什相

18. /買⽂文
成住家
!
Conversion

19. /買⽂文
成住家
!
Conversion

20. /買⽂文
成住家
NPO !
Conversion

21. /買⽂文
成住家
!
Conversion

22. /買⽂文
成住家
SaaS !
Conversion

23. /買⽂文
成住家
!
Conversion

24. Business
什 知 !
知 個

25. Business
次
• 於⽼老
•
• 新體
• 新體 也
• 和 樂
• 多 感⼿手 ⼼心
• 多 點
• 多 ⼈人
• 多 吧 活

26. 2. 多 / 知 為剛

27. User
5W1H 外加 多 !
Who Why What When Where How

28. User
多
• 新 ⾼高
•
•
•
•
• 分 上果給分
• 多 點
• 多
• 多 活

29. User 什
多 !
果給個 結很 無 結 什

30. 樂 / 果 讓
不 ⽇日

31. …

32. 可⾼高 讓
讓 只
讓愛
讓 ⽇日
讓 ⾏行候
讓 看

33. 3. 活 ⽇日

34. UserBusiness
Business結User

35. Don Norman Mental Model 試

36. Don Norman 總·問
可 同 ⽽而 會
⼥女 記次 ⼯工 然
就您 會好 - Wiki
會& 不 會

37. Don Norman Mental Model
會好 次 結 活 ⽇日結能動 ⽇日個
UserBusiness

38. 會好 多
會好 活 ⽇日結 活 ⽇日

40. 3. ⽩白 同 實
2. 打
1. ⼆二 活
和 活

41. “ E ”
天

45. 請 Branding

46. 會好
和 ⼩小 活 ⽇日 !
活 被 還 什
多

47. 4. 分 多 無

48. 和 三 會到吧 多 !
不 那度

49. 給 會 到吧
聽

50. 會好
會好
原

51. 通·專 因 結⻑⾧長
Love is blind and lovers cannot see the
pretty follies that themselves commit.
!
⽉月 更 將
- 專 因

52. 公

53. 經
實

54. 放 Logo

55. 實
Design by committee never fails to fail.
會 剛 後 是網

56. 會 ⼩小 會好給
中 作 正件
- Don Norman

57. 分 多 回 進在 會
會好 多

58. 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

59. 快

60. 3.
2.
1.
User
•
•
•
•
•
•
•
•
•
Business
•
•
•
•
•
•
•
•
•

61. 量 會
Call To Action Design

62. Call To Action 了 間
To make users/customers to do what you want them to do.
了

63. Call To Action

64. ⾊色 這 結⼰己 本⾨門

65. 當

66. 點

67. 成 還
⽂文 / ⽽而

68. Call To Action 會 會 ⽽而

69. ⽽而
5 A

70. Call To Action 5 合

71. Attention > Attraction > Action > Assistance
多

72. Attention > Attraction > Action > Assistance
嗎 結 多

73. Attention > Attraction > Action > Assistance

74. Attention > Attraction > Action > Assistance
情每多

75. Attention > Attraction > Action > Assistance
Again
Call To Action

76. 1. Attention!
!

77. Attention

78. Attention : 界

79. 你樣 你

80. Evernote “太 ” 樣

81. Attention : 從

82. E

83. MEGA “Create Account” 被

84. Attention : ⽼老
Aa

85. ⽼老 吧 就您 就您 什

87. Attention :

88. 就您多 如
http://photoseed.com/

89. 是 在

91. Attention : ⾃自

93. http://www.bostonglobe.com/
關流 RWD 會

94. Attention : Affordance

95. 之 寶⼤大

96. 之 寶⼤大 -

97. 之 寶⼤大 - 當 當

98. ⽂文 點
⽂文 點
⽇日可 當

99. Attention : 他

100. 被
嗎

101. 年名
等
-
與 然 們 就您 與 ⼊入

102. 在 時 品就 1998

103. 安安
http://www8.www.gov.tw/policy/2009career/index.html

104. Attention : 沒發
我結 ⽚片結 電結載

105. 沒發 我

106. 沒發 ⽚片

107. 沒發 電
電 在
[ ] { } [ ]

108. 沒發 載

109. 沒發 了 少
享所 Google

110. Attention : ⼿手

111. ⼿手 等 題

112. http://hanauta-kappan.com/
內 望 理

113. Attention : 重
當 URL

114. Dropbox vs box
點

115. Dropbox

116. Box

118. Box 第 給 被

119. Box Footer 給 被

120. Attention : 在 清
不 少 ⽼老 第
F

121. Z 在 清

122. 1 2
3 4
3 在 清
下
Gutenberg Diagram

123. 1 2
3 4
CTA 當 ⼈人
下
Gutenberg Diagram
Buy Now

124. ASOS 熱
1 2
3 4

125. Z 在 清

126. ⾃自

127. ⾃自

128. ⾃自 ⽇日 第 增

129. Z ⽼老⾃自 被 所

130. 所了開

131. 2. Attraction!
!

132. Attraction : 也
Value Proposition 就您 什相

133. Airbnb 也 明

134. Kickstarter Bring creative projects to life

135. 500 Startups WE ARE #500STRONG

136. 果 讓 500 Startups

137. TizU Tease like there’s no tomorrow
TizU 活 這

138. 果 讓 也 也
可⾼高 世 變 少

139. Attraction :

140. Airbnb 190 玩

141. Google Drive ⾒見⼒力 ...

142. 500 Startups
Meet our badass, global family of startup founders, mentors, and investors

143. 到 會

144. Attraction : 來

145. TERSI Matali Crasset 會好

146. 裡 結 眼

147. Attraction : 就

148. 國 會 讓 點就

149. Digital Telepathy
http://www.dtelepathy.com/

150. Kalexiko
http://www.kalexiko.com/

151. Fresh Design
http://fresh-design.com.ua/en

152. ⾯面 微就 美
也 結 結就 結來

153. 熱

154. airbnb
www.airbnb.com.tw

155. Project Skin
http://projectskinmd.com/

156. Apple
http://www.apple.com/tw/your-verse/organizing-a-movement/

157. Attraction : 意還話

159. 意還話

160. 意還話 些 嗎
多 可⾼高 只 就您

161. Attraction : 些 死

162. ASOS 新體次 就 第 些 今 死
www.goo.gl/NMFtGS

163. Attraction : 有像

164. SkillShare 有像
為這 為

165. Attraction :

166. 會 過 就您 就您 什相

167. Attraction :
難死結⽣生 結 結 結 種結⽤用

168. Photograph by Wout (eworm on Flickr)
名 種

169. Photograph by Barbara Dunkelman | @Blawndee on Twitter
種 http://goo.gl/K8Eiqh

170. 種嗎 位位

171. Attraction : 也沒增
也結性也結 也沒

172. Case Study. 買
Dan Ariely 兩

173. 買
著 買 59
朋 買 125
著 朋 125
信

174. 買
著 買 59
朋 買 125
著 朋 125
16%
0%
84%

175. 主 0%

176. 買
著 買 59
著 朋 125
信

177. 買 相 84% 些 32%
主 就您 ⽇日後
買
著 買 59
朋 買 125
著 朋 125
68%
0%
32%

178. 3. Action!
!

179. Action : 量
Commitment
Call To Action

181. User
多
• 新 ⾼高
•
•
•
•
• 分 上果給分
• 多 點
• 多
• 多 活

182. Most Aware : !
User 去不 只 個 還
Product-Aware :
User 只 道
Solution-Aware :
User 後 只 新體 後
Problem-Aware : !
User 後
Completely Unaware : !
User

183. Most Aware :
Product-Aware :
Solution-Aware :
Problem-Aware :
Completely Unaware :
User 再歡
於⽼老 User 個 到吧

184. 當 ” 上多 Airbnb”

185. Action :
Simple

186. 你
你樣
麼樣
E Dropbox

187. Action : 多

188. 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

189. 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
⽐比沒 多 “ 也 ”

190. Action : User OS

191. 現兩 回 App

192. 現兩

193. 的 App
10:30
Time
Tunnel Vision Field Effect

194. 的
User OS

195. Action : 開 也

196. Call To Action = Action + Value

197. Crazy Egg 活

198. Heatmap 多 點

199. Call To Action = Action + Value

200. 4. Assistance!
!

201. Assistance : 新體 每
法 ⽇日 的 推

202. 新體 主之 ⼦子 每⾃自 法
轉合 > 著 Web/Line >

203. Assistance : 太

204. 0.1 1 10
⼀一
實
實
時
覺
http://www.nngroup.com/articles/response-times-3-important-limits/
By Jakob Nielsen on January 1, 1993
0
時覺 0.1 幾 被

205. Assistance : Emails
了 結果給 結⼤大想之

206. Assistance : 完
時覺 情每多 要

207. If there is a wrong way to do something
then someone will do it.
- Murphy’s law ( )

208. Assistance : 怎

209. 多 能 後
多 了 以 他
對 點
樣
信 機
結 就
信信對也 對
就對著 ⽂文 ⽽而

210. 5. Again!
!

211. Attention > Attraction > Action > Assistance
Again
Call To Action 5 A

212. Call To Action 10 Tips

213. Tip 1. TA

214. 得 UX 但 多

215. Tip 2. 定⽼老

216. http://www.behaviormodel.org/
Fogg 候 早 Behavior Model

217. 國新說
國新說多

218. 國 新說多
新說 了錯

219. Tip 3.
The Curiosity Gap

220. Curiosity Gap :

221. !
Susan Weinschenk

222. Tip 4. 會 CTA 當

223. 點 會 CTA 當
什相 被
???

224. Tip 5. 開
⽂文 事 ⽂文

225. Tip 6. 他 哈
太

226. Tip 7.
享所 多 點
CTA 當

227. 出 但話 多 息
http://www.hpx.tw/archives/4566

228. Tip 8. 很 結
結 結就 結 會 ⼼心

229. Tip 9. 給
你樣 Login

230. Tip 10. 友 但 過

231. & Take Away

232. 3.
2.
1.
User
•
•
•
•
•
•
•
•
•
Business
•
•
•
•
•
•
•
•
•

233. Call To Action 10 TipsAttention > Attraction > Action > Assistance
Again
Call To Action 5 A
Call To Action 會 會 ⽽而

234. CTA
CTA
CTA http://bit.ly/1QZCAGF

235. Thanks for your attention
!
Email oort.shih@gmail.com
Blog : www.hansshih.com
Facebook : Hans Shih