世界第一的半導體產業需要什麼樣的UX心理學

Kevin Chang
9 min readJul 6, 2019
研究的主角們
🔒基於保密條款,
以下使用的數據已調整、修改,內容皆出自ASML出版審查部門審閱過的公開版本論文。
此文章僅止於我個人觀點做闡述,並不全然代表ASML的觀點。

我們活在大數據的時代,
生活中的互動都少不了數據的產生與交換。
在這麼龐大的數據面前,我們該如何快速理解和判斷,
數據可視化(Data Visualization)是最直觀的方法。

從數字變到圖像

在可視化的運用中, 色盤(colormap)的使用更是關鍵性地影響資訊的呈現。

university of groningen -Scientific Visualization and Computer Graphics

在ASML,分析晶圓數據的能力至關重要,晶圓圖(Wafer Data Plot)能幫助工程師與客戶快速掌握狀況,再決定下一步的動作。

ASML工程師朝夕相處的晶圓圖

研究計劃的原點

擁抱創新,讓ASML站穩半導體機台研發與製造的龍頭地位,但對於視覺化數據這一塊,30年來卻不曾有什麼改變。因此,他們希望我藉由這份碩論研究,看是否能完成一份色彩指導(Colormap Strategy),提升工程師判讀數據的能力。

🔎 研究方法

設計心理研究的兩個角度去剖析現況

1. 透過與不同開發團隊的訪談,了解他們如何判讀晶圓圖,與目前使用色盤(colormap)的問題

2. 進行文獻探討,閱讀過去相關的認知色彩使用研究,了解色盤的設計概念,與可深入研究的方向

在這過程中,我觀察到很有趣的狀況

過去的文獻

一個爭論了40年的色彩使用

最早從1980年,這近40年間有許多研究推薦了更適合的色盤用在數據分析,它們基於感知心理( perceptual)理論或是實際的實驗證明,這些新顏色應該表現更好。

有部分論文更是直接批判目前廣泛應用的彩虹圖(Rainbow Colormap),而這顏色也在ASML用了幾十年。

簡單解釋一下彩虹圖的主要問題在哪:

上排的灰階圖,你可以輕鬆地排出它的順序;但如果是下排的彩虹圖,就沒有這麼直觀了。
同樣的數據套用不同的色盤,在左邊的圖(灰階)可以清楚地看到上方描繪了一些細節;但右邊的圖(彩虹圖)因為不規則的光譜,掩蓋了細節且過度強調部分數據。

但儘管研究結果是如此,現實我們看到的是…

現今的狀況

在公司訪談我發現幾乎所有的開發團隊都仍在使用彩虹圖做晶圓判讀,甚至覺得沒有什麼改變的必要。

給他們看了UX team之前設計的新色盤效果,還強烈地反對了這個提案。

天啊!你們要改成這個?這新顏色我一點都不想用!

我發現30年來理論和現實的落差

👉設計師從觀察問題找到解決的答案;研究者(Researcher)從許多答案中,找到合適的答案去解釋問題。

從文獻研究,我注意到感知(perceptual)心理的色彩研究已行之有年,不過對於認知(cognitive)心理的色彩研究卻仍很局限。

Perception  感知How we see the world. 我們如何看這個世界
Cognition 認知How we understand the world. 我們如何理解這個世界

結合設計師與研究者的思考

在訪談的過程中,發現這些工程師對於新顏色的強烈反彈,從認知心理的角度-心理模型(mental model)或許可以解釋這個現象。

為什麼icon要這樣設計?

翻開手機,我們或許曾注意過,為什麼一些功能類似的app的圖標長得都差不多?

心理模型是指,當人在面對新的資訊時,會仰賴過去的經驗幫助我們做快速判斷,所以UI設計運用這些生活上我們熟悉的物件當做app圖標設計的參考,讓我們立刻知道這app大概有什麼功能。

🔎 研究問題

“對於色盤的心理模型是否影響數據可視化的判讀”

為驗證心理模型的差異是否影響決策,我將受測者對於彩虹圖的經驗分成專家(Expert)與非專家(Novice)

比較兩組受測者表現上的差異

📒 假設一 (聚焦在專家組)

專家對於彩虹圖的豐富經驗是否會影響讀圖的判斷
專家組會受到過去對於彩虹圖的經驗影響,在重複實驗的開始,應該能觀察到在前期使用彩虹圖的優勢 (快速判讀、高答對率),不過經過幾次重複實驗,其他感知理論上有優勢的色盤在最後應該能超越彩虹圖。

