User experience service design innovation for real world

1. DITLDESIGN beBit VIDE UCAN

2. Awards CHI C R O S S I N G S SEOUL KOREA 2015 Jobs

3. iCAN UXDP of iCAN • • • • iOS - •Android -

4. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process / Kids with Autism

5. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2010 -2012 iCAN Project Design Process / 柳丁炸雞腿葡萄薯條奇異果水三明治蘋果餅乾漢堡 Design Feature 1Design Feature 2 動詞文具食物角色交通地點副詞娛樂時間情緒狀態形容詞日常用品 260 100

6. Iteration UXResearch UXDesign UXTesting UXEntrepreneurship UXDesign Process Agile UX + Lean UX

7. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process / The 1sthalf circle has completed. UXResearch

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

9. 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.

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

11. • • • • (BURDEN of CAREGIVER) ICAN UXRESEARCH

12. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process / The 2ndcircle has completed. iOS 5.0 UXResearch UXDesign

13. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process / iPad Mac - iWork Keynote

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

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

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

17. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process / 2011/05/19-21 Working Prototype

18. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process / The 3rdcircle has completed. iOS 5.0 Android UXResearch UXDesign UXTesting

19. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process / 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, ﬁgures, 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 ﬁgures.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. 直覺性的播放按鈕圖示

20. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process / iCan - Android 分類顏色，以及圖文轉換的新功能柳丁柳丁 v1 v2 Android IOS

21. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process / iCan - iOS 分類顏色的新功能 v1 v2 v3

22. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process / The 4thcircle has completed. UXInnovation UXResearch UXDesign UXTesting iOS 5.0 Android

23. ICAN UXTEST FINDING • ACC • ican

24. USER EXPERIENCE DIFFERENCE • / (ex. ) iCan (ex. ) • / iCan

25. QUESTIONNAIRE RESULTS • Burden ofTeaching for Caregiver Signiﬁcant 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 Signiﬁcant difference in the gain scores.  M=8.00, STD=1.59 ; P-value=0.0005 (<0.01).

26. 2010.10 & 2011.05 (iOS) 2011.10 IDA 2011.11 2011.03 2011.06 (iOS) (Android) 2011.10 Android - 2010.10 • Working Prototype • Add more User Needs & Experiences• Concept Design iCAN v1.1 iCAN v1.2 iCA iOS 5.0 Android 3.0 2010.10 ~ 2012.10

27. HearMe A Recording App for Visually Impaired People DITL 國立臺灣科技大學設計資訊與思考研究室 IUILAB 國立政治大學創新使用者介面實驗室。

28. 余能豪助理教授指導總監 TEAM MEMBERS Zen 張育涓研究員、專案經理 Diona 林奕岑資深互動體驗設計師 Afra 蔡宜璇資深IOS開發工程師唐玄輝副教授指導總監

29. HEARME DEMO VIDEO

30. THE PROCESS OF PROJECT HEARME UXR UXD UXT Observation&I nterview UXR 2nd Observation& Interview UXR 1st Design Exploration Design Assumption prototype1 HearMe1st prototype3 1HearMe 3rd prototype2 HearMe 2nd HearMe UXT 1st HearMe UXT 3rd HearMe UXT 2nd 5 12 2 7 10 36 72

31. THE PROCESS UXR UXD UXT User Experience Research 使用者經驗研究 User Experience Design 使用者經驗設計 User Experience Testing 使用者經驗測試

32. ... ... ...

34. • 現有錄音裝置以數字編號命名，無法立得知案的大內容。 • 自行建立分類相當需要；根據時間、名、地點等來搜尋也有助。 • 把案從錄音裝置傳到電腦，再傳給別人步驟麻煩。 • 期待能分享更多生活中資訊給家人朋友，或是互相共享資料。 • 手機錄音軟體沒有設計重複播放片段，只好接到電腦。 • 錄音帶要快轉、倒轉到想聽的部分比較耗時間。 • 錄音筆的操作變化太多，介面太複雜，操作要花時間。 • 在錄音中能標記出重要段落，方便日後聽取。播放錄音整理分享

35. Normal Mode Recording HearMe Mode

36. Normal Mode Recording HearMe Mode

38. 第一版第二版第三版

39. HearMe APPHearMe APP Features of HearMe 快速錄音重點標記清單整理語音簡介播放操作分享檔案

40. 操作更敏捷，不再錯過重要時刻雙指點兩下，可開始錄音 “出去時可以很及時的錄製很特別很好聽的聲音，或是街邊叫賣的聲音就可以馬上錄下來。”—（P4）

41. 當下記錄，錄後超方便單指右滑，記錄重要段落 ”學生上課標記重點時會很有用，我以前光拉那個重點就拉了老半天，還是找不到。”（P3） Part 1

42. 輔助用的資料夾，增加搜尋效率多款常用資料夾，歸不費力 “在我錄完之後可以直接分類選擇，可以幫助我記憶。對我來講是一個很好的邏輯...” （P5）

43. 5秒個人化的簡介，協助辨識案內容雙指點兩下後長按，完成後放開 “自己聽音檔裡面的前面三秒就會可以知道是什麼，加上聲音檔名的輔助就又更清楚。”（P4）

44. 預先知道案內容，提高搜尋效率系統自動預播短音 “檔案名稱和檔案預覽的功能就可以很快找到檔案，界面排列順序也都蠻清楚。”（P6）

45. 不用擔心時空問題，也不用再帶傳輸線 E-mail 和 wifi 傳輸任君挑選 “連e-mail標題都已經預寫,附件已經夾帶好了，如果這樣要分享給同事，覺得不錯用，” （P7）

