Shimoku docs

Visual hierarchy

In this section we will see some examples of visual hierarchy used in Shimoku.
To begin with, we will separate the visual hierarchy into two blocks. General visual hierarchy and Data hierarchy.

General visual hierarchy

The general visual hierarchy will be the sum total of reports when creating a dashboard.
For this block we can take into account the following considerations:
  • Dashboard Objective | To have a simple reference we can say that we will have three main objectives. General visualization, detailed visualization and mixed. From this first distinction we will be able to generate our dashboards with a clearer idea.
Primary charts
Secondary charts
Show general data
Indicators, Pie chart, bar chart, table
Line chart, Bar chart, gauge, sankey, heatmap, mindmap
Show detailed data
Table, bar chart, line chart, gauge, sankey
Indicators, heatmap, mindmap
Show mixed data
If we have a mixed objective in which general data and detailed data are displayed, it is recommended to sort and display the general data first and then detailed data.
Show general data
Show detailed data
Show mixed data

Data hierarchy

This hierarchy aims to offer a quick, simple and effective way to visualize specific data. Making use of the different possibilities that Shimoku offers. The use of colors in the data, backgrounds, iconography and other graphic resources will help us achieve this goal.
Table with chips | As we see the color and the background in the data, they will allow the user to quickly and easily recognize which leads have a "low" probability since we associate this word with the color red. In this way, if the person viewing the table sees that they all start to be red, he will quickly and easily see that there is some type of incident.
Indicators | In this case we can use them in different ways, but the simplest and most effective is to associate the color following the same data hierarchy mentioned above.
Consistency in data visualization will make it easier to understand and provide a positive dashboard experience.
Low conversion = Red color
0% to 30%(data for low conversion classification) = Red color
Low revenue = Red color
Pie chart and bar chart | The generation of content that visually offers general content and followed by some more detail will add great value to the data visualization hierarchy.