TITLE: 淺談認知心理學與產品設計的結合 AUTHOR: QUENCY DATE: 07/27/2013 12:46:24 PM CATEGORY: 人因工程設計 STATUS: publish ---- BODY:
淺談認知心理學與產品設計的結合
http://www.wufangbo.com/psychology-and-product-design/
作者：前端开发-武方博 发布：2011-03-14 15:43
對許多產品經理和設計師來說，設計評審PK仿佛夢魘，設計師辛辛苦苦出的方案，可能遭受多方質疑。也許方案本身是優秀的，但卻無法用理論說服對方，結果越改越醜。
自1879年科學心理學誕生以來，心理學家開展了大量研究，對人類認知、情感、記憶等各方面的規律進行深入探討。許多結論都能對產品設計提供理論支援。
一款軟體產品最先呈現給使用者的是產品介面。良好的介面元素容易識別、易於理解、能夠快速記憶，且較少出現誤操作。
1. 介面元素的編碼特徵
◾可識別性
以費希納、韋伯等最早一批心理學先驅就是以研究感知覺閾限為起點的，他們的研究指出人的視覺、聽覺等只能刺激特定強度範圍的刺激。在介面設計過程中，應當注意元素的可識別性。例如文字的不能太小，顏色也不能太淺。
◾可辨別性
知覺心理學研究表明，人的知覺能力存在差別閾限。兩種刺激必須大於差別閾限，才能被辨別出來。不同介面元素（特別是近似的、連續的）的視覺特徵應能明顯區分，防止使用者需要努力辨別，增加認識資源。
◾意義性
刺激必須是有意義的，能夠被人理解。因此，文字表達上、符號圖示的設計上，都應保證使用者能夠正確理解，不會出錯。
對圖示意義性的可用性測試：先對使用者進行測試，看正確識別的比率有多高；過一段時間後，對相同使用者進行再測，看正確率的維持情況。O表示original, R表示Retest。
◾標準化
在不同條件下，刺激的意義需統一。例如，每個地方紅燈都表示停止，綠燈是表示通行。對於同系列軟體來說，不同平臺的圖示和控制項樣式，也應避免意義衝突。
2. 介面元素的相容性
刺激相容性是指在不同場景、不同情境下的通用性。刺激的相容性越好，學會的速度就越快、反應時間越少、錯誤越少、心理負荷越小。
◾概念相容性
例如，SOS、110、119這些縮寫，概念相容性都是極好的。再比如，紅色表示停止、綠色表示通行和安全；選單中使用「勾選」等等。
◾動作相容性
順時值旋轉與數值增加有關，如調節音量的旋鈕；指標往上調節，表示數值增加，如溫度計刻度。
◾方式相容性
Wickens, Sandry, Vidulich(1983)的研究證實，在言語任務中，刺激以聽覺形式呈現，以語言形式反應，反應時間最快；在空間任務中，刺激以圖形呈現，以動作形式反應時，反應時間最快。
QUENCY註： Wickens, C. D.; Sandy, D. L.; Vidulich, M. (1983). "Compatibility and resource competition between modalities of input, central processing, and output". Human Factors (Santa Monica, CA, United States: Human Factors and Ergonomics Society) 25 (2)
3. 顏色的認知加工
◾ 顏色與對比度
人眼對顏色對比度的知覺受空間佈局的影響。如下圖，兩幅圖的黑白顏色一樣，但前者色塊越大，對比度顯得也更大。
◾ 顏色與注意資源
同一螢幕內，如果使用過多的色彩，會分散注意，讓使用者無法快速找到目標。
◾ 顏色性別差異
英國Newcastle 大學的神經科學專家Anya Hurlbert的研究（2007）發現，儘管被調查者都更喜歡藍色，但女性的選擇更靠近藍色譜系中偏粉紅色的一端。多項研究也得出了類似的結論（Silver，1988；Ellis & Ficek, 2000）
QUENCY註：Hurlbert, A. C., & Ling, Y. (2007). Biological Components of Sex Differences in Color Preference. Current Biology, 17(16), R623-R625. => http://www.cell.com/current-biology/retrieve/pii/S096098220701559X
2003年，Joe Hallock開展了一項針對顏色偏好的專項調查（樣本量230），結果如下：
(=> http://www.joehallock.com/edu/COM498/preferences.html)
◾顏色的年齡差異
Russell James Adams(1983)研究發現兒童更喜歡長波長的顏色，例如紅色、黃色。年齡較大者最喜歡藍色，女性比男性更喜歡黑色和紫色(Silver & Ferrante, 1995)。Hemphill & Michael（1996 ）的研究也支援了這點。中國關於色彩偏好的研究也有此發現（陳立，1965）。
=> Adams, Russell James, "The Perception of Contrast and Color by the Human Newborn" (1983). Open Access Dissertations and Theses.
Paper 1337. => http://digitalcommons.mcmaster.ca/cgi/viewcontent.cgi?article=2361&context=opendissertations
=> N. CLAYTON SILVER and ROZANA FERRANTE (1995) SEX DIFFERENCES IN COLOR PREFERENCES AMONG AN ELDERLY SAMPLE. Perceptual and Motor Skills: Volume 80, Issue , pp. 920-922.
Joe Hallock(2003)的研究發現，隨著年齡的增長，對藍色的喜好非常穩定，越來越多的人不太喜歡橙色。
◾ 顏色與情緒
色彩和情緒之間的關係與色彩偏好緊密相關，而色彩偏好和某種色彩是否會引出積極或消極的情緒有關（Naz, K., Helen, H., 2004）。
=> Naz, K & Helen, H. Color-Emotion Associations: Past Experience and Personal Preference. Proc. AIC 2004, (2004).
Boyatzis和Varghese在1994年研究兒童的色彩情緒聯繫時發現，兒童趨向把積極情緒（例如高興，強大）與亮顏色聯繫（例如藍色、綠色），把消極情緒（例如悲傷、憤怒）與暗顏色聯繫（例如黑色、灰色）。在一個對澳大利亞大學生的顏色情緒聯繫的研究中，Hemphill（1996）也發現亮顏色主要引出積極的情緒聯想，而暗顏色主要引出的是消極的情緒聯想。
=> Boyatzis, C. J., & Varghese, R. (1994). Children's emotional associations with colors. Journal of Genetic Psychology, 155, 77-85.
=> M. Hemphill (1996) 'A note on adults' color—emotion associations', The Journal of Genetic Psychology, 157 (3): 275-80.
N. Camgoz, C. Yener, D. Guvenc (2002)的研究發現顏色的色調、飽和度和明度三個屬性對色彩偏好有非常重要的影響。受試者最偏愛的是飽和度和明度最大的組合，隨著明度和飽和度的增加，受試者對顏色的喜好程度也隨之增加。
=> Camgoz, N., C. Yener & D. Guvenc. 2002. “Effects of hue, saturation, and brightness on preference”. Color Research and Application 27: 3.199–207.
愉悅(Pleased)，放鬆(Relaxed)，興奮(Excited)，挑釁(Aggressive)，痛苦(Unhappy)，順從(Subdued)
◾ 顏色的文化差異
不同的群體，顏色的文化內含也有差異。如下圖，不同國家滅火器使用了不同的顏色，反映出顏色的文化差異。
QUENCY：滅火器有不同的顏色，紅色是水，乳黃色是泡沬，藍色是乾粉，黑色是二氧化碳，綠色是BCF(Bromochlorodiflouromethane，海龍Halon 1211)。
許多研究者和設計師都曾分析總結過不同國家的顏色內涵。這些文化差異是我們設計過程中需要注意的，尤其是對於產品的國際版本。
整理自《The Zen of CSS Design: Visual Enlightenment for the Web》
◾ 顏色錯覺
有關顏色的錯覺有很多種，有的錯覺現象是設計過程中需要避免的，而有的則可加以利用。這裡僅作初步分析，舉例如下：
避免紅藍重疊和紅綠重疊，因為這樣會引起視覺深度的錯覺。如下圖，藍色色塊像是顯示在紅色的上方。
背景顏色對目標顏色的知覺會有影響。如下圖，左右相同顏色的X，但由於背景不同，知覺的色彩出現明顯差異。
◾ 色盲
人群中色盲的發生率還是挺高的，男性為8%，女性為0.5%。
在色盲人群眼中的世界，遠沒有正常人看到的精彩。紅綠色盲的人可能會分不清交通紅綠燈的差異（如下圖）。我們在產品設計過程中，也需要注意這一點，儘量避免由於色盲原因而無法感知重要的變化資訊。
4. 字體的視覺加工
◾ 字體粗細
有研究者推薦，理想閱讀效果的字體粗細可設為：白底黑字1：6-1：8；黑底白字1：8-1：10。（注：1：6的意思是，筆劃粗細為1，文字高度為6）
隨著亮度的下降，粗體字更容易被識別。如下圖所示，左側的文字較容易識別。
在較低亮度或較低對比度的條件下，可使用粗一點的字體，如1：5；字體顏色很亮時，粗細可至1：12-1：20。
◾ 文字和底色
黑底白字，文字的顏色會向黑色背景散射，這稱為光滲現象。如下圖，同樣粗細的字體，白顏色的字顯得比黑顏色的字更粗一些。
=> 我們觀看色彩時，會受到周圍色彩影響而產生變化，就是色彩的對比現象。=> http://www.psy.ritsumei.ac.jp/~akitaoka/shikisai2005.html，Illusion and color perception，Akiyoshi Kitaoka
=> http://zh.wikipedia.org/wiki/%E5%AD%97%E4%BD%93%E6%8E%92%E5%8D%B0%E5%AD%A6，字體排印學，WIKI
由於紅色與藍色對比影響知覺的原因，應避免紅字藍底或藍字紅底的情況出現（如下圖）。
有設計師曾總結出符合良好知覺效果的文字底色對比方案，具體如下：
◾字母大小寫
研究表明，小寫字母更容易辯認，因為它的特徵更容易被區別。
◾文字資訊的認知加工
一段文字怎樣呈現，才最容易閱讀？這不僅涉及到呈現的視覺效果，還跟行文風格、句子結構和內容有關。研究表明，句子類型和文字順序都會影響文字加工的速度。
句子類型：主動句、肯定句，比否定句、被動句更容易被理解。
文字順序：應與動作順序匹配，例如「先選1，後選2」的誤操作比「選2之前先選1」更小。
5. 介面佈局與認知加工
◾ 資訊密度
對於相同資訊容量的內容，呈現的刺激密度越大，搜索時間越長，錯誤率越高。如下圖，A的資訊密度比B更大，資訊搜索的難度也就更大。
◾ 資訊組合
如上圖，A只有一個組合，B有多個組合。有研究表明，當一個組合的視角小於5度時（40cm視距，12-14個字，6-7行的高度），在組中搜索資訊的時間較為固定，當視角超過5度時，搜索時間就顯著增加。
因此，理想的頁面配置是，將資訊設置為小於5度視角的多個組合，將最有利於使用者快速搜尋資訊。
◾ 複雜度
有研究發現，將文字按組塊豎排，複雜度比橫排更小，更易於搜索資訊。如下圖：（當然，圖B的局部密度也較小，組塊的視角也在5度左右。）
6. 圖表與認知加工
一幅好的圖表比得上1000字的文字說明。但需要注意所使用的圖表類型，避免引起誤解。舉例如下：
看圖1，給人感覺隨著時間推進，A和B的差距越來越大，但圖2告訴我們並非如此；
看圖3，給人感覺B約為A的3倍，C約為A的4倍，而圖4告訴我們並非如此。
7. 符號（圖示）
一般來說，符號的表現力會比文字更好，因為它不需要經過語義加工，直接是視覺加工。
◾ 選擇符號的標準
1.可識別性：具體做法可以是，將符號呈現給使用者，請他說出是什麼；
2.匹配：給定系列符號和解釋，要求將它們對應起來，記錄並分析所用的時間及錯誤；
3.偏好：詢問使用者喜好程度和意見
◾ 如何檢驗符號的好壞？
方法1：再測法，即先對使用者進行測試，看正確識別的比率有多高；過一段時間後，對相同使用者進行再測，看正確率的維持情況。如下圖，O表示original, R表示Retest，可以看出，第1個圖示的再測正確率偏低。
方法2：反應時法，即同時給使用者呈現（呈現時間很短）多個符號圖示，要求使用者以最快的速度判斷它的意義。反應時最短、錯誤率最低的圖示，為最理解的方案。
◾ 符號標準化
如果需要在不同場景中使用同樣符號，要保證符號的標準化，在各場景中的意義相同。
本文出自Tencent WSD Blog，轉載時請注明出處
本文固定鏈接: http://www.wufangbo.com/psychology-and-product-design/ | 前端开发-武方博
----- --------
請先 登入 以發表留言。