This keynote of User Experiment Design Process of iCAN was presented at the first meeting of Taiwan NSC Advanced Design Project on Oct, 2012 by drhhtang.

1. UXDP of iCAN
iCAN的⽤用⼾戶體驗設計過程
• 指導教授： 唐⽞玄輝 副教授 、 陳彥仰 助理教授
• 設計者：鄭群萌
• 介⾯面設計合作：官佩萱
• iOS 版本技術合作：台⼤大資⼯工- 陳雍協、蔡松昇、林霓苗
• Android 版本技術合作：駟⾺馬科技 - 彭建強、⺩王裕惟

2. UXDesign Process
UXResearch UXDesign UXTesting UXEntrepreneurship
Iteration

3. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
Kids with Autism
2011 NSC DESIDN
⼀一種潛在兒童期的⼼心理疾病，特徵為社交與
溝通能⼒力缺失，且對環境缺乏興趣，執著於
iCAN Project
特定事物。
Design Process /

4. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2010 -2012
iCAN Project
Design Process /
iCAN Intelligent Communication Board
for iOS & Android System
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.

5. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2010 -2012
iCAN Project
Design Process / 溝通圖卡與造句
角色
Design Feature 1 動詞
食物
操作容易，且系統性地分類圖
最卡，可快速找到所需的圖 交通
要 上廁所 洗手 吃 洗臉
⽚片。 文具
地點
娛樂
時間
穿 解開 脫 扣 漢堡
副詞
形容詞
日常用品
情緒狀態

6. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2010 -2012
iCAN Project
Design Process / 溝通圖卡與造句
角色
Design Feature 2 動詞
食物
輕按⼀一下圖卡即可播放單字⾳音
效。 交通
柳丁 炸雞腿 葡萄 薯條 奇異果
文具
地點
娛樂
時間
水 三明治 蘋果 餅乾 漢堡
副詞
形容詞
日常用品
情緒狀態

7. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2010 -2012
iCAN Project
Design Process / 溝通圖卡與造句
角色
動詞
Design Feature 3
食物
圖⽂文轉換功能，進階學習認 交通
字能⼒力。 柳丁 炸雞腿 葡萄 薯條 奇異果
文具
地點
娛樂
時間
水 三明治 蘋果 餅乾 漢堡
副詞
形容詞
日常用品
情緒狀態

8. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2010 -2012
iCAN Project
Design Process / 溝通圖卡與造句
角色
動詞
Design Feature 3
食物
圖⽂文轉換功能，進階學習認 交通
字能⼒力。
文具
地點
娛樂
時間
副詞
形容詞
日常用品
情緒狀態

9. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2010 -2012
iCAN Project
Design Process / 溝通圖卡與造句
角色
動詞
Design Feature 4
食物
⻑⾧長按選擇圖⽚片圖卡，進⾏行造句
練習，‭ 透 過聲⾳音誘導其開⼝口訓 交通
柳丁 炸雞腿 葡萄 薯條 奇異果
練基本溝通能⼒力，完全符合現 文具
有教育模式。
地點
娛樂
時間
水 三明治 蘋果 餅乾 漢堡
副詞
形容詞
日常用品
情緒狀態
我 要 蘋果

10. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2010 -2012
iCAN Project
Design Process / 常⽤用溝通語
我要蘋果
Design Feature 5 我想上廁所
去學校上學
可儲存⽇日常常⽤用句⼦子，⽗父⺟母可
透過此功能教導孩⼦子反覆的練 我想洗澡
習，增加學習使⽤用的效率。 吃炸雞排
儲存日期：2011 / 07 / 20
使用次數：32 次 要
1
我 要 蘋果

11. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2010 -2012
iCAN Project
Design Process / 新增圖卡與編
角色
Design Feature 6 動詞
食物
新增圖卡與編輯的功能可以幫
助在最短的時間內透過鏡頭拍 交通
新增圖卡 我 他們 妹妹 姊姊
照、⼿手寫、相簿來建⽴立圖卡。 文具
地點
娛樂
時間 爺爺 奶奶 大家 你們 他
副詞
形容詞
日常用品
情緒狀態 我們 爸爸 媽媽 哥哥 弟弟

