Mapping interaction states
One of the most complicated aspects of this project were ironing out the details around drag and drop. There were a multitude of possible states: the validity of an object, the validity of said object being dropped into a valid field, the positioning of objects and whether they went above or below an existing object, and so forth.
For each of those state were micro interactions – the cursor would change when over a draggable object and the draggable object itself had different states depending on context. Using Bill Scott’s “interesting moments” grid as a guide, I created a storyboard grid that showed all the possible elements in all the possible states. This screen shows a part of that document.