week2.user experience design process (uxd of i can) good version condensed

iCAN的用戶體驗設計過程UXDP of iCAN

• 指導教授：唐玄輝副教授、陳彥仰助理教授

• 設計者：鄭群萌

• 介面設計合作：官佩萱

• iOS 版本技術合作：台大資工- 陳雍協、蔡松昇、林霓苗

Iteration

UXResearch UXDesign UXTesting UXEntrepreneurship

UXDesign Process

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

Kids with Autism一種潛在兒童期的心理疾病，特徵為社交與溝通能力缺失，且對環境缺乏興趣，執著於特定事物。


2010 -2012


Individuals with autism are often unable to use oral communication to express themselves comprehensively and thus suffered from many communicational obstacles. Current solutions are heavy communication books where numerous pictures stored in order to prepare their oral presentation skills. With clear interface, easy operations, and lightweight, iCan integrates sounds, figures, words to smoothen the learning process for autistic children. Its functions include the help to pronounce words correctly, to structure sentences, and to collect personal database for figures. Through the aid of iCan, hopefully autistic children can learn basic oral communicational skills.

iCAN Intelligent Communication Board for iOS & Android System


2010 -2012


柳丁炸雞腿葡萄薯條奇異果

水三明治蘋果餅乾漢堡

溝通圖卡與造句

Design Feature 1

操作容易，且系統性地分類圖最卡，可快速找到所需的圖片。

動詞

文具

食物

角色

交通

地點

副詞

娛樂

時間

情緒狀態

形容詞

日常用品


2010 -2012





Design Feature 2

輕按一下圖卡即可播放單字音效。

動詞

文具

食物

角色

交通

地點

副詞

娛樂

時間

情緒狀態

形容詞

日常用品


2010 -2012





動詞

文具

食物

角色

交通

地點

副詞

娛樂

時間

情緒狀態

形容詞

日常用品


2010 -2012





Design Feature 3

圖文轉換功能，進階學習認字能力。

動詞

文具

食物

角色

交通

地點

副詞

娛樂

時間

情緒狀態

形容詞

日常用品


2010 -2012

iCAN ProjectDesign Process / 溝通圖卡與造句

Design Feature 3


動詞

文具

食物

角色

交通

地點

副詞

娛樂

時間

情緒狀態

形容詞

日常用品


2010 -2012




Design Feature 3


動詞

文具

食物

角色

交通

地點

副詞

娛樂

時間

情緒狀態

形容詞

日常用品


2010 -2012




要我蘋果

Design Feature 4

長按選擇圖片圖卡，進行造句練習，透過聲音誘導其開口訓練基本溝通能力，完全符合現有教育模式。

動詞

文具

食物

角色

交通

地點

副詞

娛樂

時間

情緒狀態

形容詞

日常用品


2010 -2012


要

常用溝通語

我想上廁所

我想洗澡

吃炸雞排

去學校上學

我要蘋果

1

要我蘋果

儲存日期：2011 / 07 / 20使用次數：32 次


2010 -2012


要

常用溝通語

我想上廁所

我想洗澡

吃炸雞排

去學校上學

我要蘋果

1

要我蘋果

儲存日期：2011 / 07 / 20使用次數：32 次

Design Feature 5

可儲存日常常用句子，父母可透過此功能教導孩子反覆的練習，增加學習使用的效率。


2010 -2012

iCAN ProjectDesign Process / 新增圖卡與編輯

新增圖卡我他們妹妹姊姊

爺爺奶奶大家你們他

我們爸爸媽媽哥哥弟弟

動詞

文具

食物

角色

交通

地點

副詞

娛樂

時間

情緒狀態

形容詞

日常用品


2010 -2012

iCAN ProjectDesign Process / 新增圖卡與編輯

新增圖卡我他們妹妹姊姊

爺爺奶奶大家你們他

我們爸爸媽媽哥哥弟弟

Design Feature 6

新增圖卡與編輯的功能可以幫助在最短的時間內透過鏡頭拍照、手寫、相簿來建立圖卡。

動詞

文具

食物

角色

交通

地點

副詞

娛樂

時間

情緒狀態

形容詞

日常用品

THE FIRST ITERATION

2010.10使用者訪談&概念設計

2011.05新一代設計展與台大資工合作(iOS)

2011.10IDA臺北世界設計大會

2011.03國科會前瞻概念設計計劃

2011.06台大資工(iOS) 與駟馬科技(Android)

