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 高度 。
There is no fold. [part 1] pic.twitter.com/OlcR1tWy7l
— Luke Wroblewski (@lukew) 2014 12月 8日
Part 2
這張在講的使用者願意去互動的秒數(y軸)跟滾動的高度(x)
There is no fold. [part 2] pic.twitter.com/zdhLXJoHjb
— Luke Wroblewski (@lukew) 2014 12月 8日
延伸閱讀:網頁的捲動行為研究
http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/
Part 3
頁面的長度到底是不是重點?
重點不是的 call to action 有沒有在第一頁就被看到,重點是使用者能不能被說服去 take action。
There is no fold [part 3]. pic.twitter.com/tlPBLAg1Cn
— Luke Wroblewski (@lukew) 2014 12月 8日
延伸閱讀: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
最常 "真的" "被看到" 的廣告,並不在 "第一屏",反而是在捲動之後。
There is no fold [part 4]. pic.twitter.com/o90azdb90F
— Luke Wroblewski (@lukew) 2014 12月 8日
Part 5
我們可以按照使用者螢幕的可視高度,用 Media Queries 去改變也面高度的設計。
There is no fold. [part 5]
vertical MQs let you move content based on available height: http://t.co/7zxoMhQrkM pic.twitter.com/FOChyypaLm
— Luke Wroblewski (@lukew) 2014 12月 8日
影片示範Part 6
這張前端工程師看了會很驚恐,過去六個月統計以來,所有的裝置大概有 3997種的解析度....
There is no fold. [part 6] pic.twitter.com/T1b7AnkDCS
— Luke Wroblewski (@lukew) 2014 12月 8日
Why People don't scroll
為什麼使用者不捲動頁面?
1. 使用者並不會預期網頁上有水平的移動方式
2. 網頁的設計要注意是否讓使用者感受到 "好像已經結束了?"
Why people don't scroll… pic.twitter.com/sd01TL3Rbk
— Luke Wroblewski (@lukew) 2014 12月 10日
When People do Sroll
當使用者正在捲動的時候
1. 因為想要了解接下來的內容才會想要 "捲動" 頁面
2. "點擊" 是一種下決定的行為。
When people do scroll… pic.twitter.com/4kxyawWE8e
— Luke Wroblewski (@lukew) 2014 12月 10日
Luke 看來後續還有新的議題在討論,我會再繼續整理....
沒有留言:
張貼留言