Past animations may contain a good idea that is worth keeping. See how to translate the old page into readable features of the modern site.
Describe action before you select the tool
The modernization of the Flash page does not necessarily mean giving up its character. However, you have to separate the visual effect from the function. The rotating product can be used to view detail and the sliding cards – comparison of variants. It is the user's need that should lead the design of a new solution.
For each item, write down what the user is doing, what answer he receives and where he goes on. If you can’t indicate such a goal, animation probably only plays a decorative role. It can then be simplified or reduced to a short accent, leaving more room for content.
Example: Product color configurator
Imagine an old presentation in which a sample click changed the colour of the enclosure. In the new project you need real buttons with variants names, information about the current selection and preview of the product. A person who does not distinguish himself by colors or uses a keyboard should also be able to choose an option.
On the phone you cannot base the operation on the cursor. You have to plan the initial state, touch and withdraw the choice. If the variant affects the price, this dependence must also be readable outside the illustration. Only after setting these rules are chosen is the method of making graphics and animations.
Select the form for the material
Simple transitions and backlights can be prepared in the interface layer. A presentation requiring camera or model control needs another solution and a larger range of tests. A short film will work with a linear display, but will not replace the tool where the recipient chooses the parameters himself.
You do not need to play each detail one to one. Slow entry of the logo or the sequence preceding the menu may have been characteristic of the old page, but today it is worth checking whether they are delaying the basic task. Also set a version limiting the movement in which the information remains available.
How do you pick up a new interaction?
- Check the selection, undo and return to the initial state.
- Test the touch and keyboard, not just the mouse.
- Rate action with real photos and long names.
- Make sure the content is understood also without animation.
The status of the old technology describes Adobe message about Flash PlayerPreparation of materials for transfer discusses inventory of the Flash page, and the rules of work on the phone — mobile-first design.
