中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

通過觀察彈窗，我們會(huì)發(fā)現(xiàn)大多數(shù)彈窗都存在著破壞用戶體驗(yàn)，降低用戶好感度的效果。因此本文結(jié)合這一現(xiàn)象，講具體分析背后的原理以及避免的方法。

無論是否使用彈出窗口，大多數(shù)窗口疊加都出現(xiàn)在錯(cuò)誤的時(shí)間，在進(jìn)行關(guān)鍵任務(wù)時(shí)中斷用戶，使用不良語言，并導(dǎo)致用戶迷失方向。

通過進(jìn)行數(shù)十年的用戶研究，我們知道人們不喜歡彈出窗口和彈出框。在最近的一次可用性研究中，我想起了這一事實(shí)。在嘗試完成任務(wù)時(shí)，一名參與者在連續(xù)遇到多個(gè)彈出窗口后將他的手機(jī)扔到了桌子上。令人沮喪的是，他放棄了任務(wù)，離開了網(wǎng)站，給組織留下了非常壞的印象。其他幾個(gè)用戶也有類似的看法，盡管他們沒有扔掉他們的手機(jī)。

彈出窗口（也稱為疊加或彈出）是覆蓋在頁面內(nèi)容上部（層）顯示的窗口或?qū)υ捒?。彈出窗口可以根?jù)兩個(gè)維度進(jìn)行分類：

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

• 模態(tài)框（Modal）：在用戶明確地與疊加層交互之前，頁面上的內(nèi)容將被禁用。
• 非模態(tài)框（nonmodal）：用戶仍然可以與背景內(nèi)容進(jìn)行交互（例如，通過選擇鏈接或點(diǎn)擊按鈕），同時(shí)覆蓋疊加仍然可見。

（2）背景是否變暗：

• 如果背景變暗，則彈出窗口稱為lightbox。
• 當(dāng)背景內(nèi)容沒有視覺上的變暗時(shí)，沒有特殊名稱。

雖然在許多情況下lightbox屬于模態(tài)框（Modal），但并非總是如此。

在彈出窗口的定義中，模態(tài)框（Modal）禁用所有背景內(nèi)容，非模態(tài)框（nonmodal）疊加保留用戶與背景內(nèi)容交互的能力，lightbox使背景內(nèi)容變暗。

幾個(gè)星期以來，我捕獲了在網(wǎng)站和移動(dòng)應(yīng)用程序中遇到的每個(gè)彈出窗口的屏幕截圖：平均每周 25 個(gè)彈出窗口，這比任何人能夠忍受的都要多（但非常能代表今天的互聯(lián)網(wǎng)用戶體驗(yàn)）。

這個(gè)實(shí)驗(yàn)連同我的可用性研究一起出現(xiàn)了無數(shù)糟糕的實(shí)踐，并證明疊加已經(jīng)遠(yuǎn)遠(yuǎn)被過度使用了。 我們已經(jīng)接近網(wǎng)站濫用這些元素的程度，以至于有問題的實(shí)例遠(yuǎn)遠(yuǎn)超過彈出窗口仍然是一種有用的設(shè)計(jì)策略的情況。

在本文中，我將概述我觀察到的問題并討論要考慮的關(guān)鍵因素，以及彈出窗口的實(shí)際替代方案，以遵循組織的意圖和用戶體驗(yàn)。

彈出窗口的時(shí)機(jī)：在交互之前或關(guān)鍵任務(wù)期間不要提示

1. 在加載主頁內(nèi)容之前顯示彈出窗口

無論使用何種變體，在用戶可以從你的網(wǎng)站或應(yīng)用程序中收集有價(jià)值的內(nèi)容之前，切勿顯示彈出窗口。這種趨勢(shì)是非常具有侵入性的，因?yàn)?strong>用戶的任務(wù)在他們登陸頁面之前就被打斷了。人們已經(jīng)習(xí)慣于在網(wǎng)站上看到過早的彈出窗口并且通常忽略它們或者立即尋找最快的方式來關(guān)閉彈出窗口返回任務(wù)。在頁面加載之前出現(xiàn)的彈出窗口使網(wǎng)站看起來很不舒服，用戶體驗(yàn)感讓人抓狂。

此外，未能識(shí)別這些事實(shí)的網(wǎng)站在搜索引擎結(jié)果中排名很低?的做法是使用戶無法訪問內(nèi)容，特別是在移動(dòng)設(shè)備上。

替代方案：

