There seems to be a consensus across disciplines that spending time on the looks of your data is nice-to-have. However, while often regarded as unnecessary cosmetics, it is necessary to pay attention to user-friendliness in order to deliver the full impact of the work that you spent on the data already. I certainly have needlessly found myself feeling guilty about spending time on making my work look good instead of doing the work. For anyone feeling like that, and for anyone keeping to sober TIBCO Spotfire projects, I will elaborate in this blog post why it is important – and show how – to pay attention to user-friendliness in your data presentation.

Why

The duties of a data analyst/scientist/engineer lie in the processing of data to gain insight or optimization of processes. Spending time on the cosmetics in this process is not needed because the same information is also there in the sober, non-stylized version of your work. But if you consider that the presentation of your data is not as effective as it could be in conveying the insights to your user base (whether its external customers or internal colleagues), then the work spent on data analysis and processing is time not spent effectively. As such, data cosmetics are not nice-to-have but are in fact an optimization of your time and the time of users of your data. The relevancy of this increases with increased complexity and size of your project. For a project becoming something of a data portal, containing high variety data regularly used by a larger user base (that is potentially of varying disciplines), more attention is needed on the cosmetics in order to maintain usability and ensure adoption by your user base. It then becomes increasingly useful to integrate elements from the fields of Web Design, User Experience (UX) Design, and Graphic Design. Let’s first take a look at a simple example.

Figure 1; dummy data set, with standard formatting and some column organization.

Figure 2; dummy data set, stylized for a better (quicker) overview of the subject matter.

Figure 1 shows a basic excel spreadsheet containing some dummy data that has been plainly formatted with a little bit of organization of the columns. This represents a conventional data set that one would report or share with a colleague. Now spending about 30 seconds (insignificant amount compared the time generally spent on the preparation of such a data set) on the looks of this data presentation, an easier to consume presentation is created like shown in figure 2. Formatting the data set in this way allows the user of the data to get an overview and an understanding of the data a bit quicker, because this is made intuitive by guiding the eye through grouping with colouring and applying borders. The user would have gotten to the same insight in the version of figure 1, but with a slightly bigger effort. And the point here is: one person can spend 30 seconds to have a multitude of people save slight efforts that amount to a larger time saving than was spent on applying the cosmetics. An additional benefit is that your users will appreciate the effort and you are likely to gain professional trust.

In more complex projects for which it is resorted to BI solutions like TIBCO Spotfire, there is a bigger impact to be saved. Yet, user-friendliness and cosmetics are often disregarded. I too often see plain, white-background Spotfire projects in which it is not even immediately clear what the boundaries are between visualizations.

Applying a bit of extra attention to your TIBCO Spotfire dashboard/project/portal will result in:

Intuitive use of your work less time spent on training of the user base (saving time for you and other users) full impact of your work will be delivered

Better insights will be generated quicker users can more intuitively find what they need quicker minimize the amount of clicks to insight

Your dashboard/project/portal will sell itself swift adoption quicker to business value



With such benefits to be gained and impact of your work to be secured for a limited additional effort, I encourage anyone to not feel guilty for taking the time on the job to be creative with user-friendliness and cosmetics in data projects (especially when sharing them with others, be it externally or internally).

How

Now that we have established that paying a bit of attention to the cosmetical element of data presentation is beneficial, I will go into more detail about how to obtain user-friendliness with examples for TIBCO Spotfire projects. The 5 points I cover hereafter have a common ground with Web-, User Experience-, and Graphic Design, and I can recommend looking more into these fields for more inspiration in data presentation and user-friendliness. To help illustrate these points I refer to Wintershall Noordzee’s (WINZ) CrossFire portal (built by me in TIBCO Spotfire) in the animated figures.

1. Maximize visualization space.

A picture tells a thousand words, right? Well, certainly data visualizations can contain more information that can be consumed much more quickly than when expressed in words. It is then effective to provide as much room as possible in your workspace for data visualizations (figure 3).

Use a side-bar (that opens when the user needs it) to move filters out of sight. This will minimize distraction and maximize readability of information containers (i.e. data visualizations).

Instructional wordings are not needed to be permanently in sight either. Hide these away in a side bar too and let the user choose to look it up when needed.

Be sure to place the side-bar on the right, as TIBCO Spotfire 10 and later versions have a side-bar (for the visualizations and data canvas) on the left.

Figure 3; Animation of WINZ’ CrossFire, showing how screen space is saved for data visualization with the use of side-bar- and accordion animations. Also, a selection of filters is organized for the user, and an about-page info section is stored here too. Note also the use of a custom base map for better visibility in dark mode styling (created in GIS, published as WMS).

