Dashboard

Dashboard Specification

For details on the dashboard and gadget chrome design, refer to the dashboard specification, last updated on 6-26. Note: this is a pdf document.

Dashboard Main

Below is a mockup that shows a user dashboard with 3 gadgets. The dotted line is an estimate of where the browser fold might occur.

Dashboard - Add and Manage Content - Single Page Design

The following mockup represents a single page approach to adding gadgets, then arranging those gadgets on the dashboard canvas.

The page is organized into 2 sections: 1) scrollable area where the user may select a gadget to add to their dashboard; 2) preview of their dashboard where the user can rearrange the placement of the gadgets.

Note: I added a wide gadget channel to support blogs coming from the Aquarium. It doesn't appear that the blog content will fit in the narrow channel.

A typical user scenario:

User clicks "Customize Dashboard". The customize panel "slides" down as shown below.
User browses the available gadgets in the scrollable list.
User finds a gadget to add; user selects "L" or "R" column, then clicks the "+" button to add the gadget. When the user clicks the "+" key, the gadget listing should fade away from the listing, then fade into the preview pane below. The gadget should be displayed at the top of the selected column. Note: the gadget is removed from the list of available gadgets since it is no longer available.
Once the gadget is shown in the preview pane, the user may change it's location or remove the gadget.
To move the gadget.. the user hovers the mouse pointer over the directional icon. Upon hover, the icon enlarges as shown for the Content gadget in the mockup below. (Note: this transition should be animated.. The default icon should "fade" into the background, while the larger icon "fades" into the foreground.) The user may move the gadget up/down or left/right. The gadget should simply wrap if moved beyond it's boundary. Note that the wide gadget can only be moved up/down.
To remove a gadget, the user clicks on the "-" button. When this button is clicked, the animation described in Step #3 above should occur in reverse. Once remvoed from the preview pane, the remaining gadgets should adjust their positioning.
Once the user has completed adding and moving the gadgets, the user clicks "Save Changes". All changes are made persistent, the customize panel slides up to close, revealing the modified dashboard.

Dashboard - Add and Manage Content - 2 Page Design

The mockups below perform the same function as the single-page mockup above, but use two pages: 1) "Add Content" to the user dashboard page, 2) Arrange content on the dashboard page.

Key design changes: