UX設計師的 AI 學習型文章 (1)
Facebook用AI做包容性設計 : 用圖片識別幫助『盲人與失讀症患者』
當我們談到人工智慧(AI)，大概會想起李開復書上所提的未來科技，反而很少意識到AI已經遍佈我們的生活。這篇我彙整相關的AI文章，研究Facebook AI 技術背後的意義
我是Faye，主修行銷，當過企劃、PM，現在投入『用戶體驗設計』。😍這篇文比較長，可以先『收藏文章』，再慢慢看
👏可以先幫我拍拍手(這是我寫文章最大的鼓勵)
寫這篇文時，想起吳念真導演在2016年的一段影片最後所述：
知識不光是用來謀取利益的，
是可以用來奉獻，可以用來幫助別人的。
(影片很感人，放在文末)
✍這篇會提到
- 不同階段我對AI的看法
- Facebook的突發事件
- 名詞串A：AI (哪些東西使用AI) 、機器學習、圖片識別
- 名詞串B：失讀症患者、 Benktzon’s 用戶金字塔、包容性設計、殘疾
- Facebook如何幫助盲人/失讀症患者? 無障礙團隊、圖片識別的5個階段、 Microsoft 微軟及Google包容性設計
▍一、在不同階段，我對AI的看法
我這輩子與AI並沒什麼關係，在開始接觸AI以前，頂多從新聞上略知一二，知道Alpha go 機器人會下圍棋，或是從科幻電影中產生我對AI的幻想。
✅ 1. 以為AI只能用在高端的產品
直到第一份UX工作負責電動車的UX規劃。
我開始去論壇聆聽各大廠(如IBM)對未來世界從交通到教育的AI計畫、研究Tesla電動車的智能顯示及自動駕駛、去Las Vegas參加CES(美國消費電子展，一年一度的科技盛事)獵取全世界的電子發展。
我當時以為AI大概只適合高科技的產品吧，比如Tesla電動車。(原諒我當時的無知😔)
✅ 2. AI應用走進你我生活
兩年前進入現在的跨國企業，才發現無論在哪個產業，新創或是大公司，大家都已經運用AI技術創造更多的效益。
我在公司參與導入AI的專案(從機器學習到圖像辨識)，擔任UX設計師看著功能上線，驚呼『連購物網站都在用AI技術！😲』，體悟到AI的應用不再是遙不可及，是走進我們的生活，從手機的Siri智能對話，到Facebook的chatbot聊天機器人，是我們每天都在使用的功能。
✅ 3. AI知識不足的危機感
現在的我有種 『AI知識不足的危機感😖』，除了持續看著李開復AI系列的書，也開始follow我在AI領域的新導師Han-Shen AIUX Design。在他講座裡分享很多『適合設計師學習AI』的資料，推薦大家也去追一下。
People + AI Research Blog 、Google AI Guidebook
如果你跟我一樣是AI小白 (=新手菜鳥)，對AI並不了解，但想要開始了解，歡迎跟我繼續往下看。👇👇👇👇
▍二、Facebook的突發事件
還記得幾週前 2019/7/4 ，那天晚上Facebook全球大當機，大家上傳的照片都變成一片空白(下圖我找到一張英文的示範)。
於是大家發現圖片中出現一些文字，例如「照片中可能有一人或多人」、「汽車在路上行駛」、「花朵與蝴蝶」…等等的描述性文字，間接曝光了Facebook的『自動文字替代』技術。
自動文字替代 (Automatic alternative text，簡稱 alt text），是透過機器學習，建立演算法來幫助AI學習識別圖像內容。於是可以讀取你上傳的照片，並在照片上作文字標記，目的是為盲人和失讀症患者，幫助以文字描述相片中的內容。
🤢🤢🤢🤢(暈)🤢🤢🤢🤢
光是這段就包含好多專有名詞：AI、機器學習、圖像辨識、失讀症患者。於是我很好奇的開始研究，才瞭解Facebook早在2016年便導入這項技術，更發現背後隱含的意義遠比我看到的還多。
於是我決定先搞懂這些名詞串，才能繼續看一下去！首先是這次Facebook導入的AI技術相關的三個名詞。
▍三、名詞串A：
人工智慧、機器學習、圖片識別
🐤 3.1 人工智慧AI
(因篇幅有限，沒有放太多定義，感興趣的朋友可以自行多研究)
⭕根據維基百科⭕
人工智慧（英語：Artificial Intelligence，縮寫為AI），指由人製造出來的機器所表現出來的智慧。已經被應用在智慧控制、機器人、自動化技術、語言和圖像理解、遺傳編程、法學資訊系統、下棋、醫學領域、人臉識別、照片或語音合成。
怎樣才算使用AI技術?
麻省理工學院的AI記者KAREN HAO，曾寫下這篇What is AI? We drew you a flowchart to work it out 。(而科學Online的葉姝涵在這篇文章將此圖翻譯成中文)
✍Karen 應用例子說明AI的判斷重點，比如：
✅可以識別所看到的東西 (運用AI的電腦視覺與影像處理)
✅能轉譯人們所說的話 (運用AI的語音識別)
✅利用發現的模式來制定決策 (運用AI的機器學習)
🐤 3.2 機器學習
⭕根據GCP專門家⭕
機器學習（英語：Machine Learning，縮寫為ML）：「透過從過往的資料和經驗中學習，並找到其運行規則，最後達到人工智慧的方法。」包含透過樣本訓練機器辨識出運作模式，並利用它來做預測，所以機器學習是關於如何預測未來。
(當初第一次聽到機器學習，腦中浮現電影裡機器人用手摸一下電視，花了幾秒瞬間就把人類歷史到最近的新聞全都學會了)
機器是怎麼學習的?
✅步驟1 : 輸入大量的資料給機器（系統）。
✅步驟2 : 機器從資料中學習 ，建立它發現的”規律”。
✅步驟3 : 根據步驟2獲得的經驗，替未曾見過的新資料做分類，並推測它可能是什麼。
(我想起一句話，人類從歷史中學到教訓，機器學習其實也是類似的概念，只是它學得比人類快太多，能夠吃的資料也多更多。)
🐤 3.3 圖片識別
⭕根據有聲Voice⭕
圖片辨識，或圖片識別（英語：Pattern recognition）：即系統通過對目標圖像的觀測，劃分類別，分辨特徵進行有意義判斷。
圖片是怎麼被識別?
品玩pingwest的這張圖做了簡易的說明：
電腦可以將圖像內容分類，判斷每一個像素點屬於人、自行車，還是背景。
圖片識別應用在哪裡?
根據IT 桔子數據顯示:
✅安全領域：指紋識別、人臉識別等。
✅軍事領域：地形勘察、飛行物識別等。
✅交通領域：車牌號識別、無人駕駛、交通標誌識別。
✅醫療領域：心電圖、超聲波、健康管理、營養學等。
✅生活領域：智能家居、購物、智能測膚等。
(但我相信絕對不止於此而已)
接著，再來搞懂幾個跟這次目標客群有關的名詞。
▍四、名詞串B：
失讀症、 Benktzon’s 金字塔、包容性設計、殘疾
🐤 4.1 失讀症患者
⭕根據維基百科⭕
失讀症（英語：Dyslexia、reading disorder、alexia），或稱讀寫障礙、難語症、誦讀障礙、閱讀障礙，是描述在智力無缺損的狀況下，對於閱讀和書寫文字具有困難的症狀。這些讀寫上的困難，並不是患者自己可以控制的，讀寫障礙患者對於學習的渴望，通常與常人並無二致。
如何協助失讀症患者
✅採用輔具，例如圖片、字卡、有聲書，或者較高科技技術，協助他們閱讀以及使用電腦。
✅採用閱讀策略將字與圖像、實物建立連結，以及將造字的邏輯和脈絡引入，提升字的意思，有助於閱讀。
✅採用較大字的字級，和較高的行距，降低視覺干擾。
✅使用尺壓住後排文字，或是用筆將讀完的行首畫點標記，來避免跳行。
Facebook 所推出的「自動文字替代」，便需搭配『輔具』，盲人和失讀症患者需要打開螢幕閱讀器，將焦點放至於圖像上，系統接著朗讀相片中可能出現的一連串項目，讓大家更了解相片內容。
🐤 4.2 Benktzon’s 用戶金字塔
Benktzon’s user pyramid
由瑞典工業設計師Maria Benktzon在1993年提出，她將人類(殘疾與否)做了分層，由上而下是嚴重到輕微。
✅金字塔最上層: 嚴重殘疾人和那些需要許多幫助的人
✅金字塔中層: 力量和行動能力下降的人
✅金字塔下層: 身體健全的人和有輕微殘疾的人
✍Benktzon認為設計師面臨的最基本問題之一是，設計該“自上而下”或“自下而上”?
🔵 無障礙設計：是自上而下(⬇⬇)的設計方法。以滿足極端殘疾的用戶需求，再拓展至主流用戶群體。
🔵 通用設計：是自下而上(⬆⬆)的設計過程。以關注主流健全用戶為前提，但是力求提升設計對於特殊用戶群體的適用（通用）。
知乎上的這篇文指出：上述兩種思路都有其缺陷，無障礙設計容易使設計異化，滿足了特殊群體的需求但是對於普通用戶來說卻過於特殊難以使用；通用設計則很容易在實際中由於商業利益的考量而忽略了特殊用戶的需求。
🐤 4.3 包容性設計
在研究這個議題時，必須先瞭解『包容性設計立方體』。
包容性設計立方體( Inclusive Design Cube)
Benktzon’s 用戶金字塔提出後，劍橋大學的4位教授Simeon Keates, P. John Clarkson, Lee-Anne Harrison and Peter Robinson 再提出『包容性設計立方體』，這是一個三維的思考面向：移動力、認知力、感知力。
✅最外層: 嚴重殘疾人(三種能力都最缺乏)
✅最內層: 身體健全的人(三種能力都擁有)
教授們認為：包容性設計並非要求設計被每個人（whole population）使用，而是力圖充分認識用戶群體之多樣性，將其拓展至一個相對的「ideal population」，在設計的過程和結果中減少對用戶產生無意識的排除。(↕↕)
包容性設計
所以，你認為Facebook 為盲人做的自動文字替代，是否屬於『包容性設計』呢？
跟據世界衛生組織估計，全世界有10億人患有殘疾。 如果我們不進行包容性設計，大約有七分之一的人將無法參與與投入現代社會。
🐤 4.4 殘疾的定義
我撰寫這篇文章，收穫最大的就是這段，特別收錄在這：
引用澎湃新聞訪談Onny Eikhaug (挪威設計與建築中心包容性設計負責人)的文章：
✅每個人在人生某個階段都是殘疾
Onny Eikhaug：比如我今年夏天把手劃傷了，我就殘疾了。但這是暫時的。我做了手術，我的這隻手現在還不能提重物，不能擰瓶蓋，不能觸摸小動物，我就突然殘疾了。每個人過了40歲都會有視覺障礙，這也是一種殘疾。就像我說過的，還有很多殘疾是不可見的。懷孕人會有行動障礙。這不是我們通常意義上的「殘疾」。或者我們可以稱之為場景性的（situational）殘疾。比如說我們有一個臨時售票機，它如果太高了，很多小孩子就根本夠不到。
✅包容性設計考慮人類的多樣性
Onny Eikhaug：以前，大家想到殘疾，往往想到的是殘缺和傷病等；但是事實上「殘疾」其實應當被更廣泛性地理解為人與他人、環境和科技產品交互過程中，可能出現的不同程度不同種類的能力缺失。包容性設計正是考慮人類的多樣性、交互環境的複雜性、認知功能缺失的不同場景，並最終幫助產品更好地為每個人服務的設計理念。
✅一個好的包容性產品是可持續的
Onny Eikhaug：為一個特殊群體開發一項新技術的花費要遠遠大於包容性設計所做的那些個性化調查的花費。包容性設計實際上是通過以人為本的調查方式，最大程度利用現有資源。一個好的包容性產品一定是可持續的。
(這篇訪談很棒，大家最後記得去看一下全文)
😍😍謝謝你，看到這裡大約是文章的一半👏👏如果目前還蠻喜歡我的文章，可以先幫我拍拍手喔(渴望拍手的孩子) 👏👏
把所有名詞大概搞懂後，終於可以進入這張的主題了！(汗😅)
我將探討FB的無障礙團隊、圖片識別的五個階段、其他企業的包容性設計。
▍五、Facebook如何幫助盲人/失讀症患者?
🐤 5.1 Facebook無障礙團隊
每天，有成千上萬的殘疾人士或不能使用電腦鍵盤或鼠標或觸摸屏的人會使用社交網絡。他們使用隱藏式字幕，嘴控操縱桿和其他工具。
於是臉書於2011年成立的Accessibility團隊，甚至包含招聘了盲人工程師。團隊做很多輔助性的設計，比如視頻構建了隱藏式字幕，增加Facebook for iOS的默認字體大小的選項。
Facebook’s mission is to give people the power to share and make the world more open and connected. Making our products accessible to people with disabilities is an incredibly important step toward achieving this mission.
Facebook的使命是賦予人們分享和讓世界更加開放和聯繫的力量。讓殘障人士可以使用我們的產品是實現這一使命的重要一步。
（詳細成立過程可看這篇文章）
其中包含這個有趣的移情實驗室。
Facebook移情實驗室 (The Empathy Lab)
在移情實驗室，比如你只能用自己的聲音操作Facebook。或者，你只能使用鍵盤快捷鍵 — 而不是鼠標。
建立的目的是希望工程師在構建新事物時能夠記住身體殘疾和技術限制。“我們想把這個基本的東西與Facebook文化聯繫在一起。希望它像黑客一樣，是不斷創新的思維模式。”
🐤5.2 Facebook 圖片識別五個階段
我將Facebook圖片識別技術分成5個時期：
✅1. 盲人友好：基礎的介面設計。
✅2. 人工處理：善良立意，但沒效率。
✅3. 導入AI的包容性設計：機器學習圖片識別+保留人工處理。
✅4. AI的進步：圖片識別的進步(e.g. 辨識出動態行為) 。
✅5. AI的多元應用：圖片識別的未知面?
✅ 1. 盲人友好介面的基礎
多年來，網絡已經漸漸發展出對協助盲友們的介面。
例如，在每個Facebook 貼文上看到的向下三角形，屏幕閱讀器不會將其描述為”三角形”(這對盲友是沒有意義的形容)，而是描述為“這是一個選項，會有彈出按鈕”。這樣，盲人用戶就知道他們可以與之互動。(詳細可看這篇文章)
但，真正的問題是…
當時，盲人/失讀症患者可以用iPhone和Voiceover的工具使用Facebook，該工具將文字轉為口語。但Facebook是個充滿照片的社交平台，這樣的工具每次讀取照片時，只會顯示”照片”。而盲友們因此往往無法真正地融入社群。
✅ 2. 請為盲人描述這張照片
起初Facebook團隊曾想過，在上傳照片時要求大眾(不強迫的)：”請為盲人描述一下這張照片。”
這是一個常見的做法，比如LinkedIn就是。當您上傳一張照片後，會在一個角落顯示可以編輯照片的文字，並明確的告知目的是為盲友們協助。
但Facebook 每天有超過20億張的照片要處理，這件事落到了自動化的身上。
✅ 3. 導入AI的包容性設計
2016年Facebook團隊用機器學習，建立演算法來幫助AI學習識別圖像內容，並餵養數百萬個範例，接著利用工具，以語音敘述方式，向用戶讀出照片內容。(詳細可看這篇文章)
圖片識別重點：
🔵需要足夠的量：只要輸入足夠多關於狗的照片，機器就越有機會能夠在照片中識別出一隻狗。
🔵 需要時間學習：辨識的東西會隨著時間越來越精準。目前已能辨識包括交通工具（車、船、飛機）、自然現象（日落、下雪、海洋）、運動（籃球場）、食物等類型的圖像，也能針對人臉特徵進行敘述。
舉例：影像中出現「一對情侶戴著太陽眼鏡站在海邊微笑著」（下圖左），那麼，Facebook 的自動替代文本功能所讀出的會是「兩個人、微笑、太陽眼鏡、戶外、水」，至於下圖右，所讀出的則會是「披薩、食物」。
🔵機器介入的時機：在機器的辨識正確度達 80% 的情況下(有80％信心知道它正在看什麼)，機器才會對圖像進行文字標示，否則寧願不標註。(原因請見原文)
🔵 還需搭配語言：於2016年4月推出時，這個功能僅適用於iOS應用程序中的五種語言。2018年時已經可顯示超過29種語言。
保留人工編輯圖片
Facebook還是保留”手動編輯相片”功能，可以參考這頁說明:
我拿一張我的照片當示範，當我上傳照片時，點擊編輯相片：
接著點擊”替代文字”，會發現電腦已經幫我辨識出一串文字：『Faye Sung、微笑中、站立、鞋子和室內』
(哈哈哈，為什麼鞋子會被列入重點標籤呀?)
好，這裏你可以點擊『覆寫產生的文字』，編寫更完整的文字囉。
✅ 4. 圖片識別的進步(e.g. 動態動作)
在2017年，影像辨識技術已經可以辨識圖片中12種行為，包括人走動、跳舞、騎馬、彈奏樂器等。(詳細可看這篇文章)
並且將運用最新的自動圖片分類器（classifier）技術，未來使用者想不起某張相片拍攝者或拍攝時間時， 輸入「黑色T恤」，就能從他自己或親友分享的照片中快速而輕鬆找到最相關的圖片。
✅ 5. 圖片識別的多元應用?
2017年，一位工程師製作了顯示Facebook標籤的Chrome擴展程序，使用後大家可以看看Facebook的機器幫你的圖片做了哪些文字描述。(詳細可看這篇文章)
這位工程師說，Facebook可以很容易地從的照片中判斷您是否有寵物，是否收集相機，是否打高爾夫，是否有孩子。而我們無法阻止Facebook根據這些的照片向我們展示相關廣告！
🔵照片中的對象：可以分辨出照片中的物體類型，並根據這些物體確定您的興趣。
🔵你正在做的活動：無論您是在吃飯，跑步還是打高爾夫球，都可以使用算法來判斷您在照片中的行為。
🔵拍攝照片的時間和地點：可以判斷照片是在室內還是室外拍攝，一天中的時間是什麼，周圍有什麼物理地標（山脈，樹木，水等），等等。
🔵您正在參加的活動：甚至可以分辨出你參加哪種體育賽事。
🐤 5.3 其他企業的包容性設計
雖然有蠻大篇幅在探討我研究Facebook的設計(不是因為我的私心，而是文章本就起因於Facebook的全球大當機)，但基於公平，我同時也查詢其他的公司，分享如下。
✍ Microsoft 微軟
包容性設計的重點：
✅ 認識差異性：包容性設計反映人們的真實情況。所有人類都在成長並適應周圍的世界，我們希望我們的設計能夠反映出這一點。
✅ 為一人解決，擴展到許多人。
✅ 從多樣性之中學習：人類是適應多樣性的真正專家。包容性設計從一開始就把人放在中心位置。
(https://www.microsoft.com/design/inclusive/)
聘請盲人工程師來為盲人設計
微軟盲人工程師Shaikh ，在微軟主導開發了一套名為 Seeing AI 的圖像辨識系統。Shaikh 在眼鏡架上掃一下，眼鏡就能瞬間拍下畫面，然後用語音告訴 Shaikh 他的面前正在發生什麼。甚至還能幫他看菜單。(詳細可看這篇文章)
✍ Google 谷歌
Google產品設計主管Heather Cassano在這場包容性論壇中提到，她鼓勵團隊不斷詢問：
- 我們是否正在創建可供每個人可使用的工具？
- 這個產品/服務對誰有好處？
- 誰沒有得到很好的服務？她指出，為了解決這個問題，因此需要一個多元化的團隊來發現答案。
Google無障礙功能掃描工具
前往 Google Play 下載無障礙功能掃描工具，使用後會看到一張應用程式的螢幕擷圖，當中註明了可能可以改善的項目。(詳細可看這裡介紹)
▍最後，有些感想
當初只是好奇，投入之後就停不下來，這兩週參考的文章應該超過50的網頁了，還看了幾篇論文，有回到研究所的時光。我認識了科技帶來的進步，還有科技初始的善良立意。
關於包容性設計，我最喜歡的解釋是這位國際公認的兒童和家庭環境設計專家-Susan M. Goltsman所說：
包容性設計並不是要為所有人設計一件事。
而是設計多種參與方式，讓每個人都有歸屬感。
為這篇文章做註解
然後我想起吳念真導演的這段影片，又回去看了一次。片中最後所述：
知識不光是用來謀取利益的，是可以用來奉獻，是可以用來幫助別人的。
這系列是我以UX設計師的角度看AI的應用
我是一個AI小白，藉著撰寫文章，查找各種文獻的過程，督促自己學習並內化知識，歡迎各位follow我 I’m Faye | UX設計師在電商，跟著我一起慢慢了解AI。
▍拋幾個議題大家來討論吧~
✍ 1. 大家有沒有真的去試試我說的『人工編輯相片敘述』的功能呀? 好想知道大家覺得原本AI幫你寫好的相片敘述有沒有符合你的預期呢?
✍ 2. 其實我身邊真的沒有盲人/或是失讀症患者，不知道有沒有身邊剛好有認識的朋友? 他們真的是用這些方式在使用社群網站嗎? 而這些AI幫忙辨識的圖片說明, 真的有幫助到他們融入社群嗎?
✍ 3. 文章最後有提到那位工程師提醒大家, FB會把這些資訊拿去放送廣告, 那大家會願意接受這件事嗎? 像我自己是不排斥推薦我相關的廣告, 畢竟他依定會推廣告的, 那還寧願推我有興趣的, 而不要推薦我沒興趣的。
✍ 4. 大家的公司有在做包容性設計嗎? 還蠻好奇包容性設計的實際案例。
✍ 5. FB在機器辨識正確度達 80% 才介入 。大家有沒有其他看法? (其他文章有提到, 是因為避免錯誤判讀造成不悅, 某公司把黑膚色的人判讀錯誤…因此變成種族的議題等等) 我好奇的是通常導入AI後，還要幫忙界定何時才介入，那這個斷點要怎麼決定? 就像中國現在用AI抓穿越紅燈的路人，那影像辨識是要到哪個程度才會判定介入?
✍ 6. 這是我第一次寫AI相關文章，大家會覺得太淺白嗎? 或是太艱深嗎?
(歡迎在下方留言你的答案喔)
▍謝謝你的閱讀，希望留下你的回饋！
我很重視每一位讀者(你)的想法，因此做了一個超簡單的問券，1分鐘可填完，請點下圖surveycake連結)，真心感謝大家 :)
那可以請你賞我一些拍手嗎? (扭~)👏1-10 拍拍：給我一點鼓勵
👏11-30 拍拍：你還蠻喜歡這篇文章
👏31-50 拍拍：這篇文章對你幫助很大歡迎Follow我 I’m Faye | UX設計師在電商 以及Follow我的寫作平台 I’m Faye | UX設計師在電商，談轉職/設計/商業(兩個是不同的, 嗚嗚...medium的系統就是這樣, 懇請大家兩個都follow一下)
