Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
    
Hi AppsDev - You were asking loads of questions in this post, I've removed the additional ones to keep the focus on the main question. One question per post to make it easier to answer. –  JonW Apr 24 '13 at 8:15
    
Oh it's ok, thanks –  AppsDev Apr 24 '13 at 8:46
add comment

1 Answer

up vote 2 down vote accepted

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Thanks so much for your detailed explanation. I really find this approach the clearest, but I've never submitted an app yet and I'm afraid of breaking the guidelines stated in the document by using a navigation bar for non-hierarchical info... –  AppsDev Apr 24 '13 at 14:54
    
In case of rejection, just fix it and re-submit. I don't think this particular thing will be a problem, though. –  JOG Apr 24 '13 at 21:08
    
Ok, I'll definitely use this approach, thanks! –  AppsDev Apr 26 '13 at 7:36
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.