ANLY482 AY2016-17 T2 Group13 - Trade Analysis Dashboard
The dashboard can be accessed here.
The user guide to the dashboard can be accessed here.
To create an exploratory and analytical dashboard, the designs of each visualisation in the application synthesize some of the most important practices in the area of information design. Applying the theories and works from visualisation experts such as Edward Tufte, as well as analytical dashboard whitepapers [6], each visualisation should reflect their respective best practices.
According to various dashboard design white papers [5,6], the information presented in each dashboard should fulfil two main criteria: (1) To be able to communicate a large amount of information in a clear, concise and aesthetically pleasing manner and (2) to highlight the necessary information without any visual clutter. When creating each dashboard within our application, we used these criteria as a foundation to any individual visualisation component we were using as well as a general rule of thumb when visualising the entire dashboard.
While traditional dashboards focus almost entirely on defining the correct success metrics and combining a variety of charts and gauges on a single page [6], current dashboard design practices focus on commanding attention to information that the target audience would understand and would find valuable. This makes the design behind each component visualisation extremely valuable in contributing to the structure and readability of the entire application.
Hence, to support the general research found previously, past literature will be consulted further to explain the various design practices we utilised in creating the application to serve the needs of the target audience. For example, in addition to having clear concise information presented in a structured manner, research also that suggests that people tend to first look for information on the top-left corner of a page before paying attention to anything else [7,8,9]. Additionally, the bottom-right segments of a visual will get the least or no attention at all. This finding and other findings will be discussed in the next section.
Figure 4.2a – Design Architecture
The design architecture of ASID describes how the databases, data extracts and Tableau servers interact with each other and with the users.
Each dashboard involves at most four visualisations each to avoid cluttering [5]. Information was also laid out in a way that does not hinder the user’s ability to effectively use the dashboard to determine the important elements in it.
Figure 4.3a – Example of dashboard organization
In Figure 4.3a, we intentionally restrain the use of colour schemes. In this design, we draw the users’ gaze instantly to what is relevant and important [6], which, in this dashboard, is the relative positions of the UK in both the time-series graph and the bar chart. Colour in this case was used to categorically display and contrast UK from other countries. However, if the user prefers to highlight the UK (or another individual country) in all visuals, the dashboard also includes a highlighting function to do so (Figure 4.3b).
Figure 4.3b – Example of highlighting functionality
Furthermore, at a subtler level, we also took into consideration the positions of each visualisation. In this example, we intentionally positioned the bar chart left of the Pareto chart (Figure 4.3a). This decision was made to utilize the “white space” to demarcate the visual boundaries [6]. If we reversed the bar and Pareto charts positions, the boundaries would have been blurred (Figure 4.3c).
Figure 4.3c – Example of “white space” not optimized
From Figure 4.3c, the third axis label of the Pareto chart could have been misinterpreted to be the axis label of the bar chart. Hence, to negate such a misconception from the users’ perspective, we paid close attention to how “white spaces” could be optimized in all dashboards to demarcate boundaries among the visualisations in a dashboard. The next interface design we utilized refers to what people will look at when they view a visual for the first time. Researchers have studied the eye movements of people and found that most people tend to scan a webpage in a particular manner. They suggest that people tend to first look for information on the top-left corner of a page before paying attention to anything else [7,8,9]. Additionally, the bottom-right segments of a visual will get the least or no attention at all.
Figure 4.3d – General eye-movements of people when scanning a visualisation
Although there are variations in how people scan visuals, the general consensus is that people start from the top-left corner in a “z-pattern” [13], shown in Figure 4.3d. Based on this research, we designed our dashboards in a way that any instructions were given at the top-left corner to maximize the probability that they will be read before commencing any exploration of the dashboard. The only exception to this rule was in a separate visual where we prioritize the optimization of “white spaces” above the “z-pattern” approach, which will be seen later.
Figure 4.3e – Example of the use of text intensifiers for emphasis
Lastly, on the use of typology, we utilized Tableau’s default font (Tableau Book) due to its simple, clean and elegant design and ensured that all our dashboards used the appropriate intensifiers when necessary [6]. For example, in Figure 4.3e, we bold text to give it emphasis. In this example, we bolded only “Commodity 6D” because the entire dashboard focused only on this particular commodity. The same logic applies for any other intensifiers used in the other dashboards.
Every dashboard in the application has to tell a story with data. We used Tableau’s storyboard to guide users through the entire application (Figure 4.4a). However, telling a story with our data did not come without it challenges. With every dashboard that was created, we were mindful in determining the most appropriate charts to use.
Figure 4.4a – Snippet of Tableau storyboard
Commencing from the left in Figure 4.4a, the first two dashboards were overviews of trade insights in the form of treemaps, the first being UK-centric and the second, World-centric. Users will be able to start their exploration by choosing one of the two dashboards.
Figure 4.4.1a – Dashboard 1: Treemap overview
A treemap was chosen as the ideal chart for the overview because of its ease in interpretability and how it supports the quick comprehension of UK’s performance relative to the world (Figure 4.4.1a). In this instance, it answers two fundamental questions at a glance – “What is the UK focusing on now?” and “How is the UK doing relative to the world?”. The former is represented by the size of each quadrilateral while the latter, the colour intensity. Here, we intentionally added text labels to only the market share i.e. colour intensity, as it is not easily interpretable at a glance without hovering on the quadrilaterals. The size of quadrilateral clearly shows the magnitude of the trade value. Hence, no text labels were used for it.
However, this treemap design came with some limitations. The main contention with this treemap design was that it does not fundamentally follow the gradual revelation of hierarchical levels that treemaps were designed for [10]. In our application, all levels were displayed in the dashboard, instead of having the drill-down function of a treemap. This was due to the limitations of Tableau being used as the main software for our visualisations. Tableau does not have the “drill-down functionality” when it comes to treemap visualisations. Due to the lack of solutions to this problem, we decided it was best to layout the treemap in the current format seen and enable the filter function instead. In this way, the users will be better able to see how the visuals interact with each other (Figure 4.4.1b).
Figure 4.4.1b – Example of treemap filter function as an alternative to “drill-down” functionality
As seen in Figure 4.4.1b, upon clicking the “Food and Beverage” quadrilateral at the sector levels, all other levels (2D, 4D and 6D) filters to their respective “Food and Beverage” commodities. This design would better visualize the relationships between each commodity level without compromising the function of a treemap.
The next dashboard in the application consist of three visualisations. When taken together, it highlights the importance of a commodity or a set of commodities within a sector imported into Singapore. Hence, the tables in Figure 4.4.2a highlight the importance of a certain commodity by displaying the rate of change in trade values across two years. Figure 4.4.1c also depicts the prioritization of the use of “whitespace” over the “Z-pattern”. We utilized the empty white space to write our “user guide”. Albeit near the bottom right of the screen, the bold emphasis of the words “user guide” will still capture the users gaze even if they were just glancing through.
Figure 4.4.2a – Dashboard 2: Understanding commodity importance
To showcase the relative positional changes of the UK across two years, a boxplot and slope graph were used (Figure 4.4.2b).
Figure 4.4.2b – Highlighting the positions of the UK in Dashboard 2
At a single glance, the boxplot displays information of the relative position of the UK compared to the top 20 countries exporting the same commodity into Singapore. Furthermore, it readily displays the median trade value of these top countries as well as the inter-quartile range (IQR) of the trade values. Additionally, the whiskers of the boxplot depict the outliers (1.5*IQR). With these measures in sight, the user could easily see where the UK stands relative to the median trade value and to its competitors.
The slope graph on the other hand, is another variant in terms of showcasing relativity. The benefits of slope graphs is that it provides a minimalist ways of seeing the order of countries and the specific values associated to that position, as well as how each country’s value changes across a given set of years and more importantly, how each country’s rate of change compares to one another [14]. It is in the last point – the rate of change – that we decided to include this visual next to the boxplot. This allows our users to obtain additional information not provided by the boxplot of where the UK stands in comparison to its competitors. The direction of change (ie. Increase or decrease) is shown by the colour, while the significance of change is shown by the thickness of the line. The latter provides supporting information to the former. For example, if the UK is found to be in the red, users can instantaneously see the significance of the change by referring to the thickness of the line.
Figure 4.4.3a – Dashboard 3: Deciphering the main competitors in a sector or commodity
The next dashboard (Figure 4.4.3a) displays three visualisations – a time-series graph, a bar chart and a Pareto chart. Viewed separately, little information could be drawn from them but taken together, it gives the user an overall understanding of who the main importers for a sector or commodity. Each visualisation displays important aspects to understand the competitors within a particular sector or commodity.
The time-series exhibits the absolute changes in trade values of commodities imported into Singapore over time. Each line represents a country so the user is able to gauge the competition above and below the chosen country. In addition to that, as mentioned in the interface design section, the colour of the UK is contrasted against all other countries in the time-series so it is easy for users to see where UK stands. The bar chart on the other hand, neatly presents the market shares of the top countries in a specified year. Finally, the Pareto chart identifies the top contributors to 80% (or whichever levels the user inputs) of the overall trade value in a particular sector or commodity [15]. This is useful to identify which few countries import the main bulk of a particular sector or commodity and have the greatest impact on import value.
Figure 4.4.4a – Dashboard 4: Commodity level analysis
The next type of dashboard (Figure 4.4.4a) again shows three visualisations. The main difference in this dashboard, as compared to Figure 4.4.3a, lies in its analysis of a single commodity at different hierarchy levels (2D, 4D or 6D). More specifically, the main change lies in the bar chart. This dashboard was created so users could juxtapose the UK’s trade value against a country of interest. In Figure 4.4.4a, France was chosen as the country of interest and all visualisations showcases France’s performance. The bar chart displays additional information on UK’s trade value, shown by the grey bars, to be used as a benchmark for comparison purposes. This occurs at all levels of the hierarchy.
In this section, the different functionalities of the application will be explained. The goal was to create interactive elements on each dashboard that would allow the user to highlight key information and provide a customizable view of the data, so as to support the exploratory function of this application. Tableau’s filter functions support this exploratory nature of the application [16].
Figure 4.5a – Example of filter functions
Figure 4.5a highlights 3 mains type of filters that allows the user to filter what they want to see. For example, the red box highlights two sets of hierarchies – “Continent > Region > Country” and “Sector > 2D > 4D > 6D”. From here, the user can simultaneously toggle specific countries to be compared to the UK and specific sectors or commodities to be displayed.
Figure 4.5b – Example of highlighting functionality
The green box shows a highlight filter, which aids in instantly highlighting the positions of the country of interest within the visuals (Figure 4.5b).
Figure 4.5c – Example of dynamic visuals functionality
The blue box utilizes slider bars to allow the user to toggle the top “N” countries to be viewed. This encourages the user to explore the data provided and creates a more dynamic comparison (Figure 4.5c).
Figure 4.5d – Example of visual filter function
The last filter functionality of this dashboard is the ability to filter using the visuals themselves. In Figure 4.5d, by simply highlighting all the points on the boxplot, both the table and the slope graph are automatically toggled to show the selection.
Figure 4.5e – Example of Pareto threshold functionality
In another dashboard (Figure 4.5e), an additional filter functionality allows users to apply a “threshold” level to the dashboard. Initially, the threshold level was fixed at 80%. However, this limited the exploratory nature of the application. With this functionality, users are able to see which countries form N% of the total trade value. If 80% of the trade value comes from only a single country, users would realise that this country almost holds a monopoly of this supply of imports in Singapore.
Overall, filters allow users to define the scope of their search in the dashboard. Furthermore, filters also reflect users’ search-intent, so that the application can best meet users’ needs.
While the overall display of information within a dashboard is important, choosing the appropriate individual visualisations also plays an essential role in clearly conveying data to the user. In the following segment, in order to meet the two criteria mentioned in the literature review, we will be going through the design principles we took into account while creating the individual visualisations.
Figure 4.6.1a – Old version of Dashboard 4’s benchmark bar chart
Figure 4.6.1a shows the original version of Dashboard 4’s bar chart, which consists of multiple design flaws. Firstly, there was an excess of visual clutter. The grid lines confuse the eyes due to the colour of the benchmarks (grey bars). Additionally, the benchmarks bars ended off with a black line which adds no meaning to the visual, and is redundant to the overall visualisation. Secondly, the axis labels and headers were disorganised and not shown completely, making it difficult for users to identify which commodity/sector each bar represented. Lastly, the whole graph was aggregated by its 4D code, causing the headers to have an inconsistent width throughout the visual. Overall, this bar chart did not provide an effective visualisation for analysis.
Figure 4.6.1b – Applying design principles
Gradual changes were made to improve the visualisation (Figure 4.6.1b), to provide a cleaner visualisation for more effective analysis [6]. (1) We first removed chart junk. This included removing all gridlines and other visual clutter, such as the black line mentioned earlier. (2) Next, a contrasting bar was needed to display the comparison between UK’s trade value and the commodity’s trade value. To do so, we reduced the size of each bar chart, and lightened up the tone of the benchmark bars. This created a clear distinction between each benchmark from one another and enhanced readability. (3) Subsequently, we removed all headers as they were unnecessary, and transformed the axes. Now, the labels were slightly more visible and readable. (4) Afterwards, we removed the header lines segmenting each label and simultaneously made the overall title more concise. However, even with these edits, the labels were still not displayed fully. Thus, we decided to remove these headers completely. This forced users to hover over the bars if they wanted to see the names of the commodities. Additionally, we justified the bars to the left by displaying the values on the right of each bar instead. (5) Lastly, the bars were sorted in descending order of trade values to improve structure and clarity for the user. Figure 4.6.1c shows the final visualisation used. It displays a bar chart only highlighting the important elements – the trade value of the commodity and UK’s benchmark trade values.
Figure 4.6.1c – New and improved version of dashboard 4’s benchmark bar chart
The Pareto charts were also decluttered in a similar way to the bar charts. In addition to this, two more design principles were used.
Figure 4.6.2a – Old version of the Pareto chart
Figure 4.6.2b – Additional problems with some visualisations
In the older version of the Pareto chart (4.6.2a), a problem with the use of colours can be clearly seen. Firstly, the Pareto line itself is the same colour as the bar, making the visual unclear at specific points. Next, the reference line is too light to be seen, due to the clash in colours with the background and gridlines. Furthermore, there was also a lack of any vertical referencing that could segregate the x-axis at the point of intersection of the reference line and the Pareto line. This was partly due to x-axis being made up of categorical variables. There was a need to convert these variables into numerical variables to allow for a vertical reference line. Lastly, Figure 4.6.2b highlights the unnecessary repetition of words. Both the x-axis header and the title used the same keyword.
Figure 4.6.2c – Additional design principles made to the Pareto chart not mentioned previously
In addition to decluttering the gridlines, axes, labels as mentioned previously, we added colour to the visual to demarcate clear boundaries (Figure 4.6.2c). We ensured each colour represented a significant piece of information. Firstly, we changed the Pareto line’s colour to orange to contrast it with the bar chart. Next, the reference line was thinned out, made bright red and the previously solid line was replaced with a dashed line. Subsequently, we converted the x-axis to numerical variables to create a vertical reference line. This line marks out the intersection point between the Pareto threshold and the Pareto line. Furthermore, these lines are now dynamic. Lastly, any bars outside the area of intersection were greyed out. This would give our users a visual representation of which bars were included within the threshold point pre-selected by them. Figure 4.6.2d displays the final Pareto chart after changes were made.
Figure 4.6.2d – New and improved Pareto chart
While only changes to the bar chart and Pareto chart were highlighted, the same design principles were applied to other visualisations in the application to create a clean and concise interface. Another design principle not mentioned was the logarithmic transformation of the axes in the slope graph and boxplot to better visualize the relative positions of the countries.
