UI/UX｜該如何告訴老闆：越大、越明顯不代表越多人會看見
身為設計師，大多都聽過同行提起這段話：「老闆總是想要字大一點、顏色亮一點、位置明顯一點。」但本質上，老闆是在做生意，想要更大、更明顯並沒有什麼不妥，甚至可說是完全合乎情理的要求。
而許多 UI/UX 設計師，喜歡用「這樣很醜」或是「這樣很干擾使用者體驗」作為反對的理由。但是他們忘了，老闆每天看的、談的都是錢，是綠油油的鈔票、白花花的銀子。
「只要能讓更多人看到，就算醜一點、影響一點體驗，又如何？」
所以我從來不說醜、不談體驗，只談錢。如果老闆想要的是讓更多人看見，那麼我就送他四個字，告訴他為什麼越大、越明顯不代表越多人會看見。這四個字就叫：廣告視盲。
什麼是廣告視盲？
Banner blindness（廣告視盲），有時又稱為橫幅視盲，顧名思義就是使用者對於廣告視而不見的現象。要注意的是，雖然 banner 是橫幅的意思，但廣告視盲效應並不限於發生在橫幅廣告上，也會影響到陳列式廣告、動態廣告、彈出式廣告等等。
為什麼廣告那麼明顯擺在那裡，使用者卻完全沒看見，或是看見了也沒有印象呢？
不注意視盲（Inattentional Blindness）
哈佛大學心理學家 Daniel Simons 與學生 Christopher Chabris 做過一個著名的實驗：看不見的大猩猩（Invisible Gorilla）。他們要求受測者看一個短片，短片中，穿著黑衣及白衣的人們來回丟一顆籃球。受測者的任務是只計算白衣人傳球的次數，並忽略黑衣人的傳球。但他們不知道的是，影片中有一個穿著黑猩猩連身裝的人會走入畫面、做出搥胸的動作後悠閒地離開。他們更不會想到，看完影片的自己竟然會對這隻黑猩猩視而不見，完全忽視牠的存在。
不注意視盲（又稱為認知視盲），指的是因為專注於眼前的任務，導致對其他與任務無關的事務視而不見。這導致專心默數白衣人傳球次數的受測者忽略了所有的黑衣人，也就連帶忽視了黑色的大猩猩。
以數位產品來說，容易出現這個現象的情況包含看影片或執行任務時。這也就是為什麼 Youtube、Facebook Watch 都採用打斷觀看的覆蓋式廣告，因為如果不打斷觀看進度，使用者就會專注於影片內容，而根本不會注意到旁邊有廣告。
使用者選擇性忽視
除了真的沒看見之外，使用者也會故意對廣告視而不見。Drèze & Hussherr 認為，由於網路廣告出現的位置、大小有一定的相似度，因此使用者能用眼角餘光的周邊視覺辨別出廣告，進而避開它們。
選擇性忽視廣告大多出現在使用者能夠預測廣告出現的時機與位置時，像是置頂橫幅、右側欄位廣告及彈出式廣告等，都是使用者會刻意忽略的廣告形式。
根據 Burke, M., Hornof, A., Nilsen, E., & Gorman, N. 的研究，即便眼動追蹤結果顯示使用者幾乎沒有看廣告，且事後也回想不起廣告內容，但是在有廣告的頁面執行任務，花費的時間還是比在沒有廣告的頁面上執行任務要來得久。也就是說，使用者的確是有注意到（但沒有接收到）廣告的，而且避開廣告會增加他們的認知負荷，完成任務的時間也因此變長。
只要長得像廣告 就會被歸類為廣告
你說，可是我現在並不是要做廣告啊？廣告視盲和我又有什麼關係呢？接下來的研究，顯示了使用者選擇性忽視廣告的程度到了多麼病態的地步。
自動忽視廣告污染區
眼動追蹤發現，當網頁右側欄位帶有大量圖片，或是出現廣告、贊助等字眼，使用者在視線接觸到後便會像避之唯恐不及一般立即遠離，再也不去看它。使用者不僅成功避開廣告，甚至也連帶忽略了周遭所有的內容，包含網站功能，或是與他現在正在觀看的文章相關的內容。
也就是說，所有長得像廣告、鄰近廣告，或是讓人聯想到廣告的內容，都會被刻意忽略。
就算看見 大腦也會自動屏蔽資訊
另一個研究更有趣：把最想讓人看見的內容用超顯眼的大紅字顯示，肯定很多人會看見，對吧？錯了！研究人員讓使用者到美国普查局網頁，查看目前美國總人口數，明明答案就用大紅字擺在右上角，竟然有 86% 的受測者找不到答案。
乍看眼動追蹤熱圖，使用者明明就有看右側欄位，為什麼會找不到答案呢？但仔細看就會發現，使用者基本上只看了人口數的前 1/3 段，也就是說使用者僅僅是對右上角區塊進行瀏覽，而沒有閱讀。這是因為顯眼的紅字和標題上的藍色超連結長得太像廣告，所以明明眼睛看見了，大腦卻拒絕接收，導致使用者看了半天還是沒找到自己要的答案。
什麼樣的設計容易造成廣告視盲？
廣告視盲在某種程度上，是被訓練出來的。使用者習慣了常見的廣告模式、版位、設計和行為，並熟練地避開網頁中含有廣告的區域。所以即便我們設計的其實並不是廣告，只要它越像廣告、越使人聯想到廣告，就越容易造成廣告視盲。
廣告視盲好發於帶有目的性 / 任務導向的頁面上（註 1）。
註 1：在缺乏明確目的性、具有探索性質的頁面上（如電商首頁、購物網站），廣告視盲的效果也相對較不明顯。
例如，當使用者想要閱讀一篇文章時。假設我們是一個新聞網站的設計師，想要讓更多人訂閱新聞網的電子報，於是做出了這樣一個介面：
以下就來分析這個介面容易造成廣告視盲的原因，以及可以怎麼做，來有效迴避廣告視盲的效果。
1. 位置像廣告
上方置頂、右側欄位、彈跳視窗等，都是使用者預期廣告會出現的傳統版位。尤其如果放置的內容是圖片、影片類型，就更容易造成廣告視盲。
我們經常會認為，把我們希望強調的內容放在置頂的位置，或是使用者一進入頁面就用彈跳視窗來增加曝光，就能夠讓更多人看見。但實際上，這些都是最會引發廣告視盲的版位，也會讓鄰近的內容成為污染區。
2. 視覺像廣告
經常出現在廣告上的大面積矩形色塊、鮮豔的顏色、醒目的視覺，雖然看似更能抓住目光焦點，但是卻也更容易引發廣告視盲。
以訂閱電子報這樣的內容來說，我們可能會覺得下方黑白的版本很無趣，彩色的版本才能吸引人訂閱或下載。但是黑白的版本因為更接近「介面」，而不會讓人聯想到橫幅廣告，所以被忽視的可能性也較低。
3. 行為像廣告
類廣告行為包含 gif 動畫、影片自動播放、角落彈窗等，令人聯想到廣告的介面行為。例如將訂閱電子報的橫幅做成 gif 動畫，或是右上角的「發燒影片」做成自動播放，都是容易引發廣告視盲的設計。
有效迴避廣告視盲的 4 種方法
既然「像廣告」是引發廣告視盲的主因，那麼要迴避廣告視盲只要讓介面越不像廣告就行了。
1. 融入環境、避免過於突出
第一種可以嘗試的方法，就是將介面「去廣告化」，讓位置、顏色和行為的設計，盡可能與產品或網頁的介面相似。極端一點的例子像是 Facebook、Instagram 等，喜歡將廣告混在貼文或限時動態裡，藉此避免引發廣告視盲（只是會讓使用者有種被騙的感覺就是了）。
我個人偏好的做法會是將想要強調的資訊放在使用者視覺動線會自然經過的地方（例如文章中間），並採取低調但是仍帶有區別性的設計，避免整體的視覺過於突出。如此一來，可以降低對使用者的干擾程度，但是又能有效讓資訊被看見。
2. 加入操作性元件
眼動追蹤研究顯示可操作的元件——例如選單、輸入框、CTA 按鈕——能夠有效避免廣告視盲。Nielson Norman Group 指出，有一種用戶類型稱為 Tool-dominant users，他們的目光容易被操作性元件吸引。這可能是因為操作性元件出現在廣告上的頻率較低，或者是能讓使用者產生有選擇性、可控感的緣故。
以電子報訂閱的例子，除了原本的 CTA 之外，可以再加入輸入框的設計。如此一來，就算是放在傳統的右側欄廣告版位，也能夠一定程度地避免廣告視盲。
3. 使用者完成任務後再出現
前面有提到，廣告視盲好發於使用者有明確目的性，或是任務導向的頁面。因此，部分研究也發現，如果將廣告或 CTA 放在頁面下方，在使用者完成當前任務後才出現，轉換效果會明顯提升（註 2）。Content Verve 曾經針對一個 landing page 做過 A/B test，發現 CTA 在頁面底下的版本，轉換率竟較 CTA 在上方的版本，高出了 304%。
所以我們也可以嘗試將訂閱電子報的資訊放置在文末，使用者讀完文章後才出現，藉此降低引發廣告視盲的機率。
註 2：因每一個產品的文案、性質和實際狀況都不同，因此 CTA 實際轉換效果在每個產品頁面也不盡相同。最準確的方法還是要為自家產品的 CTA 位置進行 A/B test，找到最適合的按鈕位置。
4. 強化與當前任務的關聯性
心理學實驗發現，當使用者在執行一個任務時，選擇性注意力（Selective Attention）會使他屏蔽與任務無關的資訊。藉由強化與當前任務的關聯性、增加對用戶的個人化，我們可以降低被選擇性注意力屏蔽的機率，避免引發廣告視盲。
例如在電子報的案例中，使用者正在閱讀一篇「設計觀點」類別的熱門文章。此時，與其單純叫使用者去訂閱電子報，我們可以改問他要不要「定期收到更多設計觀點熱門選文」。多一點小巧思、帶一些簡單的變數，就能有效避免使用者屏蔽資訊。
避免廣告視盲才是轉換率關鍵
說了這麼多，讓我們回到設計師 V.S. 老闆的對決。當老闆想要「更大、更亮、更明顯」時，我們除了美醜、體驗，更要考慮到這樣是否真正會讓更多人看見。
廣告視盲告訴我們：越大、越明顯，不代表越多人會看見。轉換率的關鍵在於使用者注意到資訊後是否有效地接收它，而不是屏蔽它。
如果你家的產品是電商或購物網站，使用者大多是缺乏目的性、用探索的心態在「逛」，那的確有可能更大、更亮、更明顯的物件效果會更好；但是如果你在做的是內容平台、工具型產品，使用者更偏向任務導向，那麼融入環境、強化關聯性的效果應該會更佳。
別忘了測試、測試、再測試
由於每一個產品的特色、性質和目標族群都不盡相同，因此並不是每一個研究所提出的迴避廣告視盲的方法都一定會完全適用。另外，有些方法雖然能避免引發廣告視盲，卻也可能會惹怒使用者，造成使用體驗上的反效果。
因此，除了參考上述提到的幾種設計方法之外，也別忘了反覆測試不同的位置、視覺、文案和行為，找到最適合自家產品的模式。
希望這篇文章對大家有幫助，如果有任何問題也歡迎留言詢問！那麼我們下次見～ 👋
↓↓ 如果喜歡這篇文章，請幫我掌聲鼓勵鼓勵～也歡迎追蹤，我會不定時發布新文章！👏👏👏