1

人機介面人類的視覺與記憶系統

授課教師 : 廖文宏開課單位 : 政大資科系

Outline

人類的視覺系統 (Human visual system)

認知模型 Models of human performance (MHP)Memory ( 記憶模型 )

2

研究動機必須了解人機介面中”人”的特性與極限，

才能設計出最適用的產品本單元將討論人的視覺系統及記憶模型。視覺系統中的顏色感知，在界面設計中扮

演重要的角色，是討論的重點之一。 Model Human Processor (MHP) 認知

模型與其運作方式，是本單元的另一項重點主題。

3

可見光頻譜 Visible Spectrum

4

眼球剖面圖

光線穿透過水晶體 (lens) ，聚焦在視網膜 (retina) 5

視網膜 (Retina)

視網膜上佈滿了感光的接收器 (photo receptors)– Rods ( 柱狀體 )• 分辨灰階，但無法分辨色彩• 感應動作與夜間視覺• 對較大範圍頻譜的光有所感應

– Cones ( 錐狀體 )• 感應顏色

6

分布情形視網膜的中心有許多的錐狀體 ( 視線中心範圍

有較佳的敏銳度 , acuity)柱狀體分布在除了中心部分的其他範圍 ( 可以

用眼睛餘光偵測周遭動靜 )

7

色彩視覺感知

色彩視覺是透過光色素 (photopigments) 的感測作用

共有三類，分別對短、中與長波敏感的椎狀光色素 (S-cone, M-cone, L-cone) ，感應最靈敏的波長約在 420nm ( 藍色 ), 530nm ( 綠色 ) 與 560nm ( 紅色，其實是比較接近黃色 )

每種光色素各有其作用範圍，集合起來的結果就變成眼中看到的顏色

8

色彩敏感度

9

光色素細胞的分布狀況S,M,L 這三類的光色素細胞並非均勻分布。S cone ( 藍色的感光細胞 ) 比例 <10%,

分布於非視網膜中心區域 (outside fovea ，中央凹之外 ) ，表示人類對對短波長的光較不敏感。

隨著年齡增長，水晶體黃化， 吸收更多短波長的光線 ( 亦即藍色光範圍 ) ，又減弱了藍光的吸收程度。

用色建議 : 字體或物件很小時，勿使用藍色。

10

RGB to Gray 轉換公式

上述公式顯示，如果兩個顏色差異在藍色部分，轉成灰階時，效果將被減弱。舉例 : C1= (100, 0, 200), C2= (100, 0, 100),

C3=(100,100,200)RGB color difference: drgb(C1,C2)=100, drgb

(C1,C3)=100Gray level difference: dgray(C1,C2)=11.4, dgray

(C1,C3)=58.7.

11

gray= 0.299*R+ 0.587*G + 0.114*B

對焦不同波長的光會聚焦在離眼球水晶體不同距離的

位置當影像中有不同顏色組合，需要不斷調整焦距，

可能導致眼睛的疲累飽和色 (saturated) 比非飽和色

(desaturated) 更需調焦用色建議 : 使用者介面設計中盡量少採用飽和色，

除非要讓該物件十分醒目 ( 如警告標誌 )

12

色盲 Color Deficiency

又稱 color blindness:指無法分辨某些顏色 ,嚴重者甚至無法辨識任何顏色只有極少人是完全的色盲，因此也有些人

建議使用 “色弱”這個名詞色盲影響 8% 的男性及 0.04% 的女性紅 - 綠色盲最為常見用色建議 : 介面設計在用色時需考慮有色

弱的使用者，因此不要僅使用單一顏色的差異來標示不同屬性的物件。

13

色盲測試

14

和諧色模型Hue histogram 分布符合以下類型

15

用色建議 : 小結須考量眼睛對不同波長範圍的光線有不同的敏感度問題須考量年長使用者對光線亮度的需求物件邊緣差異如僅有顏色部分，效果較不顯著須考量一般人對藍色光範圍較不敏感的現象須考量使用飽和色時須不斷調整焦距的問題須考慮若干使用者有色盲或色弱的狀況

16

Why Model Human Performance?

理解認知過程預測新科技的影響

17

The Model Human Processor由 Card, Moran, & Newell (1983) 提出

– based on empirical data

18

Long-term Memory

Working MemoryVisual Image

StoreAuditory Image

Store

PerceptualProcessor

CognitiveProcessor

MotorProcessor

Eyes

Ears

Fingers, etc.

sensorybuffers

MHP 基礎概念運作方式有時是序列式 (serial) ，有時是平行處理。 (parallel)舉例 :– 根據刺激按燈號反應 (serial)– 邊開車，邊注意路上號誌，邊聽音樂 (parallel)