2011.10Android 使用者介面設計競賽-冠軍、遠傳平板獎、企業獎

2010.10

• Concept Design

2011.10

2010.10 ~ 2011.10

Part 1


2011 NSC DESIDN


DESIGNERS

USERS

設計的流程右圖是iCan前期的設計流程，從設計師


2011 NSC DESIDN



2011 NSC DESIDN


DESIGNERS

USERS

設計的流程右圖是iCan前期的設計流程，從設計師

Part 1


2011 NSC DESIDN



2011 NSC DESIDN


手工圖卡：

1. 數量多佔空間。

2. 圖卡容易遺失。

3. 製作圖卡過程辛苦，身心疲倦。

問題發現經由訪談後發現，現有的溝通輔具、材料存在著許多

不方便的問題。

語音溝通版：

1. 厚重不易攜帶。

2. 漫畫圖片不易理解。

3. 尋找圖卡費時與困難。


2011 NSC DESIDN


電源開關/音量控制

功能鍵/照相按鍵

喇叭底部:充電處

觸控筆(有固定線以免遺失)

視訊(正反面) /Mic


2011 NSC DESIDN


10


2011 NSC DESIDN



2011 NSC DESIDN


The 1st half circle has completed.

概念與介面完成

UXResearch

USER EXPECTATION RESEARCH

•了解一個產品、過程、服務、系統的現有的或是潛在的使用者，及其使用情境，行為模式和需求的活動

•問題尋找的過程、使用者創新的起點

•模糊的前端 (fuzzy front end)

•我不知道妳會問這麼多，我已經快要掉眼淚了，因為我不太去想以前的事情，不好意思。

•而且以前就是，我們在做那些圖卡，可能爸爸哥哥都會幫忙，做到最後大家都很累了。因為白天都沒時間，都做到半夜兩三點，最後只剩下媽媽在做了。

•原來的輔具他不喜歡，一下子就不玩了，老師都以為我不認真

•照顧者的負擔 (BURDEN of CAREGIVER)

ICAN UXRESEARCH

THE SECOND ITERATION







2010.10

• Concept Design

2011.10

2010.10 ~ 2011.10

Part 2


2011 NSC DESIDN


DESIGNERS

ENGINEERS

USERS

MEDICAL

設計的流程右圖是iCan後期的設計流程，加入了醫療驗證研究與跨領域的合作，讓整個設

Part 2


2011 NSC DESIDN


UI Idea Sketch構想新的UI的設計，從操作的方式、功能、位置、直覺性...等等，都是需要考慮的條件。

設計定位改變：

一切地表達都需從學習開始，

應該是幫助父母減輕教學的負擔。

輔具，不是單獨使用與自我學習。

適合 4 - 7 years。


2011 NSC DESIDN



2011 NSC DESIDN


初版完成 / 設計理念結合前瞻科技與數位化分類系統，幫助自閉症學童能夠簡單地操作讓使用過程更加順暢，進而訓練基本溝通力。


iCAN Intelligent Communication Board for iPad2


2011 NSC DESIDN


DESIGNERS

ENGINEERS

USERS

MEDICAL


Part 2


2011 NSC DESIDN


分類欄


溝通圖卡與造句常用溝通語新增圖卡與編輯

動畫操作的呈現發現用圖片放在iPad 不太容易讓人理

解，只能作為視覺上的修改參考。

因此我必須去學習心得工具達到介面模

擬操作，完成我想表達的需求。

製作軟體：Mac - iWork Keynote

keynote:/Users/Chinghui/Desktop/%E8%A8%AD%E8%A8%88%E7%89%B9%E8%89%B2.key?id=BGSlide-0







keynote:/Users/Chinghui/Desktop/2011%20NSC%20DESIGN%20%E6%8B%B7%E8%B2%9D.key?id=BGSlide-27

keynote:/Users/Chinghui/Desktop/2011%20NSC%20DESIGN%20%E6%8B%B7%E8%B2%9D.key?id=BGSlide-27


2011 NSC DESIDN


使用者調查 - 開心的表情我把介面圖片放到iPad上，並拿給使用者看，他

們相當驚訝與興奮，開始提供更多新的想法，並

詢問一些介面配置的意見，例如iCon、圖片大


2011 NSC DESIDN


DESIGNERS

ENGINEERS

USERS

MEDICAL


Part 2


2011 NSC DESIDN


兒童心智發展訓練中心與吳醫師見面後，他很高興聽到iCan的設計，並且告訴我這樣的東西設計出來會很有幫助。


