How to validate input with Protopie

Introduction

I was planning to write for a long time around prototyping and now time has come. I am planning to make it regular and talk more about how to prototype.

While prototyping, you want to at least validate some basic inputs. With the capabilities of design tools’ prototyping skills, it is not being so much possible. That’s why I’ll be showing how we can easily make it happen with Protopie.

How Protopie works

Protopie is a prototyping tool in which you can create interactive prototypes. If you want to learn more about Protopie, you can visit their page. It is a very versatile tool.

I want to give brief information how Protopie is working before we start. You need to have an object and there are triggers and responses reacting to those triggers. This is the very basic logic behind how Protopie works. Let’s assume that you have a button and when user clicks on that button you want to scale the profile picture size. So in this case:

Button -> Object, Tap -> Trigger, Scale -> Response

How Protopie works
Trigger list in Protopie
Response list in Protopie

We do not need to have a fancy screen for the purpose of creating the prototype. That’s why I created a simple one time password screen. So let’s get started.

You can basically create these kind of basic screens in Protopie as well.

Let’s start with the conditions that we will be needing. This is the very basic one and you can extend for your needs:

  1. Character limit should 4 for the input.
  2. Response should be triggered after user enters exactly 4 characters.
  3. When user enters the correct code, user needs to be directed to the next screen.
  4. When user enters wrong code, user needs to get error message.
  5. When user enters wrong code after wrong code, a visual feedback needs to be given to the user.
  6. Correct code should be: 7584

First, how to listen the changes on the Input

There is a great feature for this in Protopie: Detect. We will start with listening the changes on the input.

A response is activated when a layer property or variable changes.

But we need to make sure that user cannot enter more than 4 characters. This can easily be achieved by Formula.

A little formula is needed to achieve character limitation.

Correct code condition

So let’s start with correct code condition. If user enters the correct code, we need to give a little visual feedback and then direct to the next screen. We will be adding a Condition under Detect on our input.

Condition for success code

This condition checks for the length of the input so that it gets triggered. If length is equal to 4 then it checks if password is matching the one we defined.

We should not forget that we will direct user to the next screen because this is the success state.

Jump exists in the response list

Wrong code condition

Just like the success condition definition but now we need to state that our input is not equal to 7584.

Condition for wrong code

Repeating error condition

User can also enter the wrong code again after entering wrong code, right? But we are not working with any developer tool here to check that condition that’s why there are a bunch of tricks to achieve the result we want. I created a simple error state as following. When user enters the wrong code, this will be appearing on the screen by sliding down. This means that Y of error layer will be changing. If user enters the wrong code again, I’ll already be knowing the new Y of this layer. So if there is a change in Y, then i’ll shake error state a little 😄

Error code state
Let’s shake it

Let’s sum it up

  1. Created an input
  2. Detected the changes in the input
  3. Created the conditions (error, success, repeating error)

Final Result

Working prototype

I hope you had fun reading.

You can access to the resource file here if you want to have a look at.

👋🏽

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store