Prototype forms with real validation

Bradley Simpson
bradley@atomic.io

Follow this tutorial to see how to make your own sign up form

Providing simple and efficient ways for users to get data into the system they’re using is a critical component of good product design. Making sure the forms in your product are quick and easy to use can have a big effect on completion rates and overall use of your product.

However, you can only reach a high level of confidence in your solution, if it has gone through the rigors of testing with users.

For example, can they leave some fields blank? What if they don’t enter a correct email address — when does it notify them? Do they read the terms if they are placed above the sign up button versus below? Are the requirements for the password prominent enough, and does the user usually enter them correctly on the first go?

Having a form prototype that looks, feels, and behaves like the real thing is the best way to decrease the risk and increase the confidence in the solution.

Previously you probably either had to test an unrealistic prototype with users and guess what the gaps were, or spend valuable time and engineering resources building a realistic one.

But with Atomic, there is no need for you to compromise on time or realism when testing your forms.

To help you build your own realistic signup form, we’ve just published a step by step tutorial that walks you through how:

Tutorial: Sign up form


Have ideas or questions about making other parallax effects in Atomic? Join the conversation in our community.

New to Atomic? It’s free to prototype in Atomic, easy to get started and insanely powerful!

Posted 4 July 2018

Advanced interactive design & prototyping.