Designing a countdown timer

With Justinmind, you can create a countdown clock in your prototypes. In this example, we create a countdown timer that estimates the remaining time for a file download, using variables and conditions.

interactive-prototypes-countdown-with-variables

To create a countdown timer in your prototype, follow the steps below:

Designing your countdown clock

  1. Create a new iPhone mobile app prototype.
    • Go to the Screens palette and add a second screen by clicking on the ‘+’ icon.
  2. In Screen 1, add a background image and a status bar.
    • Copy these elements over to Screen 2. You can navigate to Screen 2 by clicking on it in the Screens palette.
  3. Back in Screen 1, drag Rectangle, Ellipse and Text widgets to the canvas to replicate the main display in our example.
    • You will need to write the number of seconds you wish your timer 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 again drag Rectangle, Ellipse and Text widgets to the canvas to replicate the main display in our example.
    • Add a Text widget at the bottom of the canvas and rename it “Back”. This will allow the user to return to the first screen if clicked on during simulation.
    • 1-interactive-prototypes-countdown-with-variables
  5. Next, drag a Dynamic Panel to the canvas and place it below the elements created in step four, to match our example.
  6. Double click on the Dynamic Panel to edit its contents and drag Button and Text widgets to the it.
    • Rename the Button “Start Download” (or a similar call-to-action).
    • Change the color of the Button to gray (to show that it’s not clickable).
    • In the Text box, write “After xx seconds you can start downloading” (“xx” should be the count down amount you entered in step three).
  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 show 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, go to the Variables palette and create a variable.
    • 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

  1. First of all, well add events to Screen 1 to make the countdown start automatically upon page load.
    • Select Screen 1 in the Outline palette and then go to the Events palette.
    • Add an “On Page Load” + “Set Value” event, selecting the variable from the Variables palette.
    • Below, set the value as “Calculated”. When the Expression builder appears, create the following expression: 
    • Drag the variable from the Variables tab to the term in the conditional expression.
    • Next, drag “Minus” function to the next term, and write the number ‘1’ in the final term.
    • Click “OK” twice.
    • 4-interactive-prototypes-countdown-with-variables
  2. Add another event. 
    • Select “On Variable Change” from the first drop down and from the “Select a variable” drop down, choosing 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. 
    • Below, set the value as “Calculated”. When the Expression builder appears, create the following expression: 
    • Drag the variable from the Variables tab to the term in the conditional expression. 
    • Click “OK” twice.
  3. On the left of this event, click the “add condition” link. When the Condition builder appears, create the following condition:
    • Drag the variable from the Variables tab to the term in the conditional expression.
    • Next, drag the “Greater or equals” function to the next term, and then write the number ‘0’ in the final term.
    • Click “OK”.
  4. 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. This should be the number if seconds you entered in step three of the first section of this tutorial.
    • Click “OK”.
  5. Right click on this event and select “Add action after selected” again.
    • 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”. When the Expression builder appears, create the following expression: 
    • Drag the variable from the Variables tab to the term in the conditional expression. 
    • Next, drag “Minus” function to the next term, and write the number ‘1’ in the final term
    • Click “OK” twice.
  6. 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”.
  7. On the left of this event, click the “add condition” link. When the Condition builder appears, create the following condition:
    • Drag the variable from the Variables tab to the term in the conditional expression.
    • Next, drag the “Equals” function to the next term, and then write the number ‘0’ in the final term.
    • Click “OK”.
    • 5-interactive-prototypes-countdown-with-variables
  8. 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”.
  9. 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
  10. 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 palette.
    • Then, in the Events palette, double click on the event to edit it and add a “slide left” transition effect.
    • Click “OK”.
  11. In Screen 2, select the “Back” Text box and drag it to Screen 1 in the Screens palette.
    • In the Events palette, 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.

You can download our example here.