文章中列舉了在網(wǎng)站和APP中近年來常見的一些濫用彈出窗口的做法，并指出了更好的替代方案。希望對(duì)您有所幫助。

概述

無論是否采用了模態(tài)窗口（譯者注：模態(tài)指在處理當(dāng)前窗口任務(wù)前，不能進(jìn)行其他操作）的方式，大多數(shù)的彈窗都出現(xiàn)在了錯(cuò)誤的時(shí)間，在關(guān)鍵任務(wù)期間打斷了用戶的流程，使用了糟糕的文案，并擾亂了用戶的使用路徑。

經(jīng)過幾十年的用戶研究，我們都知道了人們不喜歡彈出窗口和模態(tài)窗口。在最近的一次可用性研究中，又使我想起了這件事情。

在嘗試完成一項(xiàng)任務(wù)時(shí)，一名參與者連續(xù)遇到多個(gè)彈出窗口，之后他便沮喪的將手機(jī)扔了過來，帶著對(duì)網(wǎng)站非常不好的印象停止了任務(wù)。其他幾位用戶也有類似的感受，盡管他們并沒有扔掉手機(jī)。

彈出窗口是出現(xiàn)在頁面內(nèi)容頂層的窗口或?qū)υ捒?。彈出窗口可以根?jù)兩個(gè)維度進(jìn)行分類：

1）用戶是否可以與頁面的其余部分進(jìn)行交互

• 模態(tài)窗口：在用戶明確地與彈出層交互之前，頁面上的其他內(nèi)容被禁用操作；
• 非模態(tài)窗口：用戶仍然可以與背景內(nèi)容進(jìn)行交互（例如，通過選擇鏈接或點(diǎn)擊按鈕），而彈出層仍然可見。

2）背景是否變暗

• 如果背景變暗，則該彈出窗口稱為lightbox；
• 對(duì)于背景內(nèi)容沒有視覺變暗的情況，沒有特殊的名稱。

盡管在很多情況下，lightbox是模態(tài)的，但并非總是如此。

在彈出式結(jié)構(gòu)方面，模態(tài)浮層禁用了所有的背景內(nèi)容，非模態(tài)浮層保留了用戶與背景內(nèi)容交互的能力，而lightbox則是使背景內(nèi)容變暗。

在過去的幾周中，我對(duì)在網(wǎng)站和移動(dòng)應(yīng)用程序中遇到的每個(gè)彈出窗口都進(jìn)行了截圖：平均每周有25個(gè)彈出式窗口，這已經(jīng)超出了任何一個(gè)人的承受能力（但也代表了當(dāng)今的互聯(lián)網(wǎng)用戶體驗(yàn)）。

這個(gè)實(shí)驗(yàn)以及我的可用性研究，都展示了許多糟糕的實(shí)現(xiàn)實(shí)踐，并證明了過度使用彈出覆蓋還遠(yuǎn)遠(yuǎn)沒有結(jié)束。我們已經(jīng)接近過渡濫用這些元素的臨界點(diǎn)，以至于問題已經(jīng)遠(yuǎn)遠(yuǎn)超過彈出窗口的價(jià)值。

在本文中，我將概述已觀察到的問題，并討論要考慮的關(guān)鍵因素，以及可以保留組織意圖和用戶體驗(yàn)的現(xiàn)實(shí)替代方案。

一、彈出時(shí)間：不要在互動(dòng)之前或關(guān)鍵任務(wù)期間彈出

錯(cuò)誤1：在加載主頁內(nèi)容之前顯示彈出窗口

無論使用哪種變體，都不要在用戶可以從您的網(wǎng)站或APP中獲取價(jià)值之前彈出窗口。這種趨勢具有很強(qiáng)的干擾性，因?yàn)橛脩舻娜蝿?wù)甚至在進(jìn)入頁面之前就被中斷了。

人們已經(jīng)習(xí)慣于在網(wǎng)站上看到過早的彈出窗口，通常會(huì)忽略它們，或者立即尋找關(guān)閉彈出窗口以返回其任務(wù)的最快方法。

