Skip to content
Design Academy My progress

Stage 12 · Lesson 7 of 12

Data visualisation

Choosing charts, encoding data and avoiding misleading graphics.

  • Advanced
  • 1 h
  • 3 check questions
  • Exercise: 45 min

By the end of this lesson you can

  • Choose chart types that suit the question being asked.
  • Encode data accurately with position, length and colour.
  • Avoid misleading graphics and make charts accessible.

The idea

Data visualisation turns numbers into something people can understand at a glance. Good charts start from a question, not from the data.

Choosing a chart

  • Compare categories: bar chart.
  • Change over time: line chart.
  • Part of a whole: stacked bar, or a pie with very few slices.
  • Relationship: scatter plot.
  • Distribution: histogram or box plot.
  • A single key number: a large figure with comparison.

Encoding

People judge position and length most accurately, angle and area less so, and colour intensity least. Use colour to highlight and group, not as the only way to read values.

Avoid misleading charts

Start bar chart axes at zero, avoid 3D effects, keep scales consistent and label units. Do not cherry-pick time ranges.

Clarity and accessibility

Use a clear title that states the takeaway, direct labels instead of distant legends, sufficient contrast, patterns or labels in addition to colour, and a text summary or data table for screen reader users.

Why it matters in real projects

Charts shape decisions. A misleading or confusing chart can lead to bad choices, while a clear one makes insights obvious. Designers increasingly work on dashboards, reports and data products, so visualisation skills are valuable. Accessible charts make sure everyone can use the information.

A realistic example

A report shows monthly sign-ups as a 3D pie chart with twelve slices. Nobody can compare months. The redesign uses a line chart titled "Sign-ups grew steadily, with a spike after the March campaign", with the March point labelled directly and a data table available below. Readers understand the trend immediately.

Step by step

  1. State the question

    Write what the chart should answer.

  2. Choose the chart

    Match the chart type to the question.

  3. Encode carefully

    Use position and length for key values.

  4. Check honesty

    Check axes, scales and ranges.

  5. Write a takeaway title

    State the main insight.

  6. Make it accessible

    Add contrast, direct labels and a text alternative.

Common mistakes

  • Mistake 3D and decorative charts.

    Instead Use flat, simple charts.

  • Mistake Truncated bar chart axes.

    Instead Start bars at zero.

  • Mistake Colour as the only encoding.

    Instead Add labels or patterns.

Check your understanding

Choose an answer, then check it. There is an explanation either way.

Question 1 of 3Which chart is best for change over time?
Show answer

Line chart. Lines show trends.

Question 2 of 3Which encoding do people judge most accurately?
Show answer

Position. Position and length are most accurate.

Question 3 of 3Why add a text alternative?
Show answer

So screen reader users can access the data. Accessibility.

Practice exercise

Exercise · about 45 min

Chart makeover

Redesign a poor chart.

Steps

  1. Find a confusing or misleading chart.
  2. Write the question it should answer.
  3. Redesign it with a better chart type and takeaway title.
  4. Add an accessible text summary.

Deliverable

Before-and-after charts with explanation.

Self-assessment

Tick each item when it is true of your exercise. Be honest; this is for you.

4 items

Summary

  • Start from the question.
  • Match chart type to the task.
  • Encode with position and length; avoid misleading tricks.
  • Use takeaway titles and accessible alternatives.

Further reading

Third-party sources, chosen for reliability. They open in a new tab.

Your notes

Marking complete updates your course and roadmap progress.

Back to Advanced and specialised topics Roadmap

PreviousService design Next lessonMotion and interaction design