Facebook Pixel Facebook Pixel

如何讓手機使用者不再秒殺你的電子報(上)

2014-11-13
電子豹
如何讓手機使用者不再秒殺你的電子報(上)

平均來說,大約有 40% 的電子郵件是透過手機和平板電腦開啟的。不幸的是,這些可以順利在電腦上開啟的電子報,卻在不知不覺中帶給在手機上瀏覽的訂戶負面體驗。

你是否透過手機開啟電子報時有以下經驗:

  1. 花時間等待圖片下載
  2. 只為了閱讀一個句子卻需不停的往下捲動
  3. 想點擊連結的時候需要先放大畫面。

我們曾經談過,為了提高開信率,電子報最好提供手機使用者良好的閱讀體驗。然而,每個個案遇到的情形可能不同,尤其是在資源有限的情況下,必須謹慎的進行決策。

了解你的手機訂戶

在著手改善之前,你必須先了解你的目標客群。針對不同的裝置和瀏覽器進行優化非常困難,因此會建議先從使用者最多的部分開始進行,才能避免資源的浪費。

決策過程如下圖

whether_to_invest_in_responsive

到這邊一定有很多人會想問:手機瀏覽最佳化(Mobile Optimize)和響應式設計 (Responsive Design)到底有什麼不同?

簡單來說,手機瀏覽最佳化是以手機使用者的角度來進行內容的設計,而響應式設計則是對版型進行最佳化,以求信件在不同載具、瀏覽器、解析度被開啟時能提供良好的閱讀體驗。

由於篇幅限制的關係,本篇會先解釋手機瀏覽最佳化的實際操作方式。

手機瀏覽最佳化

什麼是手機瀏覽最佳化?

透過HTML語言,設計專門讓用戶以手機瀏覽的電子報。(營幕大小在 320–480 pixels)

使用時機

當大部分的訂戶都用手機做為開信載具

重點與注意事項

  • 透過混合的方式為大部分訂戶提供良好的使用者體驗
  • 要能容易相容於現有的行為
  • 更靈活的設計規範
  • 愈來愈小的顯示範圍
  • 愈來愈小的文字空間

有關實際操作方式,以下提供三個的技巧

保持簡潔

怎麼作?

  • 保持訊息簡單明確,最好第一個段的內容和主題相切
  • 附上圖表幫助理解
  • 刪除不相干的資訊或圖片

為什麼重要?

手機使用者的時間很零碎,而且常常一次處理多件事情(也容易分心),明確、簡單、集中的資訊可以讓他們有效率的做出行動。

案例:Udemy

案例:Udemy

容易瀏覽

怎麼作?

  • 用區塊明確地切割不同的訊息
  • 在閱讀過程中包含標題和圖片
  • 避免放入次要、相對細節的資料,用按鈕引導有興趣的讀者進入網頁並進行互動。
  • 參考支援手機的網頁的滾動頁面設計

為什麼重要?

讓手機用戶保持興趣和集中注意力是很難的,有組織的設計可以幫助訂戶迅速的瀏覽並抓住重點。

案例:Noom Coach

Noom Coach

容易點擊

怎麼作?

  • 使用夠大的按鈕和連結,讓使用者可以輕鬆點擊
  • 元件之間增加間距
  • 在不混淆資訊的前題下,讓整個區塊都可以回應使用者的點擊

為什麼重要?

當進行觸控時,人類的手指需要比滑鼠更大的空間來完成動作,設計時最好能讓使用者在不需把畫面放大的情況下輕鬆的點擊。

案例:Gmail廣告

Gmail

 

有關響應式設計的實作部分,我們將在下禮拜繼續討論。

 

延伸閱讀:掌握節慶行銷訣竅,找回被遺忘的商機!

原文出處:電子豹(授權轉載)

 

【超過300本影音說書陪你成就更好的自己】讓大大學院與你共讀,幫助「沒時間讀書」、「讀書速度很慢」、「讀完就忘記」、「抓不到重點」的你,利用18分鐘領略閱讀的樂趣,吸收並帶走鮮明觀點,真正讓知識內涵融會於日常生活。立即點擊加入
大大讀書|全台最大線上影音說書
本網站內容未經允許,不得轉載。歡迎來信投稿、洽談文章授權。

關注職場最新趨勢,為知識學習創造最佳環境

大大學院「全台最大影音說書.知識學習平台」,致力於推廣終生學習、培養職場人士的閱讀習慣。

按讚、追蹤「大大學院」Facebook粉絲團,每天更新最新職場趨勢文章,帶你掌握關鍵資訊。

加入「大大學院|職場趨勢新觀點」,最新、最實用的職場課程都在這,學習資訊不漏接!請用手機點擊「加入Line好友」連結,或是掃描QR Code加入。

處理中