無論是模態(tài)彈窗還是非模態(tài)彈窗, 大多數(shù)的彈窗都出現(xiàn)在用戶處理問題的關鍵時刻，彈窗的表述不是很友好，易讓用戶陷入迷茫。

通過數(shù)十年的用戶研究, 我們發(fā)現(xiàn)用戶不喜歡模態(tài)彈窗，我想起了在最近的可用性研究中的一件事情，有一個參與者試圖完成一個任務時，在連續(xù)遇到了數(shù)十個彈窗之后他將手機扔到了桌子上，他沮喪地放棄了他的任務并且?guī)е粋€對其非常糟糕的印象離開了網站。其他幾個使用者雖然沒有扔掉他們的手機，但是也有著類似的情緒。

彈出窗口（也稱為覆蓋或彈出） 是出現(xiàn)在頁面內容最頂層的一個窗口或者對話框，彈出窗口可以根據(jù)兩個維度進行分類：

（1）用戶是否可以與頁面的其他部分進行交互

• 模態(tài)彈窗：在用戶和彈窗之間進行明確的交互之前，頁面上的其他內容不能被操作。
• 非模態(tài)彈窗:在彈窗顯示的同時，用戶仍然可以和背景內容進行交互（比如：選擇鏈接或者點擊按鈕）。

（2）背景是否變暗

• 如果背景內容變暗, 則此彈出窗口被稱為聚焦彈窗（lightbox popups）。
• 當背景內容沒有變暗時，沒有特殊名稱。

雖然在許多情況下聚焦彈窗都是模態(tài)的，但也并非總是如此。

在彈窗結構方面, 模態(tài)彈窗禁用所有背景內容，非模態(tài)彈窗保留了用戶和背景內容進行交互的功能，聚焦使背景內容變暗。

幾個星期以來，我捕捉了我在網站和手機APP上的每個彈窗的屏幕截圖：平均一個星期25個彈窗，這是所有人都必須忍受的（但這很好地代表了當今的互聯(lián)網用戶體驗）。

這個實驗，加上我的可用性研究，揭示了無數(shù)糟糕的實驗和實踐，證明了彈窗的過度使用還遠未結束。我們已經接近網站濫用這些元素，導致有問題的彈窗的實例遠遠超過有用的彈窗的關鍵節(jié)點。

在本篇文章中，我將概述我觀察到的問題，并討論要考慮的關鍵因素，以及找出彈窗的實際性替代方案，既能保留公司設計初衷，又能滿足用戶體驗。

彈出時間：不要在交互前或關鍵任務期間提示

1. 在主頁面加載之前彈出窗口

不管使用什么樣的變化形式，在用戶于你的網站或應用程序上獲得價值之前，不要顯示彈出窗口。這種趨勢非常具有干擾性，因為它在用戶進入頁面之前就打斷了他們的任務。

用戶已經習慣于在網頁上看到過早彈出的彈窗，他們通常會忽略它們或立即尋找可以最快關閉彈窗的方法來回到任務。在頁面加載之前就出現(xiàn)的彈窗令人絕望，用戶體驗也很糟糕。此外，由于谷歌會懲罰那些讓用戶覺得難以使用（尤其是移動設備上的）的網站，那些沒有認識到這個事實的網站在搜索引擎的排名中會存在打分較低的風險。

該怎么做？

當彈窗提示的內容與用戶的上下操作緊密相關時，再顯示彈窗的內容。

使用互惠原則：在用戶詢問任何內容之前為其提供價值（無論是詢問電子郵箱地址，還是拒絕窗口彈出的操作）。通過用戶測試以確定哪一個是合適的上下時間點，去展示你計劃放置于彈窗里的內容，并找出顯示該內容的最佳方式。

在許多情況下，它不會出現(xiàn)在彈窗里。當您的網站有法律義務要求用戶同意接受使用cookie或驗證其年齡時，在頁面內容加載之前顯示任何類型的彈出窗口是唯一可接受的用例。（盡管我們希望歐盟和其他監(jiān)管機構對GDPR和類似規(guī)則采取不那么煩人的解釋。）

在加載主頁面內容之前，HuffPost向用戶提供了一個背景致灰效果。這是其他有問題做法中可以接受的一種 ，因為該網站在使用個人數(shù)據(jù)（包括地點）時有法律義務請求同意。

2. 在用戶登錄后立即顯示彈窗

用戶登錄之后立即顯示彈窗和在加載頁面內容之前，就顯示彈窗一樣令人討厭。當用戶登錄賬戶時，他們會考慮下一步或者后續(xù)的任務——不然他們?yōu)槭裁匆卿?？?/p>

