Wireframe playback
Showing a screen flow of the system to your customer guarantees your customer to know what will be delivered by the end of the project. Visual Paradigm not only allows you to associate user story scenario with wireframes in illustrating system interations but also supports playing the wireframes associated with user story scenario. This can be very useful when you need to present the system design ideas to your customers and to look for their consent.
Playing wireframes
- Access the user story scenario of a user story.
- Click on the first step of the scenario.
User story scenario - Move the mouse pointer over the Show Wireframe button (i.e. the green button) on the right hand side of the step. Click on it.
Show wireframe of a step in user story scenario - The preview of wireframe is now shown on the right hand side. On top of it there is a play button. Click on it.
Play wireframes - This opens the wireframe player. The wireframe of the first step is shown in the player.
Playing a wireframe
You can move on to the next wireframe by pressing the Right key or clicking on the arrow button at the bottom left of the player. Similarly, you can press the Left key or click on the back button at the bottom left of the player to move to the previous wireframe. Note that when the flow comes to a condition (e.g. if-then-else) or looping (e.g. while) control, you have to decide the next step by selecting the step to take on the right hand side of the player.
Move to the next wireframe
Showing Annotations
To keep the wireframe clear and readable, annotations are hidden by default. You may click on the Show Annotations button t the bottom left of the player to have them visible. Let's show the annotations.
 |
| Show annotations |
Ending the Show
You can end the show anytime by pressing the Esc key. When it arrives the final wireframe, you can also exit by clicking on the Exit button at the bottom left of the player.
 |
| Exit playback |
Related Resources
The following resources may help you to learn more about the topic discussed in this page.
| 12. Perform scenario-based wireframing | Table of Contents | 14. Adding storyboard to user stories |
