Designing a text messaging app

With Justinmind, you can create a text messaging app in your mobile prototypes with the help of this tutorial.

chatbubble-anim

To create a text messaging app in your prototype, follow the steps below:

Creating your mobile app

  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” widget.
  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 Field together (right click in the selection and choose “Group”).
    • Rename this group “Input-text-box” in the Properties palette.
  6. 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
  7. 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”.
  8. 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 (271 x 94 pixels), change its color to white and make its edges round.
  9. Now, drag a Triangle to the right edge of the Rectangle, resize it (27 x 19 pixels) and change its color to white.
    • This element simply complements 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”.
  10. Back in the canvas, select the Data Grid widget from the Basic Widget library.
    • In the dialog that appears, write “messenger” in the Identifier field.
    • From the Data Masters drop down, select your Data Master.
    • Below, move the Text and Time Data Master Fields from left to right, and click “OK”.
    • 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 it (373 x 124 pixels), to match our example.
    • 4-4-create-and-simulate-a-chat-app-in-your-mobile-prototypes
  11. Now, go to the Outline palette 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
  12. Add an Image widget to the canvas, place it above the Button in the “Input-text-box” group, on the right of the “Bubble-right” group.
    • Choose an image from your folders that will serve as the first user’s chat avatar.
    • Resize it (43 x 45 pixels).
  13. 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.
  14. 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.
    • 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
  15. Now, create another Dynamic Panel.
  16. Resize it (375 x 531 pixels), change the layout to “Vertical Layout”, and change the alignment to “Bottom”.
    • Place the Data Grid inside this in the Outline palette.
    • 5-3-create-and-simulate-a-chat-app-in-your-mobile-prototypes
  17. 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’.
  18. 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 go to the Events palette.
    • Add an “On Page Load” + “Set Value” event, selecting the Input Text Field from the Outline palette (from within the “Input-text-box” group).
    • Below, set the value to Calculated and drag the “Chat-text” variable to the conditional expression 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 term in the conditional expression.
    • Drag the “System Time” constant to the second term, followed by two “Text” constants. Type the value ‘0’ into the first ‘5’ into the second and click “OK” twice.
  2. Add another event by clicking “Add Event”).
    • This will be an “On Focus In” + “Move” event, with “Input-text-box” selected in the Outline palette.
    • Below, change the top position to 390 pixels and add a linear easing effect at 200 ms.
    • Click “OK”.
  3. Add another event now (“Add Event”). This will be another “On Focus Out” + “Move” event, with “Input-text-box” selected in the Outline palette.
    • Below, change the top position to 599 pixels.
    • Click “OK”.
  4. On the left of this event, click “add condition”. In the conditional builder that appears, add the following condition:
    • Drag the Input Text Field from “Input-text-box” in the Outline palette to the first term in the conditional expression.
    • Next, drag the “Equals” function, followed by the “Text” constant.
    • Click “OK”.
    • 9-create-and-simulate-a-chat-app-in-your-mobile-prototypes
  5. 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 palette.
    • Below, change the top position to 599 pixels.
    • Click “OK”.
  6. 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 condition:
    • Drag the Input Text Field from “Input-text-box” group to the first term in the conditional expression builder, and drag the Toggle variable to the third. Leave the second empty.
    • Click “OK”.
  7. 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
  8. Right click on this event to add another: “On Focus Out” + “Set Value” with the Input Text Field from “Input-text-box” group.
    • Click “OK”.
    • Change the link between the last two events to “WITH previous”.
    • 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.
    • Add it to the Dynamic Panel that contains “Messenger” and place it on top of the data grid in the Outline palette.
  9. Then, add the following event:
    • Right click on the previous event to add another: “On Focus Out” + “Scroll To” with the rRctangle 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
  10. 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.
  11. 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
  12. Now, add a new event by clicking on the “Add Event” link.
    • This will be another “On Focus Out” + “Set Value”, this time selecting the Toggle-variable from the Variables palette.
    • Below, leave the value as fixed and enter the number ‘2’ into the text field and click “OK”.
  13. On the left of this event, add the following condition:
    • Drag the Toggle-variable to the first term of the conditional expression, followed by the “Equals” function and then the “Text” constant.
    • Type the value ‘1’ into the text constant and click “OK”.
  14. 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 palette.
    • 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
  15. 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, select the “Grid_cell” and go back to the Events palette.
    • Add an “On Data Change” + “Set Active Panel” event, selecting Panel 2 from the Outline palette.
    • Click “OK”.
  16. On the left of this event, add the following condition:
    • Drag the “Select” function to the first term in conditional the expression.
    • Drag the “Grid_cell” from the Outline palette to the second, followed by the “toggle” Data Master Dield from the Data Masters tab, followed by the “Equals” function and finally the “Text” constant.
    • Type the value ‘2’ in the “Text” constant.
    • Click “OK”.
    • 12-create-and-simulate-a-chat-app-in-your-mobile-prototypes
  17. 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.

You can download our example here.