參數 Parameters– 處理器的周期時間 (cycle time): 大約 100-200 ms– 記憶有其容量、衰減期與類別

19

MHP 沒有納入的部分觸覺記憶 (Haptic memory)如何從 sensory memory 搬移至 WM– 透過 attention filters stimuli & passes to

WM

如何從 WM 搬移至 to LTM– Elaboration (反覆演練 )

20

記憶工作 ( 短期 ) 記憶 Working memory (short

term)– 容量小 (7 ± 2 “chunks”)

• 0229393091 vs. (02) 2939-3091• DECIBMGMC vs. DEC IBM GMC

– 存取速度較快 (~ 70ms) ，相對地，衰減也快 (~200 ms)• 若持續取用的將會被 pass 到 Long Term Memory

長期記憶 (Long-term memory)– 容量大 (if not “unlimited”)– 存取速度較慢 (~100 ms) ，但衰減也較慢

21

MHP 運作原理認知 -行動循環 (Recognize-Act Cycle)– 每個循環中， 在工作記憶體的內容會根據其與長期記

憶的連結而啟動相關行動– 這些行動進而改工作記憶體的內容，依此循環。Discrimination Principle:– 存取記憶的難易度和 線索 (retrieval cue) 有直接的關係

– 當有一個以上的強烈線索，兩者會互相干擾 (請見下頁實驗 )

22

簡單實驗 ( 一 )

找一個自願者看到下一頁投影片中出現的文字時，依序念出這些字的顏色 (越快越好 )

結束時喊停其他同學幫忙計時

23

紙張家庭電腦書籍螢幕改變

簡單實驗 ( 二 )

用下一頁的投影片，重複一次實驗，比較與第一次實驗所花的時間。

25

黃色白色黑色藍色 紅色綠色

費茲定律 (Fitts’ Law)

公式定義如下 : T = a + b log2 (D/S + 1)

其中 T 為移動所需時間， D 是移動起點至目標物的距離， S 是目標物大小， a 和 b是兩個常數。•D/S 被看成是相對精確度 (relative

precision ) ，也就是移動所需時間由相對精確度來決定。

27

費茲定律 (Fitts’ Law) 的實驗

http://jareddonovan.com/programming/fitts_law/index.html

28

Fitts’ Law 的實例討論( 一 )

根據 Fitt’s law ，哪一個 menu選項較有效率 ?

29

TodaySundayMondayTuesday

WednesdayThursday

FridaySaturday

Pop-up Linear Menu Pop-up Pie Menu

Fitts’ Law 的實例討論 ( 二 )

Windows /Mac 作業系統的工作列，均放置在視窗的底部或側邊，何故 ?

因滑鼠 ( 或其他 pointing device)移到底部或側邊時就不能再移動，可以把 該target 視為無限延伸，即 Sinfinity

30

Perception 感知發生在同一感知處理循環 (Perceptual

Processor cycle) 的刺激會被融合成一個單一概念

舉例 : 電影的 frame rate 最低要多少，看起來才會有真實 (連續 ) 感 ?time for 1 frame < Tp (100 msec) -

> 10 frame/sec. (至少每秒 10 個畫格 )

31

知覺因果 (Perceptual Causality)

兩個不同的刺激可以被融合在一起，假設前個事件是觸發後者的原因前提是這兩個必須發在同一個 cycle ( 兩

個 事件發生時間不能距離太久 )

32

Perceptual Causality 實例解說

• 母球撞擊到紅球後，紅球至少要在多少時間內移動，才會被解讀成是白球造成紅球移動 ?

• 答案 : Tp (100 msec) 之內33

記憶階段理論 (Stage Theory)

Working memory 空間有限、衰減快透過 Maintenance rehearsal – rote

repetition 可以將內容從 WM 轉移到 LTM ，但是效果有限透過 Chunking / elaboration ，有組織化地將資訊轉移至 LTM ( 和已知的項目作連結，效果較佳 )

34

decay,displacement

decay?interference?

Working Memory

Sensory Image Store

Long Term Memory

decay

chunking / elaboration

maintenancerehearsal

Design UIs for Recognition over Recall

Recall ( 記憶 )– 必須記得指令，使用不便。Recognition( 辨識 )– 列舉選項，供使用者選擇– 使用者較容易根據過去經驗，進行項目的選擇。

35

Human Abilities 總結

顏色在人機介面設計中扮演重要角色，須注意 :– 顏色組合 ( 和諧色 )– 人類的視覺系統特性與限制– 色弱的使用者Model Human Processor– 包含 perceptual, motor, cognitive processors +

memory– MHP 模型協助我們作預測記憶 (Memory)– 三大類型 : sensor, WM, & LTM– 線索互相干擾時，存取 LTM 會變慢– WM 有正確的線索時，取得 LTM 資訊變得較容易。

36