Catalog

Guideline Catalog

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

781 records

Page 20 of 33

  1. Reuse the same styling and controls for charts with the same function

    For repeated chart use across an application or environment, use consistent styling, user settings, and interaction defaults on charts that perform the same function to improve accessibility and mitigate confusion for users with cognitive or memory impairments.

    • purpose:refine
    • basis:accessibility
    • quality:accessibility
    • lever:interaction-access
    • polish:consistency
    • +1

  2. Reuse the same visual encoding across related views

    For multi-view narrative comparisons, use semantically consistent encoding on related charts or maps to improve readability and mitigate reorientation when readers move between sections.

    • purpose:refine
    • basis:empirical
    • structure:multi-view
    • quality:readability:use
    • lever:encoding
    • +1

  3. Reveal different items one step at a time

    For ordered-time explanatory visuals, use staged reveals on dynamic displays to improve readability and address unordered scanning for viewers following an unfamiliar process.

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

  4. Review any non-zero y-axis before publishing

    For charts where readers should judge effect size without added emphasis, avoid non-zero y-axis baselines on bar and line charts to prevent exaggerated perceived effect size and address misleading severity judgments for readers interpreting how important a change feels.

    • purpose:refine
    • basis:empirical
    • chart:bar
    • chart:line
    • lever:scale-order
    • +2

  5. Review framing, emphasis, and layout for implied neutrality

    For communication about sensitive topics, avoid detached framing in emphasis and layout on a visualization to prevent misleading interpretation and mitigate obscured real-world impact for readers.

    • purpose:refine
    • basis:rhetorical
    • quality:fidelity
    • lever:layout-structure
    • communication:framing
    • +1

  6. Review the chart against all applicable accessibility standards

    For accessibility review of an implemented chart, use standards-based conformance checks on chart structure and interaction to improve assistive-technology compatibility and address unchecked standards failures for users of compliant assistive technologies.

    • purpose:refine
    • basis:accessibility
    • quality:accessibility
    • lever:interaction-access
    • communication:workflow

  7. Rewrite patient-facing visual text in lay language and at a low reading level

    For patient education and shared decision-making communication, use plain-language text annotation on patient-facing visual materials to improve readability and mitigate jargon-driven misunderstanding for readers with low health literacy.

    • purpose:refine
    • basis:empirical
    • quality:readability
    • lever:text-annotation
    • access:plain-language:use
    • +2

  8. Round awkward natural break thresholds with custom class breaks

    For legend reading on classed regional maps with awkward break values, use custom thresholds on choropleth color scales to improve readability and mitigate hard-to-read natural-break labels for readers consulting the legend.

    • purpose:refine
    • basis:heuristic
    • chart:choropleth
    • data:geospatial
    • quality:readability
    • +2

  9. Scale circle size by area, not radius

    For magnitude comparison, use area-proportional size encoding on circle-based charts to improve fidelity and mitigate exaggerated size differences for chart readers.

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

  10. Scope custom keyboard controls to the focused chart

    For interactive navigation in charts and dashboards, use focus-scoped custom keyboard controls on interactive chart elements to prevent assistive-technology command conflicts and mitigate keyboard traps for screen reader and keyboard-only users.

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

  11. Screen custom palettes with a colorblind simulator

    For custom color encoding, use colorblind simulation on chart images or screens to improve accessibility and mitigate unnoticed color collisions for readers with color-vision deficiency.

    • purpose:refine
    • basis:heuristic
    • quality:accessibility
    • lever:encoding
    • communication:workflow
    • +2

  12. Select uncertain values by contained probability, not by mean position

    For interactive exploration of uncertain multivariate data, use probability-based brushing on scatter and parallel plots to improve trust and address mistaken selection of low-confidence samples for viewers working with statistically modeled uncertainty.

    • purpose:refine
    • basis:empirical
    • chart:scatter
    • chart:parallel
    • lever:interaction-access
    • +2

  13. Separate added context from the plot area

    For explanatory reading of charts with simple core data plus extra background, prefer text hierarchy around the chart to improve readability and address competition between main and secondary information for readers who scan first and read details later.

    • purpose:refine
    • basis:heuristic
    • quality:readability
    • lever:text-annotation
    • communication:context
    • +1

  14. Separate baseline cases from treatment-added cases in risk pictographs

    For comparing treatment side effects against preexisting risk at a single time point, use separate visual encoding for baseline and incremental cases on a risk display to improve fidelity and mitigate the mistake of attributing the full treated-group risk to the treatment for patient decision-makers with low numeracy.

    • purpose:refine
    • basis:empirical
    • task:compare
    • time:timepoint
    • quality:fidelity
    • +3

  15. Separate categorical colors by both perception and name

    For categorical comparison in information visualizations, use large perceptual and color-name separation on categorical color encodings to improve readability and address color-confusion errors for viewers distinguishing categories.

    • purpose:refine
    • basis:empirical
    • task:compare
    • data:categorical
    • quality:readability
    • +3

  16. Separate encoded colors by lightness

    For color-coded charts and maps, prefer distinct color lightness on categorical marks to improve distinguishability and mitigate same-brightness color confusion for readers with color-vision deficiency.

    • purpose:refine
    • basis:heuristic
    • quality:accessibility
    • lever:encoding
    • channel:color-lightness:use
    • +3

  17. Separate evidence strength from the action threshold in categorical recommendations

    For action-threshold decisions, use annotations that distinguish evidence strength from the decision rule on categorical recommendations to improve trust and mitigate confusion about why the display recommends action or inaction for decision-makers.

    • purpose:refine
    • basis:empirical
    • quality:trust:use
    • lever:text-annotation
    • operator:uncertainty
    • +3

  18. Separate semantic groups with white space

    For analytic topic-understanding tasks, use white-space separation on grouped word-cloud layouts to improve aesthetics and mitigate cramped group boundaries for viewers judging both meaning and appeal.

    • purpose:refine
    • basis:empirical
    • chart:word-cloud
    • data:text
    • quality:aesthetics
    • +3

  19. Separate shape symbols across segmentability, compactness, and spikiness

    For rapid comparison in dense shape-encoded plots, prefer shape choices on categorical symbol sets that differ on segmentability, compactness, and spikiness to improve readability and mitigate confusion between visually similar symbols for viewers scanning many marks at once.

    • purpose:refine
    • basis:empirical
    • task:compare
    • data:categorical
    • quality:readability:use
    • +3

  20. Separate stacked components onto a common baseline

    For component comparison across grouped parts, use aligned component baselines on bar charts to improve judgment fidelity and mitigate nonaligned-segment comparisons for readers making quick visual estimates.

    • purpose:refine
    • basis:empirical
    • task:compare
    • scope:grouped-result
    • chart:bar
    • +3

  21. Separate threshold filters from top/bottom queries

    For record-list analysis of tabular data, use distinct interaction controls on an information visualization system to improve insight and address confusion between concrete conditions and relative rankings for analysts.

    • purpose:refine
    • basis:empirical
    • scope:record-list
    • data:tabular
    • quality:insight
    • +2

  22. Set BubbleView blur to hide detail without removing context

    For crowdsourced importance measurement on static images, use moderate blur on blurred image views to improve fidelity and mitigate missed regions caused by excessive loss of context in remote BubbleView studies.

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

  23. Set chart height to at least 80 pixels for 0-100 value comparisons

    For exact value comparison in static displays, use chart height of at least 80 pixels on bar and line charts with a 0-100 scale to improve fidelity and mitigate accuracy loss from undersized charts for web viewers.

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

  24. Set reference gridlines near 20% opacity

    For static charts with reference lines, use gridline opacity near 20% on the plotting area to improve readability and mitigate intrusive or imperceptible guides for web viewers.

    • purpose:refine
    • basis:empirical
    • quality:readability
    • lever:encoding
    • channel:opacity:use
    • +2