9

I have about 5 sets of forms to be filled up by the user, one by one. Most of the fields in these set of forms are mandatory so it is obvious that the user has to check out all these 5 forms. Now I need your tips and guidance on what is the best approach to make this form less annoying.

Consider this as an e-mail designer console where you keep editing the form on the left and you get a live preview over the right.

1. The Same Boring long form, again!:

Here is my first approach, although I'm never going to follow this. So the simulator/live preview is fixed to the right of the screen and the form on the left is edited. The 5 froms are placed one below the another. The user has to do the poor scrolling all the time. I find this a dis-satisfying (at-least for my implementation) UX because the user never knows what was one top and what is gonna come next. Scroll Scroll Scroll (up-down, down-up)...

Here is the screen shot. enter image description here

2. Solution 2: (no more scrolling) - A dynamic console approach

Now I have put these forms in an accordion menu format. Only one form is visible at a time and others are folded-in. The web page has no scroll bars, everything is crystal clear and user knows what's next. The user has a next button at the end of each individual form. This would show him the next form in the next accordion menu when it opens up. I feel this approach is good since I would also implement individual form validation, thereby reducing the pain in validating the entire form at the end.

Here is the screen shot. enter image description here

3. Much Simplified, More Space.

So this approach is some what similar to second but no accordion. Its just one form after another. But has a progress bar at the top allowing the user to navigate forms through it. I like this approach because it has much space for the form contents. In the previous type the according head was taking some vertical spaces so this minimizes it.

Screen Shot. enter image description here

Improve this question
2
  • 7
    without wanting to write a full answer, because others no doubt will, option 3 is by far the best option, not least in terms of progressive disclosure or minimisation of cognitive burden. This approach also lets your user build a mental model of the system and the steps required to complete the process.
    – colmcq
    Commented Aug 21, 2012 at 19:15
  • Just a sidenote: in case the live preview is smaller than the screen height and if some of your forms turn out to be scrollable, you can still make its position fixed to screen, rather than fixed to document therefore eliminating the scrolling back-and-forth problem
    – Aadaam
    Commented Aug 21, 2012 at 23:42

2 Answers 2

Reset to default
8

I would suggest option 3. While 2 and 3 are close, the process indicator at the top of 3 is much clean/less distracting IMHO. The user has context to how far along they are in the overall process and should be able to intuitively click back and forth using the step indicator at the top of the page.

Improve this answer
7

Three gives users a strong sense of what's going to be required, how much more time they're going to have to spend, and a feeling for how the system is 'modelled'. It also lets them guess what answers are relevant for ambiguous questions in the current page by excluding information that will obviously be covered in later pages.

Two also provides these benefits, but with increased 'noise' thanks to the accordion control. With Three, users are also going to be less likely to try and progress in a non-linear fashion, because the progress bar communicates a linear order slightly better than the collapsing divs.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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