在頁面加載之前出現(xiàn)的彈出窗口使網(wǎng)站看起來很絕望，并且讓用戶體驗(yàn)變得瘋狂。此外，沒有認(rèn)識(shí)到這個(gè)事實(shí)的網(wǎng)站在搜索引擎結(jié)果中的排名可能會(huì)較低，因?yàn)镚oogle會(huì)對(duì)讓用戶（尤其是在移動(dòng)設(shè)備上）難以訪問內(nèi)容的網(wǎng)站進(jìn)行懲罰。

正確的做法：讓等待內(nèi)容顯示在彈出窗口中，直到與用戶上下文相關(guān)為止。

使用互惠原則：無論是請(qǐng)求填寫電子郵件地址，還是確認(rèn)取消彈出窗口的操作，在要求訪客做任何事情之前，應(yīng)該先為訪客提供有價(jià)值的東西。運(yùn)行用戶測試，以確定適合您打算在彈出窗口中顯示內(nèi)容的上下文信息，并找出顯示該內(nèi)容的最佳方式；在很多情況下，它不會(huì)出現(xiàn)在彈出窗口中。

可以在頁面內(nèi)容加載之前顯示彈出窗口的唯一用例是，您的網(wǎng)站在法律上有義務(wù)要求用戶同意接受cookie的使用或驗(yàn)證其年齡。（盡管我們希望歐盟和其他監(jiān)管機(jī)構(gòu)對(duì)GDPR和類似規(guī)則的解釋不那么令人討厭。）

在加載主頁內(nèi)容之前，HuffPost向用戶展示了一個(gè)lightbox。這是一種可以接受的做法，因?yàn)樵谑褂冒ㄎ恢迷趦?nèi)的個(gè)人數(shù)據(jù)時(shí)，網(wǎng)站在法律上有義務(wù)征求同意。

錯(cuò)誤2：在用戶登錄后立即顯示彈出窗口

這與頁面內(nèi)容加載之前顯示的彈出窗口一樣令人討厭。當(dāng)用戶登錄帳戶時(shí)，他們想到的是下一步或后續(xù)任務(wù)，否則為什么要登錄？

立即呈現(xiàn)任何形式的彈出窗口都會(huì)分散他們的注意力，并妨礙他們完成下一步。因?yàn)樗麄冋龑Ｗ⒂谙乱徊剑杂脩艉芸赡軙?huì)不注意彈出窗口或立即關(guān)閉它。不僅如此，它們還可能因中斷、關(guān)閉彈出窗口或移開彈出窗口所需的額外時(shí)間和交互成本而難受。

正確的做法：在登錄帳戶后給用戶一些時(shí)間和空間來完成其任務(wù)，不要立即顯示彈出窗口。

一段時(shí)間之后，最終還是可以提供有用的帳戶提示，指南或新功能，這是可以接受的，但前提是所呈現(xiàn)的內(nèi)容或新功能可以增強(qiáng)或進(jìn)一步支持用戶的任務(wù)。即便在這些情況下，也始終傾向于使用干擾性較小的方法（例如Tooltips）和小的非模式疊加層，來傳達(dá)有關(guān)這些元素的信息。

Gmail使用相對(duì)輕松的非模態(tài)疊加層，來介紹一項(xiàng)幫助用戶清理收件箱的新特性。這個(gè)彈出層是在用戶與收件箱進(jìn)行交互之后顯示，而不是在登錄后立即顯示，也非模態(tài)方式。

錯(cuò)誤3：進(jìn)行交互之前請(qǐng)求電子郵件地址

許多站點(diǎn)和應(yīng)用程序都使用彈出窗口請(qǐng)求用戶的電子郵件地址，用戶甚至沒有機(jī)會(huì)與內(nèi)容進(jìn)行交互。這種情況在電子商務(wù)、新聞網(wǎng)站和應(yīng)用程序以及博客中最為常見。

這種方式也有其弊病，因?yàn)橛脩舨粌H會(huì)被過早地要求電子郵件地址而感到煩惱，而且他們還會(huì)認(rèn)為該站點(diǎn)會(huì)發(fā)送垃圾郵件。