2011 NSC DESIDN


DESIGNERS

ENGINEERS

USERS

MEDICAL


Part 2


2011 NSC DESIDN


巡迴演講推銷認識了台大資工所的陳彥仰老師與實驗室研究生對iCan的案子有興趣與熱誠，因此就開始了跨領域合作的發展。


2011 NSC DESIDN


跨領域合作的第一次Meeting (設計角度)製作 Working Prototype 最初版本，

跨領域合作的過程：

• 操作動畫

• Hierarchy• Desktop Logo Design• RGB 數值

• iCon .PNG• Layout size• XCode

For iPhone, create icons that measure:

For iPad, create an icon that measures:

0 1024

768


2011 NSC DESIDN


開始撰寫程式 - XCode 將必要的UI元件與設計圖傳達給資工

領域的夥伴們，就可以開始進行初步

的程式撰寫了。


2011 NSC DESIDN


新一代設計展2011/05/19-21於世貿二館國科會展區展出。

完成 Working Prototype 最初版本可以將每ㄧ頁的介面畫面存成圖片檔，並實際在平板電腦上顯示播放，好處是較能掌握


2011 NSC DESIDN

iCAN ProjectDesign Process / The 2nd circle has completed.

可運作原形iOS 5.0

UXResearch

UXDesign

THE THIRD ITERATION







2010.10

• Working Prototype• Concept Design

iCAN v1.1

2011.10

2010.10 ~ 2011.10

• Add more User Needs & Experiences

Part 3


2011 NSC DESIDN


DESIGNERS

ENGINEERS

USERS

MEDICAL


Part 3


2011 NSC DESIDN


Designers:

1 . 原先整體UI 配色太灰 2 . 播放、清除、存取按鍵設計3. 圖卡的黑色邊框在細、顏色在淡一些4. 按圖片會撥放音效，結束後仍然會有反白效果5. 常用溝通語加入細節部分:日期+使用次數

-----------------------------------------------------------------

Engineers:

1. UI 與 Working Prototype 的介面一致性。2 . 內建搜尋功能3 . 未來加入網路搜尋圖卡功能 4 . 可以考慮加入文法修正功能5 . 編輯圖卡需加入刪除功能 6 . 編輯圖卡需加入回復預設圖卡功能7. 常用的圖卡可記錄下來，自動排列自最前面8 . 新增後的圖卡到造具功能時需顯示在最前面9 . 播放圖卡聲音的間距可能必須再短。 10. 圖卡可以選擇多種類別 11. 播放時下列造句會跟著跑 12. 造具攔下面顯示圖卡文字

Designers - 介面的修改將之前開會討論的內容整理出來，列出需要修改與新增的清單。


2011 NSC DESIDN


DESIGNERS

ENGINEERS

USERS

MEDICAL


Part 3


2011 NSC DESIDN


User Testing - 小宇媽媽

*2011/07/01 iCan User Testing：

1. 類別有各種顏色的分類提示2. 下方造句列忘了加顯示中文3. 播放的速度是OK的4. 副詞不知道怎麼建立5. 圖文的轉換


2011 NSC DESIDN


DESIGNERS

ENGINEERS

USERS

MEDICAL


Part 3


2011 NSC DESIDN


User Testing - 長庚醫院兒心科


1. 類別有各種顏色的分類提示2. 新增圖卡時容易誤按會跳出3. 常用圖卡功能，圖要大 (較容易記住)4. 播放具備設定次數功能5. 回覆預設功能鍵6. 播放時圖卡要閃


2011 NSC DESIDN


DESIGNERS

ENGINEERS

USERS

MEDICAL


Part 3


2011 NSC DESIDN


Intelligent Communication Board for ASUS Eee Pad TransformerIndividuals with autism are often unable to use oral communication to express themselves comprehensively and thus suffered from many communicational obstacles. Current solutions are heavy communication books where numerous pictures stored in order to prepare their oral presentation skills. With clear interface, easy operations, and lightweight, iCan integrates sounds, figures, words to smoothen the learning process for autistic children. Its functions include the help to pronounce words correctly, to structure sentences, and to collect personal database for figures. Through the aid of iCan, hopefully autistic children can learn basic oral communicational skills.

iCAN

Android 團隊加入

Sapuz 駟馬科技股份有限公司

http://www.sapuz.com/ * 更新內容：

1. 新增圖卡時容易誤按會跳出 2. 常用圖卡功能，大圖顯示 3. 播放具備設定次數功能4. 回覆預設功能鍵5. 直覺性的播放按鈕圖示