等待彈出窗口中的內(nèi)容，直到它與用戶的上下文相關(guān)。使用互惠原則：在向他們?cè)儐柸魏蝺?nèi)容之前給予訪問者有價(jià)值的內(nèi)容，無論是請(qǐng)求電子郵件地址，還是取消彈出窗口的操作。運(yùn)行用戶測(cè)試以確定適合計(jì)劃在彈出窗口中顯示的任何內(nèi)容的上下文，并找出顯示該內(nèi)容的最佳方式；在許多情況下，它不會(huì)在彈出窗口中。在頁面內(nèi)容加載之前顯示任何類型的彈出窗口是可接受的唯一用例是，當(dāng)你的網(wǎng)站有法律義務(wù)要求用戶同意接受使用cookie或驗(yàn)證其年齡時(shí)。

在加載主頁面內(nèi)容之前，HuffPost向用戶提供了一個(gè)lightbox。這是一種可接受的使用其他有問題的做法，因?yàn)樵摼W(wǎng)站在使用個(gè)人數(shù)據(jù)（包括位置）時(shí)在法律上有義務(wù)征得同意。

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

用戶登錄后顯示的彈出窗口與頁面內(nèi)容加載前顯示的彈出窗口一樣令人煩惱。當(dāng)用戶登錄帳戶時(shí)，他們會(huì)考慮下一步或后續(xù)任務(wù)，否則他們?yōu)槭裁磿?huì)登錄？！立即出現(xiàn)任何類型的彈出窗口會(huì)分散注意力并妨礙他們完成下一步。因?yàn)樗麄儗Ｗ⒂谙乱徊剑杂脩艨赡懿粫?huì)關(guān)注彈出窗口或突然關(guān)閉彈出窗口。不僅如此，他們可能會(huì)因?yàn)橹袛嘁约瓣P(guān)閉彈出窗口或移動(dòng)它所需的額外時(shí)間和交互成本而感到沮喪。

替代方案：

在登錄帳戶后，為用戶提供一些時(shí)間和空間來完成任務(wù)，并且不會(huì)立即顯示彈出窗口。在經(jīng)過一段時(shí)間后，最終提供有用的、可以接受的帳戶提示、指南或新功能是，但前提是用戶的任務(wù)得到顯示的內(nèi)容或新功能的增強(qiáng)或進(jìn)一步支持。在這些情況下，總是傾向于使用較少侵入性的方法（如工具提示和小型非模態(tài)框疊加層）來傳達(dá)這些元素。

Gmail使用相對(duì)不顯眼的非模態(tài)框疊加層來引入支持用戶當(dāng)前清理收件箱任務(wù)的新功能。非模態(tài)框疊加出現(xiàn)在用戶與收件箱交互之后，而不是在登錄后立即顯示。

3. 在交互之前詢問電子郵件地址

許多網(wǎng)站和應(yīng)用程序在有機(jī)會(huì)與內(nèi)容交互之前使用彈出窗口來詢問用戶的電子郵件地址。

電子商務(wù)、新聞網(wǎng)站和應(yīng)用程序以及博客是此類別中最大的違規(guī)者。這種方法存在問題，因?yàn)槿藗儾粌H會(huì)因?yàn)閺棾龃翱?、其彈出時(shí)機(jī)以及網(wǎng)站過早要求電子郵件地址這一事實(shí)感到惱火，而且他們還會(huì)認(rèn)為該網(wǎng)站會(huì)向他們發(fā)送垃圾郵件。

例如：登陸 Uncommon Goods 網(wǎng)站的一個(gè)用戶在受到模態(tài)框（Modal）的問候時(shí)感到不滿，其要求輸入她的電子郵件地址才可以訪問秘密銷售。

她說：

“在網(wǎng)站上做其他事情之前，這樣的東西突然出現(xiàn)，真讓我惱火。如果我第一次來到這個(gè)網(wǎng)站，我怎么知道我是否想成為電子郵件訂閱者？我希望稍后再說。”

一個(gè)用戶在登錄 Uncommon Goods 網(wǎng)站時(shí)看到一個(gè)模態(tài)框（Modal），在她到達(dá)網(wǎng)站后不久就要求她提供電子郵件地址，這讓用戶感到惱火。

在詢問用戶的電子郵件地址時(shí)，需要考慮許多權(quán)衡因素。網(wǎng)站和應(yīng)用程序通常使用過早的模態(tài)框（Modal），因?yàn)樗鼈儺a(chǎn)生的指標(biāo)會(huì)在短期內(nèi)上升。然而，短期指標(biāo)通常會(huì)以使許多用戶感到沮喪為代價(jià)，而這些用戶并非出于任意激勵(lì)，例如秘密銷售。

替代方案：

