1. App使⽤用者經驗設計
李易修

2. 李易修 Justin Lee
台灣使用者經驗設計協會(UiGathering)
創會成員與工作小組理事
·•www.lis186.com
·•lis186@gmail.com
·•twitter @lis186

3. 台灣使⽤用者經驗設計協會

4. 經驗 設計
廣使 ⽤用者
“推 業專 業知
，帶 動產
與 研究
與交 流”
識的 提升 sea r c h
,
a nd re n
desig dge’s
e rience nowle
r exp ional k
o te use rofess
“Prom d the p hange”
ea d ex c
and l ement an
a dvanc

7. 內容
為什麼⾏行動裝置如此特別
設計⾏行動使⽤用者者經驗
⾏行動使⽤用者界⾯面設計要素
使⽤用者經驗設計策略

8. 為什麼⾏行動裝置如此特別？

9. 典型的⾏行動⽣生活

10. http://www.flickr.com/photos/laraswanland/4990323020/

11. http://androidheadlines.com/2012/01/u-s-android-users-use-smartphones-more-in-the-bathroom-survey-shows.html

12. http://lucyyu.wordpress.com/2011/03/28/inspired/

13. http://929thelake.com/maybe-we-should-pad-our-poles/padded-lamp-posts-introduced-in-brick-lane/

14. http://dedicky.wordpress.com/2011/07/23/%E4%BA%A4%E4%BA%92%E4%BD%93%E9%AA%8C%E5%89%8D%E4%B8%96%E4%BB%8A%E7%94%9F/

15. http://www.flickr.com/photos/wnyc/4127773219/

16. http://www.flickr.com/photos/lis186/7053613191/in/set-72157629441689710/

17. http://www.flickr.com/photos/zandwacht/5718319650/in/faves-67435840@N07/

18. http://www.flickr.com/photos/juicowski/4699974689/

19. http://www.flickr.com/photos/heycheri/7043909105/
http://www.flickr.com/photos/heycheri/7051259159/in/photostream

20. http://ruiendless.pixnet.net/blog/post/28012992-%E3%80%90%E9%A3%9F%E8%A8%98%E3%80%91%E5%96%9D%E9%85%92%E5%B0%8F%E5%BF%83%E8%AE%8A%E7%8B

21. http://www.headlightblog.com/2012/03/forget-mobile-think-multiscreen/

22. http://articles.chicagotribune.com/2012-07-08/news/ct-met-night-light-sleep-20120708_1_blue-light-bright-light-steven-lockley

23. http://www.flickr.com/photos/fraserj/5354831397/in/photostream/

24. ⾏行動裝置已經是⽣生活中的⼀一部分

25. 智慧型⼿手機+平板出貨超越PC
全球出貨量
（億台） 智慧型⼿手機+平板
7
6
5
4 PC
3
2
1
0
2005 2006 2007 2008 2009 2010 2011 2012 2013 時間
http://thegadgetfan.com/mobile-smartphones/2011-the-year-smartphones-beat-pcs.html

26. 50%的家庭有1部PC，
但40%有3台以上的連網裝置
連網裝置 PC
3+
2
1
0 15 30 45 60
http://www.comscore.com/Press_Events/Presentations_Whitepapers/2011/Digital_Omnivores_Key_Insights_into_Todays_Connected_Consumer_Webinar

27. 智慧型裝置與PC
內容消費量在2011出現⿈黃⾦金交叉
http://www.bgr.com/2011/10/26/we-have-entered-a-post-pc-era-report-claims-infographic/

28. 因智慧型⼿手機與平板⾵風⾏行
PC在家的使⽤用時間減少20%
http://www.businessinsider.com/chart-of-the-day-pc-usage-2011-2#ixzz1G9DptpfB

29. ⾏行動裝置多樣化的使⽤用情境
http://blog.nielsen.com/nielsenwire/online_mobile/in-the-u-s-tablets-are-tv-buddies-while-ereaders-make-great-bedfellows/

30. 有些⼯工作仍須PC完成，
只是PC不再是⼈人⼈人需要
http://www.comscore.com/Press_Events/Presentations_Whitepapers/2011/Digital_Omnivores_Key_Insights_into_Todays_Connected_Consumer_Webinar

31. 開發中國家跳過PC邁向⾏行動年代
http://www.hksilicon.com/kb/articles/65990/PC?mobi=false

32. 智慧型⼿手機

33. 從硬體到軟體創新

34. ⾏行動數據和語⾳音傳輸量
在2008年出現⿈黃⾦金交叉
每年的通訊量
數據
語⾳音
2007 2008 2009 2010 時間
http://mashable.com/2010/11/08/u-s-mobile-data-traffic-exabyte/

35. 美國智慧型⼿手機與功能性⼿手機出貨量
在2011年出現⿈黃⾦金交叉
⼿手機出貨
百分⽐比
68%
55%
智慧型⼿手機
功能性⼿手機
45%
32%
2010/2 2011/7 2011/1 2011/5 時間
http://blog.nielsen.com/nielsenwire/?p=28237