12. 2010.10 ~ 2011.10
2010.10 2011.05 2011.10
使⽤用者訪談&概念設計 新⼀一代設計展 與 台⼤大資⼯工合作(iOS) IDA臺北世界設計⼤大會
2010.10 2011.10
2011.03 2011.06 2011.10
國科會前瞻概念設計計劃 台⼤大資⼯工(iOS) 與 駟⾺馬科技(Android) Android 使⽤用者介⾯面設計競賽
-冠軍、遠傳平板獎、企業獎
Part 1
• Concept Design

13. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
設計的流程
右圖是iCan前期的設計流程，從設計
師的發想設計，到使⽤用者的需求與驗
DESIGNERS
USERS

14. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /

15. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Part 1
設計的流程
右圖是iCan前期的設計流程，從設計
師的發想設計，到使⽤用者的需求與驗
DESIGNERS
USERS

16. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /

17. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /

18. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
問題發現
經由訪談後發現，現有的溝通輔具、材料存在著許
多不⽅方便的問題。
⼿手⼯工圖卡：
1. 數量多佔空間。
2. 圖卡容易遺失。
3. 製作圖卡過程⾟辛苦，⾝身⼼心疲倦。
語⾳音溝通版：
1. 厚重不易攜帶。
2. 漫畫圖⽚片不易理解。
3. 尋找圖卡費時與困難。

19. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
電源開關/音量控制
2011 NSC DESIDN 視訊(正反面) /Mic
iCAN Project
Design Process /
觸控筆
(有固定線以免遺失)
功能鍵
/照相按鍵
喇叭 底部:充電處

20. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
10

21. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /

22. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
The 1st half circle has completed. UXResearch
概念與介⾯面完成

23. 2010.10 ~ 2011.10
2010.10 2011.05 2011.10
使⽤用者訪談&概念設計 新⼀一代設計展 與 台⼤大資⼯工合作(iOS) IDA臺北世界設計⼤大會
2010.10 2011.10
2011.03 2011.06 2011.10
國科會前瞻概念設計計劃 台⼤大資⼯工(iOS) 與 駟⾺馬科技(Android) Android 使⽤用者介⾯面設計競賽
-冠軍、遠傳平板獎、企業獎
Part 2
• Concept Design

24. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Part 2
設計的流程
右圖是iCan後期的設計流程，加⼊入了
醫療驗證研究與跨領域的合作，讓整
個設計案變得更加完整。
DESIGNERS
USERS
MEDICAL
ENGINEERS

25. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
UI Idea Sketch
構想新的UI的設計，從操作的⽅方式、
功能、位置、直覺性...等等，都是需要
考慮的條件。
設計定位改變：
⼀一切地表達都需從學習開始，
應該是幫助⽗父⺟母減輕教學的負擔。
輔具，不是單獨使⽤用與⾃自我學習。
適合 4 - 7 years。

26. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
iCan UI Design
完成初步的設計，在與⽼老師討論介⾯面
的配置與美觀度，並且在進⾏行修改。
Communication
Board
主要的三⼤大功能: Communication Board
Communication Board
Communication Board
• 溝通圖卡與造句 Previous Home Next
• 常⽤用溝通語
• 新增圖卡與編輯
Previous Home Next Previous Home Next Previous Home Next

27. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
iCan UI 修改
主畫⾯面取消，把主要功能都放置下⽅方 溝通圖卡與造句
的⿊黑⾊色Bar上，⿊黑⾊色Bar加上反光。
Previous Home Next
常⽤用溝通語
(尚未設計)
常⽤用溝通語
Communication
Board
新增圖卡與編輯
Previous Home Next

28. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
初版完成 / 設計理念
結合前瞻科技與數位化分類系統，
幫助⾃自閉症學童能夠簡單地操作讓使
⽤用過程更加順暢，進⽽而訓練基本溝通
⼒力。
iCAN Intelligent Communication Board
for iPad2
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.

29. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Part 2
設計的流程
右圖是iCan後期的設計流程，加⼊入了
醫療驗證研究與跨領域的合作，讓整
個設計案變得更加完整。
DESIGNERS
USERS
MEDICAL
ENGINEERS

30. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
溝通圖卡與造句
分類
動畫操作的呈現
發現⽤用圖⽚片放在iPad 不太容易讓⼈人理
解，只能作為視覺上的修改參考。
因此我必須去學習⼼心得⼯工具達到介⾯面
模擬操作，完成我想表達的需求。
製作軟體：Mac - iWork Keynote
溝通圖卡與造句 常⽤用溝通語 新增圖卡與編輯

31. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
使⽤用者調查 - 開⼼心的表情
我把介⾯面圖⽚片放到iPad上，並拿給使⽤用者看，他
們相當驚訝與興奮，開始提供更多新的想法，並
詢問⼀一些介⾯面配置的意⾒見，例如iCon、圖⽚片⼤大
⼩小、功能等。

32. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Part 2
設計的流程
右圖是iCan後期的設計流程，加⼊入了
醫療驗證研究與跨領域的合作，讓整
個設計案變得更加完整。
DESIGNERS
USERS
MEDICAL
ENGINEERS

33. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
兒童⼼心智發展訓練中⼼心
與吳醫師⾒見⾯面後，他很⾼高興聽到iCan
iCAN Project
Design Process /
的設計，並且告訴我這樣的東⻄西設計
出來會很有幫助。

34. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Part 2
設計的流程
右圖是iCan後期的設計流程，加⼊入了
醫療驗證研究與跨領域的合作，讓整
個設計案變得更加完整。
DESIGNERS
USERS
MEDICAL
ENGINEERS

35. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
巡迴演講推銷
iCAN Project
認識了台⼤大資⼯工所的陳彥仰⽼老師與實驗室
Design Process /
研究⽣生對iCan的案⼦子有興趣與熱誠，因此
就開始了跨領域合作的發展。

36. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
跨領域合作的第⼀一次Meeting (設計⾓角度)
2011 NSC DESIDN
製作 Working Prototype 最初版本，
跨領域合作的過程：
iCAN Project
Design Process / For iPhone, create icons
• 操作動畫 that measure:
• Hierarchy
• Desktop Logo Design
• RGB 數值
• iCon .PNG
• Layout size
• XCode For iPad, create an icon
that measures:
0 1024
768

37. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
開始撰寫程式 - XCode
2011 NSC DESIDN
將必要的UI元件與設計圖傳達給資⼯工
領域的夥伴們，就可以開始進⾏行初步
iCAN Project
的程式撰寫了。
Design Process /

38. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
完成 Working Prototype 最初版本
2011 NSC DESIDN 新⼀一代設計展
可以將每ㄧ⾴頁的介⾯面畫⾯面存成圖⽚片檔，並實 2011/05/19-21
際在平板電腦上顯⽰示播放，好處是較能掌握
iCAN Project 於世貿⼆二館國科會展區展出。
尺⼨寸⼤大⼩小且進⾏行修改。
Design Process /

39. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process / The 2nd circle has completed.
UXResearch
UXDesign
iOS 5.0
可運作原形

40. 2010.10 ~ 2011.10
2010.10 2011.05 2011.10
使⽤用者訪談&概念設計 新⼀一代設計展 與 台⼤大資⼯工合作(iOS) IDA臺北世界設計⼤大會
2010.10 2011.10
2011.03 2011.06 2011.10
國科會前瞻概念設計計劃 台⼤大資⼯工(iOS) 與 駟⾺馬科技(Android) Android 使⽤用者介⾯面設計競賽
-冠軍、遠傳平板獎、企業獎
iCAN v1.1
Part 3
• Concept Design • Working Prototype • Add more User Needs & Experiences

41. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Part 3
設計的流程
右圖是iCan後期的設計流程，加⼊入了
醫療驗證研究與跨領域的合作，讓整
個設計案變得更加完整。
DESIGNERS
USERS
MEDICAL
ENGINEERS

42. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Designers:
Designers - 介⾯面的修改 1‭.‬ 原先整體UI 配⾊色太灰 ‬
2‭.‬ 播放、清除、存取‭ ‬按鍵設計
將之前開會討論的內容整理出來，列
‬3. 圖卡的⿊黑⾊色邊框在細、顏⾊色在淡⼀一些‭
出需要修改與新增的清單。
4. 按圖⽚片會撥放⾳音效，結束後仍然會有反⽩白效果
5. 常⽤用溝通語加⼊入細節部分‭:‬⽇日期‭+使⽤用次數
‬
-----------------------------------------------------------------
Engineers‭:‬
1. ‬UI 與 Working Prototype 的介⾯面⼀一致性。
2‭. 內建搜尋功能
3‭. ‬未來加⼊入網路搜尋圖卡功能
4‭. ‬‭可以考慮加⼊入⽂文法修正功能‭
5‭. ‬編輯圖卡需加⼊入‭ ‬刪除功能
6‭. 編輯圖卡需加⼊入‭ ‬回復預設圖卡功能
7.‬ 常⽤用的圖卡可記錄下來，⾃自動排列⾃自最前⾯面
8‭. ‬新增後的圖卡到造具功能時需顯⽰示在最前⾯面
9‭. 播放圖卡聲⾳音的間距可能必須再短。 ‬‭
10. 圖卡可以選擇多種類別
‭11. 播放時下列造句會跟著跑
12. 造具攔下⾯面顯⽰示圖卡⽂文字‭ ‬
‬

43. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Part 3
設計的流程
右圖是iCan後期的設計流程，加⼊入了
醫療驗證研究與跨領域的合作，讓整
個設計案變得更加完整。
DESIGNERS
USERS
MEDICAL
ENGINEERS

44. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
User Testing - ⼩小宇媽媽
*‬2011/07/01‭ ‬iCan User Testing：
1‭.‬ 類別有各種顏色的分類提示
2‭.‬ 下方造句列忘了加顯示中文
3‭.‬ 播放的速度是OK的
4. 副詞不知道怎麼建立
5. 圖文的轉換

45. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Part 3
設計的流程
右圖是iCan後期的設計流程，加⼊入了
醫療驗證研究與跨領域的合作，讓整
個設計案變得更加完整。
DESIGNERS
USERS
MEDICAL
ENGINEERS

46. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
User Testing - ⻑⾧長庚醫院兒⼼心科
*‬2011/07/03‭ ‬iCan User Testing：
1‭.‬ 類別有各種顏色的分類提示
2‭.‬ 新增圖卡時容易誤按會跳出
3‭.‬ 常用圖卡功能，圖要大‭(‬較容易記住‭)‬
4‭.‬ 播放具備‭ ‬設定次數功能
5‭. ‬回覆預設功能鍵
6‭.‬ 播放時圖卡要閃

47. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Part 3
設計的流程
右圖是iCan後期的設計流程，加⼊入了
醫療驗證研究與跨領域的合作，讓整
個設計案變得更加完整。
DESIGNERS
USERS
MEDICAL
ENGINEERS

48. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
Android 團隊加⼊入
iCAN Project
Design Process /
Sapuz 駟⾺馬科技股份有限公司
http://www.sapuz.com/
* 更新內容：
1‭.‬ 新增圖卡時容易誤按會跳出
2‭.‬ 常用圖卡功能，大圖顯示‭
3‭.‬ 播放具備‭ 設定次數功能
4‭.‬ 回覆預設功能鍵
5. 直覺性的播放按鈕圖示
iCAN
Intelligent Communication Board for ASUS Eee Pad Transformer
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.

49. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
iCan - Android 第⼆二次修改
加⼊入了分類顏色，以及圖文轉換的新功能
柳丁 柳丁

50. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
iCan - Android 第⼆二次修改
加⼊入了分類顏色，以及圖文轉換的新功能
柳丁 柳丁

51. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
iCAN Intelligent Communication Board
for Android 3.0 System
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.
Android 3.0 Through the aid of iCan, hopefully autistic children can learn basic oral communicational skills.

52. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Old
iCan - iOS 第⼆二次修改
加⼊入了分類顏色的新功能

53. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Old Design
iCan - iOS 第⼆二次修改
加⼊入了分類顏色的新功能

54. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Old Design New
iCan - iOS 第⼆二次修改
加⼊入了分類顏色的新功能

55. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
iCAN Intelligent Communication Board
for iPad2
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
iOS 5.0 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.

56. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
The 3rd circle has completed.
UXResearch
UXDesign
UXTesting
iOS 5.0 Android
上架免費試⽤用

