你有玩過寶石方塊或 Zookeeper 這類的遊戲嗎?這些遊戲都需要玩家們快速的在畫面上尋找相同的圖案,然後將相同的圖案放在一起得到分數。但是你有沒有想過,玩這個遊戲的時候,為什麼不能一眼就看完整個畫面呢?明明整個遊戲畫面就呈現在眼前,為什麼我們還要費盡心思才能找到相同的圖案呢?

不管是遊戲設計還是網頁設計,我們都需要和使用者的視覺互動,才有機會快速的獲取使用者的注意力。但是網頁設計和剛剛提到的遊戲相反,需要不停的吸引使用者的注意力才能讓使用者停留在設計師希望他們停留的地方。使用者的視線在瀏覽器上飄來飄去,我們都以為我們可以將整個畫面納入眼簾,但其實我們真正能看到的只有幾個十個像素的大小而已。

主要的原因是人的眼睛的解析度和電腦螢幕不一樣,並不是統一的。人的視網膜的成像是在正中間解析度最高,隨著離眼球中央越遠,解析度也越低,大約就像下面這張示意圖一樣:

如果換個方式解釋,其實就是當物體離開使用者注意的視覺中心 5 公分時,一個英文字母大約要 1.5 公分高(螢幕顯示大約 50 px)才能順利被使用者判讀,複雜的中文字可能就更難說了。

會產生這個效應的原因主要是因為我們視網膜上的細胞主要分為桿細胞和錐細胞兩種(一看就知道是以外型命名),這兩種細胞對不同的程度的光線會有不同程度的反應,但是只有錐細胞密集的集中在視網膜的中央一個被稱為「中央小窩」的位置,而且向四周逐漸減少。所以中央小窩對於光線的敏感程度當然也就遠大於視網膜的其他部分了。

假設我們正在設計的介面有個讓使用者集中注意於一個地方,像是部落格的文字編輯器,那麼使用者的視線就會集中在編輯器上。如果你希望使用者能夠將視線從他注意集中的地方移開,前往你希望他注意的目標(也許是個軟體升級提醒、或是好友通知)。這個目標就需要更大外觀、或者是更鮮豔的明度和彩度,才有辦法順利的刺激使用者的視網膜。

也千萬不要假設使用者的眼睛會一口氣看完畫面上所有的選項,這不只是因為使用者很忙,而是我們身體上的限制。我們一次能注意到的地方很小,要掃描完整個畫面就像是用水彩筆來幫整面牆上色一樣,是非常辛苦而且困難的一件事。設計畫面上的元素的大小除了考慮費茲定律,也要考慮我們肉眼的解析度,才能設計出真正符合人體的優良介面。

References:
1. 陳一平(2011)。視覺心理學。台灣:翔郁整合行銷。
2. Ware, Colin (2008). “Visual Thinking: for Design”
3. Images via Calvin Merry, StaR_DusT, CC License.