Design Checklist for the Perfect Charts Development

Many applications use charts to simplify the perception of numeric information for a user. It is a straightforward and user-friendly solution. Nowadays we can not imagine any monitoring, health or trade application without this graphic element. Designers adore charts too. There is so much space for creativity and self-expression when using these visual elements. So many different kinds of animation can be implemented. Charts are used in every second app (mobile and web). So, we can praise ourselves for having a solid experience in chart development. There is a wide variety of charts: Pie Chart, Bar Chart, Line Chart, Timetable Chart, Diagram, Flow Chart, Histogram, Scatter Plot, Dot Plot, and etc. In this article, I would like to use a general term — chart.

“Design is not just what it looks like and feels like. Design is how it works.”

– Steve Jobs

Thus, if you take a closer look at the chart, you will understand that this is a complicated element. Basically, it is a condensed output of a vast number of metrics, conditions, rules, and calculations. There are different requirements for the charts for mobile and web applications. The size of the display, processing possibilities, and technical limitations — are the core constraints. As charts are only a small part of the application design, usually there is one person responsible for processing the requirements for the charts in the product/project. This person may be a designer, a product owner or a business analyst. Nevertheless these charts could be a real pain for the developers during the implementation. With that on my mind, my primary goal is to share the knowledge and protect you from a possible headache you most likely going to have when developing this powerful graphic element for mobile application.

As a product owner in Dashdevs software development company, I prefer the practical approach in my work. That’s why I like to ask questions. You need to think over the charts from 3 points of view: Product, User, and Developer. Every answer leads you to a better product. Let’s imagine the situation when a business analyst or a product owner receives the first sketch of a brand-new screen with a chart. Now you need to start by asking the following questions to a designer/product owner/yourself:

1. Do you need a chart here? — Sometimes it is better just to show the user a few numbers and no extra elements that distract him.
2. Is a chart the best way to represent the data? — Check if the chart type is picked correctly. In order to do this, open the design of the chart on your mobile phone, and see if you can easily understand all the information on it. Sometimes it is better to have 2–3 charts instead of one. Overcomplication in the chart can be solved, for example, with highlighting each element and swiping between them. During each swipe — the user sees only one element, while others are blurred/transparent.
3. Do the colors express the emotional context of the graph? — You must select colors for different types of information in a deliberate way. For instance, a red color is not good to show a positive tendency, and it is better to use a gradient to show the progress on the chart.
4. What are the rules for this chart? — Each chart is about numbers. Check the data. It should be obvious. You need to provide a developer with the name of the data, timeframe limits, exceptions, and a formula on how to calculate the data in the chart.
5. Does the user need a legend for this chart to understand it?— Some charts represent simple data, and some have comparisons and additional calculations, that’s why you need to explain to the user all the extra elements. Sometimes it is reasonable to add a legend inside the chart. In this case, it is necessary to think over the possible length of the words in the legend. Mobile display is small, and wordy texts can break the layout.
6. How does the chart perform with big numbers? — Designers prefer well-structured data (short titles, descriptions, addresses, and characters that fit the screen), but the reality differs. A mobile phone has a limited space hence, the large numeric data could be cut.
7. What does the chart look like with maximal and minimal data together? — Let’s imagine that you have a pie chart consisting of 3 slices. What if these slices will be 99%, 0.75%, 0.25%. How can you show all the numbers on the chart?
8. What if one piece of data is absent (for some reason)? — You may hide this piece at all, or make it gray with “0” symbol or question marks.
9. What if the user doesn’t have data for this chart at all? — You need to have an empty state for the chart. It may be a chart without data or with a special placeholder.
10. How are the x-axis and y-axis built? — These elements may depend on the users’ data. Thus, you need to provide a developer with the rules on how to calculate the ticks and how many of them must be on the chart axes.
11. Is the gradient in the chart connected to numbers anyhow? — For example, if the number is higher than 2000, the chart must have a red gradient, if the number is less than 2000, use orange color.
12. What if the user has no permission to see this chart? — You need to create a blocked state for this chart.
13. What is the loading state for the chart? — For some charts, you need to retrieve data from your backend or do some calculations locally. So you may need the loading state to show the user that your application is working.
14. Is the chart static, responsive or must stick to the fixed size? — Any option is applicable in different cases. In some cases, the chart may have the same view for both mobile and tablet screens. But, since a tablet has a bigger screen, we can add much more data to it. Hence, this can be an extra requirement for developers. Moreover, for both options, you need to provide a developer max. and min. sizes of the charts.
15. What does happen if the user presses taps, double taps or hard presses the chart?– Sometimes, a simple tap on the chart area leads to an extra screen with a full version of the chart, a double-tap extends the chart, and a hard press serves to highlight specific data.
16. Is there a possibility to show data for the previous period? — It can be done with a swipe or a button press. The only thing, which matters here is the understanding of the limits.
17. Do we need to highlight data significant for the user? — Let’s imagine the calories tracking app with a customized daily calorie chart. If the user reaches 90% of the daily calories limit, we need to paint over the items and the rest of the data with orange color until the user reaches 100%. After that, we mark everything with the red color, to show the user that he/she has gone off track with the diet (i.e. limit for calories per day).
18. Do we need to add animation to the chart? — The chart can appear (as a picture at once) or slide piece by piece (be displayed partially)
19. Is there a specific order of the chart elements? — Development is a really straightforward process. If you want to show user data from the min. to max., you need to set up this like the rule for the UI/server side. For example, you have the rating of the most popular products, and you need to show it in the ascending order only.
20. Can the user customize the data? — We may allow the user to choose which information to show, or which highlight.

The answers to these questions guide you to improved UI and UX of the chart in your mobile application. When you create the chart design, you need to think about:

• the product (if this chart consists the application style and brand voice)
• the users (those who need to understand the data in a chart)
• the developers (those who need to understand in the order how to implement it).

In general, the most common bug in the chart design is the creating of beautiful composition with ideal data set on the screen and ignoring the real users’ needs. If you want to avoid this problem ask yourself the questions listed above. If you think that your design is perfect, try to create the same screen with various datasets (small and big numbers, lack of some data). And check if the layout still looks readable, recognizable, and understandable for the users.

“Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away,”

said Antoine de Saint-Exupery. Remove everything unnecessary from your design to simplify/lighten it and make it user-friendly.

Hope this article will help you to create the best application for your users and save a few developers souls from pain.

I appreciate if you share a bit of your experience with the charts in comments.