Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create a countdown clock in your interactive prototypes

Learn how to create and simulate a countdown clock in your interactive prototypes with the help of this tutorial.

With Justinmind, you can create and share your own countdown to anything. In this example, we create a download countdown using variables and conditions. Follow the steps below to replicate our example.

You can download the below example here.

interactive-prototypes-countdown-with-variables

Creating a countdown clock

1. Open a new iPhone 6 mobile app prototype and add a second screen.

2. In Screen 1, add a background image and a status bar. Copy these elements over to Screen 2.

3. Back in Screen 1, drag rectangle, ellipse and text box widgets to the canvas to replicate the main display in our example. You will need to write the number of seconds you wish your countdown to count down in the text box within the ellipse. The top text box should contain a welcome message for the user, explaining to them what they are waiting for.

4. Go to Screen 2 and drag rectangle, ellipse and text box widgets to the canvas to replicate the main display in our example. Add a text box at the bottom and rename it ‘Back’ so that the user can return to the first screen.

1-interactive-prototypes-countdown-with-variables

5. Next, drag a Dynamic Panel to the canvas and place it below the elements from Step 3, to match our example.

6. Double click in the Dynamic Panel to edit its contents an drag a button and text box widget to the panel. Rename the button ‘Start Download’ (or your equivalent call to action for the user). Change the color of the button to gray, to represent that it’s not clickable. In the text box, write ‘After xx seconds you can start downloading’ (‘xx‘ should be the count down amount).

7. Now, add an additional panel to the Dynamic Panel and copy the button and text box to it. Change the color of the button to black, to represent that it’s clickable. In the text box, write ‘Reset Link’ (when the user clicks on this link, the page will reload and the countdown will restart).

2-interactive-prototypes-countdown-with-variables

8. Finally, create a variable in the Variables tab. Name it ‘Countdown’ and write the countdown amount + 1 as the Default value.

3-interactive-prototypes-countdown-with-variables

Adding events to make your prototype interactive

First of all, well add events to Screen 1 to make the countdown start automatically upon page load.

  • Select Screen 1 in the Outline tab and then go to the Events tab. Add an “On Page Load” + “Set Value” event, selecting the variable from the Variables tab. Below, set the value as Calculated and add the following expression:

Drag the countdown variable to the first position from the Variables tab, followed by the MINUS function and then write the number ‘1’ in the final position. Click OK twice.

4-interactive-prototypes-countdown-with-variables

  • Add another event. Select “On Variable Change” from the first drop down and from the “Select a variable” drop down, select your “Countdown” variable. In the last drop down, select “Set Value”. Below, select the text box that contains the number of seconds you wish your countdown to count down. Set the value as Calculated and add the following expression:

Drag the countdown variable to the first position from the Variables tab. Click OK twice.

  • On the left of this event, add the following condition:

Drag the countdown variable to the first position from the Variables tab, followed by the GREATER OR EQUALS function and then write the number ‘0’ in the final position. Click OK.

  • Right click on the event you’ve just created and select ‘Add action after selected’. Leave the “On Variable Change” in the first drop down and the “Countdown” variable in the “Select a variable” drop down. In the last drop down, select “Pause”. Change the number of milliseconds you want between each number your prototype counts down. Click OK.
  • Right click on this event and select ‘Add action after selected’. Leave the “On Variable Change” in the first drop down and the “Countdown” variable in the “Select a variable” drop down. In the last drop down, select “Set Value”. Select the variable from the Variables tab. Below, set the value as Calculated and add the following expression:

Drag the countdown variable to the first position from the Variables tab, followed by the MINUS function and then write the number ‘1’ in the final position. Click OK twice.

  • Now, add another event: Select “On Variable Change” from the first drop down and from the “Select a variable” drop down, select your “Countdown” variable. In the last drop down, select “Set Active Panel”. Below, select Panel 2 as the active panel. Click OK.
  • On the left of this event, add the following condition:

Drag the countdown variable to the first position from the Variables tab, followed by the EQUALS function and then write the number ‘0’ in the final position. Click OK.

5-interactive-prototypes-countdown-with-variables

Next, we’ll add events to the ‘Reset Link’ text box so that the user can reload the countdown.

  • Select the ‘Reset Link’ text box from Panel 2 of the Dynamic Panel and add an “On Tap” + “Set Value” event, selecting the variable. Below, leave the value as fixed but write the number your prototype counts down from (in this example, write ’10’). Click OK.
  • Right click on the event you’ve just created and select ‘Add action after selected’. Add an “On Tap” + “Set Active Panel” event, selecting Panel 1 as the active panel. Click OK.

6-interactive-prototypes-countdown-with-variables

Now, we’ll add Linking events to the remaining buttons so that the user can move back and forth between screens.

  • Select the button from Panel 2 and drag it to Screen 2 in the Screens tab. Then, in the events tab, double click on the event to edit it and add a Slide Left transition effect. Click OK.
  • In Screen 2, select the ‘Back’ text box and drag it to Screen 1 in the Screens tab. In the events tab, double click on the event to edit it and add a Slide Right transition effect. Click OK.

7-interactive-prototypes-countdown-with-variables

And that’s it! Click ‘Simulate‘ to see and interact with your prototype. When you load the simulation, your countdown should begin automatically. When the countdown is complete, you will be able to reset the countdown or click the button to move to the next screen. In Screen 2, you can navigate back to Screen 1 by clicking the ‘Back’ button.

 

Next tutorial > Design an automatic slideshow using variables