網站配色會影響業績嗎?3個你該知道的原因

多數經營者把網站配色歸類為美感問題,顏色順不順眼、跟不跟品牌識別搭,是設計師該煩惱的事,跟成交、業績扯不上什麼關係。但訪客走進一個網站,建立第一輪判斷的時間短到不合常理,遠比多數人以為的還要快,快到訪客根本還沒認真讀完一行文字,大腦就已經先幫這個網站打完分數。而在這一瞬間裡,顏色正是大腦拿來下判斷最主要的線索之一。

其實網站配色要處理的問題,不只是選哪個顏色好看,而是訪客的潛意識拿來判斷「這家店可不可信、貴不貴、適不適合我」的依據,這個判斷發生在他還沒讀懂任何一句文案之前,之後即使認真看了內容,也很難完全推翻第一印象。搞懂這套機制,你不必變成配色專家,也能先避開幾個正在悄悄流失訂單的執行失誤。

先從這第一輪判斷實際發生得多快、又在評估什麼講起,再往下拆兩個最常見也最容易被忽略的執行問題。

原因一:訪客還沒看完內容,配色已經替他做出第一輪判斷

學者 Gitte Lindgaard 領銜的一項網頁設計研究發現,訪客對一個網頁形成視覺印象,只需要大約五十毫秒,比眨一次眼還短,短到訪客根本來不及讀完標題,更別說看完產品說明。這份研究進一步發現,這個瞬間形成的印象會直接延伸成訪客對網站可不可信、好不好用的後續判斷,這種現象稱為月暈效應,意思是只要第一眼觀感夠好,接下來的內容即使普通,訪客也會傾向往好處解讀;第一眼觀感差,後面寫得再仔細,也很難扳回來。

行銷學者 Satyendra Singh 的一項研究則指出,人對一件事物,不論是人或商品,整體判斷大約會在九十秒內定型,而這段判斷裡,大約六成到九成來自顏色本身,不是文字內容,也不是版面配置。換句話說,訪客對你網站的第一輪判斷其實有兩層時間尺度,一層是五十毫秒的視覺瞬間,另一層是稍後但仍然極快的九十秒整體印象,配色在這兩層判斷裡都是主角。

這個判斷具體在評估什麼?史丹佛大學說服科技實驗室主持的一項超過兩千五百人參與的研究發現,受訪者對網站可信度的評語裡,有百分之四十六點一是根據視覺設計層面,也就是版面、字體與配色,而不是實際內容。也就是說,訪客會憑顏色把你的品牌歸類成「高端」、「平價」或「雜亂」的其中一種,而這個分類幾乎在他還沒看清楚你賣什麼之前就已經完成。Nielsen Norman Group 這個國際使用者經驗研究機構也指出,網站的可信度判斷與配色、版面等視覺呈現是否得宜有直接關聯。

訪客的第一印象分兩層形成,五十毫秒就有視覺印象、九十秒內整體判斷定型,其中六到九成來自顏色本身。
第一印象分兩層形成:五十毫秒的視覺印象、九十秒內的整體判斷,而顏色佔了整體判斷的六到九成(資料來源:Lindgaard 2006、Singh 2006、Stanford Web Credibility Study)。

網站配色真的會影響訪客的決定嗎?答案是肯定的,而且發生的時間點比多數經營者想像得早很多,早到內容寫得再好,都得先過配色這一關。只是配色出狀況,不見得是顏色本身選錯,更常是同一個畫面塞了太多顏色,反而讓訪客抓不到重點。

原因二:主色用得太多,反而稀釋了訪客該注意的重點

不少經營者以為顏色用得越豐富,網站看起來越有活力、越能展現內容的多元,於是主色、對比色、強調色一次全部搬上檯面,首頁裡光是背景、按鈕、標題就用了五、六種顏色互相搶戲。問題是,訪客的視覺注意力一次只能鎖定有限的重點,當畫面裡每個顏色的份量都差不多,訪客反而找不到這一頁到底要他看什麼、做什麼,注意力被拆得四散,原本該集中在關鍵資訊或行動呼籲上的焦點,就這樣被稀釋掉了。

視覺設計有個常見的通則,顏色需要分主從、有比例,而不是幾種顏色平均分配。實務上常見的做法是抓一個主色鋪大面積,像是背景或大區塊,搭配一到兩個輔色處理次要區塊,再留一個高飽和度的點綴色只給最重要的行動呼籲使用,像是加入購物車、立即諮詢這類按鈕。這不是唯一公式,但有主從這件事,遠比五色平均分配更容易讓訪客一眼抓到重點。

