My app has multiple pages, each page the user adds info and continues to the next page. Where is the best place for the Continue control? Bottom & Centered for hierarchy or top right for consistency?
4 Answers
It is logical to have "Back" and "Continue" next to each other for symmetry, but a button for going to the next page after filling in information is typically at the bottom, since it follows the user's flow of filling in the form from top to bottom.
Why not have both "Back" and "Continue" at the bottom?
Also, I might consider "Next" instead of "Continue", since it seems to pair better with "Back".
Update: the placement of the on-screen keyboard is a legitimate concern, as mentioned in the other answer. That may affect whether the bottom is a viable location.
-
I think you're right. What about using only swipe left/right and getting rid of the Next/Back buttons altogether? Oct 9, 2015 at 10:27
-
1@YonatanGalili, that might leave the user confused, as they would not know that there are more pages of information, and there would be no clear way to submit the form. I think you do need the buttons, though also allowing swipe is a good idea.– user31143Oct 9, 2015 at 10:30
-
If the multiple views were incorporated into a view pager with indicator that should reduce the chances of confusion. You could also include a swipe right hint on the first page.– jimOct 9, 2015 at 15:25
I think it depends on the platform you're designing for. If it's iOS, then the standard is to put the "Continue" button at the top.
The reason behind this is the keyboard: when the user starts typing info in the "Placeholder" box, then the keyboard will hide the "Continue" button. Note that you can have the continue button on the keyboard itself.
Personally I wouldn't go for the back button at the bottom as it is not a standard pattern.
-
1I think the real answer is that the Next/Continue button actually should be at the bottom of the page, but more importantly, the Enter key on the keyboard (labelled as Next) should also serve the same function. I disagree that having the Next button at the bottom of the page is not a standard pattern; it very much is, especially on modal-like screens, on all devices (picture an app log-in screen).– user69458Oct 14, 2015 at 1:59
One article from the Nielsen Norman Group (4 iOS Rules to Break) suggests that you put your Submit/Continue/Next buttons at the bottom.
Even in iOS apps we recommend against following this pattern [putting the submit button at the top] for the simple reason that it goes against the natural top–bottom workflow on the page. As users fill in the form, they usually do it top to bottom. When they get to the end of it, they expect to find a Submit button right there, next to the last field they have completed.
This all falls back on what your user should expect. You could train your users to expect where the Continue button should be.
While I'm not sure of the exact nature of the form you shared I'll use it as an example:
When the user enters the Title, it should be very obvious that they need to press Continue. When they move on to the next page, they're still expecting a Continue button at the bottom. Even if the keyboard overlaps or changes the view in some way the user should expect a Continue button at the bottom based on their experience on the previous page.
The top '< back' and 'continue >' links are used as sign posting and orientation for navigation, whereas your button indicates a clear call to action.
Think of the flow and order of interaction. It should be in context with the investment from the user. If the user is filling out something, it makes sense to confirm it after the interaction. To ask them to confirm it outside of this context is disorientating and unnatural.
If you write out your interaction as a set of written instructions, your design would naturally follow this order. If your wrote your interactions out with 'continue >' at the top, the instructions would be out of sequence.
Hope this makes sense!?
Good luck!