0

I think that making a multipage form navigation is not so simple as it seems, especially for next/prev buttons. Generally, within a multipage form (for example a cart, but in my case I've got a HUGE 10-pages mega form for made for asking quotations on tech products), you'll likely have a 'page 1 of x' small text, and a probably some kind of breadcrumbs-like indicators/navigators. And finally, the next/prev buttons.

The next/prev buttons won't really work if placed at the beginnings (top) of each slide, because then the user can be fooled into thinking he can go on even if he didn't fill in the following fields.

They won't work as well if placed at the end of the page (at least for me), especially in js-driven multipage forms where one page 'slides' into the other, because you'll end up loosing contact with the button after every click (because each slide will obviously have different height than the others).

So what? How to solve this ux trouble :) ?

1

The mockup below is just and example but some general advice would be to save some fixed space to display

  • "Where I am?" => Indicate the place where they are (eg: page 3 of 10).
  • "What should I do?" => I forgot to put it in the mockup but it could be a tittle like "Answer all questions to continue".
  • "Where I can go?" => Show the navigation buttons, so they know where they can move to (and imply what they can do, like change or review some previous answer).
  • How much progress have I done? => Show some kind of "progress" signifier. I used a bar for each page's answers (but find the one that better work for your requirent) and a 3/10 (x out of Y pages ) for pages (also for this there are several ways to display it).
  • "When can I move on?" => Use some indication to let users know when they completed the task and are able to continue to the next task. In the mockeup I used some visual clues, like adding the text "completed", the color green and enabling the "next page" button, also adding the inviting right arrow :)
  • Where I can find all this information? => If it's convenient (don't force it), it would be desirable to keep all the previous data together and fixed so it's easy for users to scan and remember.

Again, take this just as a guide for some of the core issues to think about when implementing your final design.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

0

Ideally, they would be sticky to the bottom of the window (not bottom of page content) so that they appear in the same place on every screen. That way, the user can navigate through the page content and decide if they want to go back or to the next page.

  • It's indeed a difficult topic.. By making them sticky to the window, if the page itself has not a sticky footer, you'll end up having buttons ovelapping content OR, buttons too far from content (or more precisely, too much white space between buttons and content if the content itself is not enough to fill it, so probably a situation that will vary page by page) – Luca Reghellin Jul 17 '18 at 9:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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