You are here
As UX designers, we have to work with data visualization for many tasks related to showing statistics, reporting and providing feedback. This requires an understanding of how to show complex data in a way that can be interpreted easily.My illustration
In my research, I have found a number of articles about different charts and diagram types to use for my daily projects. However, these resources often include complex or outdated methods and use an unnatural method of grouping.
In this article, I have organized diagram types based on the number of categories shown within each whilst moving away from unsuitable styles. Ultimately, I have found that there are 5â6 popular chart types used by modern UX designers.
BONUS: Check out the âEssential checklist for chart designâ at the bottom of thisÂ article!Step 1: Understand the size of yourÂ chart
Before you begin, itâs important to understand the size and dimensions that youâll be working within. Whether youâre creating an infographic or an interface, you must always know how much space you have available.
Since all modern web interfaces are responsive or adaptive, each dashboard element will also need a corresponding mobile size. Designers can use more complex and detailed charts, however, this should be avoided when working with a smallÂ area.Step 2: Select the number of categories you need toÂ display
Before proceeding, you have to answer the question: how many different categories will this graphÂ show?1 Category
Usually, graphs with only one category show how a variable changes over time, or they just display an amount or percentage to convey information.
- Todayâs value (eg. user balance, user rating, percent of todayâsÂ success)
- Change over time (eg. quantity changing over time, percentage of variable increasing/decreasing)
Graphs displaying two categories are used to illustrate a relationship between two variables. It could be categories from one group, such as the number of men/women, or show the percentage of todayâs sales against last Mondayâs.
- Group relations (eg. intersection of product A users and product BÂ users)
- Comparison (eg. the number of voters for the first and second candidates, your income vs best playerâsÂ income)
- Proportion (eg. your income vs overall income, sales of cosmetics vs overallÂ sales)
Diagrams featuring three or more categories are used to compare and present many different variables in one location.
- Ranking (eg. election results, incomes sorted by âgoodâ months, topÂ users)
- Comparison (eg. your income vs other player incomes, manager sales this year,Â budget)
- Correlation (eg. income and life expectancy)
The standard configuration for the label is a large number accompanied by an explanatory caption.Examples: boldbi.com / dashboardpack.comProgress DoughnutÂ chart
You should use a Progress Doughnut Chart if you want to show value in comparison to the maximum amount that can be achieved. This type of chart is a unique version of the Doughnut Chart for two variables: one for progress amount, and the other for 100% completion.Examples: tinypulse.com /boldbi.comChange overÂ timeLine/Area chart
A Line Chart consists of two axes and a line graph. The horizontal axis is most commonly used for time whilst the vertical axis displays theÂ value.
Normally, Line/Area Charts have a different purpose, but in this case of using it for just one variable, it can be united into one group. Using the area in this scenario is just a style decision.Examples: tinypulse.comHistogram/Density Plot
Histograms are very similar to Density Plots and they both show the same type of data. Histograms use columns distributed at equal intervals whilst a Density Plot has a continuous curvedÂ line.Examples: wikipedia / dashboardpack.comTimelines
Timelines are used to illustrate a group of events arranged by date. Timelines can be horizontal or vertical depending on the available space and designer decisions. Vertical timelines are used more frequently as they are mobile/scroll friendly.Examples: datavizcatalogue.com / dashboardpack.com2 CategoriesGroup RelationsVenn Diagram
A Venn Diagram is not a very popular way to show data in user interfaces, but it is commonly used for infographic design. They are best used to show overlapping areas or highlight if one group contains a larger amount thanÂ others.Examples: technologynetworks.com / datavizcatalogue.comHistogram/Density Plot
If you want to show more than one Histogram in one place, you can use a Density Plot. Designers use this kind of chart to show how two variables may intersect.Examples: r-graph-gallery.com / datavizcatalogue.comComparisonBar Chart
A Bar Chart is one of the most popular chart types for every dashboard. Use this type of chart to show the difference between two (or more) variables.Example: onlinestatbook.com / fusioncharts.comLine Chart
Another frequently used type of graph is the Line Chart. Line Graphs are used to display quantitative values over a changing x-axis amount. They are used to compare two values ââchanging overÂ time.Examples: boldbi.comArea chart
This diagram is used to compare two or more different data sets. Read this article for a great explanation between the differences between Line and AreaÂ Charts.Example: dashboardpack.comProportionPie/Doughnut Chart
The Pie Chart is one of the most popular ways to show the data. It is a circle divided into sectors that are proportionate to theirÂ values.
In my research, I also found that a Doughnut Chart is considered a special type of Pie Chart, rather than these being two different charts.Examples: outlier.ai / blogs.sas.comMany CategoriesTable
A Table is a great way of showing any data especially sets with a high amount of variables.Example: dashboardpack.comComparisonStandard BarÂ Chart
Standard Bar Charts show amounts for several categories of data and help evaluate how these values âârelate to each other. A Standard Bar Chart can be vertical or horizontal.Example: datavizcatalogue.com / www.tinypulse.comMultiset BarÂ Chart
This variation of a Bar Chart is used when two or more data series are plotted side-by-side and grouped together under categories, all on the sameÂ axis.Examples: dashboardpack.com / boldbi.comLine Graph
Similar to a Linear Graph for two variables, a Linear Graph for several categories show a change in value depending on a change in the x-axis value ââ(usually time). Curved lines and areas can also be applied to Line Diagrams.Examples: tinypulse.com/analytics.google.comCorrelation
All three of the diagrams from this category are rarely used in common practice for creating modern UX-dashboards or showing graphs in an app. This is because they are quite bulky and difficult to read when scaled. However, they are still worth considering because they are often used in analytical articles and are familiar to manyÂ users.Scatterplot
A Scatterplot Chart displays a large number of elements, each of which is defined by 2 variables. Two axes and many points are used forÂ this.
Using this chart, you can easily compare items with each other and identify those that differ from the mainÂ trend.Examples: dobermantalk.com / harvardsportsanalysis.orgBubble Chart
A Bubble Chart is Scatter Plot but one more variable (size), or two more variables (size and positivity/negativity). Size is shown based on the size of the dot, and the positive/negative factor is shown usingÂ color.Examples: flowingdata.com / researchgate.netMosaic Plot (Marimekko)
A Mosaic Plot is a diagram that uses two axes which are variables with a percentage scale. This determines both the width and height of each segment. It looks like a rectangle divided into many colorfulÂ pieces.Example: powerbi.microsoft.comProportionPie/Doughnut Chart
As discussed in the two categories example, a Pie/Doughnut Chart is a circle divided by segments with size proportionate amounts.Examples: material.io / developers.google.comStacked BarÂ Graph
Another modification for a Bar Chart is a Stacked Bar Graph. They are used to show how a larger category is divided into smaller categories and what the relationship of each part has on the totalÂ amount.Examples: dashboardpack.comMap
If we need to show some data related to geography, we can use a Map Chart withÂ colors.Example: datamatic.ioOther chats
I have moved the next group of charts into their own special group as they are not practical for interactive systems or they are considered very difficult to understand.
These graphics are presented in many well-known catalogs and resources for designers/developers, but they are not seen in user interfaces or even articles and infographic designs.
Most of them are also impossible to scale for mobile size, which makes their use in a modern application unsuitable.Tree Chart
A Tree Chart is used to show hierarchy and relationships between elements. The main problem of its use appears in the design for more than three levels. In an interactive system, you have to scroll both vertically and horizontally which can be an inconvenience. The second observation is that itâs difficult to work with headings in this type ofÂ diagram.Example: datavizcatalogue.comRadar Chart
The main disadvantage for a Radar Chart is that the axes represent wildly different scales since they are nominally independent.Example: datavizcatalogue.comChord Diagram
A Chord Diagramâs downfall is that there are multi-layered intersections that make it very difficult to read the chart. Another complication is that the graphic area takes up a lot of space because group signatures are arranged in a circle. This means it is difficult to move labels outside the diagram, unlike a simple pie chart where this is veryÂ easy.Example: amcharts.comParallel Sets (SankeyÂ Chart)
A Sankey Chart also has a problem with overlapping areas. The long width also creates an issue as users are forced to scroll horizontally.Example: www.anychart.comRadial BarÂ Charts
The main issue here is that the bar lengths cannot be easily recognized due to different radicands. Bars on the outside appear longer than others, even if they represent the sameÂ value.Example: datavizcatalogue.comSunburst
A Sunburst Chart features a number of rings divided by groups, which form sectors. This chart has problems with displaying titles in small sectors. Having different amounts in each sector also makes it difficult toÂ read.Example: anychart.comWhisker Plots
Whisker Plots are quite wild and whilst they can be easy to understand for experienced users, everyday users will struggle to comprehend the data without special explanation about the plot structure.Example: datavizcatalogue.comCandlestick Chart
This chart is similar in appearance to Whisker Plots, however, their use is completely different. Candlestick Charts are used as a trading tool to work with price movements, derivatives, currencies, stocks, bonds, commodities, etc. and they are used in very specific industries.Examples: datavizcatalogue.comMatrix Heatmap
Analyzing the data in a Matrix Heatmap via the table look-up method is generally not feasible since it is impossible to infer with sufficient accuracy the numerical value corresponding to a given color. Furthermore, the data is not clustered in a way that displaysÂ trends.Examples: datavizcatalogue.comConclusion
In this article, I didnât cover some popular charts such as the Flow Chart, Gantt Chart, Network Diagram, Time Table and Word Cloud because they serve for a different type of data (not numeric) and do not fit with my classification.
In my research, I have found that there are some types of diagrams which are used more often than others in modern user interfaces. These include Todayâs Value, Line Charts, Pie/Doughnut Charts and BarÂ Charts.
However, every chart should be considered, tailored and chosen specifically for your needs. Your data may even be best represented by a rare type ofÂ chart!
Please note: For some examples, I have used charts from infographics. This is due to a lack of examples in the publicÂ domain.BonusâââEssential checklist for chartÂ design
- If the chart has an axis, it should start atÂ zero
- Avoid mixing multiple chart types in oneÂ place
- Make sure the scale is respected
- Ensure readability of titles andÂ labels
- Make sure the chart looks good in responsive mode or provide a special state forÂ this
- Provide emptyÂ states
- Introduction to Designing Data VisualizationsâââPart 1
- Tables & Other ChartsâââData Visualization Part 2
- Tables & Other ChartsâââData Visualization Part 3
- Data Visualization 101: How to Choose the Right Chart or Graph for Your Data
- 10 rules for better dashboard design
- A Complete Guide to Area Charts
Thank you for reading my article. Please leave any comments, questions or feedback in the comments below and clap
Those new to user experience sometimes have difficulty detaching themselves from the designed object to develop a perspective on the user, their goals and problems, and the overall context of how the design fits into a larger scheme. When you make something, itâs natural enough to fixate on this thing youâve just made. If you design an app concept, youâre probably going to be very interested in your appâs features, how youâve laid out the user interface items, the colors youâve chosen, the kind of navigation employed (flat, hierarchical etc.), and soÂ on.
The design is tangible and present before you, and you know it inside and out, so itâs going to grab a lot of your attention. The user, however, is an intangible, and the userâs goals or problems you are addressing with the design are even more so. Users start out as assumptions and gradually become refined through the process of converting those assumptions into testable hypotheses. This conversion happens through developing personas for typical users and applying an appropriate user research method that will ultimately convert your best guesses into actionable design considerations.
But because the user (and their goals, problems and contexts) are somewhat abstract and are not tangibly present before you, students sometimes get stuck on making the conceptual move away from the solid thing in front of them thatâs easy to define. Getting a handle on this more conceptual realm of hypothetical people, their assumed goals and problems, and the imaginary context that has to eventually be converted into design choices that can be tested can be a source of frustration.
Thereâs an analogy that happens when teaching photography. As environmental psychologists like James J. Gibson have long pointed out, the nature of vision is to present us with information about objects. When we look at things, we see thingsâââand not the light falling onto them. You may not know James J. Gibson but you likely know his popularizerâââDonald Norman. Norman is best known for repackaging Gibsonâs ideas so now everyone thinks these are Normanâs ideas instead! Such is the nature of our short attention span epoch where people have little historical sense and tend to trust authoritative cheery grandpa types in YouTubeÂ videos.
In the larger scheme of environmental psychology (which is the real intellectual context for âthe design of everyday thingsâ), the senses all convey specific kinds of information about an environment. For instance, hearing provides information about events, and sight presents information about objects. So, when we look at things, we see things, i.e. objects, because thatâs what vision is supposed to do for us. Vision is not supposed to convey much information about the aesthetic qualities of light falling upon those objects, but that is what the art of photography is largely about (in addition to the art of composing rectangles around things!).
To become good at photography, you have to learn how to look past things, and see the light falling on those things, and imagine non-existent rectangles framing those things. Light qualities and invisible frames are intangibles, as they are not really concretely in front of you in the same way that things are, but ultimately, to be a good photographer, youâre going to need to regularly work with these intangibles that are not just the things your vision-related neurons habitually focus onÂ instead.
Just as with photography, where thereâs the thing that is naturally our main focus, and these more abstract intangibles such as the qualities of light and invisible frames, with design, you have to learn to see past the artifact that youâre making and conceptually grasp the intangibles. To extend the analogy, the qualities of light would be like the usersâ goals and problems, and the frame is the general social and cultural context of the design, e.g. home, school, work, mall, car, park, plane, forest,Â etc.
Defining your user more concretely is also refining your design more concretely. Typically your design is not for everyone, though itâs another common error those new to design makeâââthey think their design is for everyone! Almost nothing is designed for everyone, when you think about it, not even forks and door handles, carpets and shoe laces. The most mundane item you can think of will have its demographic or market segment particularities to it. If you try to design for everyone, you will end up with something no oneÂ likes.Ultimately, your user, their goals, the context, and your design, should align themselves into a coherent whole. ImageÂ SourceOtherwise, you end up with this! ImageÂ Source
When you look at a pickup, youâre not going to see Dale! And no minivan will have Marge standing next to it. But these âintangible ghost peopleâ are essential to the design in the same way that things needs good light and rectangles around them to make for great photographs. Luckily, weâll never see that weird vehicle you get when you try to make a car everyone willÂ drive.
When designing something, donât make that weird car, which is what youâll get if you think youâre designing âfor everyone.â Surround your design ideas with these invisible ghost people and give them names, problems in life, goals when using a particular design, and a context in which your design is being used. Eventually, these intangibles will feed directly into your tangible design and both will become part of an integrated designÂ process.https://medium.com/media/a7ecd953714a6022a3456ca263d5f43b/href
Learning UX #1 | The User is Everything Thatâs Not Your Design was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.