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

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

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

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

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

（2）背景是否變暗

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

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

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

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

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

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

彈出時間：不要在交互前或關(guān)鍵任務(wù)期間提示

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

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

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

該怎么做？

當(dāng)彈窗提示的內(nèi)容與用戶的上下操作緊密相關(guān)時，再顯示彈窗的內(nèi)容。

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

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

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

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

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

立即出現(xiàn)任何類型的彈出窗口，會分散注意力并妨礙他們到下一步，這是因為用戶專注于下個操作，所以他們可能不會關(guān)注彈窗或突然關(guān)閉彈窗。不僅如此，他們可能會為因中斷、關(guān)閉，或?qū)棿耙瞥枰念~外時間和交互成本而感到沮喪。

該怎么做？

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

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

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

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

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

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

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

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

該怎么做？

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

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

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

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

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

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

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

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

該怎么做？

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

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

5. 在處理關(guān)鍵任務(wù)期間打斷用戶來請求用戶反饋

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

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

該怎么做？

除了要求用戶僅在關(guān)鍵任務(wù)完成后提供使用反饋，還要提供一種靜態(tài)的、非侵入性的方式，以便隨時提供反饋。屏幕一側(cè)的選項卡，頁腳中的鏈接或?qū)Ш街械逆溄佣际强山邮艿奶娲茐男阅B(tài)的方法，使用戶可以在他們準(zhǔn)備好時分享他們的建議。

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

英國航空公司在其所有頁面的右側(cè)顯示一個標(biāo)有“反饋”的按鈕。

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

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

該怎么做？

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

在結(jié)賬流程結(jié)束時，Lulus同時提供了多個反饋模式，更好的方法是一次只顯示一個或?qū)⒎答伇韱吻度氪_認頁面。

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

彈出上下文：不要阻礙轉(zhuǎn)換或訪問內(nèi)容

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

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

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

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

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

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

該怎么做？

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

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

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

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

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

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

該怎么做？

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

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

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

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

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

該怎么做？

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

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

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

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

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

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

該怎么做？

在不打斷用戶當(dāng)前任務(wù)的前提下，讓用戶注意到還可以從手機APP中打開。贊成用低調(diào)的方法，例如標(biāo)準(zhǔn)的頂部橫幅來引導(dǎo)用戶轉(zhuǎn)到APP中打開，并且概述使用該APP帶來的好處，以便更好地將用戶引流到APP中。

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

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

結(jié)論

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

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

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

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

原文作者：Anna Kaley

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

編譯作者：celia霖兒，上海 UI設(shè)計師&產(chǎn)品經(jīng)理

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

本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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