左邊五色份量相近讓 CTA 被埋沒,右邊主色鋪底、輔色次要、點綴色只給 CTA,訪客一眼就看到重點。
顏色要分主從——主色鋪大面積、一到兩個輔色處理次要區塊、點綴色只留給 CTA,比五色平均分配更容易讓訪客抓到重點。

Nielsen Norman Group 在討論使用者體驗視覺設計原則時也提到,對比與視覺層次的做法,是靠顏色的份量差異把訪客視線引導到真正重要的元素上,而不是讓每個區塊都一樣搶眼。主色搶戲的實際後果,往往不是看起來比較活潑這麼單純,而是訪客分心找不到重點、跳出率上升,連你最想讓訪客看到的內容,都可能被其他同樣顯眼的色塊蓋過去。

舉個常見的情境,一家提供多項服務的中小企業官網,把每個服務區塊都用飽和度相近、卻不同色系的顏色強調,結果訪客反而分不出哪個服務是主力,每一項看起來都同樣重要,等於沒有重點。不少經營者也好奇,網站顏色是不是越多越吸引人,答案通常相反,顏色多不等於吸引人,反而容易讓訪客失去方向。顏色太多是整個畫面的問題,另一個更直接的失誤,則藏在訪客真正要按下去的那個按鈕上。

原因三:按鈕顏色跟背景太接近,訪客看不出哪裡能按

比起按鈕該用哪個顏色好看,更關鍵的其實是按鈕跟背景之間的對比夠不夠。不少網站的按鈕顏色跟背景色太相近,或者雖然色相不同,明度卻很接近,結果視覺上按鈕看起來就不像按鈕,訪客根本沒意識到那個位置可以點。這不是配色美感的問題,而是對比夠不夠、能不能讓按鈕從畫面裡跳出來的機制問題。

人的注意力有個特性,天生容易被跟周圍不一樣的元素吸引,認知心理學把這種現象稱為孤立效應,又稱 von Restorff 效應,一個元素只要在顏色、形狀或大小上跟周遭明顯不同,就更容易被注意到。這也是為什麼,按鈕能不能讓視線自動被拉過去,才是真正決定訪客會不會按下去的關鍵,而不是顏色本身好不好看。常見的撞色失誤是兩個飽和度接近的顏色相鄰,例如同樣鮮豔的橘色按鈕放在同樣鮮豔的紅色背景上,肉眼反而分不出邊界在哪裡,對比不足,這套吸引注意力的機制就直接失效。

同一顆橘色按鈕放在鮮紅背景上幾乎看不見,換到淺色背景就明顯跳出,對比決定訪客看不看得到按鈕。
按鈕跟背景對比不足就會融成一片,W3C 建議一般文字達 4.5:1、按鈕等介面元件達 3:1,訪客才看得清楚哪裡能按。

這個問題對某些訪客的影響又更大。色弱、色盲的訪客,或是在戶外強光下用手機瀏覽的訪客,對顏色差異的敏感度本來就比較低,對比不足的按鈕對他們幾乎等於隱形。這關係到的不只是無障礙合規,而是能不能接到訂單,這群看不清楚按鈕的訪客,就是正在流失的訂單。

全球資訊網國際標準機構 W3C 在無障礙網頁規範裡明訂,一般文字需要達到四點五比一的對比度,大型文字與按鈕這類介面元件則需要達到三比一,這是目前公認、用來判斷對比夠不夠的具體標準。換句話說,網站按鈕看不清楚確實會影響轉換率,而色盲的人看網站顏色,感受到的對比效果也確實跟一般人不一樣,這正是為什麼對比要留出足夠的安全空間,而不是只憑肉眼看起來過得去就上線。

網站配色從來不是好不好看的選擇題,而是訪客能不能在極短時間內看懂內容、看得到重點的清晰度問題,這才是它跟業績之間真正的關聯。與其糾結該選哪個顏色,經營者更該先回頭檢查自己的網站有沒有主從比例、CTA 顏色夠不夠從畫面裡跳出來。

資料來源
  1. Attention Web Designers: You Have 50 Milliseconds to Make a Good First Impression! — Gitte Lindgaard
  2. Impact of Color on Marketing — Satyendra Singh
  3. How Do Users Evaluate the Credibility of Web Sites? A Study with Over 2,500 Participants — 史丹佛大學說服科技實驗室
  4. Trustworthiness in Web Design: 4 Credibility Factors — Nielsen Norman Group
  5. Visual Hierarchy in UX: Definition — Nielsen Norman Group
  6. Understanding Success Criterion 1.4.3: Contrast (Minimum) — WCAG 2.2 — W3C