與其在早期顯示電子郵件彈出窗口，不如考慮用戶何時(shí)最愿意與您共享其電子郵件地址。他們是否正在瀏覽具有適用促銷代碼的類別？或許他們只是閱讀（或掃描）了整篇博文。這些動(dòng)作可能是最小侵入性非模態(tài)疊加的適當(dāng)觸發(fā)器，可能出現(xiàn)在靠近右上角或右下角的位置，使用合理數(shù)量的屏幕空間。向用戶提供有價(jià)值的和有形的內(nèi)容，以換取他們的電子郵件地址; 不要只是指望他們主動(dòng)交出來。

MarkManson.net網(wǎng)站在人們到達(dá)博客文章底部后，顯示了一個(gè)最小的侵入性非模態(tài)框覆蓋。該彈出窗口還提供了一個(gè)免費(fèi)的電子書作為獎(jiǎng)勵(lì)。

4. 在人們做了任何有意義的事情之前要求反饋

接收用戶的反饋非常重要，但當(dāng)用戶在你的網(wǎng)站上做任何事情之前，不應(yīng)該向他們發(fā)送反饋提示。網(wǎng)站和應(yīng)用程序傾向于立即向用戶提供反饋彈出窗口，希望他們能夠給予高度評(píng)價(jià)并繼續(xù)他們的任務(wù)。但是這種情況很少發(fā)生; 更常見的是，用戶迅速關(guān)閉彈出窗口，無意再次尋找它。

在體驗(yàn)中的適當(dāng)位置從用戶那里獲得有意義的反饋，可以深入了解他們面臨的挑戰(zhàn)和障礙。 但是如果你過早地要求反饋，你可能會(huì)在最重要的時(shí)候沒有得到任何反饋。

例如，當(dāng)一名研究參與者試圖在ATT.com上支付電話賬單時(shí)，對(duì)出現(xiàn)的反饋模式感到沮喪。她說，“嗯，我付賬單后會(huì)給出反饋，但現(xiàn)在我很沮喪，因?yàn)槲疫€沒有做任何事情就讓我給出反饋。”

一名研究參與者在試圖支付電話費(fèi)時(shí)不情愿地關(guān)閉了反饋模式。她說，她都還沒有在網(wǎng)站上做任何事情，就被要求提供反饋。

替代方案：

要求用戶在完成您網(wǎng)站上的頂級(jí)任務(wù)后立即提供反饋。此方法可以最大限度地減少中斷并確保反饋基于實(shí)際的互動(dòng)。

例如，視頻會(huì)議軟件 BlueJeans 在會(huì)議結(jié)束后要求用戶提供反饋。此請(qǐng)求未提前顯示，但在上下文相關(guān)且適當(dāng)?shù)臅r(shí)間出現(xiàn)了。

用戶在完成關(guān)鍵任務(wù)后立即詢問用戶的反饋，而不是在用戶到達(dá)你的網(wǎng)站后立即征求反饋。這樣，你就增加了接收相關(guān)評(píng)論或評(píng)級(jí)的機(jī)會(huì)。在這種情況下使用模態(tài)框疊加對(duì)用戶來說不那么煩人和具有侵入性

5. 在關(guān)鍵任務(wù)期間中斷用戶請(qǐng)求反饋

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

美聯(lián)航應(yīng)用程序在關(guān)鍵任務(wù)中間顯示模態(tài)框疊加：檢索登機(jī)牌。

替代方案：

除了要求用戶僅在完成關(guān)鍵任務(wù)后提供反饋之外，還提供靜態(tài)的、非侵入性的方式，以便隨時(shí)提供反饋。屏幕一側(cè)的選項(xiàng)卡，頁腳中的鏈接或?qū)Ш街械逆溄佣际瞧茐男阅B(tài)框的可接受替代方案，并讓用戶在準(zhǔn)備就緒時(shí)能夠分享他們的觀點(diǎn)。

雀巢應(yīng)用程序沒有使用反饋模式中斷用戶，但在網(wǎng)站的頁腳中包含反饋鏈接。

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

6. 逐個(gè)顯示多個(gè)彈出窗口

在彼此上方顯示多個(gè)彈出窗口會(huì)使你的網(wǎng)站看起來不專業(yè)、絕望和雜亂無章。它還會(huì)壓倒用戶并迫使他們花費(fèi)精力來關(guān)閉每個(gè)窗口。如果你的站點(diǎn)使用許多不同類型的彈出窗口，測(cè)試實(shí)施以避免一次向用戶顯示多個(gè)彈出窗口。

替代方案：

