正確的移動彈出視窗:範例和最佳實踐

已發表: 2024-03-13

移動彈出視窗的平均轉換率為 11% ,僅此一項就足以表明它們值得仔細研究。

此外,隨著行動體驗在電子商務領域變得越來越重要,行動彈出視窗是您的武器庫中的強大工具。

在本文中,我們將介紹什麼是行動彈出視窗(以及 Google 對它們的看法),提供範例,並解釋如何設計自己的彈出視窗。

讓我們開始吧!

快捷方式️

  • 什麼是手機彈跳窗?
  • Google 對行動彈出視窗有何看法?
  • 為行動裝置設計彈出視窗的 7 個最佳實踐
  • 9 個有效的移動彈出視窗範例
  • 如何建立移動彈出視窗?
  • 常問問題

什麼是移動彈出視窗?

行動彈出視窗是出現在手機螢幕上的網站覆蓋層,隱藏了網站的基本內容。

它們旨在吸引您的注意力並提示您採取特定操作,例如訂閱電子報或下載電子書。

這些彈出視窗對於捕獲潛在客戶和促進銷售非常有效。 他們還透過提供有價值的內容或激勵措施來提高用戶參與度。

Google 對行動彈出視窗有何看法?

谷歌一直明確其在行動彈出視窗方面的立場,特別是在用戶體驗和搜尋引擎排名方面。

2017 年,Google推出了行動搜尋演算法的更新,稱為“侵入式插頁式更新”,旨在懲罰在行動裝置上使用侵入式彈出視窗的網站。

根據Google的指導方針,行動彈出視窗透過覆蓋主要內容的很大一部分而破壞用戶體驗,特別是當網站訪客從搜尋結果訪問時,可能被認為是侵入性的。

侵入性彈出視窗的範例包括:

  • 使用者從搜尋結果登陸頁面後立即出現的彈出視窗。
  • 覆蓋整個螢幕並阻止用戶看到主要內容的彈出視窗。

(注意:某些類型的彈出窗口,例如年齡驗證或 cookie 使用的彈出窗口,如果立即顯示,可能是可以接受的。)

因此,鼓勵行銷人員謹慎使用行動彈出窗口,確保它們對用戶體驗做出積極貢獻,而不是有損用戶體驗。

為行動裝置設計彈出視窗的 7 個最佳實踐

現在我們已經介紹了什麼是行動彈出窗口,讓我們來看看設計適合行動裝置的彈出視窗的七個最佳實踐。

1.使用簡短的文案

行動用戶的注意力持續時間很短,因此讓彈出文案簡潔明了、切中要點至關重要。

保持您的訊息簡短並清楚地傳達您的價值主張。 這將增加用戶在繼續之前閱讀並理解它的可能性。

2. 確保它適合點擊

在行動裝置上,空間有限,因此請確保您的CTA 按鈕、連結和輸入欄位易於點擊。

給它們足夠的空間,讓使用者不會錯誤地碰到它們。 它還增強了彈出視窗的整體可用性。

3. 最小化表單字段

最大限度地減少移動彈出視窗中的表單欄位數量是簡化使用者體驗和減少摩擦的關鍵。

只需詢問訪客的電子郵件地址等基本訊息,即可讓使用者更輕鬆地完成操作。

4. 選擇正確的格式

選擇正確的彈出格式可以顯著影響其有效性。

在模態疊加、滑入式、全螢幕插頁式廣告或橫幅欄之間做出決定時,請考慮訊息的性質和使用者的瀏覽行為等因素。

5. 始終新增關閉選項

雖然彈出視窗可以有效地吸引註意力和推動轉化,但為用戶提供一種清晰、簡單的方法來關閉它們(如果他們不感興趣)至關重要。

包含可見的「x」、關閉按鈕或高度可見的「關閉」連結可確保使用者可以輕鬆關閉彈出視窗。

6.限制視覺效果

視覺元素可以增強彈出視窗的吸引力,但請根據常識使用它們。

避免過多的圖像或動畫讓使用者感到不知所措,因為這些圖像或動畫可能會減慢載入時間或偏離主要資訊。

明智地使用視覺效果並確保它們與內容相輔相成,以便您可以平衡美觀和功能。

7.向他們展示退出意圖

實施退出意圖策略可讓您在非常合適的時刻(當使用者即將離開頁面時)顯示彈出視窗。

透過偵測退出意圖,您可以提供有針對性的優惠或訊息來吸引用戶的注意並鼓勵他們重新考慮離開。 使用退出意圖移動彈出視窗可以提高訪客的行動轉換率,否則這些訪客可能會在沒有採取任何行動的情況下離開。

9 個有效的移動彈出視窗範例

現在,讓我們來看看 9 個出色的移動彈出視窗範例以及您可以從中藉鑑的一些想法。

1. 植物學

Vegetology的全螢幕移動彈出窗口

