Designing a confirmation message

With Justinmind, you can create and simulate a confirmation message. You can use the same steps to create a wish list or a to-do list too.

In this tutorial, we’re going to create a contact list with a confirmation message that allows the user to delete a contact. We’ll use On Tap Show and Hide events.

1-mobile-wireframe-confirmation-pop-up-menu-animation

Designing a confirmation pop up in your prototype

    1. Create a new iPhone prototype. From the iPhone iOS9 widgets library, drag a status bar widget to the canvas and place it at the top of the screen.
      • This will be the header of our mobile app prototype.
    2. To create a contact, drag the following widgets to the canvas in descending order and position them to match our example: 
      • A Rectangle widget (resize it to 375 x 53 px), an Image widget to represent your contact avatar (add the image from your folders and resize it to 53 x 53 px), a Paragraph widget (rename it with the contact’s name and location), an SVG vector that represents the ‘delete’ icon, and a Hotspot widget (resize it to 53 x 50 px and position it over the delete button).
      • 1-mobile-wireframe-confirmation-pop-up-menu
    3. From the Outline palette, select all of these elements and group them together.
    4. Copy and paste the group to create duplicate contacts, changing the contact avatar, name and location each time.
    5. Now, group all the contacts in a dynamic panel.
      • Center the Dynamic Panel on the screen and change the layout to vertical.
      • 2-2-mobile-wireframe-confirmation-pop-up-menu
    6. Now we will create the confirmation pop up.
      • To do so, drag a Rectangle widget to the canvas and customize it to match our example: change its color to gray, resize it to 375 x 667 px (i.e. the screen size) and – from the Background properties – change its transparency to 80%.
    7. Next, drag another Rectangle to the canvas, place it in the center of the screen and customize it to match our example: resize it to 311 x 326 px, change the background color to white and make the borders round.
      • Mark it has hidden in the Properties palette.
    8. Add a Paragraph widget for the confirmation warning on top of the white Rectangle.
      • Rename it with the warning, ours reads: “Are you sure you want to delete this contact?
      • This action cannot be undone.”Next, drag an image widget to refer to the action of deleting a contact.
      • Finally, add two Buttons on top of the white Rectangle.
      • Name them ‘Cancel’ and ‘Delete’ respectively to match our example.
    9. Group all of these elements together in a Dynamic Panel (incl. both rectangles) and mark it as hidden in the properties tab.
      • In the ID field, rename the Dynamic Panel “Confirmation_pop_up”.
      • 3-mobile-wireframe-confirmation-pop-up-menu
    10. Next, add a variable by clicking on the ‘+’ icon in the Variables palette.
      • Name it ‘Row’ and type the numbers ‘0’ into the Default value box.
      • 4-mobile-wireframe-confirmation-pop-up-menu
    11. Finally, ensure that the order of the components in the Outline paletteare as follows:
      1. Confirmation pop up
      2. status bar
      3. Dynamic Panel

Adding events to your prototype

First, we’ll add events to the confirmation pop up:

  1. From the confirmation pop up, select the “Delete” button and go to the Events palette.
  2. Add an “On Tap” + “Hide” event, selecting the first group from the Dynamic Panel from the Outline palette.
    • Below add a “slide up” effect, and a linear easing at 300 ms. Click “OK”.
  3. On the left of this event, click the “add condition” link and add the following expression:
  4. Drag the ‘Row’ variable to the first position, followed by the EQUALS function, and type the number ‘1’ into the final position. Click “OK”.
  5. Now right click on the event and select the “Add action after selected” option.
  6. Add another “On Tap” + “Hide” event, this time selecting the panel containing the confirmation pop up. 
    • Below add a fade effect at 300 ms. Click “OK”.
  7. On the right of this event, select the “Else” option.
  8. Add another “On Tap” + “Hide” event, this time selecting the second group from the dynamic panel. 
    • Below add a slide up effect, and a linear easing at 300 ms. Click “OK”.
  9. On the left of this event, click the “add condition” link and add the following expression:
  10. Drag the “Row” variable to the first position, followed by the “Equals” function, and type the numbers “2” into the final position. Click “OK”.
  11. Repeat the above steps for your remaining contact groups, changing the relevant group to be hidden and the number in the expression in each instance.
  12. Next, select the “Cancel” button from the confirmation pop up and add another “On Tap” + “Hide” event, selecting the panel containing the confirmation pop up. 
    • Below add a “fade” effect at 300 ms. Click “OK”.
    • 6-mobile-wireframe-confirmation-pop-up-menu

Now, we’ll add events to the contacts.

  1. From the Dynamic panel, Select any item in the first group and return to the Events palette.
  2. Add an “On Tap” + “Show” event, selecting the confirmation pop up. 
    • Below add a fade effect at 500 ms. Click “OK”.
  3. Right click on the event and select the “Add action after selected” option.
  4. Add an “On Tap” + “Set Value” event, this time selecting the “Row” variable from the variables tab.
    • Below type the numbers ‘”1″ into the input text field and click “OK”.
  5. Change the link in between the events to “WITH previous”.
    • 5-mobile-wireframe-confirmation-pop-up-menu
  6. Repeat the above steps for your renaming contact groups, changing the number in the input text field accordingly.
    • For example in the event for group 2, type 2, in group 3, type 3 and so on.

And that’s it! Click “Simulate” to view and interact with your prototype. Upon simulation, you can click on the delete icon and a confirmation pop up will appear prompting you to either delete the contact or cancel the action.

You can download our example here.