Text, Graphics, Symbols, and Codes Chapter 4. Text, Graphics, Symbols, and Codes Visual...

Text, Graphics,Text, Graphics,Symbols, and CodesSymbols, and Codes

Chapter 4Chapter 4

Text, Graphics,Text, Graphics,Symbols, and CodesSymbols, and Codes

Visual Capabilities Visual Capabilities Hardcopy Hardcopy VDT Screens VDT Screens Graphic Representation Graphic Representation Symbols Symbols Codes Codes

Visual CapabilitiesVisual Capabilities

AccommodationAccommodation

Visual AcuityVisual Acuity

Contrast SensitivityContrast Sensitivity

Factors Affecting Visual Acuity and Contrast Factors Affecting Visual Acuity and Contrast SensitivitySensitivity

AdaptationAdaptation

Color DiscriminationColor Discrimination

ReadingReading

PerceptionPerception


AccommodationAccommodation• Near point, Far pointNear point, Far point

• Diopters (D)=1/distance(m)Diopters (D)=1/distance(m)

• Dark focus: about at arm’s length (1m or 1D)Dark focus: about at arm’s length (1m or 1D)


Visual Acuity: Visual Acuity: Discriminate fine detailDiscriminate fine detail

• Minimum separable acuity Minimum separable acuity Fig 4-2Fig 4-2

Visual angle (VA): VA (minutes) = 3438Visual angle (VA): VA (minutes) = 3438××H/D; H/D; Fig 4-3Fig 4-3

Acuity = 1 / VA (min)Acuity = 1 / VA (min)

• Other types of acuity: Other types of acuity:

Vernier acuityVernier acuity

Minimum perceptible acuity: detect dot from backgroundMinimum perceptible acuity: detect dot from background

Stereoscopic acuityStereoscopic acuity


Contrast SensitivityContrast Sensitivity• Spatial frequency Spatial frequency Fig 4-2Fig 4-2 4-44-4 fig fig

• Modulation contrastModulation contrast C= (LC= (Lmaxmax －－ LLminmin) / (L) / (Lmaxmax ＋＋ LLminmin) )

• Threshold contrast, Contrast sensitivity Threshold contrast, Contrast sensitivity Fig 4-5Fig 4-5


Factors Affecting Visual Factors Affecting Visual AcuityAcuity and Contrast and Contrast SensitSensitivityivity• Luminance level: Luminance level: cone vs. rodcone vs. rod

• Contrast: Contrast: contrastcontrast acuity acuity Modulation contrastModulation contrast Luminous contrast = (LLuminous contrast = (Lmaxmax －－ LLminmin) / L) / Lmaxmax

Contrast (or luminance) ratio = LContrast (or luminance) ratio = Lmaxmax / / LLminmin

• Exposure time: Exposure time: improve up to 100-200msimprove up to 100-200ms

• Target motion: Target motion: dynamic visual acuitydynamic visual acuity

• Age Age

• TrainingTraining

HardcopyHardcopy

CriterionCriterion TypographyTypography （印刷體裁）（印刷體裁）

HardcopyHardcopy －－ CriterionCriterion

VisibilityVisibility LegibilityLegibility ：：易識別易識別 DiscriminabilityDiscriminability ReadabilityReadability ：： Recognition of the information content Recognition of the information content

of material of material

(meaningful groupings: words, sentences, text…)(meaningful groupings: words, sentences, text…)

HardcopyHardcopy －－ TypographyTypography

何時需設計較佳的何時需設計較佳的 TypographyTypography ：： Viewing ConditionsViewing Conditions ：： unfavorableunfavorable

InformationInformation ：： importantimportant

criticalcritical

Distant ViewingDistant Viewing

Poor Vision (People) Poor Vision (People)


Stroke Width Stroke Width (stroke width – to – height ratio)(stroke width – to – height ratio)

Fig 4-6Fig 4-6 4-74-7

• Normal: Normal: 白底黑字白底黑字 1:6 – 1:81:6 – 1:8 　　黑底白字黑底白字 1:8 – 1:101:8 – 1:10

• Illumination: lowIllumination: low→ thick→ thick

• Contrast: low→ thickContrast: low→ thick

• Highly luminous letter: thin 1:12 – 1:20Highly luminous letter: thin 1:12 – 1:20

• 黑字黑字 on on 亮背景亮背景 : very thick: very thick


Width-to-Height Ratio Width-to-Height Ratio Fig 4-8Fig 4-8

Styles of Type Styles of Type Tab 4-1Tab 4-1

• 一般一般 : Roman: Roman

• 斜體斜體 (Italics): (Italics): 特殊用法特殊用法 or or 重要者重要者• 粗體粗體 (Bold): (Bold): 重點重點


SizeSize• Points: 1-pt = 1/72in (0.35mm) Points: 1-pt = 1/72in (0.35mm) (p.106)(p.106) • For Close-up ReadingFor Close-up Reading

一般一般 : 9 – 11 pt: 9 – 11 pt Luminance, Importance Luminance, Importance Tab 4-2Tab 4-2

• For Distance ReadingFor Distance Reading Subtend same visual angleSubtend same visual angle公式公式 (p.107) (p.107) Tab 4-3Tab 4-3


CaseCase• 小寫小寫 : : 易讀易讀 (( 因因 envelop, e.g. pie, big, pienvelop, e.g. pie, big, pi

g)g)

• Search for particular labelSearch for particular label ““ 開頭字母”重要，宜特大開頭字母”重要，宜特大 (e.g.) (e.g.) CCase vs. Case; ase vs. Case; CCASE vs. CASEASE vs. CASE

