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

李易修

工作坊 D

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

·•www.lis186.com·•lis186@gmail.com·•twitter, plurk: @lis186

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

需求 實作 發佈

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

進展快速，但方向錯誤

需求 實作 發佈

需求 實作 發佈設計

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

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

目標

功能

架構

介面

視覺

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

需求 實作 發佈設計

需求 實作 發佈設計

實作 發佈設計需求

需求 設計

需求 設計

劇本法設計 草圖

境

人

物

活動

動手畫: 視覺元素ABC

3分鐘

各自在A3紙上練習

動手畫: 畫出你的手機

1分鐘

畫在便利貼上

動手畫: 畫出你最愛的App

1分鐘

畫在便利貼上

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

2分鐘

畫在便利貼上

他/她的名字是＿＿＿＿

用的手機是＿＿＿＿＿

愛用的App有＿＿＿＿＿

因為＿＿＿＿

代言人: 幫組員自我介紹

2分鐘+30秒

把前面的素材貼在A3紙上

心智模式不同

心智模式相符

消費者要什麼？

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

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

使用者

環境 物品

活動

知識與習慣

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

使用者

環境 ？

活動

知識與習慣

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

http://www.bonnier.com/en/content/digital-magazines-bonnier-mag-prototype

http://www.bonnier.com/en/content/digital-magazines-bonnier-mag-prototype

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

問題劇本

功能清單

現狀觀察

概念劇本

需求分析 設計 原型製作

慣例、設計準則

規格

劇本法設計流程

現在 未來

問題 解決方案

1.想像

2.建構

3.進入

4.探索

5.離開

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

1.想像

2.建構

3.進入

4.探索

5.離開

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

故事的元素

1.想像

2.建構

3.進入

4.探索

5.離開

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

合理的場景

1.想像

2.建構

3.進入

4.探索

5.離開

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

編故事

1.想像

2.建構

3.進入

4.探索

5.離開

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

發現需求

1.想像

2.建構

3.進入

4.探索

5.離開

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

產生靈感

Brainstorm: 你在哪裡用App？

2分鐘

寫在便利貼上

Brainstorm: 你用App用來做什麼？

2分鐘

寫在便利貼上

編個合理的故事

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

編故事

圖：少林足球

討論: 編5個故事

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

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

3分鐘

Brainstorm: 同理心地圖

12分鐘

說

想

看

做感覺

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

上班族

在站牌等公車

通勤族

公車亭 站牌

等車

公車還有多久會來？

從情境找需求

通勤族

公車亭 站牌

等車

從環境看限制

太熱，不想等太久

公車還有多久會來？

通勤族

公車亭 站牌

等車

過去怎麼解決？

公車還有多久會來？

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

有沒有人等車？

靠經驗

通勤族

公車亭 App

等車

解決辦法可以是？

公車還有多久會來？

到站提醒

太熱，不想等太久

查詢等候時間

通勤族

公車站牌 ?

等車

坐幾號車可以到？

公車還有多久會來？

通勤族

公車上 ?

坐車

會不會遲到？

不同情境有不同的需求

Brainstorm:問題與可能解決辦法

20分鐘

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

海怪印度

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

青春不老泉要往哪裡去？

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

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

休息3:40回來

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

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

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

6分鐘

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

BusGoGo

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

框架圖(wireframe)

草圖(sketch)

http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/design-an-iphone-bank-app-in-photoshop-part-1/

原型(prototype)

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

時間

精確度

草圖

原型

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

“Sketching User Experience”, Bill Buxton

邊畫邊想

草圖

速度最重要

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

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

隨時可以丟掉重畫

http://www.flickr.com/photos/d2clon/4402993445/

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

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

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

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

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

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

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

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

App設計小技巧

直接操作

http://gesturecons.com/

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

i

考慮握持方式

http://gesturecons.com/

小心手指遮擋畫面

哪裡怪怪的？

尊重不同OS的差異

提供剛好足夠的訊息

別忘了sensor

別過度設計

iPhone UI模式

TabBar

NavigationBar

ToolBar

Android UI模式

Hardware Buttons

Action Bar

Workspace

Dashboard

Search Bar

Quick Action

Widget

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

8分鐘

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

8分鐘

每組發表2分鐘

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

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

將UX融入開發流程

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

經驗

功能

科技

Titanium API

Titanium Mobile簡單, 原生, 跨平台

只須維護一套原始碼

Javascript原始碼+素材Titanium API

謝謝指教！

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

李易修 Justin Lee

·•www.lis186.com·•lis186@gmail.com·•twitter, plurk: @lis186