2. Play to the user’s intuition.

Create a page-header visualization (figure 3). In a page header you can focus generic project elements, which will then not distract the user from data analysis. The user will intuitively know from website navigating experience that the header contains things like a title, a home-button, and navigation tools. The user will know where to look for them when needed, and they will not be in the way of data analysis when not needed.

Create an index (figure 4) or table of contents. The more pages your TIBCO Spotfire project contains, the more one-dimensional the experience becomes when navigating it. And this can result in having trouble to find the page you are looking for while drilling through the data. This is not good for the overall experience, meaning adoption will not be optimal, while efficiency and even value can be lost because users are distracted and lose their train of thought. To improve this you can create an index page that collects an overview of all pages or topics in your project. You could set the project logo or company logo (that you can place in the header visualization) to navigate back to the index page when clicking on it (similar functionality to a website home-button).

Create a place to click for undoing selections in your visualization (figure 5). You can make a button in the header that deselects your selection, but it is more intuitive to click within the visualization you are working in, outside of data points or rows. To allow the latter, you can enable the legend in a table or any other visualization type and deselect all legend items (if you don’t need any). You will be left with an empty space on the left or right side of the visualization in which you can click to deselect the visualization selection. Slim this space down a bit to maximize space for the data visualization while leaving enough space to prevent miss-clicking.

Figure 4; Animation of WINZ’ CrossFire showing how the use of an index (or table of contents) page, can improve project navigation.

Figure 5; Animation of WINZ’ CrossFire, showing how empty space (legend enabled) is reserved for clicking to deselect visualization selections.

3. Provide only filters that are needed.

Think about the target audience and the purpose of the dashboard. Is it for technical analysis? For data management? For browsing? The create date column is probably not of a high filtering interest for technical analysts as much as it is for a data manager.

Never are all filters essential to a user. You can decide for the users what filters they need, avoiding a user-paralyzing filter stack in bigger projects.

Collapse the filters in an accordion animation so that you can fit more of them on screen without scrolling (figure 3). This will create better overview and the user will save time searching for tools.

4. Design with varying screen sizes in mind.

It is likely that screen sizes are varying throughout your user base. Experiment with how a layout looks when changing the size of the workspace. This is especially relevant when using fixed visualization locations, like you’d have with header visualizations. Here the functionality of locking visualization borders (available as of TIBCO Spotfire version 10) comes in very handy.

5. Dark mode.

I’m big fan of dark mode, not just because I’m better at styling that way. Most dashboards will be used on monitors and it is by now well known that bright screens tire out the eyes. But not only are dark-background workspaces then less tiresome, due to the greater options in contrasting colours you also have more freedom to bring clarity to your workspace (you have more freedom to group, highlight and organize the workspace than on a white background with which less colours contrast well). Designed this way, your project can be more intuitive to use, having the user keep their train of thought better and drill deeper and easier into the data. Besides, as data is more effective when it remains in digital form, there will be less need for print-friendliness going into the future, further justifying the use of the seemingly non-conventional dark mode designs.

Final remark

As said in the why section, the more complex a TIBCO Spotfire project becomes, the more worthwhile it is to spend more time on improving usability. Sometimes customizations can require a fair amount of effort, requiring even coding in HTML and CSS, but the nice thing about TIBCO Spotfire is that you can easily reuse whatever you created once and take over layout designs made before. And this means that you don’t have to spend as much time on developing these customizations again, making it then worthwhile to implement the more extensive customization in much smaller projects as well.

Useful links

WIKI with UX code explanations + dxp template: https://community.tibco.com/wiki/using-spotfire-text-areas-increase-usability-analytics-through-html-javascript-and-css#toc-7

Coding: https://codepen.io/abergin/details/ihlDf https://codepen.io/saeedreza/pen/GgrEGX

Spotfire templates: https://exchange.ai/downloads/jquery-widgets-for-spotfire/ http://dataviz-ressources.com/2017/03/22/collapsible-side-menu-with-spotfire/

Blog: https://community.tibco.com/feed-items/six-key-tips-impactful-data-science-applications

Video (Dr. Spotfire): https://youtu.be/SzagjvCnvT0



Dejan Zamurović – Data Engineer at Wintershall Noordzee B.V.

Dejan Zamurović works at Wintershall Noordzee – an oil and gas operator in the North Sea. With a background in geology he performs a role as data engineer, supporting all upstream disciplines (from geology and drilling to finance and legal) in digitalization and data analysis. In this, personal interests in photography and illustration percolate to form insightful data experiences.