系統公告
熱情贊助
搜尋此頻道內容
搜尋:
優使性線上資源
輕旅行
好時光貼曆
我是誰??
Maxxi 當過幾年搖滾客 作過一些聲音創作 搞過幾個小展覽 在歐洲拿了幾張文憑 本來認真想當個快樂的運轉手 卻莫明奇妙的寫了本書進入網路業 本以為只要不搞音樂就不會餓死 卻發現玩網路可能也差不了多少 目前正努力嘗試網路不同的可能性 現職:喬立達數位行銷顧問公司
折價王
熱門關鍵字
記事分類
創用CC授權條款
訪客有誰?
誰來我家
交換連結
交換連結貼紙,請自行取用
想與我交換連結的請留言告訴我^^
熱情贊助
RSS 訂閱
RSS2
ATOM
其它資訊
本部落所刊登之內容,皆由作者個人所提供,不代表 yam天空部落 本身立場。
POWERED BY
POWERED BY
會員登入免費註冊
February 20, 2007
以色列公司 ClickTale 06 年底的時候發佈了他們針對 120,000 次頁面流覽(06 11 月至 12 月)資料統計分析的報告,主要分析了頁面長度和使用者拖動捲軸之間的關係(不包括橫向捲軸,以下提到的捲軸都是指縱向捲軸)。下面是部分內容摘要:

總體資料

  • 91% 的頁面流覽都是有捲軸的;
  • 在這 91% 中,有 76% 的頁面流覽,是使用者滾動頁面至一定程度(但不到底);
  • 在這 91% 中,有 22% 的頁面流覽,是使用者從頁面頂部拖動到底部。

雖然 22% 看起來不是很高,但其實因為統計的資料中大部分頁面流覽是重複的(不同人,相同頁面),並且在絕大多數情況下使用者可以從頁面頂部找到想要的資訊,回頭客也會根據自己需要訪問固定的部分,所以 22% 這個比例是相當高的。

眾所周知,新浪的頁面很長,但是他巧妙的在新聞頻道首頁的最底部放置了社會新聞,其中內容主要是男子強姦女工不成將其捅死”“男子多次在女廁外偷窺被抓之類的新聞。如果統計的是新浪新聞頻道的資料肯定不准。

下面這個表格顯示在這 120,000 次頁面流覽資料中,使用者往下滾動高度(ScrollReach, px)的比例:

 


看上去大部分人只流覽頁面的 500px - 900px(一至兩屏)的高度,不拖動到頁面底部。但是這個結論是錯誤的。因為使用者拖動的高度受到頁面高度的限制,見下圖:


頁面的高度集中在 600px - 1500px,為了排除這個因素的影響,把上面兩張圖的資料加一下權看一下分佈情況。如下圖:


看到最後的那個 100%(從頭拖到尾)的比例,是否有些驚訝?這就是前文中 22% 的由來。還不相信,可能你覺得這個比例僅在頁面高度不高的情況下才成立。沒關係,再看一張圖:

上圖顯示的是,在頁面高度為 4000px - 4100px 的情況下,使用者拖動高度的比例分佈。當然,不是說使用者閱讀完了整個頁面,而是說他們掃視完了整個頁面,在上圖中是 23%

是不是頁面長就不好?

通過上面的資料可以看出,相當一部分使用者會拖動到頁面底部。那麼,是不是頁面越長,使用者越是不願意往下拖了(或者說有那麼點小小的趨勢)?不是的,我們看圖說話:

上圖的分佈還是相當平均的。不管頁面多長,並不會影響使用者掃視完整個頁面

大部分使用者會掃視 90% 以上的內容(頁面高度)。

Above the Fold

“Above the Fold”這個詞最初用在報紙上面,可以理解為重要內容。因為報紙會被折疊成一定的大小送到用戶手裡。那麼重要的內容不允許被折疊起來,比如頭版的內容。 對於網頁來說,存不存在重要內容分隔點呢?沒有準確的值,因為這取決於使用者螢幕解析度、流覽器視窗、安裝流覽器外掛程式和 Toolbar 的情況。下圖是從資料中統計出來的分佈情況(我不大清楚下圖資料如何得來的,有什麼方法?):

從上圖中可以看出來,集中在三個地方,430px600px 860px。這是當今最流行的三種解析度下的重要內容分隔點(Fold Location):800×600,1024×768 1280×1024。基本上是把解析度的高度減去 170px(流覽器的非內容區域)。而圍繞著這三個點的還有很多其他資料,是因為使用者流覽器視窗、外掛程式等因素的影響。

注意圖中最高的 600px 那個點(1024*768 的解析度是主流),仍然不足 10%。所以我們基本上可以這麼認為,網頁上沒有所謂的重要內容分隔點,這和報紙不一樣。

總結

  • 設計師可以拿著這些統計資料,告訴你的老闆,不要把文字縮在一起,為了減少用戶的負擔,可以適當增加高度,增加文字大小或者行距,使閱讀起來更舒適;
  • 也不要太在意把什麼內容都往第一屏上堆,注意平衡;
  • 資料顯示大部分用戶會一直拖動到底,但是為了讓用戶不要那麼辛苦,還是控制一下頁面的高度;
  • 精簡文字內容,適當增加圖片,使用者是在網頁,而不是閱讀。這和 Jakob Nielsen 十大網站設計錯誤裡面的第四條一致;
  • 使用一種 cut-off 式的設計,讓用戶主動往下拖動捲軸。

原文出處:JunChen Wu


Max補充: Jared Spool    提出的一些例子可以看出,事實上當使用者不使用srollbar時,並不能將原因簡單的歸究於頁面太長,事實上可能也與頁面設計時的暗示性有關

an style="font-weight: normal;">比方下面這個例子,使用者之所以不下拉的原因,是因為畫面上看起來已經滿了,下面可能沒有其它的內容


只要能適時使用cut-off的方式編排,就能讓暗示使用者下方還有更多內容,如此一來下拉的比例就高出許多

然而,回頭想想,要能精準的將頁面在某個位置作cut off似乎也不是那麼容易的事,因為每個user的screen resolution 都是不同的,看來也只能為最多人使用的解析度來進行設計。


 

引用 (你可以針對此文寫一篇屬於自己的blog/想法,並給作者一個通告)
引用
留言 (0筆)
發表你的留言 (字數限制 最多 2000 個中文字)
私密留言:
Name:




內容:
檢視行動版網頁  |  檢視正常版網頁