Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to simulate error messages in your prototypes

In this tutorial, you will learn how to simulate error messages in your interactive prototypes, i.e. when a user types in an email address in the wrong format, an error message will appear.

You can download the below example here.

 

Simulate error messages in your prototypes
If you leave the first field empty and you don’t insert a valid email address, you will be prompted by an error message

 

 

  • In a new web prototype, drag all the components you will need onto the canvas: 6 Text fields, 3 Input text fields, and a button.
  • Fill them in to match the example. Remember to include the error messages, which will only be displayed if the first input field is left empty or if a wrongly formatted email is typed in.
  • Select the error message Text fields, go to the Properties tab and tick the “Hide Component” option, to mark them hidden by default.

Error messages in UI Prototypes

  • Next, we will define the “Submit” button interactions. Select the button widget and go to the Events tab.
  • Add an “On Click” + “Show” event, selecting the “empty field” error message and click OK.
  • In the events tab, click on the ‘add condition’ link on the left of the event: you will be prompted by the expression builder, where you’ll define the error validation. In this case we are going to check if the first input field is empty. To do so, build an expression dragging – in this order – the first input text, the ‘equals’ function and – from the Constants tab – the text ‘AA’ to the expression builder. By default the Text constant is empty. Click OK twice to go back to the canvas.

Error messages in UI prototypes: conditions

  • In the events tab, click on the Else link to add an Hide event (which applies to all other cases, i.e. when any text appears in the input field).
  • Go back to the Events tab, click on the gear icon above the first event and add another “On Click” + “Hide” event, this time selecting the “wrong email format” error message. This time, when you add the condition, you will need to use the ‘not’ function. Drag, the NOT function, followed by the RegExp function (which checks a text against a regular expression), the Email input field and from the Constants tab, the ’email’ regular expression. Click OK twice.

Error messages in UI prototypes: conditions

Error messages in UI prototypes: events

That’s it! You can now simulate error messages in your prototypes!

Next tutorial > Create an input form with required fields