起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識彈出窗口的10個常見錯誤
文章中列舉了在網站和APP中近年來常見的一些濫用彈出窗口的做法，并指出了更好的替代方案。希望對您有所幫助。
概述
無論是否采用了模態窗口（譯者注：模態指在處理當前窗口任務前，不能進行其他操作）的方式，大多數的彈窗都出現在了錯誤的時間，在關鍵任務期間打斷了用戶的流程，使用了糟糕的文案，并擾亂了用戶的使用路徑。
經過幾十年的用戶研究，我們都知道了人們不喜歡彈出窗口和模態窗口。在最近的一次可用性研究中，又使我想起了這件事情。
在嘗試完成一項任務時，一名參與者連續遇到多個彈出窗口，之后他便沮喪的將手機扔了過來，帶著對網站非常不好的印象停止了任務。其他幾位用戶也有類似的感受，盡管他們并沒有扔掉手機。
彈出窗口是出現在頁面內容頂層的窗口或對話框。彈出窗口可以根據兩個維度進行分類：
1）用戶是否可以與頁面的其余部分進行交互
- 模態窗口：在用戶明確地與彈出層交互之前，頁面上的其他內容被禁用操作；
- 非模態窗口：用戶仍然可以與背景內容進行交互（例如，通過選擇鏈接或點擊按鈕），而彈出層仍然可見。
2）背景是否變暗
- 如果背景變暗，則該彈出窗口稱為lightbox；
- 對于背景內容沒有視覺變暗的情況，沒有特殊的名稱。
盡管在很多情況下，lightbox是模態的，但并非總是如此。
在彈出式結構方面，模態浮層禁用了所有的背景內容，非模態浮層保留了用戶與背景內容交互的能力，而lightbox則是使背景內容變暗。
在過去的幾周中，我對在網站和移動應用程序中遇到的每個彈出窗口都進行了截圖：平均每周有25個彈出式窗口，這已經超出了任何一個人的承受能力（但也代表了當今的互聯網用戶體驗）。
這個實驗以及我的可用性研究，都展示了許多糟糕的實現實踐，并證明了過度使用彈出覆蓋還遠遠沒有結束。我們已經接近過渡濫用這些元素的臨界點，以至于問題已經遠遠超過彈出窗口的價值。
在本文中，我將概述已觀察到的問題，并討論要考慮的關鍵因素，以及可以保留組織意圖和用戶體驗的現實替代方案。
一、彈出時間：不要在互動之前或關鍵任務期間彈出
錯誤1：在加載主頁內容之前顯示彈出窗口
無論使用哪種變體，都不要在用戶可以從您的網站或APP中獲取價值之前彈出窗口。這種趨勢具有很強的干擾性，因為用戶的任務甚至在進入頁面之前就被中斷了。
人們已經習慣于在網站上看到過早的彈出窗口，通常會忽略它們，或者立即尋找關閉彈出窗口以返回其任務的最快方法。
在頁面加載之前出現的彈出窗口使網站看起來很絕望，并且讓用戶體驗變得瘋狂。此外，沒有認識到這個事實的網站在搜索引擎結果中的排名可能會較低，因為Google會對讓用戶（尤其是在移動設備上）難以訪問內容的網站進行懲罰。
正確的做法：讓等待內容顯示在彈出窗口中，直到與用戶上下文相關為止。
使用互惠原則：無論是請求填寫電子郵件地址，還是確認取消彈出窗口的操作，在要求訪客做任何事情之前，應該先為訪客提供有價值的東西。運行用戶測試，以確定適合您打算在彈出窗口中顯示內容的上下文信息，并找出顯示該內容的最佳方式；在很多情況下，它不會出現在彈出窗口中。
可以在頁面內容加載之前顯示彈出窗口的唯一用例是，您的網站在法律上有義務要求用戶同意接受cookie的使用或驗證其年齡。（盡管我們希望歐盟和其他監管機構對GDPR和類似規則的解釋不那么令人討厭。）
在加載主頁內容之前，HuffPost向用戶展示了一個lightbox。這是一種可以接受的做法，因為在使用包括位置在內的個人數據時，網站在法律上有義務征求同意。
錯誤2：在用戶登錄后立即顯示彈出窗口
這與頁面內容加載之前顯示的彈出窗口一樣令人討厭。當用戶登錄帳戶時，他們想到的是下一步或后續任務，否則為什么要登錄？
立即呈現任何形式的彈出窗口都會分散他們的注意力，并妨礙他們完成下一步。因為他們正專注于下一步，所以用戶很可能會不注意彈出窗口或立即關閉它。不僅如此，它們還可能因中斷、關閉彈出窗口或移開彈出窗口所需的額外時間和交互成本而難受。
正確的做法：在登錄帳戶后給用戶一些時間和空間來完成其任務，不要立即顯示彈出窗口。
一段時間之后，最終還是可以提供有用的帳戶提示，指南或新功能，這是可以接受的，但前提是所呈現的內容或新功能可以增強或進一步支持用戶的任務。即便在這些情況下，也始終傾向于使用干擾性較小的方法（例如Tooltips）和小的非模式疊加層，來傳達有關這些元素的信息。
Gmail使用相對輕松的非模態疊加層，來介紹一項幫助用戶清理收件箱的新特性。這個彈出層是在用戶與收件箱進行交互之后顯示，而不是在登錄后立即顯示，也非模態方式。
錯誤3：進行交互之前請求電子郵件地址
許多站點和應用程序都使用彈出窗口請求用戶的電子郵件地址，用戶甚至沒有機會與內容進行交互。這種情況在電子商務、新聞網站和應用程序以及博客中最為常見。
這種方式也有其弊病，因為用戶不僅會被過早地要求電子郵件地址而感到煩惱，而且他們還會認為該站點會發送垃圾郵件。
例如，當一個用戶登陸到Uncommon Goods網站上時，就會出現一個窗口向她請求電子郵件地址，這會讓用戶感到非常不滿：“當我還沒有在網站上進行任何其他操作，就突然出現類似的東西，這真的讓我很煩。如果我剛來這里，我怎么知道我是否想成為電子郵件訂閱者？我希望晚一些時候再決定?！?/p>
一名用戶在打開網站后立刻就顯示了一個模態彈出窗口，請求獲得她的電子郵件地址，這會讓Uncommon Goods網站的用戶感到惱火。
向用戶請求他們的電子郵件地址時，需要考慮許多權衡因素。站點和APP經常使用過早顯示的模式，因為這樣產生的指標會短期增加。但是，短期指標通常是以使許多用戶難受為代價的，這些用戶卻沒有得到諸如專屬商品之類的激勵。
正確的做法：與其提早顯示電子郵件彈出窗口，不如想想，用戶什么時候可能最愿意與您共享電子郵件地址。
他們正在瀏覽帶有促銷代碼的類目嗎？或者，也許他們剛剛閱讀（或瀏覽）了整個博客文章。這些動作可能是最低干擾且非模態的合適觸發因素，它可以出現在靠近右上角或右下角的位置，并且使用合理的屏幕空間。為用戶提供一些有價值和具體的東西，以換取他們的電子郵件地址，而不要只是期望他們拱手讓出。
人們瀏覽到博客文章的底部后，MarkManson.net顯示了最小程度的干擾性非模態浮層。彈出窗口還提供了免費的電子書作為獎勵。
錯誤4：在人們做任何有意義的事情之前先征求反饋
獲取用戶反饋很重要，但是在人們對您的網站進行任何操作之前，您不應該向他們進行反饋提示。
網站和APP往往會立即向用戶顯示反饋彈出窗口，希望他們能給予很高的評價并繼續完成任務。這種情況很少發生，通常的情況是，用戶迅速關閉彈出窗口，而且再也不會主動找到它。
在適當的時機從用戶那里獲得有意義的反饋，可以洞察他們的挑戰和障礙。但是，如果您過早要求反饋，卻可能會在最重要的時候得不到任何反饋。
例如，當嘗試在ATT.com上支付電話賬單時，研究參與者會在打開賬單時就被要求反饋，這種反饋方式讓用戶非常挫敗。她說：“好吧，我付完賬單后可能會給出反饋，但是現在我很不開心，因為我還沒做任何需要反饋的事情?！?/p>
一位研究參與者在嘗試支付電話費時，很不情愿地關閉了一個反饋窗口。她說她還沒有在網站上做任何能提供反饋的事情。
正確的方法：要求用戶在完成網站上的首要任務后立即提供反饋。
這種方法最大程度地減少了中斷，并確保反饋將基于實際交互。例如，會議結束后，視頻會議軟件BlueJeans要求用戶提供反饋。該請求不會過早顯示，而是在上下文相關且適當的時間顯示。
在用戶完成關鍵任務后立即征詢他們的反饋，而不是在他們打開網站后立即征求他們的反饋。這樣，您增加了獲得相關評論或評分的機會。在這種情況下，使用模式浮層可以減少用戶的煩惱和干擾。
錯誤5：在關鍵任務期間打擾用戶以尋求反饋
用戶討厭被打擾，但在完成關鍵任務期間彈出反饋窗口的例子比比皆是。大多數情況下，提供反饋并不是用戶訪問的首要原因，因此不要在執行關鍵任務時使用彈出窗口來打擾用戶。
美聯航的APP在獲取登機證這項關鍵任務時，顯示了一個模態的彈窗窗口。
正確的做法：除了不要求用戶在關鍵任務完成前提供反饋，還應該提供一種靜態的，非干擾性的方式，讓用戶可以隨時隨地提供反饋。
屏幕側邊的標簽、頁腳中的鏈接或導航中的鏈接都是替代干擾性模態，且可接受的替代方法，讓用戶可以在準備好時分享自己的意見。
雀巢并沒有使用模態的反饋方式打擾用戶，而是網站頁腳中添加了反饋的鏈接。
英國航空在所有頁面的右側都顯示了一個標有“意見反饋”（Feedback）的按鈕。
錯誤6：連續地顯示多個彈出窗口
重疊地顯示多個彈出窗口會讓網站看起來很不專業、絕望且混亂。它還讓用戶不知所措，迫使他們花費精力來關閉每個窗口。
如果您的網站使用許多不同類型的彈出窗口，請先進行測試，避免一次向用戶顯示多個彈出窗口。
正確的做法：如果必須在彈出窗口中顯示關鍵信息（例如，重要的警告以防止或糾正錯誤），請確保一次僅顯示一個。
更好的方法是，不要在彈出窗口中顯示關鍵信息，因為人們傾向于不閱讀就關閉它們。而是使用視覺上不同的元素，并將它們直接放置在最適合上下文的頁面上。確保文案清楚地傳達了用戶需要進行的操作。
在結帳流程的最后，Lulus同時彈出了多個模態彈窗。更好的方式是一次只顯示一個，或將反饋表單嵌入到確認頁面中。
Canva采用了很好的方式，直接在頁面上顯示關鍵信息。它并沒有使用彈出窗口，而是在最頂層采用了視覺上完全不同的內容模塊。這個信息可以幫助用戶了解他們需要做什么來糾正問題。
二、彈出窗口的上下文，不要妨礙跳轉過渡或訪問內容
錯誤7：在用戶跳轉到二級頁面或外部站點之前顯示模式疊加層
一些公司網站，鏈接到了二級頁面和外部站點上的內容或APP。在用戶離開主站點之前，將出現一個模態彈窗，提醒用戶即將進行的跳轉。這種類型的彈出窗口是有問題的，因為它過分強調了跳轉過渡，讓用戶感到迷茫和困惑，尤其二級頁面只是在新的瀏覽器標簽中打開時。
在我們的一項可用性測試中，一名正在匯豐網站上找工作的參與者遇到了兩個不同的提醒跳轉的模態窗口，因為該流程基本上被分派到了三個不同的網站上。
他說：“哇，它不斷帶我去其他網站，我甚至不知道自己在哪里。如果他們的求職過程如此復雜且分散，我實在認為這不是一個工作的好地方。不管這個網站看起來多么好看，似乎都是一團糟?！?/p>
單擊“職位”后，一個模態窗口警告用戶，他們將要離開當前站點。
在同一個網站上，用戶又看到了另一個模態窗口，提示他們要去第三個網站申請這份工作。
正確的做法：在將用戶鏈接到外部時，刪除模態窗口，讓站點之間的跳轉最小化，并始終保留導航回主站點的功能。
如果在離開站點時確實需要警告您的用戶，請使用干擾性較小的選項（例如，鏈接上的Tooltips），讓過渡變得更加巧妙。
禮來（Eli Lilly）：向用戶提供了一個有用的Tooltips，讓他們知道要跳轉至其他網站。Tooltips可幫助用戶記住他們目前在哪里，要去到哪里。
錯誤8：通過模態疊加中斷對內容的訪問
當人們加載文章或其他長篇內容（例如通常在網站的“關于我們”或“新聞”部分）后，立即出現模態對話框，看上去就好像正在限制對該內容的訪問。
這種情況特別令人討厭，因為它會降低用戶的信任感和信任度。在CNN的APP上，一個用戶在打開自己想閱讀的文章后，馬上就看到了一個訂閱新聞的模態窗口。他說：“這讓我對CNN的懷疑達到頂峰。別再向我要電子郵件，也別讓我注冊任何東西?！?/p>
當用戶閱讀文章時，CNN的APP顯示了一種模態窗口。這是很不好的，因為注冊CNN的新聞簡報并不是用戶在此頁面的原因，用戶是來閱讀內容的。
正確的做法：允許用戶立即使用內容，而不會受到干擾。
將彈出窗口替換為頁面頂部的一個矮的、容易關閉的橫幅。這種替代方法將使用戶可以在訂閱新聞時，自行進行操作，而不會妨礙他們閱讀內容的主要任務。
Conde’Nast Traveller的網站在導航欄下面用一個微妙的、非干擾性的、可關閉的橫幅介紹了它的新聞通訊。這種設計允許感興趣的用戶訂閱新聞通訊，但不會分散那些只想閱讀網站內容的用戶的注意力。
三、彈出窗口的內容：不要假設模態窗口可以傳遞信息
錯誤9：在GDPR（歐盟通用數據保護條例）和cookie的通知中使用模態窗口
用戶已經匆忙地關閉了窗口，因為他們認為不會得到任何好處。為了傳達與GDPR和Cookie的使用有關的重要信息，請不要使用模態窗口。
正確的做法：選擇放在頁面底部或側面的非模態浮層中。
這樣做的干擾性要小得多，并且允許用戶繼續執行任務。確保提供足夠的信息，說明用戶的個人數據是如何收集和使用的。
Reddit使用了一個小的，無干擾的非模態浮層來征詢用戶的Cookie同意；但是，描述用戶數據的使用方式的語言過于模糊。
NNgroup.com使用了一種非模態的浮層，并使用了有關Cookie使用情況的透明性語言。我們準確地概述了為什么我們收集人們的數據，以及如何專門用于使他們受益。
錯誤10：在模態覆蓋中鼓勵用戶進行平臺跳轉，卻看不到任何鼓勵性的好處
常常可以看見很多鼓勵用戶從移動網站轉換到APP上的模態彈窗，尤其是在電子商務或新聞網站上。這些窗口在許多情況下都是破壞性和有問題的：網頁用戶通常是一次性用戶，他們不愿意為偶爾的任務下載應用程序。
可以理解的是，企業希望鼓勵應用程序的下載，但是模態疊加不是宣傳APP的正確方法。甚至在手機上裝有該APP的用戶可能也不愿意跳轉平臺，因為他們擔心會重新開始整個流程，模態的彈出窗口只會打擾他們。
正確的做法：為APP創造感知度，但不要以侵入用戶當前任務為代價。
使用低調的方法（例如標準的頂部橫幅），并說明使用APP的好處，以方便人們跳轉至該平臺。
Wayfair鼓勵下載APP的窗口打斷了用戶。用戶認為他們將不得不付出很多步驟，才能在另一個平臺上重新開始他們的任務，而沒有什么明確的好處。
梅西百貨在鼓勵從移動網站下載APP方面做得很好。頁面底部的非模態廣告包含了跳轉APP的獎勵，并顯示了APP的用戶評分。
結論
彈出，彈出，無止境的彈出。這不是可以接受的用戶體驗，因此請停止使用彈出窗口。
鑒于此總體結論，您可能想知道什么時候可以使用彈出窗口。答案是：要謹慎。不要隨波逐流，不要為了短期指標而打斷您的用戶。保持收集反饋、通知用戶數據的收集、獲取電子郵件地址或鼓勵轉換平臺時，探索尊重用戶需求的其他方法。
只在適當的時候，保留使用模態窗口來傳遞關鍵信息。不要中斷重要的用戶任務，或者使用一個大且干擾的彈出式窗口來擋住相關內容。進行可用性測試，確保您的彈出窗口不會打擾您的用戶，此外，您還會獲得真正的洞察，以幫助您改善整體體驗。
原文作者：Anna Kaley，Nielsen Norman Group用戶體驗專家
原文標題：Popups: 10 Problematic Trends and Alternatives
原文鏈接：https://www.nngroup.com/articles/popups/
本文由 @海外設計參考 翻譯發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
很有用