彈出式用戶體驗設計:最佳實踐、提示和示例

已發表: 2022-04-14

每個專注於利潤的網站也都專注於從訪問者那裡獲得更多轉化:鼓勵他們購買……或至少訂閱。

彈出窗口是提高轉化率的最佳工具。 開始使用彈出窗口的電子商務商店看到的結果不言而喻:

  • Kiss My Keto將他們的購物車放棄率降低了 20%
  • Christopher Cloos將他們的轉化率提高了 37%
  • 繁榮! 作者 Cindy Joseph在短短一個月內將他們的電子商務收入增加了 148,297 美元

上述活動成功的秘訣在於它們與每個網站的整體用戶體驗 (UX) 相結合。 這些公司在顯示彈出窗口時從不打擾用戶,而是巧妙地將它們設置為在他們可以在正確的時間提供有用且相關的內容時出現。

如果你能在你的網站上實現這一點,你不僅可以避免破壞你的用戶體驗,而且你實際上會改進它

在本文中,我們將介紹 5 種方法可以做到這一點,首先是……

捷徑✂️

  1. 不要使用煩人的條目彈出窗口。 相反,根據參與度顯示彈出窗口
  2. 細分您的訪問者
  3. 創建個性化消息
  4. 一次只專注於一個價值主張和目標
  5. 不要要求太多信息

1.不要使用煩人的條目彈出窗口。 相反,根據參與度顯示彈出窗口

條目彈出窗口可能會造成極大的破壞。

這些是網站加載後立即出現的彈出窗口。 就像訪問者開始了解自己的方位並了解您網站上的所有信息一樣,他們會被突然出現的彈出窗口打斷。

條目彈出窗口還:

  • 阻止訪問者訪問所需內容
  • 經常包含不相關的內容
  • 迷惑遊客

總而言之,它們幾乎總是比有用更煩人,而且它們會降低您網站的用戶體驗。

與其用傳統的條目彈出窗口來打擾您的訪問者,不如讓他們先了解您的網站。 然後,您可以在他們的行為表明他們已準備好查看輔助消息時顯示您的彈出窗口。

以下是一些基於用戶參與度觸發彈出窗口的典型方法:

  • X 秒後顯示彈出窗口:此選項讓您的訪問者有時間瀏覽他們正在查看的頁面。 他們在頁面上花費了一些時間後,您可以引起他們的注意。
popup ux design 01 - Popup UX Design: Best Practices, Tips & Examples
  • X% 滾動後顯示彈出窗口:您可以將彈出窗口設置為在訪問者向下滾動網頁的特定百分比後顯示。

    例如,您可以設置在訪問者到達博客文章末尾時出現的彈出窗口,這意味著他們已經準備好接受一些新內容(也許通過提供免費電子書來換取他們的聯繫信息)。
popup ux design 02 - Popup UX Design: Best Practices, Tips & Examples
  • 在退出意圖上顯示您的彈出窗口:這樣,您將引起即將離開您網站的訪問者的注意。

    通過退出意圖彈出窗口,您可以阻止某人離開而不進行轉換,並說服他們繼續購物或訂閱電子郵件列表。
popup ux design 03 - Popup UX Design: Best Practices, Tips & Examples

注意“頻率”也很重要,即彈出窗口設置出現的最大次數。 通常,您希望將其限制為每位訪問者 1 或 2 次。

顯示多個彈出窗口是可以的,(我們將在下面看到)但是一遍又一遍地看到相同的彈出窗口會讓你的用戶發瘋。

popup ux design 04 - Popup UX Design: Best Practices, Tips & Examples

這是一個很好的例子,說明如何根據用戶參與度使用彈出窗口。 Obvi 的退出意圖彈出窗口僅向放棄該站點的訪問者顯示。

popup ux design 05 - Popup UX Design: Best Practices, Tips & Examples

2. 細分您的訪客

沒有一個神奇的彈出窗口與您的所有訪問者相關。 這是因為不是每個人都需要同時看到相同的關鍵信息或折扣優惠。

不幸的是,您無法確定每個人的問題的解決方案並在彈出窗口中向他們展示解決方案。

相反,您可以將訪問者分成具有相似需求和特徵的組。

這些細分市場因行業和商店銷售的產品類型而異。 但是,所有企業都可以根據他們在購買過程中所處的階段將他們的訪問者分組。

想想您的“客戶旅程”:人們如何首先了解您的品牌,他們如何到達您的目標網頁,以及他們如何找到他們想要購買的產品。

客戶旅程不同階段的細分市場有不同的需求,您向他們展示的彈出窗口需要反映這一點。

現在,讓我們看看您可以用來細分客戶的其他一些因素。 我們還將在客戶旅程的不同階段為不同的訪客分享一些活動創意。

2.1。 冷與熱的前景

“熱門潛在客戶”是指現在就想買東西的客戶,而“冷門客戶”仍在探索他們的選擇,還沒有準備好購買任何東西。