36. 過去我們想把⼿手機變成電腦

37. 2005年的「掌上電腦」
跨越不了死亡之井
死亡之井
2.5% 13.5% 34% 34% 16%
創新者 早期採⽤用者 早期⼤大眾 晚期⼤大眾 落後者 時間
http://iknow.stpi.org.tw/post/Read.aspx?PostID=3030

38. ⼿手指代替筆
http://www.bbc.co.uk/news/business-15162399

39. 從檔案為中⼼心到APP為中⼼心

40. 不⽤用管⺫⽬目錄結構與檔案格式

41. 隨時⾃自動存檔

42. 智慧型⼿手機越過死亡之井
死亡之井
2.5% 13.5% 34% 34% 16%
創新者 早期採⽤用者 早期⼤大眾 晚期⼤大眾 落後者 時間
http://iknow.stpi.org.tw/post/Read.aspx?PostID=3030

43. 這才是真正的「個⼈人電腦」

44. 平板

45. 平板不是⼤大⼿手機嗎？

46. 平板的硬體架構和⼿手機相似

47. 平板不是放⼤大的⼿手機
ze
si
re
=

48. 游泳池不是⼤大的澡缸

49. ⼿手機⾃自⽤用，平板共享
http://www.elephantjournal.com/2010/04/family-ipad-shuffleboard-as-seen-in-boulder-colorado-at-atlas-cafe/

50. 可以做不代表使⽤用者會那樣做

51. 平板不適合講電話、拍照

52. ⼤大平板 vs. ⼩小平板

53. ⼤大平板：多⼈人共享的家⽤用娛樂裝置
http://www.bandwidthblog.com/2011/05/27/latest-nielsen-study-sheds-light-on-where-when-and-how-people-use-their-ipads-interface/ http://developer.android.com/guide/topics/
fundamentals/fragments.html

54. ⼩小平板：旅⾏行中打發時間的伴侶
http://travel.spotcoolstuff.com/best-tablet-computers-travel

55. PC vs. ⾏行動裝置

56. 螢幕空間
充⾜足 有限

57. 輸⼊入
鍵盤、滑⿏鼠 觸控螢幕、感測器
GPS 亮度計 接近感應器
電⼦子羅盤
加速計
相機
觸控螢幕
⿆麥克⾵風 氣壓計

58. ⽴立⾜足點
桌⾯面、資料夾/檔案 APP、雲端

59. 使⽤用情境
固定 多樣

60. ⾏行動裝置讓我們從空間中解放
http://www.slideshare.net/fullscreen/space150/mobile-trends-june-2011/6

61. APP

62. APP的使⽤用時間⾼高於電話
電⼦子郵件
8%
語⾳音+簡訊 App
32% 48%
上網
12%
http://jacobsmedia.typepad.com/jacobs/2011/03/you-dont-know-apps.html

63. 如果智慧型⼿手機是瑞⼠士⼑刀

64. App就是上⾯面的各種⼯工具

65. 每個⼈人需要的都不盡相同

66. 開放的市場，全球性的競爭

67. 2012Q3 Smartphone OS 市佔率
2% Linux
2%
2%
4%
15%
75%
IDC, 2012 Q3

69. Android, iOS 裝置數 vs. App 數健康成⻑⾧長，
展現強勁的網路效應
http://techcrunch.com/2011/11/28/its-still-a-feature-phone-world-global-smartphone-penetration-at-27/

70. Symbian, BlackBerry, Windows
Phone ⽣生態圈狀況堪慮
http://techcrunch.com/2011/11/28/its-still-a-feature-phone-world-global-smartphone-penetration-at-27/

71. App Store 利潤是 Google Play 的4倍
App Store 100%
Google Play 23%
http://techcrunch.com/2012/03/30/amazons-appstore-generates-more-revenue-than-google-play/

72. iOS版本更新速度遠⾼高於Android
15天後 6個月後
4.x
3%
2.1
6% 2.2
5.0.0 3.0 23%
1% 3%
5.1.0 5.0.1
77% 22%
2.3
64%
http://www.techorz.com/tablet/android-platform-versions-as-of-2-april/
http://www.appappapps.com/blog/11553-ios-5-1%E6%9B%B4%E6%96%B015%E6%97%A5%E5%85%A7%E9%81%9461%E4%BD%BF%E7%94%A8%E7%8E%87-
android-4-0%E4%BB%8D%E5%8F%AA%E6%9C%891-6.html

73. 多元解析度
1536x2048
240x320
320x480 240x400
240x432
320x480
1280x720
480x800 1280x800
480x854
640x960
768x1024

74. 開發Android APP請⼩小⼼心
版本 螢幕解析度
4.x
3%
2.2 normal / mdpi
23% 20%
2.3 normal / hdpi
64% 65%
http://developer.android.com/resources/dashboard/screens.html