http://www.sapuz.com

http://www.sapuz.com


2011 NSC DESIDN


iCan - Android 第二次修改加入了分類顏色，以及圖文轉換的新功能

柳丁柳丁


2011 NSC DESIDN



iCAN Intelligent Communication Board for Android 3.0 System

Android 3.0


2011 NSC DESIDN


iCan - iOS 第二次修改

Old


2011 NSC DESIDN



Old Design


2011 NSC DESIDN



Old Design New


2011 NSC DESIDN



iCAN Intelligent Communication Board for iPad2

iOS 5.0


2011 NSC DESIDN

iCAN ProjectDesign Process / The 3rd circle has completed.

上架免費試用iOS 5.0 Android

UXResearch

UXDesign

UXTesting

THE FORTH ITERATION







2010.10

• Working Prototype • Add more User Needs & Experiences• Concept Design

iCAN v1.1 iCAN v1.2

2011.10

2010.10 ~ 2011.10

iOS 5.0 Android 3.0

2011.11新增功能與問題修正 2012.04

醫學成效驗證

2011.10

2011.12APP Star 高手爭霸戰節目-亞軍、最佳示範獎

• UI layout Modify• Add new function• Bug modify• User Needs &Experiences

2012.03.15iCan 更新

2012.03.19iCan 更新

2012.10

2012.10完成使用者測試

2011.10 ~ 2012.10

Part 4


2011 NSC DESIDN


DESIGNERS

ENGINEERS

USERS

MEDICAL


Part 4


2011 NSC DESIDN


Intelligent Communication Board for iOS and Android 3.0Individuals with autism are often unable to use oral communication to express themselves comprehensively and thus suffered from many communicational obstacles. Current solutions are heavy communication books where numerous pictures stored in order to prepare their oral presentation skills. With clear interface, easy operations, and lightweight, iCan integrates sounds, figures, words to smoothen the learning process for autistic children. Its functions include the help to pronounce words correctly, to structure sentences, and to collect personal database for figures. Through the aid of iCan, hopefully autistic children can learn basic oral communicational skills.

iCAN

iCan 新版設計 (完整版)Designer Idea /

·• 無法建立副詞圖卡 - 新增手寫功能·• 顯示圖卡建立日期·• 介面設計與功能調整


2011 NSC DESIDN


DESIGNERS

ENGINEERS

USERS

MEDICAL


Part 4


2011 NSC DESIDN


User Testing - 小宇媽媽


1. 新增圖卡可以錄製簡短影片2. 圖卡有雙分類機制3. 或許可以有列印功能4. 真的很高興，確實蠻完整的


2011 NSC DESIDN


DESIGNERS

ENGINEERS

USERS

MEDICAL


Part 4


2011 NSC DESIDN


User Testing - 宇寧身心診所 (長庚)

*2011/11/12 & 17 iCan User Testing：

1. 新增圖卡單字量2. 分類類別重新定義3. 規劃下一階段醫學研究計劃

USER EXPERIENCE TEST

•當使用者在特定的場域下欲完成特定的事，產品、過程、服務、系統可以提供多少程度的效果、效率、滿意

•產品完成後


2012 NSC DESIDN


ICAN UXTESTiCan目前於許多相關的醫療輔助機構及診所使用，服務的對象有自閉症、聽障、腦性痲痹、唐氏症、重度智障的小朋友，在這數個月的過程中，我們修改了許多原先預設的操作模式，並記錄下關於使用者經驗的問題，希望減輕家長負擔，也希望讓孩子在操作上可以更流暢。

ICAN UXTEST FINDING

•我以前用那些東西都是失敗，因為對他來講他覺得不重要，專注力就不夠。有時候像ACC他把它當玩具，所以學校老師都會罵家長沒有認真教。

•但ican比較不一樣的是，我在教的時候他眼睛在看，耳朵是在聽的。所以我教的過程比較順，然後我走開的時候，我說你自己去讀書，他就會去找常用句子，他會自己乖乖的壓下去。

USER EXPERIENCE DIFFERENCE

•認知 /

前：一般的卡通圖卡較無法讓孩子與真實事物連結。(ex.卡通版的杯子)

後：透過iCan即時新增圖卡的功能，用孩子能理解的方式學習。(ex.自己的杯子)

•情緒 /

前：孩子往往想要表達時卻找不到圖卡，而無法表達內心想法時較容易生氣。