例如，當(dāng)一個(gè)用戶登陸到Uncommon Goods網(wǎng)站上時(shí)，就會(huì)出現(xiàn)一個(gè)窗口向她請(qǐng)求電子郵件地址，這會(huì)讓用戶感到非常不滿：“當(dāng)我還沒有在網(wǎng)站上進(jìn)行任何其他操作，就突然出現(xiàn)類似的東西，這真的讓我很煩。如果我剛來這里，我怎么知道我是否想成為電子郵件訂閱者？我希望晚一些時(shí)候再?zèng)Q定?！?/p>

一名用戶在打開網(wǎng)站后立刻就顯示了一個(gè)模態(tài)彈出窗口，請(qǐng)求獲得她的電子郵件地址，這會(huì)讓Uncommon Goods網(wǎng)站的用戶感到惱火。

向用戶請(qǐng)求他們的電子郵件地址時(shí)，需要考慮許多權(quán)衡因素。站點(diǎn)和APP經(jīng)常使用過早顯示的模式，因?yàn)檫@樣產(chǎn)生的指標(biāo)會(huì)短期增加。但是，短期指標(biāo)通常是以使許多用戶難受為代價(jià)的，這些用戶卻沒有得到諸如專屬商品之類的激勵(lì)。

正確的做法：與其提早顯示電子郵件彈出窗口，不如想想，用戶什么時(shí)候可能最愿意與您共享電子郵件地址。

他們正在瀏覽帶有促銷代碼的類目嗎？或者，也許他們剛剛閱讀（或?yàn)g覽）了整個(gè)博客文章。這些動(dòng)作可能是最低干擾且非模態(tài)的合適觸發(fā)因素，它可以出現(xiàn)在靠近右上角或右下角的位置，并且使用合理的屏幕空間。為用戶提供一些有價(jià)值和具體的東西，以換取他們的電子郵件地址，而不要只是期望他們拱手讓出。

人們?yōu)g覽到博客文章的底部后，MarkManson.net顯示了最小程度的干擾性非模態(tài)浮層。彈出窗口還提供了免費(fèi)的電子書作為獎(jiǎng)勵(lì)。

錯(cuò)誤4：在人們做任何有意義的事情之前先征求反饋

獲取用戶反饋很重要，但是在人們對(duì)您的網(wǎng)站進(jìn)行任何操作之前，您不應(yīng)該向他們進(jìn)行反饋提示。

網(wǎng)站和APP往往會(huì)立即向用戶顯示反饋彈出窗口，希望他們能給予很高的評(píng)價(jià)并繼續(xù)完成任務(wù)。這種情況很少發(fā)生，通常的情況是，用戶迅速關(guān)閉彈出窗口，而且再也不會(huì)主動(dòng)找到它。

在適當(dāng)?shù)臅r(shí)機(jī)從用戶那里獲得有意義的反饋，可以洞察他們的挑戰(zhàn)和障礙。但是，如果您過早要求反饋，卻可能會(huì)在最重要的時(shí)候得不到任何反饋。

例如，當(dāng)嘗試在ATT.com上支付電話賬單時(shí)，研究參與者會(huì)在打開賬單時(shí)就被要求反饋，這種反饋方式讓用戶非常挫敗。她說：“好吧，我付完賬單后可能會(huì)給出反饋，但是現(xiàn)在我很不開心，因?yàn)槲疫€沒做任何需要反饋的事情?！?/p>

一位研究參與者在嘗試支付電話費(fèi)時(shí)，很不情愿地關(guān)閉了一個(gè)反饋窗口。她說她還沒有在網(wǎng)站上做任何能提供反饋的事情。

正確的方法：要求用戶在完成網(wǎng)站上的首要任務(wù)后立即提供反饋。

這種方法最大程度地減少了中斷，并確保反饋將基于實(shí)際交互。例如，會(huì)議結(jié)束后，視頻會(huì)議軟件BlueJeans要求用戶提供反饋。該請(qǐng)求不會(huì)過早顯示，而是在上下文相關(guān)且適當(dāng)?shù)臅r(shí)間顯示。

