hp19 mobile design: 為行動使用者設計
DESCRIPTION
利用三隻小豬的故事介紹適合用於行動應用程式規劃的劇本法設計。TRANSCRIPT
![Page 1: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/1.jpg)
為行動使用者設計阿修
![Page 2: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/2.jpg)
李易修 Justin Lee赫迅互動科技 使用者經驗架構師
![Page 3: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/3.jpg)
阿修設計研究 使用者經驗設計 程式設計
lis186
![Page 4: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/4.jpg)
UiGathering3,5,7,9,11,12月第三個週六
![Page 6: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/6.jpg)
![Page 7: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/7.jpg)
![Page 8: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/8.jpg)
所為何來?
![Page 9: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/9.jpg)
我想離職寫APP
![Page 10: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/10.jpg)
我們公司也要出APP
![Page 11: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/11.jpg)
![Page 12: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/12.jpg)
要支援 和
![Page 13: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/13.jpg)
要有 照相功能
![Page 14: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/14.jpg)
可以分享到
![Page 15: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/15.jpg)
畫架構、寫規格
圖片取自http://sugarcomastudios.com/web1_spring11/?p=1556
![Page 16: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/16.jpg)
找外包/開始寫程式
![Page 17: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/17.jpg)
需求
實作
發佈
![Page 18: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/18.jpg)
但是...
![Page 19: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/19.jpg)
目的?
![Page 20: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/20.jpg)
給誰用?
![Page 21: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/21.jpg)
何時用?
![Page 22: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/22.jpg)
![Page 23: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/23.jpg)
需求
實作
發佈
![Page 24: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/24.jpg)
圖片取自http://www.handyui.com/2007/03/24/compromised_design/
![Page 25: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/25.jpg)
需求
實作
發佈
設計
![Page 26: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/26.jpg)
是不是把圖畫漂亮一點就行了?
![Page 27: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/27.jpg)
NO!
![Page 28: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/28.jpg)
更重要是考慮產品 如何運作設計不僅要關注外觀,
圖片取自http://www.wired.com/culture/geekipedia/magazine/geekipedia/fake_steve_jobs
![Page 29: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/29.jpg)
需求分析
設計
原型製作
實作
發佈
![Page 30: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/30.jpg)
怎麼開始?
![Page 31: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/31.jpg)
從說故事開始
![Page 32: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/32.jpg)
說使用者與
他們從事的活動的故事
![Page 33: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/33.jpg)
圖片取自http://gatheringbooks.wordpress.com/2010/12/22/more-fractured-tales-of-the-three-little-pigs/
![Page 34: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/34.jpg)
圖片取自http://www.thefeltsource.com/FairyTales.html
![Page 35: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/35.jpg)
Scenario-Based Design劇本法設計
![Page 36: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/36.jpg)
瞭解使用者的任務與互動,藉此導出設計需求與重要議題
![Page 37: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/37.jpg)
趁早發現問題
![Page 38: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/38.jpg)
使用者
情境 物品
活動
知識與習慣
功能與面貌背景環境與狀況
![Page 39: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/39.jpg)
使用者
情境 ?活動
知識與習慣
功能與面貌背景環境與狀況
![Page 40: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/40.jpg)
角色 活動 情境 物品
圖片取自http://es.123rf.com/photo_6550491_countryside-cartoon-landscape-objects-isolated.html
![Page 41: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/41.jpg)
圖片取自http://www.kids-pages.com/folders/colpages/The_Three_Little_Pigs/page1.htm
![Page 42: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/42.jpg)
能趕快有個地方住就好了
圖片取自http://www.dreamstime.com/royalty-free-stock-image-three-little-pigs-part-1-image744546
![Page 43: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/43.jpg)
蓋個可以遮風避雨的房子就好了
![Page 44: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/44.jpg)
舒適與安全最重要
![Page 45: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/45.jpg)
問題劇本1
圖片取自http://impactinit.assetsdelivery.com/thumbnails/ancello/ancello1103/ancello110300321.jpghttp://2.bp.blogspot.com/-q4KCYmVOmEU/TaG_Ta3LoUI/AAAAAAAAALI/khyCFtpK0Q8/s1600/Three-Little-Pigs3.jpg
![Page 46: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/46.jpg)
問題劇本2
圖片取自http://2.bp.blogspot.com/-53rlVz3Qw-k/TaG_gx_pa8I/AAAAAAAAALM/3ee3zdDuwVQ/s1600/Three-Little-Pigs4.jpghttp://impactinit.assetsdelivery.com/thumbnails/ancello/ancello1103/ancello110300321.jpg
![Page 47: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/47.jpg)
問題劇本3
圖片取自http://impactinit.assetsdelivery.com/thumbnails/ancello/ancello1103/ancello110300321.jpghttp://www.kids-pages.com/folders/stories/The_Three_Little_Pigs/page9.htmhttp://ancientevangelicalfuture.blogspot.com/2008/09/three-little-pigs-and-life-of-faith.html
![Page 48: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/48.jpg)
設計需求
防狼
多人同住
快速施工
![Page 49: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/49.jpg)
需求的排序
重要性 頻率 沮喪度 總分
(重要性+頻率)X沮喪度排序
快速施工 5 1 3 18 2
防狼 3 2 5 25 1
多人同住 2 3 2 10 3
![Page 50: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/50.jpg)
可能的規格
磚造平房 壁爐有門可上鎖
![Page 51: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/51.jpg)
圖片取自http://www.cartoonstock.com/directory/d/destruction.asp
可能的規格
![Page 52: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/52.jpg)
改繪自"Usability Engineering: Scenario-Based Development of Human Computer Interaction" by Mary Beth Rosson, John M. Carroll
問題劇本 功能清單現狀觀察
概念劇本
需求分析
設計
原型製作
隱喻、慣例、設計準則
規格
分析
評估
![Page 53: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/53.jpg)
圖片取自http://stjohnsblogs.co.uk/class5/3-little-pigs-a-story-map/
![Page 54: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/54.jpg)
圖片截取自http://www.spectronicsinoz.com/downloads/activity/pigs_story.pdf
![Page 55: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/55.jpg)
一些叮嚀
![Page 56: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/56.jpg)
小心那些不可能出現的故事
圖片取自http://jay506.pixnet.net/blog/post/28232467
![Page 57: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/57.jpg)
Jakob Nielsen (1993). Usabil ity Engineering.
系統接受度
社會接受度個人接受度
可靠度相容性 價格
功能性
實用性
可用性
其他
易學 有效率 易記憶 少錯誤 愉悅
請回到真實世界
![Page 58: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/58.jpg)
先瞭解該平台的慣例,再創新
圖片取自http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/UEBestPractices/UEBestPractices.html#//apple_ref/doc/uid/TP40006556-CH20-SW1
iPhone iOS Human Interface Guidelines
![Page 59: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/59.jpg)
選一件事,做到最好!
圖片取自http://www.evolife.cn/wp-content/uploads/2008/07/giant-knife-2007.jpg
![Page 60: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/60.jpg)
我已經仔細思考過了!
![Page 61: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/61.jpg)
要支援 和
![Page 62: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/62.jpg)
要有 照相功能
![Page 63: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/63.jpg)
可以分享到
![Page 64: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/64.jpg)
也有了基本的規劃
圖片取自http://sugarcomastudios.com/web1_spring11/?p=1556
![Page 65: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/65.jpg)
不過....
![Page 66: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/66.jpg)
誰來把它做出來?
![Page 67: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/67.jpg)
設計必須求取平衡
使用者需求
商業目標
技術可行性
![Page 68: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/68.jpg)
活動網站
![Page 69: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/69.jpg)
![Page 70: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/70.jpg)
跨平台的開發框架只需要一套原始碼,就能夠發佈到iPhone, iPad與Android平台。
![Page 71: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/71.jpg)
採用開放的web技術無須學習Objective C或Java, 只要使用您已熟悉的javascript語言,便能開發行動應用程式。
![Page 72: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/72.jpg)
真正的原生行動應用程式超過三百種API,使用者介面元件、各類感應器存取、多媒體、地圖、資料庫,甚至是社交網路的整合以及LBS的運用。
![Page 73: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/73.jpg)
![Page 74: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/74.jpg)
別為了裝置而設計要為使用者而設計
![Page 75: HP19 Mobile Design: 為行動使用者設計](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c806444a79593e098b45c8/html5/thumbnails/75.jpg)
謝謝!