[好文收藏] 眼睛會說話 談網頁閱讀動線

這是一篇收藏很久的文章，在2004年由那福忠先生發表在 UDN / 數位文化誌

其實不管是哪一種版面設計，讀者眼睛瀏覽的邏輯已經在求學過程、工作中慢慢被養成習慣。

怎麼樣才能catch 到讀者的 eye ball 相對在行銷包裝上佔相當重要的地位 (尤其在視覺系主義愛好者的閱讀習慣更見一斑)。

二話不說，馬上來分享這篇珍貴的文章 。

眼睛會說話 談網頁閱讀動線

那福忠 2004/12/29 美國 Poynter 新聞研究學院，日前公布了「第三次眼睛追蹤」(Eyetrack III) 的研究報告，用最新科技監視眼球的移動，記錄一個人看新聞網頁的動態。 報紙都有網站，到底有多少人看、哪一頁看的人最多，都有紀錄的工具可用，但網頁上哪一部份、哪一則新聞、哪一張圖片、哪種廣告最受到讀者的注意，叮著看很久的凝視 (Fixation)、還是一掃而過的一瞥 (Scan)，畫面的安排與寫作風格對閱讀率有沒有影響，就不是普通的網上記錄的工具所能勝任了。美國 Poynter 新聞研究學院，日前公布了「第三次眼睛追蹤」(Eyetrack III) 的研究報告，用最新科技監視眼球的移動，記錄一個人看新聞網頁的動態。這項研究，由友人專欄作家 Steve Outing 與北卡州大學新聞教授 Laura Ruel 設計實驗，由加州 Eyetools 技術公司提供器材，在舊金山對 46 位對象做每人一小時的實驗。 眼睛追蹤研究第一次在 1990 年，以印刷報紙的閱讀行為為研究目標；第二次在 2000 年，以窄頻環境下的報紙網站為目標。這一次是以寬頻環境下的新聞網站為研究目標，把圖片、廣告、多媒體都列入研究項目，研究結果有許多出乎大家意料之外，應作為新聞網站提升閱讀率的重要參考。以下簡述重要的研究結果，詳細資料，請參閱 Eyetrack III 網站。 1.首頁的眼睛移動路線 下圖為眼睛觀看新聞網站首頁的路徑，取自 Poynter 新聞學院網站。左上第二格紅點是起點，左上右側箭頭是終點。 2.網頁注目區域優先順序 下圖為眼睛觀看新聞網站首頁的優先順序，取自 Poynter 新聞學院網站。紅色為第一優先、黃色為第二優先、綠色為第三優先 3.閱讀 (Read) 與瞥視 (Scan) 閱讀，是花較長的時間停留在一個位置；瞥視，僅是眼神掃瞄，不作停留。研究發現，讀者花時間閱讀的是小字，而非大字。標題通常用大字，被瞥視的時間都在一秒鐘以下，如果標題太長，僅有前幾個字被看到。 如果標題下有一段小字簡述，簡述約有三成被閱讀；但如果標題加底線以示連結，因為橫線的分隔作用，分散讀者的注意力，讀者對標題下的簡訊就視而不見了。（如下圖） 另外把簡短新聞加框、換色，也產生分隔作用，讀者多誤以為是廣告而跳過。 4.網頁上的熱點 (Hot Spot) 網頁上最受人注目的地方在哪裡？只有一個地方：聳動的標題字眼。除了標題，別的項目很難成為網頁的熱點。最不熱的地方是畫面不能顯示、需要捲動的位置，通常都不會把重點方在捲動的位置。 實驗趣事：把一家服飾店的名字放到標題裡，成為這一頁的熱點，那家服飾店的名字是 FCUK。 5.導讀 (Nevigation) 導讀標示 (Nevigation Bar) 放在哪裡最好？答案是畫面最上方，如有網站的 Logo，則在 Logo 之下，這個位置讀者最喜歡。除了上方，左側與右側都不如上方，只是左、右兩側並沒有區別，普遍以左側導讀標示較右側為佳的認定，並不確實。常理 6.文稿編排與寫作風格 短的段落最適合閱讀，閱讀率是長段的兩倍，一般的新聞都是兩、三段，每段約 45 - 50 個字（指英文），平均為兩、三句話。有的網站每段僅有一句話，閱讀率最高。 內文以一欄編排最適宜閱讀，可能因為大家對一欄的網頁編排，習慣已久，所以對一欄以上的編排不願閱讀。 網頁裡有文字有圖片，讀者先看圖片、再讀文字？錯。先讀文字、再看圖片。印刷品正好相反，先看到圖片、再讀文字。 新聞稿如有引言、前言、摘要，如用粗體字編排，閱讀率高達 95%，閱讀時間為 5 至 10 秒。新聞稿加前言是否對內文的閱讀有幫助？實驗結果是沒有幫助，文稿無論有沒有前言，內文的閱讀率相同。 7.廣告 廣告放在哪裡最受注目？答案是網頁的左上角，讀者停留的時間是 0.5 到 1.5 秒。把廣告放在受注目的新聞旁邊，或放在網站 Logo 旁邊或上下位置，對廣告受到注目的程度沒有幫助。右側的廣告就不受注目，放在網頁底下的廣告就極少人會看到。 廣告尺寸的大小以及放在網站那一頁，與能見率有直接關係。放在首頁的小幅廣告，平均有三成能見率；在內頁佔半個畫面的大幅廣告，能見率略高，38%，依次為插在文稿內的大幅廣告，以及縱跨網頁的長條（俗稱摩天樓）廣告。 教人意外的，反而是文字廣告，以文字敘述為主的廣告，讀者平均閱讀的時間為 7 秒，圖畫廣告的平均觀看時間僅有 1.6 秒。 8.大幅圖片比小幅圖片醒目 圖片越大越醒目，自然是常理，實驗結果是： ．郵票大小的圖片，僅有 10% 的人注目。 ．210 x 230 Pixel 的圖片，有 50% 的人注目。 ．超過 230 Pixel 的圖片，則 70% 受到注目。 ．首頁的新聞照片，人物的臉部越清晰、看的人越多。 9.文字描述、還是多媒體展現？ 大家所熟悉了解的人物、事件、名稱，如果以文字記述，閱讀之後不容易忘記，讀者很快就能準確回憶；但對一般不熟悉的事物，特別是有關技術、流程、概念等信息，則以多媒體的方式呈現，記憶最深。這項實驗結果與大家預期符合，以不同媒體格式呈現適當的不同內容，才最有效。 另一項實驗：把同一則新聞以語音、靜態畫面、與文字記述三種方式同時呈現給讀者（研究對象），結果僅吸收語音與圖片兩種媒體格式，文字則未被閱讀。所以同時以兩種媒體展現，可能是接受的極限。 最後，建議負責設計網頁的讀者，進入 Eyetrack III 網站仔細閱讀，必將其發現的結果與既有網頁逐項比對。