📒 假設二 (聚焦在非專家組)

感知理論上佔優勢的色盤是否在實際表現上也佔盡優勢
非專家作為對照組,在重複實驗的開始到結束,因為他們沒有這些色彩讀圖的經驗,使用其他的色盤的表現應該能一直都比彩虹圖好。

📝 實驗設計

有了實驗假設,接下來就是設計實驗。

我希望能設計出一個介面,能複製這些工程師平常讀晶圓圖的任務,畢竟總不能做一個毫不相干的色彩測試,然後告訴他們這個顏色用在他們工作中也是一樣有效。

👉把複雜的大問題簡化成一個個小問題

ASML部門之大,不同團隊使用晶圓圖去判斷不同的數據。要如何設計一個介面能包含所有團隊的工作內容?從訪談的過程,我試著分析他們這些複雜的數據分析的背後,能否總結出幾個核心目標。

最終我歸納成一個2x2的矩陣,2種聚焦,2種讀圖類型:

實驗架構

色盤選擇

有了實驗的架構,再來就是選擇測試的色盤。基於幾篇感知心理學的色彩研究,我選了兩種類型的色盤對於ASML常用的讀圖方式(Pattern Recognition & Spot Finding),理論上會表現最好。

實驗平台架設

這邊只舉其中一個實驗為例,後續的結果也以這個實驗做討論,不然內容真的太長…

Task#1: Heatmap Pattern Recognition

工程師會從晶圓圖上判斷趨勢、比較不同區塊的差異、面積大小,所以他們能不能快速且精準地判斷圖形是這個實驗的重點。

實驗的框架圖,主要用來跟UX Team討論這個體驗是否正確
實際操作介面

實驗流程

受測者基於問卷結果,分類成有使用色彩圖多年經驗的專家跟非專家。
在三次實驗結束後都會填寫一份問卷,對於他們使用彩虹圖時給的答案有多少信心

🔎實驗結果

兩種判斷受測者表現的指標⏱️ 時間表現(花多少時間回答每一題)🙆 答對率表現(每一題的答案正確與否)

⏱️ 時間表現

這邊只列出彩虹圖與表現最佳的兩種顏色
(線段越靠近X軸越好,代表所花時間越短)
可以看到在Novice組,理論上有優勢的色盤(藍線的Diverging),在實際表現上也比彩虹圖(黃線)能快速做判斷。不過對於Expert來說,他們熟悉的彩虹圖判讀時間會比其他色盤來得快

🙆答對率表現

(線段離X軸越遠越好,代表答對率越高)
這邊的結果很出乎意料,可以發現理論上有優勢的色盤(藍線),在實際表現上,從頭到尾在兩個受測組中都表現比彩虹圖(黃線)好p.s. 甚至在專家組表現差異還比非專家組來的明顯,而且非專家組的整體表現還比專家來的精準… 不過這又是另一個故事了

👉從實際表現上,我們可以說彩虹圖的心理模型,能幫助專家做出快速的判斷,但卻無法幫助正確的判斷。

🔎 額外的心理研究

前面的實驗驗證了實際表現上的差異,我想額外深入了解從心理上又有什麼差異? 在實驗流程的段落有提到,我在實驗的最後讓他們填寫:

“在這個實驗,對於使用彩虹圖給的答案,你有多少信心?”

非專家組的表現很合理:信心越高,實際得到的分數也越高但專家組的表現就很有趣:信心越高,實際得到的分數卻越低

👉從心理表現上,專家用彩虹圖的時候,判斷很快,但不代表一定正確,可是卻超級有信心!

🔎設計 X 心理研究

這是一份非常棒的經驗,恰好地結合了我在大學所學的設計與在碩士學的心理研究,一個學術生涯的總結。也因為這份特別的研究,我受邀在他們的年度季會和總部的科研部門上,發表碩論的成果並跟這些主管們PK一下。

從設計角度,我提供公司一份色彩指導,未來工程師要繪製晶圓圖跟同事、客戶溝通時,可以基於他用什麼數據類型、聚焦是什麼,去找到相應的最佳色盤。

從心理研究角度,解釋了這個現象的存在會造成工程師什麼樣的誤判,以及未來ASML要推這個新設計時,必須克服的心理問題。

紀念在這8個月中 完成了一件很酷的UX研究

--

--