Skip to content

Quiz: Advanced Visualization and Design Principles

Test your understanding of Gestalt principles, accessibility, visual encoding, and advanced interaction patterns.

1. What is visual encoding in data visualization?

  1. Converting visual files to a different image format
  2. The process of mapping data values to visual properties like position, length, color, and size to represent information graphically
  3. Encrypting visual content to prevent unauthorized copying
  4. Writing alt text descriptions for images to support screen readers
Show Answer

The correct answer is B. Visual encoding is the process of mapping data values to visual properties (also called visual channels) such as position, length, area, color hue, color saturation, and size. Effective visual encoding choices make data patterns immediately perceptible — for example, using bar height to represent quantity leverages the eye's strong ability to compare lengths.

Concept Tested: Visual Encoding

2. What are the four Gestalt principles covered in this chapter?

  1. Balance, rhythm, harmony, and unity
  2. Proximity, contrast, alignment, and repetition
  3. Hue, saturation, brightness, and opacity
  4. Serif, sans-serif, monospace, and display
Show Answer

The correct answer is B. The four Gestalt principles are: Proximity (elements near each other are perceived as related), Contrast (differences in size, color, or shape draw attention), Alignment (elements arranged along common axes create visual order), and Repetition (consistent use of visual elements creates unity and predictability). These principles guide effective infographic layout.

Concept Tested: Gestalt Principles

  1. Use the same color for all related regions regardless of position
  2. Place related elements close together and separate unrelated elements with whitespace
  3. Add labels to every region explaining its group membership
  4. Connect related regions with visible lines or arrows
Show Answer

The correct answer is B. The proximity principle states that elements placed near each other are perceived as belonging together. In interactive infographics, grouping related regions physically close and separating unrelated groups with whitespace creates an intuitive visual structure that helps learners understand relationships without explicit labels or connecting lines.

Concept Tested: Proximity Principle

4. What is the purpose of ARIA attributes in interactive infographics?

  1. Defining animation timing and easing functions
  2. Providing accessibility information to assistive technologies like screen readers so that interactive content is usable by people with disabilities
  3. Specifying the geographic coordinates for map-based infographics
  4. Setting the aspect ratio of the infographic canvas
Show Answer

The correct answer is B. ARIA (Accessible Rich Internet Applications) attributes provide semantic information to assistive technologies like screen readers. They describe the role, state, and properties of interactive elements — for example, indicating that a region is clickable, what its label is, and whether it is currently selected — making infographics accessible to users with visual impairments.

Concept Tested: ARIA Attribute

5. What is scrollytelling as an interaction pattern?

  1. A technique for scrolling through a list of stories in a feed
  2. A narrative technique where the visualization changes or reveals new content as the user scrolls down the page, creating a guided story experience
  3. A scrollbar design pattern that shows a story's progress
  4. An accessibility feature that reads content aloud as the user scrolls
Show Answer

The correct answer is B. Scrollytelling is a narrative interaction pattern where visual elements change, animate, or reveal new content in response to the user's scroll position. This creates a guided story experience that combines the passive comfort of scrolling with the active engagement of interactive visualization. It is particularly effective for data journalism and step-by-step explanations.

Concept Tested: Scrollytelling

6. What is the drill-down interaction pattern?

  1. A pattern for repeatedly testing the same quiz question until the student answers correctly
  2. A pattern where clicking on an element reveals a deeper layer of detail, allowing progressive exploration from overview to specifics
  3. A security pattern that requires multiple authentication steps
  4. A debugging technique for finding deeply nested errors in code
Show Answer

The correct answer is B. The drill-down pattern allows users to click on a high-level element to reveal progressively deeper layers of detail. For example, clicking a continent on a world map reveals countries, clicking a country reveals regions, and clicking a region reveals local data. This enables exploration from overview to specifics without overwhelming the initial view.

Concept Tested: Drill Down

7. What is keyboard navigation and why does it matter for interactive infographics?

  1. Using keyboard shortcuts to write code faster in a text editor
  2. Enabling users to navigate and interact with infographic elements using the Tab key and Enter key, ensuring accessibility for users who cannot use a mouse
  3. A technique for typing coordinates to position overlay regions precisely
  4. A keyboard layout specifically designed for data visualization tasks
Show Answer

The correct answer is B. Keyboard navigation allows users to move focus between interactive elements using the Tab key and activate them with Enter or Space. This is essential for accessibility — users with motor impairments who cannot use a mouse, and screen reader users, must be able to navigate and interact with all infographic features through the keyboard alone.

Concept Tested: Keyboard Navigation, Tab Order

8. What is the difference between a before-after diagram and a side-by-side comparison?

  1. There is no difference — they are the same visualization
  2. A before-after diagram shows temporal change in the same subject, while a side-by-side comparison shows two different subjects at the same point in time
  3. A before-after diagram uses animation while a side-by-side comparison is always static
  4. A before-after diagram is for photographs while a side-by-side comparison is for data charts
Show Answer

The correct answer is B. A before-after diagram shows the same subject at two different points in time, emphasizing change or transformation (e.g., a website before and after redesign). A side-by-side comparison places two different subjects next to each other to highlight similarities and differences at the same point in time (e.g., comparing two competing products).

Concept Tested: Before-After Diagram, Side-by-Side Comparison

9. A designer creates an infographic where all the labels, colors, and hover behaviors are inconsistent across different sections. Which Gestalt principle is being violated?

  1. Proximity principle
  2. Alignment principle
  3. Contrast principle
  4. Repetition principle
Show Answer

The correct answer is D. The repetition principle states that consistent use of visual elements (colors, fonts, shapes, interaction patterns) across an infographic creates unity and predictability. When labels, colors, and hover behaviors are inconsistent, users cannot build reliable expectations about how the infographic works, increasing cognitive load and confusion.

Concept Tested: Repetition Principle

10. What is a legend in data visualization design?

  1. A historical story about how the visualization technique was invented
  2. A visual key that maps colors, shapes, or symbols to their meanings, enabling readers to decode the visual encoding
  3. A copyright notice displayed at the bottom of the visualization
  4. A text box that displays the data source and attribution
Show Answer

The correct answer is B. A legend is a visual key that maps the colors, shapes, sizes, or symbols used in a visualization to their meanings. Effective legend design places the legend near the data it explains (spatial contiguity), uses the same visual encoding as the chart, and avoids forcing readers to memorize mappings by keeping the legend always visible.

Concept Tested: Legend Design