優使性筆記本 (Max's usability notes)

關於部落格
在這裡記錄一些我對優使性的想法及心得筆記…
-永久網址:www.UsabilityMax.com
  • 29556

    累積人氣

  • 1

    今日人氣

    0

    訂閱人氣

頁面長度與使用者行為的一些資料

看上去大部分人只流覽頁面的 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 都是不同的,看來也只能為最多人使用的解析度來進行設計。


 

相簿設定
標籤設定
相簿狀態