of 106 /106
App設計實戰: 在開始寫程式之前 李易修 工作坊 D

2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Embed Size (px)

DESCRIPTION

台灣使用者經驗高峰會工作坊 D - App設計實戰:在開始寫程式之前主持人:李易修 Justin Lee赫迅互動科技 使用者經驗架構師UiGathering創會成員與工作小組理事概要:在 App 開發過程當中,我們往往過於急著開始寫程式,輕忽了 App 前期規劃的重要性,以至於功能與使用者介面無法滿足使用者期望與需要。本工作坊的目標在於讓學員了解設計的重要性與熟悉劇本法設計與動態草圖等設計方法。本工作坊的進行方式將由講師先介紹 App 前期規劃時要留意的事項,與可應用於實際開發時的設計方法,再讓學員分組實地演練,最後和大家分享設計。

Text of 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Page 1: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

App設計實戰:在開始寫程式之前

李易修

工作坊 D

Page 2: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

李易修 Justin Lee·•赫迅互動科技 使用者經驗架構師·•UiGathering創會成員與工作小組理事

·•www.lis186.com·•[email protected]·•twitter, plurk: @lis186

Page 3: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

請把手機、平板、電腦收起來

Page 4: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

需求 實作 發佈

Page 5: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

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

Page 6: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

進展快速,但方向錯誤

Page 7: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

需求 實作 發佈

Page 8: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

需求 實作 發佈設計

Page 9: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

設計不只是把圖畫漂亮一些

Page 10: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

設計是全盤瞭解後產出解決方案

目標

功能

架構

介面

視覺

改繪自"The Elements of User Experience: User-Centered Design for the Web” by Jesse James Garrett

Page 11: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

需求 實作 發佈設計

Page 12: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

需求 實作 發佈設計

Page 13: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

實作 發佈設計需求

Page 14: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

需求 設計

Page 15: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

需求 設計

劇本法設計 草圖

活動

Page 16: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

動手畫: 視覺元素ABC

3分鐘

各自在A3紙上練習

Page 17: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

動手畫: 畫出你的手機

1分鐘

畫在便利貼上

Page 18: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

動手畫: 畫出你最愛的App

1分鐘

畫在便利貼上

Page 19: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

動手畫: 幫隔壁組員畫張半身像

2分鐘

畫在便利貼上

Page 20: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

他/她的名字是____

用的手機是_____

愛用的App有_____

因為____

代言人: 幫組員自我介紹

2分鐘+30秒

把前面的素材貼在A3紙上

Page 21: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
Page 22: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
Page 23: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
Page 24: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
Page 25: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
Page 26: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

心智模式不同

Page 27: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

心智模式相符

Page 28: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

消費者要什麼?

Page 29: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
Page 30: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

劇本法設計利用說故事的方式,預測系統的使用情境,

在早期發現問題和設計機會。

Page 31: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

使用者

環境 物品

活動

知識與習慣

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

Page 32: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

使用者

環境 ?

活動

知識與習慣

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

Page 35: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

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

問題劇本

功能清單

現狀觀察

概念劇本

需求分析 設計 原型製作

慣例、設計準則

規格

劇本法設計流程

Page 36: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

現在 未來

問題 解決方案

Page 37: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

1.想像

2.建構

3.進入

4.探索

5.離開

圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo

Page 38: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
Page 39: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

1.想像

2.建構

3.進入

4.探索

5.離開

圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo

故事的元素

Page 40: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

1.想像

2.建構

3.進入

4.探索

5.離開

圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo

合理的場景

Page 41: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

1.想像

2.建構

3.進入

4.探索

5.離開

圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo

編故事

Page 42: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

1.想像

2.建構

3.進入

4.探索

5.離開

圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo

發現需求

Page 43: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

1.想像

2.建構

3.進入

4.探索

5.離開

圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo

產生靈感

Page 44: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Brainstorm: 你在哪裡用App?

2分鐘

寫在便利貼上

Page 45: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Brainstorm: 你用App用來做什麼?

2分鐘

寫在便利貼上

Page 46: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

編個合理的故事

作為一個通勤族,我在公車亭內等車的時候,用手機查公車還有多久會來,是很合理的一件事。

Page 47: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

編故事

圖:少林足球

Page 48: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

討論: 編5個故事

作為一個___________,我在_______做___,用手機_______________________,是很合理的一件事。

把剛剛的便利貼貼在A3紙上,1個故事1張

3分鐘

Page 49: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Brainstorm: 同理心地圖

12分鐘

做感覺

選1個剛剛編的故事,在全開紙上設想主角的狀況

上班族

在站牌等公車

Page 50: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

通勤族

公車亭 站牌

等車

公車還有多久會來?

從情境找需求

Page 51: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

通勤族

公車亭 站牌

等車

從環境看限制

