多數人在決定要不要把一段內容包進彈窗時，想的是畫面乾不乾淨；真正該想的問題其實只有一個，就是使用者把這個彈窗關掉之後，這段內容還找不找得到。這聽起來像是個小小的介面選擇，實際上決定了讀者能不能重新看到你最想讓他看到的那段內容，也決定了搜尋引擎抓不抓得到它。
彈窗（modal）在網頁設計裡幾乎無所不在，確認刪除、要求登入、訂閱電子報，幾乎每個網站都用得到。問題不在於用不用彈窗，而在於放進去的是什麼。同一個元件，拿來裝一次性的確認訊息沒問題，拿來裝整篇規格說明或必讀的操作步驟，常常就會出狀況，常見到不利搜尋引擎收錄、行動裝置上關不掉、讀到一半被硬生生打斷，甚至被使用者的大腦直接歸類成廣告、看都不看一眼。
這條界線，決定了哪些內容適合交給彈窗，哪些內容一旦被塞進去就等於讀者永遠看不到。先從彈窗這個介面元件的本質講起，再一路拆到索引、行動裝置、認知負荷跟搜尋排名這幾個具體後果。
modal 的本質是打斷，不是承載內容的容器
彈窗（modal）是什麼，先把技術定義釐清。Nielsen Norman Group 的可用性研究把 modal dialog 定義為一種會蓋在主要內容之上、把系統帶進特殊模式的對話框，它會讓主要內容失去互動能力，一路持續到使用者明確跟這個彈窗互動為止，你按下確認、取消，或任何一個回應動作，主頁面才會解鎖。這跟另一種常被搞混的東西不一樣，nonmodal（非強制型）浮動視窗不會停用主內容，使用者可以選擇忽略它、晚點再處理，例如 Gmail 寫信視窗開著，你還是能捲動、還是能點其他信件。本篇只討論前者，也就是真正會擋住主內容的那種彈窗。
會強制擋住主內容，不是設計師想炫技，而是這個機制打從被設計出來，就是為了這樣運作。modal 最早的用途是警示與確認，系統發生了需要立即處理的狀態，把對話框放在畫面中央變成視覺焦點，讓使用者第一眼就注意到問題並且處理掉。這個機制天生就是為了「短暫、強制、單一」的互動設計，不是為了展示內容而生。
換句話說，modal 的本質是一道強制關卡，不是一個收納空間。判斷某段內容適不適合放進 modal，取決於這段內容符不符合「短暫、強制、單一」這三個特性，不是取決於畫面上剛好有空間可以塞。這正是本篇要建立的判準起點，接下來每一節的討論，都是在檢驗某種內容跟這個本質合不合拍。
modal 適合處理確認、登入與單一操作
從本質往下推，哪些內容真的適合放進 modal？Nielsen Norman Group 同一份研究歸納出幾種合法用途，這是這條界線的其中一側，先講清楚合法的用法有哪些，後面幾節才好對照哪裡越界。
- 警示不可逆的錯誤：像是覆蓋掉一個檔案、或是還沒存檔就要離開，這種一旦執行就回不了頭的操作，才值得用 modal 打斷使用者。判斷依據看兩件事，這個錯誤放著不管會變得更難修還是更容易修，以及這個錯誤能不能復原。
- 請使用者輸入流程無法往下走就缺的資訊：手工藝電商 Etsy 是個常被引用的例子，使用者要把一件商品加進收藏清單，但還沒登入，這時彈出登入視窗，因為「加入收藏」這件事沒有帳號真的做不下去。
- 把複雜流程拆成一步步的精靈：設定精靈（wizard）式的 modal 可以把一個耗費心力的流程拆成幾個簡單步驟，但要顯示進度，不然使用者容易半途放棄；而且如果整個流程本身就需要好幾步，那多半代表它該獨立成一個頁面，不該擠進 modal。
- 請求能大幅簡化後續流程的資訊：房地產平台 Zillow 會在使用者要聯絡房仲之前，用 modal 問一句「你是不是已經有房仲了」，這個問題不影響使用者當下要做的事，卻能讓後續互動更精準，屬於低門檻、單一次只問一件事的漸進式建檔。
這四種情境的共同點是，任務都很短、很聚焦，而且跟使用者當下正在做的事直接相關。使用者被 modal 攔下來的那一刻，他很清楚自己為什麼被攔、要回答什麼，回答完就能繼續原本要做的事，這正是 modal 被設計出來要處理的那種互動，跟接下來要談的核心內容完全是兩回事。
modal 裡的核心內容常常抓不到索引
把界線從使用者行為判斷，帶進技術判斷，modal 裡的內容能不能被搜尋引擎讀到，取決於它怎麼被寫出來，不是「modal 天生不利 SEO」這種模糊的說法。
Google 官方說明過，它處理一個網頁要經過三個階段：檢索、轉譯、建立索引。網頁排進轉譯佇列後，由無頭版的 Chromium 執行頁面上的 JavaScript，把實際內容轉譯出來，Google 是用轉譯完成後的 HTML 去建立索引，不是用最原始那份還沒執行 JavaScript 的 HTML。這代表一件事，只要 modal 的內容本來就寫在頁面的 HTML 或 JavaScript 裡，轉譯完成後真的出現在渲染後的畫面結構裡，不管它當下是不是被 CSS 用 display:none 這類寫法視覺隱藏起來、要等使用者按下按鈕才切換成看得見，都在轉譯的範圍內，會被索引。
真正的風險藏在另一種常見做法裡，modal 的內容不是預先寫進頁面，而是等使用者點擊開啟 modal 的按鈕之後，才由 JavaScript 動態去抓資料、插入頁面，有時候是呼叫外部 API，有時候是額外載入一份 HTML 片段。技術 SEO 顧問 Ryan Jones 在 Search Engine Journal 一篇專欄裡把這兩種實作方式的差別講得很直接：內容本來就在頁面裡、只是用 CSS 讓它視覺上不可見，JavaScript 只負責切換顯示，這種會被完整索引；使用者做出某個動作之後，內容才被動態載入進來，搜尋引擎不會主動去做那個觸發載入的點擊動作，這種內容有可能不會被當成該頁面的一部分索引。
寫進 HTML 才會被索引，等點擊才插入的內容通常抓不到
這個判準不用猜，自己就能動手驗證。把瀏覽器的 JavaScript 停用，或是直接用「檢視網頁原始碼」而不是開發者工具裡的 Elements 面板，後者看到的是瀏覽器渲染完成後的結果，不是搜尋引擎判斷索引與否所依據的那個階段。用這個方法搜尋看看，modal 裡那段文字在不在裡面。找得到，代表這段內容多半沒有索引風險；找不到、只看到一個空的容器，代表這段內容要等點擊才出現，搜尋引擎大機率讀不到。
Ryan Jones 也提到一個真實因為做法沒選對而出狀況的案例，有些網站把每一個 modal 的內容各自存成獨立的 HTML 檔案，靠使用者點擊才動態載入。結果 Google 沒有把這些內容跟原本那個頁面關聯起來，反而把這些不適合當入口的獨立 HTML 檔案本身各自建了索引，使用者從搜尋結果點進來的，是一個原本設計成只該出現在彈窗裡的片段，不是完整的頁面。這正好說明，modal 裡的核心內容如果沒被正確索引，不會只是「這段內容沒被看到」這麼單純，還可能連整個頁面的入口點都跟著跑掉。
行動裝置上，關掉 modal 本身就是一道障礙
就算內容有被索引，使用者也點進了頁面，行動裝置上光是要離開 modal、回到自己原本想看的內容，本身就有明確的可用性障礙。手機螢幕小，modal 常常填滿大半個畫面，關閉鍵被擠壓在角落；而且關閉鍵多半放在畫面右上角，單手操作時拇指要伸到最難搆到的位置才點得到。
這不是設計師的主觀感受，而是有國際通用的無障礙標準在管。W3C 的無障礙指引 WCAG 2.2 在 2023 年新增了一條成功準則，明確規定用滑鼠、觸控這類指標裝置操作的互動目標，可點擊範圍至少要有 24×24 個 CSS 像素，除非目標之間已有等同 24 像素以上的間距、目標是內嵌在一段文字中，或該尺寸的呈現方式對傳達資訊本身是必要的。這條標準用來支撐一個很具體的判斷，modal 的關閉鍵常常太小，行動裝置上很難精準點中。
W3C 另一份規範〈Dialog (Modal) Pattern〉則從技術實作面補了一塊，一個實作正確的 modal，鍵盤焦點必須被困在 modal 內部，Tab 跟 Shift+Tab 只在 modal 內部循環，使用者在不關閉 modal 的情況下無法把焦點移出去。也就是說，離開永遠得先透過一個明確的關閉動作才能達成，不像一般頁面內容可以直接捲動略過。這說明 modal 不容易被略過、一定要先處理掉，不是實作上的瑕疵，而是這個互動模式一開始就是這樣設計運作的。也因為這樣，一旦裡面裝的內容不值得讓使用者被迫困住，這個機制本身就會變成一種負擔，不是幫使用者省事，而是多添一道關卡。
打斷正在進行的任務要付出真實代價
把鏡頭從「進不進得去、關不關得掉」拉遠到打斷這件事本身的成本。Nielsen Norman Group 整理出 modal 打斷使用者時實際發生的幾個具體缺點。
第一、modal 要求立即處理，使用者在 modal 出現的當下沒辦法繼續原本正在做的事，必須先回應它。第二、每一次打斷都會轉化成時間與力氣的損失，使用者不只要處理 modal 本身，回到原本任務後還得花時間重新進入狀況。第三、切換到另一個任務會帶來額外的認知負荷，使用者回頭要重新拾回原本任務的細節，難度往往比想像中高，剛才在填的表單填到哪一格、正在比較的兩個方案有什麼差異，常常要重新想一遍。第四、modal 讓使用者多了一個額外目標，就是先把這個彈窗處理掉，讀懂它、做出決定，這件事本身就是一筆額外的互動成本，除非彈窗內容真的重要，值得讓使用者付出這筆成本。第五、modal 會擋住背景內容，蓋住畫面時很可能正好蓋住使用者回答這個 modal 所需要參考的資訊，反而讓使用者更難做決定。
這五點合起來，講的是同一件事，打斷從來不是免費的。使用者原本專注在一件事情上，modal 跳出來的那一刻，他要付出的不只是多按一下，而是整段注意力被切斷、重新接回去的成本。核心內容如果值得讀者花這筆代價，用 modal 打斷還說得過去；如果只是輔助性的東西，這筆代價就是白白浪費讀者的注意力。
modal 用太頻繁，會被忽略也會拖累搜尋排名
把打斷的代價再往下推一層，不是每次打斷各自獨立算帳，重複打斷會累積成一種習慣性忽略，連真正該被注意到的那一次也一起被犧牲掉。
Nielsen Norman Group 明確指出，把 modal 用在不重要的事情上，會讓使用者對這個格式整體失去信任，之後看到都直接忽略。文中引用伊索寓言「狼來了」當比喻，一再誤導的結果，是等你真的需要別人相信你的時候，已經沒有人願意理你。研究團隊也點名一個常見情境，電子報訂閱彈窗對業務端可能很重要，但對使用者來說從來不是必要的，近期的可用性研究裡，使用者對這類 modal 表達出明顯的反感。
這個機制在更早、規模更大的眼動追蹤研究裡也被證實過。Nielsen Norman Group 在 2007 年做的一份大型可用性研究發現，使用者的視線幾乎完全不會停留在長得像廣告的版面元素上，不管它實際上是不是廣告，這個現象後來被稱為 banner blindness（廣告視盲）。一旦某種版面元素被大腦歸類成「該忽略的東西」，視覺注意力就會自動跳過它，彈窗只要被用過幾次不重要的用途，就足以讓使用者把它整個歸進廣告視盲的清單裡。
這個被忽略的後果，不只是體驗層面的問題，Google 官方也把它變成明確的排名訊號。Google Search Central 在 2016 年 8 月發布公告，宣布自 2017 年 1 月 10 日起，如果使用者透過行動搜尋結果點進網頁後被以下做法干擾瀏覽，包括立刻或瀏覽過程中顯示覆蓋主要內容的彈出視窗、顯示必須先關閉才能看到主要內容的獨立插頁式廣告、或版面配置讓不需捲動就看到的區塊變成像獨立插頁廣告、真正的內容被推到下面，這類網頁在行動搜尋結果中可能會排名較低。這代表濫用彈窗付出的代價，已經不只是讀者的耐心，還包含實際的搜尋排名。
讀者主動要不要，才是 modal 能不能裝下核心內容的界線
modal 該不該裝核心內容，判準其實只有兩個問題。
第一個問題，是這段內容是不是使用者自己主動觸發、主動想看的，而不是網站片面塞給他看的。第二個問題，是使用者把 modal 關掉之後，這段內容還找不找得回，有沒有其他管道能再看到它。核心內容，也就是主要說明、必讀資訊、頁面的主題本身，在這兩個問題上通常都是「不是」跟「找不回」，這正是為什麼它不該被塞進 modal；modal 真正該裝的，是使用者自己按下去才會出現、關掉也不影響他理解頁面本身、下次要用還能再觸發一次的輔助性內容。
用這兩個問題去看幾組常見的對照，判準會更清楚。一份商品的完整規格表，是使用者理解這件商品必須看到的核心資訊，關掉就等於讀者從此看不到規格，這種內容該留在頁面主體；但一個一次性的單位換算小工具，例如把英吋換算成公分，使用者按下去才需要，關掉也不影響他讀懂商品本身，這種輔助工具放進 modal 很合理。文章正文是讀者搜尋進來真正想看的東西，絕對不該被塞進彈窗；訂閱電子報的表單是網站想要的，不是讀者主動要的，而且關掉之後讀者一點都不會少看到什麼，放進 modal 完全合理。教學文件的完整步驟，是讀者跟著操作的依據，拆進 modal 會讓讀者邊做邊關視窗；但一句快速的操作提示，例如滑鼠移到某個按鈕上跳出的一句話說明，關掉不影響讀者繼續往下做，這種提示交給 modal 沒問題。
判斷一段內容該不該進 modal，其實不用猜設計師的美感，也不用爭論彈窗好不好看，直接問這兩題就有答案。
少數情境下 modal 確實比另開一頁更合適
modal 裝核心內容會出問題，不代表 modal 本身是需要被淘汰的東西。Google 官方列出的例外情境，具體講清楚哪些時候 modal，甚至是會暫時擋住主內容的那種，依然是對的選擇，而且往往比另外開一個獨立頁面更合適。
Google 在前面提到的那份 2016 年公告裡，明列出三種使用得當就不受排名訊號影響的插頁式內容。第一種是為了履行法律義務而顯示，例如說明 Cookie 使用情況、驗證使用者年齡。第二種是在內容本來就無法公開索引的頁面上顯示登入對話框，例如私人信件、付費牆後的內容。第三種是使用合宜螢幕空間大小、能輕鬆關閉的橫幅。
台灣網站常見的隱私權與個資蒐集同意彈窗，屬於第一種情境，這正是為什麼它不在本篇批評的範圍內。它本來就不是用來承載核心內容的，而是一個使用者必須先處理、處理完就不再需要看到的一次性動作，跟前面幾節反覆強調的 modal 本質完全吻合，短暫、強制、單一。而且這類情境如果拆成獨立頁面，反而多了一次跳轉、多了一次讀取，使用者要先被導去另一個頁面確認，再導回來才能繼續，modal 原地完成，比較符合使用者的預期，也比較不打斷原本要做的事。
彈窗這個介面元件本身沒有對錯，錯的是把它當成萬用的收納箱，看到版面擠不下就往裡面塞。每一次要決定某段內容進不進 modal，回到那兩個問題就好，使用者是不是自己要看這個、關掉之後這段內容是不是還在。核心內容留在頁面主體，讓讀者能捲動、能重新找到、能被搜尋引擎讀到；modal 留給那些讀者按下去才需要、關掉也無傷大雅的輔助動作。這條界線劃清楚，彈窗才能真正做它該做的事，而不是變成讀者想繞過去的那道牆。