Design Pattern Library 1.5

General Guidelines

Desktop/Web

Mobile (Tablet & Phone)

Visual Design Guidelines

Dashboard - Tile Views

Problem

Content here.

Solution

The Tile View represents each record in the data set as a rectangular tile, which can be grouped, sized, sorted and coloured to display relationships, anomalies and outliers in the data. Tiles can be either image tiles displaying images associated with each record, or solid tiles displaying text formatted to represent various attributes of each record. The Tile View can be used as an image browser, but it is also a powerful 'heatmap' (treemap) for representing data visually along multiple dimensions. Moving the mouse over the tiles reveals the title for the record. By default, clicking on the tile selects the corresponding record. Double-clicking on the tile brings up the details display.

How

The Tile View is controlled using six configuration options.

Tile Contents: this drop-down menu provides the option to display either data values as solid, text containing tiles, or associated image sets as picture tiles. If you select a data field, the value of that field will display inside the tile representing each record. If you select an image set, it will display the name of the image file on tile select/hover unless you change the ungrouped tile title to the contents of another field.

Group: arranges the tiles into groups by any field.

2nd Group: within the first grouping, arranges the tiles into sub-groups by the value in the specified field.

Size: varies the size of each tile in proportion to the value in the specified field. Can be used with both image and solid tiles.

Sort: Sorts the tiles vertically by another field.

Color: determines which field value is used to color the tile, and can be used with image tiles as a semi-transparent overlay.

Examples