SPARKFUL

Blog

Insights from the SPARKFUL teams

大家來找碴:淺談視覺搜尋系統

Wei-Fan Chenexperience-design
name

資訊圖表(Infographic)是最近一個非常流行的話題,其主要目的是把大量的資訊,整理成一張好用的圖表,加上有趣的視覺或故事效果,可以讓讀者快速吸收大量資訊。但,在設計資訊圖表的時候,我們常常會遇到一個問題:

到底如何把大量的資訊同時呈現在讀者面前,又可以清楚標示出我們想要強調的重點呢?

人類的視覺搜尋系統其實很有趣,當大量資訊同時呈現在我們面前時,有時候我們會覺得很容易、一下子就可以找出不同的資訊,有時候我們又會覺得很困難、要花一些時間才能找出不同的地方;到底這兩種不同的差異是由什麼原因所引起的呢?

善用基本特徵,那些容易被大腦處理的影像

當一個影像刺激在被我們的視覺系統辨識時,有一些影像的屬性很容易就可以被大腦處理,這些基本特徵(Basic Feature)在視覺神經的前端就會被辨識,讓我們的大腦分辨這些影像屬性更容易一些。因此如果我們設計大量資訊的時候,如果能夠善用這些基本特徵,那麼就可以提高讀者的閱讀效率。

在關於視覺搜尋的實驗中,讓受試者從一許多個「X」裡面挑出一「O」,然後再讓他們從「┸」裡面挑出一個「┼」。我們把所有的視覺元素稱作刺激總量,大部分的元素(「X」和「┸」)稱為干擾物,唯一不一樣的那個元素(上面例子的「O」和「┼」)稱為目標物,而實驗的目的,就是要檢測在干擾物增加的情況下,受試者會不會需要花費更多時間才能找到目標物。

容易被辨識的基本特徵:顏色、線段方向、大小、運動

在視覺搜尋實驗的結果中,找到了一些特徵是很容易被我們的搜尋系統所辨識出來的,包括了下列四點:

  1. 顏色
  2. 線段方向
  3. 大小
  4. 運動

採用適當基本特徵的「平行搜尋(Parallel Search)」幾乎不會造成讀者任何的認知負擔。

舉例來說,在一群紅色的球體中尋找一顆藍色的球,無論你增加多少顆紅色的球,受試者都可以用幾乎相同的速度找到目標物:藍球;或者,當所有東西都靜止不動的時候,我們可以快速找到那個唯一在移動的目標。出乎意料的,我們的大腦對於歪斜線段的敏感度也很高,可以快速找到傾斜的線條。

因此,如果你在設計呈現大量資料的介面,那麼同時用上 4 種元素中的 1、2 種也許是不錯的選擇。把要強調出來的資料放大再填上不同的顏色,可以幫助讀者幾乎不耗費精神的判斷,也同時強化了資訊的重點,增加判讀圖表的效率。


參考文獻:

  1. 陳一平(2011)。視覺心理學。台灣:翔郁整合行銷。
  2. Ware, Colin (2008). “Visual Thinking: for Design”
  3. 圖片來源:Lauren Manning, CC Licensed
Wei-Fan Chen
Wei-Fan Chen
CEO / SPARKFUL and Fourdesire
Entrepreneur in entertainment and play for wellness / Author of Playable Design / Active indie game developer 🎉
divider
Related Posts
name

如何為產品注入玩心?Fourdesire 遊戲化設計的五個心法

Sammy 是 Fourdesire 的助理製作人,在 2017 年底加入 Fourdesire 後,開始參與遊戲化產品設計,目前負責經營《記帳城市》以及研發新產品。這篇文章會有這幾年在 Fourdesire 參與產品設計的正面和側面觀察,一...Read more
name

配樂與音效,在互動作品中該扮演什麼角色?

多數影像的配樂與音效都是在作品完成之後,再交給配樂師進行後製,或許你會說這是專業分工和業界流程,亦可以減少修改的問題,那如果配樂、音效與作品同時開始進行製作呢?3 月 6 日(三)以「配樂與音效在作品製作上,該扮...Read more
name

接案還是創作?李百罡:「滿足他人也是一種能力。」

3 月 6 日(三)由 FourdesireU 主辦的「配樂與音效在作品製作上,該扮演什麼樣的角色?」講座,邀請到製作獨立遊戲《返校》配樂與原聲帶的作曲家張衞帆,以及 App《Walkr》、《記帳城市》配樂音效製作人李百罡...Read more