Hi friends,
We’ve been quiet recently and wanted to fill ya’ll in on what we’ve been working on.
Back when we were developing the drag and drop layout manipulation, we struggled with the complexity of possible interactions: What happens when dragging self-directed box into a stack? To a certain position in a stack? Into the tree? What about trying to drop into a text box? Is that behavior different than when dropping into neither the canvas nor the tree?
This complexity was both “high level” (about Subform concepts like stack and grid) and “low level” (about mouse movements, key presses and releases, etc).
Kevin’s background in physics and programming helped him sketch out the behavior in the abstract, but it was difficult to communicate — too difficult for us to make real progress designing the physical inputs and visual feedback cues.
We got unstuck only after we made a tool that let us see a map of all the possible states and the paths between them.
Our tool let us sketch out the drag and drop behavior in a tangible way that we could both understand, which helped us collaborate to actually build it as part of Subform.
This kind of complexity comes up all the time in interactive apps, but visual design tools don’t help much (especially once you leave the proverbial “happy path” of wireframes and user flows).
We realized that our approach might be useful for other folks making complex digital products — not just designers, but developers, project managers, UXers, and other stakeholders.
So we wrote up some tutorials and put our tool online, completely free.
Check it out at https://sketch.systems
xoxoxo,
Kevin + Ryan