立即出現(xiàn)任何類型的彈出窗口，會分散注意力并妨礙他們到下一步，這是因為用戶專注于下個操作，所以他們可能不會關注彈窗或突然關閉彈窗。不僅如此，他們可能會為因中斷、關閉，或將彈窗移除而需要的額外時間和交互成本而感到沮喪。

該怎么做？

在登錄他們的帳戶后給用戶一些時間和空間來完成他們的任務，而不是立即顯示彈出窗口。在經過一段時間后，最終提供有用的帳戶提示、指導或新功能是可以接受的，但前提是呈現(xiàn)的新內容和新功能對用戶任務是友好的或者能夠長遠地對用戶提供支持。

在這些情況下，解決方案總是傾向于使用較少侵入性的方法（如工具提示和小型非模態(tài)彈框）來傳達這些元素。

Gmail使用相對不顯眼的非模態(tài)窗口來顯示支持用戶當前清理收件箱任務的新功能，非模態(tài)彈窗出現(xiàn)在用戶與收件箱互動后出現(xiàn)，而不是在登錄后立即顯示

3. 在交互前請求獲取電子郵箱地址

許多網站和應用程序在用戶未來得及和頁面內容互動之前，便使用彈窗詢問用戶的電子郵箱地址，電商、新聞網站和應用程序以及博客是此類別中最大的違規(guī)者。這種方法存在問題，人們不僅會對彈出的窗口、彈出時間以及網站過早請求獲取電子郵箱地址這一事實感到惱火，而且他們還會認為該網站會向他們?yōu)E發(fā)垃圾郵件。

例如：登錄Uncommon Goods網站的一個用戶在收到要求她填寫電子郵箱地址來獲得“預享折扣“彈窗的問候時，她很不高興。她說，“在我在網站上做其他事之前，這樣的東西突然出現(xiàn)，真的讓我很煩惱。如果我剛訪問這里，我怎么知道是否想成為電子郵件訂閱者？我希望晚點再說?！?/p>

Uncommon Goods的網站在一個用戶在打開后不久，就彈出了一個彈窗，要求用戶提供電子郵件地址，這讓用戶感到很惱火

在詢問用戶的電子郵箱地址時，需要考慮許多權衡因素。因為可以帶來產出指標的短期上升，網站和應用程序經常使用這一不成熟的模式。然而，短期指標通常會以使大多用戶感到沮喪為代價，這些用戶沒有受到諸如“預享折扣“等任意激勵措施的激勵。

該怎么做？

與其在早期顯示電子郵箱彈出窗，不如考慮用戶何時最方便與您共享電子郵件地址，他們是否正在瀏覽具有適用促銷代碼的類別？或許他們只是閱讀（或瀏覽）整篇博文。

這些操作可能是最小侵入性非模態(tài)彈窗的適當觸發(fā)器，可以顯示在靠近右上角或右下角，并合理地使用屏幕空間。為用戶提供有價值和有形的東西，以交換到他們的電子郵箱地址，不要只是期望用戶自已提交過來。

用戶觸達博客文章的底部后，MarkManson.net展示了一個最小程度的非模態(tài)彈窗，該彈出窗口還提供免費電子書作為獎勵。

4. 在用戶做任何有意義的事情之前詢問反饋

接收用戶的反饋很重要，但是在他們在您的網站上做任何事情之前，您不應該突兀地向用戶提供“用戶反饋”提示窗口。網站和應用程序往往會立即向用戶提供“用戶反饋”窗口，希望他們能夠給予高評價并繼續(xù)他們的任務。用戶在這種情況下評論很少發(fā)生，更常見的是，用戶迅速關閉彈出窗口，不再瀏覽它。

在體驗的適當階段從用戶那里獲得有意義的反饋，可以洞察他們面臨的挑戰(zhàn)和障礙。但是如果你過早地要求反饋，那么在最重要的時候你就不會得到任何反饋。

例如：在嘗試在ATT.com上支付電話賬單時，一名研究參與者對她在登記賬單時出現(xiàn)的反饋模式感到沮喪。她說，“好吧，我可以再付錢后給出反饋，但現(xiàn)在我體驗不佳，因為彈出窗口現(xiàn)在就在這里，我甚至沒有做過任何操作就讓我提供反饋?！?/p>

一名研究參與者在試圖支付電話費時不情愿地關閉了反饋模式。她說，她沒有在網站上做任何事情，以保證提供反饋

該怎么做？

在用戶完成您網站上的首要任務后立即提供反饋。這種方法可以最大限度地減少中斷，并確保反饋將基于實際的交互。例如：視頻會議軟件BlueJeans在會議結束后要求用戶提供反饋，此請求并未過早地顯示，而是在上下文相關的適當時間顯示。