57. 2010.10 ~ 2011.10
2010.10 2011.05 2011.10
使⽤用者訪談&概念設計 新⼀一代設計展 與 台⼤大資⼯工合作(iOS) IDA臺北世界設計⼤大會
2010.10 2011.10
2011.03 2011.06 2011.10
國科會前瞻概念設計計劃 台⼤大資⼯工(iOS) 與 駟⾺馬科技(Android) Android 使⽤用者介⾯面設計競賽
-冠軍、遠傳平板獎、企業獎
iCAN v1.1 iCAN v1.2
iOS 5.0 Android 3.0
• Concept Design • Working Prototype • Add more User Needs & Experiences

58. 2011.10 ~ 2012.10
2011.11 2012.03.15 2012.04
新增功能 與 問題修正 iCan 更新 醫學成效驗證
2011.10 2012.10
2012.03.19 2012.10
2011.12
iCan 更新 完成使⽤用者測試
APP Star ⾼高⼿手爭霸戰節⺫⽬目
-亞軍、最佳⽰示範獎
Part 4
• UI layout Modify
• Add new function
• Bug modify
• User Needs &Experiences

59. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Part 4
設計的流程
右圖是iCan後期的設計流程，加⼊入了
醫療驗證研究與跨領域的合作，讓整
個設計案變得更加完整。
DESIGNERS
USERS
MEDICAL
ENGINEERS

60. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
iCan 新版設計 (完整版)
Designer Idea /
• 無法建立副詞圖卡 - 新增手寫功能
• 顯示 圖卡建立日期
• 介面設計 與 功能調整
iCAN
Intelligent Communication Board for iOS and Android 3.0
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.

61. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Part 4
設計的流程
右圖是iCan後期的設計流程，加⼊入了
醫療驗證研究與跨領域的合作，讓整
個設計案變得更加完整。
DESIGNERS
USERS
MEDICAL
ENGINEERS

62. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
User Testing - ⼩小宇媽媽
*‬2011/11/8‭ ‬iCan User Testing：
1‭.‬ 新增圖卡可以錄製簡短影片
2‭.‬ 圖卡有雙分類機制
3‭.‬ 或許可以有列印功能
4. 真的很高興，確實蠻完整的

63. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Part 4
設計的流程
右圖是iCan後期的設計流程，加⼊入了
醫療驗證研究與跨領域的合作，讓整
個設計案變得更加完整。
DESIGNERS
USERS
MEDICAL
ENGINEERS

64. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
User Testing - 宇寧⾝身⼼心診所 (⻑⾧長庚)
*‬2011/11/12 & 17 ‬iCan User Testing：
1‭.‬ 新增圖卡單字量
2‭.‬ 分類類別重新定義
3‭.‬ 規劃下一階段醫學研究計劃

65. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2012 NSC DESIDN
ICAN UXTEST
iCAN Project
iCan⺫⽬目前於許多相關的醫療輔助機構及診所使⽤用，服務的對象有⾃自閉症、聽
Design Process /
障、腦性痲痹、唐⽒氏症、重度智障的⼩小朋友，在這數個月的過程中，我們修改
了許多原先預設的操作模式，並記錄下關於使⽤用者經驗的問題，希望減輕家⻑⾧長
負擔，也希望讓孩⼦子在操作上可以更流暢。

66. USER EXPERIENCE DIFFERENCE
• 認知 /
前：⼀一般的卡通圖卡較無法讓孩⼦子與真實事物連結。(ex.卡通版的杯⼦子)
後：透過iCan即時新增圖卡的功能，⽤用孩⼦子能理解的⽅方式學習。(ex.⾃自⼰己的杯⼦子)
• 情緒 /
前：孩⼦子往往想要表達時卻找不到圖卡，⽽而無法表達內⼼心想法時較容易⽣生氣。
後：孩⼦子透過iCan尋找圖卡較容易許多，可清楚地讓⽗父⺟母瞭解孩⼦子的內⼼心想法與需求。

67. QUALITATIVE INTERVIEW
• It reduces the burden of mine in teaching and in making picture card. (P1)
• After using iCan, other family member also start making picture card................
Before using iCan, child rarely respond. But now, he always using iCan to response, or even
talk to us by a short sentence. (such as ‘I want to eat fries’) (P4)

68. 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).

69. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Part 4
設計的流程
右圖是iCan後期的設計流程，加⼊入了
醫療驗證研究與跨領域的合作，讓整
個設計案變得更加完整。
DESIGNERS
USERS
MEDICAL
ENGINEERS

70. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
iCan Meeting 修改討論 (駟⾺馬)
2011 NSC DESIDN
1‭.‬ 主色調一致性 (橘) ＋ RGB
2‭.‬ 按鍵置中對齊
iCAN Project
Design圖卡雙分類機制
3.‬ Process /
4‭. ‬略過錄音可新增圖卡
5. 造句列中的圖卡刪除改為不遞補

71. National Taiwan University of
Science and Technology /
Department of Industrial and
UXResearch
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process / The 4th circle has completed.
UXDesign
UXTesting
UXEntrepreneurship
Android
可收費版本完成

72. 2010.10 ~ 2012.10
2010.10 2011.05 2011.10 2011.11
使⽤用者訪談&概念設計 新⼀一代設計展 與 台⼤大資⼯工合作(iOS) IDA臺北世界設計⼤大會 新增功能 與 問題修正
2010.10
2011.03 2011.06 2011.10
國科會前瞻概念設計計劃 台⼤大資⼯工(iOS) 與 駟⾺馬科技(Android) Android 使⽤用者介⾯面設計競賽
-冠軍、遠傳平板獎、企業獎
iCAN v1.1 iCAN v1.2 iC
iOS 5.0 Android 3.0
• Concept Design • Working Prototype • Add more User Needs & Experiences

73. 2010.10 ~ 2012.10
2012.03.15 2012.04 2012.10
題修正 iCan 更新 醫學成效驗證 完成使⽤用者測試
2012.10
2011.12 2012.03.19
APP Star ⾼高⼿手爭霸戰節⺫⽬目 iCan 更新
-亞軍、最佳⽰示範獎
iCAN v1.3~v1.4 iCAN v1.5 iCAN v1.6
Medical
Verification
• UI layout Modify • 質化與量化研究 (使⽤用負荷) • 使⽤用者經驗設計與修正
• Add new function • ⼼心路基⾦金會 (學習成效) • 符合政府補助規範
• Bug modify • 宇寧⾝身⼼心診所 (學習成效) • 規劃商業模式
• User Needs &Experiences • 共 30 位 • Bug 修正

74. UXDesign Process
UXResearch UXDesign UXTesting UXEntrepreneurship
Iteration

75. User Study UXR
80
Most User Study in Company
focuses on Usability Test
60
UXD Project
focuses on User Experience
40
Research, Design, Test
20
0
time difference

76. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2012 NSC DESIDN
iCAN Project
Design Process /
創新 - 創業
期望永續經營的商業模式規劃：
購買 申請補助
iCAN 使⽤用者 政府機關補助
互動與程式設計師 醫療通路
$$$ 0 $$ $$$$$

77. THE FOUNDATIONS OF UXDP
• 跨領域合作 (Multidisciplinary Collaboration)
• 駟⾺馬、宏正、賽微、台⼤大資⼯工、台科⼤大電機 Company or University Partners
• 完全實現的APPS
• 使⽤用者經驗 (User Experience)
• 透過所有關係⼈人來詮釋與了解使⽤用者經驗
• 使⽤用者經驗為基礎的創新

78. THE FOUNDATIONS OF UXDP
• 持續的修改原形 (Continuous Modification of Prototype)
• 透過設計做研究 (Research through Design)
• 創業精神 (Entrepreneurship)
• 創意、創新、創業

79. THE OUTCOME OF UXDP
• 2011通訊⼤大賽冠軍、遠傳平板獎、企業獎
• 台視 APP STAR ⾼高⼿手爭霸戰- 亞軍、最佳⽰示範獎
• ⼀一個可以為弱勢族群服務的產品、創意 • 2012 Red dot Communication Design Award - Winner
概念的實現
• 得獎與獎⾦金 (500,000)
• 創業經驗與機會、學到設計以外的東⻄西
• 產出研究成果 (HCI)

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

81. 台灣科技⼤大學⼯工商業設計系
設計運算與思考研究室 唐⽞玄輝
blog.drhhtang.net
drhhtang@gmail.com