2014年12月12日 星期五

為什麼人們不捲動頁面?廣告放在頁面上方真的比較有效嗎?




Luke Wroblewski 在 Twitter 上從 12/09 開始提出了一個 "There is no fold" 的討論

探討的是現代跨裝置網頁設計 (contemporary multi-device web design) "捲動" (scroll) 跟 "摺疊" (the fold) 的迷思 (Myth)

我們先來認識一下 "the fold" 英文的解釋是 the typical height of a browser window, about 700 pixels,用比較白話的講法可以說是 "第一屏",大部分網頁在瀏覽器內可以看到的網頁高度,平均在 700 pixel 左右。

因為剛好最近在研究,我想順便把 Luke 的 Twitter 整理一下給大家參考。

(內嵌 Twitter 原文,請稍微等候一下,別急著滾動 :P )


Part 1
Luke 先提出滾動深度的現象給大家參考,人們常常在整個頁面還沒有 load 完就開始捲動頁面,大約有7成的使用者會只會看第一屏看到的東西
橫軸是網頁由上往下的 pixel 高度 。



Part 2
這張在講的使用者願意去互動的秒數(y軸)跟滾動的高度(x)


延伸閱讀:網頁的捲動行為研究
http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/





Part 3
頁面的長度到底是不是重點?
重點不是的 call to action 有沒有在第一頁就被看到,重點是使用者能不能被說服去 take action。

延伸閱讀:Does optimization ever end? How we grew Crazy Egg’s conversion rate by 363%
http://www.conversion-rate-experts.com/crazy-egg-case-study/
這個文章很值得閱讀,Crazy Egg 的改版提高了  363% 的轉換率,第一個改變竟然是把頁面變長了!還有表單的改版...等等。


Part 4
最常 "真的" "被看到" 的廣告,並不在 "第一屏",反而是在捲動之後。



Part 5
我們可以按照使用者螢幕的可視高度,用 Media Queries 去改變也面高度的設計。
影片示範




Part 6
這張前端工程師看了會很驚恐,過去六個月統計以來,所有的裝置大概有 3997種的解析度....




Why People don't scroll
為什麼使用者不捲動頁面?
1. 使用者並不會預期網頁上有水平的移動方式
2. 網頁的設計要注意是否讓使用者感受到 "好像已經結束了?"


When People do Sroll
當使用者正在捲動的時候
1. 因為想要了解接下來的內容才會想要 "捲動" 頁面
2. "點擊" 是一種下決定的行為。


Luke 看來後續還有新的議題在討論,我會再繼續整理....