CCT 370: Introduction to Computer Visualization

CCT 370: Introduction to Computer Visualization Lecture 6: Designing Effective Visualizations CCT 370

Today in Lecture • Review Assignment #1. • Designing effective visualizations. • Five new heuristics. CCT 370

Assignment #1 • Well done overall! CCT 370

Assignment #1 • Assignments will be returned in Lab. • Average: 70% • High: 90% / Low: 47% • A+ (1) • A (2) • A- (2) • B+ (6) • B (19) • B- (27) • C+ (16) • C (6) • C- (2) • D (0) • F (1) CCT 370

Next Week • Katsuhiko Onishi (OECU) • Department of Computer Science. • Computer visualization and robots. • Toshihiko Hirose (OECU) • Department of Digital Games. • Student work in computer graphics at OECU. CCT 370

Assignment #2 • Should have a group by now. • See wiki if you don’t. • 13 groups in tutorial #1 – impossible. • Extra week for field proposals. • Now due March 17. CCT 370

Designing Effective Visualizations • Treat information spaces as environments. • Why? • Because it allows for knowledge and skills transfer. CCT 370

Designing Effective Visualizations • Treat information spaces as environments. • How? • Establish visual hierarchies. • Encourage pre-attentive processing. • Highlight important information. • Use groups and alignment to direct visual flow. • Follow principles of cognitive mapping. CCT 370

Effective Visualization Design • Establish visual hierarchies: • Most important content should stand out most; least important content should stand out least. CCT 370

Visual Hierarchies • Methods? • Emphasize spatial conventions. • Use typography. • Use contrasting colors. CCT 370

Effective Visualization Design • Encourage pre-attentive processing: • Allow users to identify and understand information ‘at a glance’. CCT 370

Pre-attentive Processing CCT 370

Effective Visualization Design • Highlight important information. • Use addition rather than subtraction. • 5 methods. • Luminescence • Texture • Shading • Semantic Depth of Field • Symbol Sets CCT 370

Effective Visualization Design • Use grouping and alignment to direct visual flow. • Implement divides that create perceived breaks in continuity. • This allows users to both associate and differentiate content. • Mapping analog: think of them as ‘districts’. CCT 370

Effective Visualization Design • Use grouping and alignment to direct visual flow. • Implement divides that create perceived breaks in continuity. • This allows users to both associate and differentiate content. • Mapping analog: think of them as ‘districts’. • 5 methods. CCT 370

Effective Visualization Design • 5 methods of grouping and alignment: • Similarity. • Continuity. • Closure. • Color. CCT 370

Principles of Cognitive Mapping • Provide paths along which people can regularly move. CCT 370

Pathing CCT 370

Pathing • Provide clear points of entry. • Restrict available paths. • Use modal panels where critical. • Provide ‘landmarks’. CCT 370

Designing Effective Navigation • Leave breadcrumbs. • Map complex sequences. • Include an escape hatch. CCT 370

Ineffective Navigation • Spatial metaphors gone wild. • ‘Mystery meat’ navigation. • Commuting at its worst. CCT 370

CCT 370: Introduction to Computer Visualization