與其將所有訪問者視為準備立即購買的“熱門潛在客戶”,不如為熱門和冷門潛在客戶創建不同的轉換目標。

對於熱門潛在客戶,轉換目標很簡單:立即購買。 您的信息需要使用限時折扣或交易將這些潛在客戶推向立即銷售

您需要為冷淡的潛在客戶設置一個次要轉換目標,這通常是讓他們註冊您的電子郵件列表。 獲得他們的聯繫方式後,您將能夠隨著時間的推移與他們溝通並培養這種關係,直到他們準備好購買。

出於這個原因,您需要向冷酷的訪問者展示讓他們想要訂閱的內容,例如可下載的電子書。

讓我們看看它是如何工作的。 這是BOOM! 的幾個廣告系列中的一個很好的例子

他們提供了一本電子書,作為對他們的產品線感興趣但尚未準備好購買的冷漠潛在客戶磁石

popup ux design 06 - Popup UX Design: Best Practices, Tips & Examples

對於他們最熱門的潛在客戶(他們對 BOOM! 的內容表達了最大的興趣或即將放棄他們的購物車),他們使用 10% 的優惠券作為現在而不是以後購買的激勵。

popup ux design 07 - Popup UX Design: Best Practices, Tips & Examples

2.2. 地理定位

如果您在國際上銷售,基於位置的定位或地理定位可能是提高轉化率的好方法。 通過地理定位,您可以根據需要為盡可能多的目標國家/地區創建盡可能多的不同消息。

根據訪問者的位置對其進行細分,您可以為他們提供特定國家/地區的優惠,例如運輸優惠。 這是一個例子:。

popup ux design 08 - Popup UX Design: Best Practices, Tips & Examples

2.3. 根據購買過程中的階段定位訪問者

您的每個客戶都會經歷以下意識階段:

popup ux design 09 - Popup UX Design: Best Practices, Tips & Examples

這 5 個認知級別描述了客戶在與您的網站互動時將採用的不同心態。 剛剛得知您的品牌存在的客戶會以與忠實客戶截然不同的方式查看同一頁面。

這就是為什麼您需要通過彈出窗口將不同的輔助消息傳達給這些細分市場。

以下是為這些組之一量身定制的消息示例。

1. 有問題意識的訪客知道他們有問題,但他們仍在努力尋找解決問題的最佳方法。 因此,在這一點上,您的目標是幫助他們更好地了解他們的問題(無論是護膚問題還是需要一雙新跑鞋)並提供可能的解決方案。

一種方法是通過博客文章和電子書。 例如,如果您有一篇關於“初學者的跑步技巧”的文章,您還可以推廣一本電子書,其中提供有關跑步 10K 的“操作方法”提示。

2.具有解決方案意識的訪問者知道什麼類型的產品可以解決他們的問題,並積極權衡他們的選擇(使他們成為比我們剛剛討論的具有問題意識的訪問者“更受歡迎”的潛在客戶)。 這使您的目標變得簡單:幫助他們在您的網站上找到最適合他們的產品。

一種行之有效的方法是向他們展示他們正在瀏覽的類別中最受歡迎的產品(或“趨勢”產品)。

3.最有意識的訪客找到了他們喜歡的特定產品,可以解決他們的問題。 他們需要做的就是點擊“立即購買”並完成結帳流程。 即使這些客戶是您“最熱門”的潛在客戶,他們也經常需要最後的推動才能進行購買。

僅在有限時間內提供的不可抗拒的特別優惠是說服該細分市場現在而不是以後購買的最佳方式。

2.4. 高級細分

您還可以考慮訪問者的現場行為,從而創建越來越具體的用戶細分。 您的細分越具體,您的消息傳遞就越相關。

您可以使用以下特定於用戶的行為來進一步細分訪問者:

  • 已在當前子頁面停留至少 X 秒
  • 來自特定的流量來源
  • 當前正在瀏覽特定頁面
  • 以前訪問過特定頁面
  • 在他們的購物車中有特定的物品
  • 購物車價值大於特定閾值

這使您可以:

  • 向來自不同流量來源(例如,Facebook 與 Google Ads)的訪問者顯示不同的彈出窗口。
  • 向訪問過特定頁面但尚未購買的潛在客戶展示某些廣告系列。
  • 根據已添加到購物車的商品(用於追加銷售和交叉銷售)來定位訪問者。

3. 創建個性化消息

正如我們一直在說的那樣,“如果你向所有人銷售,那麼你就沒有向任何人銷售。” 您可以通過個性化將其提升到一個新的水平。

一旦您根據訪問者的興趣、人口統計或地理變量以及他們在購買過程中的階段將訪問者分成幾個部分,您就可以向他們展示最相關的消息。

例如,如果您銷售電子產品並且知道特定訪問者對智能手機感興趣,“25% OFF Smartphones”是比“25% OFF Selected Products”更有效的信息。

popup ux design 10 - Popup UX Design: Best Practices, Tips & Examples

