How to validate input with Protopie
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
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.
Let’s start with the conditions that we will be needing. This is the very basic one and you can extend for your needs:
- Character limit should 4 for the input.
- Response should be triggered after user enters exactly 4 characters.
- When user enters the correct code, user needs to be directed to the next screen.
- When user enters wrong code, user needs to get error message.
- When user enters wrong code after wrong code, a visual feedback needs to be given to the user.
- 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.
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.
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.
Wrong code condition
Just like the success condition definition but now we need to state that our input is not equal to 7584.
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 😄
Let’s sum it up
- Created an input
- Detected the changes in the input
- Created the conditions (error, success, repeating error)
I hope you had fun reading.
You can access to the resource file here if you want to have a look at.