在用戶完成關(guān)鍵任務(wù)后立即征詢他們的反饋，而不是在他們打開網(wǎng)站后立即征求他們的反饋。這樣，您增加了獲得相關(guān)評(píng)論或評(píng)分的機(jī)會(huì)。在這種情況下，使用模式浮層可以減少用戶的煩惱和干擾。

錯(cuò)誤5：在關(guān)鍵任務(wù)期間打擾用戶以尋求反饋

用戶討厭被打擾，但在完成關(guān)鍵任務(wù)期間彈出反饋窗口的例子比比皆是。大多數(shù)情況下，提供反饋并不是用戶訪問的首要原因，因此不要在執(zhí)行關(guān)鍵任務(wù)時(shí)使用彈出窗口來打擾用戶。

美聯(lián)航的APP在獲取登機(jī)證這項(xiàng)關(guān)鍵任務(wù)時(shí)，顯示了一個(gè)模態(tài)的彈窗窗口。

正確的做法：除了不要求用戶在關(guān)鍵任務(wù)完成前提供反饋，還應(yīng)該提供一種靜態(tài)的，非干擾性的方式，讓用戶可以隨時(shí)隨地提供反饋。

屏幕側(cè)邊的標(biāo)簽、頁腳中的鏈接或?qū)Ш街械逆溄佣际翘娲蓴_性模態(tài)，且可接受的替代方法，讓用戶可以在準(zhǔn)備好時(shí)分享自己的意見。

雀巢并沒有使用模態(tài)的反饋方式打擾用戶，而是網(wǎng)站頁腳中添加了反饋的鏈接。

英國航空在所有頁面的右側(cè)都顯示了一個(gè)標(biāo)有“意見反饋”（Feedback）的按鈕。

錯(cuò)誤6：連續(xù)地顯示多個(gè)彈出窗口

重疊地顯示多個(gè)彈出窗口會(huì)讓網(wǎng)站看起來很不專業(yè)、絕望且混亂。它還讓用戶不知所措，迫使他們花費(fèi)精力來關(guān)閉每個(gè)窗口。

如果您的網(wǎng)站使用許多不同類型的彈出窗口，請(qǐng)先進(jìn)行測試，避免一次向用戶顯示多個(gè)彈出窗口。

正確的做法：如果必須在彈出窗口中顯示關(guān)鍵信息（例如，重要的警告以防止或糾正錯(cuò)誤），請(qǐng)確保一次僅顯示一個(gè)。

更好的方法是，不要在彈出窗口中顯示關(guān)鍵信息，因?yàn)槿藗儍A向于不閱讀就關(guān)閉它們。而是使用視覺上不同的元素，并將它們直接放置在最適合上下文的頁面上。確保文案清楚地傳達(dá)了用戶需要進(jìn)行的操作。

在結(jié)帳流程的最后，Lulus同時(shí)彈出了多個(gè)模態(tài)彈窗。更好的方式是一次只顯示一個(gè)，或?qū)⒎答伇韱吻度氲酱_認(rèn)頁面中。

Canva采用了很好的方式，直接在頁面上顯示關(guān)鍵信息。它并沒有使用彈出窗口，而是在最頂層采用了視覺上完全不同的內(nèi)容模塊。這個(gè)信息可以幫助用戶了解他們需要做什么來糾正問題。

二、彈出窗口的上下文，不要妨礙跳轉(zhuǎn)過渡或訪問內(nèi)容

錯(cuò)誤7：在用戶跳轉(zhuǎn)到二級(jí)頁面或外部站點(diǎn)之前顯示模式疊加層

一些公司網(wǎng)站，鏈接到了二級(jí)頁面和外部站點(diǎn)上的內(nèi)容或APP。在用戶離開主站點(diǎn)之前，將出現(xiàn)一個(gè)模態(tài)彈窗，提醒用戶即將進(jìn)行的跳轉(zhuǎn)。這種類型的彈出窗口是有問題的，因?yàn)樗^分強(qiáng)調(diào)了跳轉(zhuǎn)過渡，讓用戶感到迷茫和困惑，尤其二級(jí)頁面只是在新的瀏覽器標(biāo)簽中打開時(shí)。

