Catalog

Guideline Catalog

Browse visualization guideline records with sections, labels, and references.

781 records

Page 13 of 33

  1. Limit the number of category colors

    For color-coded charts with many groups, avoid large hue counts on encoded marks to improve accessibility and mitigate reader dropout for people with color-vision deficiency.

    • purpose:refine
    • basis:heuristic
    • quality:accessibility
    • lever:encoding
    • group-cardinality:many
    • +2

  2. Link the color key to hover interactions when many colors are shown

    For interactive visualizations with many colors, use hover-linked legend interaction on color keys to improve readability and mitigate search across many categories or value ranges for readers exploring the display.

    • purpose:refine
    • basis:heuristic
    • quality:readability:use
    • lever:interaction-access
    • component:legend:use
    • +2

  3. Lower opacity on lower-priority categories when each category needs its own hue

    For overview comparison in charts with a few distinguishable categories, use lower opacity on lower-priority category colors to improve hierarchy and address the loss of category identity caused by giving every background mark the same color for readers comparing several groups.

    • purpose:refine
    • basis:heuristic
    • quality:insight
    • lever:encoding
    • group-cardinality:few
    • +3

  4. Make chart layouts reflow under zoom

    For zoomed reading and interaction, use reflow-capable layout behavior on chart space and chart elements to improve accessibility and mitigate content cutoff and two-direction scrolling for people who zoom content or use assistive technology.

    • purpose:refine
    • basis:accessibility
    • quality:accessibility
    • lever:layout-structure
    • access:zoom:use
    • +1

  5. Make customized chart state easy to share and reproduce

    For distributing results from exploratory interaction, use shareable saved state on interactive charts and dashboards to improve accessibility and mitigate manual reconstruction or screenshot-only sharing for analysts sharing customized views with others.

    • purpose:refine
    • basis:accessibility
    • task:distribute
    • quality:accessibility
    • lever:interaction-access
    • +2

  6. Make independent y-axis scales explicit in small multiples

    For small-multiple line charts with independent panel scales, prefer explicit scale signaling on the axes and chart description to prevent false cross-panel magnitude comparisons and address shared-scale assumptions for readers scanning multiple panels.

    • purpose:refine
    • basis:heuristic
    • structure:small-multiples
    • quality:fidelity
    • lever:scale-order
    • +2

  7. Make keyboard focus indicators visible on chart controls

    For keyboard navigation in interactive charts, use a visible, high-contrast focus indicator on each focusable control to improve accessibility and mitigate missing, obscured, or too-thin focus states for keyboard-only users.

    • purpose:refine
    • basis:accessibility
    • quality:accessibility
    • lever:interaction-access
    • needs:keyboard-only
    • +3

  8. Make less certain point symbols fuzzier

    For ordinal uncertainty reading on discrete point-symbol displays, use fuzziness on the symbol mark to improve readability and mitigate reversed certain-to-uncertain interpretation in simple non-interactive displays.

    • purpose:refine
    • basis:empirical
    • data:ordinal
    • operator:uncertainty
    • lever:encoding
    • +1

  9. Make palette colors distinguishable for color vision deficiency

    For charts where color differentiates values or categories, use lightness differences in the palette and check color distinguishability to improve accessibility and mitigate color confusion for readers with color vision deficiency.

    • purpose:refine
    • basis:heuristic
    • quality:accessibility
    • lever:encoding
    • needs:color-vision-deficiency
    • +1

  10. Make shuffled AUC the primary comparison panel

    For grouped-result comparisons of fixation-prediction models, use shuffled-AUC-first layout on multi-view benchmark panels to improve fidelity and mitigate center-bias and border-driven misreading for analysts.

    • purpose:refine
    • basis:empirical
    • scope:grouped-result
    • structure:multi-view
    • quality:fidelity:use
    • +2

  11. Make task-relevant features more visually salient than competing elements

    For decision tasks with competing visual cues, use salient encoding on the task-relevant layer in a visualization to improve fidelity and mitigate missed or overweighted information for viewers interpreting complex displays.

    • purpose:refine
    • basis:empirical
    • quality:fidelity:use
    • lever:encoding
    • polish:focus

  12. Make the effect of a complex action visible

    For ordered-time explanatory animations, use explicit state-change cues on dynamic process displays to improve fidelity and address ambiguous action meaning for viewers learning cause-and-effect steps.

    • purpose:refine
    • basis:empirical
    • time:ordered-time
    • temporal-pattern:dynamic
    • quality:fidelity:use
    • +1

  13. Make unequal numeric ranges visible in the color key

    For exact and lookup reading in quantitative color keys, use legend segment sizing and endpoint labeling on non-linear or uneven diverging scales to improve fidelity and mitigate false assumptions of equal ranges for readers interpreting magnitude.

    • purpose:refine
    • basis:heuristic
    • data:quantitative
    • quality:fidelity
    • lever:encoding
    • +2

  14. Manually refine semantic color assignments for concrete categories

    For category comparison tasks, prefer manual refinement of semantically-resonant hue assignments on bar charts with concrete categorical values to improve readability and address weaker automatic matches for categories with strong natural colors for readers doing quick chart readouts.

    • purpose:refine
    • basis:empirical
    • task:compare
    • chart:bar
    • quality:readability
    • +3

  15. Map color to the variable that position does not already encode

    For choosing a color encoding in an already-positioned chart, use color on the variable not already mapped to position to improve readability and mitigate redundant encoding for readers matching marks to data.

    • purpose:refine
    • basis:heuristic
    • quality:readability
    • lever:encoding
    • aesthetic:color:use

  16. Map larger quantities to darker colors when the colormap does not appear to vary in opacity

    For quantitative comparison in colormap reading, use dark-more scale order on sequential colormap encodings that do not appear to vary in opacity to improve reading speed and mitigate background-driven misinterpretation for viewers interpreting magnitude from color.

    • purpose:refine
    • basis:empirical
    • quality:readability:use
    • lever:scale-order
    • channel:color-lightness:use
    • +1

  17. Map larger values to darker colors when the colormap does not appear to vary in opacity

    For aggregate comparison, use dark-more scale order on quantitative colormap views to improve interpretation speed and mitigate background-driven ambiguity for viewers reading with a legend.

    • purpose:refine
    • basis:empirical
    • task:compare
    • data:quantitative
    • quality:readability:use
    • +2

  18. Map larger values to lighter colors when an opacity-varying colormap sits on a dark background

    For aggregate comparison, use light-more scale order on quantitative colormap views on dark backgrounds to improve interpretation speed and mitigate conflicts between darkness and opacity cues for viewers reading with a legend.

    • purpose:refine
    • basis:empirical
    • task:compare
    • data:quantitative
    • quality:readability:use
    • +2

  19. Map low values to light colors and high values to dark colors

    For magnitude encoding with sequential color scales, use light-to-dark ordering on the palette to improve fidelity and mitigate reversed value interpretation for readers.

    • purpose:refine
    • basis:heuristic
    • data:quantitative
    • quality:fidelity
    • lever:scale-order
    • +2

  20. Map numerical values to spatial position when accurate reading matters

    For compare tasks on quantitative charts, prefer spatial position encoding to improve fidelity and mitigate inaccurate magnitude decoding from angle, area, volume, and color saturation for readers interpreting numbers.

    • purpose:refine
    • basis:empirical
    • task:compare
    • data:quantitative
    • quality:fidelity
    • +3

  21. Mark a stable top or front anchor when readers must mentally rotate a structure

    For mental-rotation tasks on multi-part object diagrams, use a persistent top or front marker on the object to improve fidelity and mitigate ambiguous rotation framing for readers interpreting rotated structures.

    • purpose:refine
    • basis:empirical
    • quality:fidelity
    • lever:encoding
    • component:annotation:use
    • +1

  22. Mask prior-response summaries during initial visual judgments

    For individual graphical perception tasks in social visualization systems, avoid prior-response annotations on chart views to prevent judgment error and mitigate biased information cascades for viewers making objective estimates.

    • purpose:refine
    • basis:empirical
    • quality:fidelity
    • lever:interaction-access
    • component:annotation:avoid

  23. Match category color salience to category importance

    For categorical comparison across peer groups, use category colors with roughly equal visual importance on charts and maps to improve fidelity and mitigate accidental hierarchy for readers scanning multiple categories.

    • purpose:refine
    • basis:heuristic
    • data:categorical
    • quality:fidelity
    • lever:encoding
    • +2

  24. Match chart control semantics to actual behavior

    For accessibility review of web charts, use semantically valid document elements and roles on interactive chart elements to improve accessibility and mitigate mislabeled controls for screen-reader users.

    • purpose:refine
    • basis:accessibility
    • quality:accessibility
    • lever:interaction-access
    • needs:screen-reader
    • +1