Problems to Solve:
The previous version of the editor only allowed you to apply one action to an element. It also got in the way while editing on the canvas because it popped off of the element when it was selected. There was no way to apply different inputs to cause different actions (such as mouseover and click/tap), as well as no way to have input on one element trigger an action on another element. In order to combine all of these capabilities into one area instead of having them separated, we moved the actions into a panel, and separated actions by input. This was decided to be the best for flexibility and for being able to see all your actions at once, including animations.
Before we arrived at this direction, we tried...
Timeline and Scroll-line for Animations, for time and scroll-based inputs, respectively.
This was not picked because:
- Too much development time/resources needed.
- Not enough focus for specific flows users would want to do quickly.
However, parallax (scroll-based animation) would have been better with this implementation compared to what is in the system now.
Check out my Invision prototype for this idea: 'Timeline' Based and 'Scrolline' Based animations and actions >>
Basic Transitions On Mouseover Plus Advanced Dialog
This was not picked because:
- We have been moving away from Wizards/Dialogs because they are not WYSIWYG. It is hard to design something without seeing it's context/surroundings.
- Changing it afterwards is more difficult, if you have to go through multiple steps to get to the thing you want to change.
Development of the picked solution:
General Concept of If/Then Statements:
Concepting how the panel should be organized (and making it so you can have multiple actions per input):
Moving existing actions over to the element menu panel:
New Inputs and New Actions, including Animation Presets:
Showing how the individual actions behave when you add another action (minimizes to action bar) and when you switch between them (shuffles the action bars).
Animated example showing how to add an action for another element to animate (fade in from left) when the selected element displays in the browser viewport.
Conclusion
This feature was designed and developed together at the same time as the head developer and I figured out the limitations and requirements for each part of the puzzle, and it fell into place after many stops and starts. However, it is a very flexible system that can be updated as different needs arise. More actions can keep being added, as well as input types and touch gestures.
Video From Readz blog entry: Advanced animations for interactive mobile & web content (marketing)
