Introduction
At times it is expected to showcase validation mechanism in prototyping. Since prototyping tools are solely meant to prototype, this sort of functionalities may not be available. However considering the totality it can be debated that validation is an integral part of any application and many would like to capture it. Be it a developer, tester or Business analyst; everybody understands data validation and certainly UX Expert are no exception.
Today many developer tools offer various ways and means to support validation. Microsoft .NET provides validation controls e.g. Required Field validator, Range validator etc. and certainly other tools may have similar sorts of offerings to make developers life easy.
The good news is that it is possible to demonstrate validation using Indigo Studio. Though it may seem little difficult to start with but eventually the approach will make more sense. The same concept can be applied not only for validation but also to any system transition through various states.
Before we start please go through Screens Overview & Key Concepts . If you are new to Indigo Studio please visit Indigo Studio Help.
What is state?
Use State when you have minor variation in the screen and/or screen transition is happening from one state to another. In this way it becomes very easy to maintain different states and reusability increases. For a detailed guideline regarding states refer this link. (Click here)
Demo
For simplicity I have chosen a very simple flow where all you need is to enter your name to go to next screen by pressing Login button. If name field is blank than a label is shown above text box (in red color) instructing to enter text. As soon as some text is entered the label goes away and again reappears when text box is blank. You can simulate it by entering text and delete it using Backspace.
This prototype is available online. Click here.
As per the demonstration there are two screens (a) Login Page (b) Main Page. Similarly in prototype we will make use of only 2 screens using “States”.
Below is the actual screen shot of state transition for our application in Indigo Studio. Analyze the flow and refer the description provided against each state.
Q - How the button in state 1.1.1 / 1.2 does redirect you to next page? Whereas the same button in all other states doesn’t? They are highlighted above inside brown circles.
Ans - In this state a duplicate Login button of same size is placed over original Login button at the same position. This new button points to next screen. That said the original Login button is hidden underneath the new button.
Similarly when text field is cleared (empty) the duplicate new button is removed and the original button underneath comes to front.
Note: Original button (As in start page) doesn’t point to any page. It displays the red label on top of text field when clicked.
Epilogue
We have now reached the final part where the focus would be to optimize the states by eliminating redundancy. If a state is similar to the other state than refer it instead of maintaining duplicate state.
A state is starting point for following states in the sequence. Therefore you should refer to a state that exists in the beginning of the transition.
For example there are two states highlighted inside green rectangle but only the bottom green rectangle can point to top green rectangle not vice versa. The bottom green state is not the first item in the sequence, whereas the top one does. For brown color, the top one needs to refer to bottom.
1st Stage Refinement: Refinement of states inside brown rectangle
2nd Stage Refinement: Refinement of states inside green rectangle
Comparison
Comparing our final draft screen (in Indigo Studio) with initial state diagram will yield following result.
Download
You can download the above sample here. I have kept 3 versions of Login page as described in this topic. Enjoy prototyping in Indigo Studio.