Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create a contact list in your interactive mobile app prototypes

Learn how to create and simulate a contact list in your interactive mobile app prototypes with the help of this tutorial. You can use the same steps to create a wish list or a to-do list too.

We use wish lists and to-do lists all the time on our mobile devices, from listening to a music playlist to browsing through our contact list. In this tutorial, we’re going to create a contact list that allows the user to delete or favorite a contact, as well as share it with other 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.

You can download the below example here.

interactive-protoypes-animation-gif-wishlist

 

Creating an interactive list in your mobile app prototypes

First we’ll drag all the components we need to the canvas.

1. Create a new iPhone 6 mobile app prototype. From the iPhone iOS9 widgets library, drag a Header Top widget to the canvas and place it at the top of the screen. Remove the buttons on the left and the right. This will be the header of our mobile app prototype.

2. Drag a Table widget from the Special components library onto the canvas and rename it “Contact-slide_1”. Add 4 columns and 1 row to your table. Click within the table and you will find that there are four cells named 1, 3, 5 & 7: rename them A, B, C & D respectively.

3. Resize the cells as follows: Cells A, C & D  to 70 x 70 px and Cell B to 375 x 70 px. Finally, reposition the table widget so that the vertical edges of Cell_B are in line with the vertical edges of the screen, as shown below in the image.

The table widget will display the contact’s information including name, location, contact avatar and interactive options: delete, favorite and share.

 

2-interactive-prototypes-wishlist-table-widget-ui

4. Select Cell_A and add a Delete button from the iPhone widget library. In the Properties tab, 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.

5. Now, select Cell_B and in the Properties tab>Layout, make the cell layout ‘free’. Drag a Hotspot, 2 Images and 2 Text widgets into it, placing the widgets within the cell to match our example. In the Properties tab, ensure that the hotspot is the first item in the cell (placed above the rest in the Outline tab) and resize it to fill the entire cell.

2a-interactive-prototypes-layout-settings

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. The hotspot will contain the events for all of this material. 

6. In the Image widget on the far left, add a contact avatar. In the Image widget on the far right, add an icon that will represent a ‘favorite’ contact, such as a star or a heart icon. This icon should be an SVG file so that you can change the color of the image. In the Properties tab, change the color of the SVG image to gray, to give it an ‘unselected’ appearance until it has been activated by the user.

7. In the top text widget, write the name of the contact and in the bottom, write their location.

8. Next, select Cell_C and drag an Image widget within it. Add the same SVG image that you used in Cell_B to represent a favorite contact. Change the color of the SVG file to yellow and add a background color to the cell (in our example, we’ve used blue).

When this cell is tapped, the ‘favorite’ image in Cell_B will be shown and the contact will be displayed as a favorite, (i.e. will change color to appear active).

9. Select Cell_D and drag another Image widget within it. Add an icon to the Image that will represent a contact sharing icon, to match our example. 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.

3a-interactive-prototypes-wishlist

10. Right click on the table widget and select the option ‘Group in dynamic panel’. Change the height of the dynamic panel to 604 px and ensure that the bottom edge of the dynamic panel rests on the bottom edge of the canvas.

8a-interactive-prototypes-wishlist-group-widgets

11. Finally, add a Floating Menu widget from the iPhone iOS9 widgets library. In the Properties tab, mark it as hidden and resize it to match our example (375 x 667 px). Customize it with images and buttons to create a contact sharing pop up menu as we have in the right screen of the image below. Ensure that it is not placed in the dynamic panel. 

7-interactive-prototypes-wishlist-share-menu

Ensure that the order of the components in the Outline tab are as follows:

  • Contact share pop up menu
  • Header
  • Dynamic panel

Adding swipe events to make your list interactive

First of all, we’re going to create the event that will make the favorite and share options appear on the right when the user swipes left.

  • Go to Cell_B in the Table widget and select the Hotspot widget.
  • Go to the Events tab and create an ‘On Swipe Left + ‘Move’ event, selecting “Contact-slide_1” as the component that will be swiped from the Outline tab.
  • Below, set the left position to fixed; -140px and the top to current. Add a ‘Linear’ easing effect at 300ms. Click OK.

9-interactive-prototypes-events

  • On the left of this event, select the ‘add condition’ option and build the following expression:

Drag ‘Contact-slide_1’ to the expression builder, followed by ‘=’ and the type ‘0’ into the text box that follows. Click OK.

10-interactive-prototype-event

  • Now, click on the ‘Else’ option on the left of the event you’ve created created. Add another ‘On Swipe Left + ‘Move’ event, selecting “Contact-slide_1” as the component that will be swiped.
  • This time, leave the left position as fixed; 0px and set the top to current. Add a ‘Linear’ easing effect at 300ms. Click OK. On the right of this event, select the ‘Else add condition’ option and build the following expression:

Drag ‘Contact-slide_1’ to the expression builder from the Outline tab, followed by ‘=’ and the type ‘70’ into the text box that follows. Click OK.

Next, we’re going to create the event that will make the delete option appear on the left when the user swipes right.

  • Go to the Events tab and create another event. This one will be an ‘On Swipe Right’ + ‘Move’ event, selecting “Contact-slide_1” as the component that will be swiped.
  • Below, set the left position to fixed; 70px and the top to current. Add a ‘Linear’ easing effect at 300ms. Click OK. On the right of this event, select the ‘add condition’ option and build the following expression:

Drag ‘Contact-slide_1’ to the expression builder, followed by ‘=’ and the type ‘0’ into the text box that follows. Click OK.

  • Now, click on the ‘Else’ option on the left of the event you’ve created created. Add another ‘On Swipe Right’ + ‘Move’ event, selecting “Contact-slide_1” as the component that will be swiped.
  • This time, leave the left position as fixed; 0px and set the top to current. Add a ‘Linear’ easing effect at 300ms. Click OK. On the right of this event, select the ‘Else add condition’ option and build the following expression:

Drag ‘Contact-slide_1’ to the expression builder, followed by ‘=’ and the type ‘-140’ into the text box that follows. Click OK.

The final touches! Almost there :)

Now, we’ll create an event that will ensure that the contact is deleted upon tapping the delete icon.

1. Go to Cell_A and select the delete icon image.

2. Go to the Events tab and create an ‘On Tap’ + ‘Hide’ event, selecting ‘Contact-slide_1’ as the component to be hidden.

3. Below, add a ‘slide up’ effect with a ‘Linear’ easing effect at 300ms. Click OK.

The following event will ensure that the star in Cell_B will become active (yellow) upon tapping the star in Cell_C.

1. Go to Cell_C and select the favorite star icon image.

2. Go to the Events tab and create an ‘On Tap’ + ‘Change Style’ event, selecting the favorite star icon in Cell_B as the component to change the style of.

3. Below, tick the color option and make the color change to yellow. Click OK.

The following event will ensure that the contact sharing pop up menu appears upon tapping on the contact sharing image in Cell_D.

1. Finally, select the contacting sharing image in Cell_D and create an ‘On Tap’ + ‘Show’ event, selecting the pop up Floating Menu as the component that will be shown upon simulation.

2. Below, add a ‘fade’ effect at 500ms. Click OK.

Right click on the Table widget 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!

 

Next tutorial > Create an interactive list with multiple tabs