Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create and simulate a chat app in your mobile prototypes

Learn how to create and simulate an instant messaging chat app in your mobile prototypes with the help of this tutorial.

Design an instant messaging app with interactive elements such as events and conditions to it to make it usable. Follow the steps below to do so.

You can download the below example here.

chatbubble-anim

1. Create a new iPhone mobile app prototype.

2. From the Bars, Menus and Tabs section of the iPhone iOS widget library, choose a header for your screen and drag it to the top of the canvas. We’ve used the ‘Header top’ bar.

3. Next, drag a button to the canvas. Rename it “SEND”. This will be the button that the user taps to send each message. Resize it (78 x 69 pixels).

4. Now, drag an input text field to the canvas. Resize it (298 x 69 pixels). Place the button and the input text field at the bottom of the screen to match the image below.

1-create-and-simulate-a-chat-app-in-your-mobile-prototypes

5. Now, group the button and the input text title together. Rename this group ‘Input-text-box’.

6. We’ll add a data master that allows us to create the actual chat elements:

  • Go to the Data Master tab in the user interface and add a new data master (+). Name it ‘Chat’.
  • Add three fields: Text, Time and Toggle. Change the Toggle field’s type to “True/False.”

3-3-create-and-simulate-a-chat-app-in-your-mobile-prototypes

  • Click OK and then double click on the data master to reopen it and select the “view and edit records” tab. Type an opening message into the first Text field, e.g. “Hi, what’s going on?”, and click OK.

7. Next, drag a rectangle widget to the canvas and place it above the Input-text-box widget group – this is the background of your chat bubble. Resize it (271 x 94 pixels), make it white and make its edges round. Now, drag a triangle to the right edge of the rectangle, resize it (27 x 19 pixels) and make it white – this simply compliments the call-out shape of the chat bubble and is an optional element. If you do add the triangle, group these elements together and rename the group ‘Bubble-right’.

8. Back in the canvas, drag a Data Grid widget to it. In the dialog that appears, write ‘messenger’ in the Identifier field. From the Data Masters drop down, select your ‘Chat’ data master. Below, move the Text and Time data master fields from left to right, and click OK. Now, position the data grid on the canvas on top of the ‘Bubble-right’ widget group. In the Properties tab, reduce the number of columns and cells in the grid to 1 and resize the grid it (373 x 124 pixels), to match our example.

4-4-create-and-simulate-a-chat-app-in-your-mobile-prototypes

9. Now, go to the Outline tab and open the “Grid_cell” from within your data grid. Delete the ‘Time’ text box. Next, rename the Value of the ‘Text’ text box as the name of one of the users you wish to display.

5-1-1-create-and-simulate-a-chat-app-in-your-mobile-prototypes

10. Add an Image widget to the canvas, place it above the button in the Input-text-box widget group, on the right of the Bubble-right widget group. Choose an image from your folders that will serve as the first user’s chat avatar. Resize it (43 x 45 pixels).

11. Group all elements that are currently within the data grid – image, inputs, text box and Bubble-right widget group – together inside a dynamic panel (Right click and “Group in dynamic panels”), “Dynamic_Panel_1”. Position the image as the first element within the group and the rest to match our example. 

Important: ensure that the dynamic panel is positioned within “Grid_cell” within the data grid in the Outline tab.

12. Now, right click on Panel 1 and select “Duplicate panel”. Here, change the user avatar image and input field that contains the name to represent the second user in your chat. You can also change the position of the chat bubble, the name and the image so that the chat aligns to the left this time.

Tip: hide the elements inside the dynamic panel that you don’t wish to edit whilst you move the ones you do want to around.

5-2-create-and-simulate-a-chat-app-in-your-mobile-prototypes

13. Now, create another dynamic panel. Resize it (375 x 531 pixels), change the layout to Vertical, and change the alignment to Bottom. Place the data grid inside this in the Outline tab.

5-3-create-and-simulate-a-chat-app-in-your-mobile-prototypes

14. Finally add two variables in the Variables tab: name them “Chat-text” and “Toggle-variable” respectively. The default value of the Toggle variable should be ‘2’.

Ensure that your UI elements follow the same hierarchy as below:

7-7-create-and-simulate-a-chat-app-in-your-mobile-prototypes


Adding events to your prototype to make it interactive

First, we’ll add events to the input text field where the user will input their message so that it appears on screen. 

  • Select the input text field from within the ‘Input-text-box’ widget group and go to the Events tab. Add an “On Page Load” + “Set Value” event, selecting the input text field from the Outline tab (from within the Input-text-box group). Below, set the value to Calculated and drag the “Chat-text” variable to the expression builder and click OK.
  • Right click on this event to add another “On Page Load” + “Set Value” event, selecting the “[Chat.Time]” input text field from Panel 1. Below, set the value to Calculated and add the following condition:

