Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to simulate an iOS passcode screen

Learn how to create and simulate an iOS passcode screen in a mobile app wireframe in this tutorial.

Justinmind offers an extensive range of UI elements, including ready made, pre-built screens that reflect industry standards for iOS, Android and other OSS. With this tutorial, learn how to create an interactive iOS passcode screen with the OnVariableChange event.

You can download the below example here.

iPhone mobile app wireframe passcode combination screen.

Simulating an iOS passcode screen

 

1. Create an iPhone mobile app prototype.

2. From the iPhone iOS9 Screen Examples widget library, drag the Passcode Screen to the canvas and position it so that it covers the whole of the iPhone screen.

3. Next, drag a text box onto the canvas above the text box that reads ‘Touch ID or Enter Passcode’. Remove all text from the text box so that it is empty. 

2-mobile-wireframe-passcode-screen-UI-elements

4. The text box is simply to validate that the correct numbers are inputted in order for the user to pass to the lock screen, there’s no visual requirement. Mark it as hidden in the Properties tab.

5. Now, go to the Variables tab and add a new variable by clicking on the Plus icon. Name the variable “passcode-dots” and type 0 into the Default Value input field.

3-mobile-wireframe-passcode-screen-variable

6. Finally add a second screen. This will be the iPhone’s lock screen. Rename it “Screen-2”, drag the Lock Screen from the iPhone iOS9 Screen Examples widget library and position it so that it covers the whole of the screen.

Adding events to make your prototype interactive

First of all, we’ll add two events that will allow the user to select a number from the keypad. Note that in our example our passcode combination  is 1234. If you wish to use a different passcode, simply follow the steps below and replace your combination as necessary. 

1. In the Outline tab, select ‘Button-1′ from within the ‘Passcode-Screen_1’ and go to the Events tab.

2. Add an “On Tap” + “Set Value” event, selecting the text box that you first dragged to the canvas.

3. Below, select ‘Calculated’ and add the following expression:

Drag the text box that you first added to the canvas to the first position followed by the CONCAT function and then type the number ‘1’ into the final position. Click OK twice.

4. Back in the Events tab, click on the gear icon above the event you’ve just created and select the “Add action” option.

5. Add another “On Tap” + “Set Value” event, and select the variable from the Variables tab.

6. Below, select ‘Calculated’ and add the following expression:

Drag the variable from the Variables tab to the first position followed by the PLUS function and then type the number ‘1’ into the final position. Click OK twice.

4-mobile-wireframe-passcode-screen-events

Repeat these steps for the other buttons, changing the number in the first expression to the number of the button. The number in the second expression must remain the same. 

Next, we’ll add an event that will change the appearance of the passcode confirmation dot when the correct number at the right time in the sequence is inputted by the user.

1. Navigate to Screen 1 in the Outline tab. Select “On Variable Change” from the first drop down and from the “Select a variable” drop down, select “Any variable”, (if you have more than one variable, you need to select the passcode-dots variable). In the last drop down, select “Change Style”. Select the ‘Dot-1’ ellipse from within the Passcode group in the ‘Passcode-Screen_1’ in the Outline tab. Below, tick the Background box and change the color to white. Click OK.

2. On the left of this event, click the ‘Add condition’ option. Add the following expression:

Drag the variable from the Variables tab to the first position followed by the EQUALS function and then type the number ‘1’ into the final position. Click OK.

3. On the right of this event, click the ‘Else’ option. Select “On Variable Change” from the first drop down and from the “Select a variable” drop down, select “Any variable”. In the last drop down, select “Change Style”. Select the ‘Dot-2’ ellipse from within the Passcode group in the ‘Passcode-Screen_1’ in the Outline tab. Below, tick the Background box and change the color to white. Click OK.

4. On the left of this event, click the ‘Else add condition’ option. Add the following expression:

Drag the variable from the Variables tab to the first position followed by the EQUALS function and then type the number ‘2’ into the final position. Click OK.

5. Repeat these steps for Panels 3 and 4, changing the dot ellipse and the number in the expression accordingly in both instances.

5-mobile-wireframe-passcode-screen-events-2

Now, we will add an event that will allow the user to access the lock screen upon entering the passcode combination successfully.

1. Add another event to Screen 1. Select “On Variable Change” from the first drop down and from the “Select a variable” drop down, select “Any variable”. In the last drop down, select “Link To”. Select Screen 2 from the Outline tab. Below, add a fade transition effect and select ‘no’ from the Open in new tab option. Click OK.

2. On the left of this event, select the ‘Add condition’ option. Add the following expression:

Drag the COUNT function to the first position. Drag the text box that you first added to the canvas to the second position. Drag the EQUALS function to the third position. Type the number ‘4’ into the fourth. Drag the & function into the fifth. Drag the text box that you first added to the canvas to the sixth, followed by the EQUALS function and finally type 1234 (the full passcode combination) into the last position. Click OK.

3. On the right of this event, click the ‘Else’ option. Select “On Variable Change” from the first drop down and from the “Select a variable” drop down, select “Any variable”. In the last drop down, select “Set Value”. Select the text box that you first dragged to the canvas from the Outline tab. Click OK.

4. Now add another action by clicking the gear icon above this event and selecting the ‘Add action’ option. Select “On Variable Change” from the first drop down and from the “Select a variable” drop down, select “Any variable”. In the last drop down, select “Set Value”. Select the variable from the Variables tab. Below, type the number ‘0’ into the input text field. Click OK.

5. Finally, we will add a series of actions to change the style of the passcode confirmation dots. These will be “On Variable Change” + “Change Style” events and should be added one after the other by clicking on the gear icon above the first “On Variable Change” + “Set Value” event in this series and selecting the ‘Add action after selected’ option each time. The variable you select will always be “Any variable”.

Remember to change the dot that you are changing the style of in each case, tick the Background box and change and make the color transparent in each instance.

6. Change all the links in this action series to ‘WITH previous’, apart from the final link between the last two ‘Change Style’ events.

7. Finally, navigate back to the first “On Tap” + “Set Value” event in this series and on the left of this event, select the ‘Else when’ option. Add the following expression:

Drag the COUNT function to the first position. Drag the text box that you first added to the canvas to the second position. Drag the EQUALS function to the third position. Type the number ‘4’ into the fourth. Click OK.

6-mobile-wireframe-passcode-screen-events-3

And that’s it! Click ‘Simulate’ to see and interact with your prototype. Add your passcode combination to be taken to the Lock screen of your prototype.

 

Next tutorial > Create a screen flow validation using variables