Justinmind

SUPPORT

Learn how to prototype web and mobile apps

Create a product walkthrough in your mobile app prototypes

In this tutorial, learn how to create a simple walkthrough for a mobile app prototype using Dynamic Panels and On Swipe events.

Walkthroughs and guided tours are helpful tools for user onboarding. In our example, we create a beverage walkthrough in which the user can follow instructions to enjoy their drink, by swiping between screens. To replicate our example, follow the steps below.

You can download the example below here.

0-interactive-prototype-walkthrough-mobile-app-prototype

Creating a walkthrough in your mobile app prototype

1. Open a new iPhone 6 mobile app prototype. From the Outline tab, customize the style of the Screen as desired. In our example, we have made the Background color yellow.

2. Drag a Dynamic Panel to the canvas, resize it to 375 x 503 pixels, and position it in the center of the iPhone screen.

3. Double click in the Dynamic Panel to edit its contents and drag an Image widget and Paragraph widget into it. Resize them to match our example. Add an image to represent the first screen of your walkthrough and add the text you wish to display in the first screen in the Paragraph widget.

4. Right click on Panel 1 in the Outline tab and duplicate the panel twice so that you have three panels in total. Replace the images and text in the second and third panels to represent your second and third screens.

5. Below the Dynamic Panel, drag three ellipse widgets to the canvas, resize them and align them horizontally to match our example by using the Align option in the top toolbar.

6. Make the left ellipse yellow, and the other two gray. Then, select all three ellipses and group them together by right clicking and choosing the ‘Group’ option. Each ellipse corresponds to a screen: the left ellipse to the left screen (Panel 1), the center ellipse to the center screen (Panel 2), and the right ellipse to the right screen (Panel 3).

1-interactive-prototype-walkthrough-setup

7. Finally, add a rectangle behind the ellipses, resize it to 375 x 224 pixels, and change its style as desired. In our example, we have made the Background color white.

2-2--interactive-prototype-walkthrough-setup

Adding events to your prototype to make it interactive

We will now add events to the panels in the Dynamic Panel to allow the user to swipe between them.

1. Select Panel 1 from the Outline tab and go to the Events tab. Add an “On Swipe Left” + “Set Active Panel”, selecting Panel 2. Below, add a ‘Slide left’ transition effect and click OK.

2. Add another action: Right click on this event and select the ‘Add action after selected option. Add an “On Swipe Left” + “Change Style” event, selecting the ellipse on the left. Below, tick the Background box and change the color to gray. This will change the left ellipse to gray, signifying that it is not currently visible when the user has swiped away from the left screen.

3. Add another “On Swipe Left” + “Change Style” event, this time selecting the center ellipse. Below, tick the Background box and change the color to yellow. This will change the center ellipse to yellow, signifying that it is currently visible when the user swipes to this screen. Change the links between the events to ‘WITH previous’.

3-interactive-prototype-walkthrough-event

4. Copy these events to Panel 2, changing the active panel and the dots in the change style events.

5. Go to Panel 2 and add an “On Swipe Right” + “Set Active Panel”, selecting Panel 1. Below, add a ‘Slide right’ transition effect and click OK.

6. Add another action: Right click on this event and select the ‘Add action after selected option. Add an “On Swipe Right” + “Change Style” event, selecting the ellipse on the left. Below, tick the Background box and change the color to yellow. This will change the left ellipse to yellow, signifying that it is currently visible when the user swipes to this screen.

7. Add another “On Swipe Right” + “Change Style” event, this time selecting the right ellipse. Below, tick the Background box and change the color to gray. This will change the right ellipse to gray, signifying that it is currently visible when the user has swiped away from the right screen. Change the links between the events to ‘WITH previous’.

4-interactive-prototype-walkthrough-event

8. Finally, copy these events to Panel 3, changing the active panel and the dots in the change style events.

And that’s it! Click ‘Simulate‘ to see and interact with your prototype. You will be able to swipe left and right between screens to view the content on each screen. The ellipses will change color depending on the screen you are viewing.

 

Next tutorial > Create a drop-down menu in your web wireframes