如果你必須在彈出窗口中顯示關(guān)鍵信息（例如重要警告以防止或糾正錯(cuò)誤），請(qǐng)確保一次只顯示一個(gè)。更妙的是，不要在彈出窗口中顯示關(guān)鍵信息，因?yàn)槿藗儍A向于在沒有閱讀的情況下關(guān)閉它們。相反，使用視覺上不同的元素并將其直接放在頁面上，其中消息提示最適合上下文。確保副本清楚、準(zhǔn)確地傳達(dá)用戶需要做些什么來糾正問題并繼續(xù)前進(jìn)。

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

Canva 在頁面上直接顯示關(guān)鍵信息做得很好。它使用位于頂部的視覺上不同的內(nèi)容模塊而不是彈出窗口。消息提示幫助用戶了解他們需要做些什么來糾正問題。

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

7. 在用戶移動(dòng)到新的子域或外部站點(diǎn)之前顯示模態(tài)框覆蓋

某些公司網(wǎng)站會(huì)鏈接到位于子域和外部站點(diǎn)上的內(nèi)容或應(yīng)用程序。在用戶離開主站點(diǎn)之前，會(huì)出現(xiàn)一個(gè)模態(tài)框疊加圖，提醒用戶即將發(fā)生的轉(zhuǎn)換。這種類型的彈出窗口是有問題的，因?yàn)樗^分強(qiáng)調(diào)了過渡，使用戶感到迷茫和困惑，特別是如果子站點(diǎn)是在新的瀏覽器選項(xiàng)卡中打開時(shí)。

在我們的一次可用性測(cè)試會(huì)議期間，一位在HSBC網(wǎng)站上尋找工作的參與者在嘗試基本上分為3個(gè)不同網(wǎng)站的任務(wù)時(shí)遇到了兩種不同的過渡模式。

他說：

“它一直把我?guī)У狡渌W(wǎng)站，我甚至不知道我在哪里了。如果他們的工作申請(qǐng)流程如此復(fù)雜和脫節(jié)，我真的不認(rèn)為這是一個(gè)好的工作地方。無論這個(gè)網(wǎng)站看起來多么漂亮，這似乎都是一團(tuán)糟。”

點(diǎn)擊Careers菜單后，模態(tài)框警告用戶他們即將離開初始站點(diǎn)。

在同一個(gè)網(wǎng)站上，用戶還看到了另外一種模式，表明他們要去第三個(gè)網(wǎng)站申請(qǐng)這份工作。

替代方案：

將用戶鏈接到外部屬性時(shí)，刪除模態(tài)框，最小化站點(diǎn)之間的過渡，并始終保留回主站點(diǎn)的導(dǎo)航。如果你的用戶確實(shí)需要在離開你的網(wǎng)站時(shí)收到警告，使用較少侵入性的選項(xiàng)（例如鏈接上的工具提示）以淡化過渡轉(zhuǎn)換。

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

8. 通過模態(tài)框疊加中斷對(duì)內(nèi)容的訪問

在用戶加載文章或其他長(zhǎng)篇內(nèi)容（例如通常在網(wǎng)站的關(guān)于我們或新聞部分中找到的內(nèi)容）之后立即出現(xiàn)的模態(tài)對(duì)話框，使其看起來好像網(wǎng)站在限制對(duì)該內(nèi)容的訪問。這種環(huán)境是一個(gè)特別不好的表現(xiàn)，因?yàn)樗鼤?huì)降低網(wǎng)站的可信度。

CNN移動(dòng)應(yīng)用程序中的一個(gè)用戶在登陸他想閱讀的文章后立即遇到郵件訂閱模態(tài)框時(shí)感到沮喪。他說：

“這導(dǎo)致我對(duì)CNN的懷疑達(dá)到頂峰。不要要求我填寫電子郵件或立即注冊(cè)任何內(nèi)容。”

CNN的移動(dòng)應(yīng)用程序在用戶登陸頁面閱讀文章時(shí)顯示一個(gè)具有權(quán)限提示的模態(tài)框。這樣做是有問題的，因?yàn)樽?cè)CNN的時(shí)事通訊不是用戶在那里的原因; 閱讀內(nèi)容才是。

替代方案：

允許用戶在不中斷的情況下直接使用內(nèi)容。將彈出窗口替換為頁面頂部的易于關(guān)閉的橫幅。彈出窗口的替代方案將允許用戶如果想要訂閱時(shí)事通訊時(shí)可以自行訂閱，而不會(huì)阻斷他們收看信息的主要任務(wù)。

Conde’Nast Traveler的網(wǎng)站在導(dǎo)航下方的一個(gè)微妙且非侵入性的橫幅中介紹了其簡(jiǎn)報(bào)訂閱。這種設(shè)計(jì)允許感興趣的用戶訂閱時(shí)事通訊，但并沒有分散那些只想閱讀網(wǎng)站內(nèi)容的人的注意力。