用戶在完成關鍵任務后，立即詢問用戶的反饋，而不是在用戶登錄您的網站后立即詢問反饋。這樣，您就有機會獲得相關評論或評分，在這種情況下使用模態(tài)彈窗對用戶來說不那么煩人和干擾。

5. 在處理關鍵任務期間打斷用戶來請求用戶反饋

用戶討厭被打斷，但是在完成關鍵任務的過程中，網站和應用程序會彈出使用反饋來打擾用戶的例子比比皆是。大多數(shù)情況下，提供使用反饋并不是用戶訪問網站的首要原因，因此不要在關鍵任務中使用彈窗來打擾用戶操作。

美聯(lián)航應用程序在進行 “檢索登機牌” 的關鍵任務中間顯示模態(tài)彈窗

該怎么做？

除了要求用戶僅在關鍵任務完成后提供使用反饋，還要提供一種靜態(tài)的、非侵入性的方式，以便隨時提供反饋。屏幕一側的選項卡，頁腳中的鏈接或導航中的鏈接都是可接受的替代破壞性模態(tài)的方法，使用戶可以在他們準備好時分享他們的建議。

雀巢沒有使用“提供反饋”的彈窗模式來打斷用戶，但在網站的頁腳中包含 “告訴我們“ 的反饋鏈接。

英國航空公司在其所有頁面的右側顯示一個標有“反饋”的按鈕。

6. 一個接一個地彈出多個窗口

在彼此的頂部顯示多個彈出窗口會使您的網站看起來不專業(yè)、雜亂無章和令人絕望，它還會壓迫用戶并迫使他們花費精力來關閉每個彈窗。如果您的網站使用許多不同類型的彈出窗口，請進行測試以避免一次向用戶顯示多個彈出窗口。

該怎么做？

如果您必須在彈出窗口中顯示關鍵信息（例如：重要警告，以防止和糾正錯誤），請確保一次只顯示一個。更好的是，不要在彈出窗口中顯示關鍵信息，因為人們傾向于不閱讀就關閉它們。相反，使用一個視覺上不同的元素，并將其直接放置在頁面上最適合消息上下文的位置，確保副本清楚地傳達了用戶需要做些什么來使用戶繼續(xù)瀏覽網頁。

在結賬流程結束時，Lulus同時提供了多個反饋模式，更好的方法是一次只顯示一個或將反饋表單嵌入確認頁面。

Canva在頁面上直接顯示關鍵信息做得很好，它使用位于頂部看上去獨特的內容模塊來替代彈出窗口，這條消息的傳遞幫助了用戶了解他們需要做些什么來糾正問題。

彈出上下文：不要阻礙轉換或訪問內容

7. 在用戶轉到新的子域或外部網站之前彈出模態(tài)彈窗

某些公司網站鏈接到位于子域和外部站點上的內容或應用程序，在用戶離開主網站之前，會彈出一個模態(tài)彈窗，提醒用戶即將發(fā)生的轉換。

這種類型的彈出窗口是有問題的，因為它過分強調了這種轉換，使用戶感到迷茫和困惑——特別是如果子站點在新的瀏覽器選項卡中打開。

在我們的一次可用性測試中，一個在匯豐銀行網站上尋找工作的志愿者，在嘗試一項任務時遇到了兩種不同的轉換模式，該任務基本上被分到了3個不同的網站。他說：“哇，它一直把我?guī)У狡渌W站，我甚至不知道我在哪里。如果他們的求職過程如此復雜和雜亂無章，我真的不認為這是一個工作的好地方。無論這個網站看起來多么美好，它看起來就是一團糟?！?/p>

點擊Careers后，模態(tài)彈窗提醒用戶注意他們即將離開初始站點

在同一個網站上，用戶還看到了另一種模態(tài)彈窗，告知他們要去第三個網站申請這份工作。

該怎么做？

刪除模態(tài)彈窗，將站點之間的跳轉成本最小化，并始終在把用戶引導到外部屬性時，保留回主站點的導航。如果您的用戶確實需要在離開您的網站時收到提醒，請使用較少侵入性的選項（例如鏈接上的工具提示）來使跳轉更加不易覺察。

Eli Lilly：向用戶提供了一個信息豐富的工具提示，讓他們知道他們將訪問不同的網站，工具提示幫助用戶記住他們的位置和去向。

8. 通過模態(tài)彈窗來中斷對內容的訪問

在人們加載文章或其他長篇內容（例如通常在網站的”關于我們“或”新聞“部分中找到的內容）后，立即顯示的模態(tài)對話框使網站看上去就好像這個網站對訪問這些內容設置了權限。這是一個特別糟糕的地方，因為它會降低可信度和信任度。

