1. 部落格
  2. 電子報優化

電子報設計優化,客戶才賞臉

優化手機瀏覽體驗,改善客戶流失的問題

我們常聽到有人認為台灣民眾的電子郵件使用率不如歐美國家。然而實際調查結果的數據顯示卻並非如此,研究指出,使用行動裝置(如:智慧型手機、平板電腦)上網的台灣客戶中,有高達 68% 的人會使用行動裝置來收發電子郵件。

所以,若忽略客戶電子報的使用目的與習慣而任意發送,也可能使客戶無法真正了解其電子報本身的內容與價值。然而,我們又該如何讓使用行動裝置上網的客戶,在打開你的電子報時能擁有良好的閱覽體驗,就是我們接下來的文章裡討論的內容。針對客戶的上網習慣,如何讓電子報版型設計適應行動裝置的發展趨勢?

一、造成收件者取消訂閱電子報的原因

「等待圖片載入的時間太長、需要不停的往下捲動才能閱讀完一個句子或段落,或者需要先放大畫面才能點擊行動介面上的連結……」,你是否曾對這樣的場景覺得熟悉?

對於習慣透過手機瀏覽電子報的訂閱會員,可能造成流失的原因:

  1. 等待內容載入的時間過久
  2. 手機瀏覽體驗不佳

Litmus 調查報告指出,有 51% 的客戶取消訂閱品牌電子報的原因,是因為其電子報或網站無法在智慧型手機上順暢的顯示運作。另外,43 % 的客戶將無法在手機上順利顯示的電子報視為垃圾郵件。

電子報介面優化
設計不佳的電子報,會對行動裝置的使用者產生負面的瀏覽體驗,圖片來源: Soundest

原本在電腦上可順利開啟的頁面,卻讓客戶使用行動裝置瀏覽電子報時,卻產生負面之瀏覽體驗,進而放棄閱讀或取消訂閱。針對上述種種問題,我們必須從了解目標客群的行為出發,並針對不同的裝置和瀏覽器進行優化,才能避免資源的浪費,從而改善客戶流失的問題

對於電子報在不同的裝置和瀏覽器進行優化的方式,通常會採取以行動優化(Mobile Optimize)、響應式設計(Responsive Design)作為解決多元行動載具並行而產生的(多螢)介面顯示問題。至於這兩種方式的操作技巧,我們則簡單的分述如下。

二、優化手機瀏覽電子報的體驗(Mobile Optimize)

行動優化是以使用手機的客戶角度來看,透過 HTML 語言進行設計,方便以手機瀏覽電子報內容。而行動優化有以下三個實際操作的技巧:

1. 簡單扼要

一般客戶透過手機瀏覽的時間較為零碎且容易分心。保持符合主題與首段標題的信息內容、刪除不相干的文字和圖片,或以摘要說明產品重點,能更有效率的讓客戶做出行動或回應。

2. 易於瀏覽

參考滾動頁面細節的支援手機設計資料,版型設計明確且區分不同資訊區塊,同時利用有組織性的訊息,幫助客戶迅速抓住重點。以 CTA 按鈕導引有興趣的客戶進入相關網頁並進行互動。

電子報介面優化
案例:Tutorjr

3. 點擊容易

手指比滑鼠需要更大的空間完成觸控的動作,所以最好能在不混淆信件的主要前題下,使用夠大的連結和按鈕,並增加元件之間的間距。讓客戶無需放大畫面就能輕鬆的點擊(或讓整個區塊都能回應客戶的點擊)。

三、響應式電子報的設計重點(Responsive Design)

響應式設計則是以 HTML 優化版型,減少多餘縮放、平移和捲動的技術做法,讓信件可在電腦、智慧型手機或其他不同大小螢幕的行動裝置上閱讀或瀏覽,以提供客戶良好的閱讀體驗。操作的技巧有以下三種技巧:

三種電子報介面優化技巧

1. 包裝版型元素

透過包裝版型元素可讓電子報在手機螢幕上顯示更為流暢。這時可使用能同時應用於電腦和智慧型手機的網狀單元格( grid structure ),藉一或兩欄的欄寬做為提升電子報可讀性的標準,而無需再做其他調整。

例如:某品牌手機的螢幕寬 320 pixels,所以若把電腦版的螢幕寬度設定成 640 pixels ,就會直接顯示出 2 欄圖示的網狀單元格(320 pixels *2)。

2. 替換顯示圖片

在手機開信時發現某張圖片比例看起來不對稱(在電腦上正常顯示的圖片,手機上不一定也能正常顯示)。可將手機螢幕的顯示圖片換成一張寬 320 pixels 的特製圖片。若圖片不清楚時可嘗試將圖片編輯為“尖銳化”。

例如:圖片的大小原始寬為 320 pixels,就可以 resize 為寬 640 pixels 的圖片,再於手機版型中使用 320 pixels 顯示,就能解決問題。

3. 隱藏多餘圖片

即使電子報的內容引起客戶注意,但在載入電子報頁面時卻遲遲無法完成或載入失敗(圖片上被打了一個 X ),此情況下仍會讓客戶失去耐心而放棄閱覽。這時可透過響應式設計隱藏非必要的圖片,讓客戶仍可收到重要的資訊。或著也可於文字內容下放入「觀看圖片」的按鈕,讓客戶自行決定是否觀看。

四、結論

感覺上台灣上網人口在電子郵件的使用率不如歐美國家來的高。但在實際的調查數據中反倒證實其謬誤,我們可看到電子郵件收發與行動商務之間的趨勢發展。是以,行銷人員在規劃電子報時,除了暸解使用行動裝置的客戶外,還必須掌握各種上網裝置的螢幕顯示狀態,並針對不同裝置作內容瀏覽測試,以避免客戶收到電子報時發生閱覽障礙:內容段落冗長、連結不易點擊、圖片變形、開啟過慢或失敗…等。改變上述問題可確保電子報之可讀性,讓高效電子報結合行動裝置來作為貴公司行銷窗口,以滿足目前大量行動裝置用戶的需求。


延伸閲讀:注意!電子報設計不「手機化」,你可能已喪失 61% 潛在顧客!

延伸閲讀:主旨優化的 7 個秘訣+A/B 測試,教你提升 Email 開信率

延伸閲讀:EDM 也可以萌萌噠!看看 Pinkoi 怎麼做

延伸閱讀:戳中笑點!Dropbox 用「幽默」提高電子報點閱率!

延伸閱讀:設計電子報時該注意什麼?這四個錯誤千萬不要犯