在我們的一項(xiàng)可用性測試中，一名正在匯豐網(wǎng)站上找工作的參與者遇到了兩個(gè)不同的提醒跳轉(zhuǎn)的模態(tài)窗口，因?yàn)樵摿鞒袒旧媳环峙傻搅巳齻€(gè)不同的網(wǎng)站上。

他說：“哇，它不斷帶我去其他網(wǎng)站，我甚至不知道自己在哪里。如果他們的求職過程如此復(fù)雜且分散，我實(shí)在認(rèn)為這不是一個(gè)工作的好地方。不管這個(gè)網(wǎng)站看起來多么好看，似乎都是一團(tuán)糟。”

單擊“職位”后，一個(gè)模態(tài)窗口警告用戶，他們將要離開當(dāng)前站點(diǎn)。

在同一個(gè)網(wǎng)站上，用戶又看到了另一個(gè)模態(tài)窗口，提示他們要去第三個(gè)網(wǎng)站申請(qǐng)這份工作。

正確的做法：在將用戶鏈接到外部時(shí)，刪除模態(tài)窗口，讓站點(diǎn)之間的跳轉(zhuǎn)最小化，并始終保留導(dǎo)航回主站點(diǎn)的功能。

如果在離開站點(diǎn)時(shí)確實(shí)需要警告您的用戶，請(qǐng)使用干擾性較小的選項(xiàng)（例如，鏈接上的Tooltips），讓過渡變得更加巧妙。

禮來（Eli Lilly）：向用戶提供了一個(gè)有用的Tooltips，讓他們知道要跳轉(zhuǎn)至其他網(wǎng)站。Tooltips可幫助用戶記住他們目前在哪里，要去到哪里。

錯(cuò)誤8：通過模態(tài)疊加中斷對(duì)內(nèi)容的訪問

當(dāng)人們加載文章或其他長篇內(nèi)容（例如通常在網(wǎng)站的“關(guān)于我們”或“新聞”部分）后，立即出現(xiàn)模態(tài)對(duì)話框，看上去就好像正在限制對(duì)該內(nèi)容的訪問。

這種情況特別令人討厭，因?yàn)樗鼤?huì)降低用戶的信任感和信任度。在CNN的APP上，一個(gè)用戶在打開自己想閱讀的文章后，馬上就看到了一個(gè)訂閱新聞的模態(tài)窗口。他說：“這讓我對(duì)CNN的懷疑達(dá)到頂峰。別再向我要電子郵件，也別讓我注冊(cè)任何東西?！?/p>

當(dāng)用戶閱讀文章時(shí)，CNN的APP顯示了一種模態(tài)窗口。這是很不好的，因?yàn)樽?cè)CNN的新聞簡報(bào)并不是用戶在此頁面的原因，用戶是來閱讀內(nèi)容的。

正確的做法：允許用戶立即使用內(nèi)容，而不會(huì)受到干擾。

將彈出窗口替換為頁面頂部的一個(gè)矮的、容易關(guān)閉的橫幅。這種替代方法將使用戶可以在訂閱新聞時(shí)，自行進(jìn)行操作，而不會(huì)妨礙他們閱讀內(nèi)容的主要任務(wù)。

Conde’Nast Traveller的網(wǎng)站在導(dǎo)航欄下面用一個(gè)微妙的、非干擾性的、可關(guān)閉的橫幅介紹了它的新聞通訊。這種設(shè)計(jì)允許感興趣的用戶訂閱新聞通訊，但不會(huì)分散那些只想閱讀網(wǎng)站內(nèi)容的用戶的注意力。

三、彈出窗口的內(nèi)容：不要假設(shè)模態(tài)窗口可以傳遞信息

錯(cuò)誤9：在GDPR（歐盟通用數(shù)據(jù)保護(hù)條例）和cookie的通知中使用模態(tài)窗口

用戶已經(jīng)匆忙地關(guān)閉了窗口，因?yàn)樗麄冋J(rèn)為不會(huì)得到任何好處。為了傳達(dá)與GDPR和Cookie的使用有關(guān)的重要信息，請(qǐng)不要使用模態(tài)窗口。

