iOS multi-step form and user input validation

Question

I need to design a form that may consist of 3 or 4 steps, all of them requesting both mandatory and optional data. The overall form contains a lot of data inputs, so I thought it would be better to split the form into pages or steps, to avoid having a too long vertical scrolling.

I can't find any practical example of such a long form in an existing iOS app, since most of them just request few data to create an account, but my app requires collecting more user input.

Would it be a good approach to build a view for each form step, and push them all in a navigation controller?

The idea is to have the back button in the navigation bar to allow going to the previous step, and a "next" button to go forward, I don't know if placing it in the navigation bar as well, or at the bottom edge of the current view. Or maybe could I use a stepper with arrows similar to the Mail app? I couldn't find anything about it in iOS Human Interface Guidelines, only a stepper with +/- buttons. Or a segmented control, with a segment per step?

However, in iOS Human Interface Guidelines, in navigation bar section I've read that it is intended for "navigation through an information hierarchy" (iOS Human Interface Guidelines). I don't know how strict is Apple when applying the guidelines in the document when submitting to the App Store, and if using this approach for peer views, as in this case, would be rejected. Another option I thought, it was using instead a page control and a scroll view... but here comes into play input validation. I suppose that for a long multistep form it should be better to validate each step's inputs before allowing continue, shouldn't it? I find easier to handle this in the first approach (navigation controller and bar), simply enabling the "next" button when the inputs correctly fulfilled, than in the page control approach (where I actually don't know if it is possible to momentarily disable forward page scrolling).

Answer 1

Regarding the Next button on top or bottom: Do both!

Sounds like a great idea to split it into multiple steps, especially if you need to validate some parts before continuing to others. In that case, you will have to disable the Next button in the stepper, or in your custom navigation bar.

Starting from iOS, the Back button should be found in the top left corner. Now, where to put the corresponding "Forward" or "Next" button?

Keeping both of the buttons on top, in the navigation bar, will make it easier to flip between pages. I would place them there, if you expect users to navigate back and forth between the pages.

Working through the form from top, downwards, though, will make it natural to place the next button in the bottom. If you expect users to focus on each input field, one by one, from top to bottom, I would definitely put the next button in the bottom. If any of the pages are higher than what fits on screen, then even more so.

Also, if you need to clarify your validation before continuing, informative text fits better by the bottom Next button, than on top by the navigation bar.

Examples: Left: Scrollview with navigation in top and bottom of scrollable view. Middle: Clear Next button, waiting in the end of the page, as a complement. Right: Validation.

^{download bmml source – Wireframes created with Balsamiq Mockups}