Vegetology 的彈出視窗簡單而有效。 他們非常詳細地實施了行動彈出視窗最佳實踐:

  • 他們使用他們的品牌顏色綠色,
  • 他們只詢問用戶的電子郵件地址,
  • 他們展示產品圖片(這與訪客建立信任),
  • 它們包括一個“X”按鈕。

2.清漆和藤蔓

Varnish 和 Vine 的行動彈出視窗有助於增加直接行動銷售

Varnish 和 Vine 的行動彈出視窗是一個很好的例子,說明如何避免佔用過多的螢幕空間,同時保持有效。

他們適合行動裝置的彈出視窗也體現了透過文案保持品牌形象,他們使用有效、引人注目的 CTA:“享受 15% 的折扣。”

3. 拉姆爾的

Lammle 的全螢幕彈出視窗行動版有助於獲得更多潛在客戶

Lammle 的彈出視窗是一個很好的例子,說明如何強調訪客訂閱新聞通訊後將享受到的好處。

請注意,他們使用“社區”一詞,這已經為訪客提供了歸屬感。 他們還提到訂閱者可以獲得獨家優惠和新品。

4. 皇冠和爪子

Crown and Paw 的彈跳窗實現了所有行動裝置所有最佳的移動彈跳窗實踐

Crown & Paw 使用全螢幕移動彈出窗口,提出大膽的價值主張:「解鎖 20% 折扣」。

它們在元素之間留有足夠的空間,以提供舒適的移動體驗。

另外,請注意底部的倒數計時器,這增加了緊迫感 提供折扣代碼並添加額外的東西是一個很好的移動彈出視窗最佳實踐。

5. 運動灰色

MotionGrey 的彈出視窗直接針對產品頁面訪客

MotionGrey 的行動彈出視窗非常直接。 他們的彈出視窗出現在產品頁面上,佔用最少的空間,並且切中要點。

您會注意到,他們的彈出視窗是個人化的 - 瀏覽站立式辦公桌的訪客會收到量身定制的優惠,這是提高行動轉換率的好方法。

6.STEM兒童

TheStemKids 兩步驟行動彈出視窗類型是轉換使用者的好方法
TheStemkid 的行動彈出視窗的第二頁是網站訪客可以選擇加入的地方

TheSTEMKid 的兩步驟移動彈出視窗是更好地了解訪客的好方法。

在第一頁上,他們詢問一個有關使用者偏好的簡單問題。

當訪客點擊進入第二頁時,他們可以選擇透過輸入電子郵件地址來註冊新聞通訊,以換取 10% 的折扣。

7. 薑黃公司

Turmeric Co 的移動彈出視窗使用清晰的 CTA 按鈕和大膽的顏色

Turmeric Co. 是謹慎而有效地選詞的一個很好的例子。 他們的移動彈出視窗佔據了整個螢幕,並使用大膽的顏色和清晰的號召性用語。

他們的彈出視窗中有趣的是“不,謝謝,我總是支付全額”選項。 如果可以選擇取得折扣代碼,誰會點擊該按鈕? 聰明吧?

8. RYZE蘑菇咖啡

Ryze Mushroom Coffee 的移動彈出視窗是簡單的縮影

Ryze Mushroom Coffee 的行動彈出視窗本身就很簡單。

它用戶友好,非常適合螢幕尺寸,並使用“立即”一詞,提示客戶立即購買(並可能提高轉換率)。

9. 澳洲Gelpro

Gelpro Australia 的行動彈出視窗有足夠的空間供網站訪客選擇加入

Gelpro Australia 的彈出視窗非常適合行動裝置。

他們的彈出視窗佔據了整個螢幕,但請注意他們為訪客留下了多少空間來填寫聯絡表單。 這個微小的細節讓使用者體驗更加順暢。

如何建立移動彈出視窗?

現在您已經看到了一些很棒的彈出視窗範例,是時候仔細了解如何建立您自己的行動彈出視窗以有效地轉換您的行動流量了。

第 1 步:選擇合適的工具

選擇可靠的彈出視窗建構器或平台,提供針對行動訪客最佳化的範本並允許自訂。

OptiMonk是建立行動彈出視窗和桌面彈出視窗的最佳彈出視窗產生器工具之一。 它為移動彈出視窗提供的一些功能包括:

  • 自動移動優化
  • 特定於移動顯示的設定
  • 針對行動裝置檢視進行了最佳化的模板
  • 能夠隱藏行動裝置上的元素
  • 移動速度優化

第 2 步:選擇模板

選擇我們眾多與您的品牌風格和行銷活動目標相符的行動回應範本之一。

OptiMonk 提供了一系列適用於各種目的的可自訂模板,從產生潛在客戶到提供促銷。 無論您的目標是時尚現代的外觀還是更具活力和吸引力的設計,您都會找到適合您需求的模板。

按一下此處查看所有 300 多個範本或查看下面的一些範例:

第 3 步:自訂彈出視窗的設計

透過整合您的標誌、圖像和一些迷人的文字,自訂您的彈出視窗以反映您的品牌形象。