彈出窗口中的消息有四個基本的自定義級別:

  1. 每個人都得到相同的信息:換句話說,您向所有網站訪問者廣播了一般優惠。 不建議這樣做。
  2. 您為熱門潛在客戶和冷門潛在客戶提供兩種不同的報價:也就是說,您根據他們的參與度將您的受眾分為兩個主要部分。 即使是這種簡單的分割也可以產生影響。
  3. 每個主要訪問者組都有幾個優惠:在這種情況下,您可以根據相關變量將訪問者分成幾個不同的組,並為每個組使用自定義消息重新吸引他們。
  4. 每個人都使用動態文本替換獲得自定義消息:這是您的彈出窗口的最高個性化級別。 每條消息都是針對看到它的特定個人量身定制的。

使用動態文本替換,彈出窗口中的文本將根據您選擇的變量自動更新。

這意味著您可以創建一個模板,然後更改內容以滿足每個訪問者受眾的需求。 使用這種方法可以減少您的工作量,並確保您的每個訪問者細分都能看到最相關的內容。

回到我們上面的例子,當訪問者試圖從智能手機類別頁面或智能手機類別中的單個產品頁面離開他們的網站時,電子商店會宣傳“25% OFF Smartphones”。

popup ux design 11 - Popup UX Design: Best Practices, Tips & Examples

但是,當訪問者瀏覽筆記本電腦配件並試圖離開該網站時,“智能手機”一詞會自動更改為“筆記本電腦配件”——直接針對該客戶的需求。

popup ux design 12 - Popup UX Design: Best Practices, Tips & Examples

4. 一次只專注於一個價值主張和目標

為了最大限度地提高轉化率,您應該將每個彈出窗口限制為一個目標,並確保其價值主張具有說服力。

價值主張是客戶可以從與您的彈出窗口互動或購買您的產品中獲得的好處 電子郵件註冊彈出窗口的價值主張可能是對某些銷售或產品的獨家訪問,而折扣彈出窗口的價值來自訪問者通過使用優惠券代碼可以節省的錢。

如果您試圖在同一個彈出窗口中實現多個目標,您將減少完成其中任何一個目標的機會。 最終,它會混淆您的信息並使訪問者對您的報價的價值感到困惑,從而降低轉化和銷售的可能性。

使用彈出窗口可以實現幾個目標,但請確保在每個彈出窗口中只追求其中一個目標。

以下是一些常見的電子商務目標:

  1. 推動銷售
  2. 建立您的電子郵件列表
  3. 減少購物車遺棄
  4. 追加銷售和交叉銷售
  5. 改善客戶體驗

5.不要要求太多信息

正如我們剛剛看到的,彈出窗口的成功取決於它為訪問者提供的價值。

但是,無論您的報價多麼有價值,如果利用它太困難,那麼沒有人願意經歷麻煩。

這就是為什麼避免詢問太多信息很重要的原因。 例如,在電子郵件註冊彈出窗口中顯示太多字段會使大多數用戶看起來工作量太大。 此外,新訪問者可能不願提供過多的個人信息。

您請求的數據越少,最終獲得的轉化次數就越多。 在許多情況下,只需一個電子郵件地址就足夠了,如下例所示。

popup ux design 13 - Popup UX Design: Best Practices, Tips & Examples

許多網站還要求提供名字以在未來個性化他們的信息,就像來自 The Oodie 的這個例子一樣。

popup ux design 14 - Popup UX Design: Best Practices, Tips & Examples

當您確實需要請求更多信息時,最好使用多步驟彈出窗口。 這樣,您可以首先詢問最關鍵的信息,然後在彈出窗口的第二頁上添加其他輸入字段。

Oodie 的彈出窗口有一個第二頁,他們還要求輸入電話號碼:

popup ux design 15 - Popup UX Design: Best Practices, Tips & Examples

The Oodie 使用的這種策略被稱為“特洛伊木馬方法”,它在短短 30 天內為 The Oodie 帶來了 190 萬美元的額外收入。

如果您想“竊取”他們的策略,請觀看我們的免費培訓。

trojan horse training - Popup UX Design: Best Practices, Tips & Examples

不要打斷用戶,而是使用彈出窗口創建出色的用戶體驗

創建像 UX 設計師這樣的彈出窗口意味著將每個訪問者視為一個人,並仔細考慮他們在彈出窗口出現時的心理狀態。

這就是為什麼您永遠不應該使用條目彈出窗口,而是根據用戶對您網站的參與度來創建彈出窗口。 下一步是定義用戶細分,然後顯示相關優惠。 最後,您可以使用動態文本替換來個性化您的彈出窗口,以便為每個用戶定制您的消息。

通過遵循這些最佳實踐,您可以改善您網站上的用戶體驗,同時改善您的列表構建工作並促進銷售!

免費開始使用 OptiMonk,並創建令人驚嘆的彈出窗口,在短短幾分鐘內改善用戶體驗。

register free optimonk account - Popup UX Design: Best Practices, Tips & Examples