1. Home
  2. Docs
  3. Chapter 21. User Experience Design
  4. 3. Wireflow
  5. How to animate a path in wireflow

How to animate a path in wireflow

The wireflow animation tool makes your wireflow alive by presenting how the scenes of a flow are being navigated, in the form of an animation. The animation helps stakeholders and team members know how an end user will interact with the system to achieve a goal, making it an ideal communication tool to use in clarifying and confirming system functionality and behaviors.

Animating a wireflow

Creating a path

As long as an interaction involves alternate and exceptional cases, there are multiple paths of wireflow that can be navigated. To play an animation, you have to first create the path(s) to navigate. To create a path:

  1. The Paths window is where you create, manage and animate paths. The window is opened by default. If it’s closed, open it by right clicking on the background of the wireflow diagram and selecting Edit Paths… from the popup menu.
  2. Click on the gear button next to the drop-down menu of Path, and then select Add Path.To add a path
  3. Enter the name of the path. The name will be used to identify the path. It is recommended to enter a short yet specific description that can uniquely identify the path to navigate.
    Naming a path
  4. Click OK to confirm.
  5. A new path is created. You need to add scenes into the path, following the order they will be navigated. A scene can be added into a path via the Resource-Centric Interface. Move your mouse pointer over the scene that you want to add into the path. You will find too resource icons, one for adding the hovering scene along with the remaining scenes into the path until a decision shape is met, another for adding just the hovering scene into the path.
    Adding a scene into a path
    Normally, an animation flows by following the flow depicted in the wireflow diagram. If this is your case, click on the first resource icon. We will help you add the hovering scene and the next scenes into the path, until a decision shape is met. This option will save your time in adding scenes one by one. If you want only to add a single scene into the flow, click on the second resource icon.Complete the path by adding the scenes involved. The scenes will be listed in the Paths window, and are numbered in the diagram based on their order in the list.Scenes added into a wireflow path

As said, a typical wireflow presents not just a single but multiple navigation paths. You can create the other paths by re-performing the steps above. You can switch to another path by choosing the path to open from the drop-down menu at the top of the Paths window.

Navigate to another path

Animating a path

To present a navigation path in the form of animation:

  1. From the top of the Paths window, select the path to animate. If the Paths window is closed, right click on the background of the wireflow diagram and select Edit Paths… from the popup menu to open it first.
    Select a path to animate
  2. At the bottom of the Paths window, click the play button and select the zoom ratio to play with. If you want a more clear picture on the scene content, select a higher zoom ratio.
    Play an animation in wireflow
    When the animation begins, a tiny black dot will be attached to the begining of the path selected to animate. During the animation, the black dot will traverse through the path. Scenes that lie on the path will be painted in purple one by one when being approached by the black dot until the black dot reached the end of the path.
    An animating wireflow

Play the animation as a storyboard slideshow

Besides animating a path in the wireflow diagram, you can also play the wireframes one by one as a storyboard slideshow. You can stay at a slide, navigate around the wireflow back and forth as you like. This facilitates deeper discussions on UX, which is particularly useful when people want to spend a bit more time on one or more scenes, or skip through some of them in the wireflow path.

To animate a path as storyboard slideshow:

  1. From the top of the Paths window, select the path to animate. If the Paths window is closed, right click on the background of the wireflow diagram and select Edit Paths… from the popup menu to open it first.
  2. Clcik the Play current path as storyboard button.
    To play a wireflow animation as storyboard slideshow
  3. This opens the storyboard slideshow player. Navigate through the scenes by clicking on the Next and Previous button at the bottom left of the player, or press the Left or Right key.
    Playing a storyboard slideshow

Note that by playing an animation as a storyboard slideshow, a new storyboard will be created, which can be opened under the storyboard feature by accessing Modeling > Storyboard from the toolbar. Storyboards created from Wireflow Diagram are read-only – You are not allowed to add additional wireframes into the storyboard.