HP19 Mobile Design: 為行動使用者設計

75
為行動使用者設計 阿修

description

利用三隻小豬的故事介紹適合用於行動應用程式規劃的劇本法設計。

Transcript of HP19 Mobile Design: 為行動使用者設計

Page 1: HP19 Mobile Design: 為行動使用者設計

為行動使用者設計阿修

Page 2: HP19 Mobile Design: 為行動使用者設計

李易修 Justin Lee赫迅互動科技 使用者經驗架構師

Page 3: HP19 Mobile Design: 為行動使用者設計

阿修設計研究 使用者經驗設計 程式設計

lis186

Page 4: HP19 Mobile Design: 為行動使用者設計

UiGathering3,5,7,9,11,12月第三個週六

Page 5: HP19 Mobile Design: 為行動使用者設計

阿修的部落格www.lis186.com

Page 6: HP19 Mobile Design: 為行動使用者設計
Page 7: HP19 Mobile Design: 為行動使用者設計
Page 8: HP19 Mobile Design: 為行動使用者設計

所為何來?

Page 9: HP19 Mobile Design: 為行動使用者設計

我想離職寫APP

Page 10: HP19 Mobile Design: 為行動使用者設計

我們公司也要出APP

Page 11: HP19 Mobile Design: 為行動使用者設計
Page 12: HP19 Mobile Design: 為行動使用者設計

要支援 和

Page 13: HP19 Mobile Design: 為行動使用者設計

要有 照相功能

Page 14: HP19 Mobile Design: 為行動使用者設計

可以分享到

Page 15: HP19 Mobile Design: 為行動使用者設計

畫架構、寫規格

圖片取自http://sugarcomastudios.com/web1_spring11/?p=1556

Page 16: HP19 Mobile Design: 為行動使用者設計

找外包/開始寫程式

Page 17: HP19 Mobile Design: 為行動使用者設計

需求

實作

發佈

Page 18: HP19 Mobile Design: 為行動使用者設計

但是...

Page 19: HP19 Mobile Design: 為行動使用者設計

目的?

Page 20: HP19 Mobile Design: 為行動使用者設計

給誰用?

Page 21: HP19 Mobile Design: 為行動使用者設計

何時用?

Page 22: HP19 Mobile Design: 為行動使用者設計
Page 23: HP19 Mobile Design: 為行動使用者設計

需求

實作

發佈

Page 24: HP19 Mobile Design: 為行動使用者設計

圖片取自http://www.handyui.com/2007/03/24/compromised_design/

Page 25: HP19 Mobile Design: 為行動使用者設計

需求

實作

發佈

設計

Page 26: HP19 Mobile Design: 為行動使用者設計

是不是把圖畫漂亮一點就行了?

Page 27: HP19 Mobile Design: 為行動使用者設計

NO!

Page 28: HP19 Mobile Design: 為行動使用者設計

更重要是考慮產品 如何運作設計不僅要關注外觀,

圖片取自http://www.wired.com/culture/geekipedia/magazine/geekipedia/fake_steve_jobs

Page 29: HP19 Mobile Design: 為行動使用者設計

需求分析

設計

原型製作

實作

發佈

Page 30: HP19 Mobile Design: 為行動使用者設計

怎麼開始?

Page 31: HP19 Mobile Design: 為行動使用者設計

從說故事開始

Page 32: HP19 Mobile Design: 為行動使用者設計

說使用者與

他們從事的活動的故事

Page 34: HP19 Mobile Design: 為行動使用者設計

圖片取自http://www.thefeltsource.com/FairyTales.html

Page 35: HP19 Mobile Design: 為行動使用者設計

Scenario-Based Design劇本法設計

Page 36: HP19 Mobile Design: 為行動使用者設計

瞭解使用者的任務與互動,藉此導出設計需求與重要議題

Page 37: HP19 Mobile Design: 為行動使用者設計

趁早發現問題

Page 38: HP19 Mobile Design: 為行動使用者設計

使用者

情境 物品

活動

知識與習慣

功能與面貌背景環境與狀況

Page 39: HP19 Mobile Design: 為行動使用者設計

使用者

情境 ?活動

知識與習慣

功能與面貌背景環境與狀況

Page 40: HP19 Mobile Design: 為行動使用者設計

角色 活動 情境 物品

圖片取自http://es.123rf.com/photo_6550491_countryside-cartoon-landscape-objects-isolated.html

Page 42: HP19 Mobile Design: 為行動使用者設計

能趕快有個地方住就好了

圖片取自http://www.dreamstime.com/royalty-free-stock-image-three-little-pigs-part-1-image744546

Page 43: HP19 Mobile Design: 為行動使用者設計

蓋個可以遮風避雨的房子就好了

Page 44: HP19 Mobile Design: 為行動使用者設計

舒適與安全最重要

Page 48: HP19 Mobile Design: 為行動使用者設計

設計需求

防狼

多人同住

快速施工

Page 49: HP19 Mobile Design: 為行動使用者設計

需求的排序

重要性 頻率 沮喪度 總分

(重要性+頻率)X沮喪度排序

快速施工 5 1 3 18 2

防狼 3 2 5 25 1

多人同住 2 3 2 10 3

Page 50: HP19 Mobile Design: 為行動使用者設計

可能的規格

磚造平房 壁爐有門可上鎖

Page 51: HP19 Mobile Design: 為行動使用者設計

圖片取自http://www.cartoonstock.com/directory/d/destruction.asp

可能的規格

Page 52: HP19 Mobile Design: 為行動使用者設計

改繪自"Usability Engineering: Scenario-Based Development of Human Computer Interaction" by Mary Beth Rosson, John M. Carroll

問題劇本 功能清單現狀觀察

概念劇本

需求分析

設計

原型製作

隱喻、慣例、設計準則

規格

分析

評估

Page 53: HP19 Mobile Design: 為行動使用者設計

圖片取自http://stjohnsblogs.co.uk/class5/3-little-pigs-a-story-map/

Page 54: HP19 Mobile Design: 為行動使用者設計

圖片截取自http://www.spectronicsinoz.com/downloads/activity/pigs_story.pdf

Page 55: HP19 Mobile Design: 為行動使用者設計

一些叮嚀

Page 56: HP19 Mobile Design: 為行動使用者設計

小心那些不可能出現的故事

圖片取自http://jay506.pixnet.net/blog/post/28232467

Page 57: HP19 Mobile Design: 為行動使用者設計

Jakob Nielsen (1993). Usabil ity Engineering.

系統接受度

社會接受度個人接受度

可靠度相容性 價格

功能性

實用性

可用性

其他

易學 有效率 易記憶 少錯誤 愉悅

請回到真實世界

Page 58: HP19 Mobile Design: 為行動使用者設計

先瞭解該平台的慣例,再創新

圖片取自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: 為行動使用者設計

選一件事,做到最好!

圖片取自http://www.evolife.cn/wp-content/uploads/2008/07/giant-knife-2007.jpg

Page 60: HP19 Mobile Design: 為行動使用者設計

我已經仔細思考過了!

Page 61: HP19 Mobile Design: 為行動使用者設計

要支援 和

Page 62: HP19 Mobile Design: 為行動使用者設計

要有 照相功能

Page 63: HP19 Mobile Design: 為行動使用者設計

可以分享到

Page 64: HP19 Mobile Design: 為行動使用者設計

也有了基本的規劃

圖片取自http://sugarcomastudios.com/web1_spring11/?p=1556

Page 65: HP19 Mobile Design: 為行動使用者設計

不過....

Page 66: HP19 Mobile Design: 為行動使用者設計

誰來把它做出來?

Page 67: HP19 Mobile Design: 為行動使用者設計

設計必須求取平衡

使用者需求

商業目標

技術可行性

Page 68: HP19 Mobile Design: 為行動使用者設計

活動網站

Page 69: HP19 Mobile Design: 為行動使用者設計
Page 70: HP19 Mobile Design: 為行動使用者設計

跨平台的開發框架只需要一套原始碼,就能夠發佈到iPhone, iPad與Android平台。

Page 71: HP19 Mobile Design: 為行動使用者設計

採用開放的web技術無須學習Objective C或Java, 只要使用您已熟悉的javascript語言,便能開發行動應用程式。

Page 72: HP19 Mobile Design: 為行動使用者設計

真正的原生行動應用程式超過三百種API,使用者介面元件、各類感應器存取、多媒體、地圖、資料庫,甚至是社交網路的整合以及LBS的運用。

Page 73: HP19 Mobile Design: 為行動使用者設計
Page 74: HP19 Mobile Design: 為行動使用者設計

別為了裝置而設計要為使用者而設計

Page 75: HP19 Mobile Design: 為行動使用者設計

謝謝!