Tips for Effective Dashboard Design

Dashboards provide meaningful information to the user in the form of data displays.

You can create elegant dashboards by following these key ideas for portlet placement:

  • Alignment—Align the edges of objects. The Page Setting, Snap-to-grid pixels makes alignment easy.

    Diagram showing good and bad alignment.

  • Hierarchy—Give the most important object the most visibility.

    Diagram showing heirarchy.

  • Contrast—Vary an important object's color, shape, or size to call attention to it.

    Diagram showing use of color and shape of an object.

  • Repetition and proximity—Reuse ideas and patterns, and group related ideas together.

    Diagram showing pattern and repetition.

  • Balance—Distribute objects evenly.

    Diagram showing balanced objects.

You can use a mockup portlet to design a page and preview elements without adding data. This gives you a close approximation about how the data elements will look on the final page.

Labels

Be sure to label each element to ensure that users understand how to interpret the dashboard display.

Setting an automatic refresh

You can add an html portlet to force a refresh on a regular schedule. For example, to update the page hourly (every 60000ms), add an html portlet with the following code:

<script>
setTimeout("location.reload(true);", 60000);
</script>

Macros

Measure macros can make the dashboard interactive. Users can select a different value or QuickView to update the dashboard display.

TIP: Use macros to define UI colors, especially for threshold indicators. This ensures consistency across your organization.

Other design elements to consider for standardization are the typeface you use, its size, weight, color and capitalization. You might also want to review skin options and color schemes.