為什麼是跑馬燈?

跑馬燈除了傳統上運用於電視新聞播報、電玩、車站、商業區大樓廣告外,近年國內外網站開始興起跑馬燈應用,從品牌官方網站、活動型網站甚至電子商物網站也開始置入跑馬燈,此文章會從人因工程、認知學、情感設計,這幾個領域開始探討跑馬燈在使用者體驗扮演的角色與未來趨勢。

跑馬燈的背景脈絡

跑馬燈又稱新聞跑馬燈或字幕跑馬燈 (New ticker)。通常是用來顯示頭條新聞或是即時消息,在建築物或室內空間則用來表示訊息的顯示。

跑馬燈通常是由右至左滑入且跨螢幕的文字動態資訊,在台灣,因中文字的閱讀脈絡還會有直式的互動方式,也會根據不同的語言閱讀特性有不同進出場的方向。

新聞跑馬燈並非在一開始呈現即有良好的認知體驗,直到 80 年代隨著科技的發展,並開始播放氣象有關的緊急或警告消息、運動比賽分數與股票才開始逐漸固定顯示於電視新聞上。

跑馬燈設計原理

  • 人因工程

  • 認知學

  • 情感設計

人因工程:視覺結構

進入跑馬燈研究第一個領域即是了解人類如何感知訊息。視覺是人在接收與判讀資訊的第一關,而主要的知覺功能又可細分為:視覺、聽覺、觸覺、嗅覺、味覺,在知覺五大類之中,視覺佔了 80 % 的接收訊息功能,視覺可視為人類接觸環境物體第一道門(視覺動物一說也是由此而來)。

視覺主要的功能是判斷色彩與立體感覺,顏色是由眼睛感受且由大腦產生的感知,立體視覺則需透過雙眼或動態資訊並傳送信號誌大腦的視覺皮質層而來。

視覺結構可簡單分成兩部分來看,眼球肌肉運動方與視覺邊界:

  • 眼球肌肉

事實上,眼球運動機制對直式跑馬燈與橫式跑馬燈有著顯著的物理性影響。水平式的跑燈相對直式跑馬燈來說對眼球較友善,因為眼球肌肉總共有六條肌肉,而控制水平移動的只有兩條肌肉,隨著以左右的文字閱讀產生的疲勞度相對垂直閱讀要來得低。

眼球肌肉基礎理論:

  • 上直肌(superior rectus):使眼球上轉

  • 下直肌(inferior rectus):使眼球下轉

  • 外直肌(lateral rectus):使眼球左轉

  • 內直肌(medial rectus):使眼球右轉

  • 上斜肌(superior oblique):使眼球上斜向運動

  • 下斜肌(inferior oblique):使眼球下斜向運動

  • 中央凹與視覺邊界

中央凹與視覺邊界來自感光細胞中的視錐細胞與視桿細胞分別時視網膜的分佈與其作用。視桿相對於視錐細胞要來得多,但眼球在光線較暗處仍無法分辨物體的原因在於兩者細胞的分佈。

視錐細胞(Con cell) 分布在視網膜黃斑處越往周圍越少,主要作用為顏色判別,因此在高光的環境中,作用會比較好。

視桿細胞(Rod cell)分布在視網膜中心周圍,對光的感知比較敏感,因次主要作用於夜視力。

總得來說,中央凹是讓我們看見訊息的地方。

  • 視覺邊界

在談論視覺邊界前,我們須先提到『盲點』。盲點位於眼球中央凹附近,盲點是一個什麼也看不到的缺口,位於視網膜神經與血管在眼球後的出口,由於盲點沒有視桿與視錐細胞,因此當物件落入此區域,我們就看不到他了,然而,當視覺距離與焦點開始變動時,物件又會看見,因此盲點並不是一個固定的距離。

視覺邊界最大的功能是用於引導中央凹、察覺動態物件與能在黑暗中看得清楚。(跑馬燈主題只談論到引導中央凹與察覺動態物件)

引導中央凹

閉上眼睛回想,專注地走在街道上,突然間需要查看是否到達目的街道,突然眼前景象有一個模糊長得像記憶中的路牌時,眼球會不自覺得地往那方向動? 視覺邊界可以提供低分別率的線索,引導眼球運動。

察覺動態物件

這時突然有隻貓,從眼前景象跑了過去,眼球又會不自覺得往貓的方向看去。這個公用源自於演化的過程,在原始時代的人類靠著獵物維生,演化出察覺動態的物件的能力。

那麼盲點和視覺邊界與跑馬燈的關係是什麼呢?

當我們專注於看某件物件時,眼睛會無法注意到周圍的其他物件,而跑馬燈剛好能夠讓視覺邊界引導眼球看到訊息。

認知學:資訊獲取

即思維進行信息處理的心理功能。認知過程可以是自然的或人造的、有意識或無意識;認知使用現有知識並產生新知識。認知在心理學中是指通過形成概念、知覺、判斷或想象等心理活動來獲取知識的過程,即個體思維進行信息處理(information processing)的心理功能。— 來自維基百科

設計跑馬燈需要注意認知負荷的疑慮。跑馬燈可以強化認知,抓注視覺,但同時也可能造成眼球疲乏與可讀性難度增加。跑馬燈傳遞訊息的特性在於,可以一次傳遞多則較長得文字訊息,較不受載體尺寸的影響。不過設計時則需注意閱讀的速度,過快會產生閱讀困難,過慢讀著會沒有耐心,因此最佳的速度須隨傳遞得文字長度而變化,且經過測試。

情感:讀者獲取資訊的過程中產生的情緒

跑馬燈的動態特性容易引發讀者幾種情緒:

  • 緊急

  • 煩躁

  • 無感

公告用途的跑馬燈,可讓接收者得知緊急的消息,然而當跑馬燈過快或頻繁時,反而容易產生躁感而轉開,或是直接忽略訊息。跑馬燈的重新定義:網頁應用過往跑馬燈常見於電視新聞上或用於手遊中告知最新消息,近年跑馬燈重回設計師的懷抱,並給於不同的定義與應用。因為『動』的特性,可引導眼球注視,除了公告消息外,也開始用於品牌願景宣導,例如:呼籲正視 Covid -19 ,特價活動等,開始展開了新的用途。

Typography website:

使用者可先於 Landing page 看完例句的字型,而不用進入次頁才能預覽字型。(https://extraset.ch/page-typefaces/)

E-commercial Website :用於商品名稱上與搭配產品特性 (https://futuremood.com/)

Event Campaign:活動宣傳,讓使用者更有活動記憶點 (oiw.no)

Branding Website:強化品牌意象等資訊 (https://www.andrewleguay.com/)

/

跑馬燈元素於網站的應用與趨勢

繁體中文
繁體中文

Contact

copyright @Roey

Contact

copyright @Roey

Contact

copyright @Roey

Contact

copyright @Roey