A practical guide to validation in Indigo Studio

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. RequireField 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.Once you grasp the concept of states and changes in Indigo Studio, you can prototype any kind of custom or traditional validation scenarios you can think of. The same concept can be applied not only for validation but also to any system transition through various states.

 

Before we start I would like to extend my thanks to George for his valuable inputs.

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, 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. 

This demonstration uses screens and screen states (to simulate validation)

•  Login Page
  • Start State
  • Tapped Login
  • Changed text Field

 

• Main Page
  • Start State

 

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.

  

If you already reviewed the help topic on understanding screens and screen states,you will realize that every subsequent state inherits everything from the one prior to it in the flow (i.e, from left to right). When you create a new state, it’s identical to the one prior to it. To make this state unique, change it to make it look or behave differentlyfrom what it’s based on. The net change is automatically recorded in the timeline.

 

NOTE: This change can be visual (i.e, adding/editing/removing elements) or can be a change to the interaction. We will discuss more about editing the interaction later in this article. The following figure attempts to conceptually explain the concept of recording “changes” as screen states.

  

To recreate the flow shown in the interaction explorer, create two screens- one for showing the login prompt (loginPage.screen), and one to show when the user successfully logs in (mainPage.screen). Whatever you design first inside each screen automatically becomes the start state of that screen.

 

  

From the Start State of LOGINPAGE, add the following two interactions:

 1. When the user TAPS LOGIN BUTTON, change this screen, to a new state.

•  This new state will show the validation message. In our case, add a  simple text label that shows this field is required. This is the “Change” you   are making to make this an unique state.

 

2. When the user CHANGES the TEXT FIELD change this screen to a new state (will create a branch in the interaction flow/explorer)

• On this new state created, select the LOGIN BUTTON and edit the  interaction. We will change it to NAVIGATE to SCREEN IN PROJECT, and  pick MainPage.Screen.

  

Optionally, on the CHANGED TEXT FIELD state, you can edit existing interaction using the following approach 

•  Change What happens…
•  When the user CLEARS text field…
•  Change this Screen…
• To Existing State, and pick the state where the validation message is being shown

 That’s it! It’s a lot simpler than it looks. As long as you remember that you can make changes to both the visual look and interactions at a later state.

 NOTE:

The names for the screen states are automatically generated based on the interaction defined and the name of the element. For example, TAPPED LOGIN implies that you added a TAP interaction on the LOGIN button. You can of course rename these states in the interaction explorer. 

Indigo Studio supports creating new screen states (e.g., tapped log in) when you add a user interaction (e.g., taps). In addition to this, you can also make an interaction point to a state that previously exists instead of creating a brand new state.

Download

You can download the above sample here .  Also attaching sample where name and password field is validated just like real life application. (Click here) .

Enjoy prototyping in Indigo Studio.