App使用者經驗設計
129
App使者經驗設計 李易修
-
Upload
justin-lee -
Category
Design
-
view
19.497 -
download
2
description
Transcript of App使用者經驗設計
App使⽤用者經驗設計李易修
台灣使用者經驗設計協會(UiGathering)創會成員與工作小組理事
李易修 Justin Lee
·•www.lis186.com·•[email protected]·•twitter @lis186
台灣使⽤用者經驗設計協會
“推廣使⽤用者經驗設
計
與研究，帶動產業
專業知
識的提升與交流”
“Promote user experience design and research,
and lead the professional knowledge’s
advancement and exchange”
內容
為什麼⾏行動裝置如此特別
設計⾏行動使⽤用者者經驗
⾏行動使⽤用者界⾯面設計要素
使⽤用者經驗設計策略
為什麼⾏行動裝置如此特別？
典型的⾏行動⽣生活
http://www.flickr.com/photos/laraswanland/4990323020/
http://androidheadlines.com/2012/01/u-s-android-users-use-smartphones-more-in-the-bathroom-survey-shows.html
http://lucyyu.wordpress.com/2011/03/28/inspired/
http://929thelake.com/maybe-we-should-pad-our-poles/padded-lamp-posts-introduced-in-brick-lane/
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/
http://www.flickr.com/photos/wnyc/4127773219/
http://www.flickr.com/photos/lis186/7053613191/in/set-72157629441689710/
http://www.flickr.com/photos/zandwacht/5718319650/in/faves-67435840@N07/
http://www.flickr.com/photos/juicowski/4699974689/
http://www.flickr.com/photos/heycheri/7051259159/in/photostream
http://www.flickr.com/photos/heycheri/7043909105/
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%B8%E8%B2%93%E4%B9%8B%E7%8B%B8%E5%B0%8F%E8%B7%AF%E5%B1%85%E9%85%92%E5%B1%8Btanuki
http://www.headlightblog.com/2012/03/forget-mobile-think-multiscreen/
http://articles.chicagotribune.com/2012-07-08/news/ct-met-night-light-sleep-20120708_1_blue-light-bright-light-steven-lockley
http://www.flickr.com/photos/fraserj/5354831397/in/photostream/
⾏行動裝置已經是⽣生活中的⼀一部分
http://thegadgetfan.com/mobile-smartphones/2011-the-year-smartphones-beat-pcs.html
智慧型⼿手機+平板
時間
全球出貨量（億台）
PC
20102005 2006 20092007 2008 2011 2012 2013
1
2
3
4
5
6
7
0
智慧型⼿手機+平板出貨超越PC
http://www.comscore.com/Press_Events/Presentations_Whitepapers/2011/Digital_Omnivores_Key_Insights_into_Todays_Connected_Consumer_Webinar
3+
2
1
0 15 30 45 60
連網裝置 PC
50%的家庭有1部PC，但40%有3台以上的連網裝置
http://www.bgr.com/2011/10/26/we-have-entered-a-post-pc-era-report-claims-infographic/
智慧型裝置與PC內容消費量在2011出現⿈黃⾦金交叉
http://www.businessinsider.com/chart-of-the-day-pc-usage-2011-2#ixzz1G9DptpfB
因智慧型⼿手機與平板⾵風⾏行PC在家的使⽤用時間減少20%
⾏行動裝置多樣化的使⽤用情境
http://blog.nielsen.com/nielsenwire/online_mobile/in-the-u-s-tablets-are-tv-buddies-while-ereaders-make-great-bedfellows/
http://www.comscore.com/Press_Events/Presentations_Whitepapers/2011/Digital_Omnivores_Key_Insights_into_Todays_Connected_Consumer_Webinar
有些⼯工作仍須PC完成，只是PC不再是⼈人⼈人需要
開發中國家跳過PC邁向⾏行動年代
http://www.hksilicon.com/kb/articles/65990/PC?mobi=false
智慧型⼿手機
從硬體到軟體創新
⾏行動數據和語⾳音傳輸量在2008年出現⿈黃⾦金交叉
http://mashable.com/2010/11/08/u-s-mobile-data-traffic-exabyte/
數據
時間
每年的通訊量
語⾳音
20102007 2008 2009
美國智慧型⼿手機與功能性⼿手機出貨量在2011年出現⿈黃⾦金交叉
http://blog.nielsen.com/nielsenwire/?p=28237
智慧型⼿手機
時間
⼿手機出貨百分⽐比
功能性⼿手機
2010/2 2011/12011/7 2011/5
55%
45%32%
68%
過去我們想把⼿手機變成電腦
2005年的「掌上電腦」跨越不了死亡之井
時間創新者
2.5%
早期採⽤用者
13.5%
早期⼤大眾
34% 34%
晚期⼤大眾 落後者
16%
死亡之井
http://iknow.stpi.org.tw/post/Read.aspx?PostID=3030
⼿手指代替筆
http://www.bbc.co.uk/news/business-15162399
從檔案為中⼼心到APP為中⼼心
不⽤用管⺫⽬目錄結構與檔案格式
隨時⾃自動存檔
智慧型⼿手機越過死亡之井
http://iknow.stpi.org.tw/post/Read.aspx?PostID=3030
時間創新者
2.5%
早期採⽤用者
13.5%
早期⼤大眾
34% 34%
晚期⼤大眾 落後者
16%
死亡之井
這才是真正的「個⼈人電腦」
平板
平板不是⼤大⼿手機嗎？
平板的硬體架構和⼿手機相似
平板不是放⼤大的⼿手機
resi
ze
=
游泳池不是⼤大的澡缸
⼿手機⾃自⽤用，平板共享
http://www.elephantjournal.com/2010/04/family-ipad-shuffleboard-as-seen-in-boulder-colorado-at-atlas-cafe/
可以做不代表使⽤用者會那樣做
平板不適合講電話、拍照
⼤大平板 vs. ⼩小平板
⼤大平板：多⼈人共享的家⽤用娛樂裝置
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
⼩小平板：旅⾏行中打發時間的伴侶
http://travel.spotcoolstuff.com/best-tablet-computers-travel
PC vs. ⾏行動裝置
螢幕空間充⾜足 有限
輸⼊入鍵盤、滑⿏鼠 觸控螢幕、感測器
相機
接近感應器
觸控螢幕⿆麥克⾵風
加速計
電⼦子羅盤
氣壓計
GPS 亮度計
⽴立⾜足點桌⾯面、資料夾/檔案 APP、雲端
使⽤用情境固定 多樣
http://mcgeeresearch.com/what-we-offer/methologies/mobile-research/
⾏行動裝置讓我們從空間中解放
http://www.slideshare.net/fullscreen/space150/mobile-trends-june-2011/6
APP
APP的使⽤用時間⾼高於電話
電⼦子郵件8%
語⾳音+簡訊32%
上網12%
App48%
http://jacobsmedia.typepad.com/jacobs/2011/03/you-dont-know-apps.html
如果智慧型⼿手機是瑞⼠士⼑刀
App就是上⾯面的各種⼯工具
每個⼈人需要的都不盡相同
開放的市場，全球性的競爭
2012Q3 Smartphone OS 市佔率
2%2%
2%4%
15%
75%
IDC, 2012 Q3
Linux
Android, iOS 裝置數 vs. App 數健康成⻑⾧長，展現強勁的網路效應
http://techcrunch.com/2011/11/28/its-still-a-feature-phone-world-global-smartphone-penetration-at-27/
Symbian, BlackBerry, Windows Phone ⽣生態圈狀況堪慮
http://techcrunch.com/2011/11/28/its-still-a-feature-phone-world-global-smartphone-penetration-at-27/
App Store 利潤是 Google Play 的4倍
App Store
Google Play 23%
100%
http://techcrunch.com/2012/03/30/amazons-appstore-generates-more-revenue-than-google-play/
iOS版本更新速度遠⾼高於Android
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
http://www.techorz.com/tablet/android-platform-versions-as-of-2-april/
5.1.077%
5.0.122%
5.0.01%
4.x3%
3.03%
2.364%
2.223%
2.16%
15天後 6個月後
多元解析度
320x480
240x320
480x800
480x854
240x400
240x432
320x480
640x960
768x1024
1280x800
1280x720
1536x2048
開發Android APP請⼩小⼼心
http://developer.android.com/resources/dashboard/screens.html
normal / hdpi65%
normal / mdpi20%
4.x3%
2.364%
2.223%
螢幕解析度版本
2012 Q2 新APP專案平台選擇1%
4%
67%
28%
Microsoft May Be Closer Than It Appears in Android's Rearview Mirror
設計⾏行動使⽤用者經驗
事情沒想像中簡單
http://goo.gl/nl3VB http://goo.gl/XVAaH
使⽤用者經驗
使⽤用者介⾯面
視覺設計
互動設計
資訊組織
電量連網狀態
位置
系統狀態
實體互動
握持⽅方式
觸控⼿手勢
⽅方向
環境使⽤用者
注意⼒力⺫⽬目標與任務
活動
姿勢
⽂文化
知識與習慣
情緒與能⼒力
動機
⼿手機
使⽤用者介⾯面
http://www.flickr.com/photos/weksa/7066754079/in/photostream/
http://www.giantant.com/publications/mobile_context_model.pdf
App可能只是服務的⼀一部分
⾏行動使⽤用者介⾯面的要素
觸控螢幕沒有hover事件
觸控⺫⽬目標尺⼨寸7mm
7mm i
視覺元素可以⽐比觸控範圍⼩小
2mm
間隔不能太⼩小觸控範圍要夠⼤大
8mm
8mm
平板可能不只⼀一個⼈人⽤用
http://iapp.com.tw/2011/12/rockmate-turns-your-ipad-into-a-music-studio/
操作界⾯面螢幕上不⾒見得看得到
操作必須提供⾜足夠的線索
沒有線索時，認知負荷極⾼高
⼿手勢作為捷徑，不能作為唯⼀一路徑
⼈人們根據過去經驗來操作
點兩下
單⼿手操作
不容易掉也很重要
http://itunes.apple.com/cy/app/shoot-one-hand-katatecam.goody/id535739902?mt=8
單⼿手不適合多點觸控
grouplab.cpsc.ucalgary.ca/grouplab/uploads/Publications/Publications/2012-FatThumb.MobileHCI.pdf
注意主要互動區域
哪個設計⽐比較好？
雙⼿手操作 (直向)
雙⼿手操作(橫向)
⼿手指不是透明的
打橫是為了看更多
依照版⾯面調整內容
不同視窗選擇適合的轉向
螢幕空間限制
http://blog.miragestudio7.com/compact-living-and-small-spaces/1671/
資訊架構與內容組織
功能、內容清單
分類
內容⾴頁、編輯
Foursquare的進化
收納
http://www.centralinteriordesign.com/5829/space-saving-for-small-kids-room-layout.html/minimal-furniture-in-the-room
Path的進化
別忘了其它可⽤用的資源GPS加速計電⼦子羅盤相機⿆麥克⾵風
氣壓計溫度計
照度計距離感測計
加速度計 (Accelerometer)
http://www.yetihq.com/blog/iphone-accelerometer-calibration/ http://lonelysandwich.com/post/48198569/tilt-scrolling-instapaper-pro
相機
辨識
http://www.newmobilelife.com/2012/02/23/scan-qr-code/
⿆麥克⾵風
Pah....Pah...
http://www.youtube.com/watch?v=r1vxeiDFoTk&feature=player_embedded#!
擴增實境
http://blog.indecplus.com/?p=1597
通訊錄
https://play.google.com/store/apps/details?id=gogolook.callgogolook2&hl=zh_TW
動畫與轉場
⾏行動使⽤用者經驗設計重點
把焦點放在最重要的功能
評估使⽤用者需要什麼內容
避免無謂的步驟
不花⼼心思就會⽤用
隨時準備被打斷
使⽤用者經驗設計策略
iPhone也才滿5歲
http://www.flixya.com/photo/2087027/iphone-cake
界線變得模糊
數位匯流正在進⾏行
Evolution of converged cross-platform services [Source: Analysys Mason, 2011]
電視 遊戲機 PC 平板 ⼿手機
遊戲
APP
⾳音樂
影⽚片
應⽤用
Double Diamond設計流程
Discover Define Develop Deliver
願景點⼦子 成果
Design Council, 2005
時間
以原型驅動設計
Discover Define Develop Deliver
願景點⼦子 成果
Design Council, 2005
時間
戰略 戰術
你App在服務當中扮演什麼⾓角⾊色？
http://www.multiscreen-experience.com/?page_id=47
只要做的對就有機會
台灣使用者經驗設計協會(UiGathering)創會成員與工作小組理事
李易修 Justin Lee
·•www.lis186.com·•[email protected]·•twitter @lis186
感謝您的聆聽！
