Report builderUX workflow presentation

1: Report Builder

The report builder allows users to create custom multi-page reports using charts and models from the Thinknum website

By default, it opens as one page. If you click the gray button below, pages are added.

The palette on the right allows the user to drag/drop four types of content to the report.

2: Underlying grid

Each page has the same underlying grid of squares in an 8x10 format.

The grid is only visible when a user drags or resizes an item on the page, to help guide toward ideal placement.

3: Dragging a chart

For this example, a chart is being dragged into the report. Each content type has a different default size. For charts, the default size is 8x4.

As the user drags the icon, a bounding box the size of 8x4 follows the mouse to the page. Once over the page, the box snaps to the grid coordinates nearest to the mouse.

4: Inserting the chart

Immediately after the mouse is released, this dialog box opens up. The user is asked to choose one of the charts they own (if they are logged-in) via the drop-down. Or they may search for any public chart.

5: The chart is inserted

Voila! A chart, which has proportionally stretched to fit the bounding box is now housed in the report.

6: Clicking on the chart allows options

A single-click on the chart brings up two items

1. Blue corner elements which allow the user to re-size the box (it will still snap to line up with the grid)

2. An “X” in the upper right corner to delete the box from the report.

A double-click would bring up the “insert a chart” dialog box again, and the user could choose to show a different chart instead.

7: Dragging a modelonto the report

Models tend to be pretty big, so the default size for a model is 8x9, which would allow one row at the top of the grid for a title.

The rest of the workflow for this is identical to what was shown for inserting a chart, with a dialog box opening allowing the user to select the proper model to insert.

8: Dragging a textbox to the report

An example of dragging a text box to your report. The default size of a text box is 4x2.

9: Entering text

After the mouse button is released, a cursor appears which allows the user to start typing (or copy/pasting text).

Additionally, a small text-formatting palette appears at the top edge of the box.

The text is auto-saved as soon as the user clicks outside of the box.

10: Dragging a title

Default size for the page title is 8x1. The rest of the interaction with this would be identical to inserting a text box.

11: Rotate page

The user may wish to rotate the page to landscape. Hovering on the upper right corner of the page causes the rotation button to show up. Clicking the button will rotate the page 90 degrees.

This functions on a page-by-page basis to allow users’ reports to contain both portrait pages (for text-heavy pages) and landscape pages (for models).