One of the primary principles in designing forms for the web is to keep them as simple and easy as possible. You can generally expect about a 15% drop off for every step in the process – literally every field in the form – as each discrete step is an opportunity for the user to reconsider continuing through the form. Easing the flow through something like a shopping cart, or registration form, is one of the primary objectives in great UI design. If we can reduce the resistance to the activity on the part of the user, the benefit is an increase is sales, more leads, or more users – all very good things.
The same principle in the mobile app world is doubly important when you consider that the screens and keyboards are considerably smaller, and the users could very well be filling out their information while in line for an ATM or while they’re running between meetings. The chances of losing them halfway through the process is much, much greater, so how we construct the user-flow through forms is critical.
I recently came upon an example of a four-step process for new user registrations in an iPhone app that I think is a model for reducing the resistance to sign-up to the absolute bare minimum. So, I’d like to highlight the four essential steps as a case study in mobile registration.
Meet Polar, a polling app that’s currently live in iTunes store.
Step One: Present only the minimum number of fields, and leave all the rest of the information for later. It’s a dwindling few of us who are willing to fill out a form that has any more than four fields. Often, these forms will be reduced down to just an email, a password, and a password confirmation. In the case of Polar they have features which rely on usernames, and sharing amongst friends, but they still strive to keep the fields to a minimum. The one subtlety here is that instead of the default keyboard, which usually has “previous/next” buttons above the letter keys, in Polar these are removed. The next button in the lower right will move you from field to field, but the intention is to render the previous button moot but have the full experience in a single screen.
The instructional copy is also shown within the field itself, saving space to reduce the entirety of the form to a single screen without any scrolling.
Step Two: Validation happens in every field, as the user is completing the form. In order to keep the process as neat as possible, the error messages are viewed as overlays, so that the user can immediately correct the input before moving on.
Step Three: As each field is validated and complete, check marks appear to feedback to the user that each form is good to go. The call to action button in the lower right changes from “Next” to “Go,” signaling that the form is complete and triggering submission.
Step Four: One last little element, the ability to show or hide the password, is a small way to keep things moving and confirm that everything is just right. Push Go, and the form is submitted and the user is sent back into the app to continue.
Obviously there are more elements that happen before encountering this form, including the ability to register via Twitter or Facebook – other options to speed the user through the process. But when a unique registration form is required, following these few steps can make for a much better user experience.
Simple Four-Step In-App Registration
by Saren Sakurai on January 28th, 2013 | ~ minute read
