Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Lightbox Interesting Moments

Owned by Justin Justin
Last updated: Jun 02, 2008 by Allison BloodworthVersion comment
2 min read

"Interesting Moments"

These are key moments in the interaction when a user needs some extra visual indication that they are able to do something or have just done something.  Users are not used to such rich interactions on the web so we need to pay particular attention to their ability to discover this functionality.

Interesting Moment

Mouse

Keyboard

Page Loaded

Images shown as thumbnails and captions inside containers

Same as mouse

Mouse Hover

Container border highlighted

N/a

Keyboard select

N/a

User tabs to the lightbox component, and then uses the arrow keys to choose an image. This is equivalent to the mouse "hover" action.

Mouse Down

Enter "drag" mode. Some visual indication that you are in a new mode should happen here. Cursor changes to '4-way arrow'

N/a

Control-Key Down

N/a

This is equivalent to the mouse down. While the user is holding down ctrl, they are in drag mode. The same visual cue as mousedown should be visible.

Mouse Up

If we are in drag mode, this completes a drag action
If we are not in drag mode, this opens the image in 'detail view'

N/a

Spacebar/Enter

N/a

This will allow the user to see the detailed view of the currently hovered image

Drag Initiated

The user drags the image using the mouse to it's new desired location.

While holding ctrl, the user uses the arrow keys to move the image to a new location.

Drag Over Valid

Preview the new placement by showing a half-alpha version of the currently dragged image in it's new position. The other images on the page will re-arrange to form the new order.

Same as mouse

Drag Over Invalid

We will "snap" to the closest valid position (??).

there are no "invalid targets" for a keyboard user

Drag Over Original

Same as 'drag over valid'

same as mouse

Drop Accepted

Half-alpha preview becomes full-alpha. New order saved in database. (maybe we should have a highlight/fade effect here to emphasize that "something has happened".

same as mouse

Drop Rejected

We return to the original state (i.e. original ordering)

We return to the original state, additionally the original image is in hover mode.

Drop on Original

We return to the original state