彈出內(nèi)容：不要假設(shè)模態(tài)框疊加將傳遞消息

9. 使用模態(tài)框疊加來進(jìn)行GDPR和cookie通知

用戶已經(jīng)匆忙關(guān)閉了模態(tài)框疊加，因?yàn)樗麄冋J(rèn)為沒有任何好處。為了傳達(dá)與GDPR和cookie的使用相關(guān)的重要信息，請(qǐng)不要使用模態(tài)框疊加。

替代方案：最好放置在頁面底部或側(cè)面的非模態(tài)框疊加。這些功能的侵入性要小得多，并且允許用戶繼續(xù)執(zhí)行任務(wù)。確保提供有關(guān)如何收集和使用用戶個(gè)人數(shù)據(jù)的足夠信息。

Reddit 使用小而不顯眼的非模態(tài)框覆蓋來請(qǐng)求用戶是否同意cookie; 但是，描述人們數(shù)據(jù)使用方式的語言過于模糊。

NNgroup.com使用非模態(tài)框覆蓋，其中包含有關(guān)cookie使用的清晰語言。我們概述了為什么我們收集人們的數(shù)據(jù)以及這些數(shù)據(jù)是如何專門用于他們利益。

10. 鼓勵(lì)模態(tài)疊加中的頻道轉(zhuǎn)換，而不傳達(dá)特定的好處

經(jīng)?？梢钥吹焦膭?lì)用戶從移動(dòng)網(wǎng)站過渡到相關(guān)移動(dòng)應(yīng)用程序的模式，尤其是在電子商務(wù)或新聞網(wǎng)站上。在許多情況下，這些疊加是破壞性的并且存在問題：通常，網(wǎng)絡(luò)用戶是一次性用戶，他們沒有興趣為臨時(shí)任務(wù)下載應(yīng)用程序。

可以理解的是，組織希望鼓勵(lì)應(yīng)用程序下載，但模式覆蓋不是宣傳你的移動(dòng)應(yīng)用程序的正確方法。即使是手機(jī)上有應(yīng)用程序的用戶也可能不愿意切換頻道，因?yàn)楹ε轮匦麻_始他們的流程。模態(tài)框疊加只會(huì)困擾他們。

替代方案：

為組織的移動(dòng)應(yīng)用程序創(chuàng)建意識(shí)，但不以侵入用戶當(dāng)前任務(wù)為代價(jià)。偏向于低調(diào)的方法，例如標(biāo)準(zhǔn)的頂部橫幅，并概述了使用該應(yīng)用程序來簡(jiǎn)化人們向該頻道過渡的好處。

Wayfair用一種鼓勵(lì)下載其移動(dòng)應(yīng)用程序的通用模式打斷了用戶。用戶認(rèn)為他們必須投入大量的工作才能在另一個(gè)渠道上重新開始他們的任務(wù)，而不會(huì)帶來實(shí)際的好處。

梅西百貨在鼓勵(lì)手機(jī)應(yīng)用程序下載方面做得不錯(cuò)。 頁面底部的非模態(tài)框疊加包含對(duì)頻道轉(zhuǎn)換的獎(jiǎng)勵(lì)以及顯示應(yīng)用的用戶評(píng)級(jí)。

總結(jié)

鑒于這個(gè)總體結(jié)論，你可能想知道何時(shí)可以使用彈出窗口；答案是——謹(jǐn)慎使用。

抵制跟隨人群的沖動(dòng)，不要因?yàn)橹袛喽蜎]用戶以支持短期指標(biāo)。探索尊重用戶需求的替代方法，并保持組織收集反饋的意圖，通知用戶數(shù)據(jù)收集，獲取電子郵件地址或鼓勵(lì)頻道轉(zhuǎn)換。

保留使用模態(tài)框疊加，以便僅在適當(dāng)?shù)臅r(shí)間提供關(guān)鍵信息。不要通過大量的侵入式彈出窗口中斷基本任務(wù)或阻止相關(guān)內(nèi)容。進(jìn)行可用性測(cè)試，以確保你的彈出窗口不會(huì)讓你的用戶感到沮喪，并且作為額外的好處，你將獲得真正的意見反饋，以幫助你改善整體體驗(yàn)。

原文作者：Anna Kaley

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

譯文地址：https://www.jianshu.com/p/7a0d1157c9c9

編譯作者：iris0327，公眾號(hào)：設(shè)計(jì)吐司

本文由 @iris0327 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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