吸睛就贏了！專家帶你破解螢幕上的「美」
在注意力成為稀有資源的時代，東西醒不醒目，可能比你的偏好還重要！
幾年前，卡塔琳娜．雷內克（Katharina Reinecke；她現在在密西根大學）也想了解我們在網路上的第一印象從何而來，首先就是要搞清楚我們在那幾分之一秒的時間內到底看到了什麼。搜尋諸多文獻後的結論是，最相關的審美特徵，也就是我們馬上就看到的東西，是「色彩豐富性」和「視覺複雜度」。不久之後，她開始研發一種演算法，能夠根據這兩個視覺變數自動評估網站的外觀，希望在用戶看清楚網站的外觀之前，就先預測出他們的喜好程度。雷內克一開始是研究顏色。
許多研究已經顯示，顏色對於我們在網站上的反應可能有顯著效果，確實會影響我們的瀏覽和購買決策。娜歐米．曼德爾（Naomi Mandel）和艾瑞克．約翰遜（Eric Johnson）的研究中，受測者要瀏覽一個賣車網站，請他們選出一輛會買的汽車。14有一組學生看到紅色和橙色背景的網站，另一組則是看到綠色背景與浮動的美元標誌。綠色背景是想讓學生想起美元和金錢。結果正如預期那樣，綠色組選擇便宜車子的人多出31％，因為那個顏色和錢的標誌讓他們更注意價格。雖然絕大多數受測者都認為自己的決定不會受到背景顏色所影響，但孟德爾和約翰遜的實驗卻得到完全不同的結論。
 |
| 善用字型、色彩、熱點位置、淘汰分類，解決網路上的選擇困難，打造更聰明的螢幕！ |
色彩豐富與視覺複雜度
當然，大多數的網站會做得更精致，不會使用明亮的綠色背景和錢的標誌讓用戶想到金錢。但雷內克也懷疑，色彩強度和色種範圍還是可以影響我們對於網站的看法。為了測量色彩強度的影響，雷內克計算螢幕上白色以外的像素量，色種範圍則是根據HTML 4.01規範下的16種標準色來分析網頁用色接近標準色的像素百分比，以評估螢幕色彩顯示的熟悉度。當符合HTML標準色的像素百分比較低時，表示該網站的用色比較不尋常。「當你開始注意網站的顏色，會看出這裡頭有許多的不同。」雷內克說：「有些網站在黑色背景和其他對比色的襯托下，顏色顯得非常飽和；有些網站大部分是白色的，只有一點點顏色做搭配。」除了色彩豐富性之外，雷內克團隊也研究另一個審美變數「視覺複雜度」，測量特定網站呈現的資訊量，觀察這些資訊是如何呈現。例如，她假設比較不對稱的網站會讓人覺得更複雜，有明顯文字區塊的網站也是，尤其是這些區塊的安排在整個網頁空間中顯得不太平衡的時候。為了量化這些因素，雷內克採用「空間基礎」分解法，可以自動辨識每一個文字和圖像區域。在這個模型中，一個大標題被視為一段單獨的「文字組」，子標題和文字內容也都依此分類。空間基礎分析完成後，整個網站被分解成幾個不同的內容區域，演算法就可以算出這些區域的密度和是否對稱等特徵。
雷內克團隊從幾大類的網站中選出450個網站，其中有20個是曾被提名參加「威比獎」（Webby Awards）競逐的優秀設計。她探究的是第一印象，所以需要受測者以前沒看過的網站。總共242位受測者接受簡短的網路測試，觀看30個不同的網站（從母體450個裡頭隨機抽樣），每個網頁的呈現時間是500毫秒，受測者再就每個網站的視覺吸引力來評分，總分是9分。然後把這些網站以不同的隨機順序呈現，讓受測者再看一次，並做第二次評分。兩次試驗評分的一致性高達94％，表示視覺吸引力確實是可靠的變數。最後，再針對各個網站，比較用戶的平均評分和演算法預測的視覺吸引力評分。
結果令人印象深刻，根據資料顯示，雷內克模型就特定網站的審美偏好變化，可以做出48％的解釋。
這表示，我們對於特定網站的立即反應─喜歡或不喜歡─有將近一半可以用色彩豐富性和視覺複雜度來解釋。
「這是很棒的發現！」她說：「我認為它所透露的意義是，很多設計者認為很重要的東西（例如內容或圖像）可能根本沒那麼重要。」事實上，這種對於相關變數的錯誤信念，也許可以解釋有些威比獎提名的網站，平均來看並不比隨機挑中的網站更有魅力。因為那些網站的設計師只考慮到一些不相關的細節，所以網站的表現也就不太好。
網站設計複雜風險才大
為了幫助各位深入了解這套模型的運作，希望你也來做一個簡單的練習。首先，請連上www.digitai.com/#lab網站觀看短片，這次請點擊Visual Appeal: Exercise 2（視覺吸引力：練習2），你會看到5個不同的網站，每個呈現的時間是500毫秒。接著請各位為每個網站評分，最高為9分。
打好分數了嗎？我展示給各位看的那些網站，是從最沒吸引力排到最有吸引力，在雷內克的實驗中，第一個平均只得2分，最後一個平均得了7分。我猜，各位應該都沒有足夠的時間看清楚，也無法閱讀網頁上的文字內容，但各位應該也認為後面的網頁設計的確是比前面的好。
那麼，各位為什麼會有這樣的反應呢？為什麼大家會認為最後那個網站的吸引力是第一個的3倍呢？根據雷內克的研究，最重要的變數顯然就是網站的視覺複雜度，影響力是色彩豐富性的好幾倍。
雷內克發現到，視覺複雜度越高者，通常是一些視覺上不對稱的網站，塞滿了許多文字、連結和圖檔，視覺吸引力的評分越低，兩者呈現負相關。這並不是說大家就喜歡很簡單的網站，太簡單的網站分數也不高，不過，還是不會像元素太過複雜和密集的網站那麼慘。
意思是說，就視覺複雜度而言，它面對的風險是不對稱的：如果網站呈現太簡單，風險比較小；要是網站設計太過複雜，風險就大囉！但是這個審美研究的真正收穫是發現視覺複雜度的小亮點：那些在複雜度方面得分平均4.2的網站，吸引力大約是複雜度較高者的2倍。
<文摘要來源>
博客來：http://bit.ly/2nTn0FR
金石堂：http://bit.ly/2qMKVYH
ePub電子書：http://bit.ly/2rli5dO
時報悅讀網：http://bit.ly/2qMuiMA
時報攜讀網：http://bit.ly/2qn5Kc1