UX tips: charts

Continuing our series about UX tips for small areas we take a look at charts this time.

• always label your axis – this one should be obvious the reader needs to know at what data he looks
• use units – is this meter or yards, data can only be understood if the scale is clear
• use distinctive colors – different data, different color, and don’t forget the color blind
• use color with purpose – same data, same color, e.g. having different values of the same source should use the same color or tint of color
• for bar charts always start at zero – the distortion often used for exaggerating differences is immense
• leave out decoration – decoration distracts from the data
• no 3d effect – data speaks for itself, please do not try to make it prettier
• use them for lots of data – if you just have a few numbers a table of data might be more appropriate
• use a title – what aspect or slice of data are you showing me, a summary helps to understand perspective and intention
• use a big enough font – this and the appropriate contrast should be obvious for all UI work
• label tick marks – use them at meaningful intervals, do not just slice the axis into equidistant intervals
• include time – even if it isn’t a time series chart, tell the reader from when the data is
• size 2d shapes by area – do not use diameter or radius for sizing 2d shapes (circles, bubbles…), unless you use bar charts (where the length is compared) the proportion gets way out of hand
• use consistent rounding – first round your numbers and do this consistently
• for comparisons use the same scale – do not distort your data by presenting it at different scale