Designing a contact list

With Justinmind, you can create a contact list in your mobile prototypes. You can use the same steps to create a wish list or a to-do list too.

In this tutorial, we’ll create a contact list that allows the user to delete or favorite a contact, as well as share it with other mobile users. We’ll use On Swipe Left & Right mobile gestures to allow the user to drag the screen from one side to another, and use the options available in each location.interactive-protoypes-animation-gif-wishlist

To create a contact list in your prototype, follow the steps below:

Designing your contact list

  1. Create a new mobile prototype. Drag a a header and place it at the top of the Canvas. Ours is from the iOS widget library.
  2. Drag a Table widget to the Canvas and rename it “Contact-slide_1”. The Table will display the contact’s information including name, location, contact avatar and interactive options: delete, favorite and share.
  3. Change the table to contain four columns and one row. Click within the Table and you’ll find that there are four cells named 1, 3, 5 & 7.
  4. Resize the table cells as follows: Cells 1, 5 & 7  to 70 x 70 px and Cell 3 to 375 x 70 px. Finally, reposition the Table so that the vertical edges of Cell 3 are in line with the vertical edges of the Canvas, as shown below in the image.Drag and resize the table cells
  5. Select Cell 1 and add a Delete button to it. In the Properties palette, add a background color to the cell (in our example, we’ve used red). When this cell is tapped, the user will be able to delete the corresponding contact.Delete icon and color
  6. Now, select Cell 3 and in the Properties palette under Layout, change the cell’s layout to “Free layout”. This cell will display the contact information, including name, location, a contact avatar, and information about whether this contact has been favorited by the user. Drag an Image, two Text widgets, and a star icon into it, placing these elements within the cell to match our example.

    Write the name of the contact in the top text element, and the location in the bottom text element.Cell layout and contents
  7. Next, select Cell 5 and add the same SVG image that you used in Cell 3 to represent a favorite contact. Change the color of icon to white and add a background color to the cell (in our example, we’ve used blue).Star icon cell
  8. Select Cell 7 and drag in it an icon that will represent a contact sharing icon. Add a background color to the cell (in our example, we’ve used green). When this cell is tapped, a pop up will appear on the screen with options for the user to share this contact across a number of different mediums.Subscribe icon and layout
  9. Right click on the Table and select the option “Group in Dynamic Panel”. Change the height of the Dynamic Panel to ensure that the bottom edge of the Dynamic Panel rests on the bottom edge of the Canvas.8a-interactive-prototypes-wishlist-group-widgets
  10. Finally, we’ll add the pop-up sharing options. Add a Rectangle and Button widget near the bottom of the screen. Then, drag Image and Button widgets on the Rectangle. Select all the elements and group them together. Mark the group as hidden in the Properties palette.7-interactive-prototypes-wishlist-share-menu
  11. Go to the Outline palette and ensure that the order of the UI elements reads as follows: Contact share pop up menu, Header, Dynamic Panel.

Adding events to your contact list

  1. We’ll create the event that will make the favorite and share options appear on the right when the user swipes left. Select Cell 3 and create an “On Swipe Left” + “Move” event, selecting the “Contact-slide_1” group as the element that will be moved. Set the X position to -140 px fixed, and the Y position to current, with a “Linear” easing effect of 300 ms.Swipe left contact
  2. Back in the Events palette, click “add condition” text next to the event you just created. You’ll see the Conditional Expression builder appear. In the builder, drag the “Contact-slide_1” group to the open space in the expression and select ‘Pos.Xrelative’ from the term dropdown, followed by Equals (‘=’) function. Then, type ‘0’ into the open space that appears.10-interactive-prototype-event
  3. Back in the Events palette, click on the “Else” text. Add another “On Swipe Left” + “Move” event, again selecting the “Contact-slide_1” group as the element to be moved. This time, set the X position to 0 px fixed and Y position to current. Add a “Linear” easing effect of 300 ms.
  4. On the right of this event, select the “Else add condition” text, which will show the Conditional Expression builder. Drag the “Contact-slide_1” group to the open space in the expression, selecting the ‘Pos.Xrelative’ option from the term dropdown. Then, drag the Equals (‘=’) function next to it, and type ‘70’ into the open space that appears.Swipe left condition
  5. Next, we’ll create the event that will make the delete option appear when the user swipes right.

    Select the “Contact-slide_1” group and add an “On Swipe Right” + “Move” event, selecting the “Contact-slide_1” group to be moved. Below, set the X position to 70 px fixed and the Y position to current. Add a “Linear” easing effect of 300 ms.Swipe right move action contact
  6. Back in the Events palette, click the “add condition” text next to the event you just created, which will launch the Conditional Expression builder. In the builder, drag the “Contact-slide_1” group to the open space in the expression, selecting ‘Pos.Xrelative’ from the term dropdown. Then, drag the Equals (‘=’) function next to it, followed by ‘0’ in the open space that appears.Swipe right condition 1
  7. Again in the Events palette, click on the “Else” text. Add another “On Swipe Right” + “Move” event, selecting the “Contact-slide_1” group to be moved. Give the X position 0 px fixed, and the Y position current. Add a “Linear” easing effect at 300 ms.
  8. On the right of this event, select the “Else add condition” link. The Condition builder will appear. Drag the “Contact-slide_1” group to the open space in the expression, selecting ‘Pos.Xrelative’ from the term dropdown, followed by Equals (‘=’) function. Type ‘-140’ into the open space that appears.
  9. Now we’ll create an event that will delete the contact when the user clicks the delete icon.

    Go to Cell 1 and select the Delete icon image. Go to the Events palette and create an “On Tap” + “Hide” event, selecting the “Contact-slide_1” group as the component to be hidden. Below, add a “slide up” effect with a “Linear” easing effect at 300 ms.Hide contact event
  10. Next, we’ll create an event that will ensure that the star in Cell 3 will become active (yellow) upon tapping the star in Cell 5. Select the favorite Star icon image in Cell 5 and create an “On Toggle” + “Change Style” event, selecting the favorite Star icon in Cell 3 as the target. For the style change, change the color to yellow.Change the star style
  11. Select the contact sharing image in Cell 7 and create an “On Tap” + “Show” event, selecting the sharing pop up to be shown with a “fade” effect of 500 ms.Show share pop up
  12. Select the ‘Cancel’ button on the sharing pop up and create an “On Tap” + “Hide” event, selecting the sharing pop up group to be hidden.
  13. Right click on the Table and select “duplicate” to create more contacts. Be sure to change the contact avatar, name and location in the relevant cell in each instance.

And that’s it! Click “Simulate” to view and interact with your prototype

You can download our example here.