Customizing portal layouts by dragging and dropping portlets.
Design Pattern
The drag and drop behavior is derived from a Layout Preview design pattern.
User Testing
Initial results from user testing on an early development version.
Drag and drop interaction
Hover over portlet title bar changes pointer cursor to move cursor
This follows the user convention to signal an object as drag-able. Locked portlets do not change the cursor on title bar hover. Locked portlets (Bookmarks in this example) have a "flattened" and highlighted visual appearance to reinforce the locked state and presumably higher-importance content.
On begin drag, contents shift to show a preview of the layout change.
The dragged portlet is pulled from the layout and since the cursor is now hovering over the original location - which is now a valid drop target - the original dragged content location becomes a drop target indicator (in this mockup a box with dashed outline). The drag avatar is a visual snapshot of the dragged content at 25% opacity.
Attempting to drag above a locked portlet results in no valid drop target message
Locked portlets remain in their original position (do not move out of the way for the dragged content) and the valid drop target indicator remains in the first valid drop position below the locked portlet(s). A message to the user of the locked portlet condition is displayed to the user.
Dragging to a valid drop target displays the drop target visual indicator
Having the cursor/drag avatar in the top half of an unlocked portlet puts the drop target visual indicator at the top of that portlet. Moving the cursor/drag avatar to the bottom half of an unlocked portlet puts the drop target visual indicator at the bottom of that portlet. Non-dragged content shifts appropriately to preview the result.
On drop, the cursor returns to a pointer cursor and the content is placed
The interaction is finished and the layout change should persist.
Keyboard interaction
On page load
Page heading is announced, followed by: "Contains Layout Reorderer. To change location of items: press control key plus arrow keys, or control key plus j, k, l, and m keys."
Tab shows focus
The tab key places focus on the portlets. Focus is visually signaled by a shift in the portlet border as well as the browser's natural focus visual affordance (usually a dashed outline).
Item is announced by screen reader: "Welcome."
Designated keys move between portlets for selection
A set of designated keys (i, k, m or j, or the arrow keys) allows the user to select the desired portlet. Using the designated keys moves active selection between portlets, starting with the first portlet in the first column. Up and down keys cycle through portlets in the column, flipping to the top (or bottom) of the column when the last portlet of the column is selected. Left and right keys moves selection to the first portlet in the adjacent column.
CTRL key signals move
Holding down the CTRL key changes the visual presentation of the selected portlet to signal move readiness.
Screen reader announces: "Focus is on Calendar. Press arrow or j,k,l, and m keys to move to new location."
Trying to move above a locked portlet fails and displays error message
Screen reader announces: "Item above calendar is locked. The calendar cannot be placed any higher in this column."
Move to valid location is successful
With the CTRL key pressed, set of designated keys (i, k, m or j, or the arrow keys) allows the user to move the selected portlet. Keys move portlets in the same pattern as the selection interaction.
Screen reader announces: "Calendar moves left (right, up, down)."
Releasing CTRL key returns to selection
The visual presentation of the moved portlet returns to selected.
Screen reader announces: "Calendar moved successfully."
