These days, if you can’t show your data in a visually intuitive way, it’s essentially useless. No one is going to spend a long time on a web page trying to interpret data.
On the other hand, if your visualisations are particularly clever, interactive, and intuitive, you will massively differentiate yourself. Yet, it’s difficult to do it well. Kirk Goldsberry works mainly in the sports world, but is a leader in data visualisation as well. He set his work apart with the clarity of his visuals at Grantland and now fivethirtyeight.
How will you visualize your data?
Credit: Jianqi Chen
This American Express concept allows the user to organize their spending into a set of categories and presents the data in a variety of ways. Users can compare categories to get a broad sense of their spending habits, then quickly isolate a data set to understand the details. The design is clear and intuitive without any unnecessary graphics, so viewers can get the information they want at the drop of a hat.
Credit: Jesper Hansen
The form and tonal contrast of the funnel graph is a good example of the use of visual hierarchy. Immediately, the graph communicates the general information, while the specific numbers sit subtly in the background. However, it would have been nice to see how a user could isolate one of these categories for more details on the data.
The designers at the Chinese studio Kingyo are the masters of energy data. This interface is a great example of their work, which often combines color basics and visual hierarchy together with animation to produce effective results. In this case, the graph sits clearly in the foreground with the red text immediately attracting the viewer’s eyes. You can also isolate each category to get more specific information, rather than having all of the data on the screen at once.
Credit: Zach Robinson
Zach Robinson shows us an interface that is not only aesthetically appealing, but it also allows users to share thoughts about the data. The additional chat is well hidden if users only want to interact with the numbers. The graph itself is easy to read as a result of an intuitive visual hierarchy. Additionally, color coding pages is a simple but effective way to organize graph types without having to waste visual space with big headings.
Credit: Creative Mints
The radar graph overlays multiple data sets to reveal relationships between corresponding information. This type of graph is effective for this finance interface, as it quickly communicates that the user has not been spending according to budget. Budgeting can be intimidating for the everyday user, thus data visualisation is a great asset for this type of app.
Credit: Bureau Oberhaeuser
Bureau Oberhaeuser expands on the conventional radar graph with this interactive web app. Municipal data is complicated, but this interface represents the differences between cities for those who haven’t formally studied urbanism. Bureau Oberhaeuser built this without a client. This not only represents their desire to develop their design skills, but it is also an example of their interest in doing work for the public good.
Credit: Kuba Bogaczynski
This mobile soccer game allows users to shape their virtual soccer team with the central radar graph. Using the same radar graphic, the game provides data on the performance of each player on the field. The user can tweak each player as the match goes on in order to win.
Not only is data visualisation about presenting complex data beautifully, but it’s also about unlocking important information for users. In the case of this energy monitor, users are interested in how much energy they are saving. The problem is that kWh doesn’t mean much to most people. What matters is improvement over time and how this might translate into expenses. This interface does this perfectly.
Credit: Cosmin Capitanu
This interface is an example of data that is enjoyable to read thanks to legible text and a well formatted layout. The side menu suggests that the interface is entirely customizable. Thus, Cosmin Capitanu has clearly established a robust grid and color scheme so that the interface will look great in various formats.
This set of building energy data is pretty straightforward, but Kingyo makes it a pleasure to look at with great colors and animations. The graphics appear simple, but the designers have paid great attention to nuances. For example, the dark wave in the background gives the animation much of its charm.
These examples of interfaces show that data doesn’t have to be confusing, but it can be visualised for users in effective and enjoyable ways. There are a range of solutions for data visualisation – whether it’s a basic color scheme, a dynamic animation, or an interactive graph. How will you visualise your next project?