Drag the SUBSTRING function to the first position of the expression builder. Drag the SYSTEM HOUR (TIME) constant to the second, followed by two TEXT constants. Type the value ‘0’ into the first ‘5’ into the second and click OK twice.

  • Add another event now (“Add Event”): it will be an “On Focus In” + “Move” event, with ‘Input-text-box’ selected in the Outline tab. Below, change the top position to 390 pixels and add a linear easing effect at 200 ms. Click OK.
  • Add another event now (“Add Event”): it will be another “On Focus Out” + “Move” event, with ‘Input-text-box’ selected in the Outline tab. Below, change the top position to 599 pixels. Click OK.
  • On the left of this event add the following condition:

Drag the input text field from ‘Input-text-box’ in the Outline tab to the first position of the expression builder. Next, drag the EQUALS function, followed by TEXT constant from the Constants tab. Click OK.

9-create-and-simulate-a-chat-app-in-your-mobile-prototypes

  • On the right of this event, select the option “Else”. Add another “On Focus Out” + “Move” event, with ‘Input-text-box’ selected in the Outline tab. Below, change the top position to 599 pixels. Click OK.
  • Right click on the event you’ve just created and choose the “Add action after selected”. This will be an “On Focus Out” + “Data Master Action” event, and you’ll need to select the “New” option. In the dialog that appears, add the following expression:

Drag the input text field from ‘Input-text-box’ to the first position (Text) of the expression builder, and drag the Toggle variable to the third (Toggle) – leave the second empty. Click OK.

  • Right click on this event to add another: “On Focus Out” + “Set Value” with the ‘Messanger’ data grid selected from within the dynamic panel. Click OK. Change the link between the last two events to “WITH previous”.

8-8-create-and-simulate-a-chat-app-in-your-mobile-prototypes

  • Right click on this event to add another: “On Focus Out” + “Set Value” with the input text field from ‘Input-text-box’. Click OK. Change the link between the last two events to “WITH previous”.

Tip: If you want to add a scroll anchor: drag a rectangle to the canvas and place it above the button and ‘Input-text-box’, and below ‘Messenger’. Resize it (375 x 6 pixels) and make it transparent. Add it to the dynamic panel that contains ‘Messenger’ and place it on top of the data grid in the Outline tab. Then, add the following event:

  • Right click on the previous event to add another: “On Focus Out” + “Scroll To” with the rectangle you’ve just created from withing the external dynamic panel selected. Select “Horizontal and vertical” from the “Direction” drop down and click OK.

10-10-create-and-simulate-a-chat-app-in-your-mobile-prototypes

  • Right click on this event (or the last “On Focus Out” + “Set Value” if you didn’t add the scroll event), to add another: “On Focus Out” + “Set Value” with the “[Chat.Time]” input text field from Panel 1 selected. Below, set the value to Calculated and add the following expression:

Drag the SUBSTRING function to the first position of the expression builder. Drag the SYSTEM HOUR constant to the second, followed by two TEXT constants. Type the number ‘0’ into the first ‘5’ into the second and click OK twice.

  • Right click on this event to add another: “On Focus Out” + “Set Value” with the “[Chat.Time]” input text field from Panel 2 selected. Below, set the value to Calculated and add the following expression:

Drag the SUBSTRING function to the first position of the expression builder. Drag the SYSTEM HOUR constant to the second, followed by two TEXT constants. Type the value ‘0’ into the first ‘5’ into the second and click OK twice.

13-create-and-simulate-a-chat-app-in-your-mobile-prototypes

Almost there!

  • Add a new event series now by clicking on the “Add Event” link. It will be another “On Focus Out” + “Set Value”, this time selecting the Toggle-variable from the Variables tab. Below, leave the value as fixed and enter the number ‘2’ into the text field and click OK.
  • On the left of this event, add the following condition:

Drag the Toggle-variable to the first position of the expression builder, followed by the EQUALS function and then a TEXT constant. Type the value ‘1’ into the text constant and click OK.

  • On the right of this event, select the option “Else”. Add another “On Focus Out” + “Set Value”, this time selecting the Toggle-variable from the Variables tab. Below, leave the value as fixed and enter the number ‘1’ into the text field and click OK.

11-create-and-simulate-a-chat-app-in-your-mobile-prototypes

The final events we create will ensure that the second chat bubble (of the other user) appears when a second message is inputted. 

  • Back in the canvas, navigate to the “Grid_cell” and go back to the Events tab. Add an “On Data Change” + “Set Active Panel” event, selecting Panel 2 from the Outline tab. Click OK.
  • On the left of this event, add the following condition:

Drag the SELECT function to the first position of the expression builder. Drag the “Grid_cell” from the Outline tab to the second, followed by the “toggle” data master field from the Data Masters tab, followed by the EQUALS function and finally a TEXT constant. Type the value ‘2’ in the TEXT constant. Click OK.

12-create-and-simulate-a-chat-app-in-your-mobile-prototypes

  • Finally, on the right of this event, select the option “Else”. Add another “On Data Change” + “Set Active Panel” event, selecting Panel 1. Click OK.

And that’s it! Click ‘Simulate’ to see and interact with your mobile app prototype. Click in the white text area at the bottom of the screen, type a message with the keyboard that appears and start chatting.