Report builder UX workflow presentation 1 Report Builder

Report builder UX 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 8 x 10 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 8 x 4. As the user drags the icon, a bounding box the size of 8 x 4 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 model onto the report Models tend to be pretty big, so the default size for a model is 8 x 9, 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 text box to the report An example of dragging a text box to your report. The default size of a text box is 4 x 2.

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 textformatting 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 8 x 1. 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).