調整佈局、配色方案、字體樣式和其他視覺組件,以製作一個有吸引力的互動式彈出窗口,與您的目標受眾建立聯繫。

您可以選擇是否要為行動裝置或桌面訪客建立彈出視窗。

第 4 步:針對行動用戶進行最佳化

確保您的彈出視窗可以在行動裝置上運行! 在不同的螢幕尺寸和方向上進行測試。

注意元素的放置和行動裝置上的整體使用者體驗。

OptiMonk 的行動優化功能可確保您的彈出視窗看起來很棒並且在智慧型手機和平板電腦上無縫運行,因此每個人都可以愉快地使用它。

在 OptiMonk 中為您的行動網站客製化彈出視窗。

第 5 步:設定觸發選項

選擇與使用者行為和意圖相符的觸發選項。 考慮使用退出意圖觸發器或基於滾動的觸發器在適當的時刻吸引使用者的注意力。

如果選擇基於時間的觸發器,請確保延遲它們以符合 Google 的要求。

透過 OptiMonk 的多功能觸發選項,您可以有效地吸引受眾並最大限度地發揮彈出視窗的影響。 透過測試彈出視窗的回應能力和行動用戶體驗,確保您的彈出視窗針對行動裝置進行了最佳化。

您可以在退出意圖上設定觸發(桌面和行動裝置)。

第 6 步:細分受眾

根據人口統計、行為或其他相關因素劃分受眾,透過行動彈出視窗傳遞個人化訊息和優惠。

透過細分受眾,您可以針對特定用戶群組自訂彈出內容,從而提高相關性和參與度。

OptiMonk 可讓您輕鬆建立和管理細分受眾群,確保每個彈出視窗與正確的細分受眾群產生共鳴並帶來有意義的結果。

第 7 步:設定集成

將您的彈出視窗與其他行銷工具和平台(例如電子郵件行銷軟體客戶關係管理 (CRM) 系統)連接起來,以簡化資料收集和活動管理。

將彈出視窗與其他工具整合可讓您利用現有數據和工作流程,從而更輕鬆地追蹤績效、培養潛在客戶並推動轉換。

透過 OptiMonk 的無縫集成,您可以輕鬆地將彈出資料與您喜歡的行銷工具同步,以實現更有凝聚力和更有效率的行銷策略。

第 8 步:啟動彈出窗口

一旦您完成了行動彈出視窗的設計和設置,請將其啟動以開始與您的受眾互動!

只需點擊幾下,您就可以啟動彈出視窗並開始捕獲潛在客戶、推廣優惠並推動網站上的轉換。

OptiMonk 簡單的啟動過程可確保您的彈出視窗快速、順利地上線,讓您立即開始看到結果。

常問問題

您應該在行動裝置上使用彈出視窗嗎?

是的,您應該在行動裝置上使用彈出窗口,但請仔細考慮使用者體驗。 彈出視窗可以是與行動網站受眾互動、推廣特別優惠和推動轉換的有效工具。 然而,確保彈出視窗具有相關性、適時且易於消除是至關重要的。 透過遵循本文中分享的行動彈出視窗最佳實踐,您可以充分利用彈出視窗並避免激怒使用者。

我可以透過行動彈出視窗定位特定的受眾群體嗎?

是的,許多彈出工具(例如 OptiMonk)可讓您根據各種標準(例如人口統計、行為或建議來源)對電子商務商店的受眾進行細分。 將受眾細分使您能夠提供個人化的訊息和優惠,從而提高相關性和參與度。

如何衡量行動彈出視窗的有效性?

您可以透過追蹤轉換率、點擊率、參與率和跳出率等指標來衡量行動彈出視窗的有效性。 大多數彈出視窗工具都提供分析和報告功能,以幫助您評估彈出視窗的效能並對其進行最佳化以獲得更好的結果。

包起來

我們希望這份關於行動彈出視窗的綜合指南能夠為您提供最緊迫問題的答案!

行動彈出視窗可以有效增強用戶參與度並提高轉換率,同時保持積極的瀏覽體驗。

如果您想立即開始,請立即建立免費帳戶並沉浸在行動彈出世界中。 創造快樂!

分享這個

一篇 上一篇文章電子商務產品客製化:定義、優點、範例和 Shopify 應用程式
下一篇文章如何追加銷售:促進銷售的 11 種策略下一個

撰寫者

芭芭拉·巴圖茲

芭芭拉·巴圖茲

Barbara 是 OptiMonk 的內容行銷人員。 她為創造不同形式的內容而感到自豪,無論是文章、影片還是電子書。

你也許也喜歡

6 電子商務客戶保留策略

獲得更多忠實客戶的 6 種電子商務客戶保留策略

查看貼文
如何在 Shopify 上賺錢:2024 年 14 個經過驗證的技巧

如何在 Shopify 上賺錢:2024 年 14 個經過驗證的技巧

查看貼文
如何讓人們購買你的產品:10 個行之有效的策略

如何讓人們購買你的產品:10 個行之有效的策略

查看貼文