Visual Design Best Practices for Spotfire®

Introduction

Even the most sophisticated Spotfire^® dashboards, addressing all technical requirements of the customer, will not be effective unless their visual design is well coordinated. Dashboards need to be carefully designed to be visually appealing and clearly deliver information to their end users.  The materials gathered in the subpages will help you design beautiful and effective Spotfire analyses.

Dashboard Design Best Practices Examples

LARGE TITLES on each page:

Calculated values in text area to display KPI`s:

DARK THEMES for simple dashboard:

COORDINATED COLOURS:

CUSTOM DESIGN for customer:

DRILL DOWN from TOP RIGHT TO BOTTOM/LEFT:

Relevant Filter in text areas:

BOOKMARKS as a guided through the analysis:

HTML to align controls in text areas:

Custom Themes

You can download Custom Themes and apply them to your Spotfire Analyses.

Click on the zip download button at the bottom of this page to access these files.

You can then apply the theme to your Spotfire analysis through View -> Visual Theme -> Import Theme from File...

Creating a custom theme is only possible with the Analyst Client. As a business author, you can change the themes between the defaults white or black; however, if the custom theme was created by the analyst, you have the option custom as well.

Gray Piece of Paper Theme

Burgundy Piece of Paper Theme

Gray Tile Theme

Gray and Gold Tile Theme

Dark Blue Piece of Paper Theme (Light)

Black Tile Theme

Gray Tile Blue Title Theme

Dark Blue Piece of Paper Theme (Dark)

Black Piece Of Paper Theme

Color Schemes

You can download pre-prepared color schemes and apply them to your visualizations in Spotfire.

Click on the zip download button at the bottom of this page to access these files.

  CATEGORICAL:

  CONTINUOUS:

For instructions, visit the following Spotfire help pages:

• Color Schemes Overview: The entire setup of colors for a visualization is referred to as its color scheme. Which colors and threshold values you choose, as well as the color mode you select, are all part of a visualization's color scheme. The current color scheme of a visualization can be viewed in the legend, and on the Colors page of the Visualization Properties. This is also where you edit a color scheme.
• Opening a Color Scheme: You can open a color scheme that has previously been saved to disk or to the library. You can also apply a color scheme from another visualization in the analysis, or open a document color scheme. The color scheme must be in the same scale mode as the visualization in which you want to use it.
• Applying a Color Scheme to Another: When you have set up a color scheme for a visualization, you can apply it to another visualization, provided that the two visualizations are colored by a column in the same scale mode.
• Saving a Color Scheme: You can save a color scheme for later reuse or to share it with others. If you save the color scheme to disk or in the library, you can use it in other analyses. If you save it as a document color scheme, you can use it again within the analysis. A document color scheme can be selected for a specific visualization in the analysis from the Colors page of the visualization properties. You can also select it as the default color scheme to use for a specific column as well as for new visualizations in the analysis. See Column Properties – Properties, Column Properties Descriptions, and Options – Visualization to learn more about using default color schemes.
• Coloring Overview

HTML in Text Areas

Using HTML in Spotfire Text Areas is a great way to enhance the look and feel of your dashboards.

Assets

• List of HTML tags supported in Spotfire text areas
• HTML table generator

Examples

Title pane with KPIs: in this example, an HTML table is used to control the layout of the top pane of the dashboard, including a title, KPIs and a slider.

Table border set to one:

HTML lookup (click on the image to zoom in)

Aligned Text and Controls: In this example, an HTML table is used inside a text area to align text and Spotfire controls for a more readable and user friendly format.Also, a cellpadding attribute is used inside the  tag to control the distance between text and controls and the Text Area borders.

Before:

After:

This customized html table is a good example how to put and align dynamic labels in a table.

Scorecard Layout: This HTML code is used within a text area to align text and a Spotfire control in the middle of the box.

You can use other techniques such as Div and Section tags which are more commonly used on web pages. In combination with styles such as float or flex you can achieve modern layouts in a text area: https://www.smashingmagazine.com/2018/05/guide-css-layout/

Spotfire Design Cheat Sheet

The Cheat Sheet is a one page document with checkboxes that will help you design beautiful, user-friendly dashboards. Please download the pdf version or view the image below through resources.

Videos

From Data to beautiful dashboards (Best practices for creating customized, beautiful, and effective dashboards (with Eszter Takacs))

Recommended Reading

Michael O'Connell

• [2012], A Picture is Worth a Thousand Tables: Graphics in Life Sciences, Springer, ISBN-13: 978-1461453284

Frank E Harrell Jr

• (2014), PRINCIPLES OF GRAPH CONSTRUCTION

Blogs

• Making data look good - Spotfire Community Blog by Dejan Zamurovic
• Six Key Tips for Impactful Data Analytics - Spotfire Community Blog by Colin Gray
• Creating Powerful Analytics and Dashboards through Parameterization - Spotfire Community Blog by Colin Gray
• 7 Basic Rules for Making Charts and Graphs 
• The functional art, blog on visualization, infographics, and data journalism

Edward Tufte

• R (2001) [1983], The Visual Display of Quantitative Information (2nd ed.), Cheshire, CT: Graphics Press, ISBN 0-9613921-4-2.
• (2001b) [1990], Envisioning Information, Cheshire, CT: Graphics Press, ISBN 0-9613921-1-8.
• R (1997), Visual Explanations: Images and Quantities, Evidence and Narrative, Cheshire, CT: Graphics Press, ISBN 0-9613921-2-6.
• (2003), The Cognitive Style of PowerPoint, Cheshire, CT: Graphics Press, ISBN 0-9613921-6-9.
• (2006), Beautiful Evidence, Cheshire, CT: Graphics Press, ISBN 0-9613921-7-7.

Stephen Few

• (2009), Now You See it: Simple Visualization Techniques for Quantitative Analysis: Analytics Press, ISBN - 13: 978-0970601988.
• (2012), Show me the numbers: Analytics Press, Second Edition, ISBN - 13: 978-0970601971.
• (2006), Information Dashboard Design: The Effective Visual Communication of Data: O'Reilly Media, Incorporated, ISBN - 13: 978-0596100162.
• (2007), Why Most Dashboards Fail: Perceptual Edge.
• (2004-2012), Designing Effective Tables and Graphs: Perceptual Edge.

Jeff Johnson 

• (2014), Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design: Morgan Kaufmann, Second Edition,  ISBN-13: 978-0124079144.

Dona M. Wong

• (2010), The Wall Street Journal Guide to Information Graphics: The Dos and Don'ts of Presenting Data, Facts, and Figures: W. W. Norton & Company; 1St Edition edition, ISBN-13: 978-0393072952

us_homeless_dark_blue_paper_dark.dxp_.zip

supported_html_in_the_text_area_in_tibco_spotfire_6_0.pdf