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 as well.

In this tutorial, we’ll 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 mobile prototype. To create a contact, drag a Rectangle widget, an Image widget (to represent your contact avatar), a Paragraph widget (rename it with the contact’s name and location), an icon that represents the ‘delete’ icon, and a Hotspot widget (position it over the delete button) to the Canvas.1-mobile-wireframe-confirmation-pop-up-menu
  2. Select all of these elements and group them together.Group selection
  3. Copy and paste the group to create duplicate contacts, changing the contact avatar, name and location each time.3 groups of contacts
  4. Now, select each group, right-click, and select ‘Group in Dynamic Panel’. Center the Dynamic Panel on the screen and change the layout to vertical.2-2-mobile-wireframe-confirmation-pop-up-menu
  5. Now we’ll create the confirmation pop up modal window. 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 match the Canvas size change its transparency to 80% in the Properties palette.Modal shadow
  6. Next, drag another Rectangle to the Canvas, place it in the center of the screen and customize it to match our example.
  7. 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.
  8. Finally, add two Buttons on top of the white Rectangle. Name them ‘Cancel’ and ‘Delete’ respectively to match our example.3-mobile-wireframe-confirmation-pop-up-menu
  9. Group all of these elements together in a Dynamic Panel (including the modal rectangle and the dialog rectangle) and mark it as hidden in the Properties paletteHidden panel group
  10. Next, add a variable by clicking on the ‘+’ icon in the Variables palette. Name it ‘Row’ and give it a default value of “0”.4-mobile-wireframe-confirmation-pop-up-menu
  11. Finally, ensure that the Confirmation pop up is above the Contacts in the Outline palette.

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. Add an “On Tap” + “Hide” event, selecting the first contact group to be hidden. Below, add a “slide up” effect, and a linear easing at 300 ms.Hide contact event
  2. Back in the Events palette, click the “add condition” text. You’ll see the Conditional Expression builder appear. In the builder, first drag the ‘Row’ variable to the open space in the expression, followed by the ‘Equals’ function. Then, type the number ‘1’ into the open space that appears.Add a condition for hide event
  3. Back in the Events palette, right-click on the event you created and select “Add action after selected”. You’ll see the Events dialog appear. Add another “On Tap” + “Hide” event, this time selecting the Dynamic Panel containing the confirmation pop up to be hidden, with a fade effect of 300 ms.
  4. Back again in the Events palette, click the “Else” text. Add another “On Tap” + “Hide” event, this time selecting the second contact group to be hidden, with a slide up effect, and linear easing at 300 ms.
  5. Add a condition to this event. Drag the “Row” variable to the open space in the expression, followed by the “Equals” function, and the number “2” into the final space.Hide contact group condition
  6. 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.
  7. Next, select the “Cancel” button from the confirmation pop up and add another “On Tap” + “Hide” event, selecting the Dynamic Panel containing the confirmation pop up to be hidden. Below add a “fade” effect at 300 ms.6-mobile-wireframe-confirmation-pop-up-menu

Now, we’ll add events to the contacts.

  1. Select the Hotspot element in the first contact and create an “On Tap” + “Show” event, selecting the confirmation pop up to be shown with a fade effect at 500 ms.Tap Show Confirmation Delete
  2. Back in the Events palette, right click on the event you just created and select “Add action after selected”. Add an “On Tap” + “Set Value” event, selecting the “Row” variable from the variables tab as the target of the action. For the value, type the number “1”.Tap set value variable for contact
  3. Change the timing in between the events to “WITH previous”.
  4. 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 for the variable value, 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.