正確的做法：選擇放在頁面底部或側(cè)面的非模態(tài)浮層中。

這樣做的干擾性要小得多，并且允許用戶繼續(xù)執(zhí)行任務(wù)。確保提供足夠的信息，說明用戶的個(gè)人數(shù)據(jù)是如何收集和使用的。

Reddit使用了一個(gè)小的，無干擾的非模態(tài)浮層來征詢用戶的Cookie同意；但是，描述用戶數(shù)據(jù)的使用方式的語言過于模糊。

NNgroup.com使用了一種非模態(tài)的浮層，并使用了有關(guān)Cookie使用情況的透明性語言。我們準(zhǔn)確地概述了為什么我們收集人們的數(shù)據(jù)，以及如何專門用于使他們受益。

錯(cuò)誤10：在模態(tài)覆蓋中鼓勵(lì)用戶進(jìn)行平臺(tái)跳轉(zhuǎn)，卻看不到任何鼓勵(lì)性的好處

常?？梢钥匆姾芏喙膭?lì)用戶從移動(dòng)網(wǎng)站轉(zhuǎn)換到APP上的模態(tài)彈窗，尤其是在電子商務(wù)或新聞網(wǎng)站上。這些窗口在許多情況下都是破壞性和有問題的：網(wǎng)頁用戶通常是一次性用戶，他們不愿意為偶爾的任務(wù)下載應(yīng)用程序。

可以理解的是，企業(yè)希望鼓勵(lì)應(yīng)用程序的下載，但是模態(tài)疊加不是宣傳APP的正確方法。甚至在手機(jī)上裝有該APP的用戶可能也不愿意跳轉(zhuǎn)平臺(tái)，因?yàn)樗麄儞?dān)心會(huì)重新開始整個(gè)流程，模態(tài)的彈出窗口只會(huì)打擾他們。

正確的做法：為APP創(chuàng)造感知度，但不要以侵入用戶當(dāng)前任務(wù)為代價(jià)。

使用低調(diào)的方法（例如標(biāo)準(zhǔn)的頂部橫幅），并說明使用APP的好處，以方便人們跳轉(zhuǎn)至該平臺(tái)。

Wayfair鼓勵(lì)下載APP的窗口打斷了用戶。用戶認(rèn)為他們將不得不付出很多步驟，才能在另一個(gè)平臺(tái)上重新開始他們的任務(wù)，而沒有什么明確的好處。

梅西百貨在鼓勵(lì)從移動(dòng)網(wǎng)站下載APP方面做得很好。頁面底部的非模態(tài)廣告包含了跳轉(zhuǎn)APP的獎(jiǎng)勵(lì)，并顯示了APP的用戶評(píng)分。

結(jié)論

彈出，彈出，無止境的彈出。這不是可以接受的用戶體驗(yàn)，因此請(qǐng)停止使用彈出窗口。

鑒于此總體結(jié)論，您可能想知道什么時(shí)候可以使用彈出窗口。答案是：要謹(jǐn)慎。不要隨波逐流，不要為了短期指標(biāo)而打斷您的用戶。保持收集反饋、通知用戶數(shù)據(jù)的收集、獲取電子郵件地址或鼓勵(lì)轉(zhuǎn)換平臺(tái)時(shí)，探索尊重用戶需求的其他方法。

只在適當(dāng)?shù)臅r(shí)候，保留使用模態(tài)窗口來傳遞關(guān)鍵信息。不要中斷重要的用戶任務(wù)，或者使用一個(gè)大且干擾的彈出式窗口來擋住相關(guān)內(nèi)容。進(jìn)行可用性測試，確保您的彈出窗口不會(huì)打擾您的用戶，此外，您還會(huì)獲得真正的洞察，以幫助您改善整體體驗(yàn)。

原文作者：Anna Kaley，Nielsen Norman Group用戶體驗(yàn)專家

原文標(biāo)題：Popups: 10 Problematic Trends and Alternatives

原文鏈接：https://www.nngroup.com/articles/popups/

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

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