Layout Layout Fig 4-9Fig 4-9

• Interletter spacingInterletter spacing （字距）（字距）• Interline spacingInterline spacing （行距）（行距）


Reading EaseReading Ease• Type of SentenceType of Sentence （句型）（句型） Simple, Affirmative, ActiveSimple, Affirmative, Active

• Order of WordsOrder of Words Match the order of actionMatch the order of action

• Index of Readability Index of Readability Tab 4-4Tab 4-4

Score = Score = 206.835206.835 －－ (0.846× S) (0.846× S) －－ (1.015× W)(1.015× W)

S: syllables of 100 wordsS: syllables of 100 words

W: no. of words per sentenceW: no. of words per sentence

VDT ScreensVDT Screens

基本性質基本性質 TypographyTypography Reading DistanceReading Distance

• 20 in (45cm)20 in (45cm)• Eye-to-screen=Eye-to-keyboard (Accommodation)Eye-to-screen=Eye-to-keyboard (Accommodation)

SizeSize Hardware ConsiderationsHardware Considerations

• PolarityPolarity• Color Color

Screen Design IssuesScreen Design Issues

VDT ScreensVDT Screens Screen Design IssuesScreen Design Issues

• Density Density Fig 4-11Fig 4-11

Global density: mean=25% Global density: mean=25% (600 data screens)(600 data screens)

Local densityLocal density the no. of filled character spaces near other charactersthe no. of filled character spaces near other characters

DensityDensity↑↑→ Performance→ Performance↓↓

Reduce density: Reduce density: Abbreviation, Avoid unnecessary information,Abbreviation, Avoid unnecessary information, Concise wordingConcise wording （簡潔）（簡潔） , Tabular format, Tabular format

VDT ScreensVDT Screens

• GroupingGrouping

Size of the groupsSize of the groups ＜＜ 55º (VA): No. º (VA): No. 愈少愈好愈少愈好 Size of the groupsSize of the groups ＞＞ 55ºº：： Size Size 愈小愈好愈小愈好

• ComplexityComplexity

Tullis (1983)Tullis (1983) Arrangement (layout) complexity:Arrangement (layout) complexity: The extent of The extent of arrangementarrangement follows a follows a predictablepredictable visual scheme visual scheme

Columnar arrangement Columnar arrangement Fig 4-12Fig 4-12

• Highlighting / Highlighting / BlinkingBlinking (end)(end)

Graphic RepresentationGraphic Representation Of TextOf Text

• 不受限於語言不受限於語言• Instruction, Procedure manualInstruction, Procedure manual

• Combine Pictorial & textCombine Pictorial & text Pictorial: speed; Text: accuracyPictorial: speed; Text: accuracy

Of DataOf Data• Pie chart, Bar chart, Line chartPie chart, Bar chart, Line chart

• 2-D, 3-D 2-D, 3-D Fig 4-13Fig 4-13

• Distortion: Distortion: Fig 4-14Fig 4-14

• Guideline: correct perception↑Guideline: correct perception↑

SymbolsSymbols

Symbolic vs. Verbal Signs Symbolic vs. Verbal Signs Fig 4-15Fig 4-15

Objectives of Symbolic Coding SystemsObjectives of Symbolic Coding Systems• Best Represent their Referent: depend on strength of Best Represent their Referent: depend on strength of assass

ociationociation of a of a symbolsymbol with its with its referentreferent

• Guideline: Guideline: Detectability, Discriminability, Compatibility, MeaningfuDetectability, Discriminability, Compatibility, Meaningfu

lness, Standardization lness, Standardization

Criteria for Selecting Coding SymbolsCriteria for Selecting Coding Symbols• RecognitionRecognition

• MatchingMatching

• Preference & OpinionsPreference & Opinions

SymbolsSymbols

Example of StudiesExample of Studies• Mandatory-Action Symbols Mandatory-Action Symbols Fig 4-16Fig 4-16

Original test, Second testOriginal test, Second test

Recognition Recognition 佳佳 Subjects:Subjects: 初臨澳洲的越南人初臨澳洲的越南人 (different culture)(different culture)

• Exit Symbols Exit Symbols Fig 4-17Fig 4-17

Filled Filled

Background: Background: 方方＞＞圓圓 Simplified figureSimplified figure

SymbolsSymbols

Perceptual Principles Perceptual Principles Fig 4-18Fig 4-18

• Figure/GroundFigure/Ground

• Figure boundaryFigure boundary

• ClosureClosure

• SimplicitySimplicity

• UnityUnity StandardizationStandardization

• International road signs International road signs Fig 4-19Fig 4-19

(end)(end)

CodesCodes

Referents: the items to be codedReferents: the items to be codedCoding dimensions: types of visual sti. usedCoding dimensions: types of visual sti. used

Single Coding DimensionsSingle Coding Dimensions Color Color 最佳最佳 (?)(?) 　　 Fig 4-20 4-21 Tab 4-5Fig 4-20 4-21 Tab 4-5

Color Coding (surface color)Color Coding (surface color) Hue: 9Hue: 9 Hue+Saturation+Brightness: 24Hue+Saturation+Brightness: 24 Visual search Visual search 佳佳 Meaning?Meaning?

Multidimensional Code Multidimensional Code Fig 4-22Fig 4-22

Text, Graphics, Symbols, and Codes Chapter 4. Text, Graphics, Symbols, and Codes Visual...

Documents

Transcript of Text, Graphics, Symbols, and Codes Chapter 4. Text, Graphics, Symbols, and Codes Visual...