75. 2012 Q2 新APP專案平台選擇
1%
4% 28%
67%
Microsoft May Be Closer Than It Appears in Android's Rearview Mirror

76. 設計⾏行動使⽤用者經驗

77. 事情沒想像中簡單

78. 使⽤用者經驗
http://goo.gl/nl3VB http://goo.gl/XVAaH

79. 使⽤用者介⾯面
視覺設計
互動設計
資訊組織

80. 系統狀態
連網狀態 電量
位置

81. 實體互動
⽅方向
觸控⼿手勢
握持⽅方式

82. ⽂文化 環境
活動 情緒與能⼒力
使⽤用者 知識與習慣
動機
⺫⽬目標與任務 注意⼒力
⼿手機
使⽤用者介⾯面
姿勢
http://www.flickr.com/photos/weksa/7066754079/in/photostream/

83. http://www.giantant.com/publications/mobile_context_model.pdf

84. App可能只是服務的⼀一部分

85. ⾏行動使⽤用者介⾯面的要素

86. 觸控螢幕沒有hover事件

87. 觸控⺫⽬目標尺⼨寸
7mm 2mm
7mm i
觸控範圍要夠⼤大 視覺元素可以 間隔不能太⼩小
⽐比觸控範圍⼩小
8mm
8mm

88. ⼿手機適⽤用的⼿手勢
http://gesturecons.com/

89. 平板可以作更多點的觸控
http://gesturecons.com/

90. 平板可能不只⼀一個⼈人⽤用
http://iapp.com.tw/2011/12/rockmate-turns-your-ipad-into-a-music-studio/

91. 操作界⾯面螢幕上不⾒見得看得到

92. 操作必須提供⾜足夠的線索

93. 沒有線索時，認知負荷極⾼高

94. ⼿手勢作為捷徑，不能作為唯⼀一路徑

95. ⼈人們根據過去經驗來操作
點兩下

96. 單⼿手操作

97. 不容易掉也很重要
http://itunes.apple.com/cy/app/shoot-one-hand-katatecam.goody/id535739902?mt=8

98. 單⼿手不適合多點觸控
grouplab.cpsc.ucalgary.ca/grouplab/uploads/Publications/Publications/2012-FatThumb.MobileHCI.pdf

99. 注意主要互動區域

100. 哪個設計⽐比較好？

101. 雙⼿手操作 (直向)

102. 雙⼿手操作(橫向)

103. ⼿手指不是透明的

104. 打橫是為了看更多

105. 依照版⾯面調整內容

106. 不同視窗選擇適合的轉向

107. 螢幕空間限制
http://blog.miragestudio7.com/compact-living-and-small-spaces/1671/

108. 資訊架構與內容組織
功能、內容清單
分類
內容⾴頁、編輯

109. Foursquare的進化

110. 收納
http://www.centralinteriordesign.com/5829/space-saving-for-small-kids-room-layout.html/minimal-furniture-in-the-room

111. Path的進化

112. 別忘了其它可⽤用的資源
GPS
加速計
電⼦子羅盤
相機
⿆麥克⾵風
照度計
距離感測計
氣壓計
溫度計

113. 加速度計 (Accelerometer)
http://www.yetihq.com/blog/iphone-accelerometer-calibration/ http://lonelysandwich.com/post/48198569/tilt-scrolling-instapaper-pro

114. 相機

115. 辨識
http://www.newmobilelife.com/2012/02/23/scan-qr-code/

116. ⿆麥克⾵風
Pah....Pah...
http://www.youtube.com/watch?v=r1vxeiDFoTk&feature=player_embedded#!

117. 擴增實境
http://blog.indecplus.com/?p=1597

118. 通訊錄
https://play.google.com/store/apps/details?id=gogolook.callgogolook2&hl=z

119. 動畫與轉場

120. ⾏行動使⽤用者經驗設計重點
把焦點放在最重要的功能
評估使⽤用者需要什麼內容
避免無謂的步驟
不花⼼心思就會⽤用
隨時準備被打斷

121. 使⽤用者經驗設計策略

122. iPhone也才滿5歲
http://www.flixya.com/photo/2087027/iphone-cake

123. 界線變得模糊

124. 數位匯流正在進⾏行
應⽤用
APP
遊戲
⾳音樂
影⽚片
電視 遊戲機 PC 平板 ⼿手機
Evolution of converged cross-platform services [Source: Analysys Mason, 2011]

125. Double Diamond設計流程
點⼦子 願景 成果
時間
Discover Define Develop Deliver
Design Council, 2005

126. 以原型驅動設計
戰略 戰術
點⼦子 願景 成果
時間
Discover Define Develop Deliver
Design Council, 2005

127. 你App在服務當中扮演什麼⾓角⾊色？
http://www.multiscreen-experience.com/?page_id=47

128. 只要做的對就有機會

129. 感謝您的聆聽！
李易修 Justin Lee
台灣使用者經驗設計協會(UiGathering)
創會成員與工作小組理事
·•www.lis186.com
·•lis186@gmail.com
·•twitter @lis186