Interface Design for data visualization platforms
Communicate dense and complex information in graphical form
In the previous post, I talk about Geospatial refining and many more things. But in this, I will share my experience of designing the interface for those platforms and how resulting visuals are designed to make it easy to compare data and use it to tell a story — both of which can help users in decision making.
For designing any interface📈, we need to understand How What and Why of business, product, etc.? Or we can call it research, wireframes, information architecture etc. before the UI design. (I already covered this part in the previous post).
Here I will share only the UI design part, which involved things like
Why the user click this?
Where he can find detailed info.,
How the new user and experienced one will interact with the UI,
Which identifier used for particular information, and
also the look and feel of the Product.
The product which I design is for Bluesky Analytics(I also give Design direction) named ☁BreeZo an air quality monitoring platform available in Web and Android app. At first, we will discuss Web platform after that Android app.
BreeZo WEB:
Start with the landing page, generally landing pages have a pattern stated from the top having a header then comes the introduction and then the body comes which has the core of the product and then comes the footer. And we can follow different patterns like F-Pattern or Z-pattern.
But for this, we follow a unique pattern in which header and footer are mixed and slide on the left side of the screen and fixed its position.
how this pattern actually looks
Why this is done? This gives more space for branding (Design direction of BLUESKY ANALYTICS). As the user explores the right section and wanted to find the AQI on his location he can directly click on “your location” icon, wanted to download the app whose link is provided on the left. So, the whole idea is that if a user wants to move out of BreeZo, he/she is provided with many options on the left fixed section whom they can explore and interact with and know more about us and the product.
Why there is a need to create separation in UI?
because that gives the user enough idea that the right part is scrollable and the left part is fixed (Signifiers and Affordances). By adding some shadow to the left section, we can create clear separation which also helps to tell that left one is fixed and is the parent of right.
Hierarchy in-text plays a major part in UI, which creates division and establish relations between headings and sub-headings in a UI.
For that, the top left on the body has an icon of the monitor which is dark and bold which used to tell the user that this section has detailed information about monitors and its reading, graphs, effects, locations and much more information.
Now this body has 3 major things:
1. Top polluted locations cards and each card has City name(to tell about which place we are talking about), AQI, mean and graph(which is not fully labelled which tell people that there is something more). Will talk what’s inside these cards later in this post.
2. The news which has been updated with station comparisons.
3. The map, on which location pins are coloured based on the AQI colours to give air quality info quickly in a view.
What’s inside these cards? Before telling that, I will tell you why inside cards? The answer is very simple that there are two types of users noob/new users(who only want AQI in their location) and the experts(needs detailed of everything). This inside page has detailed information about air quality which is well described with the use of different graphs and tables.
Data table:
For Air quality interface, the most important that can help to ease everything is the AQI colours, which can be used anywhere over the number, text, graph etc to represent its conditions. Likewise, every number is provided with the colour in this table.
Why data table: Data tables display information in a grid-like format of rows and columns. They organize information in a way that’s easy to scan so that users can look for patterns and insights.
Area chart:
AQI colour bar on the y-axis gives a clear idea about the air quality with a safe line. Why Area chart: To summarize relationships between datasets, how individual data points relate to a whole.
Different charts:
Radar graph for monthly distribution, pie chart for a percentage of air quality distribution in days, Bar chart for comparison between the safe limit and current situation.
Why Bar & pie chart: To express larger variations in data, how individual data points relate to a whole, comparisons, and ranking. Bar charts express quantities through a bar’s length, using a common baseline. Pie charts express portions of a whole, using arcs or angles within a circle.
Heatmaps:
This is just like a map where we get air quality information on the area and here on time. This is just like giving a summary and here also colours are used for its condition representation. Why heatmaps: Github used this heatmap to tell the users yearly contribution. So, here we can see a yearly contribution to air pollution.
And lastly, the Tooltips which help to clear any confusion related to any button, text, component etc that’s why you will see abundance use of tooltips in BreeZo.