太熱,不想等太久

公車還有多久會來?

Page 52: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

通勤族

公車亭 站牌

等車

過去怎麼解決?

公車還有多久會來?

看班次表太熱,不想等太久

有沒有人等車?

靠經驗

Page 53: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

通勤族

公車亭 App

等車

解決辦法可以是?

公車還有多久會來?

到站提醒

太熱,不想等太久

查詢等候時間

Page 54: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

通勤族

公車站牌 ?

等車

坐幾號車可以到?

公車還有多久會來?

通勤族

公車上 ?

坐車

會不會遲到?

不同情境有不同的需求

Page 55: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Brainstorm:問題與可能解決辦法

20分鐘

在全開紙上完成主要情境的問題與可能解決方案

Page 56: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

海怪印度

改繪自"Gamestorming”, page 5 by Dave Gray, Sunni Brown, and James Macanufo

青春不老泉要往哪裡去?

Page 57: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Brainstorm:列出功能清單在A3紙上列出功能

3分鐘改繪自"Gamestorming”, page 245 by Dave Gray, Sunni Brown, and James Macanufo

Page 58: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

休息3:40回來

Page 59: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

NUF測試:決定重要性新穎性、有用度、可行性

3分鐘取自"Gamestorming”, page 245 by Dave Gray, Sunni Brown, and James Macanufo

Page 60: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Brainstorm:產品定義描述寫在A3紙上,儘量大

6分鐘

幫助公車通勤族準確預估到站時間,減少無意義的等待。

BusGoGo

Page 61: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

http://moobileframes.tumblr.com/post/2761211624/ozon-ru-online-store

框架圖(wireframe)

Page 63: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

原型(prototype)

http://katiemccurdy.com/walk/?page_id=207

Page 64: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
Page 65: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

時間

精確度

草圖

原型

Page 66: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

草圖不是原型草圖用於設計 原型用於修正

“Sketching User Experience”, Bill Buxton

Page 67: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

邊畫邊想

Page 68: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

草圖

速度最重要

重點不是好看,而是畫的時候學到的事

品質不需要太好,可以傳達概念就好

隨時可以丟掉重畫

Page 69: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
Page 71: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

畫草圖:App主要功能各自畫在A3紙上,至少3個畫面

3分鐘http://johnhenrybarac.com/notes-on-designing-the-guardian-iphone-app/

Page 72: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

討論:第一次草圖組內討論各草圖的優點、缺點

6分鐘http://johnhenrybarac.com/notes-on-designing-the-guardian-iphone-app/

Page 73: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

畫草圖:改善各自畫在A3紙上,至少3個畫面

3分鐘http://johnhenrybarac.com/notes-on-designing-the-guardian-iphone-app/

Page 74: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

討論:第二次草圖組內討論各草圖的優點、缺點

6分鐘http://johnhenrybarac.com/notes-on-designing-the-guardian-iphone-app/

Page 75: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

App設計小技巧

Page 76: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

直接操作

http://gesturecons.com/

Page 77: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

按鈕大於8x8mm,間距大於5mm

i

Page 78: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

考慮握持方式

http://gesturecons.com/

Page 79: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

小心手指遮擋畫面

Page 80: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

哪裡怪怪的?

Page 81: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

尊重不同OS的差異

Page 82: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

提供剛好足夠的訊息

Page 83: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

別忘了sensor

Page 84: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

別過度設計

Page 85: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

iPhone UI模式

Page 86: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

TabBar

Page 87: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

NavigationBar

Page 88: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

ToolBar

Page 89: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Android UI模式

Page 90: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Hardware Buttons

Page 91: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Action Bar

Page 92: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Workspace

Page 93: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Dashboard

Page 94: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Search Bar

Page 95: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Quick Action

Page 96: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Widget

Page 97: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

協同合作:共同發展App畫在便利貼上,再貼到全開紙上安排流程

8分鐘

Page 98: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

檢討:共同發展的App討論設計的優點、缺點,寫在小張便利貼上

8分鐘

Page 99: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

每組發表2分鐘

Page 100: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

複雜性守恆定律(Tesler's law)

一個系統的複雜度是固定的,當你想讓操作變得簡單,藏在背後的複雜度便會增加。

Page 101: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

將UX融入開發流程

http://www.targetprocess.com/blog/wp-content/uploads/2011/02/5.jpg

Page 102: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

經驗

功能

科技

Page 103: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

Titanium API

Titanium Mobile簡單, 原生, 跨平台

Page 104: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
Page 105: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

只須維護一套原始碼

Javascript原始碼+素材Titanium API

Page 106: 2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

謝謝指教!

·•赫迅互動科技 使用者經驗架構師·•UiGathering創會成員與工作小組理事

李易修 Justin Lee

·•www.lis186.com·•[email protected]·•twitter, plurk: @lis186