一個使用CNN移動應用程序的用戶，在打開他想閱讀的文章后，立即彈出了一個新聞訂閱的模態(tài)彈窗，這使他感到很沮喪。他說：“這導致我對CNN的懷疑達到頂峰，不要問我要我的電子郵件或者讓我立即報名任何活動?！?/p>

當用戶打開頁面閱讀文章時，CNN的移動應用程序立即彈出了一個模態(tài)彈窗。這是有問題的，因為用戶在那里是為了閱讀文章內容，而不是為了獲得CNN的時事通訊。

該怎么做？

能讓用戶打開文章之后立刻閱讀，而不會被中斷，用出現(xiàn)在頁面頂部的高度較低且容易關閉的橫幅替換掉彈窗。如果用戶想要訂閱時事通訊，彈窗的替代方案將允許他們自行訂閱，不會打斷他們主要任務——理解文章信息。

Conde’Nast Traveler的網站在導航下方的一個微妙且非侵入性的可關閉的橫幅中介紹了它的時事通訊，這種設計可以讓感興趣的用戶訂閱時事通訊，但并沒有分散那些只想閱讀網站內容的人的注意力。

彈出內容：不要假設模態(tài)彈窗能傳遞消息

9. 對GDPR和cookie通知使用模態(tài)彈窗

用戶早已習慣隨手關閉模態(tài)彈窗，因為他們認為它們沒有什么好處。為了傳達與GDPR和cookie的使用相關的重要信息，請不要使用模態(tài)彈窗。

該怎么做？

支持放置在頁面底部或側面的非模態(tài)覆蓋窗口，它們的干擾性要小得多，并允許用戶繼續(xù)他們的任務，確保提供有關如何收集和使用用戶個人數(shù)據(jù)的充足的信息。

Reddit使用一個小而不太引人注目的非模態(tài)彈窗來詢問用戶是否同意cookie，然而，描述如何使用用戶數(shù)據(jù)的語言過于模糊。

NNgroup.com 使用了一個帶有關于cookie使用的透明語言的非模態(tài)彈窗，明確地概述了為什么收集用戶的數(shù)據(jù)以及如何專門利用這些數(shù)據(jù)給用戶帶來好處。

10. 模態(tài)彈窗中鼓勵用戶進行跳轉而不告知會獲得的特殊好處

經常會看到一些彈窗鼓勵用戶從移動網站轉到手機APP（特別是在一些電商或者新聞的網站上）。在許多情況下，這些彈窗有擾亂性并且有問題：通常網站用戶是一次性用戶，他們沒有興趣為臨時任務下載應用程序。

可以理解的是，管理者希望鼓勵用戶下載APP，但模態(tài)彈窗不是宣傳您的手機APP的正確途徑。即使是手機上有APP的用戶可能也不愿意切換打開方式，因為他們擔心進程要重新開始，模態(tài)彈窗只會打擾他們。

該怎么做？

在不打斷用戶當前任務的前提下，讓用戶注意到還可以從手機APP中打開。贊成用低調的方法，例如標準的頂部橫幅來引導用戶轉到APP中打開，并且概述使用該APP帶來的好處，以便更好地將用戶引流到APP中。

Wayfair使用通用的彈窗打斷了用戶的訪問，彈窗內容鼓勵用戶下載其移動應用程序。用戶認為他們必須投入大量的工作才能在另一個渠道上重新開始他們的任務，而沒有任何實際的好處。

梅西百貨在從手機網頁上下載手機應用程序方面做得很好，頁面底部的非模態(tài)彈窗包含對用其他方式打開的鼓勵，并且顯示了應用的用戶評級。

結論

彈窗、彈窗，它不停地出現(xiàn)。彈出窗口的用戶體驗很不好，所以，請停止彈出。

鑒于這個結論，您可能想知道什么時候使用彈窗是可以接受的。

答案是：在保守情況。不要隨波逐流，不要為了達到短期指標流失你的用戶。探索其他尊重用戶需求的方法，并且能保留滿足需求方的意圖：收集使用反饋、通知用戶數(shù)據(jù)收集、獲取電子郵件地址或鼓勵渠道轉換。

僅在適當?shù)臅r間保留使用模態(tài)彈窗來提供關鍵信息，不要使用大型的侵入式彈窗中斷用戶的基本操作或阻止相關信息獲取。進行可用性測試，以確保您的彈出窗口不會讓您的用戶感到受挫。一個額外的好處是，您將獲得用戶真正的產品見解，以幫助改善整體使用體驗。

原文作者：Anna Kaley

原文地址：https://www.nngroup.com/articles/popups/

編譯作者：celia霖兒，上海 UI設計師&產品經理

編輯整理：三分設 | TCC實驗室 | 翻譯特工隊（微信ID：sanfen-design）

本文由 @三分設 翻譯發(fā)布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議