多數 banner 在上線前都會被仔細檢查過一輪，圖片挑得漂亮、文案改了好幾次、色彩也對過品牌規範，設計師自己盯著畫面看，幾乎挑不出毛病。奇怪的是，同一支 banner 擺到頁面上，使用者的視線可能連一秒都不到，就已經把它歸類成「可以跳過的東西」，內容根本還沒被看進去。一支每個環節都做過的 banner，為什麼還是常常被略過？這篇要一次盤點的，就是 banner 常見設計錯誤裡最容易被忽略、卻又最常讓 banner 失敗的幾個地方。
Nielsen Norman Group 的 Kara Pernice 在 2018 年做的一份眼動追蹤研究裡，就記錄過一個典型案例，某個廣告區域佔了頁面約 25% 的可視內容空間，一名受測者整段測試落在那裡的注視卻只佔了 0.8%。這個 banner 視盲的現象不是新鮮事，同一份研究分別在 1997、2007、2018 三個年度重複驗證過，已經被記錄超過三十年。也就是說，使用者不是看了 banner 覺得不吸引人才略過，是連認真看都還沒開始，眼睛就自動跳掉了。
真正決定一支 banner 會不會被跳過的，往往不是創意夠不夠強，是設計裡幾個容易被忽略的細節。先從最根本的一個開始看起。
錯誤一：想讓每個元素都被看見，結果沒有一個被記住
最常見、也最根本的一個錯誤，是想讓 banner 裡的每個元素都被看見，圖片放大、標題加粗、按鈕上鮮豔色，結果每個元素都用差不多的力道搶眼，使用者的眼睛反而找不到該先停在哪裡。這不是資訊放得不夠多，是沒有任何一個元素真正被賦予「最重要」的位置。
Nielsen Norman Group 的 Kelley Gordon 在討論視覺層級（visual hierarchy）時指出，如果使用者很難判斷該看哪裡，通常代表版面缺少清楚的視覺主從；她也建議，複雜的設計裡對比層次別超過三種，一旦每個元素都在互相對比，就沒有東西真的凸顯出來。
要辨識自己是不是中了這個錯誤，方法很簡單，瞄一眼手上的 banner，如果講不出「這張圖第一眼要我看哪裡」，大概就是每個元素都在搶戲，誰都沒被記住。
錯誤二：文案想講的太多，讀者連第一句都沒讀完
同一支 banner 如果同時塞進賣點、優惠、品牌訴求跟規格，看起來資訊很完整，使用者卻常常連第一行都沒讀完，這正是文案端最容易犯的錯誤。banner 的閱讀方式從來不是精讀，使用者只會用掃視的速度帶過，文字一多，整段反而容易被直接跳過。
Nielsen Norman Group 的 Kara Pernice 在 2017 年更新的一份研究裡指出，使用者掃視網頁時習慣先讀最上面幾行，靠開頭幾個字判斷要不要繼續往下看；一旦內容缺乏清楚的重點線索，使用者就會選擇省力的路徑，只掃過去而不精讀。這份研究也直接建議，把最重要的訊息放進最前面，把不必要的內容砍掉。
要判斷自己是不是也犯了這個錯誤，可以做個簡單測試，banner 的文案如果要讀兩三秒以上才搞懂在講什麼，字數大概已經超標，該做的不是換個字型讓它看起來精緻，是先把非說不可的那句話挑出來，其餘的先拿掉。
錯誤三：文字疊在照片上，卻看不清楚在寫什麼
字明明打上去了，為什麼看起來卻像沒打？常見的原因，是標題、副標直接疊在照片或插畫上，沒有做任何遮罩、漸層或對比處理。遇到背景本身色彩複雜、明暗不均的照片，文字馬上被吃掉，讀者看得出畫面上有字，卻認不出寫了什麼。
問題通常不在有沒有放文字，是文字跟背景之間夠不夠對比。W3C 網頁無障礙標準（WAI）在對比度這條準則裡明確規定，一般文字與背景的對比度至少要達到 4.5:1，字級夠大（約 18 級以上的粗體）可以放寬到 3:1；針對疊在照片上的文字，準則的具體做法建議在文字下方加一層足夠深或足夠淺的遮罩，讓即使照片本身很花，遮罩後仍能維持這個門檻對比度。
這件事有一個客觀標準可以檢查，不必只憑肉眼感覺順不順眼。背景圖案愈複雜，文字就愈難被辨識，遇到這種底圖，先幫文字加一層遮罩，再確認深色文字配淺色遮罩、或淺色文字配深色遮罩，對比度有沒有到門檻，而不是覺得「看起來還好」就直接上線。
錯誤四：banner 配色跟頁面融成一片，等於沒被看見
banner 單獨截圖看很好看，放回頁面裡卻幾乎找不到它在哪，問題常常出在配色。banner 整體色調跟頁面背景、導覽列、周邊區塊太過相似，即使設計得很精緻，放回頁面裡還是會被判讀成「頁面的一部分」，而不是值得多看一眼的重點。
W3C 網頁無障礙標準（WAI）裡的非文字內容對比度準則規定，具有意義的圖形物件與使用者介面元件，跟緊鄰的顏色之間至少要有 3:1 的對比度，才能讓人清楚辨識出這是一個獨立、有功能的區塊。這個「跟鄰近顏色拉開對比才會被辨識」的原則，同樣適用在 banner 整體跟頁面背景之間該維持的最低區隔。
這裡也有一個常見的誤會，banner 的顏色跟品牌識別色一致，不代表 banner 就該跟頁面融為一體，兩件事該分開處理，配色可以延續品牌識別，但視覺上仍要跟周邊環境拉出區隔。
錯誤五：沒有清楚的下一步，讀者不知道該點哪裡
花心思做了圖片、寫好文案，卻忘記放行動呼籲（call to action）按鈕，或按鈕做得太小、離主要文字太遠，是 banner 最容易被忽略的一環。讀者看完 banner，卻不知道接下來該做什麼，前面所有的努力等於沒有出口。
Nielsen Norman Group 的 Jakob Nielsen 在討論介面設計裡動作與物件的距離時提到，格式塔（Gestalt）心理學的鄰近原則指出，畫面上彼此靠近的元素會被視為一組、有關聯；當按鈕這類可操作元件離它所對應的內容太遠，使用者常常直接忽略，甚至誤以為這個功能根本不存在。
自我檢查的方式，是想像把 banner 的文字和圖片都拿掉，只留下按鈕，讀者還找得到它嗎？如果答案是否定的，問題往往不在按鈕的顏色或大小，是它離自己對應的那句訊息隔得太遠。按鈕該貼著它要促成的那個決定，不能各自散落在 banner 兩端。
錯誤六：同一張圖到處套用，沒有依裝置分別處理
同一張 banner 在桌機上看起來好好的，換到手機卻感覺怪怪的，問題通常不在縮放技術，是設計階段就沒有為不同尺寸另外規劃構圖。常見的狀況，是同一張 banner 圖不管在桌機、手機、還是不同版位，都直接套用同一張圖，靠瀏覽器自動縮放了事，結果手機版常常被硬裁掉重點，人物的臉、關鍵的文字被切在畫面外，或者圖片被壓得整個字都糊掉。
Google 的官方開發文件 web.dev 說明，一般的響應式圖片只是把同一張圖縮放成不同尺寸；而「藝術指導」（art direction）則是依裝置螢幕大小，改用完全不同裁切方式的圖片，確保畫面重點在任何尺寸下都維持清楚可辨。文件也特別提醒，這類調整純粹是視覺呈現效果的考量，用意是讓重點內容不被裁掉，不是效能面的技術優化。
檢查的方法不難，把 banner 縮到手機寬度看一次，主角或文字有沒有被裁掉、看不清楚。同一張圖等比縮放，跟針對裝置重新構圖，是兩件不同的事，前者省事，後者才能保證重點在每個尺寸都看得到。
錯誤七：底圖選得不合適，畫面和訊息互相打架
底圖好不好看，跟選得對不對，是兩回事。問題常常出在底圖只顧視覺效果，沒有考慮跟 banner 要傳達的訊息合不合、跟品牌調性搭不搭，實務上最容易看到的狀況，是硬套一張情境不符的示意圖，或是明顯只是裝飾用的美圖。畫面確實漂亮，讀者卻感覺不到跟自己有關。
Nielsen Norman Group 的 Jakob Nielsen 透過眼動研究發現，單純用來妝點畫面、跟內容無關的裝飾性照片，幾乎會被使用者完全忽略；相對地，跟訊息內容真正相關的圖片，例如真實情境、真實產品，才會被使用者留意與細看。這份研究甚至直接點出，在網頁上，過度妝點等於被忽略。
判斷方法是把 banner 上的圖片單獨拿掉文字看一次，還看得出這張 banner 在講什麼嗎，還是只剩一張漂亮但無關的圖。純裝飾用途的圖片，容易被讀者的眼睛直接跳過，選圖的第一個問題該是「這張圖有沒有幫忙傳達訊息」，不是「這張圖夠不夠美」。
錯誤八：品牌識別放得太大或太小，比例很難拿捏
品牌識別的比例也常抓不準，而且兩個方向都會出錯，一種是把 logo 放到跟主視覺搶戲，佔掉 banner 一大塊面積，整支 banner 看起來像在自我宣傳，而不是提供有用的內容；另一種是完全不放品牌識別，讀者看完 banner 卻不知道這是誰家的訊息。
延續本文開頭提到的 banner 視盲研究，帶有明顯自我宣傳、過度強調視覺處理的區塊，容易被使用者辨識為廣告而主動迴避。這個原則放到品牌識別的比例上同樣成立，過度放大品牌識別，讓 banner 整體視覺像在強力推銷自己，也會觸發同樣的迴避反應。
要抓比例，不是去找一個放諸四海皆準的固定數字，是先確認品牌識別有沒有大到喧賓奪主，佔掉了讀者原本該注意的主視覺，又有沒有小到讀者看完整支 banner，對這是誰家的訊息完全沒印象。另一個訊號是，如果 logo 佔比明顯大過標題文字，或 banner 整體視覺高度重複、規律排列，很容易被讀者的視覺系統直接判斷成廣告而略過。品牌識別的份量該服務於訊息本身，不是拿來單獨凸顯自己。
還有這些容易被忽略的小地方
除了前面八個之外，還有幾個同樣容易被忽略的小地方，合起來一起檢查會更完整。
文案有沒有錯字，或者用詞前後不一致，例如同一支 banner 裡「立即」跟「馬上」交替使用，讀起來會顯得不夠仔細，連帶讓整支 banner 的可信度打折。
圖片的解析度是否足夠，放大顯示或在高解析度螢幕上呈現時，圖片會不會模糊、出現色塊。解析度不夠時，圖片邊緣容易出現鋸齒、色彩過渡也會變得粗糙，這一點同樣會讓 banner 整體看起來不夠精緻。
每次要出新 banner 時，是不是都從零重畫，沒有把常用的版面骨架、字級階層、色板整理成可以重複使用的基礎。這會導致每次改版風格都不太一致，也很耗費製作的時間。
banner 做完先別急著上線，找一個沒看過這支 banner 的人，只給他看幾秒鐘，再問他記不記得看到什麼、知不知道下一步該點哪裡。如果對方講不出重點，也講不出該點哪裡，前面這些 banner 常見設計錯誤裡，很可能已經中了一個，該做的是回頭檢查，而不是急著發佈。真正能撐住 banner 效果的，往往就藏在這些不起眼的細節裡，不是靠一次更亮眼的創意翻身。