Designing a text messaging app

With Justinmind, you can simulate a text messaging app in your mobile prototypes.chatbubble-anim
To create a text messaging app in your prototype, follow the steps below:

Creating your mobile app

  1. Create a new mobile app prototype. Choose a header for your screen and drag it to the top of the Canvas. We’ve used the “Header top” widget from the iOS Widget library.
  2. Next, drag a Button widget and an Input Text Field the bottom of the Canvas to match the image below. Rename the Button “Send”. This will be the field and button that the user taps to send each message.1-create-and-simulate-a-chat-app-in-your-mobile-prototypes
  3. Now, group the Button and the Input Text Field together (right click in the selection and choose “Group”). Rename this group “Input-text-box” in the Properties palette.
  4. Create a Data Master  – learn how here. 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
  5. Look back to the Data Masters palette and double click on the Data Master to reopen it. Select the “View and edit records” tab and type an opening message into the first Text field, e.g. “Hi, what’s going on?”.
  6. Next, drag a Rectangle to the Canvas and place it above the “Input-text-box” group. This will be the background of your chat bubble. In the Properties palette, resize it, change its color to white and make its edges round.
  7. Optionally, you can drag a Triangle, which complements the call-out shape of the chat bubble to the right edge of the Rectangle, resize it and change its color to white. 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 the Canvas. Name it “Messenger” and select your Data Master and the ‘Text’ and ‘Time’ fields to populate the Data Grid. Position the Data Grid on the Canvas on top of the “Bubble-right” group.

    In the Properties palette, reduce the number of columns and cells in the grid to 1 and resize the grid to match our example.4-4-create-and-simulate-a-chat-app-in-your-mobile-prototypes
  9. Now, go to the Outline palette and open the “Grid_cell” from within your Data Grid. Delete the ‘Time’ text. 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, placing it above the Button in the “Input-text-box” group and on the right of the “Bubble-right” group. Choose an image that will serve as the first user’s chat avatar.
  11. Group all elements that are currently within the Data Grid – the Image, Input Text Fields, Text box and “Bubble-right” group – together inside a Dynamic Panel (Right click and select “Group in dynamic panel”). Position the Image as the first element within the group and the rest to match our example. Ensure that the Dynamic Panel is positioned within “Grid_cell” within the data grid in the Outline palette.Order in dynamic panel
  12. Now, right click on Panel 1 and select “Duplicate panel”. Here, change the user avatar image and Input Text 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.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 Layout”, and change the alignment to “Bottom”.5-3-create-and-simulate-a-chat-app-in-your-mobile-prototypes
  14. Place the Data Grid inside this new Dynamic Panel in the Outline palette.
  15. Finally go to the Variables palette and add two Variables: name them “Chat-text” and “Toggle-variable” respectively. The default value of the “Toggle-variable” should be ‘2’, while the “Chat-text” default value should be left blank.
  16. 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 make your prototype interactive

  1. First, we’ll add events to the Input Text Field where the user will input their message so that it appears on screen.

    To do so: select the Input Text Field from within the “Input-text-box” group and add an “On Page Load” + “Set Value” event, selecting the Input Text Field from the Outline palette (from within the “Input-text-box” group) as the target of the action. Below, select the ‘Calculated’ radio button and the ‘Add expression’ text. You’ll see the Calculated Expression builder appear.Set value to chat input
  2. In the builder, drag the “Chat-text” variable to the open space in the expression and click “OK”.Give input variable value
  3. Right click on this event to add another “On Page Load” + “Set Value” event, selecting the “[Chat.Time]” Input Text Field from Panel 1 as the target of the action.

    For the value, click ‘Calculated’ and ‘Add expression’. In the Calculated Expression builder, drag the “Substring” function to first open space in the expression. Drag the “System Time” constant to the first open space that appears. Then, type ‘0’ into the second open space, and ‘5’ into the third.Calculated system hour
  4. Add an “On Focus In” + “Move” event, with “Input-text-box” selected as the target to be moved. Below, change the X position to ‘Fixed’ with 0px, and the Y position to ‘Fixed’ with 390 px, and add a linear easing effect of 200 ms.
  5. Add an “On Focus Out” + “Move” event, with “Input-text-box” selected to be moved. Below, change the X position to ‘Fixed’ with 0px, and the Y position to ‘Fixed’ with 599 px.
  6. Back in the Events palette, click “add condition” next to the “On Focus Out” event you just created. In the Conditional Expression builder that appears, first drag the Input Text Field from “Input-text-box” in the Outline palette to the first open space in the expression, followed by the “Equals” function. Lastly, double click in the open space that appears, but leave its value blank.9-create-and-simulate-a-chat-app-in-your-mobile-prototypes
  7. In the Events palette, 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 – New” event. In the Calculated Expression builder that appears, drag the Input Text Field from “Input-text-box” group to the first open space in the expression, and the “Toggle -variable” variable to the third space. Leave the second space empty.
  8. Right click on this event and click ‘add action after selected’. Add an “On Focus Out” + “Set Value” with the “Messenger” Data Grid selected from within the Dynamic Panel as the target of the action. For the value, click the ‘From current Data Master’ radio button.
  9. Change the link between the last two events to “WITH previous”.8-8-create-and-simulate-a-chat-app-in-your-mobile-prototypes
  10. Right click on this event and click ‘add action after selected’. Add an “On Focus Out” + “Set Value” with the Input Text Field from “Input-text-box” group selected as the target of the action. Leave the value blank.
  11. Change the link between the last two events to “WITH previous”.
  12. If you want to add a scroll anchor: drag a Rectangle to the Canvas and place it above the Button and “Input-text-box” group, and below “Messenger”. Resize it (375 x 6 pixels) and make it transparent.
  13. Add it to the Dynamic Panel that contains “Messenger” and place it on top of the data grid in the Outline palette. 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 within 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
  14. 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 term in the conditional expression. 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.
  15. 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 term in the conditional expression. 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.13-create-and-simulate-a-chat-app-in-your-mobile-prototypes
  16. Now, add an “On Focus Out” + “Set Value”, this time selecting the Toggle-variable as the target of the action. For the value, type the number ‘2’.
  17. Back in the Events palette, click ‘add condition’ next to the event you just created. In the Conditional Expression builder, drag the Toggle-variable to the first open space of the conditional expression, followed by the “Equals” function. Type the number ‘1’ into the open space that appears.
  18. Back in the Events palette, click the ‘Else’ text. Add another “On Focus Out” + “Set Value”, again selecting the Toggle-variable as the target of the action. Type the number ‘1’ for the value.11-create-and-simulate-a-chat-app-in-your-mobile-prototypes
  19. The final events we’ll create will ensure that the second chat bubble (of the other user) appears when a second message is entered. 

    Back on the Canvas, select the “Grid_cell” and create an “On Data Change” + “Set Active Panel” event, selecting Panel 2 to be set as active.
  20. Create a condition for this event. In the Conditional Expression builder, drag the “Select” function to the open space in the expression. Drag the “Grid_cell” from the Outline palette to the second, followed by the “toggle” Data Master Field from the Data Masters tab, followed by the “Equals” function and finally the “Text” constant. Type the value ‘2’ in the “Text” constant.12-create-and-simulate-a-chat-app-in-your-mobile-prototypes
  21. Finally, next to this event, click “Else”. Add another “On Data Change” + “Set Active Panel” event, selecting Panel 1 to be set as active.

And that’s it! Click ‘Simulate’ to see and interact with your chat 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.

You can download our example here.