46. Design Testing Redesign 長按手勢 MagicTap手勢容易誤觸認知錯亂九月一日九月二日九月三日九月二日案A 案B 第一層第二層保留標題階層九月一日九月二日九月三日九月二日案A 案B 第一層第二層省略標題階層

47. 錄音時標記重點段落向右滑動，聆聽時也一樣左右滑動來跳段落。 iOS中調整數例如音量、語速的手勢是上下滑動來增減，套用在快轉倒轉情境中一樣上下滑動。快速理解，學習使用

48. 節省搜尋時間，依個人選擇聆聽錄音提示除了雙指雙擊開始錄音，後續可再接續說明錄音時的操作手勢。錄音案的資訊有名、長度、日期、地點、案大小、段落數量...都放上去，需要可再細聽。

49. 減輕短期記憶負擔，符合心智地圖預設的單頁面，只要瀏覽上一項或下一項來搜尋。

50. 獲得聽覺的空間感，不易迷失例如到下一層時會瀏覽到該頁面的標題，便知道已換到下一頁。跳出通知視時有相應的音效，提示面排列與先前不同。

51. 跨App操作一致性，空間記憶的可能狀態列、巡覽列，從螢幕邊界快速摸到電池電量或回上一頁按。

53. 學習型工作型生活型

54. User 生活型學習型 Interaction 手打筆記重點標記歸就刪手打筆記重點標記歸就刪分享錄完就傳 Objects 手機電/筆電手機手機電/筆電 Activities 會議記錄學課程廣播採訪課堂筆記溫習功課生活記事創作靈感重要時刻 Environment 公司住家住家戶外變動環境學校住家工作型手機電/筆電手機電/筆電手打筆記重點標記歸就刪手打筆記重點標記歸就刪分享錄完就傳住家戶外變動環境

55. INSIGHTS 不同錄音族群的設計建議 • 數據化或大量的資訊有被紀錄的迫切性 • 案傳輸便利性 • 儲存空間 • 跨裝置的延續性 • 快捷操作 • 與社群平台的連結程度工作型學習型族群共通處生活型

56. Mobile Navigation for Visually Impaired Smartphone User BlindNavi

57. sequencing

58. sequencing

59. service blueprint

60. 4 2 3 1 touch point

61. 輸入目的地搜尋台灣科技大學一號島廚房 cafe libro Diary Bistro WHERE 搜尋 Vino C WHERE 搜尋 Vino Cafe 台南市中西區福州街128 號1樓 Vino Cafe 搜尋結果台北市大安區師大路80巷 2號1樓 02 2362 1167

62. 搜尋結果搜尋現在位置起點輸入目的地終點搜尋 WHEREVino C 終點現在位置起點 Vino Cafe 終點搜尋起點台科大校面對基隆路斑馬線前有石過馬路後請左請左轉左轉後於基隆朝羅斯福路方人行道上有樹 1 2 路線細

63.  

64. 請左轉確認號誌燈在九點鐘方向後過馬路過馬路後朝二點鐘方向找尋下一個號誌燈右手邊為車輛出入口請注意請繼續直行30公尺請確認號誌燈在九點鐘方向後過馬路過馬路後上人行道左轉進入校園小心人行道與斑馬線之落差抵達目的地 2 3 4 路線細節

65. 辦公室到 VINO CAFE 2015 / 01 / 29 歷程 2015/01/20 2015 / 01 / 20 起點台科大校門口面對基隆路請過馬路斑馬線前有石柱可追跡過馬路後請左轉增加註記增加註記請左轉左轉後於基隆路四段直行朝羅斯福路方向前進人行道上有樹枝垂葉請小心 1 2 歷程細節 WHERE增加註記辦公室到 VINO CAFE 2015 / 01 / 29 歷程 2015/01/20 2015 / 01 / 20 歷程紀錄起點台科大校門口面對基隆路請過馬路斑馬線前有石柱可追跡過馬路後請左轉增加註記請左轉左轉後於基隆路四段直行朝羅斯福路方向前進人行道上有樹枝垂葉請小心 1 2 歷程細節起點台科大校門口面對基隆路請過馬路斑馬線前有石柱可追跡過馬路後請左轉增加註記請左轉左轉後於基隆路四段直行朝羅斯福路方向前進人行道上有樹枝垂葉請小心 1 2 歷程細節 Line Facebook Message Mail Cancel Copy 現在位置歷程紀錄 WHERE增加註記歷程細節 Line Facebook Message Mail Cancel Copy co-creation

66. 4 2 3 1 輸入目的地搜尋台灣科技大學一號島廚房 cafe libro Diary Bistro 搜尋 WHEREVino C 終點現在位置台北市大安區師大路80巷 2號1樓羅斯福路四段台大正門新生南路三段台大校園辛亥路二段民權國小基隆路四段起點台科大校門口面對基隆路請過馬路斑馬線前有石柱可追跡過馬路後請左轉增加註記請左轉左轉後於基隆路四段直行朝羅斯福路方向前進人行道上有樹枝垂葉請小心 1 2 歷程細節

67. Books Books NO. 54 56 COFFEE SHOP 2 3 1

69. evidencing

70. ? VISUALLY IMPAIREDS on the TRAIN

71. ! +BEACON BEACON on the TRAIN

72. Books Books NO. 54 56 COFFEE SHOP DAY TIME STREETS

73. Books Books NO. 54 56 COFFEE SHOP NIGHT TIME STREETS

74. Books Books NO. 54 56 COFFEE SHOP STREETS for VISUALLY IMPAIREDS

75. Books Books NO. 54 56 COFFEE SHOP +BEACON STREETS with BEACON

76. WWW.DITLDESIGN.COM