後：孩子透過iCan尋找圖卡較容易許多，可清楚地讓父母瞭解孩子的內心想法與需求。

QUESTIONNAIRE RESULTS

• Burden of Teaching for Caregiver

Significant difference in the gain scores. M=3.73, STD=1.05 ; P-value=0.0054 (<0.01).

• Burden of Making picture card’s for Caregiver

Significant difference in the gain scores. M=8.00, STD=1.59 ; P-value=0.0005 (<0.01).


2011 NSC DESIDN


DESIGNERS

ENGINEERS

USERS

MEDICAL


Part 4


2011 NSC DESIDN


iCan Meeting 修改討論 (駟馬)1. 主色調一致性 (橘) ＋ RGB2. 按鍵置中對齊3. 圖卡雙分類機制4. 略過錄音可新增圖卡5. 造句列中的圖卡刪除改為不遞補


2011 NSC DESIDN

iCAN ProjectDesign Process / The 4th circle has completed.

可收費版本完成Android

UXEntrepreneurship

UXResearch

UXDesign

UXTesting




2011.11新增功能與問題修正




2010.10

• Working Prototype • Add more User Needs & Experiences• Concept Design

iCAN v1.1 iCAN v1.2 iCAN v1.3~v1.4

iOS 5.0 Android 3.0

2010.10 ~ 2012.10

2011.11新增功能與問題修正

2012.04醫學成效驗證

2011.12APP Star 高手爭霸戰節目-亞軍、最佳示範獎

• UI layout Modify• Add new function• Bug modify• User Needs &Experiences

Medical Verification

iCAN v1.3~v1.4 iCAN v1.5 iCAN v1.6

2012.03.15iCan 更新

2012.03.19iCan 更新

2012.10

2012.10完成使用者測試

• 使用者經驗設計與修正• 符合政府補助規範• 規劃商業模式• Bug 修正

• 質化與量化研究 (使用負荷)• 心路基金會 (學習成效)• 宇寧身心診所 (學習成效)• 共 30 位

2010.10 ~ 2012.10

Iteration


UXDesign Process

Iteration


UXDesign Process

Agile UX + Lean UX


2012 NSC DESIDN

iCAN ProjectDesign Process / 創新 - 創業

期望永續經營的商業模式規劃：

購買

�

申請補助

�iCAN 使用者政府機關補助

互動與程式設計師醫療通路$$$ $$ $$$$$0

THE FOUNDATIONS OF UXDP

•跨領域合作 (Multidisciplinary Collaboration)

•駟馬、宏正、賽微、台大資工、台科大電機 Company or University Partners

•完全實現的APPS

•使用者經驗 (User Experience)

•透過所有關係人來詮釋與了解使用者經驗

THE FOUNDATIONS OF UXDP

•持續的修改原形 (Continuous Modification of Prototype)

•透過設計做研究 (Research through Design)

•去除過度追求設計比賽的弊病

•創業精神 (Entrepreneurship)

•創意、創新、創業

設計思考的實踐

設計思考的實踐使用者經驗、跨領域、持續的原形修改、商業模式的可行性

設計思考的實踐使用者經驗、跨領域、持續的原形修改、商業模式的可行性

Desirability - Feasibility - Viability

THE RESOURCE WE USED

• A Design Manager & An IT Manager

• A Designer & A Programmer + Some helpers along the way

• Government founding $600.000

• A Lots of Friends

THE OUTCOME OF UXDP

•一個可以為弱勢族群服務的產品、創意概念的實現

•得獎與獎金 (500,000)

•創業經驗與機會、學到設計以外的東西

•產出研究成果 (HCI)

• 2011通訊大賽冠軍、遠傳平板獎、企業獎

• 台視 APP STAR 高手爭霸戰- 亞軍、最佳示範獎

• 2012 Red dot Communication Design Award - Winner

衷心感謝

小宇、李琳琳小姐、銘傳張乃娟老師、宇寧診所吳佑佑醫師、宇寧診所李家琦老師、心路基金會邱筱芳老師、心路基金會陳芃蓁老師、心路基金會黨國英組長、三民國小吳婉萍老師、台東自閉症協會孫中光先生、台東天主教救星教養院鄭佩君老師、三民國小陳杏香老師、三民國小吳婉萍老師、三民國小小燕老師、三民國小印平老師、三民國小家如老師、馬術治療中心詹淑雅治療師，及過程中所有幫助過我們的人和自閉症小朋友。

week2.user experience design process (uxd of i can) good version condensed

Documents